this.handleClose()}
+ ContentProps={{
+ 'aria-describedby': 'message-id',
+ }}
+ message={message}
+ action={[
+ this.handleClose()}
+ >
+
+ ,
+ ]}
+ />
+ );
+ }
+}
+
+Notification.propTypes = {
+ classes: PropTypes.object.isRequired,
+ close: PropTypes.func.isRequired,
+ message: PropTypes.string.isRequired,
+};
+
+export default withStyles(styles)(Notification);
diff --git a/front/odiparpack/app/components/Pagination/Pagination.js b/front/odiparpack/app/components/Pagination/Pagination.js
new file mode 100644
index 0000000..2ac2e29
--- /dev/null
+++ b/front/odiparpack/app/components/Pagination/Pagination.js
@@ -0,0 +1,189 @@
+import React from 'react';
+import { createUltimatePagination, ITEM_TYPES } from 'react-ultimate-pagination';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import NavigationFirstPage from '@material-ui/icons/FirstPage';
+import NavigationLastPage from '@material-ui/icons/LastPage';
+import NavigationChevronLeft from '@material-ui/icons/ChevronLeft';
+import NavigationChevronRight from '@material-ui/icons/ChevronRight';
+
+import { Button, Hidden, IconButton } from '@material-ui/core';
+
+const flatButtonStyle = {
+ minWidth: 36
+};
+
+const styles = {
+ paging: {
+ marginTop: 10,
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center'
+ }
+};
+
+const Page = ({
+ value,
+ isActive,
+ onClick,
+ isDisabled
+}) => (
+
+);
+
+Page.propTypes = {
+ value: PropTypes.number.isRequired,
+ isActive: PropTypes.bool.isRequired,
+ onClick: PropTypes.func.isRequired,
+ isDisabled: PropTypes.bool.isRequired,
+};
+
+const Ellipsis = ({ onClick, isDisabled }) => (
+
+);
+
+Ellipsis.propTypes = {
+ onClick: PropTypes.func.isRequired,
+ isDisabled: PropTypes.bool.isRequired,
+};
+
+const FirstPageLink = ({ onClick, isDisabled }) => (
+
+
+
+);
+
+
+FirstPageLink.propTypes = {
+ onClick: PropTypes.func.isRequired,
+ isDisabled: PropTypes.bool.isRequired,
+};
+
+const PreviousPageLink = ({ onClick, isDisabled }) => (
+
+
+
+);
+
+PreviousPageLink.propTypes = {
+ onClick: PropTypes.func.isRequired,
+ isDisabled: PropTypes.bool.isRequired,
+};
+
+const NextPageLink = ({ onClick, isDisabled }) => (
+
+
+
+);
+
+NextPageLink.propTypes = {
+ onClick: PropTypes.func.isRequired,
+ isDisabled: PropTypes.bool.isRequired,
+};
+
+const LastPageLink = ({ onClick, isDisabled }) => (
+
+
+
+);
+
+LastPageLink.propTypes = {
+ onClick: PropTypes.func.isRequired,
+ isDisabled: PropTypes.bool.isRequired,
+};
+
+
+const itemTypeToComponent = {
+ [ITEM_TYPES.PAGE]: Page,
+ [ITEM_TYPES.ELLIPSIS]: Ellipsis,
+ [ITEM_TYPES.FIRST_PAGE_LINK]: FirstPageLink,
+ [ITEM_TYPES.PREVIOUS_PAGE_LINK]: PreviousPageLink,
+ [ITEM_TYPES.NEXT_PAGE_LINK]: NextPageLink,
+ [ITEM_TYPES.LAST_PAGE_LINK]: LastPageLink
+};
+
+const UltmPagination = createUltimatePagination({ itemTypeToComponent });
+
+class Pagination extends React.Component {
+ constructor(props) {
+ super();
+ this.state = {
+ totalPages: props.totpages
+ };
+ }
+
+ render() {
+ const hide = true;
+ const { totalPages } = this.state;
+ const {
+ classes,
+ curpage,
+ onChange,
+ onGoFirst,
+ onPrev,
+ onNext,
+ onGoLast,
+ ...rest
+ } = this.props;
+ return (
+
+
+
+
+
+
+
= totalPages} onClick={onNext} />
+ = totalPages} onClick={onGoLast} />
+
+
+
+ {title}
+
+
+ {desc}
+
+
+
+
+
+
+
+
+ {/* Profile Progress */}
+
+
+
+ Profile Strength:
+ Intermediate
+
+
+
+
+
+ )}
+ label="60% Progress"
+ className={classes.chip}
+ color="primary"
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* ----------------------------------------------------------------------*/}
+ {/* My Albums */}
+
+
+
+ {
+ imgData.map((tile, index) => {
+ if (index >= 4) {
+ return false;
+ }
+ return (
+
+ 
+
+by:
+ {tile.author}
+
+ )}
+ actionIcon={(
+
+
+
+ )}
+ />
+
+ );
+ })
+ }
+
+
+
+
+ H
+
+
+
+
+
+ J
+
+
+
+
+
+ V
+
+
+
+
+
+ H
+
+
+
+
+
+
+
+
+
+ {/* ----------------------------------------------------------------------*/}
+ {/* My Interests */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* ----------------------------------------------------------------------*/}
+
+
+ );
+ }
+}
+
+About.propTypes = {
+ classes: PropTypes.object.isRequired,
+ data: PropTypes.object.isRequired
+};
+
+export default withStyles(styles)(About);
diff --git a/front/odiparpack/app/components/Profile/Albums.js b/front/odiparpack/app/components/Profile/Albums.js
new file mode 100644
index 0000000..dbb6d19
--- /dev/null
+++ b/front/odiparpack/app/components/Profile/Albums.js
@@ -0,0 +1,152 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import imgData from 'ba-api/imgData';
+import { Grid, GridList, GridListTile, ButtonBase, Typography } from '@material-ui/core';
+import styles from './profile-jss';
+
+
+function Albums(props) {
+ const { classes } = props;
+
+ return (
+
+ );
+}
+
+Albums.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Albums);
diff --git a/front/odiparpack/app/components/Profile/Connection.js b/front/odiparpack/app/components/Profile/Connection.js
new file mode 100644
index 0000000..beef128
--- /dev/null
+++ b/front/odiparpack/app/components/Profile/Connection.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import datas from 'ba-api/connectionData';
+import { Grid } from '@material-ui/core';
+import ProfileCard from '../CardPaper/ProfileCard';
+import styles from './profile-jss';
+
+class Connection extends React.Component {
+ render() {
+ const { classes } = this.props;
+ return (
+
+ {
+ datas.map((data, index) => (
+
+
+
+ ))
+ }
+
+ );
+ }
+}
+
+Connection.propTypes = {
+ classes: PropTypes.object.isRequired
+};
+
+export default withStyles(styles)(Connection);
diff --git a/front/odiparpack/app/components/Profile/Favorites.js b/front/odiparpack/app/components/Profile/Favorites.js
new file mode 100644
index 0000000..ac6b506
--- /dev/null
+++ b/front/odiparpack/app/components/Profile/Favorites.js
@@ -0,0 +1,130 @@
+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 { Typography, Grid, Divider } from '@material-ui/core';
+import GeneralCard from '../CardPaper/GeneralCard';
+import PostCard from '../CardPaper/PostCard';
+import Quote from '../Quote/Quote';
+
+
+const styles = theme => ({
+ divider: {
+ margin: `${theme.spacing(3)}px 0`,
+ },
+});
+
+class Favorites extends React.Component {
+ render() {
+ const { classes } = this.props;
+ const bull = •;
+ return (
+
+
+
+
+
+
+ Word of the Day
+
+
+ be
+ {bull}
+nev
+ {bull}
+o
+ {bull}
+lent
+
+
+ adjective
+
+
+ well meaning and kindly.
+
+ {'"a benevolent smile"'}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+Favorites.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Favorites);
diff --git a/front/odiparpack/app/components/Profile/profile-jss.js b/front/odiparpack/app/components/Profile/profile-jss.js
new file mode 100644
index 0000000..32c3308
--- /dev/null
+++ b/front/odiparpack/app/components/Profile/profile-jss.js
@@ -0,0 +1,155 @@
+import { deepOrange, deepPurple, pink, green } from '@material-ui/core/colors';
+const styles = theme => ({
+ profileList: {
+ padding: 0,
+ '& li': {
+ paddingLeft: 0
+ }
+ },
+ avatar: {
+ margin: 10,
+ },
+ orangeAvatar: {
+ backgroundColor: deepOrange[500],
+ },
+ purpleAvatar: {
+ backgroundColor: deepPurple[500],
+ },
+ pinkAvatar: {
+ backgroundColor: pink[500],
+ },
+ greenAvatar: {
+ backgroundColor: green[500],
+ },
+ divider: {
+ margin: `${theme.spacing(3)}px 0`,
+ },
+ albumRoot: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ justifyContent: 'space-around',
+ overflow: 'hidden',
+ backgroundColor: theme.palette.background.paper,
+ },
+ gridList: {
+ width: 500,
+ height: 'auto',
+ },
+ icon: {
+ color: 'rgba(255, 255, 255, 0.54)',
+ },
+ img: {
+ maxWidth: 'none'
+ },
+ root: theme.mixins.gutters({
+ paddingTop: 16,
+ paddingBottom: 16,
+ marginTop: theme.spacing(3),
+ }),
+ progressRoot: {
+ marginBottom: 30,
+ },
+ styledPaper: {
+ backgroundColor: theme.palette.secondary.main,
+ padding: 20,
+ '& $title, & $subtitle': {
+ color: theme.palette.common.white
+ }
+ },
+ progress: {
+ marginTop: 20,
+ background: theme.palette.secondary.dark,
+ '& div': {
+ background: theme.palette.primary.light,
+ }
+ },
+ chip: {
+ marginTop: 20,
+ background: theme.palette.primary.light,
+ '& div': {
+ background: green[500],
+ color: theme.palette.common.white
+ }
+ },
+ colList: {
+ '& li': {
+ padding: '10px 0'
+ },
+ '& $avatar': {
+ margin: 0
+ }
+ },
+ title: {},
+ subtitle: {},
+ rootAlbum: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ justifyContent: 'space-around',
+ overflow: 'hidden',
+ },
+ image: {
+ position: 'relative',
+ height: 'auto',
+ boxShadow: theme.shadows[6],
+ borderRadius: 2,
+ overflow: 'hidden',
+ marginBottom: 30,
+ width: '100% !important', // Overrides inline-style
+ '&:hover, &$focusVisible': {
+ zIndex: 1,
+ '& $imageBackdrop': {
+ opacity: 0.6,
+ },
+ '& $imageMarked': {
+ opacity: 0,
+ },
+ '& $imageTitle': {
+ border: '4px solid currentColor',
+ },
+ },
+ },
+ imageButton: {
+ position: 'absolute',
+ left: 0,
+ right: 0,
+ top: 0,
+ bottom: 0,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ color: theme.palette.common.white,
+ },
+ imageBackdrop: {
+ position: 'absolute',
+ left: 0,
+ right: 0,
+ top: 0,
+ bottom: 0,
+ backgroundColor: theme.palette.common.black,
+ opacity: 0.4,
+ transition: theme.transitions.create('opacity'),
+ },
+ imageTitle: {
+ position: 'relative',
+ padding: `${theme.spacing(2)}px ${theme.spacing(4)}px ${theme.spacing(1) + 6}px`,
+ },
+ imageMarked: {
+ height: 3,
+ width: 18,
+ backgroundColor: theme.palette.common.white,
+ position: 'absolute',
+ bottom: -2,
+ left: 'calc(50% - 9px)',
+ transition: theme.transitions.create('opacity'),
+ },
+ focusVisible: {},
+ gridListAlbum: {
+ height: 'auto',
+ background: theme.palette.common.black
+ },
+ subheader: {
+ width: '100%',
+ },
+});
+
+export default styles;
diff --git a/front/odiparpack/app/components/Quote/Quote.js b/front/odiparpack/app/components/Quote/Quote.js
new file mode 100644
index 0000000..21665d5
--- /dev/null
+++ b/front/odiparpack/app/components/Quote/Quote.js
@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import { blueGrey } from '@material-ui/core/colors';
+import { Typography } from '@material-ui/core';
+
+const styles = ({
+ quoteWrap: {
+ padding: '0 25',
+ margin: 10,
+ position: 'relative',
+ '&:before': {
+ color: blueGrey[100],
+ fontSize: '4em',
+ lineHeight: '.1em',
+ marginRight: '.25em',
+ verticalAlign: '-.4em'
+ }
+ },
+ quoteLeft: {
+ extend: 'quoteWrap',
+ textAlign: 'left',
+ borderLeft: '5px solid' + blueGrey[50],
+ paddingLeft: 25,
+ '&:before': {
+ content: 'open-quote',
+ }
+ },
+ quoteRight: {
+ extend: 'quoteWrap',
+ textAlign: 'right',
+ borderRight: '5px solid' + blueGrey[50],
+ paddingRight: 25,
+ '&:before': {
+ content: 'close-quote',
+ }
+ },
+ quoteBody: {
+ minHeight: 100,
+ marginBottom: 20
+ }
+});
+
+
+class Quote extends React.Component {
+ render() {
+ const {
+ align,
+ content,
+ footnote,
+ classes
+ } = this.props;
+ return (
+
+
+ {content}
+
+
+ {footnote}
+
+
+ );
+ }
+}
+
+Quote.propTypes = {
+ align: PropTypes.string.isRequired,
+ content: PropTypes.string.isRequired,
+ footnote: PropTypes.string.isRequired,
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Quote);
diff --git a/front/odiparpack/app/components/Rating/Rating.js b/front/odiparpack/app/components/Rating/Rating.js
new file mode 100644
index 0000000..6f65d06
--- /dev/null
+++ b/front/odiparpack/app/components/Rating/Rating.js
@@ -0,0 +1,144 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import ToggleStar from '@material-ui/icons/Star';
+import ToggleStarBorder from '@material-ui/icons/StarBorder';
+import { orange, grey } from '@material-ui/core/colors';
+
+import { IconButton } from '@material-ui/core';
+
+const styles = {
+ disabled: {
+ pointerEvents: 'none'
+ }
+};
+
+class Rating extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ hoverValue: props.value
+ };
+ }
+
+ renderIcon(i) {
+ const filled = i <= this.props.value;
+ const hovered = i <= this.state.hoverValue;
+
+ if ((hovered && !filled) || (!hovered && filled)) {
+ return this.props.iconHoveredRenderer ? this.props.iconHoveredRenderer({
+ ...this.props,
+ index: i
+ }) : this.props.iconHovered;
+ } if (filled) {
+ return this.props.iconFilledRenderer ? this.props.iconFilledRenderer({
+ ...this.props,
+ index: i
+ }) : this.props.iconFilled;
+ }
+ return this.props.iconNormalRenderer ? this.props.iconNormalRenderer({
+ ...this.props,
+ index: i
+ }) : this.props.iconNormal;
+ }
+
+ render() {
+ const {
+ disabled,
+ iconFilled,
+ iconHovered,
+ iconNormal,
+ tooltip,
+ tooltipRenderer,
+ tooltipPosition,
+ tooltipStyles,
+ iconFilledRenderer,
+ iconHoveredRenderer,
+ iconNormalRenderer,
+ itemStyle,
+ itemClassName,
+ itemIconStyle,
+ max,
+ onChange,
+ readOnly,
+ style,
+ value,
+ ...other
+ } = this.props;
+
+ const rating = [];
+
+ for (let i = 1; i <= max; i += 1) {
+ rating.push(
+ this.setState({ hoverValue: i })}
+ onMouseLeave={() => this.setState({ hoverValue: value })}
+ onClick={() => {
+ if (!readOnly && onChange) {
+ onChange(i);
+ }
+ }}
+ >
+ {this.renderIcon(i)}
+
+ );
+ }
+
+ return (
+
+ {rating}
+
+ );
+ }
+}
+
+Rating.propTypes = {
+ disabled: PropTypes.bool,
+ iconFilled: PropTypes.node,
+ iconHovered: PropTypes.node,
+ iconNormal: PropTypes.node,
+ tooltip: PropTypes.node,
+ tooltipRenderer: PropTypes.func,
+ tooltipPosition: PropTypes.string,
+ tooltipStyles: PropTypes.object,
+ iconFilledRenderer: PropTypes.func,
+ iconHoveredRenderer: PropTypes.func,
+ iconNormalRenderer: PropTypes.func,
+ itemStyle: PropTypes.object,
+ itemClassName: PropTypes.object,
+ itemIconStyle: PropTypes.object,
+ max: PropTypes.number,
+ onChange: PropTypes.func,
+ readOnly: PropTypes.bool,
+ style: PropTypes.object,
+ value: PropTypes.number
+};
+
+Rating.defaultProps = {
+ disabled: false,
+ iconFilled: ,
+ iconHovered: ,
+ iconNormal: ,
+ tooltipPosition: 'bottom-center',
+ max: 5,
+ readOnly: false,
+ value: 0,
+ tooltip: null,
+ tooltipRenderer: () => {},
+ tooltipStyles: null,
+ iconFilledRenderer: undefined,
+ iconHoveredRenderer: undefined,
+ iconNormalRenderer: undefined,
+ itemStyle: undefined,
+ itemClassName: undefined,
+ itemIconStyle: undefined,
+ onChange: () => {},
+ style: null,
+};
+
+export default Rating;
diff --git a/front/odiparpack/app/components/Search/SearchProduct.js b/front/odiparpack/app/components/Search/SearchProduct.js
new file mode 100644
index 0000000..b465808
--- /dev/null
+++ b/front/odiparpack/app/components/Search/SearchProduct.js
@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
+import SearchIcon from '@material-ui/icons/Search';
+import { AppBar, Toolbar, IconButton, Badge } from '@material-ui/core';
+import Cart from '../Cart/Cart';
+import styles from './search-jss';
+
+
+class SearchProduct extends React.Component {
+ state = {
+ anchorEl: null,
+ };
+
+ handleClick = event => {
+ this.setState({ anchorEl: event.currentTarget });
+ };
+
+ handleClose = () => {
+ this.setState({ anchorEl: null });
+ };
+
+ render() {
+ const { anchorEl } = this.state;
+ const {
+ classes,
+ dataCart,
+ removeItem,
+ checkout,
+ totalItems,
+ totalPrice,
+ search
+ } = this.props;
+ return (
+
+
+
+
+
+
+
+
+
search(event)} />
+
+
+
+
+
+
+
+
+
+
+
+
+ -1 ? classes.opened : '')}
+ onClick={() => openSubMenu(item.key, item.keyParent)}
+ >
+ {item.icon
+ && (
+
+ {item.icon}
+
+ )
+ }
+
+ { open.indexOf(item.key) > -1 ? : }
+
+ -1}
+ timeout="auto"
+ unmountOnExit
+ >
+
+ { getMenus(sortByKey(item.child, 'key')) }
+
+
+
+ );
+ }
+ return (
+
+ {item.icon
+ && (
+
+ {item.icon}
+
+ )
+ }
+
+
+ );
+ });
+ return (
+
+ {getMenus(MenuContent)}
+
+ );
+}
+
+MainMenu.propTypes = {
+ classes: PropTypes.object.isRequired,
+ open: PropTypes.object.isRequired,
+ openSubMenu: PropTypes.func.isRequired,
+ toggleDrawerOpen: PropTypes.func.isRequired,
+ loadTransition: PropTypes.func.isRequired,
+};
+
+const openAction = (key, keyParent) => ({ type: 'OPEN_SUBMENU', key, keyParent });
+const reducer = 'ui';
+
+const mapStateToProps = state => ({
+ force: state, // force active class for sidebar menu
+ open: state.getIn([reducer, 'subMenuOpen'])
+});
+
+const mapDispatchToProps = dispatch => ({
+ openSubMenu: bindActionCreators(openAction, dispatch)
+});
+
+const MainMenuMapped = connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(MainMenu);
+
+export default withStyles(styles)(MainMenuMapped);
diff --git a/front/odiparpack/app/components/Sidebar/OtherMenu.js b/front/odiparpack/app/components/Sidebar/OtherMenu.js
new file mode 100644
index 0000000..ea2f597
--- /dev/null
+++ b/front/odiparpack/app/components/Sidebar/OtherMenu.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { NavLink } from 'react-router-dom';
+import OtherMenuContent from 'ba-api/otherMenu';
+import { ListItem, ListItemText } from '@material-ui/core';
+import styles from './sidebar-jss';
+
+const LinkBtn = React.forwardRef(function LinkBtn(props, ref) { // eslint-disable-line
+ return ; // eslint-disable-line
+});
+
+function OtherMenu(props) {
+ const { toggleDrawerOpen, classes } = props;
+ const getOtherMenu = menuArray => menuArray.map((item, index) => {
+ const keyIndex = index.toString();
+ return (
+
+
+
+
+
+ );
+ });
+
+ return (
+
+ {getOtherMenu(OtherMenuContent)}
+
+ );
+}
+
+OtherMenu.propTypes = {
+ classes: PropTypes.object.isRequired,
+ toggleDrawerOpen: PropTypes.func.isRequired,
+};
+
+export default withStyles(styles)(OtherMenu);
diff --git a/front/odiparpack/app/components/Sidebar/Sidebar.js b/front/odiparpack/app/components/Sidebar/Sidebar.js
new file mode 100644
index 0000000..01de4ec
--- /dev/null
+++ b/front/odiparpack/app/components/Sidebar/Sidebar.js
@@ -0,0 +1,122 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import brand from 'ba-api/brand';
+import dummy from 'ba-api/dummyContents';
+import logo from 'ba-images/logo.svg';
+import { Hidden, Drawer, SwipeableDrawer, List, Divider, Avatar } from '@material-ui/core';
+import MainMenu from './MainMenu';
+import OtherMenu from './OtherMenu';
+import styles from './sidebar-jss';
+
+const MenuContent = props => {
+ const {
+ classes,
+ turnDarker,
+ drawerPaper,
+ toggleDrawerOpen,
+ loadTransition
+ } = props;
+ return (
+
+
+
+
+
{brand.name}
+
+
+
+
+
{dummy.user.name}
+ {dummy.user.title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+Sidebar.propTypes = {
+ classes: PropTypes.object.isRequired,
+ toggleDrawerOpen: PropTypes.func.isRequired,
+ loadTransition: PropTypes.func.isRequired,
+ turnDarker: PropTypes.bool.isRequired,
+ open: PropTypes.bool.isRequired,
+};
+
+export default withStyles(styles)(Sidebar);
diff --git a/front/odiparpack/app/components/Sidebar/sidebar-jss.js b/front/odiparpack/app/components/Sidebar/sidebar-jss.js
new file mode 100644
index 0000000..e9bf4f6
--- /dev/null
+++ b/front/odiparpack/app/components/Sidebar/sidebar-jss.js
@@ -0,0 +1,205 @@
+const drawerWidth = 240;
+const styles = theme => ({
+ user: {
+ justifyContent: 'center'
+ },
+ drawerPaper: {
+ position: 'relative',
+ height: '100%',
+ overflow: 'hidden',
+ backgroundColor: theme.palette.background.default,
+ border: 'none',
+ width: drawerWidth,
+ transition: theme.transitions.create('width', {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ },
+ swipeDrawerPaper: {
+ width: drawerWidth,
+ },
+ opened: {
+ background: theme.palette.grey[200],
+ '& $primary, & $icon': {
+ color: theme.palette.secondary.dark,
+ },
+ },
+ drawerInner: {
+ height: '100%',
+ position: 'fixed',
+ width: drawerWidth,
+ },
+ drawerPaperClose: {
+ width: 66,
+ position: 'fixed',
+ overflowX: 'hidden',
+ transition: theme.transitions.create('width', {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.leavingScreen,
+ }),
+ '& $user': {
+ justifyContent: 'flex-start'
+ },
+ '& $bigAvatar': {
+ width: 40,
+ height: 40,
+ },
+ '& li ul': {
+ display: 'none'
+ },
+ '&:hover': {
+ width: drawerWidth,
+ boxShadow: theme.shadows[6],
+ '& li ul': {
+ display: 'block'
+ }
+ },
+ '& $menuContainer': {
+ paddingLeft: theme.spacing(1.5),
+ paddingRight: theme.spacing(1.5),
+ width: drawerWidth,
+ },
+ '& $drawerInner': {
+ width: 'auto'
+ },
+ '& $brandBar': {
+ opacity: 0
+ }
+ },
+ drawerHeader: {
+ background: theme.palette.primary.main,
+ color: theme.palette.primary.contrastText,
+ padding: '0',
+ ...theme.mixins.toolbar,
+ '& h3': {
+ color: theme.palette.primary.contrastText,
+ }
+ },
+ avatar: {
+ margin: 10,
+ },
+ bigAvatar: {
+ width: 80,
+ height: 80,
+ },
+ brandBar: {
+ transition: theme.transitions.create(['width', 'margin', 'background'], {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ '&:after': {
+ transition: theme.transitions.create(['box-shadow'], {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ }
+ },
+ darker: {
+ background: theme.palette.primary.dark,
+ },
+ title: {},
+ nested: {
+ paddingLeft: 0,
+ paddingTop: theme.spacing(0.5),
+ paddingBottom: theme.spacing(0.5),
+ '& > div > span': {
+ fontSize: '0.8125rem'
+ }
+ },
+ child: {
+ '& a': {
+ paddingLeft: theme.spacing(3),
+ }
+ },
+ dense: {
+ '& > $title:first-child': {
+ margin: '0'
+ },
+ '& $head': {
+ paddingLeft: theme.spacing(7)
+ }
+ },
+ active: {
+ backgroundColor: theme.palette.primary.light,
+ '& $primary, & $icon': {
+ color: theme.palette.secondary.dark,
+ },
+ '&:hover': {
+ backgroundColor: theme.palette.primary.light,
+ }
+ },
+ nolist: {
+ listStyle: 'none',
+ },
+ primary: {},
+ iconWrapper: {
+ width: theme.spacing(5),
+ minWidth: 0,
+ marginRight: 0,
+ marginLeft: theme.spacing(2)
+ },
+ icon: {
+ marginRight: 0,
+ color: theme.palette.secondary.dark,
+ },
+ head: {
+ paddingLeft: 0
+ },
+ brand: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ padding: '10px 10px 5px',
+ height: 64,
+ position: 'relative',
+ '& img': {
+ width: 20
+ },
+ '& h3': {
+ fontSize: 16,
+ margin: 0,
+ paddingLeft: 10,
+ fontWeight: 500
+ }
+ },
+ profile: {
+ height: 120,
+ display: 'flex',
+ fontSize: 14,
+ padding: 10,
+ alignItems: 'center',
+ '& h4': {
+ fontSize: 18,
+ marginBottom: 0,
+ textOverflow: 'ellipsis',
+ overflow: 'hidden',
+ whiteSpace: 'nowrap',
+ width: 110
+ },
+ '& span': {
+ fontSize: 12,
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap',
+ width: 110,
+ display: 'block',
+ overflow: 'hidden'
+ }
+ },
+ menuContainer: {
+ padding: theme.spacing(1),
+ background: theme.palette.background.default,
+ [theme.breakpoints.up('lg')]: {
+ padding: theme.spacing(1.5),
+ },
+ paddingRight: theme.spacing(1),
+ overflow: 'auto',
+ height: 'calc(100% - 185px)',
+ position: 'relative',
+ display: 'block'
+ },
+ divider: {
+ marginTop: theme.spacing(1)
+ }
+});
+
+export default styles;
diff --git a/front/odiparpack/app/components/SocialMedia/Comment.js b/front/odiparpack/app/components/SocialMedia/Comment.js
new file mode 100644
index 0000000..9ead6e7
--- /dev/null
+++ b/front/odiparpack/app/components/SocialMedia/Comment.js
@@ -0,0 +1,135 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Type from 'ba-styles/Typography.scss';
+import { withStyles } from '@material-ui/core/styles';
+import Send from '@material-ui/icons/Send';
+import CommentIcon from '@material-ui/icons/Comment';
+import CloseIcon from '@material-ui/icons/Close';
+import dummy from 'ba-api/dummyContents';
+import {
+ Typography,
+ List,
+ ListItem,
+ Avatar,
+ Input,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogTitle,
+ IconButton,
+ Fab,
+ Slide,
+ Divider,
+ withMobileDialog,
+} from '@material-ui/core';
+import styles from './jss/socialMedia-jss';
+
+const Transition = React.forwardRef(function Transition(props, ref) { // eslint-disable-line
+ return ;
+});
+
+class Comment extends React.Component {
+ state = {
+ comment: ''
+ };
+
+ handleChange = event => {
+ this.setState({ comment: event.target.value });
+ };
+
+ handleSubmit = comment => {
+ this.props.submitComment(comment);
+ this.setState({ comment: '' });
+ }
+
+ render() {
+ const {
+ open,
+ handleClose,
+ classes,
+ dataComment,
+ fullScreen
+ } = this.props;
+ const { comment } = this.state;
+ const getItem = dataArray => dataArray.map(data => (
+
+
+
+
+
+
+ {data.get('from')}
+ {data.get('date')}
+
+
+
{data.get('message')}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {name}
+
+
+
+ {desc}
+
+
+
+
+ {/* Profile */}
+
+
+ {/* ----------------------------------------------------------------------*/}
+ {/* News Or Ads Block */}
+
+
+ {slideData.map((slide, index) => (
+
+
+
+ {slide.label}
+
+
+
+ ))}
+
+
+ Next
+ {theme.direction === 'rtl' ? : }
+
+ )}
+ backButton={(
+
+ )}
+ />
+
+ {/* ----------------------------------------------------------------------*/}
+ {/* People */}
+
+
+
+ H
+
+
+
+
+ J
+
+
+
+
+ V
+
+
+
+
+ H
+
+
+
+
+
+
+
+
+
+ {/* ----------------------------------------------------------------------*/}
+ {/* Trending */}
+
+
+
+ #Lorem ipsum dolor
+
+
+
+ #Aliquam venenatis
+
+
+
+ #Nam sollicitudin
+
+
+
+ #Cras convallis
+
+
+
+ #Aenean sit amet
+
+
+
+ #Quisque
+
+
+
+ #Lorem ipusm dolor
+
+
+
+
+
+
+
+ {data.get('icon')}
+
+
+
+
+
+ }
+ action={(
+
+
+
+ )}
+ title={data.get('name')}
+ subheader={data.get('date')}
+ />
+ { data.get('image') !== ''
+ && (
+
+ )
+ }
+
+
+ {data.get('content')}
+
+
+
+ onlike(data)}>
+
+
+
+
+
+
+
+ {data.get('comments') !== undefined ? data.get('comments').size : 0}
+
+ this.handleOpenComment(data)}>
+
+
+
+
+
+
+ ));
+ return (
+
+
+
+
+ {getItem(dataTimeline)}
+
+
+ );
+ }
+}
+
+Timeline.propTypes = {
+ classes: PropTypes.object.isRequired,
+ onlike: PropTypes.func,
+ dataTimeline: PropTypes.object.isRequired,
+ fetchComment: PropTypes.func,
+ submitComment: PropTypes.func,
+ commentIndex: PropTypes.number,
+};
+
+Timeline.defaultProps = {
+ onlike: () => (false),
+ fetchComment: () => {},
+ submitComment: () => {},
+ commentIndex: 0,
+};
+
+export default withStyles(styles)(Timeline);
diff --git a/front/odiparpack/app/components/SocialMedia/WritePost.js b/front/odiparpack/app/components/SocialMedia/WritePost.js
new file mode 100644
index 0000000..3452aea
--- /dev/null
+++ b/front/odiparpack/app/components/SocialMedia/WritePost.js
@@ -0,0 +1,169 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Dropzone from 'react-dropzone';
+import { withStyles } from '@material-ui/core/styles';
+import PhotoCamera from '@material-ui/icons/PhotoCamera';
+import Send from '@material-ui/icons/Send';
+import ActionDelete from '@material-ui/icons/Delete';
+import dummy from 'ba-api/dummyContents';
+import { IconButton, Fab, MenuItem, FormControl, Avatar, Paper, Select, Tooltip } from '@material-ui/core';
+import styles from './jss/writePost-jss';
+
+
+function isImage(file) {
+ const fileName = file.name || file.path;
+ const suffix = fileName.substr(fileName.indexOf('.') + 1).toLowerCase();
+ if (suffix === 'jpg' || suffix === 'jpeg' || suffix === 'bmp' || suffix === 'png') {
+ return true;
+ }
+ return false;
+}
+
+class WritePost extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ privacy: 'public',
+ files: [],
+ message: ''
+ };
+ this.onDrop = this.onDrop.bind(this);
+ }
+
+ onDrop(filesVal) {
+ const { files } = this.state;
+ let oldFiles = files;
+ const filesLimit = 2;
+ oldFiles = oldFiles.concat(filesVal);
+ if (oldFiles.length > filesLimit) {
+ console.log('Cannot upload more than ' + filesLimit + ' items.');
+ } else {
+ this.setState({ files: filesVal });
+ }
+ }
+
+ handleRemove(file, fileIndex) {
+ const thisFiles = this.state.files;
+ // This is to prevent memory leaks.
+ window.URL.revokeObjectURL(file.preview);
+
+ thisFiles.splice(fileIndex, 1);
+ this.setState({ files: thisFiles });
+ }
+
+ handleChange = event => {
+ this.setState({ privacy: event.target.value });
+ };
+
+ handleWrite = event => {
+ this.setState({ message: event.target.value });
+ };
+
+ handlePost = (message, files, privacy) => {
+ // Submit Post to reducer
+ this.props.submitPost(message, files, privacy);
+ // Reset all fields
+ this.setState({
+ privacy: 'public',
+ files: [],
+ message: ''
+ });
+ }
+
+ render() {
+ const { classes } = this.props;
+ let dropzoneRef;
+ const { privacy, files, message } = this.state;
+ const acceptedFiles = ['image/jpeg', 'image/png', 'image/bmp'];
+ const fileSizeLimit = 3000000;
+ const deleteBtn = (file, index) => (
+
+
this.handleRemove(file, index)}>
+
+
+
+
+ {deleteBtn(file, index)}
+
+
+
+
+ { dropzoneRef = node; }}
+ >
+ {({ getRootProps, getInputProps }) => (
+
+
+
+ )}
+
+
+ {previews(files)}
+
+
+
+ {
+ dropzoneRef.open();
+ }}
+ >
+
+
+
+
+
+
+
+
+
+ this.handlePost(message, files, privacy)} size="small" color="secondary" aria-label="send" className={classes.sendBtn}>
+
+
+
+
+
+
+
+
+ description
+ src/app/
+ {this.props.componentName}
+
+ {loading
+ &&
+ }
+ {raws.map((raw, index) => ([
+
+
+ {raw.source.toString()}
+
+
+ ])
+ )}
+
+
+
+
+
+ {data.slice(page * rowsPerPage, (page * rowsPerPage) + rowsPerPage).map(n => {
+ const isSelected = this.isSelected(n.id);
+ if (n.name.toLowerCase().indexOf(filterText) === -1) {
+ return false;
+ }
+ return (
+ this.handleClick(event, n.id)}
+ role="checkbox"
+ aria-checked={isSelected}
+ tabIndex={-1}
+ key={n.id}
+ selected={isSelected}
+ >
+
+
+
+ {renderCell(n, columnData)}
+
+ );
+ })}
+ {emptyRows > 0 && (
+
+
+
+ )}
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+CrudTableForm.propTypes = {
+ title: PropTypes.string.isRequired,
+ anchor: PropTypes.array.isRequired,
+ dataInit: PropTypes.array.isRequired,
+ dataTable: PropTypes.object.isRequired,
+ fetchData: PropTypes.func.isRequired,
+ submit: PropTypes.func.isRequired,
+ addNew: PropTypes.func.isRequired,
+ openForm: PropTypes.bool.isRequired,
+ closeForm: PropTypes.func.isRequired,
+ removeRow: PropTypes.func.isRequired,
+ editRow: PropTypes.func.isRequired,
+ children: PropTypes.node.isRequired,
+ initValues: PropTypes.object.isRequired,
+ branch: PropTypes.string.isRequired,
+};
+
+export default CrudTableForm;
diff --git a/front/odiparpack/app/components/Tables/EmptyData.js b/front/odiparpack/app/components/Tables/EmptyData.js
new file mode 100644
index 0000000..a59c3d6
--- /dev/null
+++ b/front/odiparpack/app/components/Tables/EmptyData.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import tableStyles from 'ba-styles/Table.scss';
+import TableIcon from '@material-ui/icons/Apps';
+
+function EmptyData() {
+ return (
+
+ );
+}
+
+export default EmptyData;
diff --git a/front/odiparpack/app/components/Tables/TreeTable.js b/front/odiparpack/app/components/Tables/TreeTable.js
new file mode 100644
index 0000000..12eeb19
--- /dev/null
+++ b/front/odiparpack/app/components/Tables/TreeTable.js
@@ -0,0 +1,190 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import ExpandLess from '@material-ui/icons/KeyboardArrowRight';
+import ExpandMore from '@material-ui/icons/ExpandMore';
+import Add from '@material-ui/icons/AddCircle';
+import Remove from '@material-ui/icons/RemoveCircleOutline';
+
+import { Table, TableBody, TableCell, TableHead, TableRow } from '@material-ui/core';
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ marginTop: theme.spacing(3),
+ overflowX: 'auto',
+ },
+ table: {
+ minWidth: 700,
+ },
+ hideRow: {
+ display: 'none'
+ },
+ anchor: {
+ cursor: 'pointer'
+ },
+ icon: {
+ top: 5,
+ position: 'relative',
+ left: -5
+ }
+});
+
+let RenderRow = props => {
+ const {
+ classes,
+ toggleTree,
+ treeOpen,
+ item,
+ parent,
+ arrowMore,
+ icon,
+ branch
+ } = props;
+
+ const keyID = item.id;
+ const dataBody = Object.keys(item);
+ const dataBodyVal = Object.values(item);
+
+ const renderIconMore = (iconName) => {
+ if (iconName === 'arrow') {
+ return ;
+ }
+ return ;
+ };
+
+ const renderIconLess = (iconName) => {
+ if (iconName === 'arrow') {
+ return ;
+ }
+ return ;
+ };
+
+ const renderCell = (dataArray, parentCell) => dataArray.map((itemCell, index) => {
+ if (index < 1) {
+ if (parentCell) {
+ return (
+
+ {arrowMore.indexOf(keyID) > -1 ? renderIconMore(icon) : renderIconLess(icon)}
+ {keyID}
+
+ );
+ }
+ return (
+ {keyID}
+ );
+ }
+
+ if (itemCell !== 'child') {
+ return (
+ {dataBodyVal[index]}
+ );
+ }
+
+ return false;
+ });
+
+ const row = parent ? (
+ -1 ? classes.hideRow : classes.anchor}
+ onClick={() => toggleTree(keyID, item.child, branch)}
+ >
+ {renderCell(dataBody, true)}
+
+ ) : (
+ -1 ? classes.hideRow : ''}
+ >
+ {renderCell(dataBody, false)}
+
+ );
+
+ return [row];
+};
+
+RenderRow.propTypes = {
+ classes: PropTypes.object.isRequired,
+ item: PropTypes.object.isRequired,
+ parent: PropTypes.bool.isRequired,
+ toggleTree: PropTypes.func.isRequired,
+ treeOpen: PropTypes.object.isRequired,
+ arrowMore: PropTypes.object.isRequired,
+ branch: PropTypes.string.isRequired,
+ icon: PropTypes.string.isRequired
+};
+
+RenderRow = withStyles(styles)(RenderRow);
+
+class TreeTable extends React.Component {
+ render() {
+ const {
+ classes,
+ dataTable,
+ icon,
+ treeOpen,
+ arrowMore,
+ toggleTree,
+ branch
+ } = this.props;
+ const parentRow = true;
+ const getData = dataArray => dataArray.map((item, index) => {
+ if (item.child) {
+ return [
+ ,
+ getData(item.child)
+ ];
+ }
+ return (
+
+ );
+ });
+
+ const getHead = dataArray => dataArray.map((item, index) => {item.label}
+ );
+
+ return (
+
+
+
+ { getHead(dataTable.head) }
+
+
+
+ { getData(dataTable.body) }
+
+
+ );
+ }
+}
+
+TreeTable.propTypes = {
+ classes: PropTypes.object.isRequired,
+ dataTable: PropTypes.object.isRequired,
+ treeOpen: PropTypes.object.isRequired,
+ toggleTree: PropTypes.func.isRequired,
+ arrowMore: PropTypes.object.isRequired,
+ branch: PropTypes.string.isRequired,
+ icon: PropTypes.string.isRequired
+};
+
+export default withStyles(styles)(TreeTable);
diff --git a/front/odiparpack/app/components/Tables/tableParts/DatePickerCell.js b/front/odiparpack/app/components/Tables/tableParts/DatePickerCell.js
new file mode 100644
index 0000000..161d0eb
--- /dev/null
+++ b/front/odiparpack/app/components/Tables/tableParts/DatePickerCell.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
+import MomentUtils from '@date-io/moment';
+import css from 'ba-styles/Table.scss';
+import { TableCell } from '@material-ui/core';
+
+class DatePickerCell extends React.Component {
+ state = {
+ event: {
+ target: {
+ name: this.props.cellData.type, // eslint-disable-line
+ value: this.props.cellData.value, // eslint-disable-line
+ }
+ }
+ }
+
+ handleDateChange = date => {
+ const { event } = this.state;
+ const { branch, updateRow } = this.props;
+ event.target.value = date;
+ updateRow(event, branch);
+ }
+
+ render() {
+ const {
+ edited,
+ cellData
+ } = this.props;
+ const { event } = this.state;
+ return (
+
+
+
+
+
+ );
+ }
+}
+
+DatePickerCell.propTypes = {
+ cellData: PropTypes.object.isRequired,
+ updateRow: PropTypes.func.isRequired,
+ edited: PropTypes.bool.isRequired,
+ branch: PropTypes.string.isRequired,
+};
+
+export default DatePickerCell;
diff --git a/front/odiparpack/app/components/Tables/tableParts/EditableCell.js b/front/odiparpack/app/components/Tables/tableParts/EditableCell.js
new file mode 100644
index 0000000..2c7ba8f
--- /dev/null
+++ b/front/odiparpack/app/components/Tables/tableParts/EditableCell.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import css from 'ba-styles/Table.scss';
+
+import { TableCell, Input, TextField } from '@material-ui/core';
+
+class EditableCell extends React.Component {
+ handleUpdate(event) {
+ event.persist();
+ this.props.updateRow(event, this.props.branch);
+ }
+
+ render() {
+ const {
+ cellData,
+ edited,
+ inputType
+ } = this.props;
+ switch (inputType) {
+ case 'text':
+ return (
+
+ this.handleUpdate(event)}
+ disabled={!edited}
+ margin="none"
+ inputProps={{
+ 'aria-label': 'Description',
+ }}
+ />
+
+ );
+ case 'number':
+ return (
+
+ this.handleUpdate(event)}
+ type="number"
+ InputLabelProps={{
+ shrink: true,
+ }}
+ margin="none"
+ disabled={!edited}
+ />
+
+ );
+ default:
+ return (
+
+ this.handleUpdate(event)}
+ disabled={!edited}
+ margin="none"
+ inputProps={{
+ 'aria-label': 'Description',
+ }}
+ />
+
+ );
+ }
+ }
+}
+
+EditableCell.propTypes = {
+ inputType: PropTypes.string.isRequired,
+ cellData: PropTypes.object.isRequired,
+ updateRow: PropTypes.func.isRequired,
+ edited: PropTypes.bool.isRequired,
+ branch: PropTypes.string.isRequired,
+};
+
+export default EditableCell;
diff --git a/front/odiparpack/app/components/Tables/tableParts/Form.js b/front/odiparpack/app/components/Tables/tableParts/Form.js
new file mode 100644
index 0000000..da66966
--- /dev/null
+++ b/front/odiparpack/app/components/Tables/tableParts/Form.js
@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { reduxForm } from 'redux-form/immutable';
+import css from 'ba-styles/Form.scss';
+import { Button } from '@material-ui/core';
+
+class Form extends Component {
+ componentDidMount() {
+ // this.ref // the Field
+ // .getRenderedComponent() // on Field, returns ReduxFormMaterialUITextField
+ // .getRenderedComponent() // on ReduxFormMaterialUITextField, returns TextField
+ // .focus() // on TextField
+ // console.log(this.props.initValues);
+ }
+
+ render() {
+ const {
+ handleSubmit,
+ children,
+ reset,
+ pristine,
+ submitting,
+ } = this.props;
+
+ return (
+
+ );
+ }
+}
+
+Form.propTypes = {
+ children: PropTypes.node.isRequired,
+ handleSubmit: PropTypes.func.isRequired,
+ reset: PropTypes.func.isRequired,
+ pristine: PropTypes.bool.isRequired,
+ submitting: PropTypes.bool.isRequired,
+};
+
+const FormMapped = reduxForm({
+ form: 'immutableExample',
+ enableReinitialize: true,
+})(Form);
+
+
+const FormMappedInit = connect(
+ state => ({
+ initialValues: state.getIn(['crudTableForm', 'formValues'])
+ })
+)(FormMapped);
+
+
+export default FormMappedInit;
diff --git a/front/odiparpack/app/components/Tables/tableParts/MainTable.js b/front/odiparpack/app/components/Tables/tableParts/MainTable.js
new file mode 100644
index 0000000..973bccf
--- /dev/null
+++ b/front/odiparpack/app/components/Tables/tableParts/MainTable.js
@@ -0,0 +1,104 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import AddIcon from '@material-ui/icons/Add';
+import css from 'ba-styles/Table.scss';
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableRow,
+ Toolbar,
+ Typography,
+ Tooltip,
+ Button,
+} from '@material-ui/core';
+import Row from './Row';
+import styles from './tableStyle-jss';
+
+
+class MainTable extends React.Component {
+ render() {
+ const {
+ classes,
+ items,
+ addEmptyRow,
+ removeRow,
+ updateRow,
+ editRow,
+ finishEditRow,
+ anchor,
+ branch,
+ title
+ } = this.props;
+
+ const getItems = dataArray => dataArray.map(item => (
+ updateRow(event, item, branch)}
+ item={item}
+ removeRow={() => removeRow(item, branch)}
+ key={item.get('id')}
+ editRow={() => editRow(item, branch)}
+ finishEditRow={() => finishEditRow(item, branch)}
+ branch={branch}
+ />
+ ));
+
+ const getHead = dataArray => dataArray.map((item, index) => {
+ if (!item.hidden) {
+ return (
+ {item.label}
+ );
+ }
+ return false;
+ });
+ return (
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+ { getHead(anchor) }
+
+
+
+ {getItems(items)}
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+ { getHead(anchor) }
+
+
+
+ {getItems(items)}
+
+
+
+
+ {renderCell(anchor)}
+
+ eventEdit(this)}
+ className={classNames((item.get('edited') ? css.hideAction : ''), classes.button)}
+ aria-label="Edit"
+ >
+
+
+ eventDone(this)}
+ color="secondary"
+ className={classNames((!item.get('edited') ? css.hideAction : ''), classes.button)}
+ aria-label="Done"
+ >
+
+
+ eventDel(this)}
+ className={classes.button}
+ aria-label="Delete"
+ >
+
+
+
+
+ );
+ }
+}
+
+Row.propTypes = {
+ classes: PropTypes.object.isRequired,
+ anchor: PropTypes.array.isRequired,
+ item: PropTypes.object.isRequired,
+ removeRow: PropTypes.func.isRequired,
+ updateRow: PropTypes.func.isRequired,
+ editRow: PropTypes.func.isRequired,
+ finishEditRow: PropTypes.func.isRequired,
+ branch: PropTypes.string.isRequired
+};
+
+export default withStyles(styles)(Row);
diff --git a/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js b/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js
new file mode 100644
index 0000000..7da655f
--- /dev/null
+++ b/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import css from 'ba-styles/Table.scss';
+import DeleteIcon from '@material-ui/icons/Delete';
+import EditIcon from '@material-ui/icons/BorderColor';
+
+import { TableCell, IconButton } from '@material-ui/core';
+
+const styles = theme => ({
+ button: {
+ margin: theme.spacing(1),
+ },
+});
+
+class RowReadOnly extends React.Component {
+ render() {
+ const {
+ anchor,
+ classes,
+ item,
+ removeRow,
+ editRow,
+ branch
+ } = this.props;
+ const eventDel = () => {
+ removeRow(item, branch);
+ };
+ const eventEdit = () => {
+ editRow(item, branch);
+ };
+ const renderCell = dataArray => dataArray.map((itemCell, index) => {
+ if (itemCell.name !== 'action' && !itemCell.hidden) {
+ return (
+
+ {item.get(itemCell.name) !== undefined ? item.get(itemCell.name).toString() : ''}
+
+ );
+ }
+ return false;
+ });
+ return (
+
+ {renderCell(anchor)}
+
+ eventEdit(this)}
+ className={classNames((item.get('edited') ? css.hideAction : ''), classes.button)}
+ aria-label="Edit"
+ >
+
+
+ eventDel(this)}
+ className={classes.button}
+ aria-label="Delete"
+ >
+
+
+
+
+ );
+ }
+}
+
+RowReadOnly.propTypes = {
+ anchor: PropTypes.array.isRequired,
+ classes: PropTypes.object.isRequired,
+ item: PropTypes.object.isRequired,
+ removeRow: PropTypes.func.isRequired,
+ editRow: PropTypes.func.isRequired,
+ branch: PropTypes.string.isRequired,
+};
+
+export default withStyles(styles)(RowReadOnly);
diff --git a/front/odiparpack/app/components/Tables/tableParts/SelectableCell.js b/front/odiparpack/app/components/Tables/tableParts/SelectableCell.js
new file mode 100644
index 0000000..66fde97
--- /dev/null
+++ b/front/odiparpack/app/components/Tables/tableParts/SelectableCell.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import css from 'ba-styles/Table.scss';
+
+import { Select, MenuItem, TableCell } from '@material-ui/core';
+
+class SelectableCell extends React.Component {
+ handleChange = event => {
+ this.props.updateRow(event, this.props.branch);
+ this.setState({ [event.target.name]: event.target.value });
+ };
+
+ render() {
+ const {
+ cellData,
+ edited,
+ options,
+ } = this.props;
+ return (
+
+
+
+ );
+ }
+}
+
+SelectableCell.propTypes = {
+ options: PropTypes.array.isRequired,
+ cellData: PropTypes.object.isRequired,
+ updateRow: PropTypes.func.isRequired,
+ edited: PropTypes.bool.isRequired,
+ branch: PropTypes.string.isRequired,
+};
+
+export default SelectableCell;
diff --git a/front/odiparpack/app/components/Tables/tableParts/TableHeader.js b/front/odiparpack/app/components/Tables/tableParts/TableHeader.js
new file mode 100644
index 0000000..4ef6b0d
--- /dev/null
+++ b/front/odiparpack/app/components/Tables/tableParts/TableHeader.js
@@ -0,0 +1,74 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TableCell, TableHead, TableRow, TableSortLabel, Checkbox, Tooltip } from '@material-ui/core';
+
+class TableHeader extends React.Component {
+ createSortHandler = property => event => {
+ this.props.onRequestSort(event, property);
+ };
+
+ render() {
+ const {
+ onSelectAllClick,
+ order,
+ orderBy,
+ numSelected,
+ rowCount,
+ columnData,
+ checkcell
+ } = this.props;
+
+ return (
+
+
+ {checkcell
+ && (
+
+ 0 && numSelected < rowCount}
+ checked={numSelected === rowCount}
+ onChange={onSelectAllClick}
+ />
+
+ )
+ }
+ {columnData.map(column => (
+
+
+
+ {column.label}
+
+
+
+ ), this)}
+
+
+ );
+ }
+}
+
+TableHeader.propTypes = {
+ numSelected: PropTypes.number.isRequired,
+ onRequestSort: PropTypes.func.isRequired,
+ onSelectAllClick: PropTypes.func.isRequired,
+ order: PropTypes.string.isRequired,
+ orderBy: PropTypes.string.isRequired,
+ rowCount: PropTypes.number.isRequired,
+ columnData: PropTypes.array.isRequired,
+ checkcell: PropTypes.bool.isRequired,
+};
+
+export default TableHeader;
diff --git a/front/odiparpack/app/components/Tables/tableParts/TableToolbar.js b/front/odiparpack/app/components/Tables/tableParts/TableToolbar.js
new file mode 100644
index 0000000..940a82c
--- /dev/null
+++ b/front/odiparpack/app/components/Tables/tableParts/TableToolbar.js
@@ -0,0 +1,123 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import DeleteIcon from '@material-ui/icons/Delete';
+import ArchiveIcon from '@material-ui/icons/Archive';
+import BookmarkIcon from '@material-ui/icons/Bookmark';
+import FilterListIcon from '@material-ui/icons/FilterList';
+import SearchIcon from '@material-ui/icons/Search';
+import {
+ Toolbar,
+ Typography,
+ IconButton,
+ Tooltip,
+ FormControl,
+ Input,
+ InputAdornment,
+} from '@material-ui/core';
+import styles from './tableStyle-jss';
+
+
+class TableToolbar extends React.Component {
+ state = {
+ showSearch: false,
+ }
+
+ toggleSearch() {
+ this.setState({ showSearch: !this.state.showSearch });
+ }
+
+ handleChange(event) {
+ event.persist();
+ this.props.onUserInput(event.target.value);
+ }
+
+ render() {
+ const { numSelected, classes, filterText } = this.props;
+ const { showSearch } = this.state;
+
+ return (
+ 0,
+ })}
+ >
+
+ {numSelected > 0 ? (
+
+ {numSelected}
+ {' '}
+selected
+
+ ) : (
+ Nutrition
+ )}
+
+
+
+ {numSelected > 0 ? (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ) : (
+
+ {showSearch
+ && (
+
+ this.handleChange(event)}
+ endAdornment={(
+
+
+
+
+
+ )}
+ />
+
+ )
+ }
+
+ this.toggleSearch()}
+ >
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ imgData.map((tile, index) => {
+ if (index >= 4) {
+ return false;
+ }
+ return (
+
+
+
+by:
+ {tile.author}
+
+ )}
+ actionIcon={(
+
+
+
+ )}
+ />
+
+ );
+ })
+ }
+
+
+ -
+
+
+
+
+ 4321
+ Gift Card
+
+
+ -
+
+
+
+
+ 9876
+ Flowers
+
+
+ -
+
+
+
+
+ 345
+ Cups
+
+
+ -
+
+
+
+
+ 996
+ Name Cards
+
+
+
+
+
+
+ Performance Listing
+
+
+
+ Giftcard Quality
+
+
+
+
+ Monitoring Quality
+
+
+
+
+ Project Complete
+
+
+
+
+ Deploy Progress
+
+
+
+
+
+
+
+ );
+ }
+}
+
+AreaChartWidget.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(AreaChartWidget);
diff --git a/front/odiparpack/app/components/Widget/BigChartWidget.js b/front/odiparpack/app/components/Widget/BigChartWidget.js
new file mode 100644
index 0000000..718af45
--- /dev/null
+++ b/front/odiparpack/app/components/Widget/BigChartWidget.js
@@ -0,0 +1,142 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import Dvr from '@material-ui/icons/Dvr';
+import Explore from '@material-ui/icons/Explore';
+import Healing from '@material-ui/icons/Healing';
+import LocalActivity from '@material-ui/icons/LocalActivity';
+import {
+ ComposedChart,
+ Line,
+ Area,
+ Bar,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ ResponsiveContainer
+} from 'recharts';
+import { data1 } from 'ba-api/chartData';
+import Type from 'ba-styles/Typography.scss';
+import colorfull from 'ba-api/colorfull';
+import { Grid, Avatar, Divider, LinearProgress, Typography } from '@material-ui/core';
+import styles from './widget-jss';
+import PapperBlock from '../PapperBlock/PapperBlock';
+
+
+const color = ({
+ main: colorfull[5],
+ maindark: '#2196F3',
+ secondary: colorfull[3],
+ third: colorfull[0],
+});
+
+class BigChartWidget extends PureComponent {
+ render() {
+ const {
+ classes,
+ } = this.props;
+ return (
+
+
+
+
+ -
+
+
+
+
+ 1234
+ Monitors
+
+
+ -
+
+
+
+
+ 5678
+ Compas
+
+
+ -
+
+
+
+
+ 910
+ Badges
+
+
+ -
+
+
+
+
+ 1112
+ Tickets
+
+
+
+
+
+
+ Performance Listing
+
+
+ -
+ Monitoring Quality
+
+
+ -
+ Compas Speed
+
+
+ -
+ Total Badges
+
+
+ -
+ Sold Ticket
+
+
+ -
+ App Performance
+
+
+
+
+
+
+ );
+ }
+}
+
+BigChartWidget.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(BigChartWidget);
diff --git a/front/odiparpack/app/components/Widget/CarouselWidget.js b/front/odiparpack/app/components/Widget/CarouselWidget.js
new file mode 100644
index 0000000..51dd522
--- /dev/null
+++ b/front/odiparpack/app/components/Widget/CarouselWidget.js
@@ -0,0 +1,117 @@
+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 carouselData from 'ba-api/carouselData';
+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 { Typography, IconButton, Icon } from '@material-ui/core';
+import styles from './widget-jss';
+
+
+function SampleNextArrow(props) {
+ const { onClick } = props;
+ return (
+
+
+
+ );
+}
+
+SampleNextArrow.propTypes = {
+ onClick: PropTypes.func,
+};
+
+SampleNextArrow.defaultProps = {
+ onClick: undefined,
+};
+
+function SamplePrevArrow(props) {
+ const { onClick } = props;
+ return (
+
+
+
+ );
+}
+
+SamplePrevArrow.propTypes = {
+ onClick: PropTypes.func,
+};
+
+SamplePrevArrow.defaultProps = {
+ onClick: undefined,
+};
+
+class CarouselWidget extends React.Component {
+ render() {
+ const { classes } = this.props;
+ const settings = {
+ dots: true,
+ infinite: true,
+ centerMode: false,
+ speed: 500,
+ autoplaySpeed: 5000,
+ pauseOnHover: true,
+ autoplay: true,
+ slidesToShow: 3,
+ slidesToScroll: 1,
+ responsive: [
+ {
+ breakpoint: 960,
+ settings: {
+ slidesToShow: 2,
+ slidesToScroll: 1,
+ infinite: true,
+ dots: true
+ }
+ },
+ {
+ breakpoint: 600,
+ settings: {
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ infinite: true,
+ dots: true
+ }
+ },
+ ],
+ cssEase: 'ease-out',
+ nextArrow: ,
+ prevArrow:
+ };
+ return (
+
+
+ {carouselData.map((item, index) => (
+
+
+ {item.icon}
+
+ {item.icon}
+ {item.title}
+
+ {item.desc}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ data2.map((entry, index) => | )
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+MapWidget.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(MapWidget);
diff --git a/front/odiparpack/app/components/Widget/ProfileWidget.js b/front/odiparpack/app/components/Widget/ProfileWidget.js
new file mode 100644
index 0000000..3ae3690
--- /dev/null
+++ b/front/odiparpack/app/components/Widget/ProfileWidget.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import LocalPhone from '@material-ui/icons/LocalPhone';
+import DateRange from '@material-ui/icons/DateRange';
+import LocationOn from '@material-ui/icons/LocationOn';
+import {
+ List, ListItem, ListItemAvatar,
+ ListItemText, Divider, Avatar
+} from '@material-ui/core';
+import PapperBlock from '../PapperBlock/PapperBlock';
+import styles from './widget-jss';
+
+
+function ProfileWidget(props) {
+ const { classes } = props;
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+ProfileWidget.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ProfileWidget);
diff --git a/front/odiparpack/app/components/Widget/ProgressWidget.js b/front/odiparpack/app/components/Widget/ProgressWidget.js
new file mode 100644
index 0000000..c0e6db6
--- /dev/null
+++ b/front/odiparpack/app/components/Widget/ProgressWidget.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Type from 'ba-styles/Typography.scss';
+import Check from '@material-ui/icons/Check';
+import { withStyles } from '@material-ui/core/styles';
+import { LinearProgress, Paper, Typography, Grid, Avatar, Chip } from '@material-ui/core';
+import styles from './widget-jss';
+
+
+function ProgressWidget(props) {
+ const { classes } = props;
+ return (
+
+
+ Profile Strength:
+ Intermediate
+
+
+
+
+
+ )}
+ label="60% Progress"
+ className={classes.chipProgress}
+ color="primary"
+ />
+
+
+
+ );
+}
+
+ProgressWidget.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ProgressWidget);
diff --git a/front/odiparpack/app/components/Widget/SliderWidget.js b/front/odiparpack/app/components/Widget/SliderWidget.js
new file mode 100644
index 0000000..1f53780
--- /dev/null
+++ b/front/odiparpack/app/components/Widget/SliderWidget.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import Type from 'ba-styles/Typography.scss';
+import Slider from 'react-animated-slider';
+import 'ba-styles/vendors/react-animated-slider/react-animated-slider.css';
+import imgApi from 'ba-api/images';
+import avatarApi from 'ba-api/avatars';
+
+import { Button, Typography } from '@material-ui/core';
+
+const content = [
+ {
+ title: 'Vulputate Mollis Ultricies',
+ description:
+ 'Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
+ button: 'Read More',
+ image: imgApi[3],
+ user: 'Luanda Gjokaj',
+ userProfile: avatarApi[1]
+ },
+ {
+ title: 'Tortor Dapibus',
+ description:
+ 'Cras mattis consectetur purus sit amet fermentum.',
+ button: 'Discover',
+ image: imgApi[15],
+ user: 'Erich Behrens',
+ userProfile: avatarApi[8]
+ },
+ {
+ title: 'Phasellus volutpat',
+ description:
+ 'Lorem ipsum dolor sit amet',
+ button: 'Buy now',
+ image: imgApi[29],
+ user: 'Bruno Vizovskyy',
+ userProfile: avatarApi[10]
+ }
+];
+
+const SliderWidget = () => (
+
+
+ {content.map((item, index) => (
+
+
+ {item.title}
+
+
+
+ 
+
+ Posted by
+ {' '}
+ {item.user}
+
+
+
+
+
+
+
+ Name
+ Task
+
+
+
+ {data.map(n => ([
+
+
+
+
+
+ {n.name}
+ {n.title}
+
+
+
+ {[0, 1, 2, 3, 4].map(value => (
+
+
+
+
+
+
+
+
+
+
+
+ ))}
+
+
+ );
+ }
+}
+
+TaskWidget.propTypes = {
+ classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(TaskWidget);
diff --git a/front/odiparpack/app/components/Widget/widget-jss.js b/front/odiparpack/app/components/Widget/widget-jss.js
new file mode 100644
index 0000000..d553eaa
--- /dev/null
+++ b/front/odiparpack/app/components/Widget/widget-jss.js
@@ -0,0 +1,294 @@
+import colorfull from 'ba-api/colorfull';
+
+const styles = theme => ({
+ rootCounter: {
+ flexGrow: 1,
+ padding: theme.spacing(1.5),
+ [theme.breakpoints.up('lg')]: {
+ padding: `${theme.spacing(1.5)}px ${theme.spacing(1)}px`,
+ },
+ [theme.breakpoints.down('xs')]: {
+ margin: `0 ${theme.spacing(1) * -1.5}px`,
+ }
+ },
+ rootCounterFull: {
+ flexGrow: 1,
+ },
+ divider: {
+ margin: `${theme.spacing(3)}px 0`
+ },
+ dividerBig: {
+ margin: `${theme.spacing(2)}px 0`
+ },
+ centerItem: {},
+ secondaryWrap: {
+ background: theme.palette.grey[100],
+ padding: 20,
+ borderRadius: 4,
+ justifyContent: 'space-around',
+ '& > $centerItem': {
+ position: 'relative',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ },
+ '& li': {
+ marginBottom: 30
+ },
+ '& $chip': {
+ top: 70,
+ position: 'absolute',
+ fontSize: 11,
+ fontWeight: 400,
+ }
+ },
+ bigResume: {
+ marginBottom: 20,
+ justifyContent: 'space-between',
+ display: 'flex',
+ [theme.breakpoints.down('sm')]: {
+ height: 160,
+ display: 'block',
+ },
+ '& li': {
+ paddingRight: 20,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'flex-start',
+ [theme.breakpoints.down('sm')]: {
+ width: '50%',
+ float: 'left'
+ },
+ },
+ },
+ avatar: {
+ width: 50,
+ height: 50,
+ marginRight: 10,
+ '& svg': {
+ fontSize: 32
+ }
+ },
+ pinkAvatar: {
+ margin: 10,
+ color: '#fff',
+ backgroundColor: colorfull[0],
+ },
+ purpleAvatar: {
+ margin: 10,
+ color: '#fff',
+ backgroundColor: colorfull[1],
+ },
+ blueAvatar: {
+ margin: 10,
+ color: '#fff',
+ backgroundColor: colorfull[2],
+ },
+ tealAvatar: {
+ margin: 10,
+ color: '#fff',
+ backgroundColor: colorfull[3],
+ },
+ pinkProgress: {
+ color: colorfull[0],
+ '& div': {
+ backgroundColor: colorfull[0],
+ }
+ },
+ greenProgress: {
+ color: colorfull[5],
+ '& div': {
+ backgroundColor: colorfull[5],
+ }
+ },
+ orangeProgress: {
+ color: colorfull[4],
+ '& div': {
+ backgroundColor: colorfull[4],
+ }
+ },
+ purpleProgress: {
+ color: colorfull[1],
+ '& div': {
+ backgroundColor: colorfull[1],
+ }
+ },
+ blueProgress: {
+ color: colorfull[2],
+ '& div': {
+ backgroundColor: colorfull[2],
+ }
+ },
+ root: {
+ width: '100%',
+ marginTop: theme.spacing(3),
+ overflowX: 'auto',
+ },
+ chip: {
+ margin: '8px 0 8px auto',
+ color: '#FFF'
+ },
+ table: {
+ minWidth: 500,
+ '& td': {
+ padding: 10,
+ }
+ },
+ user: {
+ display: 'flex',
+ },
+ textCenter: {
+ textAlign: 'center'
+ },
+ red: {},
+ orange: {},
+ indigo: {},
+ purple: {},
+ lime: {},
+ taskIcon: {
+ display: 'block',
+ textAlign: 'center',
+ margin: '0 10px',
+ '&$red': {
+ color: colorfull[0],
+ },
+ '&$orange': {
+ color: colorfull[2],
+ },
+ '&$purple': {
+ color: colorfull[1],
+ },
+ '&$lime': {
+ color: colorfull[3],
+ },
+ '&$indigo': {
+ color: colorfull[4],
+ }
+ },
+ done: {},
+ listItem: {
+ padding: 5,
+ background: theme.palette.common.white,
+ boxShadow: theme.shadows[3],
+ '&:hover': {
+ backgroundColor: theme.palette.grey[200]
+ },
+ '&$done': {
+ textDecoration: 'line-through'
+ }
+ },
+ title: {},
+ subtitle: {},
+ styledPaper: {
+ backgroundColor: theme.palette.secondary.main,
+ padding: 20,
+ '& $title, & $subtitle': {
+ color: theme.palette.common.white
+ }
+ },
+ progressWidget: {
+ marginTop: 20,
+ background: theme.palette.secondary.dark,
+ '& div': {
+ background: theme.palette.primary.light,
+ }
+ },
+ chipProgress: {
+ marginTop: 20,
+ background: theme.palette.primary.light,
+ color: theme.palette.secondary.main,
+ '& div': {
+ background: colorfull[4],
+ color: theme.palette.common.white
+ }
+ },
+ taskStatus: {
+ display: 'flex',
+ alignItems: 'center',
+ '& a': {
+ textDecoration: 'none',
+ color: theme.palette.primary.main
+ }
+ },
+ counterIcon: {
+ color: theme.palette.common.white,
+ opacity: 0.7,
+ fontSize: 84
+ },
+ progressCircle: {
+ margin: 20
+ },
+ itemCarousel: {
+ textAlign: 'center',
+ '& img': {
+ margin: '10px auto'
+ }
+ },
+ albumRoot: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ justifyContent: 'space-around',
+ overflow: 'hidden',
+ backgroundColor: theme.palette.background.paper,
+ },
+ gridList: {
+ height: 'auto',
+ [theme.breakpoints.up('sm')]: {
+ width: 500,
+ },
+ },
+ icon: {
+ color: 'rgba(255, 255, 255, 0.54)',
+ },
+ img: {
+ maxWidth: 'none'
+ },
+ mapWrap: {
+ position: 'relative'
+ },
+ address: {
+ [theme.breakpoints.up('md')]: {
+ top: '50%',
+ right: 60,
+ position: 'absolute',
+ transform: 'translate(0, -50%)'
+ },
+ },
+ carouselItem: {
+ margin: '0 5px',
+ boxShadow: theme.shadows[3],
+ borderRadius: 4,
+ overflow: 'hidden',
+ height: 250,
+ padding: '60px 20px',
+ position: 'relative'
+ },
+ iconBg: {
+ color: theme.palette.common.white,
+ opacity: 0.25,
+ position: 'absolute',
+ bottom: 10,
+ right: 10,
+ fontSize: 96
+ },
+ carouselTitle: {
+ color: theme.palette.common.white,
+ display: 'flex',
+ flexDirection: 'column',
+ fontWeight: 500,
+ fontSize: 20
+ },
+ carouselDesc: {
+ color: theme.palette.common.white
+ },
+ chartWrap: {
+ overflow: 'auto',
+ },
+ chartFluid: {
+ width: '100%',
+ minWidth: 400,
+ height: 300,
+ }
+});
+
+export default styles;
diff --git a/front/odiparpack/app/components/index.js b/front/odiparpack/app/components/index.js
new file mode 100644
index 0000000..9d7bdb3
--- /dev/null
+++ b/front/odiparpack/app/components/index.js
@@ -0,0 +1,87 @@
+export Header from './Header/Header';
+export Sidebar from './Sidebar/Sidebar';
+export BreadCrumb from './BreadCrumb/BreadCrumb';
+export SourceReader from './SourceReader/SourceReader';
+export PapperBlock from './PapperBlock/PapperBlock';
+// Dashboard and Widget
+export CounterWidget from './Counter/CounterWidget';
+export SliderWidget from './Widget/SliderWidget';
+export CounterGroupWidget from './Widget/CounterGroupWidget';
+export CounterIconsWidget from './Widget/CounterIconsWidget';
+export BigChartWidget from './Widget/BigChartWidget';
+export TableWidget from './Widget/TableWidget';
+export TaskWidget from './Widget/TaskWidget';
+export ProfileWidget from './Widget/ProfileWidget';
+export ProgressWidget from './Widget/ProgressWidget';
+export AreaChartWidget from './Widget/AreaChartWidget';
+export CarouselWidget from './Widget/CarouselWidget';
+export AlbumWidget from './Widget/AlbumWidget';
+export MapWidget from './Widget/MapWidget';
+// Table Components
+export TreeTable from './Tables/TreeTable';
+export CrudTable from './Tables/CrudTable';
+export CrudTableForm from './Tables/CrudTableForm';
+export AdvTable from './Tables/AdvTable';
+export EmptyData from './Tables/EmptyData';
+// Form
+export Notification from './Notification/Notification';
+export MaterialDropZone from './Forms/MaterialDropZone';
+export LoginForm from './Forms/LoginForm';
+export RegisterForm from './Forms/RegisterForm';
+export ResetForm from './Forms/ResetForm';
+export LockForm from './Forms/LockForm';
+// UI
+export LimitedBadges from './Badges/LimitedBadges';
+export Quote from './Quote/Quote';
+export Pagination from './Pagination/Pagination';
+export ImageLightbox from './ImageLightbox/ImageLightbox';
+export Rating from './Rating/Rating';
+// Social Media
+export Cover from './SocialMedia/Cover';
+export Timeline from './SocialMedia/Timeline';
+export SideSection from './SocialMedia/SideSection';
+export WritePost from './SocialMedia/WritePost';
+// Profile
+export About from './Profile/About';
+export Albums from './Profile/Albums';
+export Connection from './Profile/Connection';
+export Favorites from './Profile/Favorites';
+// Card
+export ProfileCard from './CardPaper/ProfileCard';
+export GeneralCard from './CardPaper/GeneralCard';
+export NewsCard from './CardPaper/NewsCard';
+export PlayerCard from './CardPaper/PlayerCard';
+export PostCard from './CardPaper/PostCard';
+export ProductCard from './CardPaper/ProductCard';
+export VideoCard from './CardPaper/VideoCard';
+export IdentityCard from './CardPaper/IdentityCard';
+// Search
+export SearchProduct from './Search/SearchProduct';
+// Gallery
+export ProductGallery from './Gallery/ProductGallery';
+export PhotoGallery from './Gallery/PhotoGallery';
+// Panel
+export FloatingPanel from './Panel/FloatingPanel';
+export Cart from './Cart/Cart';
+// Contact
+export AddContact from './Contact/AddContact';
+export ContactList from './Contact/ContactList';
+export ContactHeader from './Contact/ContactHeader';
+export ContactDetail from './Contact/ContactDetail';
+// Chat
+export ChatHeader from './Chat/ChatHeader';
+export ChatRoom from './Chat/ChatRoom';
+// Email
+export EmailHeader from './Email/EmailHeader';
+export EmailSidebar from './Email/EmailSidebar';
+export EmailList from './Email/EmailList';
+export ComposeEmail from './Email/ComposeEmail';
+// Calendar
+export EventCalendar from './Calendar/EventCalendar';
+export DetailEvent from './Calendar/DetailEvent';
+export AddEvent from './Calendar/AddEvent';
+export AddEventForm from './Calendar/AddEventForm';
+// Error
+export ErrorWrap from './Error/ErrorWrap';
+// Template Settings
+export TemplateSettings from './TemplateSettings';
--
cgit v1.2.3