Add date picker

nishanbajracharya · Oct 25, 2020 · a079c20 · a079c20
1 parent e8429c8
commit a079c20
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 38 deletions.
diff --git a/package.json b/package.json
@@ -3,9 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@date-io/date-fns": "1.x",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
+    "@material-ui/pickers": "^3.2.10",
     "@testing-library/jest-dom": "^5.11.5",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -17,9 +19,11 @@
     "@types/react-router-dom": "^5.1.6",
     "@types/yup": "^0.29.8",
     "case": "^1.6.3",
+    "date-fns": "^2.16.1",
     "firebase": "^7.24.0",
     "formik": "^2.2.0",
     "formik-material-ui": "^3.0.0",
+    "formik-material-ui-pickers": "^0.0.11",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-firebase-hooks": "^2.2.0",

diff --git a/src/services/collection.ts b/src/services/collection.ts
@@ -144,7 +144,7 @@ export function updateSchema(
     if (collection === col.collectionName) {
       return {
         ...col,
-        fields: fields.map((field) => ({ ...field, value: '' })),
+        fields: fields.map((field) => ({ ...field, value: null })),
       };
     }
 

diff --git a/src/views/Root.tsx b/src/views/Root.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
+import DateFnsUtils from '@date-io/date-fns';
 import blue from '@material-ui/core/colors/blue';
 import grey from '@material-ui/core/colors/grey';
 import orange from '@material-ui/core/colors/deepOrange';
+import { MuiPickersUtilsProvider } from '@material-ui/pickers';
 import { unstable_createMuiStrictModeTheme as createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 
 import App from './App';
@@ -26,7 +28,9 @@ const theme = createMuiTheme({
 function Root() {
   return (
     <ThemeProvider theme={theme}>
-      <App />
+      <MuiPickersUtilsProvider utils={DateFnsUtils}>
+        <App />
+      </MuiPickersUtilsProvider>
     </ThemeProvider>
   );
 }

diff --git a/src/views/common/AppBar.tsx b/src/views/common/AppBar.tsx
@@ -27,7 +27,8 @@ const useStyles = makeStyles(theme => ({
     flexGrow: 1,
   },
   avatar: {
-    border: '2px solid #fff'
+    border: '2px solid #fff',
+    background: theme.palette.secondary.light,
   },
   modal: {
     display: 'flex',
@@ -61,6 +62,14 @@ const useStyles = makeStyles(theme => ({
   topMargin: {
     marginTop: theme.spacing(2),
   },
+  guestBanner: {
+    fontWeight: 500,
+    textAlign: 'center',
+    padding: theme.spacing(2),
+    boxShadow: theme.shadows[2],
+    color: theme.palette.common.white,
+    background: theme.palette.primary.light,
+  },
 }));
 
 function AppBarComponent() {
@@ -120,7 +129,7 @@ function AppBarComponent() {
               onClick={handleMenu}
               color="inherit"
             >
-              <Avatar alt={user?.displayName || 'User'} src={user?.photoURL || undefined} className={classes.avatar} />
+              <Avatar alt={user?.displayName || 'User'} src={user?.photoURL || undefined} className={classes.avatar}>{user?.displayName ? user.displayName[0] : 'M'}</Avatar>
             </IconButton>
             <Menu
               id="menu-appbar"
@@ -144,6 +153,7 @@ function AppBarComponent() {
           </div>
         </Toolbar>
       </AppBar>
+      {guestUser && <div className={classes.guestBanner}>Guest user. View only mode enabled.</div>}
       <Modal
         isOpen={openModal}
         className={classes.modal}

diff --git a/src/views/home/documents/DocumentForm.tsx b/src/views/home/documents/DocumentForm.tsx
@@ -7,8 +7,11 @@ import Button from '@material-ui/core/Button';
 import { TextField } from 'formik-material-ui';
 import MenuItem from '@material-ui/core/MenuItem';
 import DeleteIcon from '@material-ui/icons/Delete';
+import InputLabel from '@material-ui/core/InputLabel';
 import { makeStyles } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
+import FormControl from '@material-ui/core/FormControl';
+import { DatePicker } from 'formik-material-ui-pickers';
 import { Formik, Form, Field, FieldArray } from 'formik';
 import CircularProgress from '@material-ui/core/CircularProgress';
 
@@ -45,6 +48,52 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
 
+type FieldValueProps = {
+  index: number;
+  type: string | undefined;
+};
+
+function FieldValue(props: FieldValueProps) {
+  if (props.type === 'boolean') {
+    return <FormControl fullWidth>
+      <InputLabel htmlFor={`field-value-${props.index}`} variant="outlined">Value</InputLabel>
+      <Field
+        component={Select}
+        name={`fields.${props.index}.value`}
+        type="text"
+        label="Value"
+        variant="outlined"
+        fullWidth
+        inputProps={{
+          id: `field-value-${props.index}`,
+        }}
+      >
+        <MenuItem value="true">True</MenuItem>
+        <MenuItem value="false">False</MenuItem>
+      </Field>
+    </FormControl>
+  }
+
+  if (props.type === 'date') {
+    return <Field
+      component={DatePicker}
+      name={`fields.${props.index}.value`}
+      label="Value"
+      inputVariant="outlined"
+      fullWidth
+    />
+  }
+
+  return <Field
+    component={TextField}
+    name={`fields.${props.index}.value`}
+    type={props.type}
+    label="Value"
+    variant="outlined"
+    fullWidth
+  />
+}
+
 function DocumentField(props: DocumentFieldComponentProps) {
   const classes = useStyles();
 
@@ -76,45 +125,31 @@ function DocumentField(props: DocumentFieldComponentProps) {
               />
             </Grid>
             <Grid item xs={12} sm={2}>
-              <Field
-                component={Select}
-                name={`fields.${index}.type`}
-                type="text"
-                label="Type"
-                variant="outlined"
-                fullWidth
-              >
-                <MenuItem value="string">String</MenuItem>
-                <MenuItem value="number">Number</MenuItem>
-                <MenuItem value="date">Date</MenuItem>
-                <MenuItem value="boolean">Boolean</MenuItem>
-              </Field>
-            </Grid>
-            <Grid item xs={12} sm={lastItem ? 3 : 4}>
-              {field.type === 'boolean' ?
+              <FormControl fullWidth>
+                <InputLabel htmlFor={`field-type-${index}`} variant="outlined">Type</InputLabel>
                 <Field
                   component={Select}
-                  name={`fields.${index}.value`}
+                  name={`fields.${index}.type`}
                   type="text"
-                  label="Value"
+                  label="Type"
                   variant="outlined"
                   fullWidth
+                  inputProps={{
+                    id: `field-type-${index}`,
+                  }}
                 >
-                  <MenuItem value="true">True</MenuItem>
-                  <MenuItem value="false">False</MenuItem>
-                </Field> :
-                <Field
-                  component={TextField}
-                  name={`fields.${index}.value`}
-                  type={field.type}
-                  label="Value"
-                  variant="outlined"
-                  fullWidth
-                />
-              }
+                  <MenuItem value="string">String</MenuItem>
+                  <MenuItem value="number">Number</MenuItem>
+                  <MenuItem value="date">Date</MenuItem>
+                  <MenuItem value="boolean">Boolean</MenuItem>
+                </Field>
+              </FormControl>
+            </Grid>
+            <Grid item xs={12} sm={lastItem ? 3 : 4}>
+              <FieldValue type={field.type} index={index} />
             </Grid>
             {lastItem && <Grid item xs={12} sm={1}>
-              <IconButton onClick={() => props.arrayHelpers.push({ type: 'string', label: '', value: '', displayLabel: '' })}>
+              <IconButton onClick={() => props.arrayHelpers.push({ type: 'string', label: '', value: null, displayLabel: '' })}>
                 <AddIcon />
               </IconButton>
             </Grid>}

diff --git a/yarn.lock b/yarn.lock
@@ -963,7 +963,7 @@
     core-js-pure "^3.0.0"
     regenerator-runtime "^0.13.4"
 
-"@babel/[email protected]", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.10.5", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/[email protected]", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.10.5", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.0", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.12.1"
   resolved "https://verdaccio.singularkey.com/@babel%2fruntime/-/runtime-7.12.1.tgz#b4116a6b6711d010b2dad3b7b6e43bf1b9954740"
   integrity sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA==
@@ -1026,6 +1026,18 @@
   resolved "https://verdaccio.singularkey.com/@csstools%2fnormalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
+"@date-io/[email protected]", "@date-io/core@^1.3.13":
+  version "1.3.13"
+  resolved "https://verdaccio.singularkey.com/@date-io%2fcore/-/core-1.3.13.tgz#90c71da493f20204b7a972929cc5c482d078b3fa"
+  integrity sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA==
+
+"@date-io/[email protected]":
+  version "1.3.13"
+  resolved "https://verdaccio.singularkey.com/@date-io%2fdate-fns/-/date-fns-1.3.13.tgz#7798844041640ab393f7e21a7769a65d672f4735"
+  integrity sha512-yXxGzcRUPcogiMj58wVgFjc9qUYrCnnU9eLcyNbsQCmae4jPuZCDoIBR21j8ZURsM7GRtU62VOw5yNd4dDHunA==
+  dependencies:
+    "@date-io/core" "^1.3.13"
+
 "@emotion/hash@^0.8.0":
   version "0.8.0"
   resolved "https://verdaccio.singularkey.com/@emotion%2fhash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
@@ -1555,6 +1567,18 @@
     prop-types "^15.7.2"
     react-is "^16.8.0"
 
+"@material-ui/pickers@^3.2.10":
+  version "3.2.10"
+  resolved "https://verdaccio.singularkey.com/@material-ui%2fpickers/-/pickers-3.2.10.tgz#19df024895876eb0ec7cd239bbaea595f703f0ae"
+  integrity sha512-B8G6Obn5S3RCl7hwahkQj9sKUapwXWFjiaz/Bsw1fhYFdNMnDUolRiWQSoKPb1/oKe37Dtfszoywi1Ynbo3y8w==
+  dependencies:
+    "@babel/runtime" "^7.6.0"
+    "@date-io/core" "1.x"
+    "@types/styled-jsx" "^2.2.8"
+    clsx "^1.0.2"
+    react-transition-group "^4.0.0"
+    rifm "^0.7.0"
+
 "@material-ui/styles@^4.10.0":
   version "4.10.0"
   resolved "https://verdaccio.singularkey.com/@material-ui%2fstyles/-/styles-4.10.0.tgz#2406dc23aa358217aa8cc772e6237bd7f0544071"
@@ -2126,6 +2150,13 @@
   resolved "https://verdaccio.singularkey.com/@types%2fstack-utils/-/stack-utils-2.0.0.tgz#7036640b4e21cc2f259ae826ce843d277dad8cff"
   integrity sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw==
 
+"@types/styled-jsx@^2.2.8":
+  version "2.2.8"
+  resolved "https://verdaccio.singularkey.com/@types%2fstyled-jsx/-/styled-jsx-2.2.8.tgz#b50d13d8a3c34036282d65194554cf186bab7234"
+  integrity sha512-Yjye9VwMdYeXfS71ihueWRSxrruuXTwKCbzue4+5b2rjnQ//AtyM7myZ1BEhNhBQ/nL/RE7bdToUoLln2miKvg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/tapable@*", "@types/tapable@^1.0.5":
   version "1.0.6"
   resolved "https://verdaccio.singularkey.com/@types%2ftapable/-/tapable-1.0.6.tgz#a9ca4b70a18b270ccb2bc0aaafefd1d486b7ea74"
@@ -3616,7 +3647,7 @@ clone-deep@^4.0.1:
     kind-of "^6.0.2"
     shallow-clone "^3.0.0"
 
-clsx@^1.0.4:
+clsx@^1.0.2, clsx@^1.0.4:
   version "1.1.1"
   resolved "https://verdaccio.singularkey.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
   integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
@@ -4252,6 +4283,11 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
+date-fns@^2.16.1:
+  version "2.16.1"
+  resolved "https://verdaccio.singularkey.com/date-fns/-/date-fns-2.16.1.tgz#05775792c3f3331da812af253e1a935851d3834b"
+  integrity sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ==
+
 [email protected], debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   version "2.6.9"
   resolved "https://verdaccio.singularkey.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -5536,6 +5572,11 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+formik-material-ui-pickers@^0.0.11:
+  version "0.0.11"
+  resolved "https://verdaccio.singularkey.com/formik-material-ui-pickers/-/formik-material-ui-pickers-0.0.11.tgz#c73d6d42170d2dd18ebe34f3b6b4549dbc8b447a"
+  integrity sha512-YVY5v0585rHlDneNBEQ1YnJVNhgieqbJjnojvB2GgeR/4Za5P0UdGpo5V9WvajtaAFJRpm7U9/TTcoUl5uiyxQ==
+
 formik-material-ui@^3.0.0:
   version "3.0.0"
   resolved "https://verdaccio.singularkey.com/formik-material-ui/-/formik-material-ui-3.0.0.tgz#70d987f58dbf51fe11118a4ca26f5f61613133bd"
@@ -9921,7 +9962,7 @@ react-toastify@^6.0.9:
     prop-types "^15.7.2"
     react-transition-group "^4.4.1"
 
-react-transition-group@^4.4.0, react-transition-group@^4.4.1:
+react-transition-group@^4.0.0, react-transition-group@^4.4.0, react-transition-group@^4.4.1:
   version "4.4.1"
   resolved "https://verdaccio.singularkey.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
   integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==
@@ -10304,6 +10345,13 @@ rgba-regex@^1.0.0:
   resolved "https://verdaccio.singularkey.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
   integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
 
+rifm@^0.7.0:
+  version "0.7.0"
+  resolved "https://verdaccio.singularkey.com/rifm/-/rifm-0.7.0.tgz#debe951a9c83549ca6b33e5919f716044c2230be"
+  integrity sha512-DSOJTWHD67860I5ojetXdEQRIBvF6YcpNe53j0vn1vp9EUb9N80EiZTxgP+FkDKorWC8PZw052kTF4C1GOivCQ==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+
 [email protected]:
   version "2.6.3"
   resolved "https://verdaccio.singularkey.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"