Update Gubu shape for BasicLed

voxgig · Oct 25, 2023 · 13e7880 · 13e7880
1 parent d2f21e1
commit 13e7880
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 90 deletions.
diff --git a/src/lib/BasicLed.tsx b/src/lib/BasicLed.tsx
@@ -9,8 +9,7 @@ import BasicList from './BasicList'
 import BasicEdit from './BasicEdit'
 import { Gubu } from 'gubu'
 
-function fields(spec: any) {
-
+function fields (spec: any) {
   try {
     let fds = []
     let fns = spec.content.def.edit.layout.order.replace(/\s+/g, '').split(/,/)
@@ -33,23 +32,18 @@ function fields(spec: any) {
   return []
 }
 
-function BasicLed(props: any) {
-  const {
-    vxg,
-    ctx,
-    spec
-  } = props
+// Validate spec shape with Gubu
+const BasicLedSpecShape = Gubu({
+  name: '',
+  title: String,
+  icon: String,
+  content: { name: '', kind: String, def: { ent: {}, add: {}, edit: {} } }
+})
 
-  // spec schema definition with Gubu
-  const shape = Gubu({
-    name: "",
-    title: String,
-    icon: String,
-    content: { name: "", kind: String, def: { ent: {}, add: {}, edit: {} } },
-  })
+function BasicLed (props: any) {
+  const { vxg, ctx } = props
 
-  // spec schema validation with Gubu
-  shape(spec)
+  const basicLedSpec = BasicLedSpecShape(props.spec)
 
   const { model, seneca, custom } = ctx()
 
@@ -58,43 +52,44 @@ function BasicLed(props: any) {
   const [item, setItem] = useState({} as any)
   // console.log('item: ', item)
 
-  const def = spec.content.def
+  const def = basicLedSpec.content.def
   const { ent, cols } = def
 
   const canon = ent.canon
 
   const cmpstate = useSelector((state: any) => state.main.vxg.cmp)
-  const entstate = useSelector((state: any) => state.main.vxg.ent.meta.main[canon].state)
-  const entlist = useSelector((state: any) => state.main.vxg.ent.list.main[canon])
+  const entstate = useSelector(
+    (state: any) => state.main.vxg.ent.meta.main[canon].state
+  )
+  const entlist = useSelector(
+    (state: any) => state.main.vxg.ent.list.main[canon]
+  )
 
   const location = useLocation()
 
   // console.log('entlist',entlist)
   if ('none' === entstate) {
-    let q = custom.BasicLed.query(spec, cmpstate)
+    let q = custom.BasicLed.query(basicLedSpec, cmpstate)
     seneca.entity(canon).list$(q)
   }
 
   const rows = entlist
 
-  const itemFields: any = fields(spec)
+  const itemFields: any = fields(basicLedSpec)
   // console.log('itemFields: ', itemFields)
 
-  const columns =
-    itemFields.map((field: any) =>
-    ({
-      // accessorFn: (row: any) => ('status' === field.type ? field.kind[row[field.name]]?.title : row[field.name]),
-      accessorFn: (row: any) => row[field.name],
-      accessorKey: field.name,
-      header: field.headerName,
-      enableEditing: field.edit,
-      editVariant: ('status' === field.type ? 'select' : 'text'),
-      editSelectOptions: ('status' === field.type ? ['open', 'closed'] : null),
-      Header: () => <span>{field.headerName}</span>,
-      // muiTableHeadCellProps: { sx: { color: 'green' } },
-      Cell: ({ cell }: any) => <span>{cell.getValue()}</span>,
-    })
-    )
+  const columns = itemFields.map((field: any) => ({
+    // accessorFn: (row: any) => ('status' === field.type ? field.kind[row[field.name]]?.title : row[field.name]),
+    accessorFn: (row: any) => row[field.name],
+    accessorKey: field.name,
+    header: field.headerName,
+    enableEditing: field.edit,
+    editVariant: 'status' === field.type ? 'select' : 'text',
+    editSelectOptions: 'status' === field.type ? ['open', 'closed'] : null,
+    Header: () => <span>{field.headerName}</span>,
+    // muiTableHeadCellProps: { sx: { color: 'green' } },
+    Cell: ({ cell }: any) => <span>{cell.getValue()}</span>
+  }))
   // console.log('columns: ', columns)
 
   let data = rows //.slice(0, 10)
@@ -120,45 +115,43 @@ function BasicLed(props: any) {
     setTriggerLed(++triggerLed)
   }, [led_add])
 
-
-
   return (
-    <div className="BasicLed">
-      {
-        '-/' + canon !== item.entity$ ?
-          <BasicList
-            ctx={ctx}
-            spec={spec}
-            data={data}
-            columns={columns}
-            // onRowClick={(event: any, item: any) => {
-            //   console.log('item: ', item)
-            //   setItem(item)
-            // }}
-            onEditingRowSave={async (row: any, values: any) => {
-              let selectedItem = { ...data[row.index] }
-              for (let k in values) {
-                selectedItem[k] = values[k]
-              }
-              console.log('selectedItem: ', selectedItem)
-              await seneca.entity(canon).save$(selectedItem)
-              setItem({})
-            }}
-          /> :
-          <BasicEdit
-            ctx={ctx}
-            spec={spec}
-            onClose={() => {
-              setItem({})
-            }}
-            onSubmit={async (item: any) => {
-              await seneca.entity(canon).save$(item)
-              setItem({})
-            }}
-            item={item}
-            itemFields={itemFields}
-          />
-      }
+    <div className='BasicLed'>
+      {'-/' + canon !== item.entity$ ? (
+        <BasicList
+          ctx={ctx}
+          spec={basicLedSpec}
+          data={data}
+          columns={columns}
+          // onRowClick={(event: any, item: any) => {
+          //   console.log('item: ', item)
+          //   setItem(item)
+          // }}
+          onEditingRowSave={async (row: any, values: any) => {
+            let selectedItem = { ...data[row.index] }
+            for (let k in values) {
+              selectedItem[k] = values[k]
+            }
+            console.log('selectedItem: ', selectedItem)
+            await seneca.entity(canon).save$(selectedItem)
+            setItem({})
+          }}
+        />
+      ) : (
+        <BasicEdit
+          ctx={ctx}
+          spec={basicLedSpec}
+          onClose={() => {
+            setItem({})
+          }}
+          onSubmit={async (item: any) => {
+            await seneca.entity(canon).save$(item)
+            setItem({})
+          }}
+          item={item}
+          itemFields={itemFields}
+        />
+      )}
     </div>
   )
 }

diff --git a/test/BasicLed.test.tsx b/test/BasicLed.test.tsx
@@ -10,38 +10,61 @@ describe('BasicLed', () => {
       value: {
         pathname
       }
-    });
+    })
   }
 
   beforeEach(() => {
-    setLocation('/view/task');
-  });
+    setLocation('/view/task')
+  })
 
   afterEach(() => {
-    setLocation(window.location.pathname);
-  });
+    setLocation(window.location.pathname)
+  })
 
   it('happy', () => {
-
     const view = {
+      title: 'task',
+      icon: 'done',
       content: {
         kind: 'led',
         def: {
           ent: {
-            canon: 'vxg/task'
+            canon: 'vxg/task',
+            primary: {
+              field: {
+                id: {
+                  title: 'ID',
+                  edit: true
+                }
+              }
+            }
           },
-          add: {}
+          add: { active: false },
+          edit: {
+            layout: {
+              order: 'id,title,status',
+              field: {
+                id: {
+                  title: 'ID',
+                  edit: true
+                },
+                title: {
+                  title: 'Title',
+                  edit: true
+                },
+                status: {
+                  title: 'Status',
+                  edit: true
+                }
+              }
+            }
+          }
         }
-      },
-      title: 'task',
-      icon: 'done'
+      }
     }
 
     customRender(<BasicLed vxg={vxg} ctx={ctx} spec={view} />, {
-      mockInitialState: initialState,
+      mockInitialState: initialState
     })
   })
-
 })
-
-