feat: SQL index

packages/erd-editor/src/components/erd/table-properties/table-properties-indexes/TablePropertiesIndexes.ts

@@ -5,7 +5,7 @@ import IndexesIndex from '@/components/erd/table-properties//table-properties-in
 import IndexesCheckboxColumn from '@/components/erd/table-properties/table-properties-indexes/indexes-checkbox-column/IndexesCheckboxColumn';
 import IndexesColumn from '@/components/erd/table-properties/table-properties-indexes/indexes-column/IndexesColumn';
 import Icon from '@/components/primitives/icon/Icon';
-import { useUnmounted } from '@/hooks/useUnmounted';
+import { addIndexAction$ } from '@/engine/modules/index/generator.actions';
 import { Index } from '@/internal-types';
 import { query } from '@/utils/collection/query';
 
@@ -20,7 +20,6 @@ const TablePropertiesIndexes: FC<TablePropertiesIndexesProps> = (
   ctx
 ) => {
   const app = useAppContext(ctx);
-  const { addUnsubscribe } = useUnmounted();
 
   const state = observable({
     index: null as Index | null,
@@ -31,8 +30,8 @@ const TablePropertiesIndexes: FC<TablePropertiesIndexesProps> = (
   };
 
   const handleAddIndex = () => {
-    // TODO: add index
-    console.log('handleAddIndex');
+    const { store } = app.value;
+    store.dispatch(addIndexAction$(props.tableId));
   };
 
   return () => {

packages/erd-editor/src/components/erd/table-properties/table-properties-indexes/indexes-checkbox-column/IndexesCheckboxColumn.ts

@@ -17,6 +17,10 @@ import {
   ColumnType,
   Show,
 } from '@/constants/schema';
+import {
+  addIndexColumnAction$,
+  removeIndexColumnAction$,
+} from '@/engine/modules/index-column/generator.actions';
 import { Column, Index } from '@/internal-types';
 import { bHas } from '@/utils/bit';
 import { calcTableWidths, ColumnWidth } from '@/utils/calcTable';
@@ -26,7 +30,7 @@ import * as styles from './IndexesCheckboxColumn.styles';
 
 export type IndexesCheckboxColumnProps = {
   tableId: string;
-  index: Index | null;
+  index: Index;
 };
 
 type ColumnOrderTpl = {
@@ -151,8 +155,15 @@ const IndexesCheckboxColumn: FC<IndexesCheckboxColumnProps> = (props, ctx) => {
   };
 
   const handleChangeIndexColumn = (event: InputEvent, column: Column) => {
-    // TODO: change index column
-    console.log('handleChangeIndexColumn', event, column);
+    const input = event.target as HTMLInputElement | null;
+    if (!input) return;
+
+    const { store } = app.value;
+    const action$ = input.checked
+      ? addIndexColumnAction$
+      : removeIndexColumnAction$;
+
+    store.dispatch(action$(props.index.id, column.id));
   };
 
   return () => {

packages/erd-editor/src/components/erd/table-properties/table-properties-indexes/indexes-column/IndexesColumn.styles.ts

@@ -9,6 +9,10 @@ import {
 
 export const root = css`
   padding-top: 12px;
+
+  .index-column-order-move {
+    transition: transform 0.3s;
+  }
 `;
 
 export const row = css`
@@ -28,6 +32,14 @@ export const row = css`
   & > .column-col {
     padding: ${COLUMN_PADDING}px ${INPUT_MARGIN_RIGHT}px ${COLUMN_PADDING}px 0;
   }
+
+  &.none-hover {
+    background-color: transparent;
+  }
+
+  &.draggable {
+    opacity: 0.5;
+  }
 `;
 
 export const orderType = css`

packages/erd-editor/src/components/erd/table-properties/table-properties-indexes/indexes-column/IndexesColumn.ts

@@ -1,12 +1,19 @@
-import { FC, html, repeat } from '@dineug/r-html';
+import { createRef, FC, html, onUpdated, ref, repeat } from '@dineug/r-html';
 
 import { useAppContext } from '@/components/appContext';
 import ColumnOption from '@/components/erd/canvas/table/column/column-option/ColumnOption';
 import Icon from '@/components/primitives/icon/Icon';
 import { OrderType } from '@/constants/schema';
+import {
+  changeIndexColumnOrderTypeAction$,
+  moveIndexColumnAction$,
+} from '@/engine/modules/index-column/generator.actions';
 import { Index, IndexColumn } from '@/internal-types';
 import { query } from '@/utils/collection/query';
 import { onPrevent } from '@/utils/domEvent';
+import { FlipAnimation } from '@/utils/flipAnimation';
+import { fromShadowDraggable } from '@/utils/rx-operators/fromShadowDraggable';
+import { toOrderName } from '@/utils/schema-sql/utils';
 
 import * as styles from './IndexesColumn.styles';
 
@@ -16,17 +23,12 @@ export type IndexesColumnProps = {
 
 const IndexesColumn: FC<IndexesColumnProps> = (props, ctx) => {
   const app = useAppContext(ctx);
-
-  const toOrderName = (orderType: number) => {
-    switch (orderType) {
-      case OrderType.ASC:
-        return 'ASC';
-      case OrderType.DESC:
-        return 'DESC';
-      default:
-        return '';
-    }
-  };
+  const root = createRef<HTMLDivElement>();
+  const flipAnimation = new FlipAnimation(
+    root,
+    `.${styles.row}`,
+    'index-column-order-move'
+  );
 
   const toOrderTitle = (orderType: number) => {
     switch (orderType) {
@@ -39,16 +41,45 @@ const IndexesColumn: FC<IndexesColumnProps> = (props, ctx) => {
     }
   };
 
+  const handleMove = (id: string, targetId: string) => {
+    const { store } = app.value;
+
+    if (id !== targetId) {
+      flipAnimation.snapshot();
+      store.dispatch(moveIndexColumnAction$(id, targetId));
+    }
+  };
+
   const handleDragstart = (event: DragEvent) => {
-    // TODO: change order indexColumn
-    console.log('handleDragstart', event);
+    const $root = root.value;
+    const $target = event.target as HTMLElement | null;
+    if (!$root || !$target) return;
+
+    const id = $target.dataset.id as string;
+    const elements = Array.from<HTMLElement>(
+      $root.querySelectorAll(`.${styles.row}`)
+    );
+    elements.forEach(el => el.classList.add('none-hover'));
+    $target.classList.add('draggable');
+
+    fromShadowDraggable(elements).subscribe({
+      next: targetId => {
+        handleMove(id, targetId);
+      },
+      complete: () => {
+        $target.classList.remove('draggable');
+        elements.forEach(el => el.classList.remove('none-hover'));
+      },
+    });
   };
 
   const handleChangeOrderType = (indexColumn: IndexColumn) => {
-    // TODO: change indexColumn orderType
-    console.log('handleChangeOrderType', indexColumn);
+    const { store } = app.value;
+    store.dispatch(changeIndexColumnOrderTypeAction$(indexColumn.id));
   };
 
+  onUpdated(() => flipAnimation.play());
+
   return () => {
     const { store } = app.value;
     const { collections } = store.state;
@@ -64,7 +95,12 @@ const IndexesColumn: FC<IndexesColumnProps> = (props, ctx) => {
       }));
 
     return html`
-      <div class=${styles.root} @dragenter=${onPrevent} @dragover=${onPrevent}>
+      <div
+        class=${styles.root}
+        ${ref(root)}
+        @dragenter=${onPrevent}
+        @dragover=${onPrevent}
+      >
         ${repeat(
           indexColumns,
           indexColumn => indexColumn.id,

packages/erd-editor/src/components/erd/table-properties/table-properties-indexes/indexes-index/IndexesIndex.ts

@@ -5,6 +5,11 @@ import ColumnOption from '@/components/erd/canvas/table/column/column-option/Col
 import Icon from '@/components/primitives/icon/Icon';
 import TextInput from '@/components/primitives/text-input/TextInput';
 import { COLUMN_UNIQUE_WIDTH } from '@/constants/layout';
+import {
+  changeIndexNameAction,
+  removeIndexAction,
+} from '@/engine/modules/index/atom.actions';
+import { changeIndexUniqueAction$ } from '@/engine/modules/index/generator.actions';
 import { Index } from '@/internal-types';
 
 import * as styles from './IndexesIndex.styles';
@@ -18,21 +23,35 @@ export type IndexesIndexProps = {
 const IndexesIndex: FC<IndexesIndexProps> = (props, ctx) => {
   const app = useAppContext(ctx);
 
-  const handleRemoveIndex = (event: MouseEvent, index: Index) => {
-    // TODO: remove index
+  const handleSelect = () => {
+    props.onSelect(props.index);
+  };
+
+  const handleRemoveIndex = (event: MouseEvent) => {
     event.stopPropagation();
     props.onSelect(null);
-    console.log('handleRemoveIndex', index);
+
+    const { store } = app.value;
+    store.dispatch(removeIndexAction({ id: props.index.id }));
   };
 
-  const handleChangeUniqueIndex = (index: Index) => {
-    // TODO: change unique index
-    console.log('handleChangeUniqueIndex', index);
+  const handleChangeUniqueIndex = () => {
+    const { store } = app.value;
+    store.dispatch(changeIndexUniqueAction$(props.index.id));
   };
 
-  const handleChangeIndexName = (event: InputEvent, index: Index) => {
-    // TODO: change index name
-    console.log('handleChangeIndexName', event, index);
+  const handleChangeIndexName = (event: InputEvent) => {
+    const input = event.target as HTMLInputElement | null;
+    if (!input) return;
+
+    const { store } = app.value;
+    store.dispatch(
+      changeIndexNameAction({
+        id: props.index.id,
+        tableId: props.index.tableId,
+        value: input.value,
+      })
+    );
   };
 
   return () => {
@@ -41,9 +60,9 @@ const IndexesIndex: FC<IndexesIndexProps> = (props, ctx) => {
     return html`
       <div
         class=${[styles.row, { selected: props.selected }]}
-        @click=${() => props.onSelect(index)}
+        @click=${handleSelect}
       >
-        <div class="column-col" @click=${() => handleChangeUniqueIndex(index)}>
+        <div class="column-col" @click=${handleChangeUniqueIndex}>
           <${ColumnOption}
             class=${styles.unique}
             checked=${index.unique}
@@ -57,16 +76,15 @@ const IndexesIndex: FC<IndexesIndexProps> = (props, ctx) => {
             class=${styles.input}
             placeholder="name"
             value=${index.name}
-            .onInput=${(event: InputEvent) =>
-              handleChangeIndexName(event, index)}
+            .onInput=${handleChangeIndexName}
           />
         </div>
         <${Icon}
           class=${styles.iconButton}
           size=${12}
           name="xmark"
           title="Remove"
-          .onClick=${(event: MouseEvent) => handleRemoveIndex(event, index)}
+          .onClick=${handleRemoveIndex}
         />
       </div>
     `;

packages/erd-editor/src/engine/actions.ts

@@ -5,8 +5,10 @@ import {
 import { ActionMap as EditorActionMap } from '@/engine/modules/editor/actions';
 import { actions as editorActions } from '@/engine/modules/editor/atom.actions';
 import { actions$ as editorActions$ } from '@/engine/modules/editor/generator.actions';
+import { ActionMap as IndexActionMap } from '@/engine/modules/index/actions';
 import { actions as indexActions } from '@/engine/modules/index/atom.actions';
 import { actions$ as indexActions$ } from '@/engine/modules/index/generator.actions';
+import { ActionMap as IndexColumnActionMap } from '@/engine/modules/index-column/actions';
 import { actions as indexColumnActions } from '@/engine/modules/index-column/atom.actions';
 import { actions$ as indexColumnActions$ } from '@/engine/modules/index-column/generator.actions';
 import { ActionMap as MemoActionMap } from '@/engine/modules/memo/actions';
@@ -47,7 +49,9 @@ export type RootActionMap = EditorActionMap &
   TableColumnActionMap &
   MemoActionMap &
   RelationshipActionMap &
-  SettingsActionMap;
+  SettingsActionMap &
+  IndexActionMap &
+  IndexColumnActionMap;
 
 export type ActionType = keyof RootActionMap;
 
@@ -70,7 +74,6 @@ export const actions: Actions = Object.freeze({
   ...tableColumnActions$,
 });
 
-// TODO: changeActionTypes
 export const ChangeActionTypes: ReadonlyArray<ActionType> = [
   // table
   'table.add',
@@ -96,7 +99,15 @@ export const ChangeActionTypes: ReadonlyArray<ActionType> = [
   'relationship.remove',
   'relationship.changeType',
   // index
+  'index.add',
+  'index.remove',
+  'index.changeName',
+  'index.changeUnique',
   // indexColumn
+  'indexColumn.add',
+  'indexColumn.remove',
+  'indexColumn.move',
+  'indexColumn.changeOrderType',
   // memo
   'memo.add',
   'memo.move',

packages/erd-editor/src/engine/history.actions.ts

@@ -4,6 +4,8 @@ import { cloneDeep } from 'lodash-es';
 
 import { History } from '@/engine/history';
 import { editorPushUndoHistoryMap } from '@/engine/modules/editor/history';
+import { indexPushUndoHistoryMap } from '@/engine/modules/index/history';
+import { indexColumnPushUndoHistoryMap } from '@/engine/modules/index-column/history';
 import {
   memoPushStreamHistoryMap,
   memoPushUndoHistoryMap,
@@ -41,6 +43,8 @@ export const pushUndoHistoryMap: Record<string, PushUndoHistory> = {
   ...memoPushUndoHistoryMap,
   ...settingsPushUndoHistoryMap,
   ...editorPushUndoHistoryMap,
+  ...indexPushUndoHistoryMap,
+  ...indexColumnPushUndoHistoryMap,
 };
 
 export const pushStreamHistoryMap: Record<string, PushStreamHistory> = {

packages/erd-editor/src/engine/modules/index-column/actions.ts

@@ -0,0 +1,46 @@
+import { Reducer } from '@dineug/r-html';
+
+import { EngineContext } from '@/engine/context';
+import { RootState } from '@/engine/state';
+import { ValuesType } from '@/internal-types';
+
+export const ActionType = {
+  addIndexColumn: 'indexColumn.add',
+  removeIndexColumn: 'indexColumn.remove',
+  moveIndexColumn: 'indexColumn.move',
+  changeIndexColumnOrderType: 'indexColumn.changeOrderType',
+} as const;
+export type ActionType = ValuesType<typeof ActionType>;
+
+export type ActionMap = {
+  [ActionType.addIndexColumn]: {
+    id: string;
+    indexId: string;
+    tableId: string;
+    columnId: string;
+  };
+  [ActionType.removeIndexColumn]: {
+    id: string;
+    indexId: string;
+    tableId: string;
+  };
+  [ActionType.moveIndexColumn]: {
+    id: string;
+    indexId: string;
+    tableId: string;
+    targetId: string;
+  };
+  [ActionType.changeIndexColumnOrderType]: {
+    id: string;
+    indexId: string;
+    columnId: string;
+    value: number;
+  };
+};
+
+export type ReducerType<T extends keyof ActionMap> = Reducer<
+  RootState,
+  T,
+  ActionMap,
+  EngineContext
+>;