Merge pull request #229 from thingsdb/228

Fixed editing list item in tree

Author: AnjaBruls

react/package-lock.json

@@ -4,7 +4,6 @@ import { withVlow } from 'vlow';
 import Grid from '@mui/material/Grid';
 import PropTypes from 'prop-types';
 import React from 'react';
-import Typography from '@mui/material/Typography';
 
 import { COLLECTION_SCOPE } from '../../../Constants/Scopes';
 import { EnumActions, EnumStore, TypeActions, TypeStore } from '../../../Stores';

react/src/Components/Collections/EnumsTypes/TypeEnumNetwork.js

@@ -14,7 +14,7 @@ import TypeInit from './TypeInit';
 
 const Edit = ({child, customTypes, dataTypes, enums, parent, scope, thing}) => {
     const [newProperty, setNewProperty] = React.useState('');
-    const [dataType, setDataType] = React.useState(child.type==LIST||child.type==THING ? dataTypes[0]: child.type==SET ? THING : child.type);
+    const [dataType, setDataType] = React.useState(child.type == LIST || child.type == THING ? dataTypes[0] : child.type == SET ? THING : child.type);
 
     const handleOnChangeName = (p) => {
         setNewProperty(p);
@@ -40,13 +40,13 @@ const Edit = ({child, customTypes, dataTypes, enums, parent, scope, thing}) => {
                     child={{
                         id: null,
                         index: child.index,
-                        name: child.type == THING?newProperty:child.name,
+                        name: child.type == THING ? newProperty : child.name,
                         type: dataType,
                     }}
                     customTypes={customTypes}
                     enums={enums}
                     parent={{
-                        id: child.type == THING? child.id:parent.id,
+                        id: child.type == THING ? child.id : parent.id,
                         name: child.type == THING || child.type == LIST || child.type == SET ? child.name : parent.name,
                         type: child.type == THING || child.type == LIST || child.type == SET ? child.type : parent.type,
                     }}

react/src/Components/Collections/Tree/TreeActions/Edit.js

@@ -13,16 +13,18 @@ import { ROOM, THING, TUPLE } from '../../../../Constants/ThingTypes';
 import { ThingActionsDialogTAG } from '../../../../Constants/Tags';
 import {
     THING_QUERY,
+    TYPE_INFO_CHILD_ARRAY_QUERY,
     TYPE_INFO_CHILD_THING_QUERY,
-    TYPE_INFO_ELSE_QUERY,
+    TYPE_INFO_PARENT_ARRAY_QUERY,
     TYPE_INFO_PARENT_THING_QUERY,
     TYPE_INFO_ROOT_THING_QUERY,
 } from '../../../../TiQueries/Queries';
 import {
+    ID_ARGS,
+    TYPE_INFO_CHILD_ARRAY_ARGS,
     TYPE_INFO_CHILD_THING_ARGS,
-    TYPE_INFO_ELSE_ARGS,
+    TYPE_INFO_PARENT_ARRAY_ARGS,
     TYPE_INFO_PARENT_THING_ARGS,
-    ID_ARGS,
 } from '../../../../TiQueries/Arguments';
 
 import DialogButtons from './DialogButtons';
@@ -59,17 +61,21 @@ const ThingActionsDialog = ({onClose, child, parent, thing, scope, isRoot}) => {
         let query = '';
         let jsonArgs = null;
         if (parent.id==null) {
-            query = TYPE_INFO_ROOT_THING_QUERY; // check if custom type
+            query = TYPE_INFO_ROOT_THING_QUERY;
             jsonArgs = ID_ARGS(child.id);
         } else if (parent.type == THING) {
-            query = TYPE_INFO_PARENT_THING_QUERY; // check if custom type
+            query = TYPE_INFO_PARENT_THING_QUERY;
             jsonArgs = TYPE_INFO_PARENT_THING_ARGS(parent.id, child.name);
         } else if (child.type == THING) {
             query = TYPE_INFO_CHILD_THING_QUERY; // in case parent is set than indexing is not supported. Therefore we need to check child type by id.
             jsonArgs = TYPE_INFO_CHILD_THING_ARGS(child.id, parent.id, parent.name);
+        } else if (parent.index == null) {
+            query = TYPE_INFO_CHILD_ARRAY_QUERY;
+            jsonArgs = TYPE_INFO_CHILD_ARRAY_ARGS(parent.id, parent.pname, child.index);
         } else {
-            query = TYPE_INFO_ELSE_QUERY; // check if custom type
-            jsonArgs = TYPE_INFO_ELSE_ARGS(parent.id, parent.name, child.name);
+            query = TYPE_INFO_PARENT_ARRAY_QUERY;
+            // pname is the property name without any index indication; so `arr` instead of `arr[2]`
+            jsonArgs = TYPE_INFO_PARENT_ARRAY_ARGS(parent.id, parent.index, parent.pname, child.index);
         }
         TypeActions.getType(query, scope, jsonArgs, tag, setType);
         EnumActions.getEnums(scope, tag, setEnums);
@@ -205,14 +211,16 @@ ThingActionsDialog.propTypes = {
     parent: PropTypes.shape({
         id: PropTypes.number,
         index: PropTypes.number,
+        isTuple: PropTypes.bool,
         name: PropTypes.string,
+        pname: PropTypes.string,
         type: PropTypes.string,
-        isTuple: PropTypes.bool,
     }).isRequired,
     child: PropTypes.shape({
         id: PropTypes.number,
         index: PropTypes.number,
         name: PropTypes.string,
+        pname: PropTypes.string,
         type: PropTypes.string,
         val: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     }).isRequired,

react/src/Components/Collections/Tree/TreeActions/ThingActionsDialog.js

@@ -40,13 +40,16 @@ const Thing = ({child, collection, parent, thing, things, inset}) => {
             thing={v}
             parent={{
                 id: thingId,
+                index: child.index,
+                isTuple: isTuple,
                 name: child.name,
+                pname: child.pname,
                 type: type,
-                isTuple: isTuple,
             }}
             child={{
-                name: fancyName(isArray?child.name:k, i),
                 index: i,
+                name: fancyName(isArray ? child.name : k, i),
+                pname: isArray ? child.name : k,
             }}
         />
     ), [child.name, collection, isTuple, thingId, things, type]);
@@ -89,6 +92,7 @@ const Thing = ({child, collection, parent, thing, things, inset}) => {
                             id: thing ? thing[THING_KEY] : null,
                             index: child.index,
                             name: child.name,
+                            pname: child.pname,
                             type: type,
                             val: val
                         }}
@@ -113,13 +117,16 @@ Thing.propTypes = {
     collection: PropTypes.object.isRequired,
     parent: PropTypes.shape({
         id: PropTypes.number,
+        index: PropTypes.number,
+        isTuple: PropTypes.bool,
         name: PropTypes.string,
+        pname: PropTypes.string,
         type: PropTypes.string,
-        isTuple: PropTypes.bool,
     }).isRequired,
     child: PropTypes.shape({
-        name: PropTypes.string,
         index: PropTypes.number,
+        name: PropTypes.string,
+        pname: PropTypes.string,
     }).isRequired,
     things: PropTypes.object.isRequired,
     inset: PropTypes.bool,

react/src/Components/Collections/Tree/TreeView/Thing.js

@@ -37,10 +37,12 @@ const ThingRoot = ({things, collection}) => {
                 name: 'root',
                 type: THING,
                 isTuple: false,
+                index: null,
             }}
             child={{
-                name: k,
                 index: null,
+                name: k,
+                pname: k,
             }}
         />
     ), [collection, things]);

react/src/Components/Collections/Tree/TreeView/Things.js

@@ -29,7 +29,8 @@ export const THING_SET_REMOVE_ARGS = (pid, name, cid) => ({ pid, name, cid });
 
 // check types
 export const TYPE_INFO_CHILD_THING_ARGS = (cid, pid, name) => ({ cid, pid, name });
-export const TYPE_INFO_ELSE_ARGS = (pid, cname, pname) => ({ pid, cname, pname });
+export const TYPE_INFO_CHILD_ARRAY_ARGS = (pid, pname, cindex) => ({ pid, pname, cindex });
+export const TYPE_INFO_PARENT_ARRAY_ARGS = (pid, pindex, pname, cindex) => ({ pid, pindex, pname, cindex });
 export const TYPE_INFO_PARENT_THING_ARGS = (id, name) => ({ id, name });
 
 // procedures

react/src/TiQueries/Arguments.js

@@ -83,7 +83,8 @@ export const THING_SET_ADD_FORMAT_QUERY = (id, name, value) => `thing(${id}).${n
 
 // check types
 export const TYPE_INFO_CHILD_THING_QUERY = '[type(thing(cid)), type(thing(pid).get(name)), types_info()];';
-export const TYPE_INFO_ELSE_QUERY = '[type(thing(pid).get(cname)), type(thing(pid).get(pname)), types_info()];';
+export const TYPE_INFO_CHILD_ARRAY_QUERY = '[type(thing(pid).get(pname)[cindex]), type(thing(pid).get(pname)), types_info()];';
+export const TYPE_INFO_PARENT_ARRAY_QUERY = '[type(thing(pid).get(pname)[pindex][cindex]), type(thing(pid).get(pname)[pindex]), types_info()];';
 export const TYPE_INFO_PARENT_THING_QUERY = '[type(thing(id).get(name)), type(thing(id)), types_info()];';
 export const TYPE_INFO_ROOT_THING_QUERY = '[type(thing(id)), "", types_info()];'; // child type, parent type, custom types