Add Manage Index Section

src/common/components/icons/index.ts

@@ -1,6 +1,7 @@
 export * from './dark-icon.component';
 export * from './light-icon.component';
 export * from './edit-icon.component';
+export * from './key-icon.component';
 export * from './canvas-setting-icon.component';
 export * from './relation-icon.component';
 export * from './zoom-in-icon.component';

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

@@ -0,0 +1,12 @@
+export const KeyIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.2em"
+      height="1.2em"
+      viewBox="0 0 256 256"
+    >
+      <path d="M200,48A56,56,0,1,0,141.09,97.42L53.66,184.85a8,8,0,0,0-2.34,5.66V208H40a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8H72a8,8,0,0,0,8-8V240h16a8,8,0,0,0,8-8V226.68a8,8,0,0,0,2.34-5.66l13.59-13.59,13.6,13.6a8,8,0,0,0,11.32,0l24-24a8,8,0,0,0,0-11.32l-13.6-13.6,27.08-27.08A56,56,0,1,0,200,48Zm0,32a24,24,0,1,1-24-24A24,24,0,0,1,200,80Z" />
+    </svg>
+  );
+};

src/common/components/modal-dialog/modal-dialog.const.ts

@@ -1,5 +1,6 @@
 export const CANVAS_SETTINGS_TITLE = 'Canvas Settings';
 export const ADD_RELATION_TITLE = 'Add Relation';
+export const MANAGE_INDEX_TITLE = 'Manage Index';
 export const EDIT_RELATION_TITLE = 'Edit Relation';
 export const ADD_COLLECTION_TITLE = 'Add Collection';
 export const EDIT_COLLECTION_TITLE = 'Edit Collection';

src/core/functions.ts

@@ -0,0 +1,33 @@
+import { IndexField } from './providers';
+
+export const isNullOrWhiteSpace = (str?: string) => !str?.trim();
+
+export const parseManageIndexFields = (fieldsString?: string): IndexField[] => {
+  const fields = fieldsString
+    ?.split(/\s*,\s*/) // Split by commas with spaces
+    ?.map(field => {
+      const [name, ...orderParts] = field.trim().split(/\s+/); // Split by one or more spaces
+      return { name, orderMethod: orderParts.join(' ') }; // Handle multi-word order methods
+    });
+  return fields?.filter(x => !isNullOrWhiteSpace(x.name)) as IndexField[];
+};
+
+export const clonify = <T>(input: object): T => {
+  const str = JSON.stringify(input);
+  const obj = JSON.parse(str);
+  return obj as T;
+};
+
+export const isEqual = (
+  a?: string,
+  b?: string,
+  ignoreCaseSensivity?: boolean
+): boolean => {
+  ignoreCaseSensivity = ignoreCaseSensivity ?? true;
+  if (ignoreCaseSensivity) {
+    a = a?.toLowerCase();
+    b = b?.toLowerCase();
+  }
+  if (a === b) return true;
+  return false;
+};

src/core/model/errorHandling.ts

@@ -0,0 +1,10 @@
+export interface errorHandling {
+  errorKey?: string;
+  errorMessage?: string;
+  isSuccessful: boolean;
+}
+
+export interface Output<T> {
+  errorHandling: errorHandling;
+  data?: T;
+}

src/core/providers/canvas-schema/canvas-schema-vlatest.model.ts

@@ -1,11 +1,13 @@
 import { Coords, FieldType, GUID, Size } from '@/core/model';
+import { errorHandling } from '@/core/model/errorHandling';
 
 export interface TableVm {
   id: string;
   fields: FieldVm[];
   tableName: string;
   x: number; // Canvas X Position
   y: number; // Canvas Y Position
+  indexes?: IndexVm[];
 }
 
 export interface FieldVm {
@@ -40,6 +42,22 @@ export interface DatabaseSchemaVm {
   isPristine?: boolean;
 }
 
+export type OrderMethod = 'Ascending' | 'Descending';
+
+export interface IndexField {
+  name: string;
+  orderMethod: OrderMethod;
+}
+export interface IndexVm {
+  id: string;
+  name: string;
+  isUnique: boolean;
+  sparse: boolean;
+  fields: IndexField[];
+  fieldsString?: string;
+  partialFilterExpression?: string;
+}
+
 export const createDefaultDatabaseSchemaVm = (): DatabaseSchemaVm => ({
   version: '0.1',
   tables: [],
@@ -68,8 +86,10 @@ export interface CanvasSchemaContextVm {
   updateTablePosition: UpdatePositionFn;
   doFieldToggleCollapse: (tableId: string, fieldId: GUID) => void;
   updateFullTable: (table: TableVm) => void;
+  updateFullTableByCheckingIndexes: (table: TableVm) => errorHandling;
   addTable: (table: TableVm) => void;
   addRelation: (relation: RelationVm) => void;
+  addIndexes: (tableId: GUID, indexes: IndexVm[]) => void;
   doSelectElement: (id: GUID | null) => void;
   canUndo: () => boolean;
   canRedo: () => boolean;

src/core/providers/canvas-schema/canvas-schema.business.ts

@@ -1,5 +1,10 @@
 import { produce } from 'immer';
-import { FieldVm, RelationVm, TableVm } from './canvas-schema-vlatest.model';
+import {
+  FieldVm,
+  IndexVm,
+  RelationVm,
+  TableVm,
+} from './canvas-schema-vlatest.model';
 import { DatabaseSchemaVm } from './canvas-schema-vlatest.model';
 import { GUID } from '@/core/model';
 
@@ -105,3 +110,15 @@ export const updateRelation = (
       draft.relations[index] = relation;
     }
   });
+
+export const updateIndexes = (
+  tableId: GUID,
+  indexes: IndexVm[],
+  dbSchema: DatabaseSchemaVm
+): DatabaseSchemaVm =>
+  produce(dbSchema, draft => {
+    const tableIndex = draft.tables.findIndex(t => t.id === tableId);
+    if (tableIndex !== -1) {
+      draft.tables[tableIndex].indexes = indexes;
+    }
+  });

src/core/providers/canvas-schema/canvas-schema.provider.tsx

@@ -3,6 +3,7 @@ import { produce } from 'immer';
 import { CanvasSchemaContext } from './canvas-schema.context';
 import {
   DatabaseSchemaVm,
+  IndexVm,
   RelationVm,
   TableVm,
   UpdatePositionItemInfo,
@@ -19,10 +20,13 @@ import {
   addNewTable,
   updateRelation,
   updateTable,
+  updateIndexes,
 } from './canvas-schema.business';
 import { useHistoryManager } from '@/common/undo-redo';
 import { mapSchemaToLatestVersion } from './canvas-schema.mapper';
 import { useStateWithInterceptor } from './canvas-schema.hook';
+import { indexDuplicateNameChecking } from '@/pods/manage-index/manage-index.business';
+import { errorHandling } from '@/core/model/errorHandling';
 
 interface Props {
   children: React.ReactNode;
@@ -60,6 +64,17 @@ export const CanvasSchemaProvider: React.FC<Props> = props => {
     );
   };
 
+  const updateFullTableByCheckingIndexes = (table: TableVm): errorHandling => {
+    const res = indexDuplicateNameChecking(table, canvasSchema);
+    if (!res.isSuccessful) {
+      return res;
+    }
+    setSchema(prevSchema =>
+      updateTable(table, { ...prevSchema, isPristine: false })
+    );
+    return res;
+  };
+
   // TODO: #56 created to track this
   // https://github.com/Lemoncode/mongo-modeler/issues/56
   const addTable = (table: TableVm) => {
@@ -80,6 +95,12 @@ export const CanvasSchemaProvider: React.FC<Props> = props => {
     }
   };
 
+  const addIndexes = (tableId: GUID, indexes: IndexVm[]) => {
+    setSchema(prevSchema =>
+      updateIndexes(tableId, indexes, { ...prevSchema, isPristine: false })
+    );
+  };
+
   const updateFullRelation = (relationUpdated: RelationVm) => {
     setSchema(prevSchema =>
       updateRelation(relationUpdated, { ...prevSchema, isPristine: false })
@@ -167,8 +188,10 @@ export const CanvasSchemaProvider: React.FC<Props> = props => {
         updateTablePosition,
         doFieldToggleCollapse,
         updateFullTable,
+        updateFullTableByCheckingIndexes,
         addTable,
         addRelation,
+        addIndexes,
         doSelectElement,
         canUndo,
         canRedo,

src/pods/canvas/canvas-svg.component.tsx

@@ -17,6 +17,7 @@ interface Props {
   onUpdateTablePosition: UpdatePositionFn;
   onToggleCollapse: (tableId: GUID, fieldId: GUID) => void;
   onEditTable: (tableInfo: TableVm) => void;
+  onManageIndex: (tableInfo: TableVm) => void;
   onEditRelation: (relationId: GUID) => void;
   onSelectElement: (relationId: GUID | null) => void;
   isTabletOrMobileDevice: boolean;
@@ -31,6 +32,7 @@ export const CanvasSvgComponent: React.FC<Props> = props => {
     onUpdateTablePosition,
     onToggleCollapse,
     onEditTable,
+    onManageIndex,
     onEditRelation,
     onSelectElement,
     isTabletOrMobileDevice,
@@ -63,6 +65,7 @@ export const CanvasSvgComponent: React.FC<Props> = props => {
           updatePosition={onUpdateTablePosition}
           onToggleCollapse={onToggleCollapse}
           onEditTable={onEditTable}
+          onManageIndex={onManageIndex}
           canvasSize={canvasSize}
           isSelected={canvasSchema.selectedElementId === table.id}
           selectTable={onSelectElement}

src/pods/canvas/canvas.pod.tsx

@@ -17,6 +17,7 @@ import {
   EDIT_COLLECTION_TITLE,
   ADD_COLLECTION_TITLE,
   ADD_RELATION_TITLE,
+  MANAGE_INDEX_TITLE,
 } from '@/common/components/modal-dialog';
 import { CanvasSvgComponent } from './canvas-svg.component';
 import { EditRelationPod } from '../edit-relation';
@@ -25,6 +26,8 @@ import { CanvasAccessible } from './components/canvas-accessible';
 import useAutosave from '@/core/autosave/autosave.hook';
 import { CANVAS_MAX_WIDTH } from '@/core/providers';
 import { setOffSetZoomToCoords } from '@/common/helpers/set-off-set-zoom-to-coords.helper';
+import { ManageIndexPod } from '../manage-index';
+
 const HEIGHT_OFFSET = 200;
 const BORDER_MARGIN = 40;
 export const CanvasPod: React.FC = () => {
@@ -35,6 +38,7 @@ export const CanvasPod: React.FC = () => {
     addRelation,
     updateTablePosition,
     updateFullTable,
+    updateFullTableByCheckingIndexes,
     doFieldToggleCollapse,
     doSelectElement,
     updateFullRelation,
@@ -119,6 +123,28 @@ export const CanvasPod: React.FC = () => {
     );
   };
 
+  const handleManageIndexSave = (table: TableVm) => {
+    const res = updateFullTableByCheckingIndexes(table);
+    console.log(table);
+    if (!res.isSuccessful) {
+      alert(res.errorMessage);
+      return;
+    }
+    closeModal();
+  };
+
+  const handleManageIndex = (tableInfo: TableVm) => {
+    if (isTabletOrMobileDevice) return;
+    openModal(
+      <ManageIndexPod
+        table={tableInfo}
+        onSave={handleManageIndexSave}
+        onClose={handleCloseModal}
+      />,
+      MANAGE_INDEX_TITLE
+    );
+  };
+
   const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleScroll = () => {
@@ -231,7 +257,6 @@ export const CanvasPod: React.FC = () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [modalDialog.isOpen, canvasSchema.selectedElementId]);
-
   return (
     <main
       className={classes.container}
@@ -266,6 +291,7 @@ export const CanvasPod: React.FC = () => {
           onUpdateTablePosition={updateTablePosition}
           onToggleCollapse={handleToggleCollapse}
           onEditTable={handleEditTable}
+          onManageIndex={handleManageIndex}
           onEditRelation={handleEditRelation}
           onSelectElement={onSelectElement}
           isTabletOrMobileDevice={isTabletOrMobileDevice}