Type and enum update

src/Components/Collections/Collection.js

@@ -1,14 +1,16 @@
-import React from 'react';
-import Grid from '@material-ui/core/Grid';
-import {withVlow} from 'vlow';
 import { makeStyles} from '@material-ui/core/styles';
+import {withVlow} from 'vlow';
+import Grid from '@material-ui/core/Grid';
+import React from 'react';
 
 import {ApplicationStore, ThingsdbStore} from '../../Stores';
 import {CollectionConfig} from './Config';
-import {findItem, isObjectEmpty, TitlePage} from '../Util';
+import {findItem, HarmonicCardHeader, isObjectEmpty, TitlePage} from '../Util';
 import CollectionProcedures from './Procedures';
 import CollectionTree from './Tree';
 import CollectionEnumsTypes from './EnumsTypes';
+import {ProcedureActions} from '../../Stores';
+import {CollectionProceduresTAG} from '../../constants';
 
 
 const withStores = withVlow([{
@@ -29,6 +31,10 @@ const Collection = ({match, collections}) => {
     const classes = useStyles();
     const selectedCollection = findItem(match.index, collections);
 
+    const handleRefresh = () => {
+        ProcedureActions.getProcedures(`@collection:${selectedCollection.name}`, CollectionProceduresTAG);
+    };
+
     return (
         isObjectEmpty(selectedCollection) ? null : (
             <TitlePage
@@ -38,19 +44,21 @@ const Collection = ({match, collections}) => {
                     <React.Fragment>
                         <Grid container item md={7} xs={12}>
                             <Grid className={classes.spacing} item xs={12}>
-                                <CollectionConfig collection={selectedCollection} close={(collections.length-1)!=match.index} />
+                                <HarmonicCardHeader title="INFO" unmountOnExit>
+                                    <CollectionConfig collection={selectedCollection} close={(collections.length-1)!=match.index} />
+                                </HarmonicCardHeader >
                             </Grid>
                             <Grid item xs={12}>
                                 <CollectionTree collection={selectedCollection} />
                             </Grid>
                         </Grid>
                         <Grid container item md={5} xs={12}>
                             <Grid className={classes.spacing} item xs={12}>
-                                <CollectionProcedures scope={`@collection:${selectedCollection.name}`} />
-                            </Grid>
-                            <Grid className={classes.spacing} item xs={12}>
-                                <CollectionEnumsTypes scope={`@collection:${selectedCollection.name}`} />
+                                <HarmonicCardHeader title="PROCEDURES" onRefresh={handleRefresh} unmountOnExit>
+                                    <CollectionProcedures scope={`@collection:${selectedCollection.name}`} />
+                                </HarmonicCardHeader >
                             </Grid>
+                            <CollectionEnumsTypes scope={`@collection:${selectedCollection.name}`} />
                         </Grid>
                     </React.Fragment>
                 }

src/Components/Collections/CollectionsUtils/TypesEnumsUtils/AddDialog.js

@@ -13,34 +13,33 @@ import TextField from '@material-ui/core/TextField';
 import Typography from '@material-ui/core/Typography';
 
 import {AddDialogTAG} from '../../../../constants';
-import {ArrayLayout, ErrorMsg, SimpleModal} from '../../../Util';
+import {ArrayLayout, ErrorMsg, SimpleModal, Switching} from '../../../Util';
 import {CollectionActions} from '../../../../Stores';
 import {EditProvider} from '../Context';
-import AddProperty from './AddProperty';
+import {PropertyMethod, PropertyName, PropertyType, PropertyVal} from './AddEditProperty';
 
 const tag = AddDialogTAG;
 
 const initState = {
     queryString: '',
     name: '',
     error: '',
-    properties: [{propertyName: '', propertyType: '', propertyVal: ''}],
+    properties: [{propertyName: '', propertyType: '', propertyVal: '', definition: ''}],
 };
 
-const AddDialog = ({dataTypes, category, getInfo, link, onClose, open, scope}) => {
+const AddDialog = ({dataTypes, category, getInfo, link, onClose, open, queries, scope}) => {
     const [state, setState] = React.useState(initState);
     const {queryString, name, error, properties} = state;
     const [blob, setBlob] = React.useState({});
 
-
     React.useEffect(() => {
         setState(initState);
     },
     [open],
     );
 
     React.useEffect(() => { // keep this useEffect to prevent infinite render. Combi of map function and fast changes causes mix up of previous and current state updates. Something with not being a deep copy.
-        setState({...state, queryString: `set_${category}("${name}", {${properties.map(v=>`${v.propertyName}: ${category=='type'?`'${v.propertyType}'`:`${v.propertyVal}`}`)}})`});
+        setState({...state, queryString: queries[category](name, properties)});
     },
     [name, JSON.stringify(properties)], // TODO STRING
     );
@@ -57,7 +56,7 @@ const AddDialog = ({dataTypes, category, getInfo, link, onClose, open, scope}) =
     const handleChangeProperty = (index) => (property) => {
         setState(prevState => {
             let update = [...prevState.properties]; // keep the useEffect to prevent infinite render. Combi of map function and fast changes causes mix up of previous and current state updates. Something with not being a deep copy.
-            update.splice(index, 1, property);
+            update.splice(index, 1, {...prevState.properties[index], ...property});
             return {...prevState, properties: update};
         });
     };
@@ -103,6 +102,15 @@ const AddDialog = ({dataTypes, category, getInfo, link, onClose, open, scope}) =
         }
     };
 
+    const handleSwitching = (index) => (check) => {
+        setState(prevState => {
+            const prop = check?{propertyType: ''}:{definition: ''};
+            let update = [...prevState.properties]; // keep the useEffect to prevent infinite render. Combi of map function and fast changes causes mix up of previous and current state updates. Something with not being a deep copy.
+            update.splice(index, 1, {...prevState.properties[index], ...prop});
+            return {...prevState, properties: update};
+        });
+    };
+
     return (
         <SimpleModal
             open={open}
@@ -176,16 +184,27 @@ const AddDialog = ({dataTypes, category, getInfo, link, onClose, open, scope}) =
                             <ArrayLayout
                                 child={(i) => (
                                     <EditProvider>
-                                        <AddProperty
-                                            category={category}
-                                            cb={handleChangeProperty(i)}
-                                            dropdownItems={dataTypes}
-                                            input={properties[i]||{propertyName:'', propertyType:'', propertyVal:''}}
-                                            hasType={category=='type'}
-                                            hasVal={category=='enum'}
-                                            onBlob={handleBlob}
-                                            scope={scope}
-                                        />
+                                        <Grid container item xs={12} spacing={1} alignItems="center" >
+                                            <Grid item xs={12}>
+                                                <PropertyName cb={handleChangeProperty(i)} input={properties[i]&&properties[i].propertyName||''} />
+                                            </Grid>
+                                            {category=='type' ? (
+                                                <Switching
+                                                    one={
+                                                        <PropertyType cb={handleChangeProperty(i)} dropdownItems={dataTypes} input={properties[i]&&properties[i].propertyType||''} />
+                                                    }
+                                                    two={
+                                                        <PropertyMethod cb={handleChangeProperty(i)} input={properties[i]&&properties[i].definition||''} />
+                                                    }
+                                                    cb={handleSwitching(i)}
+                                                />
+                                            ) : null}
+                                            {category=='enum' ? (
+                                                <Grid item xs={12}>
+                                                    <PropertyVal category={category} cb={handleChangeProperty(i)} onBlob={handleBlob} scope={scope} />
+                                                </Grid>
+                                            ) : null}
+                                        </Grid>
                                     </EditProvider>
                                 )}
                                 fullWidth={category=='enum'}
@@ -212,6 +231,7 @@ AddDialog.propTypes = {
     getInfo: PropTypes.func.isRequired,
     onClose: PropTypes.func.isRequired,
     open: PropTypes.bool,
+    queries: PropTypes.object.isRequired,
     scope: PropTypes.string.isRequired,
     link: PropTypes.string.isRequired,
 };

src/Components/Collections/CollectionsUtils/TypesEnumsUtils/AddEditProperty/PropertyCallback.js

@@ -0,0 +1,67 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { makeStyles } from '@material-ui/core/styles';
+import Collapse from '@material-ui/core/Collapse';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Grid from '@material-ui/core/Grid';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Switch from '@material-ui/core/Switch';
+import Typography from '@material-ui/core/Typography';
+
+import {Closure} from '../../../../Util';
+
+
+const useStyles = makeStyles(() => ({
+    fullWidth: {
+        width: '100%',
+    },
+}));
+
+const PropertyCallback = ({cb}) => {
+    const classes = useStyles();
+    const [switchIni, setSwitch] = React.useState(false);
+
+    const handleSwitch = ({target}) => {
+        const {checked} = target;
+        setSwitch(checked);
+        if (!checked) {
+            cb({propertyVal:''});
+        }
+    };
+
+    const handleClosure = (c) => {
+        cb({callback:c});
+    };
+
+    return (
+        <React.Fragment>
+            <Grid item xs={12}>
+                <FormControlLabel
+                    control={(
+                        <Switch
+                            checked={switchIni}
+                            color="primary"
+                            id="switchIni"
+                            onChange={handleSwitch}
+                        />
+                    )}
+                    label="Add a closure that will be called on each existing instance and can be used to set a new value"
+                />
+            </Grid>
+            <Collapse className={classes.fullWidth} in={switchIni} timeout="auto" unmountOnExit>
+                <Typography variant="caption">
+                    {'Callback'}
+                </Typography>
+                <Closure cb={handleClosure} />
+            </Collapse>
+        </React.Fragment>
+    );
+};
+
+PropertyCallback.propTypes = {
+    cb: PropTypes.func.isRequired,
+};
+
+export default PropertyCallback;
+
+

src/Components/Collections/CollectionsUtils/TypesEnumsUtils/AddEditProperty/PropertyInitVal.js

@@ -0,0 +1,70 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { makeStyles } from '@material-ui/core/styles';
+import Collapse from '@material-ui/core/Collapse';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Grid from '@material-ui/core/Grid';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Switch from '@material-ui/core/Switch';
+
+import PropertyVal from './PropertyVal';
+
+
+const useStyles = makeStyles(() => ({
+    fullWidth: {
+        width: '100%',
+    },
+}));
+
+const PropertyInitVal = ({category, cb, onBlob, scope}) => {
+    const classes = useStyles();
+    const [switchIni, setSwitch] = React.useState(false);
+
+    const handleSwitch = ({target}) => {
+        const {checked} = target;
+        setSwitch(checked);
+        if (!checked) {
+            cb({propertyVal:''});
+        }
+    };
+
+    const handleVal = (v) => {
+        cb(v);
+    };
+
+    const handleBlob = (b) => {
+        onBlob(b);
+    };
+
+    return (
+        <React.Fragment>
+            <Grid item xs={12}>
+                <FormControlLabel
+                    control={(
+                        <Switch
+                            checked={switchIni}
+                            color="primary"
+                            id="switchIni"
+                            onChange={handleSwitch}
+                        />
+                    )}
+                    label="Add initial value or closure"
+                />
+            </Grid>
+            <Collapse className={classes.fullWidth} in={switchIni} timeout="auto" unmountOnExit>
+                <PropertyVal category={category} cb={handleVal} onBlob={handleBlob} scope={scope} />
+            </Collapse>
+        </React.Fragment>
+    );
+};
+
+PropertyInitVal.propTypes = {
+    category: PropTypes.string.isRequired,
+    cb: PropTypes.func.isRequired,
+    onBlob: PropTypes.func.isRequired,
+    scope: PropTypes.string.isRequired,
+};
+
+export default PropertyInitVal;
+
+

src/Components/Collections/CollectionsUtils/TypesEnumsUtils/AddEditProperty/PropertyMethod.js

@@ -0,0 +1,31 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import PropTypes from 'prop-types';
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+
+import {Closure} from '../../../../Util';
+
+const PropertyMethod = ({cb, input}) => {
+
+    const handleClosure = (c) => {
+        cb({definition:c});
+    };
+
+    return (
+        <React.Fragment>
+            <Typography variant="caption">
+                {'Definition'}
+            </Typography>
+            <Closure input={input} cb={handleClosure} />
+        </React.Fragment>
+    );
+};
+
+PropertyMethod.propTypes = {
+    cb: PropTypes.func.isRequired,
+    input: PropTypes.string.isRequired,
+};
+
+export default PropertyMethod;
+
+

src/Components/Collections/CollectionsUtils/TypesEnumsUtils/AddEditProperty/PropertyName.js

@@ -0,0 +1,37 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import PropTypes from 'prop-types';
+import React from 'react';
+import TextField from '@material-ui/core/TextField';
+
+const PropertyName = ({cb, input}) => {
+    const [propertyName, setPropertyName] = React.useState(input);
+
+    const handlePropertyName = ({target}) => {
+        const { value} = target;
+        setPropertyName(value);
+        cb({propertyName:value});
+    };
+
+    return (
+        <TextField
+            autoFocus
+            fullWidth
+            label="Name"
+            name="propertyName"
+            onChange={handlePropertyName}
+            spellCheck={false}
+            type="text"
+            value={propertyName}
+            variant="standard"
+        />
+    );
+};
+
+PropertyName.propTypes = {
+    cb: PropTypes.func.isRequired,
+    input: PropTypes.string.isRequired,
+};
+
+export default PropertyName;
+
+