+
+ react-text-mask
+
+
+
+ );
+ }
+}
+
+FormattedInputs.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(FormattedInputs);
diff --git a/front/odiparpack/app/containers/Forms/demos/HighlightSuggest.js b/front/odiparpack/app/containers/Forms/demos/HighlightSuggest.js
new file mode 100644
index 0000000..ee13fd7
--- /dev/null
+++ b/front/odiparpack/app/containers/Forms/demos/HighlightSuggest.js
@@ -0,0 +1,198 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Autosuggest from 'react-autosuggest';
+import match from 'autosuggest-highlight/match';
+import parse from 'autosuggest-highlight/parse';
+import { withStyles } from '@material-ui/core/styles';
+
+import { TextField, Paper, MenuItem } from '@material-ui/core';
+
+const suggestions = [
+ { label: 'Afghanistan' },
+ { label: 'Aland Islands' },
+ { label: 'Albania' },
+ { label: 'Algeria' },
+ { label: 'American Samoa' },
+ { label: 'Andorra' },
+ { label: 'Angola' },
+ { label: 'Anguilla' },
+ { label: 'Antarctica' },
+ { label: 'Antigua and Barbuda' },
+ { label: 'Argentina' },
+ { label: 'Armenia' },
+ { label: 'Aruba' },
+ { label: 'Australia' },
+ { label: 'Austria' },
+ { label: 'Azerbaijan' },
+ { label: 'Bahamas' },
+ { label: 'Bahrain' },
+ { label: 'Bangladesh' },
+ { label: 'Barbados' },
+ { label: 'Belarus' },
+ { label: 'Belgium' },
+ { label: 'Belize' },
+ { label: 'Benin' },
+ { label: 'Bermuda' },
+ { label: 'Bhutan' },
+ { label: 'Bolivia, Plurinational State of' },
+ { label: 'Bonaire, Sint Eustatius and Saba' },
+ { label: 'Bosnia and Herzegovina' },
+ { label: 'Botswana' },
+ { label: 'Bouvet Island' },
+ { label: 'Brazil' },
+ { label: 'British Indian Ocean Territory' },
+ { label: 'Brunei Darussalam' },
+];
+
+function renderInput(inputProps) {
+ const { classes, ref, ...other } = inputProps;
+
+ return (
+
+ Kg,
+ }}
+ />
+ Kg,
+ }}
+ >
+ {ranges.map(option => (
+
+ ))}
+
+
+ Amount
+ $}
+ />
+
+
+ Kg}
+ inputProps={{
+ 'aria-label': 'Weight',
+ }}
+ />
+ Weight
+
+
+ Password
+
+
+ {this.state.showPassword ?
+
+ )}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ {selected.map(value =>
+ )}
+ MenuProps={MenuProps}
+ >
+ {names.map(name => (
+
+ ))}
+
+
+
+
+
+ Gender
+
+
+
+
+
+
+ Gender
+
+
+ You can display an error
+
+
+
+
+
+ Radio without label
+ Radio can also be used standalone, without the wrapper.
+
+
+ this.setState({ valueRange: value })}
+ value={this.state.valueRange}
+ />
+
+
+ `${value} kg`}
+ value={this.state.valueRangeLabel}
+ onChange={value => this.setState({ valueRangeLabel: value })}
+ />
+
+
+ this.handleChange(value)}
+ />
+
+
+ this.handleChange(value)}
+ />
+
+
+ this.handleChange(value)}
+ />
+
+
+
+
+
+
+ Simple Form Example
+
+
+ The delay between when you click (Submit) and when the alert dialog pops up is intentional, to simulate server latency.
+
+
+
+
+
+ );
+ }
+}
+
+renderRadioGroup.propTypes = {
+ input: PropTypes.object.isRequired,
+};
+
+ReduxFormDemo.propTypes = {
+ classes: PropTypes.object.isRequired,
+ handleSubmit: PropTypes.func.isRequired,
+ reset: PropTypes.func.isRequired,
+ pristine: PropTypes.bool.isRequired,
+ submitting: PropTypes.bool.isRequired,
+ init: PropTypes.func.isRequired,
+ clear: PropTypes.func.isRequired,
+};
+
+const mapDispatchToProps = dispatch => ({
+ init: bindActionCreators(initAction, dispatch),
+ clear: () => dispatch(clearAction),
+});
+
+const ReduxFormMapped = reduxForm({
+ form: 'immutableExample',
+ enableReinitialize: true,
+})(ReduxFormDemo);
+
+const reducer = 'initval';
+const FormInit = connect(
+ state => ({
+ force: state,
+ initialValues: state.getIn([reducer, 'formValues'])
+ }),
+ mapDispatchToProps,
+)(ReduxFormMapped);
+
+export default withStyles(styles)(FormInit);
diff --git a/front/odiparpack/app/containers/Forms/demos/SelectSuggestionTags.js b/front/odiparpack/app/containers/Forms/demos/SelectSuggestionTags.js
new file mode 100644
index 0000000..125fd23
--- /dev/null
+++ b/front/odiparpack/app/containers/Forms/demos/SelectSuggestionTags.js
@@ -0,0 +1,379 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Select from 'react-select';
+import { emphasize, makeStyles, useTheme } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import NoSsr from '@material-ui/core/NoSsr';
+import TextField from '@material-ui/core/TextField';
+import Paper from '@material-ui/core/Paper';
+import Chip from '@material-ui/core/Chip';
+import MenuItem from '@material-ui/core/MenuItem';
+import CancelIcon from '@material-ui/icons/Cancel';
+
+const suggestions = [
+ { label: 'Afghanistan' },
+ { label: 'Aland Islands' },
+ { label: 'Albania' },
+ { label: 'Algeria' },
+ { label: 'American Samoa' },
+ { label: 'Andorra' },
+ { label: 'Angola' },
+ { label: 'Anguilla' },
+ { label: 'Antarctica' },
+ { label: 'Antigua and Barbuda' },
+ { label: 'Argentina' },
+ { label: 'Armenia' },
+ { label: 'Aruba' },
+ { label: 'Australia' },
+ { label: 'Austria' },
+ { label: 'Azerbaijan' },
+ { label: 'Bahamas' },
+ { label: 'Bahrain' },
+ { label: 'Bangladesh' },
+ { label: 'Barbados' },
+ { label: 'Belarus' },
+ { label: 'Belgium' },
+ { label: 'Belize' },
+ { label: 'Benin' },
+ { label: 'Bermuda' },
+ { label: 'Bhutan' },
+ { label: 'Bolivia, Plurinational State of' },
+ { label: 'Bonaire, Sint Eustatius and Saba' },
+ { label: 'Bosnia and Herzegovina' },
+ { label: 'Botswana' },
+ { label: 'Bouvet Island' },
+ { label: 'Brazil' },
+ { label: 'British Indian Ocean Territory' },
+ { label: 'Brunei Darussalam' },
+].map(suggestion => ({
+ value: suggestion.label,
+ label: suggestion.label,
+}));
+
+const useStyles = makeStyles(theme => ({
+ root: {
+ flexGrow: 1,
+ height: 250,
+ },
+ input: {
+ display: 'flex',
+ padding: 0,
+ height: 'auto',
+ },
+ valueContainer: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ flex: 1,
+ alignItems: 'center',
+ overflow: 'hidden',
+ },
+ chip: {
+ margin: theme.spacing(0.5, 0.25),
+ },
+ chipFocused: {
+ backgroundColor: emphasize(
+ theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[700],
+ 0.08,
+ ),
+ },
+ noOptionsMessage: {
+ padding: theme.spacing(1, 2),
+ },
+ singleValue: {
+ fontSize: 16,
+ },
+ placeholder: {
+ position: 'absolute',
+ left: 8,
+ bottom: 6,
+ fontSize: 16,
+ },
+ paper: {
+ position: 'absolute',
+ zIndex: 1,
+ marginTop: theme.spacing(1),
+ left: 0,
+ right: 0,
+ },
+}));
+
+function NoOptionsMessage(props) {
+ const { selectProps, innerProps, children } = props;
+ return (
+
+
+
+
+
+ {children}
;
+}
+
+ValueContainer.propTypes = {
+ children: PropTypes.node,
+ selectProps: PropTypes.object.isRequired,
+};
+
+ValueContainer.defaultProps = {
+ children: null,
+};
+
+function MultiValue(props) {
+ const {
+ children,
+ selectProps,
+ removeProps,
+ isFocused
+ } = props;
+ return (
+
+
+
+
+
+ );
+}
diff --git a/front/odiparpack/app/containers/Forms/demos/SelectSuggestions.js b/front/odiparpack/app/containers/Forms/demos/SelectSuggestions.js
new file mode 100644
index 0000000..2986aff
--- /dev/null
+++ b/front/odiparpack/app/containers/Forms/demos/SelectSuggestions.js
@@ -0,0 +1,378 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Select from 'react-select';
+import { emphasize, makeStyles, useTheme } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import NoSsr from '@material-ui/core/NoSsr';
+import TextField from '@material-ui/core/TextField';
+import Paper from '@material-ui/core/Paper';
+import Chip from '@material-ui/core/Chip';
+import MenuItem from '@material-ui/core/MenuItem';
+import CancelIcon from '@material-ui/icons/Cancel';
+
+const suggestions = [
+ { label: 'Afghanistan' },
+ { label: 'Aland Islands' },
+ { label: 'Albania' },
+ { label: 'Algeria' },
+ { label: 'American Samoa' },
+ { label: 'Andorra' },
+ { label: 'Angola' },
+ { label: 'Anguilla' },
+ { label: 'Antarctica' },
+ { label: 'Antigua and Barbuda' },
+ { label: 'Argentina' },
+ { label: 'Armenia' },
+ { label: 'Aruba' },
+ { label: 'Australia' },
+ { label: 'Austria' },
+ { label: 'Azerbaijan' },
+ { label: 'Bahamas' },
+ { label: 'Bahrain' },
+ { label: 'Bangladesh' },
+ { label: 'Barbados' },
+ { label: 'Belarus' },
+ { label: 'Belgium' },
+ { label: 'Belize' },
+ { label: 'Benin' },
+ { label: 'Bermuda' },
+ { label: 'Bhutan' },
+ { label: 'Bolivia, Plurinational State of' },
+ { label: 'Bonaire, Sint Eustatius and Saba' },
+ { label: 'Bosnia and Herzegovina' },
+ { label: 'Botswana' },
+ { label: 'Bouvet Island' },
+ { label: 'Brazil' },
+ { label: 'British Indian Ocean Territory' },
+ { label: 'Brunei Darussalam' },
+].map(suggestion => ({
+ value: suggestion.label,
+ label: suggestion.label,
+}));
+
+const useStyles = makeStyles(theme => ({
+ root: {
+ flexGrow: 1,
+ height: 250,
+ },
+ input: {
+ display: 'flex',
+ padding: 0,
+ height: 'auto',
+ },
+ valueContainer: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ flex: 1,
+ alignItems: 'center',
+ overflow: 'hidden',
+ },
+ chip: {
+ margin: theme.spacing(0.5, 0.25),
+ },
+ chipFocused: {
+ backgroundColor: emphasize(
+ theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[700],
+ 0.08,
+ ),
+ },
+ noOptionsMessage: {
+ padding: theme.spacing(1, 2),
+ },
+ singleValue: {
+ fontSize: 16,
+ },
+ placeholder: {
+ position: 'absolute',
+ left: 8,
+ bottom: 6,
+ fontSize: 16,
+ },
+ paper: {
+ position: 'absolute',
+ zIndex: 1,
+ marginTop: theme.spacing(1),
+ left: 0,
+ right: 0,
+ },
+}));
+
+function NoOptionsMessage(props) {
+ const { selectProps, innerProps, children } = props;
+ return (
+ {children}
;
+}
+
+ValueContainer.propTypes = {
+ children: PropTypes.node,
+ selectProps: PropTypes.object.isRequired,
+};
+
+ValueContainer.defaultProps = {
+ children: null,
+};
+
+function MultiValue(props) {
+ const {
+ children,
+ selectProps,
+ removeProps,
+ isFocused
+ } = props;
+ return (
+
+
+
+
+
+ );
+}
diff --git a/front/odiparpack/app/containers/Forms/demos/SimpleSelectbox.js b/front/odiparpack/app/containers/Forms/demos/SimpleSelectbox.js
new file mode 100644
index 0000000..eb7bd0a
--- /dev/null
+++ b/front/odiparpack/app/containers/Forms/demos/SimpleSelectbox.js
@@ -0,0 +1,180 @@
+import React, { Fragment, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+
+import { withStyles } from '@material-ui/core/styles';
+
+import { Input, InputLabel, MenuItem, FormControl, FormHelperText, Select } from '@material-ui/core';
+
+const styles = theme => ({
+ demo: {
+ height: 'auto',
+ },
+ divider: {
+ display: 'block',
+ margin: `${theme.spacing(3)}px 0`,
+ },
+ field: {
+ margin: `${theme.spacing(3)}px 5px`,
+ },
+ root: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ },
+ formControl: {
+ margin: theme.spacing(1),
+ minWidth: 120,
+ },
+ selectEmpty: {
+ marginTop: theme.spacing(2),
+ },
+});
+
+class SimpleSelectbox extends PureComponent {
+ state = {
+ age: '',
+ name: 'hai',
+ };
+
+ handleChange = event => {
+ this.setState({ [event.target.name]: event.target.value });
+ };
+
+ render() {
+ const { classes } = this.props;
+ return (
+
+ this.setState({ value })}
+ />
+
+
+ this.setState({ valueDisabled: value })}
+ />
+
+
+ value.toFixed(2)}
+ value={this.state.valueDecimal}
+ onChange={value => this.setState({ valueDecimal: value })}
+ />
+
+
+
+
+
+
+
+
+
+ Assign responsibility
+
+
+ Be careful
+
+
+
+ {renderInput({
+ fullWidth: true,
+ classes,
+ InputProps: getInputProps({
+ startAdornment: selectedItem.map(item => (
+
+ {getSuggestions(inputValue2).map((suggestion, index) => renderSuggestion({
+ suggestion,
+ index,
+ itemProps: getItemProps({ item: suggestion.label }),
+ highlightedIndex,
+ selectedItem: selectedItem2,
+ }),
+ )}
+
+ ) : null}
+
+ )}
+
+
+ );
+}
+
+TagSuggestions.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(TagSuggestions);
diff --git a/front/odiparpack/app/containers/Forms/demos/TextFields.js b/front/odiparpack/app/containers/Forms/demos/TextFields.js
new file mode 100644
index 0000000..b408284
--- /dev/null
+++ b/front/odiparpack/app/containers/Forms/demos/TextFields.js
@@ -0,0 +1,124 @@
+import React, { Fragment, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Typography, Grid, Input, InputLabel, FormControl, FormHelperText } from '@material-ui/core';
+
+const styles = theme => ({
+ demo: {
+ height: 'auto',
+ },
+ divider: {
+ display: 'block',
+ margin: `${theme.spacing(3)}px 0`,
+ },
+ input: {
+ margin: theme.spacing(3),
+ },
+ container: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ },
+ formControl: {
+ margin: theme.spacing(3),
+ },
+});
+
+class TextFields extends PureComponent {
+ state = {
+ name: 'Composed TextField',
+ };
+
+ handleChange = event => {
+ this.setState({ name: event.target.value });
+ };
+
+ render() {
+ const { classes } = this.props;
+ return (
+
+
+ Name
+
+
+
+ Name
+
+ Some important helper text
+
+
+ Name
+
+ Disabled
+
+
+ Name
+
+ Error
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Custom CSS
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ access_time
+
+
+ ),
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default AppLayout;
diff --git a/front/odiparpack/app/containers/Layouts/Grid.js b/front/odiparpack/app/containers/Layouts/Grid.js
new file mode 100644
index 0000000..6a1057d
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/Grid.js
@@ -0,0 +1,96 @@
+import React, { Component } from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { Grid } from '@material-ui/core';
+import {
+ GridLayout,
+ FullWidth,
+ Centered,
+ Interactive,
+ AutoLayout,
+ Limitation
+} from './demos';
+
+const styles = ({
+ root: {
+ flexGrow: 1,
+ }
+});
+
+class GridPage extends Component {
+ render() {
+ const { classes } = this.props;
+ const title = brand.name + ' - Layout';
+ const description = brand.desc;
+ const docSrc = 'containers/Layouts/demos/';
+ return (
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+GridPage.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(GridPage);
diff --git a/front/odiparpack/app/containers/Layouts/Responsive.js b/front/odiparpack/app/containers/Layouts/Responsive.js
new file mode 100644
index 0000000..b5d6db2
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/Responsive.js
@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import Markdown from 'react-markdown';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { Breakpoint, BreakpointGrid, MediaQueries, WIthWIdth } from './demos';
+import breakpointsTable from './demos/breakpoint.md';
+
+class Responsive extends Component {
+ render() {
+ const title = brand.name + ' - Layout';
+ const description = brand.desc;
+ const docSrc = 'containers/Layouts/demos/';
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default Responsive;
diff --git a/front/odiparpack/app/containers/Layouts/demos/AutoLayout.js b/front/odiparpack/app/containers/Layouts/demos/AutoLayout.js
new file mode 100644
index 0000000..864d17e
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/AutoLayout.js
@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Typography, Paper, Divider, Grid } from '@material-ui/core';
+
+const styles = theme => ({
+ container: {
+ display: 'grid',
+ gridTemplateColumns: 'repeat(12, 1fr)',
+ gridGap: `${theme.spacing(3)}px`,
+ },
+ paper: {
+ padding: theme.spacing(1),
+ textAlign: 'center',
+ color: theme.palette.text.secondary,
+ whiteSpace: 'nowrap',
+ marginBottom: theme.spacing(1),
+ backgroundColor: theme.palette.secondary.light,
+ },
+ divider: {
+ margin: `${theme.spacing(2)}px 0`,
+ },
+});
+
+function CSSGrid(props) {
+ const { classes } = props;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ Material-UI Grid:
+
+
+
+ xs=3
+
+
+ xs=3
+
+
+ xs=3
+
+
+ xs=3
+
+
+ xs=8
+
+
+ xs=4
+
+
+
+ CSS Grid Layout:
+
+
+ );
+}
+
+CSSGrid.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CSSGrid);
diff --git a/front/odiparpack/app/containers/Layouts/demos/Breakpoint.js b/front/odiparpack/app/containers/Layouts/demos/Breakpoint.js
new file mode 100644
index 0000000..be557b4
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/Breakpoint.js
@@ -0,0 +1,115 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import compose from 'recompose/compose';
+import { withStyles } from '@material-ui/core/styles';
+import { Paper, Hidden, Divider, withWidth, Typography } from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ flexGrow: 1,
+ },
+ container: {
+ display: 'flex',
+ },
+ paper: {
+ padding: theme.spacing(2),
+ textAlign: 'center',
+ color: theme.palette.text.secondary,
+ flex: '1 0 auto',
+ margin: theme.spacing(1),
+ },
+ divider: {
+ display: 'block',
+ margin: `${theme.spacing(3)}px 0`,
+ }
+});
+
+function Breakpoint(props) {
+ const { classes } = props;
+
+ return (
+
+
+
+ xs=3
+
+
+ xs=3
+
+
+ xs=3
+
+
+ xs=3
+
+
+ xs=8
+
+
+ xs=4
+
+
+ {/* Breakpoin up block */}
+ Breakpoint up
+
+ Using any breakpoint up property, the given children will be hidden at or above the breakpoint.
+
+
+Current width:
+ {props.width}
+
+ Breakpoint down
+
+ Using any breakpoint down property, the given children will be hidden at or below the breakpoint.
+
+
+Current width:
+ {props.width}
+
+ Breakpoint only
+
+ Using the breakpoint only property, the given children will be hidden at the specified breakpoint(s).
+
+
+Current width:
+ {props.width}
+
+
+ );
+}
+
+Breakpoint.propTypes = {
+ classes: PropTypes.object.isRequired,
+ width: PropTypes.string.isRequired,
+};
+
+export default compose(withStyles(styles), withWidth())(Breakpoint);
diff --git a/front/odiparpack/app/containers/Layouts/demos/BreakpointGrid.js b/front/odiparpack/app/containers/Layouts/demos/BreakpointGrid.js
new file mode 100644
index 0000000..cd94ef9
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/BreakpointGrid.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import compose from 'recompose/compose';
+import { withStyles } from '@material-ui/core/styles';
+import { Paper, Grid, withWidth, Typography } from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ flexGrow: 1,
+ },
+ container: {
+ display: 'flex',
+ },
+ paper: {
+ padding: theme.spacing(2),
+ textAlign: 'center',
+ color: theme.palette.text.secondary,
+ flex: '1 0 auto',
+ margin: theme.spacing(1),
+ },
+});
+
+function GridIntegration(props) {
+ const { classes } = props;
+
+ return (
+
+
+ xsUp
+
+
+ smUp
+
+
+ mdUp
+
+
+ lgUp
+
+
+ xlUp
+
+
+
+
+ xsDown
+
+
+ smDown
+
+
+ mdDown
+
+
+ lgDown
+
+
+ xlDown
+
+
+
+
+ Hidden on lg
+
+
+ Hidden on sm
+
+
+ Hidden on sm and lg
+
+
+
+
+Current width:
+ {props.width}
+
+
+ );
+}
+
+GridIntegration.propTypes = {
+ classes: PropTypes.object.isRequired,
+ width: PropTypes.string.isRequired,
+};
+
+export default compose(withStyles(styles), withWidth())(GridIntegration);
diff --git a/front/odiparpack/app/containers/Layouts/demos/Centered.js b/front/odiparpack/app/containers/Layouts/demos/Centered.js
new file mode 100644
index 0000000..cdd1c10
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/Centered.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Paper, Grid } from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ flexGrow: 1,
+ },
+ paper: {
+ padding: theme.spacing(2),
+ textAlign: 'center',
+ color: theme.palette.text.secondary,
+ backgroundColor: theme.palette.secondary.light,
+ },
+});
+
+function CenteredGrid(props) {
+ const { classes } = props;
+
+ return (
+
+
+
+ xsUp
+
+
+ smUp
+
+
+ mdUp
+
+
+ lgUp
+
+
+ xlUp
+
+
+
+
+
+
+ xs=12
+
+
+ xs=6
+
+
+ xs=6
+
+
+ xs=3
+
+
+ xs=3
+
+
+ xs=3
+
+
+ xs=3
+
+
+
+ );
+}
+
+CenteredGrid.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CenteredGrid);
diff --git a/front/odiparpack/app/containers/Layouts/demos/FullHeader.js b/front/odiparpack/app/containers/Layouts/demos/FullHeader.js
new file mode 100644
index 0000000..d5ef402
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/FullHeader.js
@@ -0,0 +1,153 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import MenuIcon from '@material-ui/icons/Menu';
+import { Drawer, AppBar, Toolbar, List, Typography, Divider, IconButton, Hidden } from '@material-ui/core';
+import { mailFolderListItems, otherMailFolderListItems } from './menuData';
+
+
+const drawerWidth = 240;
+
+const styles = theme => ({
+ root: {
+ flexGrow: 1,
+ height: 430,
+ zIndex: 1,
+ overflow: 'hidden',
+ position: 'relative',
+ display: 'flex',
+ },
+ appBar: {
+ zIndex: theme.zIndex.drawer + 1,
+ },
+ menuButton: {
+ marginLeft: 0,
+ marginRight: 36,
+ },
+ drawerPaper: {
+ width: drawerWidth,
+ transition: theme.transitions.create('width', {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ [theme.breakpoints.up('md')]: {
+ position: 'relative',
+ },
+ },
+ drawerPaperClose: {
+ overflowX: 'hidden',
+ transition: theme.transitions.create('width', {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.leavingScreen,
+ }),
+ width: 70,
+ [theme.breakpoints.up('sm')]: {
+ width: 70,
+ },
+ },
+ toolbar: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'flex-end',
+ padding: '0 8px',
+ ...theme.mixins.toolbar,
+ },
+ content: {
+ flexGrow: 1,
+ backgroundColor: theme.palette.background.default,
+ padding: theme.spacing(3),
+ },
+});
+
+class FullHeader extends React.Component {
+ state = {
+ open: true,
+ };
+
+ componentDidMount() {
+ window.addEventListener('resize', this.resize.bind(this));
+ this.resize();
+ }
+
+ resize() {
+ this.setState({ open: window.innerWidth >= 760 });
+ }
+
+ handleDrawerToggle = () => {
+ this.setState({ open: !this.state.open });
+ };
+
+ render() {
+ const { classes } = this.props;
+ const { open } = this.state;
+ const drawer = (
+
+
+
+ );
+ return (
+ - {mailFolderListItems}
- {otherMailFolderListItems}
+
+
+
+
+
+ Clipped under the app bar
+
+
+
+
+
+ {drawer}
+
+
+
+
+ {drawer}
+
+
+
+
+ Your App Content
+
+
+ );
+ }
+}
+
+FullHeader.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles, { withTheme: true })(FullHeader);
diff --git a/front/odiparpack/app/containers/Layouts/demos/FullWidth.js b/front/odiparpack/app/containers/Layouts/demos/FullWidth.js
new file mode 100644
index 0000000..fa7dbce
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/FullWidth.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Paper, Grid } from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ flexGrow: 1,
+ },
+ paper: {
+ padding: theme.spacing(2),
+ textAlign: 'center',
+ color: theme.palette.text.secondary,
+ backgroundColor: theme.palette.secondary.light
+ },
+});
+
+function FullWidthGrid(props) {
+ const { classes } = props;
+
+ return (
+
+
+
+ xs=12
+
+
+ xs=12 sm=6
+
+
+ xs=12 sm=6
+
+
+ xs=6 sm=3
+
+
+ xs=6 sm=3
+
+
+ xs=6 sm=3
+
+
+ xs=6 sm=3
+
+
+
+ );
+}
+
+FullWidthGrid.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(FullWidthGrid);
diff --git a/front/odiparpack/app/containers/Layouts/demos/GridLayout.js b/front/odiparpack/app/containers/Layouts/demos/GridLayout.js
new file mode 100644
index 0000000..d764c1c
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/GridLayout.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Grid, FormLabel, FormControlLabel, Radio, RadioGroup, Paper } from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ flexGrow: 1,
+ },
+ paper: {
+ height: 140,
+ width: 100,
+ backgroundColor: theme.palette.secondary.light,
+ },
+ control: {
+ marginTop: theme.spacing(2),
+ padding: theme.spacing(2),
+ },
+});
+
+class GuttersGrid extends React.Component {
+ state = {
+ spacing: '2',
+ };
+
+ handleChange = key => (event, value) => {
+ this.setState({
+ [key]: value,
+ });
+ };
+
+ render() {
+ const { classes } = this.props;
+ const { spacing } = this.state;
+
+ return (
+
+
+ );
+}
+
+AutoGridNoWrap.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(AutoGridNoWrap);
diff --git a/front/odiparpack/app/containers/Layouts/demos/MediaQueries.js b/front/odiparpack/app/containers/Layouts/demos/MediaQueries.js
new file mode 100644
index 0000000..89de6fc
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/MediaQueries.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { red, green, indigo as blue } from '@material-ui/core/colors';
+import { Typography } from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ padding: theme.spacing(1),
+ '& h3': {
+ color: theme.palette.common.white,
+ },
+ [theme.breakpoints.down('sm')]: {
+ backgroundColor: red[500],
+ },
+ [theme.breakpoints.up('md')]: {
+ backgroundColor: blue[500],
+ },
+ [theme.breakpoints.up('lg')]: {
+ backgroundColor: green[500],
+ },
+ },
+});
+
+function MediaQuery(props) {
+ const { classes } = props;
+
+ return (
+
+
+
+
+ W
+
+
+ {message}
+
+
+
+
+
+
+ W
+
+
+ {message}
+
+
+
+
+
+
+ W
+
+
+ {message}
+
+
+
+
+
+ down(sm): red
+ up(md): blue
+ up(lg): green
+
+ );
+}
+
+MediaQuery.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(MediaQuery);
diff --git a/front/odiparpack/app/containers/Layouts/demos/SidebarLayout.js b/front/odiparpack/app/containers/Layouts/demos/SidebarLayout.js
new file mode 100644
index 0000000..3f1c10c
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/SidebarLayout.js
@@ -0,0 +1,169 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import MenuIcon from '@material-ui/icons/Menu';
+import { Drawer, AppBar, Toolbar, List, Typography, Divider, IconButton, Hidden } from '@material-ui/core';
+import { mailFolderListItems, otherMailFolderListItems } from './menuData';
+
+
+const drawerWidth = 240;
+
+const styles = theme => ({
+ root: {
+ flexGrow: 1,
+ height: 430,
+ zIndex: 1,
+ overflow: 'hidden',
+ position: 'relative',
+ display: 'flex',
+ },
+ appBar: {
+ zIndex: theme.zIndex.drawer + 1,
+ transition: theme.transitions.create(['width', 'margin'], {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.leavingScreen,
+ }),
+ },
+ appBarShift: {
+ marginLeft: 0,
+ width: '100%',
+ transition: theme.transitions.create(['width', 'margin'], {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ [theme.breakpoints.up('md')]: {
+ marginLeft: drawerWidth,
+ width: `calc(100% - ${drawerWidth}px)`,
+ },
+ },
+ menuButton: {
+ marginLeft: 0,
+ marginRight: 36,
+ },
+ drawerPaper: {
+ width: drawerWidth,
+ transition: theme.transitions.create('width', {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ [theme.breakpoints.up('md')]: {
+ position: 'relative',
+ },
+ },
+ drawerPaperClose: {
+ overflowX: 'hidden',
+ transition: theme.transitions.create('width', {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.leavingScreen,
+ }),
+ width: 70,
+ [theme.breakpoints.up('sm')]: {
+ width: 70,
+ },
+ },
+ toolbar: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'flex-end',
+ padding: '0 8px',
+ ...theme.mixins.toolbar,
+ },
+ content: {
+ flexGrow: 1,
+ backgroundColor: theme.palette.background.default,
+ padding: theme.spacing(3),
+ },
+});
+
+class SidebarLayout extends React.Component {
+ state = {
+ open: true,
+ };
+
+ componentDidMount() {
+ window.addEventListener('resize', this.resize.bind(this));
+ this.resize();
+ }
+
+ resize() {
+ this.setState({ open: window.innerWidth >= 760 });
+ }
+
+ handleDrawerToggle = () => {
+ this.setState({ open: !this.state.open });
+ };
+
+ render() {
+ const { classes } = this.props;
+ const { open } = this.state;
+ const drawer = (
+
+
+
+ );
+ return (
+ - {mailFolderListItems}
- {otherMailFolderListItems}
+
+
+
+
+
+ App Layout with Sidebar
+
+
+
+
+
+ {drawer}
+
+
+
+
+ {drawer}
+
+
+
+
+ Your App Content
+
+
+ );
+ }
+}
+
+SidebarLayout.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles, { withTheme: true })(SidebarLayout);
diff --git a/front/odiparpack/app/containers/Layouts/demos/SidebarLayoutRight.js b/front/odiparpack/app/containers/Layouts/demos/SidebarLayoutRight.js
new file mode 100644
index 0000000..85c5229
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/SidebarLayoutRight.js
@@ -0,0 +1,175 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import MenuIcon from '@material-ui/icons/Menu';
+import { Drawer, AppBar, Toolbar, List, Typography, Divider, IconButton, Hidden } from '@material-ui/core';
+import { mailFolderListItems, otherMailFolderListItems } from './menuData';
+
+
+const drawerWidth = 240;
+
+const styles = theme => ({
+ root: {
+ flexGrow: 1,
+ height: 430,
+ zIndex: 1,
+ overflow: 'hidden',
+ position: 'relative',
+ display: 'flex',
+ },
+ flexwrap: {
+ display: 'flex'
+ },
+ flex: {
+ flex: 1
+ },
+ appBar: {
+ zIndex: theme.zIndex.drawer + 1,
+ transition: theme.transitions.create(['width', 'margin'], {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.leavingScreen,
+ }),
+ },
+ appBarShift: {
+ marginRight: 0,
+ width: '100%',
+ transition: theme.transitions.create(['width', 'margin'], {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ [theme.breakpoints.up('md')]: {
+ marginRight: drawerWidth,
+ width: `calc(100% - ${drawerWidth}px)`,
+ },
+ },
+ menuButton: {
+ marginRight: 0,
+ marginLeft: 36,
+ },
+ drawerPaper: {
+ width: drawerWidth,
+ transition: theme.transitions.create('width', {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ [theme.breakpoints.up('md')]: {
+ position: 'relative',
+ },
+ },
+ drawerPaperClose: {
+ overflowX: 'hidden',
+ transition: theme.transitions.create('width', {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.leavingScreen,
+ }),
+ width: 70,
+ [theme.breakpoints.up('sm')]: {
+ width: 70,
+ },
+ },
+ toolbar: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'flex-end',
+ padding: '0 8px',
+ ...theme.mixins.toolbar,
+ },
+ content: {
+ flexGrow: 1,
+ backgroundColor: theme.palette.background.default,
+ padding: theme.spacing(3),
+ },
+});
+
+class SidebarLayoutRight extends React.Component {
+ state = {
+ open: true,
+ };
+
+ componentDidMount() {
+ window.addEventListener('resize', this.resize.bind(this));
+ this.resize();
+ }
+
+ resize() {
+ this.setState({ open: window.innerWidth >= 760 });
+ }
+
+ handleDrawerToggle = () => {
+ this.setState({ open: !this.state.open });
+ };
+
+ render() {
+ const { classes } = this.props;
+ const { open } = this.state;
+ const drawer = (
+
+
+
+ );
+ return (
+ - {mailFolderListItems}
- {otherMailFolderListItems}
+
+
+
+ App Layout with Right Sidebar
+
+
+
+
+
+
+
+ Your App Content
+
+
+
+ {drawer}
+
+
+
+
+ {drawer}
+
+
+
+ );
+ }
+}
+
+SidebarLayoutRight.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles, { withTheme: true })(SidebarLayoutRight);
diff --git a/front/odiparpack/app/containers/Layouts/demos/WIthWIdth.js b/front/odiparpack/app/containers/Layouts/demos/WIthWIdth.js
new file mode 100644
index 0000000..2aab0e3
--- /dev/null
+++ b/front/odiparpack/app/containers/Layouts/demos/WIthWIdth.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withWidth, Typography } from '@material-ui/core';
+
+const components = {
+ sm: 'em',
+ md: 'u',
+ lg: 'del',
+};
+
+function WithWidth(props) {
+ const { width } = props;
+ const Component = components[width] || 'span';
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+export const otherMailFolderListItems = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
diff --git a/front/odiparpack/app/containers/Maps/Info.js b/front/odiparpack/app/containers/Maps/Info.js
new file mode 100644
index 0000000..1faea09
--- /dev/null
+++ b/front/odiparpack/app/containers/Maps/Info.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import Type from 'ba-styles/Typography.scss';
+import { Typography } from '@material-ui/core';
+
+class Info extends React.Component {
+ render() {
+ return (
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default MapDirection;
diff --git a/front/odiparpack/app/containers/Maps/MapMarker.js b/front/odiparpack/app/containers/Maps/MapMarker.js
new file mode 100644
index 0000000..65f2420
--- /dev/null
+++ b/front/odiparpack/app/containers/Maps/MapMarker.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { BasicMarker, PopoverMarker } from './demos';
+import Info from './Info';
+
+class MapMarker extends React.Component {
+ render() {
+ const title = brand.name + ' - Map';
+ const description = brand.desc;
+ const docSrc = 'containers/Maps/demos/';
+ return (
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default MapMarker;
diff --git a/front/odiparpack/app/containers/Maps/SearchMap.js b/front/odiparpack/app/containers/Maps/SearchMap.js
new file mode 100644
index 0000000..b3e21d9
--- /dev/null
+++ b/front/odiparpack/app/containers/Maps/SearchMap.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { SearchLocation } from './demos';
+import Info from './Info';
+
+class SearchMap extends React.Component {
+ render() {
+ const title = brand.name + ' - Map';
+ const description = brand.desc;
+ const docSrc = 'containers/Maps/demos/';
+ return (
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default SearchMap;
diff --git a/front/odiparpack/app/containers/Maps/StreetViewMap.js b/front/odiparpack/app/containers/Maps/StreetViewMap.js
new file mode 100644
index 0000000..e307da8
--- /dev/null
+++ b/front/odiparpack/app/containers/Maps/StreetViewMap.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { StreetView } from './demos';
+import Info from './Info';
+
+class StreetViewMap extends React.Component {
+ render() {
+ const title = brand.name + ' - Map';
+ const description = brand.desc;
+ const docSrc = 'containers/Maps/demos/';
+ return (
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default StreetViewMap;
diff --git a/front/odiparpack/app/containers/Maps/TrafficIndicator.js b/front/odiparpack/app/containers/Maps/TrafficIndicator.js
new file mode 100644
index 0000000..e1e8a69
--- /dev/null
+++ b/front/odiparpack/app/containers/Maps/TrafficIndicator.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { Traffic } from './demos';
+import Info from './Info';
+
+class TrafficIndicator extends React.Component {
+ render() {
+ const title = brand.name + ' - Map';
+ const description = brand.desc;
+ const docSrc = 'containers/Maps/demos/';
+ return (
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default TrafficIndicator;
diff --git a/front/odiparpack/app/containers/Maps/demos/BasicMarker.js b/front/odiparpack/app/containers/Maps/demos/BasicMarker.js
new file mode 100644
index 0000000..7577923
--- /dev/null
+++ b/front/odiparpack/app/containers/Maps/demos/BasicMarker.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { compose } from 'recompose';
+import {
+ withScriptjs,
+ withGoogleMap,
+ GoogleMap,
+ Marker,
+} from 'react-google-maps';
+
+const MapWithAMarker = compose(
+ withScriptjs,
+ withGoogleMap
+)(props => (
+
+ OverlayView
+
+
+
+ {title}
+
+
+
+
+
+
+
+ );
+ }}
+ />
+);
+
+export default NotFound;
diff --git a/front/odiparpack/app/containers/Pages/.DS_Store b/front/odiparpack/app/containers/Pages/.DS_Store
new file mode 100644
index 0000000..f59225b
Binary files /dev/null and b/front/odiparpack/app/containers/Pages/.DS_Store differ
diff --git a/front/odiparpack/app/containers/Pages/BlankPage/index.js b/front/odiparpack/app/containers/Pages/BlankPage/index.js
new file mode 100644
index 0000000..640da6e
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/BlankPage/index.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { PapperBlock } from 'ba-components';
+
+class BlankPage extends React.Component {
+ render() {
+ const title = brand.name + ' - Blank Page';
+ const description = brand.desc;
+ return (
+
+
+ {title}
+
+
+
+
+
+
+
+ Content
+
+
+ );
+ }
+}
+
+export default BlankPage;
diff --git a/front/odiparpack/app/containers/Pages/Calendar/index.js b/front/odiparpack/app/containers/Pages/Calendar/index.js
new file mode 100644
index 0000000..fd5f412
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/Calendar/index.js
@@ -0,0 +1,137 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import events from 'ba-api/eventData';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import 'ba-styles/vendors/react-big-calendar/react-big-calendar.css';
+import { EventCalendar, DetailEvent, AddEvent, Notification } from 'ba-components';
+import {
+ fetchAction,
+ addAction,
+ discardAction,
+ submitAction,
+ deleteAction,
+ closeNotifAction
+} from 'ba-actions/CalendarEventActions';
+
+const styles = {
+ root: {
+ display: 'block'
+ }
+};
+
+class Calendar extends React.Component {
+ state = {
+ anchorEl: false,
+ event: null,
+ anchorPos: { top: 0, left: 0 }
+ };
+
+ componentDidMount() {
+ this.props.fetchEventsData(events);
+ }
+
+ handleClick = event => {
+ setTimeout(() => {
+ const target = document.getElementsByClassName('rbc-selected')[0];
+ const targetBounding = target.getBoundingClientRect();
+ this.setState({
+ event,
+ anchorEl: true,
+ anchorPos: { top: targetBounding.top, left: targetBounding.left }
+ });
+ }, 200);
+ };
+
+ handleClose = () => {
+ this.setState({
+ anchorEl: false,
+ });
+ };
+
+ render() {
+ const title = brand.name + ' - Calendar';
+ const description = brand.desc;
+ const { anchorEl, anchorPos, event } = this.state;
+ const {
+ classes,
+ eventData,
+ openFrm,
+ addEvent,
+ discardEvent,
+ submit,
+ remove,
+ closeNotif,
+ messageNotif
+ } = this.props;
+ return (
+
+
+ {title}
+
+
+
+
+
+
+ closeNotif()} message={messageNotif} />
+
+ );
+ }
+}
+
+Calendar.propTypes = {
+ classes: PropTypes.object.isRequired,
+ eventData: PropTypes.object.isRequired,
+ fetchEventsData: PropTypes.func.isRequired,
+ addEvent: PropTypes.func.isRequired,
+ submit: PropTypes.func.isRequired,
+ discardEvent: PropTypes.func.isRequired,
+ remove: PropTypes.func.isRequired,
+ openFrm: PropTypes.bool.isRequired,
+ closeNotif: PropTypes.func.isRequired,
+ messageNotif: PropTypes.string.isRequired,
+};
+
+const reducer = 'calendar';
+const mapStateToProps = state => ({
+ force: state, // force state from reducer
+ eventData: state.getIn([reducer, 'events']),
+ openFrm: state.getIn([reducer, 'openFrm']),
+ messageNotif: state.getIn([reducer, 'notifMsg']),
+});
+
+const constDispatchToProps = dispatch => ({
+ fetchEventsData: bindActionCreators(fetchAction, dispatch),
+ submit: bindActionCreators(submitAction, dispatch),
+ remove: bindActionCreators(deleteAction, dispatch),
+ addEvent: () => dispatch(addAction),
+ discardEvent: () => dispatch(discardAction),
+ closeNotif: () => dispatch(closeNotifAction),
+});
+
+const CalendarMapped = connect(
+ mapStateToProps,
+ constDispatchToProps
+)(Calendar);
+
+export default withStyles(styles)(CalendarMapped);
diff --git a/front/odiparpack/app/containers/Pages/Chat/index.js b/front/odiparpack/app/containers/Pages/Chat/index.js
new file mode 100644
index 0000000..99cf875
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/Chat/index.js
@@ -0,0 +1,123 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import contactData from 'ba-api/contactData';
+import chatData from 'ba-api/chatData';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { fetchAction, searchAction } from 'ba-actions/ContactActions';
+import {
+ fetchChatAction,
+ showChatAction,
+ sendAction,
+ hideDetailAction,
+ deleteAction
+} from 'ba-actions/ChatActions';
+import { ContactList, ChatHeader, ChatRoom } from 'ba-components';
+import styles from 'ba-components/Contact/contact-jss';
+
+class Chat extends React.Component {
+ componentDidMount() {
+ this.props.fetchChatData(chatData);
+ this.props.fetchContactData(contactData);
+ }
+
+ render() {
+ const title = brand.name + ' - Chat App';
+ const description = brand.desc;
+ const {
+ classes,
+ dataContact,
+ showDetail,
+ hideDetail,
+ keyword,
+ search,
+ dataChat,
+ chatSelected,
+ sendMessage,
+ remove,
+ showMobileDetail
+ } = this.props;
+ return (
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+ );
+ }
+}
+
+Chat.propTypes = {
+ classes: PropTypes.object.isRequired,
+ fetchContactData: PropTypes.func.isRequired,
+ fetchChatData: PropTypes.func.isRequired,
+ showDetail: PropTypes.func.isRequired,
+ hideDetail: PropTypes.func.isRequired,
+ sendMessage: PropTypes.func.isRequired,
+ search: PropTypes.func.isRequired,
+ remove: PropTypes.func.isRequired,
+ keyword: PropTypes.string.isRequired,
+ dataContact: PropTypes.object.isRequired,
+ dataChat: PropTypes.object.isRequired,
+ chatSelected: PropTypes.number.isRequired,
+ showMobileDetail: PropTypes.bool.isRequired,
+};
+
+const reducerContact = 'contact';
+const reducerChat = 'chat';
+const mapStateToProps = state => ({
+ force: state, // force state from reducer
+ dataContact: state.getIn([reducerContact, 'contactList']),
+ dataChat: state.getIn([reducerChat, 'activeChat']),
+ chatSelected: state.getIn([reducerChat, 'chatSelected']),
+ showMobileDetail: state.getIn([reducerChat, 'showMobileDetail']),
+ keyword: state.getIn([reducerContact, 'keywordValue']),
+});
+
+const dispatchToProps = dispatch => ({
+ fetchContactData: bindActionCreators(fetchAction, dispatch),
+ hideDetail: () => dispatch(hideDetailAction),
+ fetchChatData: bindActionCreators(fetchChatAction, dispatch),
+ showDetail: bindActionCreators(showChatAction, dispatch),
+ search: bindActionCreators(searchAction, dispatch),
+ sendMessage: bindActionCreators(sendAction, dispatch),
+ remove: () => dispatch(deleteAction),
+});
+
+const ChatMapped = connect(
+ mapStateToProps,
+ dispatchToProps
+)(Chat);
+
+export default withStyles(styles)(ChatMapped);
diff --git a/front/odiparpack/app/containers/Pages/Contact/index.js b/front/odiparpack/app/containers/Pages/Contact/index.js
new file mode 100644
index 0000000..8ed34de
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/Contact/index.js
@@ -0,0 +1,166 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import data from 'ba-api/contactData';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import dummy from 'ba-api/dummyContents';
+import {
+ fetchAction,
+ showDetailAction,
+ hideDetailAction,
+ submitAction,
+ editAction,
+ addAction,
+ closeAction,
+ removeAction,
+ addToFavoriteAction,
+ searchAction,
+ closeNotifAction
+} from 'ba-actions/ContactActions';
+import {
+ ContactHeader,
+ ContactList,
+ ContactDetail,
+ AddContact,
+ Notification
+} from 'ba-components';
+import styles from 'ba-components/Contact/contact-jss';
+
+class Contact extends React.Component {
+ componentDidMount() {
+ this.props.fetchData(data);
+ }
+
+ submitContact = (item, avatar) => {
+ const { submit } = this.props;
+ const avatarBase64 = typeof avatar === 'object' ? URL.createObjectURL(avatar) : avatar;
+ const avatarPreview = avatar !== null ? avatarBase64 : dummy.user.avatar;
+ submit(item, avatarPreview);
+ }
+
+ render() {
+ const title = brand.name + ' - Contact';
+ const description = brand.desc;
+ const {
+ classes,
+ dataContact,
+ itemSelected,
+ showDetail,
+ hideDetail,
+ avatarInit,
+ open,
+ showMobileDetail,
+ add,
+ edit,
+ close,
+ remove,
+ favorite,
+ keyword,
+ search,
+ closeNotif,
+ messageNotif
+ } = this.props;
+ return (
+
+
+
+
+ {title}
+
+
+
+
+
+
+ closeNotif()} message={messageNotif} />
+
+ );
+ }
+}
+
+Contact.propTypes = {
+ classes: PropTypes.object.isRequired,
+ avatarInit: PropTypes.string.isRequired,
+ fetchData: PropTypes.func.isRequired,
+ showDetail: PropTypes.func.isRequired,
+ hideDetail: PropTypes.func.isRequired,
+ keyword: PropTypes.string.isRequired,
+ open: PropTypes.bool.isRequired,
+ showMobileDetail: PropTypes.bool.isRequired,
+ add: PropTypes.func.isRequired,
+ close: PropTypes.func.isRequired,
+ submit: PropTypes.func.isRequired,
+ edit: PropTypes.func.isRequired,
+ remove: PropTypes.func.isRequired,
+ favorite: PropTypes.func.isRequired,
+ search: PropTypes.func.isRequired,
+ dataContact: PropTypes.object.isRequired,
+ itemSelected: PropTypes.number.isRequired,
+ closeNotif: PropTypes.func.isRequired,
+ messageNotif: PropTypes.string.isRequired,
+};
+
+const reducer = 'contact';
+const mapStateToProps = state => ({
+ force: state, // force state from reducer
+ avatarInit: state.getIn([reducer, 'avatarInit']),
+ dataContact: state.getIn([reducer, 'contactList']),
+ itemSelected: state.getIn([reducer, 'selectedIndex']),
+ keyword: state.getIn([reducer, 'keywordValue']),
+ open: state.getIn([reducer, 'openFrm']),
+ showMobileDetail: state.getIn([reducer, 'showMobileDetail']),
+ messageNotif: state.getIn([reducer, 'notifMsg']),
+});
+
+const constDispatchToProps = dispatch => ({
+ fetchData: bindActionCreators(fetchAction, dispatch),
+ showDetail: bindActionCreators(showDetailAction, dispatch),
+ hideDetail: () => dispatch(hideDetailAction),
+ submit: bindActionCreators(submitAction, dispatch),
+ edit: bindActionCreators(editAction, dispatch),
+ add: () => dispatch(addAction),
+ close: () => dispatch(closeAction),
+ remove: bindActionCreators(removeAction, dispatch),
+ favorite: bindActionCreators(addToFavoriteAction, dispatch),
+ search: bindActionCreators(searchAction, dispatch),
+ closeNotif: () => dispatch(closeNotifAction),
+});
+
+const ContactMapped = connect(
+ mapStateToProps,
+ constDispatchToProps
+)(Contact);
+
+export default withStyles(styles)(ContactMapped);
diff --git a/front/odiparpack/app/containers/Pages/Ecommerce/index.js b/front/odiparpack/app/containers/Pages/Ecommerce/index.js
new file mode 100644
index 0000000..8eb15a4
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/Ecommerce/index.js
@@ -0,0 +1,117 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import data from 'ba-api/productData';
+import { SearchProduct, ProductGallery, Notification } from 'ba-components';
+import {
+ fetchAction,
+ addAction,
+ removeAction,
+ checkoutAction,
+ detailAction,
+ searchAction,
+ closeNotifAction
+} from 'ba-actions/EcommerceActions';
+
+class Ecommerce extends React.Component {
+ componentDidMount() {
+ this.props.fetchData(data);
+ }
+
+ render() {
+ const title = brand.name + ' - Ecommerce';
+ const description = brand.desc;
+ const {
+ dataProduct,
+ handleAddToCart,
+ dataCart,
+ removeItem,
+ checkout,
+ showDetail,
+ productIndex,
+ totalItems,
+ totalPrice,
+ search,
+ keyword,
+ closeNotif,
+ messageNotif
+ } = this.props;
+ return (
+
+
+
+
+ {title}
+
+
+
+
+
+
+ closeNotif()} message={messageNotif} />
+
+ );
+ }
+}
+
+Ecommerce.propTypes = {
+ fetchData: PropTypes.func.isRequired,
+ handleAddToCart: PropTypes.func.isRequired,
+ removeItem: PropTypes.func.isRequired,
+ showDetail: PropTypes.func.isRequired,
+ checkout: PropTypes.func.isRequired,
+ search: PropTypes.func.isRequired,
+ keyword: PropTypes.string.isRequired,
+ dataProduct: PropTypes.object.isRequired,
+ dataCart: PropTypes.object.isRequired,
+ productIndex: PropTypes.number.isRequired,
+ totalItems: PropTypes.number.isRequired,
+ totalPrice: PropTypes.number.isRequired,
+ closeNotif: PropTypes.func.isRequired,
+ messageNotif: PropTypes.string.isRequired,
+};
+
+const reducer = 'ecommerce';
+const mapStateToProps = state => ({
+ force: state, // force state from reducer
+ keyword: state.getIn([reducer, 'keywordValue']),
+ dataProduct: state.getIn([reducer, 'productList']),
+ dataCart: state.getIn([reducer, 'cart']),
+ productIndex: state.getIn([reducer, 'productIndex']),
+ totalItems: state.getIn([reducer, 'totalItems']),
+ totalPrice: state.getIn([reducer, 'totalPrice']),
+ messageNotif: state.getIn([reducer, 'notifMsg']),
+});
+
+const constDispatchToProps = dispatch => ({
+ fetchData: bindActionCreators(fetchAction, dispatch),
+ search: bindActionCreators(searchAction, dispatch),
+ handleAddToCart: bindActionCreators(addAction, dispatch),
+ removeItem: bindActionCreators(removeAction, dispatch),
+ showDetail: bindActionCreators(detailAction, dispatch),
+ checkout: () => dispatch(checkoutAction),
+ closeNotif: () => dispatch(closeNotifAction),
+});
+
+const EcommerceMapped = connect(
+ mapStateToProps,
+ constDispatchToProps
+)(Ecommerce);
+
+export default EcommerceMapped;
diff --git a/front/odiparpack/app/containers/Pages/Email/index.js b/front/odiparpack/app/containers/Pages/Email/index.js
new file mode 100644
index 0000000..93285cb
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/Email/index.js
@@ -0,0 +1,210 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import data from 'ba-api/emailData';
+import {
+ EmailHeader,
+ EmailList,
+ EmailSidebar,
+ ComposeEmail,
+ Notification
+} from 'ba-components';
+import {
+ fetchMailAction,
+ openMailAction,
+ filterAction,
+ composeAction,
+ discardAction,
+ searchAction,
+ sendAction,
+ moveAction,
+ deleteAction,
+ toggleStaredAction,
+ closeNotifAction
+} from 'ba-actions/EmailActions';
+
+const styles = theme => ({
+ root: {
+ flexGrow: 1,
+ minHeight: 600,
+ zIndex: 1,
+ background: theme.palette.grey[50],
+ overflow: 'hidden',
+ display: 'flex',
+ boxShadow: theme.shadows[2]
+ }
+});
+
+// validation functions
+const email = value => (
+ value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)
+ ? 'Invalid email'
+ : ''
+);
+
+class Email extends React.Component {
+ state = {
+ to: '',
+ subject: '',
+ validMail: '',
+ mobileOpen: false,
+ };
+
+ componentDidMount() {
+ this.props.fetchData(data);
+ }
+
+ handleChange = (event, name) => {
+ if (name === 'to') {
+ this.setState({ validMail: email(event.target.value) });
+ }
+ this.setState({
+ [name]: event.target.value,
+ });
+ };
+
+ handleReply = (mail) => {
+ this.props.compose();
+ this.setState({
+ to: mail.get('name'),
+ subject: 'Reply: ' + mail.get('subject'),
+ });
+ }
+
+ handleCompose = () => {
+ this.props.compose();
+ this.setState({
+ to: ' ',
+ subject: ' ',
+ });
+ }
+
+ handleDrawerToggle = () => {
+ this.setState(state => ({ mobileOpen: !state.mobileOpen }));
+ };
+
+ render() {
+ const {
+ classes,
+ emailData,
+ openMail,
+ goto,
+ currentPage,
+ openFrm,
+ discard,
+ search,
+ keyword,
+ sendEmail,
+ moveTo,
+ remove,
+ toggleStar,
+ closeNotif,
+ messageNotif
+ } = this.props;
+ const {
+ to,
+ subject,
+ validMail,
+ mobileOpen
+ } = this.state;
+ const title = brand.name + ' - Email';
+ const description = brand.desc;
+ return (
+
+
+ {title}
+
+
+
+
+
+
+ closeNotif()} message={messageNotif} />
+
+ );
+ }
+}
+
+Email.propTypes = {
+ classes: PropTypes.object.isRequired,
+ emailData: PropTypes.object.isRequired,
+ fetchData: PropTypes.func.isRequired,
+ openMail: PropTypes.func.isRequired,
+ goto: PropTypes.func.isRequired,
+ compose: PropTypes.func.isRequired,
+ discard: PropTypes.func.isRequired,
+ search: PropTypes.func.isRequired,
+ sendEmail: PropTypes.func.isRequired,
+ moveTo: PropTypes.func.isRequired,
+ remove: PropTypes.func.isRequired,
+ toggleStar: PropTypes.func.isRequired,
+ keyword: PropTypes.string.isRequired,
+ currentPage: PropTypes.string.isRequired,
+ openFrm: PropTypes.bool.isRequired,
+ closeNotif: PropTypes.func.isRequired,
+ messageNotif: PropTypes.string.isRequired,
+};
+
+const reducer = 'email';
+const mapStateToProps = state => ({
+ force: state, // force state from reducer
+ keyword: state.getIn([reducer, 'keywordValue']),
+ initValues: state.getIn([reducer, 'formValues']),
+ emailData: state.getIn([reducer, 'inbox']),
+ currentPage: state.getIn([reducer, 'currentPage']),
+ openFrm: state.getIn([reducer, 'openFrm']),
+ messageNotif: state.getIn([reducer, 'notifMsg']),
+});
+
+const constDispatchToProps = dispatch => ({
+ fetchData: bindActionCreators(fetchMailAction, dispatch),
+ openMail: bindActionCreators(openMailAction, dispatch),
+ goto: bindActionCreators(filterAction, dispatch),
+ search: bindActionCreators(searchAction, dispatch),
+ moveTo: bindActionCreators(moveAction, dispatch),
+ remove: bindActionCreators(deleteAction, dispatch),
+ toggleStar: bindActionCreators(toggleStaredAction, dispatch),
+ compose: () => dispatch(composeAction),
+ discard: () => dispatch(discardAction),
+ sendEmail: bindActionCreators(sendAction, dispatch),
+ closeNotif: () => dispatch(closeNotifAction),
+});
+
+const EmailMapped = connect(
+ mapStateToProps,
+ constDispatchToProps
+)(Email);
+
+export default withStyles(styles)(EmailMapped);
diff --git a/front/odiparpack/app/containers/Pages/Error/index.js b/front/odiparpack/app/containers/Pages/Error/index.js
new file mode 100644
index 0000000..b408b53
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/Error/index.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { Route } from 'react-router-dom';
+import { ErrorWrap } from 'ba-components';
+
+const title = brand.name + ' - Aplication Error';
+const description = brand.desc;
+
+const Error = () => (
+
+
+ {title}
+
+
+
+
+
+
+
+ );
+ }}
+ />
+);
+
+export default Error;
diff --git a/front/odiparpack/app/containers/Pages/HelpSupport/ContactForm.js b/front/odiparpack/app/containers/Pages/HelpSupport/ContactForm.js
new file mode 100644
index 0000000..2568943
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/HelpSupport/ContactForm.js
@@ -0,0 +1,115 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Field, reduxForm } from 'redux-form/immutable';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { PapperBlock } from 'ba-components';
+import { initAction, clearAction } from 'ba-actions/ReduxFormActions';
+import { TextFieldRedux } from 'ba-components/Forms/ReduxFormMUI';
+import { Button } from '@material-ui/core';
+import styles from './helpSupport-jss';
+
+// validation functions
+const required = value => (value == null ? 'Required' : undefined);
+const email = value => (
+ value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)
+ ? 'Invalid email'
+ : undefined
+);
+
+class ContactForm extends Component {
+ render() {
+ const trueBool = true;
+ const {
+ classes,
+ handleSubmit,
+ pristine,
+ reset,
+ submitting,
+ } = this.props;
+ return (
+
+
+
+
+
+ );
+ }
+}
+
+ContactForm.propTypes = {
+ classes: PropTypes.object.isRequired,
+ handleSubmit: PropTypes.func.isRequired,
+ reset: PropTypes.func.isRequired,
+ pristine: PropTypes.bool.isRequired,
+ submitting: PropTypes.bool.isRequired,
+};
+
+const mapDispatchToProps = dispatch => ({
+ init: bindActionCreators(initAction, dispatch),
+ clear: () => dispatch(clearAction),
+});
+
+const ContactFormMapped = reduxForm({
+ form: 'immutableExample',
+})(ContactForm);
+
+const reducer = 'initval';
+const FormInit = connect(
+ state => ({
+ force: state,
+ initialValues: state.getIn([reducer, 'formValues'])
+ }),
+ mapDispatchToProps,
+)(ContactFormMapped);
+
+export default withStyles(styles)(FormInit);
diff --git a/front/odiparpack/app/containers/Pages/HelpSupport/Qna.js b/front/odiparpack/app/containers/Pages/HelpSupport/Qna.js
new file mode 100644
index 0000000..bb8a6ae
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/HelpSupport/Qna.js
@@ -0,0 +1,141 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary, Typography } from '@material-ui/core';
+import styles from './helpSupport-jss';
+
+
+class Qna extends React.Component {
+ state = {
+ expanded: null,
+ };
+
+ handleChange = panel => (event, expanded) => {
+ this.setState({
+ expanded: expanded ? panel : false,
+ });
+ };
+
+ render() {
+ const { classes } = this.props;
+ const { expanded } = this.state;
+
+ return (
+
+
+ Pellentesque ac bibendum tortor?
+
+
+
+ Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget
+ maximus est, id dignissim quam.
+
+
+
+
+ Vivamus sit amet interdum elit?
+
+
+
+ Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar
+ diam eros in elit. Pellentesque convallis laoreet laoreet.
+
+
+
+
+ Vestibulum nec mi suscipit?
+
+
+
+ Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas
+ eros, vitae egestas augue. Duis vel est augue.
+
+
+
+
+ Cras convallis lacus orci?
+
+
+
+ Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas
+ eros, vitae egestas augue. Duis vel est augue.
+
+
+
+
+ Quisque ut metus sit amet?
+
+
+
+ enean sit amet magna vel magna fringilla fermentum. Donec sit amet nulla sed arcu pulvinar ultricies commodo id ligula.
+
+
+
+
+ Nulla vehicula leo ut augue tincidunt?
+
+
+
+ Curabitur egestas consequat lorem, vel fermentum augue porta id. Aliquam lobortis magna neque, gravida consequat velit venenatis at.
+
+
+
+
+ Vivamus sit amet interdum elit?
+
+
+
+ Donec dignissim, odio ac imperdiet luctus, ante nisl accumsan justo, et venenatis ante metus pellentesque sem.
+
+
+
+
+ Maecenas nisl libero, tincidunt id odio id?
+
+
+
+ Ut sed eros finibus, placerat orci id, dapibus mauris. Vestibulum consequat hendrerit lacus. In id nisi id neque venenatis molestie.
+
+
+
+
+ Vestibulum nec mi suscipit?
+
+
+
+ Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas
+ eros, vitae egestas augue. Duis vel est augue.
+
+
+
+
+ Cras convallis lacus orci?
+
+
+
+ Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas
+ eros, vitae egestas augue. Duis vel est augue.
+
+
+
+
+ );
+ }
+}
+
+Qna.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Qna);
diff --git a/front/odiparpack/app/containers/Pages/HelpSupport/helpSupport-jss.js b/front/odiparpack/app/containers/Pages/HelpSupport/helpSupport-jss.js
new file mode 100644
index 0000000..5c954cb
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/HelpSupport/helpSupport-jss.js
@@ -0,0 +1,49 @@
+const styles = theme => ({
+ title: {
+ display: 'block',
+ margin: `${theme.spacing(3)}px 0`,
+ color: theme.palette.common.white,
+ },
+ iconTitle: {
+ position: 'relative',
+ top: theme.spacing(0.5),
+ marginRight: theme.spacing(0.5),
+ },
+ heading: {
+ fontSize: theme.typography.pxToRem(15),
+ flexBasis: '100%',
+ fontWeight: 700,
+ flexShrink: 0,
+ },
+ secondaryHeading: {
+ fontSize: theme.typography.pxToRem(15),
+ color: theme.palette.text.secondary,
+ },
+ root: {
+ width: '100%',
+ flexGrow: 1,
+ padding: 30
+ },
+ field: {
+ width: '100%',
+ marginBottom: 20
+ },
+ fieldBasic: {
+ width: '100%',
+ marginBottom: 20,
+ marginTop: 10
+ },
+ inlineWrap: {
+ display: 'flex',
+ flexDirection: 'row'
+ },
+ buttonInit: {
+ margin: theme.spacing(4),
+ textAlign: 'center'
+ },
+ frmWrap: {
+ marginTop: theme.spacing(1) * -3
+ }
+});
+
+export default styles;
diff --git a/front/odiparpack/app/containers/Pages/HelpSupport/index.js b/front/odiparpack/app/containers/Pages/HelpSupport/index.js
new file mode 100644
index 0000000..68df97b
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/HelpSupport/index.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import LiveHelp from '@material-ui/icons/LiveHelp';
+import { isWidthUp } from '@material-ui/core/withWidth';
+import { withStyles } from '@material-ui/core/styles';
+import { Typography, withWidth, Grid } from '@material-ui/core';
+import styles from './helpSupport-jss';
+import Qna from './Qna';
+import ContactForm from './ContactForm';
+
+
+class Settings extends React.Component {
+ showResult(values) {
+ setTimeout(() => {
+ this.setState({ valueForm: values });
+ window.alert(`You submitted:\n\n${this.state.valueForm}`);
+ }, 500); // simulate server latency
+ }
+
+ render() {
+ const title = brand.name;
+ const description = brand.desc;
+ const { classes, width } = this.props;
+ return (
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+ this.showResult(values)} />
+
+
+
+ );
+ }
+}
+
+Settings.propTypes = {
+ classes: PropTypes.object.isRequired,
+ width: PropTypes.string.isRequired,
+};
+
+export default withStyles(styles)(withWidth()(Settings));
diff --git a/front/odiparpack/app/containers/Pages/Maintenance/index.js b/front/odiparpack/app/containers/Pages/Maintenance/index.js
new file mode 100644
index 0000000..8771e51
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/Maintenance/index.js
@@ -0,0 +1,88 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Build from '@material-ui/icons/Build';
+import Settings from '@material-ui/icons/SettingsApplications';
+import Warning from '@material-ui/icons/Warning';
+import { Typography, Avatar, Hidden, Paper } from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ height: '100%'
+ },
+ paper: {
+ margin: 'auto',
+ padding: 40,
+ width: '90%',
+ [theme.breakpoints.up('sm')]: {
+ width: 600,
+ height: 300,
+ },
+ textAlign: 'center'
+ },
+ artwork: {
+ display: 'flex',
+ justifyContent: 'center',
+ marginBottom: 30
+ },
+ icon: {
+ margin: '10px 20px',
+ background: theme.palette.secondary.main,
+ color: theme.palette.common.white,
+ width: 100,
+ height: 100,
+ '& svg': {
+ fontSize: 64,
+ },
+ },
+});
+
+class Maintenance extends React.Component {
+ render() {
+ const title = brand.name + ' - Maintenance';
+ const description = brand.desc;
+ const { classes } = this.props;
+ return (
+
+
+ {title}
+
+
+
+
+
+
+
+ );
+ }
+}
+
+Maintenance.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Maintenance);
diff --git a/front/odiparpack/app/containers/Pages/Photos/index.js b/front/odiparpack/app/containers/Pages/Photos/index.js
new file mode 100644
index 0000000..7068ed5
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/Photos/index.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import imgData from 'ba-api/imgDataMasonry';
+import { PhotoGallery } from 'ba-components';
+
+class Photos extends React.Component {
+ render() {
+ const title = brand.name + ' - Photo Gallery';
+ const description = brand.desc;
+ return (
+
+
+ Website under maintenance
+
+Our website is under maintenance. We
+ {"'"}
+ll be back shortly
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default Photos;
diff --git a/front/odiparpack/app/containers/Pages/Settings/DetailSettings.js b/front/odiparpack/app/containers/Pages/Settings/DetailSettings.js
new file mode 100644
index 0000000..25bad64
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/Settings/DetailSettings.js
@@ -0,0 +1,203 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import classNames from 'classnames';
+import SettingsIcon from '@material-ui/icons/SettingsApplications';
+import CloseIcon from '@material-ui/icons/Close';
+import { withStyles } from '@material-ui/core/styles';
+import {
+ AppBar,
+ Grid,
+ Dialog,
+ Toolbar,
+ ListItemText,
+ ListItem,
+ List,
+ ListItemSecondaryAction,
+ Divider,
+ IconButton,
+ Typography,
+ Button,
+ Switch,
+ Slide,
+ InputLabel,
+ MenuItem,
+ FormControl,
+ Select,
+ Checkbox,
+ TextField,
+} from '@material-ui/core';
+import styles from './settings-jss';
+
+
+const Transition = React.forwardRef(function Transition(props, ref) { // eslint-disable-line
+ return
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {settingList.map(menu => {
+ const rawKey = menu.name + menu.caption;
+ if (rawKey.toLowerCase().indexOf(keyword) === -1) {
+ return false;
+ }
+ return (
+
+
+
+ );
+ })}
+
+
+
+ );
+ }
+}
+
+Settings.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Settings);
diff --git a/front/odiparpack/app/containers/Pages/Settings/settings-jss.js b/front/odiparpack/app/containers/Pages/Settings/settings-jss.js
new file mode 100644
index 0000000..5424d4e
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/Settings/settings-jss.js
@@ -0,0 +1,87 @@
+const styles = theme => ({
+ appBar: {
+ position: 'relative',
+ },
+ flex: {
+ flex: 1,
+ },
+ title: {
+ display: 'block',
+ margin: `${theme.spacing(3)}px 0`,
+ color: theme.palette.common.white,
+ },
+ searchSettings: {
+ marginBottom: theme.spacing(4),
+ },
+ wrapper: {
+ fontFamily: theme.typography.fontFamily,
+ position: 'relative',
+ marginRight: theme.spacing(2),
+ marginLeft: theme.spacing(1),
+ borderRadius: 2,
+ display: 'block',
+ },
+ search: {
+ width: 'auto',
+ height: '100%',
+ position: 'absolute',
+ pointerEvents: 'none',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ input: {
+ font: 'inherit',
+ padding: `${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(4)}px`,
+ border: 0,
+ display: 'block',
+ verticalAlign: 'middle',
+ whiteSpace: 'normal',
+ background: 'none',
+ margin: 0, // Reset for Safari
+ color: 'inherit',
+ width: '100%',
+ '&:focus': {
+ outline: 0,
+ },
+ },
+ iconTitle: {
+ position: 'relative',
+ marginRight: theme.spacing(0.5),
+ },
+ button: {
+ display: 'block',
+ width: '100%',
+ background: theme.palette.grey[50],
+ '&:hover': {
+ background: theme.palette.secondary.light
+ },
+ '& $icon': {
+ margin: '0 auto',
+ display: 'block',
+ fontSize: 64
+ },
+ '& $info': {
+ display: 'block',
+ textTransform: 'none',
+ color: theme.palette.grey[500]
+ }
+ },
+ info: {},
+ icon: {},
+ formControl: {
+ margin: theme.spacing(1),
+ minWidth: 120,
+ },
+ selectEmpty: {
+ marginTop: theme.spacing(2),
+ },
+ iconSmall: {
+ fontSize: 20,
+ },
+ leftIcon: {
+ marginRight: theme.spacing(1),
+ },
+});
+
+export default styles;
diff --git a/front/odiparpack/app/containers/Pages/SocialMedia/index.js b/front/odiparpack/app/containers/Pages/SocialMedia/index.js
new file mode 100644
index 0000000..3a5ae2c
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/SocialMedia/index.js
@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import data from 'ba-api/timelineData';
+import {
+ fetchAction,
+ postAction,
+ toggleLikeAction,
+ fetchCommentAction,
+ postCommentAction,
+ closeNotifAction
+} from 'ba-actions/SocmedActions';
+import { Timeline, WritePost, SideSection, Notification } from 'ba-components';
+import { Grid } from '@material-ui/core';
+
+class SocialMedia extends React.Component {
+ componentDidMount() {
+ this.props.fetchData(data);
+ }
+
+ render() {
+ const title = brand.name + ' - Social Media';
+ const description = brand.desc;
+ const {
+ dataProps,
+ submitPost,
+ submitLike,
+ submitComment,
+ fetchComment,
+ commentIndex,
+ closeNotif,
+ messageNotif,
+ } = this.props;
+ return (
+
+
+
+
+
+
+ this.handleSearch(event)} />
+
+
+ {title}
+
+
+
+
+
+
+ closeNotif()} message={messageNotif} />
+
+
+
+
+
+
+
+ );
+ }
+}
+
+SocialMedia.propTypes = {
+ fetchData: PropTypes.func.isRequired,
+ submitPost: PropTypes.func.isRequired,
+ submitLike: PropTypes.func.isRequired,
+ submitComment: PropTypes.func.isRequired,
+ dataProps: PropTypes.object.isRequired,
+ fetchComment: PropTypes.func.isRequired,
+ commentIndex: PropTypes.number.isRequired,
+ closeNotif: PropTypes.func.isRequired,
+ messageNotif: PropTypes.string.isRequired,
+};
+
+const reducer = 'socmed';
+const mapStateToProps = state => ({
+ force: state, // force state from reducer
+ dataProps: state.getIn([reducer, 'dataTimeline']),
+ commentIndex: state.getIn([reducer, 'commentIndex']),
+ messageNotif: state.getIn([reducer, 'notifMsg']),
+});
+
+const constDispatchToProps = dispatch => ({
+ fetchData: bindActionCreators(fetchAction, dispatch),
+ submitPost: bindActionCreators(postAction, dispatch),
+ submitComment: bindActionCreators(postCommentAction, dispatch),
+ submitLike: bindActionCreators(toggleLikeAction, dispatch),
+ fetchComment: bindActionCreators(fetchCommentAction, dispatch),
+ closeNotif: () => dispatch(closeNotifAction),
+});
+
+const SocialMediaMapped = connect(
+ mapStateToProps,
+ constDispatchToProps
+)(SocialMedia);
+
+export default SocialMediaMapped;
diff --git a/front/odiparpack/app/containers/Pages/Standalone/LoginDedicated.js b/front/odiparpack/app/containers/Pages/Standalone/LoginDedicated.js
new file mode 100644
index 0000000..9cba8fb
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/Standalone/LoginDedicated.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import brand from 'ba-api/brand';
+import logo from 'ba-images/logo.svg';
+import styles from 'ba-containers/Templates/appStyles-jss';
+import { Hidden } from '@material-ui/core';
+import Login from '../Users/Login';
+
+class LoginDedicated extends React.Component {
+ render() {
+ const { classes } = this.props;
+ return (
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+LoginDedicated.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default (withStyles(styles)(LoginDedicated));
diff --git a/front/odiparpack/app/containers/Pages/Standalone/NotFoundDedicated.js b/front/odiparpack/app/containers/Pages/Standalone/NotFoundDedicated.js
new file mode 100644
index 0000000..3d78b32
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/Standalone/NotFoundDedicated.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import styles from 'ba-containers/Templates/appStyles-jss';
+import Error from './../Error';
+
+class NotFoundDedicated extends React.Component {
+ render() {
+ const { classes } = this.props;
+ return (
+
+ 
+
+ {brand.name}
+
+
+
+
+ );
+ }
+}
+
+NotFoundDedicated.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default (withStyles(styles)(NotFoundDedicated));
diff --git a/front/odiparpack/app/containers/Pages/UserProfile/index.js b/front/odiparpack/app/containers/Pages/UserProfile/index.js
new file mode 100644
index 0000000..2065f68
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/UserProfile/index.js
@@ -0,0 +1,131 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import dummy from 'ba-api/dummyContents';
+import AccountCircle from '@material-ui/icons/AccountCircle';
+import SupervisorAccount from '@material-ui/icons/SupervisorAccount';
+import Favorite from '@material-ui/icons/Favorite';
+import PhotoLibrary from '@material-ui/icons/PhotoLibrary';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import data from 'ba-api/timelineData';
+import { fetchAction } from 'ba-actions/SocmedActions';
+import {
+ Cover,
+ About,
+ Connection,
+ Favorites,
+ Albums
+} from 'ba-components';
+
+import { AppBar, Tabs, Tab, Hidden } from '@material-ui/core';
+
+function TabContainer(props) {
+ return (
+
+ {props.children}
+
+ );
+}
+
+TabContainer.propTypes = {
+ children: PropTypes.node.isRequired,
+};
+
+class UserProfile extends React.Component {
+ state = {
+ value: 0,
+ };
+
+ componentDidMount() {
+ this.props.fetchData(data);
+ }
+
+ handleChange = (event, value) => {
+ this.setState({ value });
+ };
+
+ render() {
+ const title = brand.name + ' - Profile';
+ const description = brand.desc;
+ const { dataProps } = this.props;
+ const { value } = this.state;
+ return (
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {value === 0 &&
+ );
+ }
+}
+
+UserProfile.propTypes = {
+ dataProps: PropTypes.object.isRequired,
+ fetchData: PropTypes.func.isRequired,
+};
+
+const reducer = 'socmed';
+const mapStateToProps = state => ({
+ force: state, // force state from reducer
+ dataProps: state.getIn([reducer, 'dataTimeline'])
+});
+
+const constDispatchToProps = dispatch => ({
+ fetchData: bindActionCreators(fetchAction, dispatch)
+});
+
+const UserProfileMapped = connect(
+ mapStateToProps,
+ constDispatchToProps
+)(UserProfile);
+
+export default UserProfileMapped;
diff --git a/front/odiparpack/app/containers/Pages/Users/LockScreen.js b/front/odiparpack/app/containers/Pages/Users/LockScreen.js
new file mode 100644
index 0000000..2752ae6
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/Users/LockScreen.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { LockForm } from 'ba-components';
+import styles from 'ba-components/Forms/user-jss';
+import { Grid } from '@material-ui/core';
+
+class ResetPassword extends React.Component {
+ state = {
+ valueForm: []
+ }
+
+ submitForm(values) {
+ setTimeout(() => {
+ this.setState({ valueForm: values });
+ console.log(`You submitted:\n\n${this.state.valueForm}`);
+ window.location.href = '/app';
+ }, 500); // simulate server latency
+ }
+
+ render() {
+ const title = brand.name + ' - Lock Screen';
+ const description = brand.desc;
+ const { classes } = this.props;
+ return (
+
+
+ {title}
+
+
+
+
+
+
+
+ );
+ }
+}
+
+ResetPassword.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ResetPassword);
diff --git a/front/odiparpack/app/containers/Pages/Users/Login.js b/front/odiparpack/app/containers/Pages/Users/Login.js
new file mode 100644
index 0000000..300f7b4
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/Users/Login.js
@@ -0,0 +1,85 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Type from 'ba-styles/Typography.scss';
+import ArrowForward from '@material-ui/icons/ArrowForward';
+import logo from 'ba-images/logo.svg';
+import { LoginForm } from 'ba-components';
+import styles from 'ba-components/Forms/user-jss';
+
+import { Grid, Hidden, Typography } from '@material-ui/core';
+
+class Login extends React.Component {
+ state = {
+ valueForm: []
+ }
+
+ submitForm(values) {
+ setTimeout(() => {
+ this.setState({ valueForm: values });
+ console.log(`You submitted:\n\n${this.state.valueForm}`);
+ window.location.href = '/app';
+ }, 500); // simulate server latency
+ }
+
+ render() {
+ const title = brand.name + ' - Login';
+ const description = brand.desc;
+ const { classes } = this.props;
+ return (
+
+
+
+ {/* ----------------------------------------------------------------------*/}
+ {/* Load Login Form */}
+ this.submitForm(values)} />
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+ );
+ }
+}
+
+Login.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Login);
diff --git a/front/odiparpack/app/containers/Pages/Users/Register.js b/front/odiparpack/app/containers/Pages/Users/Register.js
new file mode 100644
index 0000000..c139068
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/Users/Register.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Type from 'ba-styles/Typography.scss';
+import ArrowForward from '@material-ui/icons/ArrowForward';
+import brand from 'ba-api/brand';
+import logo from 'ba-images/logo.svg';
+import { RegisterForm } from 'ba-components';
+import styles from 'ba-components/Forms/user-jss';
+
+import { Grid, Hidden, Typography } from '@material-ui/core';
+
+class Login extends React.Component {
+ state = {
+ valueForm: []
+ }
+
+ submitForm(values) {
+ setTimeout(() => {
+ this.setState({ valueForm: values });
+ console.log(`You submitted:\n\n${this.state.valueForm}`);
+ window.location.href = '/app';
+ }, 500); // simulate server latency
+ }
+
+ render() {
+ const title = brand.name + ' - Register';
+ const description = brand.desc;
+ const { classes } = this.props;
+ return (
+
+
+
+
+
+ {/* Welcome Login */}
+
+
+
+ {/* ----------------------------------------------------------------------*/}
+ {/* Load Login Form */}
+ this.submitForm(values)} />
+
+
+
+
+
+
+
+
+ Hello there,
+
+
+
+ welcome to
+ {' '}
+ {brand.name}
+
+
+
+
+
+
+ {brand.name}
+
+
+ {title}
+
+
+
+
+
+
+
+ );
+ }
+}
+
+Login.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Login);
diff --git a/front/odiparpack/app/containers/Pages/Users/ResetPassword.js b/front/odiparpack/app/containers/Pages/Users/ResetPassword.js
new file mode 100644
index 0000000..e80253d
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/Users/ResetPassword.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { ResetForm } from 'ba-components';
+import styles from 'ba-components/Forms/user-jss';
+import { Grid } from '@material-ui/core';
+
+class ResetPassword extends React.Component {
+ state = {
+ valueForm: []
+ }
+
+ submitForm(values) {
+ setTimeout(() => {
+ this.setState({ valueForm: values });
+ console.log(`You submitted:\n\n${this.state.valueForm}`);
+ }, 500); // simulate server latency
+ }
+
+ render() {
+ const title = brand.name + ' - Reset Password';
+ const description = brand.desc;
+ const { classes } = this.props;
+ return (
+
+
+
+
+
+ {/* Welcome Login */}
+
+
+
+ {/* ----------------------------------------------------------------------*/}
+ {/* Load Register Form */}
+ this.submitForm(values)} />
+
+
+
+
+
+
+
+
+ Nice to meet You :)
+
+
+
+
+
+ {brand.name}
+
+
+ {title}
+
+
+
+
+
+
+
+ );
+ }
+}
+
+ResetPassword.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ResetPassword);
diff --git a/front/odiparpack/app/containers/Parent/index.js b/front/odiparpack/app/containers/Parent/index.js
new file mode 100644
index 0000000..50067c3
--- /dev/null
+++ b/front/odiparpack/app/containers/Parent/index.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { withStyles } from '@material-ui/core/styles';
+import { Link } from 'react-router-dom';
+import MenuContent from 'ba-api/menu';
+import { PapperBlock } from 'ba-components';
+import { Button } from '@material-ui/core';
+
+const styles = {
+ link: {
+ display: 'block',
+ textTransform: 'capitalize'
+ }
+};
+
+function sortByKey(array, key) {
+ return array.sort((a, b) => {
+ const x = a[key]; const y = b[key];
+ return ((x < y) ? -1 : ((x > y) ? 1 : 0));
+ });
+}
+
+class Parent extends React.Component {
+ render() {
+ const title = brand.name;
+ const description = brand.desc;
+ const { classes } = this.props;
+ // Get Path Location
+ let parts = this.props.history.location.pathname.split('/');
+ const place = parts[parts.length - 1];
+ parts = parts.slice(1, parts.length - 1);
+ const menuItems = MenuContent
+ .find(obj => (
+ obj.key === place
+ ));
+ const getMenus = menuArray => menuArray.map((item, index) => (
+
+ ));
+ return (
+
+
+
+ {/* ----------------------------------------------------------------------*/}
+ {/* Load Login Form */}
+ this.submitForm(values)} />
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+ {menuItems !== undefined && getMenus(sortByKey(menuItems.child, 'key'))}
+
+
+ );
+ }
+}
+
+Parent.propTypes = {
+ classes: PropTypes.object.isRequired,
+ history: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Parent);
diff --git a/front/odiparpack/app/containers/Tables/AdvancedTable.js b/front/odiparpack/app/containers/Tables/AdvancedTable.js
new file mode 100644
index 0000000..4d1b60a
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/AdvancedTable.js
@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { withStyles } from '@material-ui/core/styles';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { AdvTableDemo, AdvFilter } from './demos';
+
+const styles = ({
+ root: {
+ flexGrow: 1,
+ }
+});
+
+class AdvancedTable extends Component {
+ render() {
+ const title = brand.name + ' - Table';
+ const description = brand.desc;
+ const docSrc = 'containers/Tables/demos/';
+ return (
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default withStyles(styles)(AdvancedTable);
diff --git a/front/odiparpack/app/containers/Tables/BasicTable.js b/front/odiparpack/app/containers/Tables/BasicTable.js
new file mode 100644
index 0000000..a6f81e1
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/BasicTable.js
@@ -0,0 +1,110 @@
+import React, { Component } from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Markdown from 'react-markdown';
+import codeStyle from 'ba-styles/Code.scss';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { Grid } from '@material-ui/core';
+import {
+ StrippedTable,
+ HoverTable,
+ BorderedTable,
+ TrackingTable,
+ StatusLabel,
+ StatusColorRow,
+ EmptyTable
+} from './demos';
+
+const styles = ({
+ root: {
+ flexGrow: 1,
+ }
+});
+
+class BasicTable extends Component {
+ render() {
+ const { classes } = this.props;
+ const title = brand.name + ' - Table';
+ const description = brand.desc;
+ const docSrc = 'containers/Tables/demos/';
+ return (
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+BasicTable.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(BasicTable);
diff --git a/front/odiparpack/app/containers/Tables/CrudTable.js b/front/odiparpack/app/containers/Tables/CrudTable.js
new file mode 100644
index 0000000..7ee18dd
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/CrudTable.js
@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { withStyles } from '@material-ui/core/styles';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { Paper } from '@material-ui/core';
+import { CrudTableDemo, CrudTbFormDemo } from './demos';
+
+const styles = ({
+ root: {
+ flexGrow: 1,
+ }
+});
+
+class CrudTablePage extends Component {
+ render() {
+ const title = brand.name + ' - Table';
+ const description = brand.desc;
+ const docSrc = 'containers/Tables/demos/';
+ const { classes } = this.props;
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+CrudTablePage.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CrudTablePage);
diff --git a/front/odiparpack/app/containers/Tables/TablePlayground.js b/front/odiparpack/app/containers/Tables/TablePlayground.js
new file mode 100644
index 0000000..30382bb
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/TablePlayground.js
@@ -0,0 +1,419 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import tableStyles from 'ba-styles/Table.scss';
+import EnhancedTableHead from 'ba-components/Tables/tableParts/TableHeader';
+import EnhancedTableToolbar from 'ba-components/Tables/tableParts/TableToolbar';
+import { PapperBlock } from 'ba-components';
+
+import {
+ Grid,
+ FormControl,
+ FormLabel,
+ FormControlLabel,
+ FormGroup,
+ RadioGroup,
+ Radio,
+ Table,
+ TableBody,
+ TableCell,
+ TableRow,
+ TablePagination,
+ Paper,
+ Checkbox,
+} from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ marginTop: theme.spacing(3),
+ overflowX: 'auto',
+ },
+ demo: {
+ height: 240,
+ },
+ paper: {
+ padding: theme.spacing(2),
+ height: '100%',
+ backgroundColor: theme.palette.secondary.light,
+ },
+ control: {
+ padding: theme.spacing(2),
+ },
+ settings: {
+ padding: 30
+ },
+});
+
+let counter = 0;
+function createData(name, calories, fat, carbs, protein) {
+ counter += 1;
+ return {
+ id: counter,
+ name,
+ calories,
+ fat,
+ carbs,
+ protein
+ };
+}
+
+class InteractiveGrid extends React.Component {
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ order: 'asc',
+ orderBy: 'calories',
+ selected: [],
+ columnData: [
+ {
+ id: 'name',
+ numeric: false,
+ disablePadding: false,
+ label: 'Dessert (100g serving)'
+ }, {
+ id: 'calories',
+ numeric: true,
+ disablePadding: false,
+ label: 'Calories'
+ }, {
+ id: 'fat',
+ numeric: true,
+ disablePadding: false,
+ label: 'Fat (g)'
+ }, {
+ id: 'carbs',
+ numeric: true,
+ disablePadding: false,
+ label: 'Carbs (g)'
+ }, {
+ id: 'protein',
+ numeric: true,
+ disablePadding: false,
+ label: 'Protein (g)'
+ },
+ ],
+ data: [
+ createData('Cupcake', 305, 3.7, 67, 4.3),
+ createData('Donut', 452, 25.0, 51, 4.9),
+ createData('Eclair', 262, 16.0, 24, 6.0),
+ createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+ createData('Gingerbread', 356, 16.0, 49, 3.9),
+ createData('Honeycomb', 408, 3.2, 87, 6.5),
+ createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+ createData('Jelly Bean', 375, 0.0, 94, 0.0),
+ createData('KitKat', 518, 26.0, 65, 7.0),
+ createData('Lollipop', 392, 0.2, 98, 0.0),
+ createData('Marshmallow', 318, 0, 81, 2.0),
+ createData('Nougat', 360, 19.0, 9, 37.0),
+ createData('Oreo', 437, 18.0, 63, 4.0),
+ ].sort((a, b) => (a.calories < b.calories ? -1 : 1)),
+ page: 0,
+ rowsPerPage: 5,
+ defaultPerPage: 5,
+ filterText: '',
+ size: 'medium',
+ bordered: false,
+ stripped: true,
+ hovered: false,
+ toolbar: true,
+ checkcell: false,
+ pagination: true
+ };
+ }
+
+ handleChangeRadio = key => (event, value) => {
+ this.setState({
+ [key]: value,
+ });
+ };
+
+ handleChangeCheck = name => event => {
+ this.setState({ [name]: event.target.checked });
+ };
+
+ handleRequestSort = (event, property) => {
+ const orderBy = property;
+ let order = 'desc';
+
+ if (this.state.orderBy === property && this.state.order === 'desc') {
+ order = 'asc';
+ }
+
+ const data = order === 'desc'
+ ? this.state.data.sort((a, b) => (b[orderBy] < a[orderBy] ? -1 : 1))
+ : this.state.data.sort((a, b) => (a[orderBy] < b[orderBy] ? -1 : 1));
+
+ this.setState({ data, order, orderBy });
+ };
+
+ handleSelectAllClick = (event, checked) => {
+ if (checked) {
+ this.setState({ selected: this.state.data.map(n => n.id) });
+ return;
+ }
+ this.setState({ selected: [] });
+ };
+
+ handleClick = (event, id) => {
+ if (!this.state.checkcell) {
+ return;
+ }
+ const { selected } = this.state;
+ const selectedIndex = selected.indexOf(id);
+ let newSelected = [];
+
+ if (selectedIndex === -1) {
+ newSelected = newSelected.concat(selected, id);
+ } else if (selectedIndex === 0) {
+ newSelected = newSelected.concat(selected.slice(1));
+ } else if (selectedIndex === selected.length - 1) {
+ newSelected = newSelected.concat(selected.slice(0, -1));
+ } else if (selectedIndex > 0) {
+ newSelected = newSelected.concat(
+ selected.slice(0, selectedIndex),
+ selected.slice(selectedIndex + 1),
+ );
+ }
+
+ this.setState({ selected: newSelected });
+ };
+
+ handleChangePage = (event, page) => {
+ this.setState({ page });
+ };
+
+ handleChangeRowsPerPage = event => {
+ this.setState({ rowsPerPage: event.target.value });
+ };
+
+ isSelected = id => this.state.selected.indexOf(id) !== -1;
+
+ handleUserInput(value) {
+ // Show all item first
+ if (value !== '') {
+ this.setState({ rowsPerPage: this.state.data.length });
+ } else {
+ this.setState({ rowsPerPage: this.state.defaultPerPage });
+ }
+
+ // Show result base on keyword
+ this.setState({ filterText: value.toLowerCase() });
+ }
+
+ render() {
+ const { classes } = this.props;
+ const {
+ data,
+ order,
+ orderBy,
+ selected,
+ rowsPerPage,
+ page,
+ filterText,
+ size,
+ columnData,
+ toolbar, pagination, checkcell,
+ bordered, stripped, hovered
+ } = this.state;
+ const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - (page * rowsPerPage));
+ const renderCell = (dataArray, keyArray) => keyArray.map((itemCell, index) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Size
+
+
+
+
+
+
+ Style
+
+
+
+
+
+
+ Component
+
+
+
+
+
+
+
+
+ {toolbar
+ && (
+ this.handleUserInput(event)}
+ />
+ )
+ }
+
+
+
+
+
+
+
+
+ {pagination
+ && (
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+TreeTablePage.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(TreeTablePage);
diff --git a/front/odiparpack/app/containers/Tables/demos/AdvFilter.js b/front/odiparpack/app/containers/Tables/demos/AdvFilter.js
new file mode 100644
index 0000000..091703a
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/AdvFilter.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import MUIDataTable from 'mui-datatables';
+/*
+ It uses npm mui-datatables. It's easy to use, you just describe columns and data collection.
+ Checkout full documentation here :
+ https://github.com/gregnb/mui-datatables/blob/master/README.md
+*/
+class AdvFilter extends React.Component {
+ state = {
+ columns: ['Name', 'Title', 'Location', 'Age', 'Salary'],
+ data: [
+ ['Gabby George', 'Business Analyst', 'Minneapolis', 30, '$100,000'],
+ ['Aiden Lloyd', 'Business Consultant', 'Dallas', 55, '$200,000'],
+ ['Jaden Collins', 'Attorney', 'Santa Ana', 27, '$500,000'],
+ ['Franky Rees', 'Business Analyst', 'St. Petersburg', 22, '$50,000'],
+ ['Aaren Rose', 'Business Consultant', 'Toledo', 28, '$75,000'],
+ ['Blake Duncan', 'Business Management Analyst', 'San Diego', 65, '$94,000'],
+ ['Frankie Parry', 'Agency Legal Counsel', 'Jacksonville', 71, '$210,000'],
+ ['Lane Wilson', 'Commercial Specialist', 'Omaha', 19, '$65,000'],
+ ['Robin Duncan', 'Business Analyst', 'Los Angeles', 20, '$77,000'],
+ ['Mel Brooks', 'Business Consultant', 'Oklahoma City', 37, '$135,000'],
+ ['Harper White', 'Attorney', 'Pittsburgh', 52, '$420,000'],
+ ['Kris Humphrey', 'Agency Legal Counsel', 'Laredo', 30, '$150,000'],
+ ['Frankie Long', 'Industrial Analyst', 'Austin', 31, '$170,000'],
+ ['Brynn Robbins', 'Business Analyst', 'Norfolk', 22, '$90,000'],
+ ['Justice Mann', 'Business Consultant', 'Chicago', 24, '$133,000'],
+ ['Addison Navarro', 'Business Management Analyst', 'New York', 50, '$295,000'],
+ ['Jesse Welch', 'Agency Legal Counsel', 'Seattle', 28, '$200,000'],
+ ['Eli Mejia', 'Commercial Specialist', 'Long Beach', 65, '$400,000'],
+ ['Gene Leblanc', 'Industrial Analyst', 'Hartford', 34, '$110,000'],
+ ['Danny Leon', 'Computer Scientist', 'Newark', 60, '$220,000'],
+ ['Lane Lee', 'Corporate Counselor', 'Cincinnati', 52, '$180,000'],
+ ['Jesse Hall', 'Business Analyst', 'Baltimore', 44, '$99,000'],
+ ['Danni Hudson', 'Agency Legal Counsel', 'Tampa', 37, '$90,000'],
+ ['Terry Macdonald', 'Commercial Specialist', 'Miami', 39, '$140,000'],
+ ['Justice Mccarthy', 'Attorney', 'Tucson', 26, '$330,000'],
+ ['Silver Carey', 'Computer Scientist', 'Memphis', 47, '$250,000'],
+ ['Franky Miles', 'Industrial Analyst', 'Buffalo', 49, '$190,000'],
+ ['Glen Nixon', 'Corporate Counselor', 'Arlington', 44, '$80,000'],
+ ['Gabby Strickland', 'Business Process Consultant', 'Scottsdale', 26, '$45,000'],
+ ['Mason Ray', 'Computer Scientist', 'San Francisco', 39, '$142,000']
+ ]
+ }
+ render() {
+ const { columns, data } = this.state;
+ const options = {
+ filterType: 'dropdown',
+ responsive: 'stacked',
+ print: true,
+ rowsPerPage: 10,
+ page: 1
+ };
+ return (
+
+
+
+
+
+
+
+
+
+ Nutrition
+
+
+ closeNotif(branch)} message={messageNotif} />
+
+
+
+ );
+ }
+}
+
+CrudTableDemo.propTypes = {
+ classes: PropTypes.object.isRequired,
+ fetchData: PropTypes.func.isRequired,
+ dataTable: PropTypes.object.isRequired,
+ addEmptyRow: PropTypes.func.isRequired,
+ removeRow: PropTypes.func.isRequired,
+ updateRow: PropTypes.func.isRequired,
+ editRow: PropTypes.func.isRequired,
+ finishEditRow: PropTypes.func.isRequired,
+ closeNotif: PropTypes.func.isRequired,
+ messageNotif: PropTypes.string.isRequired,
+};
+
+const mapStateToProps = state => ({
+ force: state, // force state from reducer
+ dataTable: state.getIn([branch, 'dataTable']),
+ messageNotif: state.getIn([branch, 'notifMsg']),
+});
+
+const mapDispatchToProps = dispatch => ({
+ fetchData: bindActionCreators(fetchAction, dispatch),
+ addEmptyRow: bindActionCreators(addAction, dispatch),
+ removeRow: bindActionCreators(removeAction, dispatch),
+ updateRow: bindActionCreators(updateAction, dispatch),
+ editRow: bindActionCreators(editAction, dispatch),
+ finishEditRow: bindActionCreators(saveAction, dispatch),
+ closeNotif: bindActionCreators(closeNotifAction, dispatch),
+});
+
+const CrudTableMapped = connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(CrudTableDemo);
+
+export default withStyles(styles)(CrudTableMapped);
diff --git a/front/odiparpack/app/containers/Tables/demos/CrudTbFormDemo.js b/front/odiparpack/app/containers/Tables/demos/CrudTbFormDemo.js
new file mode 100644
index 0000000..c20803e
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/CrudTbFormDemo.js
@@ -0,0 +1,230 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Field } from 'redux-form/immutable';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import {
+ CheckboxRedux,
+ SelectRedux,
+ TextFieldRedux,
+ SwitchRedux
+} from 'ba-components/Forms/ReduxFormMUI';
+import {
+ fetchAction,
+ addAction,
+ closeAction,
+ submitAction,
+ removeAction,
+ editAction,
+ closeNotifAction
+} from 'ba-actions/CrudTbFrmActions';
+import { CrudTableForm, Notification } from 'ba-components';
+import {
+ Paper,
+ MenuItem,
+ InputLabel,
+ Radio,
+ RadioGroup,
+ FormControl,
+ FormLabel,
+ FormControlLabel,
+} from '@material-ui/core';
+import { anchorTable, dataApi } from './sampleData';
+
+
+const branch = 'crudTbFrmDemo';
+
+const renderRadioGroup = ({ input, ...rest }) => (
+
+ closeNotif(branch)} message={messageNotif} />
+
+
+ {/* Create Your own form, then arrange or custom it as You like */}
+
+
+
+ );
+ }
+}
+
+renderRadioGroup.propTypes = {
+ input: PropTypes.object.isRequired,
+};
+
+CrudTbFormDemo.propTypes = {
+ dataTable: PropTypes.object.isRequired,
+ openForm: PropTypes.bool.isRequired,
+ classes: PropTypes.object.isRequired,
+ fetchData: PropTypes.func.isRequired,
+ addNew: PropTypes.func.isRequired,
+ closeForm: PropTypes.func.isRequired,
+ submit: PropTypes.func.isRequired,
+ removeRow: PropTypes.func.isRequired,
+ editRow: PropTypes.func.isRequired,
+ initValues: PropTypes.object.isRequired,
+ closeNotif: PropTypes.func.isRequired,
+ messageNotif: PropTypes.string.isRequired,
+};
+
+
+const mapStateToProps = state => ({
+ force: state, // force state from reducer
+ initValues: state.getIn([branch, 'formValues']),
+ dataTable: state.getIn([branch, 'dataTable']),
+ openForm: state.getIn([branch, 'showFrm']),
+ messageNotif: state.getIn([branch, 'notifMsg']),
+});
+
+const mapDispatchToProps = dispatch => ({
+ fetchData: bindActionCreators(fetchAction, dispatch),
+ addNew: bindActionCreators(addAction, dispatch),
+ closeForm: bindActionCreators(closeAction, dispatch),
+ submit: bindActionCreators(submitAction, dispatch),
+ removeRow: bindActionCreators(removeAction, dispatch),
+ editRow: bindActionCreators(editAction, dispatch),
+ closeNotif: bindActionCreators(closeNotifAction, dispatch),
+});
+
+const CrudTbFormDemoMapped = connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(CrudTbFormDemo);
+
+export default withStyles(styles)(CrudTbFormDemoMapped);
diff --git a/front/odiparpack/app/containers/Tables/demos/EmptyTable.js b/front/odiparpack/app/containers/Tables/demos/EmptyTable.js
new file mode 100644
index 0000000..c9517a2
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/EmptyTable.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { EmptyData } from 'ba-components';
+
+import { Toolbar, Typography, Table, TableCell, TableHead, TableRow, Paper } from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ marginTop: theme.spacing(3),
+ overflowX: 'auto',
+ },
+ table: {
+ minWidth: 700,
+ },
+});
+
+function EmptyTable(props) {
+ const { classes } = props;
+ return (
+
+
+
+
+
+ Choose One Option
+
+
+
+
+
+ Selection
+
+
+
+
+
+
+
+
+ Toggle Input
+
+
+
+
+
+ {/* No need create button or submit, because that already made in this component */}
+
+ Nutrition
+
+
+ Nutrition
+
+
+ Nutrition
+
+
+ Nutrition
+
+
+ Nutrition
+
+
+ Nutrition
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+TreeTableDemo.propTypes = {
+ classes: PropTypes.object.isRequired,
+ treeOpen: PropTypes.object.isRequired,
+ arrowMore: PropTypes.object.isRequired,
+ toggleTree: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = state => ({
+ force: state, // force state from reducer
+ treeOpen: state.getIn([branch, 'treeOpen']),
+ arrowMore: state.getIn([branch, 'arrowMore']),
+});
+
+const mapDispatchToProps = dispatch => ({
+ toggleTree: bindActionCreators(openAction, dispatch)
+});
+
+const TreeTableDemoMapped = connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(TreeTableDemo);
+
+export default withStyles(styles)(TreeTableDemoMapped);
diff --git a/front/odiparpack/app/containers/Tables/demos/TreeTableDemoIcon.js b/front/odiparpack/app/containers/Tables/demos/TreeTableDemoIcon.js
new file mode 100644
index 0000000..d669fae
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/TreeTableDemoIcon.js
@@ -0,0 +1,68 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import openAction from 'ba-actions/TreeTableActions';
+import { TreeTable } from 'ba-components';
+import { Paper } from '@material-ui/core';
+import data from './dataTreeTable.js';
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ marginTop: theme.spacing(3),
+ overflowX: 'auto',
+ },
+});
+
+const branch = 'treeTablePM';
+
+class TreeTableDemoIcon extends Component {
+ render() {
+ const {
+ arrowMore,
+ treeOpen,
+ classes,
+ toggleTree
+ } = this.props;
+ return (
+
+
+
+
+ );
+ }
+}
+
+TreeTableDemoIcon.propTypes = {
+ classes: PropTypes.object.isRequired,
+ treeOpen: PropTypes.object.isRequired,
+ arrowMore: PropTypes.object.isRequired,
+ toggleTree: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = state => ({
+ force: state, // force state from reducer
+ treeOpen: state.getIn([branch, 'treeOpen']),
+ arrowMore: state.getIn([branch, 'arrowMore']),
+});
+
+const mapDispatchToProps = dispatch => ({
+ toggleTree: bindActionCreators(openAction, dispatch)
+});
+
+const TreeTableIconMapped = connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(TreeTableDemoIcon);
+
+export default withStyles(styles)(TreeTableIconMapped);
diff --git a/front/odiparpack/app/containers/Tables/demos/dataTreeTable.js b/front/odiparpack/app/containers/Tables/demos/dataTreeTable.js
new file mode 100644
index 0000000..2eba8ab
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/dataTreeTable.js
@@ -0,0 +1,128 @@
+module.exports = {
+ head: [
+ {
+ label: 'KeyId',
+ },
+ {
+ label: 'Dessert (100g serving)',
+ },
+ {
+ label: 'Calories',
+ },
+ {
+ label: 'Fat(g)',
+ }
+ ],
+ body: [
+ {
+ id: '1',
+ name: 'Frozen yoghurt',
+ calories: 159,
+ fat: 24,
+ child: [
+ {
+ id: '1_1',
+ name: 'Frozen child 1',
+ calories: 159,
+ fat: 24,
+ },
+ {
+ id: '1_2',
+ name: 'Frozen child 2',
+ calories: 159,
+ fat: 24,
+ child: [
+ {
+ id: '1_2_1',
+ name: 'Frozen grand child 1',
+ calories: 159,
+ fat: 24,
+ },
+ ]
+ },
+ ]
+ },
+ {
+ id: '2',
+ name: 'Eclair',
+ calories: 159,
+ fat: 24,
+ child: [
+ {
+ id: '2_1',
+ name: 'Eclair Child',
+ calories: 159,
+ fat: 24,
+ child: [
+ {
+ id: '2_1_1',
+ name: 'Eclair Grand Child 1',
+ calories: 159,
+ fat: 24,
+ },
+ {
+ id: '2_1_2',
+ name: 'Eclair Grand Child 2',
+ calories: 159,
+ fat: 24,
+ }
+ ]
+ },
+ ]
+ },
+ {
+ id: '3',
+ name: 'Cupcake',
+ calories: 159,
+ fat: 24,
+ },
+ {
+ id: '4',
+ name: 'Ginger Bread',
+ calories: 159,
+ fat: 24,
+ child: [
+ {
+ id: '4_1',
+ name: 'Ginger Bread Child',
+ calories: 159,
+ fat: 24,
+ child: [
+ {
+ id: '4_1_1',
+ name: 'Ginger Bread Grand Child 1',
+ calories: 159,
+ fat: 24,
+ child: [
+ {
+ id: '4_1_1_1',
+ name: 'Ginger Bread Super Grand Child 1',
+ calories: 159,
+ fat: 24,
+ },
+ {
+ id: '4_1_1_2',
+ name: 'Ginger Bread Super Grand Child 2',
+ calories: 159,
+ fat: 24,
+ },
+ ]
+ },
+ {
+ id: '4_1_2',
+ name: 'Ginger Bread Grand Child 2',
+ calories: 159,
+ fat: 24,
+ },
+ {
+ id: '4_1_3',
+ name: 'Ginger Bread Grand Child 3',
+ calories: 159,
+ fat: 24,
+ }
+ ]
+ },
+ ]
+ }
+ ]
+};
diff --git a/front/odiparpack/app/containers/Tables/demos/index.js b/front/odiparpack/app/containers/Tables/demos/index.js
new file mode 100644
index 0000000..604e828
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/index.js
@@ -0,0 +1,14 @@
+export SimpleTable from './SimpleTable';
+export StrippedTable from './StrippedTable';
+export HoverTable from './HoverTable';
+export BorderedTable from './BorderedTable';
+export TreeTableDemo from './TreeTableDemo';
+export TreeTableDemoIcon from './TreeTableDemoIcon';
+export CrudTableDemo from './CrudTableDemo';
+export CrudTbFormDemo from './CrudTbFormDemo';
+export AdvTableDemo from './AdvTableDemo';
+export AdvFilter from './AdvFilter';
+export StatusLabel from './StatusLabel';
+export StatusColorRow from './StatusColorRow';
+export EmptyTable from './EmptyTable';
+export TrackingTable from './TrackingTable';
diff --git a/front/odiparpack/app/containers/Tables/demos/sampleData.js b/front/odiparpack/app/containers/Tables/demos/sampleData.js
new file mode 100644
index 0000000..d53d8e2
--- /dev/null
+++ b/front/odiparpack/app/containers/Tables/demos/sampleData.js
@@ -0,0 +1,124 @@
+export const anchorTable = [
+ {
+ name: 'id',
+ label: 'Id',
+ initialValue: '',
+ hidden: true
+ }, {
+ name: 'text',
+ label: 'Text Field',
+ initialValue: null,
+ width: 'auto',
+ hidden: false
+ }, {
+ name: 'email',
+ label: 'Email Field',
+ initialValue: null,
+ width: 'auto',
+ hidden: false
+ }, {
+ name: 'radio',
+ label: 'Radio Option',
+ initialValue: 'option1',
+ width: '80',
+ hidden: false
+ }, {
+ name: 'selection',
+ label: 'Selection',
+ initialValue: 'option1',
+ width: '80',
+ hidden: false
+ }, {
+ name: 'onof',
+ label: 'On/Of Input',
+ initialValue: true,
+ width: '80',
+ hidden: false
+ }, {
+ name: 'checkbox',
+ label: 'Checkbox',
+ initialValue: true,
+ width: '80',
+ hidden: false
+ }, {
+ name: 'textarea',
+ label: 'Text Area',
+ initialValue: 'This is default text',
+ width: 'auto',
+ hidden: false
+ }, {
+ name: 'edited',
+ label: '',
+ initialValue: '',
+ hidden: true
+ }, {
+ name: 'action',
+ label: 'Action',
+ initialValue: '',
+ hidden: false
+ },
+];
+
+export const dataApi = [
+ {
+ id: '1',
+ text: 'Just write',
+ email: 'mail@boss.com',
+ radio: 'option2',
+ selection: 'option1',
+ onof: false,
+ checkbox: true,
+ textarea: 'Lorem ipsum dolor sit amet',
+ edited: false,
+ }, {
+ id: '2',
+ text: 'Some text',
+ email: 'mail@material.com',
+ radio: 'option2',
+ selection: 'option2',
+ onof: false,
+ checkbox: false,
+ textarea: 'Lorem ipsum dolor sit amet',
+ edited: false,
+ }, {
+ id: '3',
+ text: 'Because it is a TextField',
+ email: 'mail@admin.com',
+ radio: 'option1',
+ selection: 'option3',
+ onof: false,
+ checkbox: false,
+ textarea: 'Lorem ipsum dolor sit amet',
+ edited: false,
+ }, {
+ id: '4',
+ text: 'And editable',
+ email: 'mail@example.com',
+ radio: 'option1',
+ selection: 'option1',
+ onof: false,
+ checkbox: true,
+ textarea: 'Lorem ipsum dolor sit amet',
+ edited: false,
+ }, {
+ id: '5',
+ text: 'You can write',
+ email: 'mail@material.com',
+ radio: 'option2',
+ selection: 'option2',
+ onof: false,
+ checkbox: true,
+ textarea: 'Lorem ipsum dolor sit amet',
+ edited: false,
+ }, {
+ id: '6',
+ text: 'Everything You want here',
+ email: 'mail@everything.com',
+ radio: 'option1',
+ selection: 'option3',
+ onof: false,
+ checkbox: false,
+ textarea: 'Lorem ipsum dolor sit amet',
+ edited: false,
+ },
+];
diff --git a/front/odiparpack/app/containers/Templates/Dashboard.js b/front/odiparpack/app/containers/Templates/Dashboard.js
new file mode 100644
index 0000000..5f24777
--- /dev/null
+++ b/front/odiparpack/app/containers/Templates/Dashboard.js
@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from 'react';
+import { PropTypes } from 'prop-types';
+import classNames from 'classnames';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { withStyles } from '@material-ui/core/styles';
+import { Header, Sidebar, BreadCrumb } from 'ba-components';
+import { toggleAction, openAction, playTransitionAction } from 'ba-actions/UiActions';
+import { Fade } from '@material-ui/core';
+import styles from './appStyles-jss';
+
+function Dashboard(props) {
+ const {
+ classes,
+ children,
+ history,
+ toggleDrawer,
+ sidebarOpen,
+ initialOpen,
+ loadTransition,
+ pageLoaded
+ } = props;
+ const [transform, setTransform] = useState(0);
+
+ const darker = true;
+
+ const handleScroll = () => {
+ const doc = document.documentElement;
+ const scroll = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
+ setTransform(scroll);
+ };
+
+ useEffect(() => {
+ // Scroll content to top
+ window.addEventListener('scroll', handleScroll);
+
+ // Set expanded sidebar menu
+ const currentPath = history.location.pathname;
+ initialOpen(currentPath);
+
+ // Play page transition
+ loadTransition(true);
+
+ // Execute all arguments when page changes
+ const unlisten = history.listen(() => {
+ window.scrollTo(0, 0);
+ setTimeout(() => {
+ loadTransition(true);
+ }, 500);
+ });
+
+ return () => {
+ unlisten();
+ };
+ }, []);
+
+ return (
+
+ 30 && darker} margin={sidebarOpen} />
+ 30 && darker}
+ />
+
+
+
+
+
+
+
+
+ );
+}
+
+Dashboard.propTypes = {
+ classes: PropTypes.object.isRequired,
+ history: PropTypes.object.isRequired,
+ children: PropTypes.node.isRequired,
+ initialOpen: PropTypes.func.isRequired,
+ toggleDrawer: PropTypes.func.isRequired,
+ loadTransition: PropTypes.func.isRequired,
+ sidebarOpen: PropTypes.bool.isRequired,
+ pageLoaded: PropTypes.bool.isRequired
+};
+
+const reducer = 'ui';
+const mapStateToProps = state => ({
+ sidebarOpen: state.getIn([reducer, 'sidebarOpen']),
+ pageLoaded: state.getIn([reducer, 'pageLoaded'])
+});
+
+const mapDispatchToProps = dispatch => ({
+ toggleDrawer: () => dispatch(toggleAction),
+ initialOpen: bindActionCreators(openAction, dispatch),
+ loadTransition: bindActionCreators(playTransitionAction, dispatch),
+});
+
+const DashboardMaped = connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(Dashboard);
+
+export default (withStyles(styles)(DashboardMaped));
diff --git a/front/odiparpack/app/containers/Templates/Outer.js b/front/odiparpack/app/containers/Templates/Outer.js
new file mode 100644
index 0000000..f6448be
--- /dev/null
+++ b/front/odiparpack/app/containers/Templates/Outer.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import brand from 'ba-api/brand';
+import logo from 'ba-images/logo.svg';
+import { Hidden } from '@material-ui/core';
+import styles from './appStyles-jss';
+
+function Outer(props) {
+ const {
+ classes,
+ children,
+ } = props;
+ return (
+
+ {children}
+
+
+
+
+
+ {children}
+
+
+ );
+}
+
+Outer.propTypes = {
+ classes: PropTypes.object.isRequired,
+ children: PropTypes.node.isRequired,
+};
+
+export default (withStyles(styles)(Outer));
diff --git a/front/odiparpack/app/containers/Templates/appStyles-jss.js b/front/odiparpack/app/containers/Templates/appStyles-jss.js
new file mode 100644
index 0000000..f9175eb
--- /dev/null
+++ b/front/odiparpack/app/containers/Templates/appStyles-jss.js
@@ -0,0 +1,144 @@
+import bg from 'ba-images/material_bg.svg';
+import { fade } from '@material-ui/core/styles/colorManipulator';
+
+const appFrame = {
+ display: 'flex',
+ width: '100%',
+ minHeight: '100%',
+ zIndex: 1,
+};
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ minHeight: '100%',
+ marginTop: 0,
+ zIndex: 1,
+ },
+ appFrameInner: {
+ ...appFrame,
+ flexDirection: 'row'
+ },
+ appFrameOuter: {
+ ...appFrame,
+ },
+ content: {
+ backgroundColor: theme.palette.background.default,
+ width: '100%',
+ padding: theme.spacing(1.5),
+ paddingLeft: 0,
+ minHeight: '100%',
+ overflow: 'hidden',
+ },
+ outerContent: {
+ background: `url(${bg}) no-repeat ${theme.palette.primary.main} left bottom`,
+ width: '100%',
+ backgroundSize: 'cover',
+ flexDirection: 'column',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ [theme.breakpoints.down('md')]: {
+ padding: '20px 0'
+ },
+ },
+ bgbar: {
+ backgroundColor: theme.palette.primary.main,
+ width: '100%',
+ position: 'fixed',
+ height: 184,
+ top: 0,
+ left: 0
+ },
+ mainWrap: {
+ position: 'relative',
+ marginTop: theme.spacing(6),
+ marginLeft: theme.spacing(1.5),
+ height: '100%',
+ '& > div': {
+ paddingBottom: theme.spacing(4),
+ willChange: 'inherit !important' // hack for floating form issue whne expaded
+ }
+ },
+ preloader: {
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ width: '100%',
+ zIndex: 1000,
+ background: 'transparent',
+ height: 3,
+ },
+ materialBg: {
+ position: 'absolute',
+ left: 0,
+ bottom: 0,
+ width: '100%',
+ opacity: 0.5
+ },
+ contentPadding: {
+ paddingLeft: 80
+ },
+ hideApp: {
+ display: 'none'
+ },
+ circularProgress: {
+ position: 'absolute',
+ top: 'calc(50% - 100px)',
+ left: 'calc(50% - 100px)',
+ },
+ brand: {
+ height: 54,
+ display: 'flex',
+ padding: '10px 10px 5px',
+ position: 'relative',
+ alignItems: 'center',
+ justifyContent: 'center',
+ '& img': {
+ width: 20
+ },
+ '& h3': {
+ margin: 0,
+ fontSize: 16,
+ fontWeight: 500,
+ paddingLeft: 10,
+ color: theme.palette.common.white,
+ }
+ },
+ btn: {},
+ icon: {},
+ btnPicker: {
+ position: 'fixed',
+ zIndex: 2000,
+ right: 0,
+ top: 200,
+ background: fade(theme.palette.background.paper, 0.8),
+ borderRadius: '30px 0 0 30px',
+ padding: '4px 8px 4px 4px',
+ overflow: 'hidden',
+ border: `1px solid ${theme.palette.grey[300]}`,
+ '& $btn': {
+ background: theme.palette.secondary.main,
+ borderRadius: 30,
+ padding: 8,
+ boxShadow: theme.shadows[4],
+ display: 'flex',
+ alignItems: 'center',
+ width: 40,
+ height: 40,
+ textCenter: 'cener',
+ overflow: 'hidden',
+ color: 'transparent',
+ transition: 'all 0.3s ease',
+ '& $icon': {
+ color: theme.palette.background.paper,
+ },
+ '&:hover': {
+ color: theme.palette.background.paper,
+ width: 90
+ }
+ }
+ }
+});
+
+export default styles;
diff --git a/front/odiparpack/app/containers/UiElements/Accordion.js b/front/odiparpack/app/containers/UiElements/Accordion.js
new file mode 100644
index 0000000..dd354d3
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/Accordion.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { SimpleAccordion, AdvancedAccordion, ControlledAccordion } from './demos';
+
+class Accordion extends React.Component {
+ render() {
+ const title = brand.name + ' - UI Elements';
+ const description = brand.desc;
+ const docSrc = 'containers/UiElements/demos/Accordion/';
+ return (
+
+
+
+ {brand.name}
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default Accordion;
diff --git a/front/odiparpack/app/containers/UiElements/Avatars.js b/front/odiparpack/app/containers/UiElements/Avatars.js
new file mode 100644
index 0000000..3ccbaaa
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/Avatars.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { AvatarsDemo, AvatarsPractice } from './demos';
+
+class Avatars extends React.Component {
+ render() {
+ const title = brand.name + ' - UI Elements';
+ const description = brand.desc;
+ const docSrc = 'containers/UiElements/demos/Avatars/';
+ return (
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default Avatars;
diff --git a/front/odiparpack/app/containers/UiElements/Badges.js b/front/odiparpack/app/containers/UiElements/Badges.js
new file mode 100644
index 0000000..ff4783d
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/Badges.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { CommonBadges, VariantBadges } from './demos';
+
+class Badges extends React.Component {
+ render() {
+ const title = brand.name + ' - UI Elements';
+ const description = brand.desc;
+ const docSrc = 'containers/UiElements/demos/Badges/';
+ return (
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default Badges;
diff --git a/front/odiparpack/app/containers/UiElements/Breadcrumbs.js b/front/odiparpack/app/containers/UiElements/Breadcrumbs.js
new file mode 100644
index 0000000..daaa24f
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/Breadcrumbs.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { ClassicBreadcrumbs, PaperBreadcrumbs } from './demos';
+
+class BreadCrumbs extends React.Component {
+ render() {
+ const title = brand.name + ' - UI Elements';
+ const description = brand.desc;
+ const docSrc = 'containers/UiElements/demos/Breadcrumbs/';
+ return (
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default BreadCrumbs;
diff --git a/front/odiparpack/app/containers/UiElements/Cards.js b/front/odiparpack/app/containers/UiElements/Cards.js
new file mode 100644
index 0000000..7865b9d
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/Cards.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import {
+ StandardCards,
+ ControlCards,
+ PaperSheet,
+ SocialCards,
+ EcommerceCards
+} from './demos';
+
+class Cards extends React.Component {
+ render() {
+ const title = brand.name + ' - UI Elements';
+ const description = brand.desc;
+ const docSrc = 'containers/UiElements/demos/Cards/';
+ return (
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default Cards;
diff --git a/front/odiparpack/app/containers/UiElements/DialogModal.js b/front/odiparpack/app/containers/UiElements/DialogModal.js
new file mode 100644
index 0000000..6e26609
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/DialogModal.js
@@ -0,0 +1,97 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { Grid } from '@material-ui/core';
+import {
+ ModalDemo,
+ AlertDialog,
+ SelectDialog,
+ SelectRadioDialog,
+ FormDialog,
+ FullScreenDialog,
+ ImagePopup,
+ ScrollDialog
+} from './demos';
+
+class DialogModal extends React.Component {
+ render() {
+ const title = brand.name + ' - UI Elements';
+ const description = brand.desc;
+ const docSrc = 'containers/UiElements/demos/DialogModal/';
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default DialogModal;
diff --git a/front/odiparpack/app/containers/UiElements/Dividers.js b/front/odiparpack/app/containers/UiElements/Dividers.js
new file mode 100644
index 0000000..34c66a9
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/Dividers.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { CommonDividers, SpecialDividers } from './demos';
+
+class Dividers extends React.Component {
+ render() {
+ const title = brand.name + ' - UI Elements';
+ const description = brand.desc;
+ const docSrc = 'containers/UiElements/demos/Dividers/';
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default Dividers;
diff --git a/front/odiparpack/app/containers/UiElements/DrawerMenu.js b/front/odiparpack/app/containers/UiElements/DrawerMenu.js
new file mode 100644
index 0000000..dfffbc8
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/DrawerMenu.js
@@ -0,0 +1,104 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { Grid } from '@material-ui/core';
+import {
+ TemporaryDrawer,
+ SwipeDrawer,
+ PermanentDrawer,
+ PersistentDrawer,
+ MiniDrawer,
+ BasicMenu,
+ DropdownMenu,
+ StyledMenu,
+ MenuTransition
+} from './demos';
+
+class DrawerMenu extends React.Component {
+ render() {
+ const title = brand.name + ' - UI Elements';
+ const description = brand.desc;
+ const docSrc = 'containers/UiElements/demos/DrawerMenu/';
+ return (
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default DrawerMenu;
diff --git a/front/odiparpack/app/containers/UiElements/IconGallery/DetailIcon.js b/front/odiparpack/app/containers/UiElements/IconGallery/DetailIcon.js
new file mode 100644
index 0000000..e19c17a
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/IconGallery/DetailIcon.js
@@ -0,0 +1,149 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/prism-light';
+import jsx from 'react-syntax-highlighter/languages/prism/jsx';
+import themeSource from 'react-syntax-highlighter/styles/prism/prism';
+import { withStyles } from '@material-ui/core/styles';
+
+import {
+ Typography,
+ Button,
+ Icon,
+ Divider,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ Slide,
+} from '@material-ui/core';
+
+const Transition = React.forwardRef(function Transition(props, ref) { // eslint-disable-line
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+Icons.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Icons);
diff --git a/front/odiparpack/app/containers/UiElements/ImageGrid.js b/front/odiparpack/app/containers/UiElements/ImageGrid.js
new file mode 100644
index 0000000..a95fd50
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/ImageGrid.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { ImageGridList, TitlebarGridList, AdvancedGridList, SingleLineGridList } from './demos';
+
+class ImageGrid extends React.Component {
+ render() {
+ const title = brand.name + ' - UI Elements';
+ const description = brand.desc;
+ const docSrc = 'containers/UiElements/demos/ImageGrid/';
+ return (
+
+ {loading
+ && this.handleSearch(event)} />
+
+
+ {raws.map((raw, index) => {
+ if (raw.name.toLowerCase().indexOf(filterText) === -1) {
+ return false;
+ }
+ return (
+
+
+ this.handleOpenDetail(raw.name, raw.code)} className={classes.btn}>
+ {raw.name}
+
+ {raw.name}
+
+ );
+ })}
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default ImageGrid;
diff --git a/front/odiparpack/app/containers/UiElements/List.js b/front/odiparpack/app/containers/UiElements/List.js
new file mode 100644
index 0000000..665cd08
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/List.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import {
+ ListBasic,
+ ListMenu,
+ PinnedList,
+ ListControl,
+ ListInteractive
+} from './demos';
+
+class List extends React.Component {
+ render() {
+ const title = brand.name + ' - UI Elements';
+ const description = brand.desc;
+ const docSrc = 'containers/UiElements/demos/List/';
+ return (
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default List;
diff --git a/front/odiparpack/app/containers/UiElements/Notification.js b/front/odiparpack/app/containers/UiElements/Notification.js
new file mode 100644
index 0000000..b00f24e
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/Notification.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { Grid } from '@material-ui/core';
+import { SimpleNotif, StyledNotif, TransitionNotif, MobileNotif } from './demos';
+
+class Notification extends React.Component {
+ render() {
+ const title = brand.name + ' - UI Elements';
+ const description = brand.desc;
+ const docSrc = 'containers/UiElements/demos/Notification/';
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default Notification;
diff --git a/front/odiparpack/app/containers/UiElements/Paginations.js b/front/odiparpack/app/containers/UiElements/Paginations.js
new file mode 100644
index 0000000..7f6fa47
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/Paginations.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { TbPagination, TbPaginationCustom, GeneralPagination } from './demos';
+
+class Paginations extends React.Component {
+ render() {
+ const title = brand.name + ' - UI Elements';
+ const description = brand.desc;
+ const docSrc = 'containers/UiElements/demos/Pagination/';
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default Paginations;
diff --git a/front/odiparpack/app/containers/UiElements/PopoverTooltip.js b/front/odiparpack/app/containers/UiElements/PopoverTooltip.js
new file mode 100644
index 0000000..508129b
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/PopoverTooltip.js
@@ -0,0 +1,95 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { Grid } from '@material-ui/core';
+import {
+ SimpleTooltips,
+ PositionedTooltips,
+ SimplePopover,
+ PopoverPlayground,
+ DelayTooltips,
+ TransitionsTooltips,
+ TriggersTooltips,
+ CustomizedTooltips
+} from './demos';
+
+class PopoverTooltip extends React.Component {
+ render() {
+ const title = brand.name + ' - UI Elements';
+ const description = brand.desc;
+ const docSrc = 'containers/UiElements/demos/PopoverTooltip/';
+ return (
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default PopoverTooltip;
diff --git a/front/odiparpack/app/containers/UiElements/Progress.js b/front/odiparpack/app/containers/UiElements/Progress.js
new file mode 100644
index 0000000..669da02
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/Progress.js
@@ -0,0 +1,126 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { Grid } from '@material-ui/core';
+import {
+ CircularStatic,
+ CircularIndeterminate,
+ CircularDeterminate,
+ CircularIntegration,
+ LinearStatic,
+ LinearIndeterminate,
+ LinearDeterminate,
+ LinearBuffer,
+ LinearQuery,
+ ProgressDelay
+} from './demos';
+
+const styles = ({
+ root: {
+ flexGrow: 1,
+ }
+});
+
+class Progress extends React.Component {
+ render() {
+ const { classes } = this.props;
+ const title = brand.name + ' - UI Elements';
+ const description = brand.desc;
+ const docSrc = 'containers/UiElements/demos/Progress/';
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+ );
+ }
+}
+
+Progress.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Progress);
diff --git a/front/odiparpack/app/containers/UiElements/SliderCarousel.js b/front/odiparpack/app/containers/UiElements/SliderCarousel.js
new file mode 100644
index 0000000..b624774
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/SliderCarousel.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import {
+ SingleCarousel,
+ MultipleCarousel,
+ AutoplayCarousel,
+ ThumbnailCarousel,
+ VerticalCarousel,
+ CustomCarousel,
+ AnimatedSlider
+} from './demos';
+
+class SliderCarousel extends React.Component {
+ render() {
+ const title = brand.name + ' - UI Elements';
+ const description = brand.desc;
+ const docSrc = 'containers/UiElements/demos/SliderCaraousel/';
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default SliderCarousel;
diff --git a/front/odiparpack/app/containers/UiElements/Steppers.js b/front/odiparpack/app/containers/UiElements/Steppers.js
new file mode 100644
index 0000000..358f641
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/Steppers.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import {
+ HorizontalLinear,
+ HorizontalNonLinear,
+ StepperError,
+ VerticalStepper,
+ MobileSteppers,
+ StepperCarousel
+} from './demos';
+
+class Steppers extends React.Component {
+ render() {
+ const title = brand.name + ' - UI Elements';
+ const description = brand.desc;
+ const docSrc = 'containers/UiElements/demos/Steppers/';
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default Steppers;
diff --git a/front/odiparpack/app/containers/UiElements/Tabs.js b/front/odiparpack/app/containers/UiElements/Tabs.js
new file mode 100644
index 0000000..0782462
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/Tabs.js
@@ -0,0 +1,120 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { Grid } from '@material-ui/core';
+import {
+ SimpleTabs,
+ LongTextTabs,
+ FixedTabs,
+ CenteredTabs,
+ IconTabs,
+ ScrollTabs,
+ ScrollIconTabs,
+ DisabledTab,
+ CustomTabs,
+ BottomNav
+} from './demos';
+
+const styles = ({
+ root: {
+ flexGrow: 1,
+ }
+});
+
+class Tabs extends React.Component {
+ render() {
+ const title = brand.name + ' - UI Elements';
+ const description = brand.desc;
+ const { classes } = this.props;
+ const docSrc = 'containers/UiElements/demos/Tabs/';
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+ );
+ }
+}
+
+Tabs.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Tabs);
diff --git a/front/odiparpack/app/containers/UiElements/Tags.js b/front/odiparpack/app/containers/UiElements/Tags.js
new file mode 100644
index 0000000..e8a5571
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/Tags.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { BasicTags, ArrayTags } from './demos';
+
+class Tags extends React.Component {
+ render() {
+ const title = brand.name + ' - UI Elements';
+ const description = brand.desc;
+ const docSrc = 'containers/UiElements/demos/Tags/';
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default Tags;
diff --git a/front/odiparpack/app/containers/UiElements/Typography.js b/front/odiparpack/app/containers/UiElements/Typography.js
new file mode 100644
index 0000000..e1a88ba
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/Typography.js
@@ -0,0 +1,92 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { Grid } from '@material-ui/core';
+import {
+ GeneralTypo,
+ Heading,
+ ListTypo,
+ AlignTypo,
+ ColouredTypo,
+ QuotesDemo
+} from './demos';
+
+const styles = ({
+ root: {
+ flexGrow: 1,
+ }
+});
+
+class Typography extends React.Component {
+ render() {
+ const { classes } = this.props;
+ const title = brand.name + ' - UI Elements';
+ const description = brand.desc;
+ const docSrc = 'containers/UiElements/demos/Typography/';
+ return (
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+ );
+ }
+}
+
+Typography.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Typography);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Accordion/AdvancedAccordion.js b/front/odiparpack/app/containers/UiElements/demos/Accordion/AdvancedAccordion.js
new file mode 100644
index 0000000..87cd84e
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Accordion/AdvancedAccordion.js
@@ -0,0 +1,97 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+
+import {
+ ExpansionPanel,
+ ExpansionPanelDetails,
+ ExpansionPanelSummary,
+ ExpansionPanelActions,
+ Typography,
+ Chip,
+ Button,
+ Divider,
+} from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ },
+ heading: {
+ fontSize: theme.typography.pxToRem(15),
+ },
+ secondaryHeading: {
+ fontSize: theme.typography.pxToRem(15),
+ color: theme.palette.text.secondary,
+ },
+ icon: {
+ verticalAlign: 'bottom',
+ height: 20,
+ width: 20,
+ },
+ details: {
+ alignItems: 'center',
+ },
+ column: {
+ flexBasis: '33.33%',
+ },
+ helper: {
+ borderLeft: `2px solid ${theme.palette.divider}`,
+ padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
+ },
+ link: {
+ color: theme.palette.secondary.main,
+ textDecoration: 'none',
+ '&:hover': {
+ textDecoration: 'underline',
+ },
+ },
+});
+
+function AdvancedAccordion(props) {
+ const { classes } = props;
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+AdvancedAccordion.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(AdvancedAccordion);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Accordion/ControlledAccordion.js b/front/odiparpack/app/containers/UiElements/demos/Accordion/ControlledAccordion.js
new file mode 100644
index 0000000..6bcc2c8
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Accordion/ControlledAccordion.js
@@ -0,0 +1,100 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+
+import { ExpansionPanel, ExpansionPanelSummary, ExpansionPanelDetails, Typography } from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ },
+ heading: {
+ fontSize: theme.typography.pxToRem(15),
+ flexBasis: '33.33%',
+ flexShrink: 0,
+ },
+ secondaryHeading: {
+ fontSize: theme.typography.pxToRem(15),
+ color: theme.palette.text.secondary,
+ },
+});
+
+class ControlledAccordion extends React.Component {
+ state = {
+ expanded: null,
+ };
+
+ handleChange = panel => (event, expanded) => {
+ this.setState({
+ expanded: expanded ? panel : false,
+ });
+ };
+
+ render() {
+ const { classes } = this.props;
+ const { expanded } = this.state;
+
+ return (
+
+ Location
+
+
+ Select trip destination
+
+
+
+ {}} />
+
+
+
+ Select your destination of choice
+
+ + Learn more + +
+
+ + + Learn more + +
+
+ General settings
+ I am an expansion panel
+
+
+
+ Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. Aliquam eget
+ maximus est, id dignissim quam.
+
+
+
+
+ Users
+
+ You are currently not an owner
+
+
+
+
+ Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar
+ diam eros in elit. Pellentesque convallis laoreet laoreet.
+
+
+
+
+ Advanced settings
+
+ Filtering has been entirely disabled for whole web server
+
+
+
+
+ Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas
+ eros, vitae egestas augue. Duis vel est augue.
+
+
+
+
+ Personal data
+
+
+
+ Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit amet egestas
+ eros, vitae egestas augue. Duis vel est augue.
+
+
+
+
+ );
+ }
+}
+
+ControlledAccordion.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ControlledAccordion);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Accordion/SimpleAccordion.js b/front/odiparpack/app/containers/UiElements/demos/Accordion/SimpleAccordion.js
new file mode 100644
index 0000000..a88f772
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Accordion/SimpleAccordion.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+
+import { ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary, Typography } from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ },
+ heading: {
+ fontSize: theme.typography.pxToRem(15),
+ fontWeight: theme.typography.fontWeightRegular,
+ },
+});
+
+function SimpleAccordion(props) {
+ const { classes } = props;
+ return (
+
+
+ Expansion Panel 1
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+ sit amet blandit leo lobortis eget.
+
+
+
+
+ Expansion Panel 2
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+ sit amet blandit leo lobortis eget.
+
+
+
+
+ Disabled Expansion Panel
+
+
+
+ );
+}
+
+SimpleAccordion.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(SimpleAccordion);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Avatars/AvatarsDemo.js b/front/odiparpack/app/containers/UiElements/demos/Avatars/AvatarsDemo.js
new file mode 100644
index 0000000..e21391e
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Avatars/AvatarsDemo.js
@@ -0,0 +1,112 @@
+import React, { Fragment, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import FolderIcon from '@material-ui/icons/Folder';
+import PageviewIcon from '@material-ui/icons/Pageview';
+import AssignmentIcon from '@material-ui/icons/Assignment';
+import avatarApi from 'ba-api/avatars';
+
+import { pink, green, deepOrange, deepPurple } from '@material-ui/core/colors';
+
+import { Typography, Avatar, Grid } from '@material-ui/core';
+
+const styles = ({
+ row: {
+ display: 'flex',
+ justifyContent: 'flex-start',
+ },
+ avatar: {
+ margin: 10,
+ },
+ bigAvatar: {
+ width: 60,
+ height: 60,
+ },
+ pinkAvatar: {
+ margin: 10,
+ color: '#fff',
+ backgroundColor: pink[500],
+ },
+ greenAvatar: {
+ margin: 10,
+ color: '#fff',
+ backgroundColor: green[500],
+ },
+ orangeAvatar: {
+ margin: 10,
+ color: '#fff',
+ backgroundColor: deepOrange[500],
+ },
+ purpleAvatar: {
+ margin: 10,
+ color: '#fff',
+ backgroundColor: deepPurple[500],
+ },
+});
+
+class AvatarsDemo extends PureComponent {
+ render() {
+ const { classes } = this.props;
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ H
+ N
+ OP
+
+
+
+ -
+
+
+
+
+ )}
+ title="Aliquam nec ex aliquet"
+ subheader="September 14, 2018"
+ />
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Badge Text
+
+
+
+
+ Badges Bold Text
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ R
+
+ )}
+ action={(
+
+
+ )}
+ title="Shrimp and Chorizo Paella"
+ subheader="September 14, 2016"
+ />
+
+
+ This impressive paella is a perfect party dish and a fun meal to cook together with
+ your guests. Add 1 cup of frozen peas along with the mussels, if you like.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Method:
+
+
+ Heat 1/2 cup of the broth in a pot until simmering, add saffron and set aside for 10
+ minutes.
+
+
+ Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over medium-high
+ heat. Add chicken, shrimp and chorizo, and cook, stirring occasionally until lightly
+ browned, 6 to 8 minutes. Transfer shrimp to a large plate and set aside, leaving
+ chicken and chorizo in the pan. Add pimentón, bay leaves, garlic, tomatoes, onion,
+ salt and pepper, and cook, stirring often until thickened and fragrant, about 10
+ minutes. Add saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
+
+
+ Add rice and stir very gently to distribute. Top with artichokes and peppers, and
+ cook without stirring, until most of the liquid is absorbed, 15 to 18 minutes.
+ Reduce heat to medium-low, add reserved shrimp and mussels, tucking them down into
+ the rice, and cook again without stirring, until mussels have opened and rice is
+ just tender, 5 to 7 minutes more. (Discard any mussels that don’t open.)
+
+
+ Set aside off of the heat to let rest for 10 minutes, and then serve.
+
+
+
+
+
+
+
+
+ This is a sheet of paper.
+
+
+ Paper can be used to build surface or other elements for your application.
+
+
+
+ );
+}
+
+PaperSheet.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(PaperSheet);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Cards/SocialCards.js b/front/odiparpack/app/containers/UiElements/demos/Cards/SocialCards.js
new file mode 100644
index 0000000..7208926
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Cards/SocialCards.js
@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import imgApi from 'ba-api/images';
+import avatarApi from 'ba-api/avatars';
+import { ProfileCard, PostCard } from 'ba-components';
+
+import { Typography, Grid } from '@material-ui/core';
+
+const styles = theme => ({
+ divider: {
+ display: 'block',
+ margin: `${theme.spacing(3)}px 0`,
+ },
+});
+
+class StandardCard extends React.Component {
+ render() {
+ const { classes } = this.props;
+
+ return (
+
+
+
+ Word of the Day
+
+
+ be
+ {bull}
+nev
+ {bull}
+o
+ {bull}
+lent
+
+
+ adjective
+
+
+ well meaning and kindly.
+
+ {'"a benevolent smile"'} +
+
+
+ + {'"a benevolent smile"'} +
+
+
+ Lorem ipsum
+
+
+ Aliquam venenatis magna et odio lobortis maximus. Nullam in tortor ligula. Proin maximus risus nunc
+
+
+
+
+
+
+
+ +
+ Identity Card
+
+
+
+
+
+ Fade Transition
+
+
+
+
+
+
+ Slide Transition
+
+
+
+
+
+
+ );
+ }
+}
+
+AlertDialog.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(AlertDialog);
diff --git a/front/odiparpack/app/containers/UiElements/demos/DialogModal/ConfirmationDialog.js b/front/odiparpack/app/containers/UiElements/demos/DialogModal/ConfirmationDialog.js
new file mode 100644
index 0000000..1f49788
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/DialogModal/ConfirmationDialog.js
@@ -0,0 +1,111 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+ Button,
+ DialogTitle,
+ DialogContent,
+ DialogActions,
+ Dialog,
+ Radio,
+ RadioGroup,
+ FormControlLabel,
+} from '@material-ui/core';
+
+const options = [
+ 'None',
+ 'Atria',
+ 'Callisto',
+ 'Dione',
+ 'Ganymede',
+ 'Hangouts Call',
+ 'Luna',
+ 'Oberon',
+ 'Phobos',
+ 'Pyxis',
+ 'Sedna',
+ 'Titania',
+ 'Triton',
+ 'Umbriel',
+];
+
+class ConfirmationDialog extends React.Component {
+ constructor(props, context) {
+ super(props, context);
+
+ this.state.value = this.props.value;
+ }
+
+ state = {};
+
+ componentWillReceiveProps(nextProps) {
+ if (nextProps.value !== this.props.value) {
+ this.setState({ value: nextProps.value });
+ }
+ }
+
+ radioGroup = null;
+
+ handleEntering = () => {
+ this.radioGroup.focus();
+ };
+
+ handleCancel = () => {
+ this.props.onClose(this.props.value);
+ };
+
+ handleOk = () => {
+ this.props.onClose(this.state.value);
+ };
+
+ handleChange = (event, value) => {
+ this.setState({ value });
+ };
+
+ render() {
+ const { value, ...other } = this.props;
+
+ return (
+
+ );
+ }
+}
+
+ConfirmationDialog.propTypes = {
+ onClose: PropTypes.func.isRequired,
+ value: PropTypes.string.isRequired,
+};
+
+export default ConfirmationDialog;
diff --git a/front/odiparpack/app/containers/UiElements/demos/DialogModal/FormDialog.js b/front/odiparpack/app/containers/UiElements/demos/DialogModal/FormDialog.js
new file mode 100644
index 0000000..58bf1aa
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/DialogModal/FormDialog.js
@@ -0,0 +1,65 @@
+import React from 'react';
+
+import {
+ Button,
+ TextField,
+ Grid,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogContentText,
+ DialogTitle,
+} from '@material-ui/core';
+
+export default class FormDialog extends React.Component {
+ state = {
+ open: false,
+ };
+
+ handleClickOpen = () => {
+ this.setState({ open: true });
+ };
+
+ handleClose = () => {
+ this.setState({ open: false });
+ };
+
+ render() {
+ return (
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/front/odiparpack/app/containers/UiElements/demos/DialogModal/FullScreenDialog.js b/front/odiparpack/app/containers/UiElements/demos/DialogModal/FullScreenDialog.js
new file mode 100644
index 0000000..935ed4d
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/DialogModal/FullScreenDialog.js
@@ -0,0 +1,134 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import CloseIcon from '@material-ui/icons/Close';
+
+import {
+ Button,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogContentText,
+ DialogTitle,
+ List,
+ ListItem,
+ ListItemText,
+ Divider,
+ Grid,
+ AppBar,
+ Toolbar,
+ IconButton,
+ Typography,
+ Slide,
+} from '@material-ui/core';
+
+const styles = {
+ appBar: {
+ position: 'relative',
+ },
+ flex: {
+ flex: 1,
+ },
+};
+
+const Transition = React.forwardRef(function Transition(props, ref) { // eslint-disable-line
+ return
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+FullScreenDialog.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(FullScreenDialog);
diff --git a/front/odiparpack/app/containers/UiElements/demos/DialogModal/ImagePopup.js b/front/odiparpack/app/containers/UiElements/demos/DialogModal/ImagePopup.js
new file mode 100644
index 0000000..169c5ec
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/DialogModal/ImagePopup.js
@@ -0,0 +1,51 @@
+import React, { Component } from 'react';
+import 'ba-styles/vendors/image-lightbox/image-lightbox.css';
+import images from 'ba-api/imgData';
+import { ImageLightbox } from 'ba-components';
+
+import { Button, Grid } from '@material-ui/core';
+
+export default class ImagePopup extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ photoIndex: 0,
+ isOpen: false,
+ };
+ }
+
+ render() {
+ const { photoIndex, isOpen } = this.state;
+
+ return (
+
+
+ Text in a modal
+
+
+ Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default ScrollDialog;
diff --git a/front/odiparpack/app/containers/UiElements/demos/DialogModal/SelectDialog.js b/front/odiparpack/app/containers/UiElements/demos/DialogModal/SelectDialog.js
new file mode 100644
index 0000000..f75b1be
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/DialogModal/SelectDialog.js
@@ -0,0 +1,120 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import PersonIcon from '@material-ui/icons/Person';
+import AddIcon from '@material-ui/icons/Add';
+import { blue } from '@material-ui/core/colors';
+
+import {
+ Button,
+ Avatar,
+ List,
+ ListItem,
+ ListItemText,
+ ListItemAvatar,
+ Dialog,
+ DialogTitle,
+ Typography,
+ Grid,
+} from '@material-ui/core';
+
+const emails = ['username@mail.com', 'user02@mail.com'];
+const styles = ({
+ avatar: {
+ backgroundColor: blue[100],
+ color: blue[600],
+ },
+});
+
+const SimpleDialog = props => {
+ const {
+ classes,
+ onClose,
+ selectedValue,
+ ...other
+ } = props;
+
+ function handleClose() {
+ props.onClose(this.props.selectedValue);
+ }
+
+ function handleListItemClick(value) {
+ props.onClose(value);
+ }
+
+ return (
+
+ );
+};
+
+SimpleDialog.propTypes = {
+ classes: PropTypes.object.isRequired,
+ onClose: PropTypes.func.isRequired,
+ selectedValue: PropTypes.string.isRequired,
+};
+
+const SimpleDialogWrapped = withStyles(styles)(SimpleDialog);
+
+class SelectDialog extends React.Component {
+ state = {
+ open: false,
+ selectedValue: emails[1],
+ };
+
+ handleClickOpen = () => {
+ this.setState({
+ open: true,
+ });
+ };
+
+ handleClose = value => {
+ this.setState({ selectedValue: value, open: false });
+ };
+
+ render() {
+ return (
+
+
+
+Selected:
+ {this.state.selectedValue}
+
+
+ +
+
+ );
+ }
+}
+
+
+export default SelectDialog;
diff --git a/front/odiparpack/app/containers/UiElements/demos/DialogModal/SelectRadioDialog.js b/front/odiparpack/app/containers/UiElements/demos/DialogModal/SelectRadioDialog.js
new file mode 100644
index 0000000..ff30bd4
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/DialogModal/SelectRadioDialog.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { List, ListItem, ListItemText } from '@material-ui/core';
+import ConfirmationDialog from './ConfirmationDialog';
+
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ maxWidth: 360,
+ backgroundColor: theme.palette.background.paper,
+ },
+ dialog: {
+ width: '80%',
+ maxHeight: 435,
+ },
+});
+
+class SelectRadioDialog extends React.Component {
+ state = {
+ open: false,
+ value: 'Dione',
+ };
+
+ button = undefined;
+
+ handleClickListItem = () => {
+ this.setState({ open: true });
+ };
+
+ handleClose = value => {
+ this.setState({ value, open: false });
+ };
+
+ render() {
+ const { classes } = this.props;
+ return (
+ + +
+
+ );
+ }
+}
+
+SelectRadioDialog.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(SelectRadioDialog);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Dividers/CommonDividers.js b/front/odiparpack/app/containers/UiElements/demos/Dividers/CommonDividers.js
new file mode 100644
index 0000000..db67c0f
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Dividers/CommonDividers.js
@@ -0,0 +1,29 @@
+import React, { Fragment, PureComponent } from 'react';
+import Type from 'ba-styles/Typography.scss';
+import {
+ GradientDivider,
+ DashDivider,
+ ShadowDivider,
+ InsetDivider,
+} from 'ba-components/Divider';
+
+import { Typography } from '@material-ui/core';
+
+class CommonDivider extends PureComponent {
+ render() {
+ return (
+ -
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+DropdownMenu.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(DropdownMenu);
diff --git a/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/MenuTransition.js b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/MenuTransition.js
new file mode 100644
index 0000000..e8cfbc6
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/MenuTransition.js
@@ -0,0 +1,108 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import Grow from '@material-ui/core/Grow';
+import Fade from '@material-ui/core/Fade';
+import Zoom from '@material-ui/core/Zoom';
+import Grid from '@material-ui/core/Grid';
+
+
+class MenuTransition extends React.Component {
+ state = {
+ anchorFade: null,
+ anchorGrow: null,
+ anchorCollapse: null,
+ anchorZoom: null,
+ };
+
+ handleClick = (event, type) => {
+ this.setState({ [type]: event.currentTarget });
+ };
+
+ handleClose = type => {
+ this.setState({ [type]: null });
+ };
+
+ handleToggle = type => {
+ // eslint-disable-next-line
+ this.setState({ [type]: !this.state[type] });
+ };
+
+ render() {
+ const {
+ anchorFade,
+ anchorGrow,
+ anchorZoom
+ } = this.state;
+
+ return (
+ -
+
+
+
+
+
+
+ {theme.direction === 'rtl' ?
+
+ - {mailFolderListItems}
- {otherMailFolderListItems}
+
+
+
+
+
+ );
+ }
+}
+
+MiniDrawer.propTypes = {
+ classes: PropTypes.object.isRequired,
+ theme: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles, { withTheme: true })(MiniDrawer);
diff --git a/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/PermanentDrawer.js b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/PermanentDrawer.js
new file mode 100644
index 0000000..9538873
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/PermanentDrawer.js
@@ -0,0 +1,126 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import { Drawer, AppBar, Toolbar, List, MenuItem, TextField, Typography, Divider } from '@material-ui/core';
+import { mailFolderListItems, otherMailFolderListItems } from './menuData';
+
+
+const drawerWidth = 240;
+
+const styles = theme => ({
+ root: {
+ flexGrow: 1,
+ },
+ appFrame: {
+ height: 430,
+ zIndex: 1,
+ overflow: 'hidden',
+ position: 'relative',
+ display: 'flex',
+ width: '100%',
+ },
+ appBar: {
+ width: `calc(100% - ${drawerWidth}px)`,
+ },
+ 'appBar-left': {
+ marginLeft: drawerWidth,
+ },
+ 'appBar-right': {
+ marginRight: drawerWidth,
+ },
+ drawerPaper: {
+ position: 'relative',
+ width: drawerWidth,
+ },
+ toolbar: theme.mixins.toolbar,
+ content: {
+ flexGrow: 1,
+ backgroundColor: theme.palette.background.default,
+ padding: theme.spacing(3),
+ },
+});
+
+class PermanentDrawer extends React.Component {
+ state = {
+ anchor: 'left',
+ };
+
+ handleChange = event => {
+ this.setState({
+ anchor: event.target.value,
+ });
+ };
+
+ render() {
+ const { classes } = this.props;
+ const { anchor } = this.state;
+
+ const drawer = (
+
+
+
+ {beforeBtn}
+
+ Mini variant drawer
+
+ {afterBtn}
+
+
+ {before}
+
+
+
+ {'You think water moves fast? You should see ice.'}
+
+
+ {after}
+
+ - {mailFolderListItems}
- {otherMailFolderListItems}
+
+
+
+
+
+ );
+ }
+}
+
+PermanentDrawer.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(PermanentDrawer);
diff --git a/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/PersistentDrawer.js b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/PersistentDrawer.js
new file mode 100644
index 0000000..cd529d5
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/PersistentDrawer.js
@@ -0,0 +1,228 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import MenuIcon from '@material-ui/icons/Menu';
+import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import {
+ Drawer,
+ AppBar,
+ Toolbar,
+ List,
+ MenuItem,
+ Typography,
+ TextField,
+ Divider,
+ IconButton,
+} from '@material-ui/core';
+import { mailFolderListItems, otherMailFolderListItems } from './menuData';
+
+
+const drawerWidth = 240;
+
+const styles = theme => ({
+ root: {
+ flexGrow: 1,
+ },
+ appFrame: {
+ height: 430,
+ zIndex: 1,
+ overflow: 'hidden',
+ position: 'relative',
+ display: 'flex',
+ width: '100%',
+ },
+ appBar: {
+ position: 'absolute',
+ padding: '0 24px',
+ transition: theme.transitions.create(['margin', 'width'], {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.leavingScreen,
+ }),
+ },
+ appBarShift: {
+ width: `calc(100% - ${drawerWidth}px)`,
+ transition: theme.transitions.create(['margin', 'width'], {
+ easing: theme.transitions.easing.easeOut,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ },
+ 'appBarShift-left': {
+ marginLeft: drawerWidth,
+ },
+ 'appBarShift-right': {
+ marginRight: drawerWidth,
+ },
+ menuButton: {
+ marginLeft: 3,
+ marginRight: 3,
+ },
+ hide: {
+ display: 'none',
+ },
+ drawerPaper: {
+ position: 'relative',
+ width: drawerWidth,
+ },
+ drawerHeader: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'flex-end',
+ padding: '0 8px',
+ ...theme.mixins.toolbar,
+ },
+ content: {
+ flexGrow: 1,
+ backgroundColor: theme.palette.background.default,
+ padding: theme.spacing(3),
+ transition: theme.transitions.create('margin', {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.leavingScreen,
+ }),
+ },
+ 'content-left': {
+ marginLeft: -drawerWidth,
+ },
+ 'content-right': {
+ marginRight: -drawerWidth,
+ },
+ contentShift: {
+ transition: theme.transitions.create('margin', {
+ easing: theme.transitions.easing.easeOut,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ },
+ 'contentShift-left': {
+ marginLeft: 0,
+ },
+ 'contentShift-right': {
+ marginRight: 0,
+ },
+ title: {
+ flex: 1,
+ }
+});
+
+class PersistentDrawer extends React.Component {
+ state = {
+ open: false,
+ anchor: 'left',
+ };
+
+ handleDrawerOpen = () => {
+ this.setState({ open: true });
+ };
+
+ handleDrawerClose = () => {
+ this.setState({ open: false });
+ };
+
+ handleChangeAnchor = event => {
+ this.setState({
+ anchor: event.target.value,
+ });
+ };
+
+ render() {
+ const { classes, theme } = this.props;
+ const { anchor, open } = this.state;
+
+ const drawer = (
+
+
+
+
+ Permanent drawer
+
+
+
+ {before}
+
+
+
+ {'You think water moves fast? You should see ice.'}
+
+
+ {after}
+
+
+
+ {theme.direction === 'rtl' ?
+
+ - {mailFolderListItems}
- {otherMailFolderListItems}
+
+
+
+
+
+ );
+ }
+}
+
+PersistentDrawer.propTypes = {
+ classes: PropTypes.object.isRequired,
+ theme: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles, { withTheme: true })(PersistentDrawer);
diff --git a/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/StyledMenu.js b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/StyledMenu.js
new file mode 100644
index 0000000..ed6ac4a
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/DrawerMenu/StyledMenu.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import InboxIcon from '@material-ui/icons/MoveToInbox';
+import DraftsIcon from '@material-ui/icons/Drafts';
+import SendIcon from '@material-ui/icons/Send';
+
+import { MenuList, MenuItem, Paper, ListItemIcon, ListItemText } from '@material-ui/core';
+
+const styles = theme => ({
+ menu: {
+ maxWidth: 400,
+ margin: '20 auto'
+ },
+ menuItem: {
+ '&:focus': {
+ backgroundColor: theme.palette.primary.main,
+ '& $primary, & $icon': {
+ color: theme.palette.common.white,
+ },
+ },
+ },
+ primary: {},
+ icon: {},
+});
+
+function StyledMenu(props) {
+ const { classes } = props;
+
+ return (
+
+
+
+ {beforeBtn}
+
+ Persistent drawer
+
+ {afterBtn}
+
+
+ {before}
+
+
+
+ {'You think water moves fast? You should see ice.'}
+
+
+ {after}
+
+
+
+ );
+
+ const fullList = (
+ - {mailFolderListItems}
- {otherMailFolderListItems}
+
+ );
+
+ return (
+ - {mailFolderListItems}
- {otherMailFolderListItems}
+ {sideList}
+
+
+ {fullList}
+
+
+ {fullList}
+
+
+ {sideList}
+
+
+
+ );
+
+ const fullList = (
+ - {mailFolderListItems}
- {otherMailFolderListItems}
+
+ );
+
+ return (
+ - {mailFolderListItems}
- {otherMailFolderListItems}
+ {sideList}
+
+
+ {fullList}
+
+
+ {fullList}
+
+
+ {sideList}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+export const otherMailFolderListItems = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
diff --git a/front/odiparpack/app/containers/UiElements/demos/ImageGrid/AdvancedGridList.js b/front/odiparpack/app/containers/UiElements/demos/ImageGrid/AdvancedGridList.js
new file mode 100644
index 0000000..5d11f0d
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/ImageGrid/AdvancedGridList.js
@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import StarBorderIcon from '@material-ui/icons/StarBorder';
+import imgData from 'ba-api/imgData';
+
+import { GridList, GridListTile, GridListTileBar, IconButton } from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ justifyContent: 'space-around',
+ overflow: 'hidden',
+ backgroundColor: theme.palette.background.paper,
+ },
+ gridList: {
+ width: 500,
+ height: 450,
+ // Promote the list into his own layer on Chrome. This cost memory but helps keeping high FPS.
+ transform: 'translateZ(0)',
+ },
+ titleBar: {
+ background:
+ 'linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, '
+ + 'rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)',
+ },
+ icon: {
+ color: 'white',
+ },
+ img: {
+ maxWidth: 'none'
+ }
+});
+
+/**
+ * The example data is structured as follows:
+ *
+ * import image from 'path/to/image.jpg';
+ * [etc...]
+ *
+ * const tileData = [
+ * {
+ * img: image,
+ * title: 'Image',
+ * author: 'author',
+ * featured: true,
+ * },
+ * {
+ * [etc...]
+ * },
+ * ];
+ */
+function AdvancedGridList(props) {
+ const { classes } = props;
+
+ return (
+
+
+ {imgData.map((tile, index) => (
+
+ 
+
+
+ ))}
+
+
+ );
+}
+
+AdvancedGridList.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(AdvancedGridList);
diff --git a/front/odiparpack/app/containers/UiElements/demos/ImageGrid/ImageGridList.js b/front/odiparpack/app/containers/UiElements/demos/ImageGrid/ImageGridList.js
new file mode 100644
index 0000000..ce785ac
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/ImageGrid/ImageGridList.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import imgData from 'ba-api/imgData';
+
+import { GridList, GridListTile } from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ justifyContent: 'space-around',
+ overflow: 'hidden',
+ backgroundColor: theme.palette.background.paper,
+ },
+ gridList: {
+ width: 500,
+ height: 450,
+ },
+ subheader: {
+ width: '100%',
+ },
+ img: {
+ maxWidth: 'none'
+ }
+});
+
+/**
+ * The example data is structured as follows:
+ *
+ * import image from 'path/to/image.jpg';
+ * [etc...]
+ *
+ * const tileData = [
+ * {
+ * img: image,
+ * title: 'Image',
+ * author: 'author',
+ * cols: 2,
+ * },
+ * {
+ * [etc...]
+ * },
+ * ];
+ */
+function ImageGridList(props) {
+ const { classes } = props;
+
+ return (
+
+
+ {imgData.map((tile, index) => (
+
+
+
+ ))}
+
+
+ );
+}
+
+ImageGridList.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ImageGridList);
diff --git a/front/odiparpack/app/containers/UiElements/demos/ImageGrid/SingleLineGridList.js b/front/odiparpack/app/containers/UiElements/demos/ImageGrid/SingleLineGridList.js
new file mode 100644
index 0000000..ac30e6f
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/ImageGrid/SingleLineGridList.js
@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import StarBorderIcon from '@material-ui/icons/StarBorder';
+import imgData from 'ba-api/imgData';
+
+import { GridList, GridListTile, GridListTileBar, IconButton } from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ justifyContent: 'space-around',
+ overflow: 'hidden',
+ backgroundColor: theme.palette.background.paper,
+ },
+ gridList: {
+ flexWrap: 'nowrap',
+ // Promote the list into his own layer on Chrome. This cost memory but helps keeping high FPS.
+ transform: 'translateZ(0)',
+ },
+ title: {
+ color: theme.palette.primary.light,
+ },
+ titleBar: {
+ background:
+ 'linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)',
+ },
+ img: {
+ maxWidth: 'none'
+ }
+});
+
+/**
+ * The example data is structured as follows:
+ *
+ * import image from 'path/to/image.jpg';
+ * [etc...]
+ *
+ * const tileData = [
+ * {
+ * img: image,
+ * title: 'Image',
+ * author: 'author',
+ * },
+ * {
+ * [etc...]
+ * },
+ * ];
+ */
+function SingleLineGridList(props) {
+ const { classes } = props;
+
+ return (
+
+
+ {imgData.map((tile, index) => (
+
+
+
+
+ ))}
+
+
+ );
+}
+
+SingleLineGridList.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(SingleLineGridList);
diff --git a/front/odiparpack/app/containers/UiElements/demos/ImageGrid/TitlebarGridList.js b/front/odiparpack/app/containers/UiElements/demos/ImageGrid/TitlebarGridList.js
new file mode 100644
index 0000000..41f8d1a
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/ImageGrid/TitlebarGridList.js
@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import InfoIcon from '@material-ui/icons/Info';
+import imgData from 'ba-api/imgData';
+
+import {
+ GridList,
+ GridListTile,
+ GridListTileBar,
+ ListSubheader as Subheader,
+ IconButton,
+} from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ justifyContent: 'space-around',
+ overflow: 'hidden',
+ backgroundColor: theme.palette.background.paper,
+ },
+ gridList: {
+ width: 500,
+ height: 450,
+ },
+ icon: {
+ color: 'rgba(255, 255, 255, 0.54)',
+ },
+ img: {
+ maxWidth: 'none'
+ }
+});
+
+/**
+ * The example data is structured as follows:
+ *
+ * import image from 'path/to/image.jpg';
+ * [etc...]
+ *
+ * const tileData = [
+ * {
+ * img: image,
+ * title: 'Image',
+ * author: 'author',
+ * },
+ * {
+ * [etc...]
+ * },
+ * ];
+ */
+function TitlebarGridList(props) {
+ const { classes } = props;
+
+ return (
+
+
+
+ December
+
+ {imgData.map((tile, index) => (
+
+
+
+by:
+ {tile.author}
+
+ )}
+ actionIcon={(
+
+
+ )}
+ />
+
+ ))}
+
+
+ );
+}
+
+TitlebarGridList.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(TitlebarGridList);
diff --git a/front/odiparpack/app/containers/UiElements/demos/List/ListBasic.js b/front/odiparpack/app/containers/UiElements/demos/List/ListBasic.js
new file mode 100644
index 0000000..ba4f13a
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/List/ListBasic.js
@@ -0,0 +1,116 @@
+import React, { Fragment, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+// import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import ImageIcon from '@material-ui/icons/Image';
+import WorkIcon from '@material-ui/icons/Work';
+import BeachAccessIcon from '@material-ui/icons/BeachAccess';
+
+import { red, green, amber } from '@material-ui/core/colors';
+
+import {
+ Typography, Grid, List,
+ ListItem, ListItemText, ListItemAvatar,
+ Avatar, Divider
+} from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ maxWidth: '360px',
+ backgroundColor: theme.palette.background.paper,
+ margin: 10
+ },
+ avatarRed: {
+ backgroundColor: red[500],
+ },
+ avatarGreen: {
+ backgroundColor: green[500],
+ },
+ avatarAmber: {
+ backgroundColor: amber[500],
+ },
+ divider: {
+ display: 'block',
+ margin: `${theme.spacing(3)}px 0`,
+ }
+});
+
+class ListBasic extends PureComponent {
+ render() {
+ const { classes } = this.props;
+ return (
+
+
+ -
+
+
+ -
+
+
+ -
+ {[0, 1, 2, 3].map(value => (
+
+
+ -
+ {[0, 1, 2, 3].map(value => (
+
+
+ - Settings}>
+
+
+ this.setState({ dense: checked })}
+ value="dense"
+ />
+ )}
+ label="Enable dense"
+ />
+ this.setState({ secondary: checked })}
+ value="secondary"
+ />
+ )}
+ label="Enable secondary text"
+ />
+
+
+
+
+ Text only
+
+
+
+
+ Icon with text
+
+
+
+
+
+
+ Avatar with text
+
+
+
+
+ Avatar with text and icon
+
+
+
+
+ );
+ }
+}
+
+ListInteractive.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ListInteractive);
diff --git a/front/odiparpack/app/containers/UiElements/demos/List/ListMenu.js b/front/odiparpack/app/containers/UiElements/demos/List/ListMenu.js
new file mode 100644
index 0000000..f796f76
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/List/ListMenu.js
@@ -0,0 +1,204 @@
+import React, { Fragment, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import StarIcon from '@material-ui/icons/Star';
+import ImageIcon from '@material-ui/icons/Image';
+import WorkIcon from '@material-ui/icons/Work';
+import BeachAccessIcon from '@material-ui/icons/BeachAccess';
+import InboxIcon from '@material-ui/icons/Inbox';
+import DraftsIcon from '@material-ui/icons/Drafts';
+import SendIcon from '@material-ui/icons/Send';
+import ExpandLess from '@material-ui/icons/ExpandLess';
+import ExpandMore from '@material-ui/icons/ExpandMore';
+import StarBorder from '@material-ui/icons/StarBorder';
+import { red, green, amber, lightBlue, pink, teal } from '@material-ui/core/colors';
+
+import {
+ Typography,
+ Grid,
+ List,
+ ListItem,
+ ListItemIcon,
+ ListItemText,
+ ListSubheader,
+ ListItemAvatar,
+ Divider,
+ Avatar,
+ Collapse,
+} from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ maxWidth: '360px',
+ backgroundColor: theme.palette.background.paper,
+ margin: 10
+ },
+ nested: {
+ paddingLeft: theme.spacing(4),
+ },
+ avatarRed: {
+ backgroundColor: red[500],
+ },
+ avatarGreen: {
+ backgroundColor: green[500],
+ },
+ avatarAmber: {
+ backgroundColor: amber[500],
+ },
+ iconBlue: {
+ color: lightBlue[500]
+ },
+ iconPink: {
+ color: pink[500]
+ },
+ iconAmber: {
+ color: amber[500]
+ },
+ iconTeal: {
+ color: teal[500]
+ },
+});
+
+class ListMenu extends PureComponent {
+ state = { open: true };
+
+ handleClick = () => {
+ this.setState({ open: !this.state.open });
+ };
+
+ render() {
+ const { classes } = this.props;
+ return (
+
+
+ -
+ {generate(
+
+
+ -
+ {generate(
+
+
+ -
+ {generate(
+
+
+ -
+ {generate(
+
+
+ -
+
-
+
+
+ -
+
+
+ -
+
+
+ - Nested List Items}
+ >
+
-
+
-
+
+
+
+ );
+ }
+}
+
+MobileNotif.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(MobileNotif);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Notification/SimpleNotif.js b/front/odiparpack/app/containers/UiElements/demos/Notification/SimpleNotif.js
new file mode 100644
index 0000000..0b068b5
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Notification/SimpleNotif.js
@@ -0,0 +1,132 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import CloseIcon from '@material-ui/icons/Close';
+import { Typography, Button, Snackbar, IconButton, Grid } from '@material-ui/core';
+
+const styles = theme => ({
+ close: {
+ width: theme.spacing(4)
+ },
+ divider: {
+ margin: `${theme.spacing(3)}px 0`,
+ },
+ button: {
+ margin: theme.spacing(1)
+ }
+});
+
+class SimpleNotif extends React.Component {
+ state = {
+ open: false,
+ open2: false,
+ vertical: 'bottom',
+ horizontal: 'left',
+ };
+
+ handleClick = () => {
+ this.setState({ open: true });
+ };
+
+ handleClose = (event, reason) => {
+ if (reason === 'clickaway') {
+ return;
+ }
+
+ this.setState({ open: false });
+ };
+
+ handleClick2 = state => () => {
+ this.setState({ open2: true, ...state });
+ };
+
+ handleClose2 = () => {
+ this.setState({ open2: false });
+ };
+
+ render() {
+ const { classes } = this.props;
+ const { vertical, horizontal, open2 } = this.state;
+ return (
+
+
+
+
+
+
+ Out of my way!
+
+
+
+
+
+ Archived}
+ action={(
+
+ )}
+ className={classes.snackbar}
+ />
+
+
+
+ Note archived}
+ action={[
+ ,
+
+ ,
+ ]}
+ />
+
+
+
+
+
+
+
+
+ I love snacks}
+ />
+
+
+
+
+
+
+
+
+ I love snacks}
+ />
+
+
+
+ I love snacks}
+ />
+
+
+
+
+ {message}}
+ action={[
+ ,
+
+
+ ]}
+ />
+
+ {ctn}
+ )); + + // Logic for displaying page numbers + const pageNumbers = []; + for (let i = 1; i <= Math.ceil(content.length / contentsPerPage); i += 1) { + pageNumbers.push(i); + } + + return ( +
+
+
+ {renderContent}
+
+
+ this.onNext(pageNumbers.length)}
+ onGoFirst={this.onGoFirst}
+ onGoLast={() => this.onGoLast(pageNumbers.length)}
+ />
+
+ );
+ }
+}
+
+GeneralPagination.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(GeneralPagination);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Pagination/TbPagination.js b/front/odiparpack/app/containers/UiElements/demos/Pagination/TbPagination.js
new file mode 100644
index 0000000..d1a0214
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Pagination/TbPagination.js
@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Table, TableBody, TableCell, TableFooter, TablePagination, TableRow, Paper } from '@material-ui/core';
+
+let counter = 0;
+function createData(name, calories, fat) {
+ counter += 1;
+ return {
+ id: counter,
+ name,
+ calories,
+ fat
+ };
+}
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ marginTop: theme.spacing(3),
+ },
+ table: {
+ minWidth: 500,
+ },
+ tableWrapper: {
+ overflowX: 'auto',
+ },
+});
+
+class TbPagination extends React.Component {
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ data: [
+ createData('Cupcake', 305, 3.7),
+ createData('Donut', 452, 25.0),
+ createData('Eclair', 262, 16.0),
+ createData('Frozen yoghurt', 159, 6.0),
+ createData('Gingerbread', 356, 16.0),
+ createData('Honeycomb', 408, 3.2),
+ createData('Ice cream sandwich', 237, 9.0),
+ createData('Jelly Bean', 375, 0.0),
+ createData('KitKat', 518, 26.0),
+ createData('Lollipop', 392, 0.2),
+ createData('Marshmallow', 318, 0),
+ createData('Nougat', 360, 19.0),
+ createData('Oreo', 437, 18.0),
+ ].sort((a, b) => (a.calories < b.calories ? -1 : 1)),
+ page: 0,
+ rowsPerPage: 5,
+ };
+ }
+
+ handleChangePage = (event, page) => {
+ this.setState({ page });
+ };
+
+ handleChangeRowsPerPage = event => {
+ this.setState({ rowsPerPage: event.target.value });
+ };
+
+ render() {
+ const { classes } = this.props;
+ const { data, rowsPerPage, page } = this.state;
+ const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - (page * rowsPerPage));
+
+ return (
+ +We are in page + {page} +
+
+
+
+
+
+
+ {theme.direction === 'rtl' ?
+
+ {theme.direction === 'rtl' ?
+ = Math.ceil(count / rowsPerPage) - 1}
+ aria-label="Next Page"
+ >
+ {theme.direction === 'rtl' ?
+ = Math.ceil(count / rowsPerPage) - 1}
+ aria-label="Last Page"
+ >
+ {theme.direction === 'rtl' ?
+
+ );
+ }
+}
+
+TbPaginationActions.propTypes = {
+ classes: PropTypes.object.isRequired,
+ count: PropTypes.number.isRequired,
+ onChangePage: PropTypes.func.isRequired,
+ page: PropTypes.number.isRequired,
+ rowsPerPage: PropTypes.number.isRequired,
+ theme: PropTypes.object.isRequired,
+};
+
+export default withStyles(actionsStyles, { withTheme: true })(
+ TbPaginationActions,
+);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Pagination/TbPaginationCustom.js b/front/odiparpack/app/containers/UiElements/demos/Pagination/TbPaginationCustom.js
new file mode 100644
index 0000000..49494dc
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Pagination/TbPaginationCustom.js
@@ -0,0 +1,115 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Table, TableBody, TableCell, TablePagination, TableRow, TableFooter, Paper } from '@material-ui/core';
+import TbPaginationActions from './TbPaginationActions';
+
+
+let counter = 0;
+function createData(name, calories, fat) {
+ counter += 1;
+ return {
+ id: counter,
+ name,
+ calories,
+ fat
+ };
+}
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ marginTop: theme.spacing(3),
+ },
+ table: {
+ minWidth: 500,
+ },
+ tableWrapper: {
+ overflowX: 'auto',
+ },
+});
+
+class TbPaginationCustom extends React.Component {
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ data: [
+ createData('Cupcake', 305, 3.7),
+ createData('Donut', 452, 25.0),
+ createData('Eclair', 262, 16.0),
+ createData('Frozen yoghurt', 159, 6.0),
+ createData('Gingerbread', 356, 16.0),
+ createData('Honeycomb', 408, 3.2),
+ createData('Ice cream sandwich', 237, 9.0),
+ createData('Jelly Bean', 375, 0.0),
+ createData('KitKat', 518, 26.0),
+ createData('Lollipop', 392, 0.2),
+ createData('Marshmallow', 318, 0),
+ createData('Nougat', 360, 19.0),
+ createData('Oreo', 437, 18.0),
+ ].sort((a, b) => (a.calories < b.calories ? -1 : 1)),
+ page: 0,
+ rowsPerPage: 5,
+ };
+ }
+
+ handleChangePage = (event, page) => {
+ this.setState({ page });
+ };
+
+ handleChangeRowsPerPage = event => {
+ this.setState({ rowsPerPage: event.target.value });
+ };
+
+ render() {
+ const { classes } = this.props;
+ const { data, rowsPerPage, page } = this.state;
+ const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - (page * rowsPerPage));
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ Add
+
+
+ )}
+ classes={{ popper: classes.arrowPopper }}
+ PopperProps={{
+ popperOptions: {
+ modifiers: {
+ arrow: {
+ enabled: Boolean(this.state.arrowRef),
+ element: this.state.arrowRef,
+ },
+ },
+ },
+ }}
+ >
+
+
+
+ );
+ }
+}
+
+CustomizedTooltips.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CustomizedTooltips);
diff --git a/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/DelayTooltips.js b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/DelayTooltips.js
new file mode 100644
index 0000000..786dd4f
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/DelayTooltips.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Button, Tooltip } from '@material-ui/core';
+
+function DelayTooltips() {
+ return (
+
+
+
+
+ {anchorReference === 'anchorEl' && (
+
+ )}
+
+
+
+ The content of the Popover.
+
+
+
+
+ anchorReference
+
+
+
+
+
+
+ anchorPosition.top
+
+
+
+
+ anchorPosition.left
+
+
+
+
+
+ anchorOrigin.vertical
+
+
+
+
+
+
+ transformOrigin.vertical
+
+
+
+
+
+
+ anchorOrigin.horizontal
+
+
+
+
+
+
+ transformOrigin.horizontal
+
+
+
+
+
+
+ {code}
+
+
+ );
+ }
+}
+
+PopoverPlayground.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(PopoverPlayground);
diff --git a/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/PositionedTooltips.js b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/PositionedTooltips.js
new file mode 100644
index 0000000..336d932
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/PositionedTooltips.js
@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Grid, Button, Tooltip } from '@material-ui/core';
+
+const styles = {
+ root: {
+ width: 500,
+ margin: '0 auto'
+ },
+};
+
+function PositionedTooltips(props) {
+ const { classes } = props;
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+PositionedTooltips.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(PositionedTooltips);
diff --git a/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/SimplePopover.js b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/SimplePopover.js
new file mode 100644
index 0000000..23d2462
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/SimplePopover.js
@@ -0,0 +1,79 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Button, Popover, Typography, Grid } from '@material-ui/core';
+
+const styles = theme => ({
+ typography: {
+ margin: theme.spacing(2),
+ },
+ divider: {
+ display: 'block',
+ margin: `${theme.spacing(3)}px 0`,
+ textAlign: 'center'
+ },
+ button: {
+ margin: theme.spacing(1),
+ },
+});
+
+class SimplePopover extends React.Component {
+ state = {
+ anchorEl: null,
+ };
+
+ handleClick = event => {
+ this.setState({
+ anchorEl: event.currentTarget,
+ });
+ };
+
+ handleClose = () => {
+ this.setState({
+ anchorEl: null,
+ });
+ };
+
+ render() {
+ const { classes } = this.props;
+ const { anchorEl } = this.state;
+ return (
+ +
+
+
+
+
+
+ The content of the Popover.
+
+
+
+
+ );
+ }
+}
+
+SimplePopover.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(SimplePopover);
diff --git a/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/SimpleTooltips.js b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/SimpleTooltips.js
new file mode 100644
index 0000000..0714e6c
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/SimpleTooltips.js
@@ -0,0 +1,116 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import AddIcon from '@material-ui/icons/Add';
+import DeleteIcon from '@material-ui/icons/Delete';
+import { Fab, IconButton, Tooltip, Typography, Grid } from '@material-ui/core';
+
+const styles = theme => ({
+ fab: {
+ margin: theme.spacing(2),
+ },
+ fixed: {
+ position: 'fixed',
+ bottom: theme.spacing(2),
+ right: theme.spacing(3),
+ },
+ divider: {
+ display: 'block',
+ margin: `${theme.spacing(3)}px 0`,
+ textAlign: 'center'
+ },
+});
+
+class SimpleTooltips extends React.Component {
+ state = {
+ open: false,
+ };
+
+ handleTooltipClose = () => {
+ this.setState({ open: false });
+ };
+
+ handleTooltipOpen = () => {
+ this.setState({ open: true });
+ };
+
+ render() {
+ const { classes } = this.props;
+ return (
+
+
+
+ Simple Tooltips
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Delayed Tooltips
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+SimpleTooltips.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(SimpleTooltips);
diff --git a/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/TransitionsTooltips.js b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/TransitionsTooltips.js
new file mode 100644
index 0000000..7b8adc1
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/TransitionsTooltips.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Button, Tooltip, Fade, Zoom } from '@material-ui/core';
+
+function TransitionsTooltips() {
+ return (
+ +
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default TransitionsTooltips;
diff --git a/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/TriggersTooltips.js b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/TriggersTooltips.js
new file mode 100644
index 0000000..bd4db5b
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/PopoverTooltip/TriggersTooltips.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import { Grid, Button, Tooltip, ClickAwayListener } from '@material-ui/core';
+
+class TriggersTooltips extends React.Component {
+ state = {
+ open: false,
+ };
+
+ handleTooltipClose = () => {
+ this.setState({ open: false });
+ };
+
+ handleTooltipOpen = () => {
+ this.setState({ open: true });
+ };
+
+ render() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default TriggersTooltips;
diff --git a/front/odiparpack/app/containers/UiElements/demos/Progress/CircularDeterminate.js b/front/odiparpack/app/containers/UiElements/demos/Progress/CircularDeterminate.js
new file mode 100644
index 0000000..0b1312b
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Progress/CircularDeterminate.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { CircularProgress } from '@material-ui/core';
+
+const styles = theme => ({
+ progress: {
+ margin: theme.spacing(2),
+ },
+});
+
+class CircularDeterminate extends React.Component {
+ state = {
+ completed: 0,
+ };
+
+ componentDidMount() {
+ this.timer = setInterval(this.progress, 20);
+ }
+
+ componentWillUnmount() {
+ clearInterval(this.timer);
+ }
+
+ timer;
+
+ progress = () => {
+ const { completed } = this.state;
+ this.setState({ completed: completed === 100 ? 0 : completed + 1 });
+ };
+
+ render() {
+ const { classes } = this.props;
+ return (
+
+
+
+
+
+
+
+ );
+ }
+}
+
+CircularDeterminate.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CircularDeterminate);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Progress/CircularIndeterminate.js b/front/odiparpack/app/containers/UiElements/demos/Progress/CircularIndeterminate.js
new file mode 100644
index 0000000..cc37de8
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Progress/CircularIndeterminate.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { purple } from '@material-ui/core/colors';
+import { CircularProgress } from '@material-ui/core';
+
+const styles = theme => ({
+ progress: {
+ margin: theme.spacing(2),
+ },
+});
+
+function CircularIndeterminate(props) {
+ const { classes } = props;
+ return (
+
+
+ );
+}
+
+CircularIndeterminate.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CircularIndeterminate);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Progress/CircularIntegration.js b/front/odiparpack/app/containers/UiElements/demos/Progress/CircularIntegration.js
new file mode 100644
index 0000000..ff19f5c
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Progress/CircularIntegration.js
@@ -0,0 +1,114 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import CheckIcon from '@material-ui/icons/Check';
+import SaveIcon from '@material-ui/icons/Save';
+import { green } from '@material-ui/core/colors';
+
+import { CircularProgress, Button, Fab } from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ display: 'flex',
+ alignItems: 'center',
+ },
+ wrapper: {
+ margin: theme.spacing(1),
+ position: 'relative',
+ },
+ buttonSuccess: {
+ backgroundColor: green[500],
+ '&:hover': {
+ backgroundColor: green[700],
+ },
+ },
+ fabProgress: {
+ color: green[500],
+ position: 'absolute',
+ top: -6,
+ left: -6,
+ zIndex: 1,
+ },
+ buttonProgress: {
+ color: green[500],
+ position: 'absolute',
+ top: '50%',
+ left: '50%',
+ marginTop: -12,
+ marginLeft: -12,
+ },
+});
+
+class CircularIntegration extends React.Component {
+ state = {
+ loading: false,
+ success: false,
+ };
+
+ componentWillUnmount() {
+ clearTimeout(this.timer);
+ }
+
+ handleButtonClick = () => {
+ if (!this.state.loading) {
+ this.setState(
+ {
+ success: false,
+ loading: true,
+ },
+ () => {
+ this.timer = setTimeout(() => {
+ this.setState({
+ loading: false,
+ success: true,
+ });
+ }, 2000);
+ },
+ );
+ }
+ };
+
+ timer = undefined;
+
+ render() {
+ const { loading, success } = this.state;
+ const { classes } = this.props;
+ const buttonClassname = classNames({
+ [classes.buttonSuccess]: success,
+ });
+
+ return (
+
+
+ );
+ }
+}
+
+CircularIntegration.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CircularIntegration);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Progress/CircularStatic.js b/front/odiparpack/app/containers/UiElements/demos/Progress/CircularStatic.js
new file mode 100644
index 0000000..bfa931a
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Progress/CircularStatic.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { CircularProgress } from '@material-ui/core';
+
+const styles = theme => ({
+ progress: {
+ margin: theme.spacing(2),
+ },
+});
+
+function CircularStatic(props) {
+ const { classes } = props;
+ return (
+
+
+ {success ?
+ {loading &&
+
+
+ {loading &&
+
+
+ );
+}
+
+CircularStatic.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CircularStatic);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Progress/LinearBuffer.js b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearBuffer.js
new file mode 100644
index 0000000..44bca71
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearBuffer.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { LinearProgress } from '@material-ui/core';
+
+const styles = {
+ root: {
+ flexGrow: 1,
+ },
+};
+
+class LinearBuffer extends React.Component {
+ state = {
+ completed: 0,
+ buffer: 10,
+ };
+
+ componentDidMount() {
+ this.timer = setInterval(this.progress, 500);
+ }
+
+ componentWillUnmount() {
+ clearInterval(this.timer);
+ }
+
+ timer = null;
+
+ progress = () => {
+ const { completed } = this.state;
+ if (completed > 100) {
+ this.setState({ completed: 0, buffer: 10 });
+ } else {
+ const diff = Math.random() * 10;
+ const diff2 = Math.random() * 10;
+ this.setState({ completed: completed + diff, buffer: completed + diff + diff2 });
+ }
+ };
+
+ render() {
+ const { classes } = this.props;
+ const { completed, buffer } = this.state;
+ return (
+
+
+
+ );
+ }
+}
+
+LinearBuffer.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(LinearBuffer);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Progress/LinearDeterminate.js b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearDeterminate.js
new file mode 100644
index 0000000..08c718d
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearDeterminate.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { LinearProgress } from '@material-ui/core';
+
+const styles = {
+ root: {
+ flexGrow: 1,
+ },
+};
+
+class LinearDeterminate extends React.Component {
+ state = {
+ completed: 0,
+ };
+
+ componentDidMount() {
+ this.timer = setInterval(this.progress, 500);
+ }
+
+ componentWillUnmount() {
+ clearInterval(this.timer);
+ }
+
+ timer = null;
+
+ progress = () => {
+ const { completed } = this.state;
+ if (completed === 100) {
+ this.setState({ completed: 0 });
+ } else {
+ const diff = Math.random() * 10;
+ this.setState({ completed: Math.min(completed + diff, 100) });
+ }
+ };
+
+ render() {
+ const { classes } = this.props;
+ return (
+ +
+
+
+ );
+ }
+}
+
+LinearDeterminate.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(LinearDeterminate);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Progress/LinearIndeterminate.js b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearIndeterminate.js
new file mode 100644
index 0000000..de5071a
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearIndeterminate.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { LinearProgress } from '@material-ui/core';
+
+const styles = {
+ root: {
+ flexGrow: 1,
+ },
+};
+
+function LinearIndeterminate(props) {
+ const { classes } = props;
+ return (
+ +
+
+
+ );
+}
+
+LinearIndeterminate.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(LinearIndeterminate);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Progress/LinearQuery.js b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearQuery.js
new file mode 100644
index 0000000..6e51da7
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearQuery.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { LinearProgress } from '@material-ui/core';
+
+const styles = {
+ root: {
+ flexGrow: 1,
+ },
+};
+
+function LinearQuery(props) {
+ const { classes } = props;
+ return (
+ +
+
+
+ );
+}
+
+LinearQuery.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(LinearQuery);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Progress/LinearStatic.js b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearStatic.js
new file mode 100644
index 0000000..55ad2a1
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Progress/LinearStatic.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { LinearProgress } from '@material-ui/core';
+
+const styles = {
+ root: {
+ flexGrow: 1,
+ },
+};
+
+function LinearIndeterminate(props) {
+ const { classes } = props;
+ return (
+ +
+
+
+ );
+}
+
+LinearIndeterminate.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(LinearIndeterminate);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Progress/ProgressDelay.js b/front/odiparpack/app/containers/UiElements/demos/Progress/ProgressDelay.js
new file mode 100644
index 0000000..6417795
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Progress/ProgressDelay.js
@@ -0,0 +1,105 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Fade, Button, CircularProgress, Typography } from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ },
+ button: {
+ margin: theme.spacing(2),
+ },
+ placeholder: {
+ height: 40,
+ },
+});
+
+class ProgressDelay extends React.Component {
+ state = {
+ loading: false,
+ query: 'idle',
+ };
+
+ componentWillUnmount() {
+ clearTimeout(this.timer);
+ }
+
+ timer = null;
+
+ handleClickLoading = () => {
+ this.setState({
+ loading: !this.state.loading,
+ });
+ };
+
+ handleClickQuery = () => {
+ clearTimeout(this.timer);
+
+ if (this.state.query !== 'idle') {
+ this.setState({
+ query: 'idle',
+ });
+ return;
+ }
+
+ this.setState({
+ query: 'progress',
+ });
+ this.timer = setTimeout(() => {
+ this.setState({
+ query: 'success',
+ });
+ }, 2e3);
+ };
+
+ render() {
+ const { classes } = this.props;
+ const { loading, query } = this.state;
+
+ return (
+ +
+
+ );
+ }
+}
+
+ProgressDelay.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ProgressDelay);
diff --git a/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/AnimatedSlider.js b/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/AnimatedSlider.js
new file mode 100644
index 0000000..57fb5e4
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/AnimatedSlider.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import Type from 'ba-styles/Typography.scss';
+import Slider from 'react-animated-slider';
+import imgApi from 'ba-api/images';
+import avatarApi from 'ba-api/avatars';
+import 'ba-styles/vendors/react-animated-slider/react-animated-slider.css';
+
+import { Button, Typography, Hidden } from '@material-ui/core';
+
+const content = [
+ {
+ title: 'Vulputate Mollis Ultricies Fermentum Parturient',
+ description:
+ 'Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis.',
+ button: 'Read More',
+ image: imgApi[38],
+ user: 'Luanda Gjokaj',
+ userProfile: avatarApi[1]
+ },
+ {
+ title: 'Tortor Dapibus Commodo Aenean Quam',
+ description:
+ 'Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui.',
+ button: 'Discover',
+ image: imgApi[2],
+ user: 'Erich Behrens',
+ userProfile: avatarApi[8]
+ },
+ {
+ title: 'Phasellus volutpat metus',
+ description:
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula.',
+ button: 'Buy now',
+ image: imgApi[28],
+ user: 'Bruno Vizovskyy',
+ userProfile: avatarApi[10]
+ }
+];
+
+const AnimatedSlider = () => (
+
+
+
+
+
+
+ {query === 'success' ? (
+ Success!
+ ) : (
+
+
+ )}
+
+
+
+
+ {content.map((item, index) => (
+
+
+);
+
+export default AnimatedSlider;
diff --git a/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/AutoplayCarousel.js b/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/AutoplayCarousel.js
new file mode 100644
index 0000000..59c11ef
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/AutoplayCarousel.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import Slider from 'react-slick';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import imgData from 'ba-api/imgData';
+import 'ba-styles/vendors/slick-carousel/slick-carousel.css';
+import 'ba-styles/vendors/slick-carousel/slick.css';
+import 'ba-styles/vendors/slick-carousel/slick-theme.css';
+
+const styles = ({
+ item: {
+ textAlign: 'center',
+ '& img': {
+ margin: '10px auto'
+ }
+ }
+});
+
+class AutoplayCarousel extends React.Component {
+ render() {
+ const { classes } = this.props;
+ const settings = {
+ dots: true,
+ infinite: true,
+ centerMode: false,
+ speed: 500,
+ autoplaySpeed: 2000,
+ pauseOnHover: true,
+ autoplay: true,
+ slidesToShow: 3,
+ slidesToScroll: 1,
+ cssEase: 'ease-out'
+ };
+ return (
+
+
+ 
+
+ Posted by
+ {' '}
+ {item.user}
+
+
+
+ ))}
+
+ {item.title}
+
+
+
+
+ {item.description}
+
+
+ {imgData.map((item, index) => (
+
+
+ );
+ }
+}
+
+AutoplayCarousel.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(AutoplayCarousel);
diff --git a/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/CustomCarousel.js b/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/CustomCarousel.js
new file mode 100644
index 0000000..a558d8e
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/CustomCarousel.js
@@ -0,0 +1,93 @@
+import React from 'react';
+import Slider from 'react-slick';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import ArrowForward from '@material-ui/icons/ArrowForward';
+import ArrowBack from '@material-ui/icons/ArrowBack';
+import imgData from 'ba-api/imgData';
+import 'ba-styles/vendors/slick-carousel/slick-carousel.css';
+import 'ba-styles/vendors/slick-carousel/slick.css';
+import 'ba-styles/vendors/slick-carousel/slick-theme.css';
+import { IconButton } from '@material-ui/core';
+
+function SampleNextArrow(props) {
+ const { onClick } = props;
+ return (
+
+ 
+
+ ))}
+
+
+ {imgData.map((item, index) => (
+
+
+ );
+ }
+}
+
+CustomCarousel.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CustomCarousel);
diff --git a/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/MultipleCarousel.js b/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/MultipleCarousel.js
new file mode 100644
index 0000000..c8ff743
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/MultipleCarousel.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import Slider from 'react-slick';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import imgData from 'ba-api/imgData';
+import 'ba-styles/vendors/slick-carousel/slick-carousel.css';
+import 'ba-styles/vendors/slick-carousel/slick.css';
+import 'ba-styles/vendors/slick-carousel/slick-theme.css';
+
+const styles = ({
+ item: {
+ textAlign: 'center',
+ '& img': {
+ margin: '10px auto'
+ }
+ }
+});
+
+class MultipleCarousel extends React.Component {
+ render() {
+ const { classes } = this.props;
+ const settings = {
+ dots: true,
+ infinite: true,
+ centerMode: true,
+ speed: 500,
+ slidesToShow: 3,
+ slidesToScroll: 1
+ };
+ return (
+
+
+
+ ))}
+
+
+ {imgData.map((item, index) => (
+
+
+ );
+ }
+}
+
+MultipleCarousel.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(MultipleCarousel);
diff --git a/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/SingleCarousel.js b/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/SingleCarousel.js
new file mode 100644
index 0000000..76158f7
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/SingleCarousel.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import Slider from 'react-slick';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import imgData from 'ba-api/imgData';
+import 'ba-styles/vendors/slick-carousel/slick-carousel.css';
+import 'ba-styles/vendors/slick-carousel/slick.css';
+import 'ba-styles/vendors/slick-carousel/slick-theme.css';
+
+import { FormControl, MenuItem, InputLabel, Select } from '@material-ui/core';
+
+const styles = ({
+ root: {
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center'
+ },
+ formControl: {
+ width: '50%',
+ margin: '0 auto'
+ },
+ item: {
+ textAlign: 'center',
+ '& img': {
+ margin: '10px auto'
+ }
+ }
+});
+
+class SingleCarousel extends React.Component {
+ state = {
+ transition: 'slide'
+ }
+
+ handleChange = event => {
+ this.setState({ [event.target.name]: event.target.value });
+ };
+
+ render() {
+ const { classes } = this.props;
+ const { transition } = this.state;
+ const settings = {
+ dots: true,
+ fade: this.state.transition === 'fade',
+ };
+ return (
+
+
+
+ ))}
+
+
+ Carousel Transition
+
+
+
+ );
+ }
+}
+
+SingleCarousel.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(SingleCarousel);
diff --git a/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/ThumbnailCarousel.js b/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/ThumbnailCarousel.js
new file mode 100644
index 0000000..9860b55
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/ThumbnailCarousel.js
@@ -0,0 +1,90 @@
+import React from 'react';
+import Slider from 'react-slick';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import 'ba-styles/vendors/slick-carousel/slick-carousel.css';
+import 'ba-styles/vendors/slick-carousel/slick.css';
+import 'ba-styles/vendors/slick-carousel/slick-theme.css';
+import imgData from 'ba-api/imgData';
+
+import { FormControl, MenuItem, InputLabel, Select } from '@material-ui/core';
+
+const styles = ({
+ root: {
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center'
+ },
+ formControl: {
+ width: '50%',
+ margin: '0 auto'
+ },
+ item: {
+ textAlign: 'center',
+ '& img': {
+ margin: '10px auto'
+ }
+ }
+});
+
+const getThumb = imgData.map(a => a.thumb);
+
+class ThumbnailCarousel extends React.Component {
+ state = {
+ transition: 'slide'
+ }
+
+ handleChange = event => {
+ this.setState({ [event.target.name]: event.target.value });
+ };
+
+ render() {
+ const { classes } = this.props;
+ const { transition } = this.state;
+ const settings = {
+ customPaging: (i) => (
+
+
+
+ {imgData.map((item, index) => (
+
+
+
+
+
+ ))}
+
+
+ Carousel Transition
+
+
+
+ );
+ }
+}
+
+ThumbnailCarousel.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ThumbnailCarousel);
diff --git a/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/VerticalCarousel.js b/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/VerticalCarousel.js
new file mode 100644
index 0000000..36dd7c3
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/SliderCaraousel/VerticalCarousel.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import Slider from 'react-slick';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import imgData from 'ba-api/imgData';
+import 'ba-styles/vendors/slick-carousel/slick-carousel.css';
+import 'ba-styles/vendors/slick-carousel/slick.css';
+import 'ba-styles/vendors/slick-carousel/slick-theme.css';
+
+const styles = ({
+ item: {
+ textAlign: 'center',
+ '& img': {
+ margin: '10px auto'
+ }
+ }
+});
+
+class VerticalCarousel extends React.Component {
+ render() {
+ const { classes } = this.props;
+ const settings = {
+ infinite: true,
+ slidesToShow: 2,
+ slidesToScroll: 1,
+ vertical: true,
+ verticalSwiping: true,
+ swipeToSlide: true,
+ };
+ return (
+
+
+ {imgData.map((item, index) => (
+
+
+
+
+
+ ))}
+
+
+ {imgData.map((item, index) => (
+
+
+ );
+ }
+}
+
+VerticalCarousel.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(VerticalCarousel);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Steppers/HorizontalLinear.js b/front/odiparpack/app/containers/UiElements/demos/Steppers/HorizontalLinear.js
new file mode 100644
index 0000000..db47ee1
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Steppers/HorizontalLinear.js
@@ -0,0 +1,196 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Type from 'ba-styles/Typography.scss';
+
+import {
+ Stepper,
+ Step,
+ StepLabel,
+ Button,
+ Typography,
+ FormGroup,
+ FormControlLabel,
+ Switch,
+ Divider,
+} from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ },
+ button: {
+ marginRight: theme.spacing(1),
+ },
+ instructions: {
+ marginTop: theme.spacing(1),
+ marginBottom: theme.spacing(1),
+ },
+});
+
+function getSteps() {
+ return ['Select campaign settings', 'Create an ad group', 'Create an ad'];
+}
+
+function getStepContent(step) {
+ switch (step) {
+ case 0:
+ return 'Select campaign settings...';
+ case 1:
+ return 'What is an ad group anyways?';
+ case 2:
+ return 'This is the bit I really care about!';
+ default:
+ return 'Unknown step';
+ }
+}
+
+class HorizontalLinear extends React.Component {
+ static propTypes = {
+ classes: PropTypes.object.isRequired,
+ };
+
+ state = {
+ activeStep: 0,
+ altLabel: false,
+ skipped: new Set(),
+ };
+
+ isStepOptional = step => (step === 1);
+
+ isStepSkipped(step) {
+ return this.state.skipped.has(step);
+ }
+
+ handleNext = () => {
+ const { activeStep } = this.state;
+ let { skipped } = this.state;
+ if (this.isStepSkipped(activeStep)) {
+ skipped = new Set(skipped.values());
+ skipped.delete(activeStep);
+ }
+ this.setState({
+ activeStep: activeStep + 1,
+ skipped,
+ });
+ };
+
+ handleBack = () => {
+ const { activeStep } = this.state;
+ this.setState({
+ activeStep: activeStep - 1,
+ });
+ };
+
+ handleSkip = () => {
+ const { activeStep } = this.state;
+ if (!this.isStepOptional(activeStep)) {
+ // You probably want to guard against something like this,
+ // it should never occur unless someone's actively trying to break something.
+ throw new Error("You can't skip a step that isn't optional.");
+ }
+ const skipped = new Set(this.state.skipped.values());
+ skipped.add(activeStep);
+ this.setState({
+ activeStep: this.state.activeStep + 1,
+ skipped,
+ });
+ };
+
+ handleReset = () => {
+ this.setState({
+ activeStep: 0,
+ });
+ };
+
+ handleChange = name => event => {
+ this.setState({ [name]: event.target.checked });
+ };
+
+ render() {
+ const { classes } = this.props;
+ const steps = getSteps();
+ const { activeStep, altLabel } = this.state;
+
+ return (
+
+
+
+ ))}
+
+
+
+
+ {steps.map((label, index) => {
+ const props = {};
+ const labelProps = {};
+ if (this.isStepOptional(index)) {
+ labelProps.optional = Optional ;
+ }
+ if (this.isStepSkipped(index)) {
+ props.completed = false;
+ }
+ return (
+
+ {label}
+
+ );
+ })}
+
+
+ );
+ }
+}
+
+export default withStyles(styles)(HorizontalLinear);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Steppers/HorizontalNonLinear.js b/front/odiparpack/app/containers/UiElements/demos/Steppers/HorizontalNonLinear.js
new file mode 100644
index 0000000..3c72df3
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Steppers/HorizontalNonLinear.js
@@ -0,0 +1,213 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+
+import {
+ Stepper,
+ Step,
+ StepButton,
+ Button,
+ Divider,
+ FormGroup,
+ FormControlLabel,
+ Switch,
+ Typography,
+} from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ },
+ button: {
+ marginRight: theme.spacing(1),
+ },
+ completed: {
+ display: 'inline-block',
+ },
+ instructions: {
+ marginTop: theme.spacing(1),
+ marginBottom: theme.spacing(1),
+ },
+ stepItem: {
+ whiteSpace: 'inherit'
+ }
+});
+
+function getSteps() {
+ return ['Select campaign settings', 'Create an ad group', 'Create an ad'];
+}
+
+function getStepContent(step) {
+ switch (step) {
+ case 0:
+ return 'Step 1: Select campaign settings...';
+ case 1:
+ return 'Step 2: What is an ad group anyways?';
+ case 2:
+ return 'Step 3: This is the bit I really care about!';
+ default:
+ return 'Unknown step';
+ }
+}
+
+class HorizontalNonLinear extends React.Component {
+ state = {
+ activeStep: 0,
+ altLabel: false,
+ completed: {},
+ };
+
+ completedSteps() {
+ return Object.keys(this.state.completed).length;
+ }
+
+ totalSteps = () => (
+ getSteps().length
+ );
+
+ isLastStep() {
+ return this.state.activeStep === this.totalSteps() - 1;
+ }
+
+ allStepsCompleted() {
+ return this.completedSteps() === this.totalSteps();
+ }
+
+ handleNext = () => {
+ let activeStep;
+
+ if (this.isLastStep() && !this.allStepsCompleted()) {
+ // It's the last step, but not all steps have been completed,
+ // find the first step that has been completed
+ const steps = getSteps();
+ activeStep = steps.findIndex((step, i) => !(i in this.state.completed));
+ } else {
+ activeStep = this.state.activeStep + 1;
+ }
+ this.setState({
+ activeStep,
+ });
+ };
+
+ handleBack = () => {
+ const { activeStep } = this.state;
+ this.setState({
+ activeStep: activeStep - 1,
+ });
+ };
+
+ handleStep = step => () => {
+ this.setState({
+ activeStep: step,
+ });
+ };
+
+ handleComplete = () => {
+ const { completed } = this.state;
+ completed[this.state.activeStep] = true;
+ this.setState({
+ completed,
+ });
+ this.handleNext();
+ };
+
+ handleReset = () => {
+ this.setState({
+ activeStep: 0,
+ completed: {},
+ });
+ };
+
+ handleChange = name => event => {
+ this.setState({ [name]: event.target.checked });
+ };
+
+ render() {
+ const { classes } = this.props;
+ const steps = getSteps();
+ const { activeStep, altLabel } = this.state;
+
+ return (
+
+ {activeStep === steps.length ? (
+
+
+
+ All steps completed - you"re finished
+
+
+
+ ) : (
+
+ {getStepContent(activeStep)}
+
+ )}
+
+
+ {this.isStepOptional(activeStep) && (
+
+ )}
+
+
+
+
+
+
+ {steps.map((label, index) => (
+
+
+ {label}
+
+
+ ))}
+
+
+ );
+ }
+}
+
+HorizontalNonLinear.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(HorizontalNonLinear);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Steppers/MobileSteppers.js b/front/odiparpack/app/containers/UiElements/demos/Steppers/MobileSteppers.js
new file mode 100644
index 0000000..c9d7cf1
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Steppers/MobileSteppers.js
@@ -0,0 +1,116 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
+import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
+
+import { MobileStepper, Button, Grid, Typography } from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ [theme.breakpoints.up('sm')]: {
+ width: 400,
+ margin: '0 auto'
+ },
+ flexGrow: 1,
+ },
+ title: {
+ textAlign: 'center',
+ margin: `${theme.spacing(4)}px 0 ${theme.spacing(2)}px`,
+ },
+});
+
+class MobileSteppers extends React.Component {
+ state = {
+ activeStepDots: 0,
+ activeStepLine: 0,
+ };
+
+ handleNextDots = () => {
+ this.setState({
+ activeStepDots: this.state.activeStepDots + 1,
+ });
+ };
+
+ handleBackDots = () => {
+ this.setState({
+ activeStepDots: this.state.activeStepDots - 1,
+ });
+ };
+
+ handleNextLine = () => {
+ this.setState({
+ activeStepLine: this.state.activeStepLine + 1,
+ });
+ };
+
+ handleBackLine = () => {
+ this.setState({
+ activeStepLine: this.state.activeStepLine - 1,
+ });
+ };
+
+ render() {
+ const { classes, theme } = this.props;
+
+ return (
+
+ {this.allStepsCompleted() ? (
+
+
+
+ All steps completed - you"re finished
+
+
+
+ ) : (
+
+ {getStepContent(activeStep)}
+
+ )}
+
+
+
+ {activeStep !== steps.length
+ && (this.state.completed[this.state.activeStep] ? (
+
+ Step
+ {' '}
+ {activeStep + 1}
+ {' '}
+already completed
+
+ ) : (
+
+ ))}
+
+
+ 
+
+ ))}
+
+
+ {steps.map((label, index) => {
+ const props = {};
+ const labelProps = {};
+ if (this.isStepOptional(index)) {
+ labelProps.optional = (
+
+ Alert message
+
+ );
+ }
+ if (this.isStepFailed(index)) {
+ labelProps.error = true;
+ }
+ if (this.isStepSkipped(index)) {
+ props.completed = false;
+ }
+ return (
+
+ {label}
+
+ );
+ })}
+
+
+ );
+ }
+}
+
+export default withStyles(styles)(StepperError);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Steppers/VerticalStepper.js b/front/odiparpack/app/containers/UiElements/demos/Steppers/VerticalStepper.js
new file mode 100644
index 0000000..5a2314b
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Steppers/VerticalStepper.js
@@ -0,0 +1,120 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Stepper, Step, StepLabel, StepContent, Button, Paper, Typography } from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ width: '90%',
+ },
+ button: {
+ marginTop: theme.spacing(1),
+ marginRight: theme.spacing(1),
+ },
+ actionsContainer: {
+ marginBottom: theme.spacing(2),
+ },
+ resetContainer: {
+ padding: theme.spacing(3),
+ },
+});
+
+function getSteps() {
+ return ['Select campaign settings', 'Create an ad group', 'Create an ad'];
+}
+
+function getStepContent(step) {
+ switch (step) {
+ case 0:
+ return `For each ad campaign that you create, you can control how much
+ you're willing to spend on clicks and conversions, which networks
+ and geographical locations you want your ads to show on, and more.`;
+ case 1:
+ return 'An ad group contains one or more ads which target a shared set of keywords.';
+ case 2:
+ return `Try out different ad text to see what brings in the most customers,
+ and learn how to enhance your ads using features like ad extensions.
+ If you run into any problems with your ads, find out how to tell if
+ they're running and how to resolve approval issues.`;
+ default:
+ return 'Unknown step';
+ }
+}
+
+class VerticalStepper extends React.Component {
+ state = {
+ activeStep: 0,
+ };
+
+ handleNext = () => {
+ this.setState({
+ activeStep: this.state.activeStep + 1,
+ });
+ };
+
+ handleBack = () => {
+ this.setState({
+ activeStep: this.state.activeStep - 1,
+ });
+ };
+
+ handleReset = () => {
+ this.setState({
+ activeStep: 0,
+ });
+ };
+
+ render() {
+ const { classes } = this.props;
+ const steps = getSteps();
+ const { activeStep } = this.state;
+
+ return (
+
+ {activeStep === steps.length ? (
+
+
+
+ All steps completed - you"re finished
+
+
+
+ ) : (
+
+ {getStepContent(activeStep)}
+
+ )}
+
+
+ {this.isStepOptional(activeStep) && (
+
+ )}
+
+
+
+
+ {steps.map((label, index) => (
+
+ {label}
+
+ {getStepContent(index)}
+
+
+ ))}
+
+ {activeStep === steps.length && (
+
+ All steps completed - you"re finished
+
+
+ )}
+
+ );
+ }
+}
+
+VerticalStepper.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(VerticalStepper);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Tabs/BottomNav.js b/front/odiparpack/app/containers/UiElements/demos/Tabs/BottomNav.js
new file mode 100644
index 0000000..f3aa033
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Tabs/BottomNav.js
@@ -0,0 +1,82 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import RestoreIcon from '@material-ui/icons/Restore';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import LocationOnIcon from '@material-ui/icons/LocationOn';
+
+import { Typography, Grid, BottomNavigation, BottomNavigationAction, Icon } from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ width: 'auto',
+ },
+ divider: {
+ display: 'block',
+ margin: `${theme.spacing(3)}px 0`,
+ }
+});
+
+class BottomNav extends React.Component {
+ state = {
+ value: 0,
+ value2: 'recents',
+ };
+
+ handleChange = (event, value) => {
+ this.setState({ value });
+ };
+
+ handleChange2 = (event, value2) => {
+ this.setState({ value2 });
+ };
+
+
+ render() {
+ const { classes } = this.props;
+ const { value, value2 } = this.state;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ folder} />
+
+
+
+
+
+ powered by Material-UI
+
+ );
+ }
+}
+
+CustomTabs.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CustomTabs);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Tabs/DisabledTab.js b/front/odiparpack/app/containers/UiElements/demos/Tabs/DisabledTab.js
new file mode 100644
index 0000000..17808a1
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Tabs/DisabledTab.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Paper, Tabs, Tab } from '@material-ui/core';
+
+class DisabledTab extends React.Component {
+ state = {
+ value: 2,
+ };
+
+ handleChange = (event, value) => {
+ this.setState({ value });
+ };
+
+ render() {
+ return (
+
+
+
+
+
+
+ Item One
+ Item Two
+ Item Three
+
+
+ );
+ }
+}
+
+FixedTabs.propTypes = {
+ classes: PropTypes.object.isRequired,
+ theme: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles, { withTheme: true })(FixedTabs);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Tabs/IconTabs.js b/front/odiparpack/app/containers/UiElements/demos/Tabs/IconTabs.js
new file mode 100644
index 0000000..ff97d16
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Tabs/IconTabs.js
@@ -0,0 +1,61 @@
+import React from 'react';
+import PhoneIcon from '@material-ui/icons/Phone';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import PersonPinIcon from '@material-ui/icons/PersonPin';
+import { Paper, Grid, Tabs, Tab, Typography } from '@material-ui/core';
+
+export default class IconTabs extends React.Component {
+ state = {
+ value: 0,
+ value2: 0,
+ };
+
+ handleChange = (event, value) => {
+ this.setState({ value });
+ };
+
+ handleChange2 = (event, value2) => {
+ this.setState({ value2 });
+ };
+
+ render() {
+ return (
+
+
+
+ Without Text
+
+
+
+
+
+
+ With Text
+
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/front/odiparpack/app/containers/UiElements/demos/Tabs/LongTextTabs.js b/front/odiparpack/app/containers/UiElements/demos/Tabs/LongTextTabs.js
new file mode 100644
index 0000000..724ac03
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Tabs/LongTextTabs.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { AppBar, Tabs, Tab, Typography } from '@material-ui/core';
+
+function TabContainer(props) {
+ return (
+
+
+
+
+
+ {value === 'one' && Item One }
+ {value === 'two' && Item Two }
+ {value === 'three' && Item Three }
+
+ );
+ }
+}
+
+LongTextTabs.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(LongTextTabs);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Tabs/ScrollIconTabs.js b/front/odiparpack/app/containers/UiElements/demos/Tabs/ScrollIconTabs.js
new file mode 100644
index 0000000..98f52d2
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Tabs/ScrollIconTabs.js
@@ -0,0 +1,82 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import PhoneIcon from '@material-ui/icons/Phone';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import PersonPinIcon from '@material-ui/icons/PersonPin';
+import HelpIcon from '@material-ui/icons/Help';
+import ShoppingBasket from '@material-ui/icons/ShoppingBasket';
+import ThumbDown from '@material-ui/icons/ThumbDown';
+import ThumbUp from '@material-ui/icons/ThumbUp';
+import { AppBar, Tabs, Tab, Typography } from '@material-ui/core';
+
+function TabContainer(props) {
+ return (
+
+
+
+
+
+ {value === 0 && Item One }
+ {value === 1 && Item Two }
+ {value === 2 && Item Three }
+ {value === 3 && Item Four }
+ {value === 4 && Item Five }
+ {value === 5 && Item Six }
+ {value === 6 && Item Seven }
+
+ );
+ }
+}
+
+ScrollIconTabs.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ScrollIconTabs);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Tabs/ScrollTabs.js b/front/odiparpack/app/containers/UiElements/demos/Tabs/ScrollTabs.js
new file mode 100644
index 0000000..f7f9477
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Tabs/ScrollTabs.js
@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { AppBar, Tabs, Tab, Typography } from '@material-ui/core';
+
+function TabContainer(props) {
+ return (
+
+
+
+
+
+ {value === 0 && Item One }
+ {value === 1 && Item Two }
+ {value === 2 && Item Three }
+ {value === 3 && Item Four }
+ {value === 4 && Item Five }
+ {value === 5 && Item Six }
+ {value === 6 && Item Seven }
+
+ );
+ }
+}
+
+ScrollTabs.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ScrollTabs);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Tabs/SimpleTabs.js b/front/odiparpack/app/containers/UiElements/demos/Tabs/SimpleTabs.js
new file mode 100644
index 0000000..fd791cc
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Tabs/SimpleTabs.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { AppBar, Tabs, Tab, Typography } from '@material-ui/core';
+
+function TabContainer(props) {
+ return (
+
+
+
+
+
+ {value === 0 && Item One }
+ {value === 1 && Item Two }
+ {value === 2 && Item Three }
+
+ );
+ }
+}
+
+SimpleTabs.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(SimpleTabs);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Tags/ArrayTags.js b/front/odiparpack/app/containers/UiElements/demos/Tags/ArrayTags.js
new file mode 100644
index 0000000..921a668
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Tags/ArrayTags.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import TagFacesIcon from '@material-ui/icons/TagFaces';
+
+import { Avatar, Chip, Paper } from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ display: 'flex',
+ justifyContent: 'center',
+ flexWrap: 'wrap',
+ padding: theme.spacing(0.5),
+ },
+ chip: {
+ margin: theme.spacing(0.5),
+ },
+});
+
+class ArrayTags extends React.Component {
+ state = {
+ chipData: [
+ { key: 0, label: 'Angular' },
+ { key: 1, label: 'jQuery' },
+ { key: 2, label: 'Polymer' },
+ { key: 3, label: 'React' },
+ { key: 4, label: 'Vue.js' },
+ ],
+ };
+
+ handleDelete = data => () => {
+ if (data.label === 'React') {
+ alert('Why would you want to delete React?! :)'); // eslint-disable-line no-alert
+ return;
+ }
+
+ const chipData = [...this.state.chipData];
+ const chipToDelete = chipData.indexOf(data);
+ chipData.splice(chipToDelete, 1);
+ this.setState({ chipData });
+ };
+
+ render() {
+ const { classes } = this.props;
+
+ return (
+
+ MB}
+ label="Clickable Tag"
+ onClick={handleClick}
+ className={classes.chip}
+ color="primary"
+ />
+
+
+ );
+}
+
+BasicTags.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(BasicTags);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Typography/AlignTypo.js b/front/odiparpack/app/containers/UiElements/demos/Typography/AlignTypo.js
new file mode 100644
index 0000000..38088a9
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Typography/AlignTypo.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Type from 'ba-styles/Typography.scss';
+import { Typography, Divider } from '@material-ui/core';
+
+const styles = theme => ({
+ divider: {
+ display: 'block',
+ margin: `${theme.spacing(3)}px 0`,
+ }
+});
+
+class AlignTypo extends React.Component {
+ render() {
+ const { classes } = this.props;
+ return (
+
+
+ Align center: Nullam in
+ tortor
+ ligula
+
+
+ Align Left
+
+
+ Align Right
+
+ Justify Align
+
+ Vestibulum faucibus eget erat eget pretium. Donec commodo convallis ligula, eget suscipit orci. Suspendisse potenti.
+ Nulla eget lobortis lacus. Aliquam venenatis magna et odio lobortis maximus. Nullam in tortor ligula. Proin maximus risus nunc, eu aliquam nibh tempus a. Interdum et malesuada fames ac ante ipsum primis in faucibus.
+
+
+ );
+ }
+}
+
+AlignTypo.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(AlignTypo);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Typography/ColouredTypo.js b/front/odiparpack/app/containers/UiElements/demos/Typography/ColouredTypo.js
new file mode 100644
index 0000000..b7b1516
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Typography/ColouredTypo.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import Type from 'ba-styles/Typography.scss';
+import { Typography } from '@material-ui/core';
+
+class ColouredTypo extends React.Component {
+ render() {
+ return (
+
+
+ Ut sed eros finibus
+
+
+ Nulla eget lobortis lacus. Aliquam venenatis magna et odio lobortis maximus.
+
+
+ Aliquam nec ex aliquet
+
+
+ Aenean facilisis vitae purus facilisis semper
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed urna in justo euismod condimentum.
+
+
+ Vivamus et luctus mauris. Maecenas nisl libero, tincidunt id odio id, feugiat vulputate quam.
+
+
+ Curabitur egestas consequat lorem, vel fermentum augue porta id.
+
+
+ );
+ }
+}
+
+export default ColouredTypo;
diff --git a/front/odiparpack/app/containers/UiElements/demos/Typography/GeneralTypo.js b/front/odiparpack/app/containers/UiElements/demos/Typography/GeneralTypo.js
new file mode 100644
index 0000000..6a1079f
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Typography/GeneralTypo.js
@@ -0,0 +1,139 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import Type from 'ba-styles/Typography.scss';
+import { Typography, Divider } from '@material-ui/core';
+
+const background = {
+ width: '100%',
+ maxWidth: 500,
+ background:
+ 'transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAYAAAA4GpVBAAAMKGlDQ1BJQ0MgUHJvZmlsZQAASMetl3dUU8kex+eWJCQktEAoUkJvovQqNbQIAlIFGyEJJJQYEoKKHRUVWAsqFqzoqoiiawFkURELtkWx9wUVFGVdLNhQeZME0PW998c75805c+dzfvc3v/n+7p2ZewcA9RiOWJyNagCQI8qTxIYFMSckpzBJHYACMKAFrIANhysVB8bERAJYhtp/lve3ACJvrzvIY4H/rWjy+FIuAEgM5DSelJsD+QgAuDtXLMkDgNAD7ebT88SQiVAl0JZAgZAt5JyhZE85pyk5UuETH8uCnAqACpXDkWQAoCbXxcznZsA4aqWQHUU8oQhyI2Q/roDDg/wF8sicnGmQ1W0g26T9ECfjHzHThmNyOBnDrMxFUVSChVJxNmcm+H+XnGzZ0BjmsFIFkvBYec7y55Y1LULOVMjnRWlR0ZC1IN8Q8hT+cu4SyMITBv0/cqUs+MwAAwCUyuMER0A2hGwmy0oIHGQ/jkTRF/qjKQWC+CRlfFQkmRY7GB8tEGVHRQ7GKRXw2UNcyZeGxA35pAtD2ZDhO0TrhXns+MGY5/OFiVGQ1SA/kGbFRQz2fVEgYEUNjyWLlWuG7xwDOdKhXDCLdElorNIfcxcI2VGD9sg8QXy4si82hctRaNCDnMmXTogc0sPjB4co9WCFfFHCoE6sTJwXFDvov1OcHTPojzXys8PkdjPIrdL8uKG+vXlwsilzwUEmZ2yMclxcW5wXE6/UhjNBJGCBYMAEMljTwDSQCYStPXU9YOhOKOAACcgAfOAwaBnqkaS4I4LXOFAA/oLEB9LhfkGKu3yQD+1fh63KqwNIV9zNV/TIAl2Qc3AD3A/3wSPhNQBWZ9wT9xrqx1QfGpUYQgwmhhNDibZThYWSn+IyARdmkA2rBETAlg+zkmsQDWn/HofQRWgjPCbcJLQT7oJE8BT6Cf8tw+/RhMO2caAdRg0dzC7tx+xwK6jaDQ/CfaF+qB1n4AbAAXeFmQTi/jA3N2j9/tT+k3bZkGqyIxkl65IDyDY/+6nZqbkN95Hn9qNOpa604UxYw3d+Ho31Q2482Eb87IktxQ5jLdgp7ALWiNUBJnYSq8cuY8flPDw3nirmxtBosQo9WTCOcMjHsdqx2/HLT2NzBseXKN4/yOPPyJMvHNY08UyJMEOQxwyEuzWfyRZxR41kOjs6eQAg3/uVW8tbhmJPRxgXv9sK3wHgyxsYGGj8bouEa/LIYgAoXd9t1ifgctYF4HwJVybJV9pw+YUAvyrqcKXoA2O4d9nAjJyBO/ABASAEjAXRIB4kgynwOQtADlQ9HcwGC0ARKAErwVqwEWwFO8AesB8cAnWgEZwC58AlcBXcBPfhXOkEL0EveA/6EQQhITSEjugjJoglYo84I56IHxKCRCKxSDKSimQgIkSGzEYWIiVIGbIR2Y5UIb8hx5BTyAWkDbmLdCDdyBvkM4qhVFQbNUKt0NGoJxqIRqDx6GQ0A81FC9BF6HJ0PVqJ7kNr0VPoJfQm2o6+RPswgKliDMwUc8A8MRYWjaVg6ZgEm4sVY+VYJVaDNcA3fR1rx3qwTzgRp+NM3AHO13A8AefiufhcvBTfiO/Ba/Ez+HW8A+/FvxFoBEOCPcGbwCZMIGQQphOKCOWEXYSjhLNwTXUS3hOJRAbRmugB12oyMZM4i1hK3Ew8QGwithGfEPtIJJI+yZ7kS4omcUh5pCLSBtI+0knSNVIn6aOKqoqJirNKqEqKikilUKVcZa/KCZVrKs9U+skaZEuyNzmazCPPJK8g7yQ3kK+QO8n9FE2KNcWXEk/JpCygrKfUUM5SHlDeqqqqmql6qY5XFarOV12velD1vGqH6ieqFtWOyqJOosqoy6m7qU3Uu9S3NBrNihZAS6Hl0ZbTqminaY9oH9XoaqPU2Go8tXlqFWq1atfUXqmT1S3VA9WnqBeol6sfVr+i3qNB1rDSYGlwNOZqVGgc07it0adJ13TSjNbM0SzV3Kt5QfO5FknLSitEi6e1SGuH1mmtJ3SMbk5n0bn0hfSd9LP0Tm2itrU2WztTu0R7v3ardq+Olo6rTqLODJ0KneM67QyMYcVgM7IZKxiHGLcYn3WNdAN1+brLdGt0r+l+0BuhF6DH1yvWO6B3U++zPlM/RD9Lf5V+nf5DA9zAzmC8wXSDLQZnDXpGaI/wGcEdUTzi0Ih7hqihnWGs4SzDHYaXDfuMjI3CjMRGG4xOG/UYM4wDjDON1xifMO42oZv4mQhN1picNHnB1GEGMrOZ65lnmL2mhqbhpjLT7aatpv1m1mYJZoVmB8wemlPMPc3TzdeYN5v3WphYjLOYbVFtcc+SbOlpKbBcZ9li+cHK2irJaolVndVzaz1rtnWBdbX1Axuajb9Nrk2lzQ1boq2nbZbtZturdqidm53ArsLuij1q724vtN9s3zaSMNJrpGhk5cjbDlSHQId8h2qHjlGMUZGjCkfVjXo12mJ0yuhVo1tGf3N0c8x23Ol430nLaaxToVOD0xtnO2euc4XzDReaS6jLPJd6l9eu9q581y2ud9zobuPclrg1u31193CXuNe4d3tYeKR6bPK47antGeNZ6nnei+AV5DXPq9Hrk7e7d573Ie+/fRx8snz2+jwfYz2GP2bnmCe+Zr4c3+2+7X5Mv1S/bX7t/qb+HP9K/8cB5gG8gF0BzwJtAzMD9wW+CnIMkgQdDfrA8mbNYTUFY8FhwcXBrSFaIQkhG0MehZqFZoRWh/aGuYXNCmsKJ4RHhK8Kv802YnPZVezesR5j54w9E0GNiIvYGPE40i5SEtkwDh03dtzqcQ+iLKNEUXXRIJodvTr6YYx1TG7M7+OJ42PGV4zvinWKnR3bEkePmxq3N+59fFD8ivj7CTYJsoTmRPXESYlViR+SgpPKktonjJ4wZ8KlZINkYXJ9CiklMWVXSt/EkIlrJ3ZOcptUNOnWZOvJMyZfmGIwJXvK8anqUzlTD6cSUpNS96Z+4URzKjl9aey0TWm9XBZ3HfclL4C3htfN9+WX8Z+l+6aXpT/P8M1YndEt8BeUC3qELOFG4evM8MytmR+yorN2Zw1kJ2UfyFHJSc05JtISZYnOTDOeNmNam9heXCRuz/XOXZvbK4mQ7JIi0snS+jxt+JN9WWYjWyzryPfLr8j/OD1x+uEZmjNEMy7PtJu5bOazgtCCX2fhs7izmmebzl4wu2NO4Jztc5G5aXOb55nPWzSvc37Y/D0LKAuyFvxR6FhYVvhuYdLChkVGi+YverI4bHF1kVqRpOj2Ep8lW5fiS4VLW5e5LNuw7Fsxr/hiiWNJecmXUm7pxV+cfln/y8Dy9OWtK9xXbFlJXClaeWuV/6o9ZZplBWVPVo9bXbuGuaZ4zbu1U9deKHct37qOsk62rn195Pr6DRYbVm74slGw8WZFUMWBTYablm36sJm3+dqWgC01W422lmz9vE247c72sO21lVaV5TuIO/J3dO1M3Nnyq+evVbsMdpXs+rpbtLt9T+yeM1UeVVV7DfeuqEarZdXd+ybtu7o/eH99jUPN9gOMAyUHwUHZwRe/pf5261DEoebDnodrjlge2XSUfrS4FqmdWdtbJ6hrr0+ubzs29lhzg0/D0d9H/b670bSx4rjO8RUnKCcWnRg4WXCyr0nc1HMq49ST5qnN909POH3jzPgzrWcjzp4/F3rudEtgy8nzvucbL3hfOHbR82LdJfdLtZfdLh/9w+2Po63urbVXPK7UX/W62tA2pu3ENf9rp64HXz93g33j0s2om223Em7duT3pdvsd3p3nd7Pvvr6Xf6///vwHhAfFDzUelj8yfFT5p+2fB9rd2493BHdcfhz3+P4T7pOXT6VPv3Qu6qJ1lT8zeVb13Pl5Y3do99UXE190vhS/7O8p+kvzr02vbF4d+Tvg78u9E3o7X0teD7wpfav/dvc713fNfTF9j97nvO//UPxR/+OeT56fWj4nfX7WP/0L6cv6r7ZfG75FfHswkDMwIOZIOIpfAQxWND0dgDe7AaAlA0C/Cv8fJirPZoqCKM+TCgL/jZXnN0VxB6AGNvLfcFYTAAdhtZoPYwcAIP8djw8AqIvLcB0s0nQXZ2UsKjzhED4ODLw1AoDUAMBXycBA/+aBga87odi7ADTlKs+E8iI/g25zldM1Rvb2n89m/wJHBnEU5n9PrQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAAAd0SU1FB+EKBRI2IMFyTLcAAAAaSURBVAjXY/h++dF/hl+/fv1nYmBgYMBJAAAKEQellAoQBwAAAABJRU5ErkJggg==)', // eslint-disable-line max-len
+};
+
+const styles = theme => ({
+ divider: {
+ display: 'block',
+ margin: `${theme.spacing(3)}px 0`,
+ }
+});
+
+class GeneralTypo extends React.Component {
+ render() {
+ const { classes } = this.props;
+ return (
+
+
+ Lorem ipsum dolor
+ {' '}
+ sit amet
+
+
+ Duis tristique metus magna, lobortis aliquam risus euismod sit amet.
+
+
+ Nullam in
+ tortor
+ ligula
+
+
+ Bolder
+
+ Bold
+
+ Medium
+
+
+ Regular + + Light + + Lighter + +
+
+ Duis tristique metus magna, lobortis aliquam risus euismod sit amet. Suspendisse porttitor velit nisl, feugiat tincidunt nisl mattis ut. Nulla lobortis nunc vitae nisi semper semper.
+ {' '}
+
+ Nulla eget lobortis lacus. Aliquam venenatis magna et odio lobortis maximus. Nullam in tortor ligula. Proin maximus risus nunc, eu aliquam nibh tempus a. Interdum et malesuada fames ac ante ipsum primis in faucibus. +
+
+ Vestibulum nec mi
+ {' '}
+ suscipit
+
+
+ Bolder
+
+ Bold
+
+ Medium
+
+ Regular
+
+ Light
+
+ Lighter
+
+
+
+ Vestibulum faucibus eget erat eget pretium. Donec commodo convallis ligula, eget suscipit orci. Suspendisse potenti.
+
+ Curabitur egestas consequat lorem, vel fermentum augue porta id. Aliquam lobortis magna neque, gravida consequat velit venenatis at. Duis sed augue leo. Phasellus ante massa, aliquam non ante at, suscipit ornare ipsum. Quisque a consequat ante, at volutpat enim. +
+
+ Numbers
+ {' '}
+looks great! 1234
+ 56
+7890
+
+
+ Let your Creativity Flow
+ {' '}
+
+123
+ $
+
+
+
+ Numerics
+ {' '}
+
+123
+ 00
+
+
+
+ Body 2
+
+
+ Body 1
+
+
+ Caption
+
+
+ {`
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+ sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ `}
+
+
+ Button
+
+
+ );
+ }
+}
+
+GeneralTypo.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(GeneralTypo);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Typography/Heading.js b/front/odiparpack/app/containers/UiElements/demos/Typography/Heading.js
new file mode 100644
index 0000000..cf97396
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Typography/Heading.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Typography } from '@material-ui/core';
+
+class Heading extends React.Component {
+ render() {
+ return (
+ + Regular + + Light + + Lighter + +
+ Nulla eget lobortis lacus. Aliquam venenatis magna et odio lobortis maximus. Nullam in tortor ligula. Proin maximus risus nunc, eu aliquam nibh tempus a. Interdum et malesuada fames ac ante ipsum primis in faucibus. +
+ Curabitur egestas consequat lorem, vel fermentum augue porta id. Aliquam lobortis magna neque, gravida consequat velit venenatis at. Duis sed augue leo. Phasellus ante massa, aliquam non ante at, suscipit ornare ipsum. Quisque a consequat ante, at volutpat enim. +
+ {/*
+ Disp 4
+
+
+ Display 3
+
+
+ Display 2
+
+
+ Display 1
+
+
+ Headline
+
+
+ Title
+
+
+ Subheading
+
+
+ {`
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+ sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ `}
+ */}
+
+ {`h4 Título`}
+
+
+
+ {`h5 Subtítulos`}
+
+
+
+ {`h6 Título de tablas`}
+
+
+
+ {` Cuerpo de texto `}
+
+
+
+ );
+ }
+}
+
+export default Heading;
diff --git a/front/odiparpack/app/containers/UiElements/demos/Typography/ListTypo.js b/front/odiparpack/app/containers/UiElements/demos/Typography/ListTypo.js
new file mode 100644
index 0000000..2f76ff1
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Typography/ListTypo.js
@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Type from 'ba-styles/Typography.scss';
+import { Typography, Divider } from '@material-ui/core';
+
+const styles = theme => ({
+ divider: {
+ display: 'block',
+ margin: `${theme.spacing(3)}px 0`,
+ }
+});
+
+class ListTypo extends React.Component {
+ render() {
+ const { classes } = this.props;
+ return (
+
+ Unordered List
+ Ordered List
+
+ );
+ }
+}
+
+ListTypo.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ListTypo);
diff --git a/front/odiparpack/app/containers/UiElements/demos/Typography/QuotesDemo.js b/front/odiparpack/app/containers/UiElements/demos/Typography/QuotesDemo.js
new file mode 100644
index 0000000..afd9197
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/Typography/QuotesDemo.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { Quote } from 'ba-components';
+
+const styles = theme => ({
+ divider: {
+ display: 'block',
+ margin: `${theme.spacing(3)}px 0`,
+ }
+});
+
+class QuotesDemo extends React.Component {
+ render() {
+ const { classes } = this.props;
+ return (
+
+
+ -
+
- Lorem ipsum dolor sit amet +
- Consectetur adipiscing elit +
- Integer molestie lorem at massa +
- Facilisis in pretium nisl aliquet +
-
+Nulla volutpat aliquam velit
+
-
+
- Phasellus iaculis neque +
- Purus sodales ultricies +
- Vestibulum laoreet porttitor sem +
- Ac tristique libero volutpat at +
+ - Faucibus porta lacus fringilla vel +
- Aenean sit amet erat nunc +
- Eget porttitor lorem +
+
+ -
+
- Lorem ipsum dolor sit amet +
- Consectetur adipiscing elit +
- Integer molestie lorem at massa +
- Facilisis in pretium nisl aliquet +
-
+Nulla volutpat aliquam velit
+
-
+
- Phasellus iaculis neque +
- Purus sodales ultricies +
- Vestibulum laoreet porttitor sem +
- Ac tristique libero volutpat at +
+ - Faucibus porta lacus fringilla vel +
- Aenean sit amet erat nunc +
- Eget porttitor lorem +
+
+ );
+ }
+}
+
+QuotesDemo.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(QuotesDemo);
diff --git a/front/odiparpack/app/containers/UiElements/demos/index.js b/front/odiparpack/app/containers/UiElements/demos/index.js
new file mode 100644
index 0000000..311d50e
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/demos/index.js
@@ -0,0 +1,117 @@
+// Badges
+export CommonBadges from './Badges/CommonBadges';
+export VariantBadges from './Badges/VariantBadges';
+// Avatars
+export AvatarsDemo from './Avatars/AvatarsDemo';
+export AvatarsPractice from './Avatars/AvatarsPractice';
+// Accordion
+export SimpleAccordion from './Accordion/SimpleAccordion';
+export AdvancedAccordion from './Accordion/AdvancedAccordion';
+export ControlledAccordion from './Accordion/ControlledAccordion';
+// List
+export ListBasic from './List/ListBasic';
+export ListControl from './List/ListControl';
+export ListMenu from './List/ListMenu';
+export ListInteractive from './List/ListInteractive';
+export PinnedList from './List/PinnedList';
+// Popover & Tooltip
+export SimpleTooltips from './PopoverTooltip/SimpleTooltips';
+export PositionedTooltips from './PopoverTooltip/PositionedTooltips';
+export SimplePopover from './PopoverTooltip/SimplePopover';
+export PopoverPlayground from './PopoverTooltip/PopoverPlayground';
+export DelayTooltips from './PopoverTooltip/DelayTooltips';
+export TransitionsTooltips from './PopoverTooltip/TransitionsTooltips';
+export TriggersTooltips from './PopoverTooltip/TriggersTooltips';
+export CustomizedTooltips from './PopoverTooltip/CustomizedTooltips';
+// Notification
+export SimpleNotif from './Notification/SimpleNotif';
+export StyledNotif from './Notification/StyledNotif';
+export TransitionNotif from './Notification/TransitionNotif';
+export MobileNotif from './Notification/MobileNotif';
+// Typography
+export GeneralTypo from './Typography/GeneralTypo';
+export Heading from './Typography/Heading';
+export ListTypo from './Typography/ListTypo';
+export ColouredTypo from './Typography/ColouredTypo';
+export QuotesDemo from './Typography/QuotesDemo';
+export AlignTypo from './Typography/AlignTypo';
+// Tabs
+export SimpleTabs from './Tabs/SimpleTabs';
+export LongTextTabs from './Tabs/LongTextTabs';
+export FixedTabs from './Tabs/FixedTabs';
+export CenteredTabs from './Tabs/CenteredTabs';
+export IconTabs from './Tabs/IconTabs';
+export ScrollTabs from './Tabs/ScrollTabs';
+export ScrollIconTabs from './Tabs/ScrollIconTabs';
+export DisabledTab from './Tabs/DisabledTab';
+export CustomTabs from './Tabs/CustomTabs';
+export BottomNav from './Tabs/BottomNav';
+// Card
+export StandardCards from './Cards/StandardCards';
+export ControlCards from './Cards/ControlCards';
+export PaperSheet from './Cards/PaperSheet';
+export SocialCards from './Cards/SocialCards';
+export EcommerceCards from './Cards/EcommerceCards';
+// Image Grid
+export ImageGridList from './ImageGrid/ImageGridList';
+export TitlebarGridList from './ImageGrid/TitlebarGridList';
+export AdvancedGridList from './ImageGrid/AdvancedGridList';
+export SingleLineGridList from './ImageGrid/SingleLineGridList';
+// Progress
+export CircularIndeterminate from './Progress/CircularIndeterminate';
+export CircularIntegration from './Progress/CircularIntegration';
+export CircularDeterminate from './Progress/CircularDeterminate';
+export CircularStatic from './Progress/CircularStatic';
+export LinearIndeterminate from './Progress/LinearIndeterminate';
+export LinearDeterminate from './Progress/LinearDeterminate';
+export LinearBuffer from './Progress/LinearBuffer';
+export LinearQuery from './Progress/LinearQuery';
+export LinearStatic from './Progress/LinearStatic';
+export ProgressDelay from './Progress/ProgressDelay';
+// Dialog
+export ModalDemo from './DialogModal/ModalDemo';
+export AlertDialog from './DialogModal/AlertDialog';
+export SelectDialog from './DialogModal/SelectDialog';
+export SelectRadioDialog from './DialogModal/SelectRadioDialog';
+export FormDialog from './DialogModal/FormDialog';
+export FullScreenDialog from './DialogModal/FullScreenDialog';
+export ImagePopup from './DialogModal/ImagePopup';
+export ScrollDialog from './DialogModal/ScrollDialog';
+// Steppers
+export HorizontalLinear from './Steppers/HorizontalLinear';
+export HorizontalNonLinear from './Steppers/HorizontalNonLinear';
+export StepperError from './Steppers/StepperError';
+export VerticalStepper from './Steppers/VerticalStepper';
+export MobileSteppers from './Steppers/MobileSteppers';
+export StepperCarousel from './Steppers/StepperCarousel';
+// Menu and Drawer
+export TemporaryDrawer from './DrawerMenu/TemporaryDrawer';
+export PermanentDrawer from './DrawerMenu/PermanentDrawer';
+export PersistentDrawer from './DrawerMenu/PersistentDrawer';
+export SwipeDrawer from './DrawerMenu/SwipeDrawer';
+export MiniDrawer from './DrawerMenu/MiniDrawer';
+export BasicMenu from './DrawerMenu/BasicMenu';
+export DropdownMenu from './DrawerMenu/DropdownMenu';
+export MenuTransition from './DrawerMenu/MenuTransition';
+export StyledMenu from './DrawerMenu/StyledMenu';
+// Pagination
+export TbPagination from './Pagination/TbPagination';
+export TbPaginationCustom from './Pagination/TbPaginationCustom';
+export GeneralPagination from './Pagination/GeneralPagination';
+// Breadcrumb
+export ClassicBreadcrumbs from './Breadcrumbs/ClassicBreadcrumbs';
+export PaperBreadcrumbs from './Breadcrumbs/PaperBreadcrumbs';
+// Slider Carousel
+export SingleCarousel from './SliderCaraousel/SingleCarousel';
+export MultipleCarousel from './SliderCaraousel/MultipleCarousel';
+export AutoplayCarousel from './SliderCaraousel/AutoplayCarousel';
+export ThumbnailCarousel from './SliderCaraousel/ThumbnailCarousel';
+export VerticalCarousel from './SliderCaraousel/VerticalCarousel';
+export CustomCarousel from './SliderCaraousel/CustomCarousel';
+export AnimatedSlider from './SliderCaraousel/AnimatedSlider';
+// Tags
+export BasicTags from './Tags/BasicTags';
+export ArrayTags from './Tags/ArrayTags';
+// Dividers
+export CommonDividers from './Dividers/CommonDividers';
+export SpecialDividers from './Dividers/SpecialDividers';
diff --git a/front/odiparpack/app/containers/pageListAsync.js b/front/odiparpack/app/containers/pageListAsync.js
new file mode 100644
index 0000000..feff750
--- /dev/null
+++ b/front/odiparpack/app/containers/pageListAsync.js
@@ -0,0 +1,324 @@
+import Loadable from 'react-loadable';
+import Loading from 'ba-components/Loading';
+
+// Dashboard
+export const DashboardV1 = Loadable({
+ loader: () => import('./Dashboard/Dashboard'),
+ loading: Loading,
+});
+export const DashboardV2 = Loadable({
+ loader: () => import('./Dashboard/DashboardV2'),
+ loading: Loading,
+});
+
+// Layouts
+export const AppLayout = Loadable({
+ loader: () => import('./Layouts/AppLayout'),
+ loading: Loading,
+});
+export const Responsive = Loadable({
+ loader: () => import('./Layouts/Responsive'),
+ loading: Loading,
+});
+export const Grid = Loadable({
+ loader: () => import('./Layouts/Grid'),
+ loading: Loading,
+});
+
+// Tables
+export const SimpleTable = Loadable({
+ loader: () => import('./Tables/BasicTable'),
+ loading: Loading,
+});
+export const AdvancedTable = Loadable({
+ loader: () => import('./Tables/AdvancedTable'),
+ loading: Loading,
+});
+export const TreeTable = Loadable({
+ loader: () => import('./Tables/TreeTable'),
+ loading: Loading,
+});
+export const CrudTable = Loadable({
+ loader: () => import('./Tables/CrudTable'),
+ loading: Loading,
+});
+export const TablePlayground = Loadable({
+ loader: () => import('./Tables/TablePlayground'),
+ loading: Loading,
+});
+
+// Forms
+export const ReduxForm = Loadable({
+ loader: () => import('./Forms/ReduxForm'),
+ loading: Loading,
+});
+export const DateTimePicker = Loadable({
+ loader: () => import('./Forms/DateTimePicker'),
+ loading: Loading,
+});
+export const CheckboxRadio = Loadable({
+ loader: () => import('./Forms/CheckboxRadio'),
+ loading: Loading,
+});
+export const Switches = Loadable({
+ loader: () => import('./Forms/Switches'),
+ loading: Loading,
+});
+export const Selectbox = Loadable({
+ loader: () => import('./Forms/Selectbox'),
+ loading: Loading,
+});
+export const Rating = Loadable({
+ loader: () => import('./Forms/Rating'),
+ loading: Loading,
+});
+export const SliderRange = Loadable({
+ loader: () => import('./Forms/SliderRange'),
+ loading: Loading,
+});
+export const Buttons = Loadable({
+ loader: () => import('./Forms/Buttons'),
+ loading: Loading,
+});
+export const Textbox = Loadable({
+ loader: () => import('./Forms/Textbox'),
+ loading: Loading,
+});
+export const Autocomplete = Loadable({
+ loader: () => import('./Forms/Autocomplete'),
+ loading: Loading,
+});
+export const TextEditor = Loadable({
+ loader: () => import('./Forms/TextEditor'),
+ loading: Loading,
+});
+export const Upload = Loadable({
+ loader: () => import('./Forms/Upload'),
+ loading: Loading,
+});
+
+// UI Components
+export const Badges = Loadable({
+ loader: () => import('./UiElements/Badges'),
+ loading: Loading,
+});
+export const Avatars = Loadable({
+ loader: () => import('./UiElements/Avatars'),
+ loading: Loading,
+});
+export const Accordion = Loadable({
+ loader: () => import('./UiElements/Accordion'),
+ loading: Loading,
+});
+export const List = Loadable({
+ loader: () => import('./UiElements/List'),
+ loading: Loading,
+});
+export const PopoverTooltip = Loadable({
+ loader: () => import('./UiElements/PopoverTooltip'),
+ loading: Loading,
+});
+export const Notification = Loadable({
+ loader: () => import('./UiElements/Notification'),
+ loading: Loading,
+});
+export const Typography = Loadable({
+ loader: () => import('./UiElements/Typography'),
+ loading: Loading,
+});
+export const Tabs = Loadable({
+ loader: () => import('./UiElements/Tabs'),
+ loading: Loading,
+});
+export const Cards = Loadable({
+ loader: () => import('./UiElements/Cards'),
+ loading: Loading,
+});
+export const ImageGrid = Loadable({
+ loader: () => import('./UiElements/ImageGrid'),
+ loading: Loading,
+});
+export const Progress = Loadable({
+ loader: () => import('./UiElements/Progress'),
+ loading: Loading,
+});
+export const DialogModal = Loadable({
+ loader: () => import('./UiElements/DialogModal'),
+ loading: Loading,
+});
+export const Steppers = Loadable({
+ loader: () => import('./UiElements/Steppers'),
+ loading: Loading,
+});
+export const DrawerMenu = Loadable({
+ loader: () => import('./UiElements/DrawerMenu'),
+ loading: Loading,
+});
+export const Paginations = Loadable({
+ loader: () => import('./UiElements/Paginations'),
+ loading: Loading,
+});
+export const Breadcrumbs = Loadable({
+ loader: () => import('./UiElements/Breadcrumbs'),
+ loading: Loading,
+});
+export const Icons = Loadable({
+ loader: () => import('./UiElements/Icons'),
+ loading: Loading,
+});
+export const SliderCarousel = Loadable({
+ loader: () => import('./UiElements/SliderCarousel'),
+ loading: Loading,
+});
+export const Tags = Loadable({
+ loader: () => import('./UiElements/Tags'),
+ loading: Loading,
+});
+export const Dividers = Loadable({
+ loader: () => import('./UiElements/Dividers'),
+ loading: Loading,
+});
+
+// Chart
+export const LineCharts = Loadable({
+ loader: () => import('./Charts/LineCharts'),
+ loading: Loading,
+});
+export const BarCharts = Loadable({
+ loader: () => import('./Charts/BarCharts'),
+ loading: Loading,
+});
+export const AreaCharts = Loadable({
+ loader: () => import('./Charts/AreaCharts'),
+ loading: Loading,
+});
+export const PieCharts = Loadable({
+ loader: () => import('./Charts/PieCharts'),
+ loading: Loading,
+});
+export const RadarCharts = Loadable({
+ loader: () => import('./Charts/RadarCharts'),
+ loading: Loading,
+});
+export const ScatterCharts = Loadable({
+ loader: () => import('./Charts/ScatterCharts'),
+ loading: Loading,
+});
+export const CompossedCharts = Loadable({
+ loader: () => import('./Charts/CompossedCharts'),
+ loading: Loading,
+});
+export const ResponsiveCharts = Loadable({
+ loader: () => import('./Charts/ResponsiveCharts'),
+ loading: Loading,
+});
+
+// Pages
+export const Login = Loadable({
+ loader: () => import('./Pages/Users/Login'),
+ loading: Loading,
+});
+export const Register = Loadable({
+ loader: () => import('./Pages/Users/Register'),
+ loading: Loading,
+});
+export const Profile = Loadable({
+ loader: () => import('./Pages/UserProfile'),
+ loading: Loading,
+});
+export const SocialMedia = Loadable({
+ loader: () => import('./Pages/SocialMedia'),
+ loading: Loading,
+});
+export const BlankPage = Loadable({
+ loader: () => import('./Pages/BlankPage'),
+ loading: Loading,
+});
+export const Ecommerce = Loadable({
+ loader: () => import('./Pages/Ecommerce'),
+ loading: Loading,
+});
+export const Contact = Loadable({
+ loader: () => import('./Pages/Contact'),
+ loading: Loading,
+});
+export const ResetPassword = Loadable({
+ loader: () => import('./Pages/Users/ResetPassword'),
+ loading: Loading,
+});
+export const LockScreen = Loadable({
+ loader: () => import('./Pages/Users/LockScreen'),
+ loading: Loading,
+});
+export const Chat = Loadable({
+ loader: () => import('./Pages/Chat'),
+ loading: Loading,
+});
+export const Email = Loadable({
+ loader: () => import('./Pages/Email'),
+ loading: Loading,
+});
+export const Photos = Loadable({
+ loader: () => import('./Pages/Photos'),
+ loading: Loading,
+});
+export const Calendar = Loadable({
+ loader: () => import('./Pages/Calendar'),
+ loading: Loading,
+});
+export const LoginDedicated = Loadable({
+ loader: () => import('./Pages/Standalone/LoginDedicated'),
+ loading: Loading,
+});
+
+// Maps
+export const MapMarker = Loadable({
+ loader: () => import('./Maps/MapMarker'),
+ loading: Loading,
+});
+export const MapDirection = Loadable({
+ loader: () => import('./Maps/MapDirection'),
+ loading: Loading,
+});
+export const SearchMap = Loadable({
+ loader: () => import('./Maps/SearchMap'),
+ loading: Loading,
+});
+export const TrafficIndicator = Loadable({
+ loader: () => import('./Maps/TrafficIndicator'),
+ loading: Loading,
+});
+export const StreetViewMap = Loadable({
+ loader: () => import('./Maps/StreetViewMap'),
+ loading: Loading,
+});
+
+// Other
+export const NotFound = Loadable({
+ loader: () => import('./NotFound/NotFound'),
+ loading: Loading,
+});
+export const NotFoundDedicated = Loadable({
+ loader: () => import('./Pages/Standalone/NotFoundDedicated'),
+ loading: Loading,
+});
+export const Error = Loadable({
+ loader: () => import('./Pages/Error'),
+ loading: Loading,
+});
+export const Maintenance = Loadable({
+ loader: () => import('./Pages/Maintenance'),
+ loading: Loading,
+});
+export const Parent = Loadable({
+ loader: () => import('./Parent'),
+ loading: Loading,
+});
+export const Settings = Loadable({
+ loader: () => import('./Pages/Settings'),
+ loading: Loading,
+});
+export const HelpSupport = Loadable({
+ loader: () => import('./Pages/HelpSupport'),
+ loading: Loading,
+});
--
cgit v1.2.3
+
+ +
+
+ +