initial master details

WinWisely268 · Mar 14, 2021 · ba97e42 · ba97e42
1 parent 6b6bb6e
commit ba97e42
Show file tree

Hide file tree

Showing 9 changed files with 13,270 additions and 2,394 deletions.
diff --git a/frontend/graphql.schema.json b/frontend/graphql.schema.json
diff --git a/frontend/src/components/MasterDetail.tsx b/frontend/src/components/MasterDetail.tsx
@@ -0,0 +1,79 @@
+import React from 'react'
+import { Route, Switch, useRouteMatch } from 'react-router-dom'
+import useMediaQuery from '@material-ui/core/useMediaQuery'
+import { Theme } from '@material-ui/core/styles'
+import { makeStyles, useTheme } from '@material-ui/core'
+import { createStyles } from '@material-ui/styles'
+
+export interface MasterDetailProps {
+  MasterType: any,
+  masterProps: any,
+  DetailType: any,
+  detailProps: any
+}
+
+const masterDetailStyles = makeStyles((theme: Theme = useTheme()) => createStyles({
+    component: {
+      display: 'flex',
+      width: '100%',
+      height: '100%',
+      overflow: 'hidden'
+    },
+    master: {
+      width: '100%',
+      maxWidth: '400px',
+      height: '100%',
+      position: 'relative'
+    },
+    detail: {
+      position: 'relative',
+      flexGrow: 1,
+      width: '100%',
+      height: '100%'
+    }
+  })
+)
+
+export const MasterDetail: React.FC<MasterDetailProps> = (props) => {
+  const styles = masterDetailStyles()
+  const thm = useTheme()
+  const matches = useMediaQuery(thm.breakpoints.down('md'))
+  let { path } = useRouteMatch() as any
+  const master = (
+    <props.MasterType {...props.masterProps}
+                      data-test='Master' />)
+  const detail = (
+    <props.DetailType {...props.detailProps}
+                      data-test='Detail' />)
+
+  return (
+    matches ? (
+      <Switch>
+        <Route exact path={`${path}`}>
+          {master}
+        </Route>
+        <Route path={`${path}/detail/:id`}>
+          {detail}
+        </Route>
+      </Switch>
+    ) : (
+      <section className={styles.component}>
+        <section className={styles.master}>
+          <Route path={`${path}`}>
+            {master}
+          </Route>
+        </section>
+        <section className={styles.detail}>
+          <Switch>
+            <Route exact path={`${path}`}>
+              {detail}
+            </Route>
+            <Route path={`${path}/detail/:id`}>
+              {detail}
+            </Route>
+          </Switch>
+        </section>
+      </section>
+    )
+  )
+}
diff --git a/frontend/src/components/dashboard/SidebarNav.tsx b/frontend/src/components/dashboard/SidebarNav.tsx
@@ -33,8 +33,8 @@ const sidebarMenus = [
     icon: <ProductsIcon />,
     items: [
       {
-        name: 'menu.products.categories',
-        link: '/dashboard/products/categories',
+        name: 'kategori',
+        link: AllRoutesStr.Dashboard.tags,
         hasIcon: false
       },
       {

diff --git a/frontend/src/layouts/DashboardLayout.tsx b/frontend/src/layouts/DashboardLayout.tsx
@@ -1,144 +1,149 @@
 import React from 'react'
-import {Container, CssBaseline} from '@material-ui/core'
+import { Container, CssBaseline } from '@material-ui/core'
 import DashboardBar from '../components/dashboard/DashboardBar'
-import {useHistory} from 'react-router-dom'
+import { useHistory } from 'react-router-dom'
 import {
-    useTheme,
-    createStyles,
-    makeStyles,
-    Theme
+  useTheme,
+  createStyles,
+  makeStyles,
+  Theme
 } from '@material-ui/core/styles'
 
 const drawerWidth = 240
 
 export interface DashboardLayoutProps {
-    children?: any
+  children?: any
 }
 
 export const useStyles = makeStyles((theme: Theme = useTheme()) =>
-    createStyles({
-        root: {
-            display: 'flex'
-        },
-        toolbar: {
-            paddingRight: 24 // keep right padding when drawer closed
-        },
-        sidebarHeader: {
-            display: 'flex',
-            alignItems: 'center',
-            // justifyContent: 'center',
-            whiteSpace: 'nowrap',
-            padding: '0 8px',
-            ...theme.mixins.toolbar
-        },
-        appBar: {
-            zIndex: theme.zIndex.drawer + 1,
-            transition: theme.transitions.create(['width', 'margin'], {
-                easing: theme.transitions.easing.sharp,
-                duration: theme.transitions.duration.leavingScreen
-            })
-        },
-        appBarShift: {
-            marginLeft: drawerWidth,
-            width: `calc(100% - ${drawerWidth}px)`,
-            transition: theme.transitions.create(['width', 'margin'], {
-                easing: theme.transitions.easing.sharp,
-                duration: theme.transitions.duration.enteringScreen
-            })
-        },
-        menuButton: {
-            marginRight: 18
-        },
-        menuButtonHidden: {
-            display: 'none'
-        },
-        title: {
-            flexGrow: 1
-        },
-        centerContainer: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-        },
-        drawerPaper: {
-            position: 'relative',
-            whiteSpace: 'nowrap',
-            width: drawerWidth,
-            transition: theme.transitions.create('width', {
-                easing: theme.transitions.easing.sharp,
-                duration: theme.transitions.duration.enteringScreen
-            })
-        },
-        drawerPaperClose: {
-            overflowX: 'hidden',
-            transition: theme.transitions.create('width', {
-                easing: theme.transitions.easing.sharp,
-                duration: theme.transitions.duration.leavingScreen
-            }),
-            width: theme.spacing(7),
-            [theme.breakpoints.up('sm')]: {
-                width: theme.spacing(9)
-            }
-        },
-        content: {
-            // display: 'flex',
-            paddingTop: '50px',
-            height: '100vh',
-            flexGrow: 1,
-            overflow: 'auto'
-        },
-        appBarSpacer: {},
-        container: {
-            paddingTop: theme.spacing(4),
-            paddingBottom: theme.spacing(4)
-        },
-        paper: {
-            padding: theme.spacing(2),
-            display: 'flex',
-            overflow: 'auto',
-            flexDirection: 'column'
-        },
-        fixedHeight: {
-            height: 240
-        },
-        sidebarLogo: {
-            paddingTop: '5px',
-            height: '44px'
-            // marginBottom: theme.spacing(1)
-        },
-        sidebarTitle: {
-            flexGrow: 1,
-            padding: '0px 22px'
-        },
-        actions: {
-            marginLeft: 'auto',
-            alignItems: 'center',
-            display: 'flex'
-        }
-    })
+  createStyles({
+    root: {
+      display: 'flex'
+    },
+    toolbar: {
+      paddingRight: 24 // keep right padding when drawer closed
+    },
+    sidebarHeader: {
+      display: 'flex',
+      alignItems: 'center',
+      // justifyContent: 'center',
+      whiteSpace: 'nowrap',
+      padding: '0 8px',
+      ...theme.mixins.toolbar
+    },
+    appBar: {
+      zIndex: theme.zIndex.drawer + 1,
+      transition: theme.transitions.create(['width', 'margin'], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen
+      })
+    },
+    appBarShift: {
+      marginLeft: drawerWidth,
+      width: `calc(100% - ${drawerWidth}px)`,
+      transition: theme.transitions.create(['width', 'margin'], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen
+      })
+    },
+    menuButton: {
+      marginRight: 18
+    },
+    menuButtonHidden: {
+      display: 'none'
+    },
+    title: {
+      flexGrow: 1
+    },
+    centerContainer: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    drawerPaper: {
+      position: 'relative',
+      whiteSpace: 'nowrap',
+      width: drawerWidth,
+      transition: theme.transitions.create('width', {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen
+      })
+    },
+    drawerPaperClose: {
+      overflowX: 'hidden',
+      transition: theme.transitions.create('width', {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen
+      }),
+      width: theme.spacing(7),
+      [theme.breakpoints.up('sm')]: {
+        width: theme.spacing(9)
+      }
+    },
+    content: {
+      // display: 'flex',
+      paddingTop: '50px',
+      height: '100vh',
+      flexGrow: 1,
+      overflow: 'auto'
+    },
+    appBarSpacer: {},
+    container: {
+      paddingTop: theme.spacing(4),
+      paddingBottom: theme.spacing(4)
+    },
+    paper: {
+      padding: theme.spacing(2),
+      display: 'flex',
+      overflow: 'auto',
+      flexDirection: 'column'
+    },
+    fixedHeight: {
+      height: 240
+    },
+    sidebarLogo: {
+      paddingTop: '5px',
+      height: '44px'
+      // marginBottom: theme.spacing(1)
+    },
+    sidebarTitle: {
+      flexGrow: 1,
+      padding: '0px 22px'
+    },
+    actions: {
+      marginLeft: 'auto',
+      alignItems: 'center',
+      display: 'flex'
+    },
+    inner: {
+      marginLeft: '0.2rem',
+      padding: '8px 8px 8px 0',
+      borderBottom: '1px solid #CCC'
+    }
+  })
 )
 
 const DashboardLayout: React.FunctionComponent<DashboardLayoutProps> = ({
-                                                                            children
+                                                                          children
                                                                         }) => {
-    const history = useHistory()
-    const classes = useStyles()
-    return (
-        <div className={classes.root}>
-            <CssBaseline/>
-            <DashboardBar
-                drawerWidth={drawerWidth}
-                history={history}
-            />
-            <main className={classes.content}>
-                <div className={classes.appBarSpacer}>
-                    <Container maxWidth='xl' className={classes.container}>
-                        {children}
-                    </Container>
-                </div>
-            </main>
+  const history = useHistory()
+  const classes = useStyles()
+  return (
+    <div className={classes.root}>
+      <CssBaseline />
+      <DashboardBar
+        drawerWidth={drawerWidth}
+        history={history}
+      />
+      <main className={classes.content}>
+        <div className={classes.appBarSpacer}>
+          <Container maxWidth='xl' className={classes.container}>
+            {children}
+          </Container>
         </div>
-    )
+      </main>
+    </div>
+  )
 }
 
 export default DashboardLayout
diff --git a/frontend/src/models/hasura/queries/product_tags.ts b/frontend/src/models/hasura/queries/product_tags.ts
@@ -0,0 +1,13 @@
+import gql from 'graphql-tag'
+
+export const LIST_PRODUCT_TAGS = gql`
+  query listProductTags($query: String!) {
+      product_tags(where: {name: {_ilike: $query}}) {
+          id
+          name
+          description
+          created_at
+          updated_at        
+      }
+  }
+`