setting delete on the right field, nested

cms/Schema/SchemaField.tsx

@@ -167,6 +167,7 @@ export const SchemaField = ({
               setItemToEdit={setItemToEdit}
               setOpenEditModal={setOpenEditModal}
               setPathToEdit={setPathToEdit}
+              setOpenDeleteModal={setOpenDeleteModal}
             />
           )
         })}
@@ -182,6 +183,7 @@ const NestedSchemaField = ({
   setItemToEdit,
   setOpenEditModal,
   setPathToEdit,
+  setOpenDeleteModal,
 }) => {
   console.log('🚑', objItem)
   // console.log(ALL_FIELDS)
@@ -264,9 +266,6 @@ const NestedSchemaField = ({
                 e.stopPropagation()
               }}
               size="small"
-              // disabled={SYSTEM_FIELDS_LABELS.includes(
-              //   item.name.toLowerCase()
-              // )}
               ghost
               icon={<IconMoreHorizontal />}
             />
@@ -284,8 +283,9 @@ const NestedSchemaField = ({
             </Dropdown.Item>
             <Dropdown.Item
               onClick={() => {
-                // setItemToEdit(item.name)
-                // setOpenDeleteModal(true)
+                setItemToEdit(objItem?.name || objItem?.meta?.name)
+                setOpenDeleteModal(true)
+                setPathToEdit(path)
               }}
             >
               Delete
@@ -310,6 +310,7 @@ const NestedSchemaField = ({
               setItemToEdit={setItemToEdit}
               setOpenEditModal={setOpenEditModal}
               setPathToEdit={setPathToEdit}
+              setOpenDeleteModal={setOpenDeleteModal}
             />
           )
         })}

cms/Schema/SchemaFields.tsx

@@ -7,7 +7,6 @@ import {
   IconStar,
   Modal,
   Row,
-  Confirmation,
   Text,
   Button,
   IconDelete,
@@ -30,6 +29,7 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable'
 import { SchemaField } from './SchemaField'
+import { setDeep } from './utils/setDeep'
 
 const SYSTEM_FIELDS = [
   { label: 'type', icon: <IconExtension />, color: 'grey' },
@@ -131,7 +131,7 @@ export const SchemaFields = () => {
   const [openEditModal, setOpenEditModal] = useState(false)
   const [openDeleteModal, setOpenDeleteModal] = useState(false)
   const [itemToEdit, setItemToEdit] = useState('')
-  const [pathToEdit, setPathToEdit] = useState()
+  const [pathToEdit, setPathToEdit] = useState<string[] | undefined>()
 
   const { data: schema, loading: loadingSchema } = useQuery('db:schema')
 
@@ -247,14 +247,43 @@ export const SchemaFields = () => {
                     </Button>
                     <Button
                       onClick={async () => {
+                        let nestedPathFields = {}
+                        let editPathArr: string[] = []
+                        if (pathToEdit) {
+                          pathToEdit.map((item, idx) => {
+                            editPathArr.push(item)
+                            idx !== pathToEdit.length - 1 &&
+                              editPathArr.push('properties')
+                          })
+
+                          nestedPathFields = {
+                            [editPathArr[0]]: {
+                              ...schema?.types[routeType as string]?.fields[
+                                editPathArr[0]
+                              ],
+                            },
+                          }
+
+                          setDeep(
+                            nestedPathFields,
+                            editPathArr,
+                            { $delete: true },
+                            true
+                          )
+                        }
+
+                        console.log('DELETE THIS 😾🔫', nestedPathFields)
+
                         await client.call('db:set-schema', {
                           mutate: true,
                           schema: {
                             types: {
                               [routeType as string]: {
-                                fields: {
-                                  [itemToEdit]: { $delete: true },
-                                },
+                                fields: pathToEdit
+                                  ? nestedPathFields
+                                  : {
+                                      [itemToEdit]: { $delete: true },
+                                    },
                               },
                             },
                           },

cms/Schema/SpecificFieldModal.tsx

@@ -4,6 +4,7 @@ import { useRoute } from 'kabouter'
 import { Modal, Button, Input, Tab, Tabs, getPluralName } from '@based/ui'
 import { useClient, useQuery } from '@based/react'
 import { SpecificFieldSettings } from './SpecificFieldSettings'
+import { setDeep } from './utils/setDeep'
 
 type SpecificFieldModalProps = {
   field: string
@@ -14,25 +15,6 @@ type SpecificFieldModalProps = {
   setPathToEdit?: (v: string | string[]) => void
 }
 
-function setDeep(obj, path, value, setrecursively = false) {
-  path.reduce((a, b, level) => {
-    if (
-      setrecursively &&
-      typeof a[b] === 'undefined' &&
-      level !== path.length
-    ) {
-      a[b] = {}
-      return a[b]
-    }
-
-    if (level === path.length - 1) {
-      a[b] = value
-      return value
-    }
-    return a[b]
-  }, obj)
-}
-
 const metaReducer = (state, action) => {
   if (action.type === 'prune') {
     const newMeta = Object.fromEntries(

cms/Schema/utils/setDeep.ts

@@ -0,0 +1,18 @@
+export const setDeep = (obj, path, value, setrecursively = false) => {
+  path.reduce((a, b, level) => {
+    if (
+      setrecursively &&
+      typeof a[b] === 'undefined' &&
+      level !== path.length
+    ) {
+      a[b] = {}
+      return a[b]
+    }
+
+    if (level === path.length - 1) {
+      a[b] = value
+      return value
+    }
+    return a[b]
+  }, obj)
+}