Add grid page

Author: Blari

package.json

@@ -43,12 +43,14 @@
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
+    "react-sortablejs": "^1.5.1",
     "react-swipeable-views": "^0.14.0",
     "react-swipeable-views-utils": "^0.14.0",
     "react-syntax-highlighter": "^11.0.2",
     "recharts": "^2.1.10",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
+    "sortablejs": "^1.15.0",
     "tinycolor2": "^1.4.2",
     "typescript": "^4.1.2",
     "url-loader": "2.3.0",
@@ -72,6 +74,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/sortablejs": "^1.13.0",
     "cross-env": "^7.0.3",
     "eslint-plugin-css-modules": "^2.11.0",
     "sass": "^1.45.0"

src/components/Layout/Layout.js

@@ -53,6 +53,8 @@ import LineCharts from '../../pages/charts/LineCharts'
 import BarCharts from '../../pages/charts/BarCharts'
 import PieCharts from '../../pages/charts/PieCharts'
 
+import DraggableGrid from '../../pages/draggablegrid'
+
 import BreadCrumbs from '../../components/BreadCrumbs';
 
 // context
@@ -125,6 +127,8 @@ function Layout(props) {
           <Route path="/app/charts/bar" component={BarCharts} />
           <Route path="/app/charts/pie" component={PieCharts} />
 
+          <Route path="/app/grid" component={DraggableGrid} />
+
           />
 
           <Route path={'/app/api-docs'} exact

src/components/Sidebar/SidebarStructure.js

@@ -17,8 +17,9 @@ import {
   FolderOpen as FolderIcon,
   Description as DocumentationIcon,
   Person as PersonIcon,
-  AccountCircle as ProfileIcon,
+  AccountCircle as ProfileIcon
 } from '@mui/icons-material';
+import ViewCompactRoundedIcon from '@mui/icons-material/ViewCompactRounded';
 import { makeStyles } from '@mui/styles';
 
 // components
@@ -159,6 +160,12 @@ const structure = [
       { label: 'Pie Charts', link: '/app/charts/pie' },
     ],
   },
+  {
+    id: 200,
+    label: 'Grid',
+    link: '/app/grid',
+    icon: <ViewCompactRoundedIcon />,
+  },
 ];
 
 export default structure;

src/images/grid/a1.jpg

@@ -0,0 +1,125 @@
+import React from 'react';
+import { withStyles } from '@mui/styles';
+import { Typography, Grid, FormGroup, FormLabel, TextField } from '@mui/material';
+import { Button } from "../../../components/Wrappers";
+
+const styles = (theme) => ({
+  header: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 10,
+  },
+  headerText: {
+    textAlign: 'center',
+  },
+  description: {
+    fontSize: '1.25rem',
+    padding: '5px 30px 15px',
+    textAlign: 'center',
+    color: theme.palette.text.secondary
+  },
+  label: {
+    margin: '5px 0',
+  },
+  blocksMargin: {
+    marginBottom: '1rem',
+  },
+  buttonsGroup: {
+    display: 'flex',
+    flexDirection: 'row',
+    float: 'right',
+  },
+  button: {
+    marginLeft: '1rem',
+  },
+  formLabels: {
+    padding: 0,
+    margin: 0,
+  },
+});
+
+const AutoloadWidget = ({ classes }) => {
+  return (
+    <Grid container direction={'column'} >
+      <Grid item className={classes.header} xs={12}>
+        <Typography variant="h2" className={classes.headerText}>Sign up, it&apos;s <strong>free</strong>!</Typography>
+        <div className={classes.description} >
+        Faith makes it possible to achieve that which man&apos;s mind can conceive and believe.
+        </div>
+      </Grid>
+      <Grid container direction={'column'} xs={12}>
+        <Grid item className={classes.blocksMargin}>
+          <FormGroup>
+            <div className={classes.formLabels}>
+              <FormLabel for="exampleInputEmail1">&nbsp; Email address</FormLabel>
+            </div>
+            <TextField
+              id="exampleInputEmail1"
+              type="email" 
+              placeholder="Enter email"
+              margin="dense"
+              variant="outlined"
+              fullWidth
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item className={classes.blocksMargin}>
+          <FormGroup>
+            <div className={classes.formLabels}>
+              <FormLabel for="pswd"><i /> &nbsp; Password</FormLabel>
+            </div>
+            <TextField 
+              id="pswd" 
+              type="text" 
+              placeholder="Min 8 characters"
+              margin="dense"
+              variant="outlined"
+              fullWidth
+            />
+          </FormGroup>
+        </Grid>
+        <Grid item>
+          <Typography className={classes.blocksMargin}>
+            To make a widget automatically load it's content you just need to set <strong>autoload</strong> attribute and provide an api to update the widget content.
+          </Typography>
+          <TextField
+            id="outlined-read-only-input"
+            defaultValue="<Widget updateWidgetData={this.updateWidgetData}/>"
+            size="small"
+            InputProps={{
+              readOnly: true,
+            }}
+            variant="outlined"
+            fullWidth
+            margin="normal"
+          >
+          </TextField>
+
+          {/* <pre><code>&lt;Widget updateWidgetData={"{this.updateWidgetData}"} /&gt;</code></pre> */}
+          <Typography className={classes.blocksMargin}>
+            <strong>autoload</strong> may be set to an integer value. If set, for example, to 2000 will refresh widget every 2 seconds.
+          </Typography>
+          <div className={classes.buttonsGroup}>
+            <Button
+              variant="contained"
+            >
+              Cancel
+            </Button>
+            <Button
+              className={classes.button}
+              color="success"
+              variant="contained"
+            >
+              &nbsp;Submit&nbsp;
+            </Button>
+          </div>
+
+        </Grid>
+      </Grid>
+    </Grid>
+  )
+}
+
+export default withStyles(styles)(AutoloadWidget);