Merge pull request #113 from Lemoncode/feature/#85-Edit-table-edit-ta…

…ble-name Feature/#85 edit table edit table name
Lemoncode · Jan 15, 2024 · a11ff41 · a11ff41
2 parents f79560c + e4ec7ff
commit a11ff41
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 40 deletions.
diff --git a/src/common/components/modal-dialog/modal-dialog.component.tsx b/src/common/components/modal-dialog/modal-dialog.component.tsx
@@ -23,14 +23,6 @@ export const ModalDialog: React.FC = () => {
         <div className={styles.dialog} role="dialog">
           <div className={styles.dialogHeader}>
             <h2 className={styles.dialogTitle}>{modalDialog.title}</h2>
-            {modalDialog.subtitle && (
-              <>
-                <span>&gt;</span>
-                <h3 className={styles.dialogSubtitle}>
-                  {modalDialog.subtitle}
-                </h3>
-              </>
-            )}
             <button className={styles.dialogButton} onClick={handleClick}>
               <svg
                 xmlns="http://www.w3.org/2000/svg"

diff --git a/src/core/providers/modal-dialog-provider/modal-dialog.model.ts b/src/core/providers/modal-dialog-provider/modal-dialog.model.ts
@@ -4,22 +4,16 @@ export interface ModalDialogModel {
   isOpen: boolean;
   selectedComponent: React.ReactNode | null;
   title: string;
-  subtitle?: string;
 }
 
 export const createInitialModalDialog = (): ModalDialogModel => ({
   isOpen: false,
   selectedComponent: null,
   title: '',
-  subtitle: undefined,
 });
 
 export interface ModalDialogContextModel {
-  openModal: (
-    component: React.ReactNode | null,
-    title: string,
-    subtitle?: string
-  ) => void;
+  openModal: (component: React.ReactNode | null, title: string) => void;
   closeModal: () => void;
   modalDialog: ModalDialogModel;
 }
diff --git a/src/core/providers/modal-dialog-provider/modal-dialog.provider.tsx b/src/core/providers/modal-dialog-provider/modal-dialog.provider.tsx
@@ -15,16 +15,11 @@ export const ModalDialogProvider: React.FC<Props> = props => {
     createInitialModalDialog()
   );
 
-  const openModal = (
-    component: React.ReactNode | null,
-    title: string,
-    subtitle?: string
-  ) => {
+  const openModal = (component: React.ReactNode | null, title: string) => {
     setModalDialog({
       isOpen: true,
       selectedComponent: component,
       title,
-      subtitle,
     });
   };
 
@@ -33,7 +28,6 @@ export const ModalDialogProvider: React.FC<Props> = props => {
       isOpen: false,
       selectedComponent: null,
       title: '',
-      subtitle: undefined,
     });
   };
   return (

diff --git a/src/pods/canvas/canvas.pod.tsx b/src/pods/canvas/canvas.pod.tsx
@@ -55,8 +55,7 @@ export const CanvasPod: React.FC = () => {
         relations={canvasSchema.relations}
         onSave={handleTableEditUpdate}
       />,
-      EDIT_TABLE_TITLE,
-      tableInfo.tableName
+      EDIT_TABLE_TITLE
     );
   };
 

diff --git a/src/pods/edit-table/edit-table.component.tsx b/src/pods/edit-table/edit-table.component.tsx
@@ -13,10 +13,17 @@ interface Props {
   ) => void;
   onDeleteField: (fieldId: GUID) => void;
   onAddField: (fieldId: GUID, isChildren: boolean) => void;
+  updateTableName: (value: string) => void;
 }
 
 export const EditTableComponent: React.FC<Props> = props => {
-  const { table, updateFieldValue, onDeleteField, onAddField } = props;
+  const {
+    table,
+    updateFieldValue,
+    onDeleteField,
+    onAddField,
+    updateTableName,
+  } = props;
   const [expandedFields, setExpandedFields] = useState<Set<string>>(new Set());
 
   const expandField = (fieldId: string) => {
@@ -41,18 +48,34 @@ export const EditTableComponent: React.FC<Props> = props => {
     });
   };
 
+  const handleChangeTableName = (e: React.ChangeEvent<HTMLInputElement>) => {
+    updateTableName(e.currentTarget.value);
+  };
+
   return (
-    <div className={classes.tableEditor}>
-      <NestedFieldGrid
-        fields={table.fields}
-        level={0}
-        expandedFields={expandedFields}
-        toggleExpand={toggleExpand}
-        expandField={expandField}
-        updateFieldValue={updateFieldValue}
-        onDeleteField={onDeleteField}
-        onAddField={onAddField}
-      />
-    </div>
+    <>
+      <div className={classes.tableName}>
+        <label>
+          Table:
+          <input
+            type="text"
+            value={table.tableName}
+            onChange={handleChangeTableName}
+          />
+        </label>
+      </div>
+      <div className={classes.tableEditor}>
+        <NestedFieldGrid
+          fields={table.fields}
+          level={0}
+          expandedFields={expandedFields}
+          toggleExpand={toggleExpand}
+          expandField={expandField}
+          updateFieldValue={updateFieldValue}
+          onDeleteField={onDeleteField}
+          onAddField={onAddField}
+        />
+      </div>
+    </>
   );
 };
diff --git a/src/pods/edit-table/edit-table.module.css b/src/pods/edit-table/edit-table.module.css
@@ -67,3 +67,20 @@
 .indent7 {
   margin-left: 140px;
 }
+
+.table-name {
+  position: sticky;
+  top: 40px;
+  left: 0px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  z-index: 2;
+  text-align: left;
+  background-color: var(--primary-background);
+  border-bottom: 1px solid #ccc;
+}
+.table-name label {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
diff --git a/src/pods/edit-table/edit-table.pod.tsx b/src/pods/edit-table/edit-table.pod.tsx
@@ -83,14 +83,17 @@ export const EditTablePod: React.FC<Props> = props => {
       addFieldLogic(currentTable, fieldId, isChildren)
     );
   };
-
+  const updateTableName = (tableName: string) => {
+    setEditTable({ ...editTable, tableName });
+  };
   return (
     <>
       <EditTableComponent
         table={editTable}
         updateFieldValue={updateFieldValue}
         onDeleteField={onDeleteField}
         onAddField={onAddField}
+        updateTableName={updateTableName}
       />
       <button onClick={() => handleSubmit(editTable)}>Apply</button>
     </>

diff --git a/src/pods/toolbar/components/edit-button/edit-button.component.tsx b/src/pods/toolbar/components/edit-button/edit-button.component.tsx
@@ -26,8 +26,7 @@ export const EditButton = () => {
         relations={canvasSchema.relations}
         onSave={handleAddTable}
       />,
-      EDIT_TABLE_TITLE,
-      'New Table'
+      EDIT_TABLE_TITLE
     );
   };
   return (