web - checkin builder layout

Author: joe307bad

Diff for: apps/web/src/app/index.tsx

@@ -43,7 +43,8 @@ const drawerWidth = 240;
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
-      display: 'flex'
+      display: 'flex',
+      height: '100%'
     },
     appBar: {
       width: `calc(100% - ${drawerWidth}px)`,

Diff for: apps/web/src/app/pages/achievement-categories.tsx

@@ -8,6 +8,7 @@ import DeleteIcon from '@material-ui/icons/Delete';
 import { DataGrid, GridColDef } from '@material-ui/data-grid';
 import { IconButton } from '@material-ui/core';
 import db from '@act/data/web';
+import { GridContainer } from '../shared/components/TableContainer';
 
 const columns: GridColDef[] = [
   {
@@ -75,7 +76,7 @@ const AchievementCategories = () => {
   return (
     <main className={classes.content}>
       <div className={classes.toolbar} />
-      <div style={{ height: 400, width: '100%' }}>
+      <GridContainer>
         <DataGrid
           editMode="client"
           rows={achievementCategories}
@@ -84,7 +85,7 @@ const AchievementCategories = () => {
           pageSize={5}
           checkboxSelection
         />
-      </div>
+      </GridContainer>
     </main>
   );
 };

Diff for: apps/web/src/app/pages/achievement.tsx

@@ -10,6 +10,7 @@ import { IconButton, NativeSelect, Select } from '@material-ui/core';
 import MenuItem from '@material-ui/core/MenuItem';
 import db from '@act/data/web';
 import { Achievement, AchievementCategory } from '@act/data/core';
+import { GridContainer } from '../shared/components/TableContainer';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -138,7 +139,7 @@ const Achievements = () => {
   return (
     <main className={classes.content}>
       <div className={classes.toolbar} />
-      <div style={{ height: 400, width: '100%' }}>
+      <GridContainer>
         <DataGrid
           editMode="client"
           rows={achievements}
@@ -147,7 +148,7 @@ const Achievements = () => {
           pageSize={5}
           checkboxSelection
         />
-      </div>
+      </GridContainer>
     </main>
   );
 };

Diff for: apps/web/src/app/pages/checkins.tsx

@@ -1,13 +1,16 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   createStyles,
   Theme,
   makeStyles
 } from '@material-ui/core/styles';
 import { DataGrid, GridColDef } from '@material-ui/data-grid';
 import db from '@act/data/web';
-import { Checkin } from '@act/data/core';
+import { AchievementCategory, Checkin } from '@act/data/core';
 import { CreateCheckin } from '../shared/components/CreateCheckin';
+import { GridContainer } from '../shared/components/TableContainer';
+import { IconButton, MenuItem, Select } from '@material-ui/core';
+import DeleteIcon from '@material-ui/icons/Delete';
 
 const Checkins = ({ open, onDismiss }) => {
   const classes = useStyles();
@@ -35,30 +38,13 @@ const Checkins = ({ open, onDismiss }) => {
     [checkins]
   );
 
-  const [personName, setPersonName] = React.useState([]);
-  const handleChange = (event) => {
-    setPersonName(event.target.value);
-  };
-
-  const names = [
-    'Oliver Hansen',
-    'Van Henry',
-    'April Tucker',
-    'Ralph Hubbard',
-    'Omar Alexander',
-    'Carlos Abbott',
-    'Miriam Wagner',
-    'Bradley Wilkerson',
-    'Virginia Andrews',
-    'Kelly Snyder'
-  ];
-
   return (
-    <>
-      <CreateCheckin onDismiss={onDismiss} open={open} />
-      <main className={classes.content}>
-        <div className={classes.toolbar} />
-        <div style={{ height: 1000, width: '100%' }}>
+    <main className={classes.content}>
+      <div className={classes.toolbar} />
+      <GridContainer>
+        {open ? (
+          <CreateCheckin onDismiss={onDismiss} />
+        ) : (
           <DataGrid
             editMode="client"
             rows={checkins}
@@ -67,9 +53,9 @@ const Checkins = ({ open, onDismiss }) => {
             pageSize={100}
             checkboxSelection
           />
-        </div>
-      </main>
-    </>
+        )}
+      </GridContainer>
+    </main>
   );
 };
 
@@ -84,6 +70,25 @@ const columns: GridColDef[] = [
     field: 'created_at',
     headerName: 'Created',
     width: 200
+  },
+  {
+    field: '',
+    filterable: false,
+    width: 200,
+    disableColumnMenu: true,
+    sortable: false,
+    disableClickEventBubbling: true,
+    renderCell: ({ id }) => {
+      return (
+        <IconButton
+          onClick={() => db.models.communities.delete(id)}
+          aria-label="delete"
+          color="secondary"
+        >
+          <DeleteIcon />
+        </IconButton>
+      );
+    }
   }
 ];
 
@@ -94,7 +99,6 @@ const useStyles = makeStyles((theme: Theme) =>
       backgroundColor: theme.palette.background.default,
       padding: theme.spacing(3)
     },
-
     formControl: {
       margin: theme.spacing(1),
       minWidth: 120,

Diff for: apps/web/src/app/pages/communities.tsx

@@ -8,6 +8,7 @@ import DeleteIcon from '@material-ui/icons/Delete';
 import { DataGrid, GridColDef } from '@material-ui/data-grid';
 import { IconButton } from '@material-ui/core';
 import db from '@act/data/web';
+import { GridContainer } from '../shared/components/TableContainer';
 
 const columns: GridColDef[] = [
   {
@@ -67,7 +68,7 @@ const Communities = () => {
   return (
     <main className={classes.content}>
       <div className={classes.toolbar} />
-      <div style={{ height: 400, width: '100%' }}>
+      <GridContainer>
         <DataGrid
           editMode="client"
           rows={communities}
@@ -76,7 +77,7 @@ const Communities = () => {
           pageSize={5}
           checkboxSelection
         />
-      </div>
+      </GridContainer>
     </main>
   );
 };