Adding placeholders for load/save to database feature. Tweaked naming

nielsdejong · nielsdejong · commit 3deac29011ff · 2021-11-27T22:06:26.000+01:00
diff --git a/src/card/settings/custom/CardSettingsContentPropertySelect.tsx b/src/card/settings/custom/CardSettingsContentPropertySelect.tsx
@@ -83,7 +83,7 @@ const NeoCardSettingsContentPropertySelect = ({ type, database, query, onQueryUp
             id="autocomplete-property"
             options={propertyRecords.map(r => r["_fields"] ? r["_fields"][0] : "(no data)")}
             getOptionLabel={(option) => option}
-            style={{ display: "inline-block", width: 250, marginLeft: "5px", marginTop: "5px" }}
+            style={{ display: "inline-block", width: 200, marginLeft: "5px", marginTop: "5px" }}
             inputValue={propertyInputText}
             onInputChange={(event, value) => {
                 setPropertyInputText(value);
@@ -104,9 +104,9 @@ const NeoCardSettingsContentPropertySelect = ({ type, database, query, onQueryUp
             }}
             renderInput={(params) => <TextField {...params}  placeholder="Start typing..." InputLabelProps={{ shrink: true }} label={"Property Name"} />}
         />
-        <NeoFieldSelection placeholder='id'
-            label="ID (optional)" numeric={true} value={idValue}
-            style={{ width: "90px", marginTop: "5px", marginLeft: "10px" }}
+        <NeoFieldSelection placeholder='number'
+            label="Number (optional)" numeric={true} value={idValue}
+            style={{ width: "140px", marginTop: "5px", marginLeft: "10px" }}
             onChange={(value) => {
                 const newValue = value ? "_" + value : "";
                 setIdValue(value);
diff --git a/src/config/ReportConfig.tsx b/src/config/ReportConfig.tsx
@@ -265,7 +265,7 @@ export const REPORT_TYPES = {
                 label: "Show Legend",
                 type: SELECTION_TYPES.LIST,
                 values: [true, false],
-                default: true
+                default: false
             },
             "colors": {
                 label: "Color Scheme",
diff --git a/src/dashboard/DashboardThunks.tsx b/src/dashboard/DashboardThunks.tsx
@@ -1,6 +1,18 @@
 import { createNotificationThunk } from "../page/PageThunks";
-import { setPageNumber, updateDashboardSetting } from "../settings/SettingsActions";
+import { updateDashboardSetting } from "../settings/SettingsActions";
 import { addPage, removePage, resetDashboardState, setDashboard } from "./DashboardActions";
+import { runCypherQuery } from "../report/CypherQueryRunner";
+
+
+function createUUID() {
+    var dt = new Date().getTime();
+    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        var r = (dt + Math.random() * 16) % 16 | 0;
+        dt = Math.floor(dt / 16);
+        return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+    });
+    return uuid;
+}
 
 
 export const removePageThunk = (number) => (dispatch: any, getState: any) => {
@@ -94,4 +106,27 @@ export const loadDashboardThunk = (text) => (dispatch: any, getState: any) => {
     } catch (e) {
         dispatch(createNotificationThunk("Unable to load dashboard", e));
     }
+}
+
+export const saveDashboardToNeo4jThunk = (dashboard, date, user) => (dispatch: any, getState: any) => {
+    try {
+        const uuid = createUUID();
+        const title = dashboard.title;
+        // const user = user;
+        // const date = date;
+        const version = dashboard.version;
+        const content = dashboard;
+        console.log(uuid);
+        dispatch(createNotificationThunk("Unable to save dashboard to Neo4j", ""));
+    } catch (e) {
+        dispatch(createNotificationThunk("Unable to save dashboard to Neo4j", e));
+    }
+}
+
+export const loadDashboardFromNeo4jThunk = (driver, uuid, callback) => (dispatch: any, getState: any) => {
+    try {
+        runCypherQuery(driver, getState().application.connection.database, "RETURN $uuid as dashboard", {uuid: uuid}, {}, ["dashboard"], 1, () => { return }, (records) => callback(records[0]['_fields'][0]))
+    } catch (e) {
+        dispatch(createNotificationThunk("Unable to load dashboard to Neo4j", e));
+    }
 }
diff --git a/src/modal/LoadModal.tsx b/src/modal/LoadModal.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
 import DialogContent from '@material-ui/core/DialogContent';
@@ -14,7 +14,10 @@ import { connect } from "react-redux";
 import SystemUpdateAltIcon from '@material-ui/icons/SystemUpdateAlt';
 import PostAddIcon from '@material-ui/icons/PostAdd';
 import StorageIcon from '@material-ui/icons/Storage';
-import { loadDashboardThunk } from '../dashboard/DashboardThunks';
+import { loadDashboardFromNeo4jThunk, loadDashboardThunk } from '../dashboard/DashboardThunks';
+import { DataGrid } from '@mui/x-data-grid';
+import { Neo4jContext, Neo4jContextState } from "use-neo4j/dist/neo4j.context";
+
 /**
  * A modal to save a dashboard as a JSON text string.
  * The button to open the modal is intended to use in a drawer at the side of the page.
@@ -24,25 +27,37 @@ const styles = {
 
 };
 
-export const NeoLoadModal = ({ loadDashboard }) => {
-    const [open, setOpen] = React.useState(false);
+export const NeoLoadModal = ({ loadDashboard, loadDashboardFromNeo4j, connection }) => {
+    const [loadModalOpen, setLoadModalOpen] = React.useState(false);
+    const [loadFromNeo4jModalOpen, setLoadFromNeo4jModalOpen] = React.useState(false);
     const [text, setText] = React.useState("");
+    const [rows, setRows] = React.useState([]);
+    const { driver } = useContext<Neo4jContextState>(Neo4jContext);
 
     const handleClickOpen = () => {
-        setOpen(true);
+        setLoadModalOpen(true);
     };
 
     const handleClose = () => {
-        setOpen(false);
+        setLoadModalOpen(false);
     };
 
 
     const handleCloseAndLoad = () => {
-        setOpen(false);
+        setLoadModalOpen(false);
         loadDashboard(text);
         setText("");
     };
 
+    function handleDashboardLoadedFromNeo4j(result){
+        setText(result);
+        setLoadFromNeo4jModalOpen(false);
+    }
+
+    function handleGetDashboardListLoadedFromNeo4j(result){
+        setRows(result);
+    }
+
     const reader = new FileReader();
     reader.onload = async (e) => {
         setText(e.target.result);
@@ -51,9 +66,29 @@ export const NeoLoadModal = ({ loadDashboard }) => {
     const uploadDashboard = async (e) => {
         e.preventDefault();
         reader.readAsText(e.target.files[0]);
-
     }
 
+    const columns = [
+        { field: 'id', hide: true, headerName: 'ID', width: 150 },
+        { field: 'date', headerName: 'Date', width: 200 },
+        { field: 'title', headerName: 'Title', width: 270 },
+        { field: 'author', headerName: 'Author', width: 160 },
+        {
+            field: 'load', headerName: ' ', renderCell: (c) => {
+                return <Button onClick={(e) => { loadDashboardFromNeo4j(driver, c.id, handleDashboardLoadedFromNeo4j) }} style={{ float: "right" }} variant="contained" size="medium" endIcon={<PlayArrow />}>Select</Button>
+            }, width: 120
+        },
+    ]
+
+    // const rows = [
+    //     { id: '6c7a822c-243b-4ed5-ac2d-1ab9d84ae8e0', title: 'My Covid Dashboard Name', date: 'Nov 27 2021 21:08:09', author: 'neo4j', load: <b>Load</b> },
+    //     { id: '6c7a822c-243b-4ed5-ac2d-1ab9d84ae8e1', title: 'Mark', date: 'Nov 27 2021 21:07:09', author: 'neo4j', load: <b>Load</b> },
+    //     { id: '6c7a822c-243b-4ed5-ac2d-1ab9d84ae8e2', title: 'Mark', date: 'Nov 27 2021 21:07:09', author: 'neo4j', load: <b>Load</b> },
+    //     { id: '6c7a822c-243b-4ed5-ac2d-1ab9d84ae8e3', title: 'Mark', date: 'Nov 27 2021 21:07:09', author: 'neo4j', load: <b>Load</b> },
+    //     { id: '6c7a822c-243b-4ed5-ac2d-1ab9d84ae8e4', title: 'Mark', date: 'Nov 27 2021 21:07:09', author: 'neo4j', load: <b>Load</b> },
+    //     { id: '6c7a822c-243b-4ed5-ac2d-1ab9d84ae8e5', title: 'Mark', date: 'Nov 27 2021 21:07:09', author: 'neo4j', load: <b>Load</b> },
+    // ];
+
     return (
         <div>
             <ListItem button onClick={handleClickOpen}>
@@ -65,7 +100,7 @@ export const NeoLoadModal = ({ loadDashboard }) => {
                 <ListItemText primary="Load" />
             </ListItem>
 
-            <Dialog maxWidth={"lg"} open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
+            <Dialog maxWidth={"lg"} open={loadModalOpen} onClose={handleClose} aria-labelledby="form-dialog-title">
                 <DialogTitle id="form-dialog-title">
                     <SystemUpdateAltIcon style={{
                         height: "30px",
@@ -101,17 +136,13 @@ export const NeoLoadModal = ({ loadDashboard }) => {
                         </Button>
                         <Button
                             component="label"
-                            // onClick={(e)=>uploadDashboard(e)}
+                            onClick={(e) => setLoadFromNeo4jModalOpen(true)}
                             style={{ marginLeft: "10px", marginBottom: "10px", backgroundColor: "white" }}
                             color="default"
                             variant="contained"
                             size="medium"
                             endIcon={<StorageIcon />}>
-                            <input
-                                type="file"
-                                onChange={(e) => uploadDashboard(e)}
-                                hidden
-                            />
+
                             Select From Neo4j
                         </Button>
                         <Button onClick={(text.length > 0) ? handleCloseAndLoad : null}
@@ -137,16 +168,45 @@ export const NeoLoadModal = ({ loadDashboard }) => {
                 {/* <DialogActions> */}
                 {/* </DialogActions> */}
             </Dialog>
+            <Dialog maxWidth={"lg"} open={loadFromNeo4jModalOpen} onClose={(e) => { setLoadFromNeo4jModalOpen(false) }} aria-labelledby="form-dialog-title">
+                <DialogTitle id="form-dialog-title">
+                    Load From Neo4j
+                    <IconButton onClick={(e) => { setLoadFromNeo4jModalOpen(false) }} style={{ padding: "3px", float: "right" }}>
+                        <Badge badgeContent={""} >
+                            <CloseIcon />
+                        </Badge>
+                    </IconButton>
+                </DialogTitle>
+                <DialogContent style={{ width: "800px" }}>
+                    <DialogContentText>If dashboards are saved in your current database, choose a dashboard below.
+                    </DialogContentText>
+
+                    <div style={{ height: "360px" }}>
+                        <DataGrid
+                            rows={rows}
+                            columns={columns}
+                            pageSize={5}
+                            rowsPerPageOptions={[5]}
+                            disableSelectionOnClick
+                            components={{
+                                ColumnSortedDescendingIcon: () => <></>,
+                                ColumnSortedAscendingIcon: () => <></>,
+                            }}
+                        /></div>
+
+                </DialogContent>
+            </Dialog>
         </div>
     );
 }
 
 const mapStateToProps = state => ({
-
 });
 
 const mapDispatchToProps = dispatch => ({
     loadDashboard: text => dispatch(loadDashboardThunk(text)),
+    loadDashboardFromNeo4j: (driver, uuid, callback) => dispatch(loadDashboardFromNeo4jThunk(driver, uuid, callback)),
+    loadDashboardListFromNeo4j: (driver, callback) => dispatch(loadDashboardListFromNeo4jThunk(driver, callback)),
 });
 
 //  
diff --git a/src/modal/SaveModal.tsx b/src/modal/SaveModal.tsx
@@ -19,6 +19,8 @@ import { connect } from "react-redux";
 import { getDashboardJson } from './ModalSelectors';
 import { valueIsArray, valueIsObject } from '../report/RecordProcessing';
 import StorageIcon from '@material-ui/icons/Storage';
+import { applicationGetConnection } from '../application/ApplicationSelectors';
+import { saveDashboardToNeo4jThunk } from '../dashboard/DashboardThunks';
 
 /**
  * A modal to save a dashboard as a JSON text string.
@@ -45,7 +47,6 @@ const filterNestedDict = (value: any, removedKeys: any[]) => {
     if (valueIsObject(value)) {
         const newValue = {};
         Object.keys(value).forEach(k => {
-
             if (removedKeys.indexOf(k) != -1) {
                 newValue[k] = undefined;
             } else {
@@ -56,15 +57,19 @@ const filterNestedDict = (value: any, removedKeys: any[]) => {
     }
     return value;
 }
-export const NeoSaveModal = ({ dashboard }) => {
-    const [open, setOpen] = React.useState(false);
+
+
+
+export const NeoSaveModal = ({ dashboard, connection, saveDashboardToNeo4j}) => {
+    const [saveModalOpen, setSaveModalOpen] = React.useState(false);
+    const [saveToNeo4jModalOpen, setSaveToNeo4jModalOpen] = React.useState(false);
 
     const handleClickOpen = () => {
-        setOpen(true);
+        setSaveModalOpen(true);
     };
 
     const handleClose = () => {
-        setOpen(false);
+        setSaveModalOpen(false);
     };
 
     const filteredDashboard = filterNestedDict(dashboard, ["fields", "settingsOpen", "advancedSettingsOpen", "collapseTimeout"]);
@@ -89,7 +94,7 @@ export const NeoSaveModal = ({ dashboard }) => {
                 <ListItemText primary="Save" />
             </ListItem>
 
-            <Dialog maxWidth={"lg"} open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
+            <Dialog maxWidth={"lg"} open={saveModalOpen} onClose={handleClose} aria-labelledby="form-dialog-title">
                 <DialogTitle id="form-dialog-title">
                     <SaveIcon style={{
                         height: "30px",
@@ -119,7 +124,7 @@ export const NeoSaveModal = ({ dashboard }) => {
                     </Button>
                     <Button
                         component="label"
-                        onClick={downloadDashboard}
+                        onClick={(e) => { setSaveToNeo4jModalOpen(true) }}
                         style={{ backgroundColor: "white", marginLeft: "10px" }}
                         color="default"
                         variant="contained"
@@ -139,16 +144,69 @@ export const NeoSaveModal = ({ dashboard }) => {
 
                 </DialogActions>
             </Dialog>
+
+            <Dialog maxWidth={"lg"} open={saveToNeo4jModalOpen} onClose={(e) => { setSaveToNeo4jModalOpen(false) }} aria-labelledby="form-dialog-title">
+                <DialogTitle id="form-dialog-title">
+                   
+                    Save to Neo4j
+
+                    <IconButton onClick={(e) => { setSaveToNeo4jModalOpen(false) }} style={{ padding: "3px", float: "right" }}>
+                        <Badge badgeContent={""} >
+                            <CloseIcon />
+                        </Badge>
+                    </IconButton>
+                </DialogTitle>
+                <DialogContent style={{ width: "800px" }}>
+                    <DialogContentText>This will save your current dashboard as a node to your active Neo4j database.
+                        <br />Ensure you have write permissions to the database to use this feature.
+                    </DialogContentText>
+                    
+                    <TextareaAutosize
+                        style={{ width: "100%", border: "1px solid lightgray" }}
+                        className={"textinput-linenumbers"}
+                        value={"{\n    title: '" + dashboard.title + "',\n" +
+                            "    date: '" + new Date().toString() + "',\n" +
+                            "    user: '" + connection.username + "',\n" +
+                            "    content: " + "{...}"+ "\n}" }
+                        aria-label=""
+                        placeholder="" />
+                    <Button
+                        component="label"
+                        onClick={e => {saveDashboardToNeo4j(dashboard, new Date().toString(), connection.username)}}
+                        style={{ backgroundColor: "white",marginTop: "20px",  float: "right" }}
+                        color="default"
+                        variant="contained"
+                        endIcon={<SaveIcon />}
+                        size="medium">
+                        Save
+                    </Button>
+                    <Button
+                        component="label"
+                        onClick={(e) => { setSaveToNeo4jModalOpen(false) }}
+                        style={{ float: "right", marginTop: "20px", marginRight: "10px", ackgroundColor: "white" }}
+                        color="default"
+                        variant="contained"
+                        size="medium">
+                        Cancel
+                    </Button>
+                </DialogContent>
+                <DialogActions>
+
+                </DialogActions>
+            </Dialog>
         </div>
     );
 }
 
 const mapStateToProps = state => ({
-    dashboard: getDashboardJson(state)
+    dashboard: getDashboardJson(state),
+    connection: applicationGetConnection(state)
 });
 
 const mapDispatchToProps = dispatch => ({
-
+    saveDashboardToNeo4j: (dashboard: any, date: any, user: any) => {
+        dispatch(saveDashboardToNeo4jThunk(dashboard, date, user))
+    }, 
 });
 
 //  
