From 653b1f24ad7831d36e5a5ab09496839d2131cdf0 Mon Sep 17 00:00:00 2001 From: nachodiezgarcia Date: Thu, 11 Jun 2026 23:55:31 +0200 Subject: [PATCH 1/3] feat: add confirmation dialog when removing table with children or relations --- .../modal-dialog/modal-dialog.const.ts | 2 ++ .../delete-button/delete-button.component.tsx | 26 ++++++++++++++++++- .../delete-table-dialog.component.tsx | 24 +++++++++++++++++ .../delete-button/delete-table.module.css | 6 +++++ 4 files changed, 57 insertions(+), 1 deletion(-) create mode 100644 src/pods/toolbar/components/delete-button/delete-table-dialog.component.tsx create mode 100644 src/pods/toolbar/components/delete-button/delete-table.module.css diff --git a/src/common/components/modal-dialog/modal-dialog.const.ts b/src/common/components/modal-dialog/modal-dialog.const.ts index e66a0757..146c3b96 100644 --- a/src/common/components/modal-dialog/modal-dialog.const.ts +++ b/src/common/components/modal-dialog/modal-dialog.const.ts @@ -8,3 +8,5 @@ export const EDIT_NOTE_TITLE = 'Edit Note'; export const ABOUT_TITLE = 'About us'; export const EXPORT_MODEL_TITLE = 'Export Model'; export const IMPORT_COLLECTION_TITLE = 'Import JSON Document'; +export const EDIT_TABLE_CONFIRMATION_DIALOG = 'Edit Table'; +export const REMOVE_TABLE_CONFIRMATION_TABLE = 'Remove Table'; \ No newline at end of file diff --git a/src/pods/toolbar/components/delete-button/delete-button.component.tsx b/src/pods/toolbar/components/delete-button/delete-button.component.tsx index 0dd4d66c..d5baeddb 100644 --- a/src/pods/toolbar/components/delete-button/delete-button.component.tsx +++ b/src/pods/toolbar/components/delete-button/delete-button.component.tsx @@ -3,12 +3,36 @@ import { TrashIcon } from '@/common/components/icons'; import { useCanvasSchemaContext } from '@/core/providers'; import { ActionButton } from '@/common/components/action-button'; import { SHORTCUTS } from '@/common/shortcut'; +import { useModalDialogContext } from '@/core/providers'; +import { REMOVE_TABLE_CONFIRMATION_TABLE } from '@/common/components'; +import { DeleteTableDialog } from './delete-table-dialog.component'; + export const DeleteButton: React.FC = () => { const { canvasSchema, deleteSelectedItem } = useCanvasSchemaContext(); + const { openModal, closeModal } = useModalDialogContext(); + const handleDeleteSelectedItemClick = () => { - if (canvasSchema.selectedElementId) { + if (!canvasSchema.selectedElementId) return; + + const selectedTable = canvasSchema.tables.find(t => t.id === canvasSchema.selectedElementId); + const hasChildren = (selectedTable?.fields.length ?? 0) > 1 || + canvasSchema.relations.some(r => r.fromTableId === canvasSchema.selectedElementId || + r.toTableId === canvasSchema.selectedElementId); + + const doDeleteSelectedItem = () => { + if (!canvasSchema.selectedElementId) return; deleteSelectedItem(canvasSchema.selectedElementId); + closeModal(); + } + + if (hasChildren) { + openModal( + , + REMOVE_TABLE_CONFIRMATION_TABLE + ) + } else { + doDeleteSelectedItem(); } }; return ( diff --git a/src/pods/toolbar/components/delete-button/delete-table-dialog.component.tsx b/src/pods/toolbar/components/delete-button/delete-table-dialog.component.tsx new file mode 100644 index 00000000..d584c6df --- /dev/null +++ b/src/pods/toolbar/components/delete-button/delete-table-dialog.component.tsx @@ -0,0 +1,24 @@ +import classes from './delete-table.module.css' + +interface Props { + onConfirm: () => void; + onCancel: () => void; +} + +export const DeleteTableDialog = ({ onConfirm, onCancel }: Props) => ( +
+

You have unsaved changes. Are you sure you want to delete the table? The content of the table will be lost.

+
+ + +
+
+); \ No newline at end of file diff --git a/src/pods/toolbar/components/delete-button/delete-table.module.css b/src/pods/toolbar/components/delete-button/delete-table.module.css new file mode 100644 index 00000000..afbe84b9 --- /dev/null +++ b/src/pods/toolbar/components/delete-button/delete-table.module.css @@ -0,0 +1,6 @@ +.menssage { + font-size: var(--fs-m); + color: var(--text-color); + text-align: center; + margin: 0 0 var(--space-md); +} \ No newline at end of file From 7d8a72cf81cbf910456e050f01e3d236296b70f3 Mon Sep 17 00:00:00 2001 From: nachodiezgarcia Date: Sat, 13 Jun 2026 20:16:54 +0200 Subject: [PATCH 2/3] feat: edit modal if field deleted has nested fields --- .../edit-table-dialog.component.tsx | 24 ++++++++++++++++ src/pods/edit-table/edit-table.module.css | 7 +++++ src/pods/edit-table/edit-table.pod.tsx | 28 ++++++++++++++++++- 3 files changed, 58 insertions(+), 1 deletion(-) create mode 100644 src/pods/edit-table/edit-table-dialog.component.tsx diff --git a/src/pods/edit-table/edit-table-dialog.component.tsx b/src/pods/edit-table/edit-table-dialog.component.tsx new file mode 100644 index 00000000..20bd6bab --- /dev/null +++ b/src/pods/edit-table/edit-table-dialog.component.tsx @@ -0,0 +1,24 @@ +import classes from './edit-table.module.css' + +interface Props { + onConfirm: () => void; + onCancel: () => void; +} + +export const EditModelDialog = ({ onConfirm, onCancel }: Props) => ( +
+

This field has nested fields. Are you sure you want to delete it?

+
+ + +
+
+); \ No newline at end of file diff --git a/src/pods/edit-table/edit-table.module.css b/src/pods/edit-table/edit-table.module.css index 0b659053..b5606e37 100644 --- a/src/pods/edit-table/edit-table.module.css +++ b/src/pods/edit-table/edit-table.module.css @@ -82,6 +82,13 @@ gap: 5px; } +.menssage { + font-size: var(--fs-m); + color: var(--text-color); + text-align: center; + margin: 0 0 var(--space-md); +} + @supports (grid-template-columns: subgrid) { .tableEditor { grid-template-columns: repeat(7, auto); diff --git a/src/pods/edit-table/edit-table.pod.tsx b/src/pods/edit-table/edit-table.pod.tsx index a2e7dc10..74b5e9a2 100644 --- a/src/pods/edit-table/edit-table.pod.tsx +++ b/src/pods/edit-table/edit-table.pod.tsx @@ -14,6 +14,7 @@ import { doMapOrCreateTable, } from './edit-table.business'; import { updateFieldValueLogic } from './edit-table.business'; +import { EditModelDialog } from './edit-table-dialog.component'; interface Props { table?: canvasVm.TableVm; // TODO: should we have our own Vm? @@ -40,6 +41,8 @@ export const EditTablePod: React.FC = props => { doMapOrCreateTable(relations, table) ); + const [pendingDeleteFieldId, setPendingDeleteFieldId] = React.useState(null); + const handleSubmit = (table: editTableVm.TableVm) => { onSave(mapEditTableVmToTableVm(table)); }; @@ -59,7 +62,21 @@ export const EditTablePod: React.FC = props => { }; const onDeleteField = (fieldId: GUID) => { - setEditTable(currentTable => removeField(currentTable, fieldId)); + const field = findFieldRecursively(editTable.fields, fieldId); + const hasChildren = (field?.children?.length ?? 0) > 0; + + if (hasChildren) { + setPendingDeleteFieldId(fieldId); + } else { + setEditTable(currentTable => removeField(currentTable, fieldId)); + } + }; + + const handleConfirmDelete = () => { + if (pendingDeleteFieldId) { + setEditTable(currentTable => removeField(currentTable, pendingDeleteFieldId)); + setPendingDeleteFieldId(null); + } }; const onAddField = (fieldId: GUID, isChildren: boolean, newFieldId: GUID) => { @@ -95,6 +112,15 @@ export const EditTablePod: React.FC = props => { } }; + if (pendingDeleteFieldId) { + return ( + setPendingDeleteFieldId(null)} + /> + ); + } + return ( <> Date: Sat, 13 Jun 2026 20:24:05 +0200 Subject: [PATCH 3/3] feat: adding compact styling for not long text confirmation dialogs --- .../components/modal-dialog/modal-dialog.component.tsx | 2 +- .../components/modal-dialog/modal-dialog.styles.module.css | 5 +++++ .../providers/modal-dialog-provider/modal-dialog.model.ts | 4 +++- .../modal-dialog-provider/modal-dialog.provider.tsx | 3 ++- .../components/delete-button/delete-button.component.tsx | 3 ++- 5 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src/common/components/modal-dialog/modal-dialog.component.tsx b/src/common/components/modal-dialog/modal-dialog.component.tsx index 2839de16..7ee673ac 100644 --- a/src/common/components/modal-dialog/modal-dialog.component.tsx +++ b/src/common/components/modal-dialog/modal-dialog.component.tsx @@ -53,7 +53,7 @@ export const ModalDialog: React.FC = () => { transition={{ duration: 0.4 }} > ({ isOpen: false, selectedComponent: null, title: '', + compact: false, }); export interface ModalDialogContextModel { - openModal: (component: React.ReactNode | null, title: string) => void; + openModal: (component: React.ReactNode | null, title: string, compact?: boolean) => 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 index a7a3205d..7bc80155 100644 --- a/src/core/providers/modal-dialog-provider/modal-dialog.provider.tsx +++ b/src/core/providers/modal-dialog-provider/modal-dialog.provider.tsx @@ -15,11 +15,12 @@ export const ModalDialogProvider: React.FC = props => { createInitialModalDialog() ); - const openModal = (component: React.ReactNode | null, title: string) => { + const openModal = (component: React.ReactNode | null, title: string, compact?: boolean) => { setModalDialog({ isOpen: true, selectedComponent: component, title, + compact, }); }; diff --git a/src/pods/toolbar/components/delete-button/delete-button.component.tsx b/src/pods/toolbar/components/delete-button/delete-button.component.tsx index d5baeddb..5c354f75 100644 --- a/src/pods/toolbar/components/delete-button/delete-button.component.tsx +++ b/src/pods/toolbar/components/delete-button/delete-button.component.tsx @@ -29,7 +29,8 @@ export const DeleteButton: React.FC = () => { if (hasChildren) { openModal( , - REMOVE_TABLE_CONFIRMATION_TABLE + REMOVE_TABLE_CONFIRMATION_TABLE, + true ) } else { doDeleteSelectedItem();