array relations add/delete dnd

package-lock.json

@@ -10366,6 +10366,16 @@
         }
       }
     },
+    "react-sortable-hoc": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/react-sortable-hoc/-/react-sortable-hoc-1.11.0.tgz",
+      "integrity": "sha512-v1CDCvdfoR3zLGNp6qsBa4J1BWMEVH25+UKxF/RvQRh+mrB+emqtVHMgZ+WreUiKJoEaiwYoScaueIKhMVBHUg==",
+      "requires": {
+        "@babel/runtime": "^7.2.0",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.5.7"
+      }
+    },
     "react-transition-group": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",

package.json

@@ -7,7 +7,8 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-scripts": "3.0.1",
-    "react-select": "^3.1.0"
+    "react-select": "^3.1.0",
+    "react-sortable-hoc": "^1.11.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -153,3 +153,18 @@ div[class$="-menu"]{
     z-index: 1000;
     position: relative;
 }
+
+th {
+    min-width: 150px;
+    width: 150px;
+    max-width: 300px;
+}
+
+.SortableCell {
+    display: flex;
+}
+
+
+.SortableCell  button {
+    width: 50px;
+}

src/App.js

@@ -2,6 +2,7 @@ import React, {useState, useEffect, useMemo, useRef}  from 'react';
 import logo from './logo.svg';
 import './App.css';
 import Select from 'react-select/async'
+import {sortableContainer, sortableElement} from 'react-sortable-hoc';
 
 import { GraphQLClient } from 'graphql-request';
 
@@ -286,6 +287,7 @@ const ForeignAutocomplete = ({models={}, children:value, onChange, model, exclud
                 }}
                 value={value && {value: value._id, label: shortName(value), record: value}}
                 onChange={(obj) => {
+                    debugger;
                     onChange(obj.record._id ? obj.record : null)
                 }}
                 />
@@ -298,6 +300,21 @@ const ObjectShortEdit = ({...props}) =>
     <ForeignAutocomplete {...props}/>
 </>
 
+const SortableCell = sortableElement(({onAdd, onDelete, onCh, ...props}) => 
+<div className='SortableCell'>
+    <button onClick={onAdd}>+</button>
+    <button onClick={onDelete}>x</button>
+    <Cell onChange={onCh} {...props} />
+</div>)
+const SortableContainer = sortableContainer(({children}) => {
+  return <div>{children}</div>;
+});
+
+
+const arrayMove = (arr, newIndex, oldIndex) => {
+    const withoutOld = arr.filter((item, i) => i !== oldIndex)
+    return [...withoutOld.slice(0, newIndex), arr[oldIndex], ...withoutOld.slice(newIndex)]
+}
 
 const defaultAdminOptions = 
     {
@@ -327,17 +344,20 @@ const defaultAdminOptions =
                     return model.fields[0].name === '_id' ? <ObjectShortEdit children={children}  model={model} {...props}/> : <EditForm models={models} record={children} options={options} />
                 },
                 Array: ({children, onChange, ...props}) => {
-                    debugger;
-                    return (<>{children.map((child, i) => 
-                        <Cell {...props} children={child} selected 
-                                onChange={data => {
+                    return (<><SortableContainer onSortEnd={({newIndex, oldIndex}) => {
+                                    onChange(arrayMove(children, newIndex, oldIndex))
+                                }}>{children.map((child, i) => 
+                        <SortableCell onDelete={() => onChange(children.filter((item, j) => j !== i))} 
+                                      onAdd={() => onChange([...children.slice(0, i),null,...children.slice(i)])} 
+                                    index={i} key={(child && (child._id || child.key)) || i} {...props} children={child} selected 
+                                onCh={data => {
                                                         const copy = [...children]
                                                         debugger;
                                                         copy[i] = (data && data.target && data.target.value) || data
                                                         onChange(copy)
                                 }}
                             />)}
-                        </>)
+                        </SortableContainer><button onClick={() => onChange([...children, null])}>+</button></>)
                 }
             },
             fields:{

src/front-models.js

@@ -225,6 +225,12 @@ export default async function createModels2(gql, config={create: 'Upsert', updat
                     this.populate(result)
                 }
 
+                static invalidate(except=[]){
+                    if (except && except instanceof Array){
+
+                    }
+                }
+
                 static async find(query={}, cursorCalls={}){
                     const gqlQuery = `
                         query ${name}Find($query: String){