Feature/#66 edit table delete

src/common/components/icons/remove-icon.component.tsx

@@ -0,0 +1,23 @@
+interface Props {
+  onClick: () => void;
+}
+
+export const RemoveIcon: React.FC<Props> = props => {
+  const { onClick } = props;
+
+  return (
+    <button onClick={onClick}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="1em"
+        height="1em"
+        viewBox="0 0 256 256"
+      >
+        <path
+          fill="currentColor"
+          d="m223.57 81.81l-41.38-41.38a22 22 0 0 0-31.12 0L32.43 159.07a22 22 0 0 0 0 31.11l30.07 30.06a6 6 0 0 0 4.24 1.76H216a6 6 0 0 0 0-12h-89.51l97.08-97.08a22 22 0 0 0 0-31.11M109.51 210H69.22l-28.3-28.3a10 10 0 0 1 0-14.15L96 112.48L151.52 168Zm105.57-105.56L160 159.51L104.48 104l55.08-55.07a10 10 0 0 1 14.14 0l41.38 41.37a10 10 0 0 1 0 14.14"
+        />
+      </svg>
+    </button>
+  );
+};

src/pods/edit-table/components/nested-field-grid.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import classes from '../edit-table.module.css';
-import { FieldType } from '@/core/model';
+import { FieldType, GUID } from '@/core/model';
 import { FieldVm } from '../edit-table.vm';
+import { RemoveIcon } from '@/common/components/icons/remove-icon.component';
 
 interface NestedFieldGridProps {
   fields: FieldVm[];
@@ -13,6 +14,7 @@ interface NestedFieldGridProps {
     id: K,
     value: FieldVm[K]
   ) => void;
+  onDeleteField: (fieldId: GUID) => void;
 }
 
 export const NestedFieldGrid: React.FC<NestedFieldGridProps> = ({
@@ -21,6 +23,7 @@ export const NestedFieldGrid: React.FC<NestedFieldGridProps> = ({
   expandedFields,
   toggleExpand,
   updateFieldValue,
+  onDeleteField,
 }) => {
   const renderFieldHeaders = () => (
     <div className={`${classes.fieldRow} ${classes[`indent${level}`]}`}>
@@ -31,6 +34,7 @@ export const NestedFieldGrid: React.FC<NestedFieldGridProps> = ({
       <div className={classes.headerCell}>FK</div>
       <div className={classes.headerCell}>Name</div>
       <div className={classes.headerCell}>Type</div>
+      <div className={classes.headerCell}>Actions</div>
     </div>
   );
 
@@ -80,6 +84,9 @@ export const NestedFieldGrid: React.FC<NestedFieldGridProps> = ({
             <option value="object">object</option>
           </select>
         </div>
+        <div className={classes.fieldCell}>
+          <RemoveIcon onClick={() => onDeleteField(field.id)} />
+        </div>
       </div>
       {field.children && expandedFields.has(field.id) && (
         <NestedFieldGrid
@@ -88,6 +95,7 @@ export const NestedFieldGrid: React.FC<NestedFieldGridProps> = ({
           expandedFields={expandedFields}
           toggleExpand={toggleExpand}
           updateFieldValue={updateFieldValue}
+          onDeleteField={onDeleteField}
         />
       )}
     </React.Fragment>

src/pods/edit-table/edit-table.business.ts

@@ -0,0 +1,24 @@
+import { produce } from 'immer';
+import { FieldVm, TableVm } from './edit-table.vm';
+import { GUID } from '@/core/model';
+
+// TODO: Add unit test support
+// #75
+// https://github.com/Lemoncode/mongo-modeler/issues/75
+export const removeField = (table: TableVm, fieldId: GUID): TableVm => {
+  return produce(table, draftTable => {
+    const removeFieldRecursive = (fields: FieldVm[]): void => {
+      for (let i = 0; i < fields.length; i++) {
+        if (fields[i].id === fieldId) {
+          fields.splice(i, 1);
+          return; // Exit early if the field is found and has been removed
+        }
+        if (fields[i].children) {
+          removeFieldRecursive(fields[i].children ?? []);
+        }
+      }
+    };
+
+    removeFieldRecursive(draftTable.fields);
+  });
+};

src/pods/edit-table/edit-table.component.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import classes from './edit-table.module.css';
 import { FieldVm, TableVm } from './edit-table.vm';
 import { NestedFieldGrid } from './components/nested-field-grid';
+import { GUID } from '@/core/model';
 
 interface Props {
   table: TableVm;
@@ -10,10 +11,11 @@ interface Props {
     id: K,
     value: FieldVm[K]
   ) => void;
+  onDeleteField: (fieldId: GUID) => void;
 }
 
 export const EditTableComponent: React.FC<Props> = props => {
-  const { table, updateFieldValue } = props;
+  const { table, updateFieldValue, onDeleteField } = props;
   const [expandedFields, setExpandedFields] = useState<Set<string>>(new Set());
 
   const toggleExpand = (fieldId: string) => {
@@ -36,6 +38,7 @@ export const EditTableComponent: React.FC<Props> = props => {
         expandedFields={expandedFields}
         toggleExpand={toggleExpand}
         updateFieldValue={updateFieldValue}
+        onDeleteField={onDeleteField}
       />
     </div>
   );

src/pods/edit-table/edit-table.module.css

@@ -7,14 +7,14 @@
 
 .fieldRow {
   display: grid;
-  grid-template-columns: auto auto auto 3fr 2fr;
-  gap: 10px;
+  grid-template-columns: auto auto auto 3fr 2fr 100px;
+  gap: 0px;
 }
 
 .nestedGrid {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 0px;
 }
 
 .fieldCell,

src/pods/edit-table/edit-table.pod.tsx

@@ -7,6 +7,8 @@ import {
 } from './edit-table.mapper';
 import { EditTableComponent } from './edit-table.component';
 import { produce } from 'immer';
+import { GUID } from '@/core/model';
+import { removeField } from './edit-table.business';
 
 interface Props {
   table?: canvasVm.TableVm; // TODO: should we have our own Vm?
@@ -72,11 +74,16 @@ export const EditTablePod: React.FC<Props> = props => {
     );
   };
 
+  const onDeleteField = (fieldId: GUID) => {
+    setEditTable(currentTable => removeField(currentTable, fieldId));
+  };
+
   return (
     <>
       <EditTableComponent
         table={editTable}
         updateFieldValue={updateFieldValue}
+        onDeleteField={onDeleteField}
       />
       <button onClick={() => handleSubmit(editTable)}>Apply</button>
     </>