feat: indexes layout

dineug · Dec 5, 2023 · ec8ee79 · ec8ee79
1 parent fb6f06f
commit ec8ee79
Show file tree

Hide file tree

Showing 12 changed files with 588 additions and 17 deletions.
diff --git a/packages/erd-editor/src/components/erd/automatic-table-placement/AutomaticTablePlacement.ts b/packages/erd-editor/src/components/erd/automatic-table-placement/AutomaticTablePlacement.ts
@@ -92,15 +92,18 @@ const AutomaticTablePlacement: FC<AutomaticTablePlacementProps> = (
 
   const [close, onClose] = closePromise();
 
-  const handleCancel = () => {
+  let isClosed = false;
+
+  const handleClose = () => {
+    isClosed = true;
     onClose();
     prevApp.store.dispatch(
       changeOpenMapAction({ [Open.automaticTablePlacement]: false })
     );
   };
 
   if (!tables.length) {
-    handleCancel();
+    handleClose();
     emitter.emit(
       openToastAction({
         message: html`<${Toast} description="Not found tables" />`,
@@ -113,6 +116,8 @@ const AutomaticTablePlacement: FC<AutomaticTablePlacementProps> = (
     const simulation = createAutomaticTablePlacement(store.state);
 
     const handleStop = () => {
+      if (isClosed) return;
+
       simulation.stop();
       props.onChange(
         tables.map(table => ({
@@ -121,7 +126,12 @@ const AutomaticTablePlacement: FC<AutomaticTablePlacementProps> = (
           y: table.ui.y,
         }))
       );
-      handleCancel();
+      handleClose();
+    };
+
+    const handleCancel = () => {
+      simulation.stop();
+      handleClose();
     };
 
     emitter.emit(
@@ -151,7 +161,7 @@ const AutomaticTablePlacement: FC<AutomaticTablePlacementProps> = (
       })
     );
   } catch (e) {
-    handleCancel();
+    handleClose();
   }
 
   return () =>

diff --git a/packages/erd-editor/src/components/erd/canvas/table/column/column-option/ColumnOption.ts b/packages/erd-editor/src/components/erd/canvas/table/column/column-option/ColumnOption.ts
@@ -3,6 +3,7 @@ import { FC, html } from '@dineug/r-html';
 import * as styles from './ColumnOption.styles';
 
 export type ColumnOptionProps = {
+  class?: any;
   focus: boolean;
   width: number;
   checked: boolean;
@@ -13,7 +14,11 @@ export type ColumnOptionProps = {
 const ColumnOption: FC<ColumnOptionProps> = (props, ctx) => {
   return () => html`
     <div
-      class=${[styles.option, { focus: props.focus, checked: props.checked }]}
+      class=${[
+        styles.option,
+        { focus: props.focus, checked: props.checked },
+        props.class,
+      ]}
       style=${{
         width: `${props.width}px`,
         'min-width': `${props.width}px`,

diff --git a/...components/erd/table-properties/table-properties-indexes/TablePropertiesIndexes.styles.ts b/...components/erd/table-properties/table-properties-indexes/TablePropertiesIndexes.styles.ts
@@ -1,13 +1,31 @@
 import { css } from '@dineug/r-html';
 
-export const tableProperties = css`
-  width: 50%;
-  min-width: 400px;
+import { COLUMN_HEIGHT, TABLE_PADDING } from '@/constants/layout';
+
+export const leftArea = css`
+  width: 30%;
+  min-width: 240px;
   height: 100%;
+  padding-right: 12px;
 `;
 
-export const tableInfo = css`
-  width: 50%;
-  min-width: 400px;
+export const rightArea = css`
+  width: 70%;
+  min-width: 560px;
   height: 100%;
 `;
+
+export const addIndexButtonArea = css`
+  display: flex;
+  width: 100%;
+  height: ${COLUMN_HEIGHT}px;
+  align-items: center;
+  padding: 0 ${TABLE_PADDING}px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--column-hover);
+    fill: var(--active);
+    color: var(--active);
+  }
+`;
diff --git a/...or/src/components/erd/table-properties/table-properties-indexes/TablePropertiesIndexes.ts b/...or/src/components/erd/table-properties/table-properties-indexes/TablePropertiesIndexes.ts
@@ -1,7 +1,13 @@
-import { FC, html } from '@dineug/r-html';
+import { FC, html, observable, repeat } from '@dineug/r-html';
 
 import { useAppContext } from '@/components/appContext';
+import IndexesIndex from '@/components/erd/table-properties//table-properties-indexes/indexes-index/IndexesIndex';
+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 { Index } from '@/internal-types';
+import { query } from '@/utils/collection/query';
 
 import * as styles from './TablePropertiesIndexes.styles';
 
@@ -16,10 +22,60 @@ const TablePropertiesIndexes: FC<TablePropertiesIndexesProps> = (
   const app = useAppContext(ctx);
   const { addUnsubscribe } = useUnmounted();
 
-  return () => html`
-    <div class=${styles.tableProperties}>TableProperties</div>
-    <div class=${styles.tableInfo}>TableInfo</div>
-  `;
+  const state = observable({
+    index: null as Index | null,
+  });
+
+  const handleSelectIndex = (index: Index | null) => {
+    state.index = index;
+  };
+
+  const handleAddIndex = () => {
+    // TODO: add index
+    console.log('handleAddIndex');
+  };
+
+  return () => {
+    const { tableId } = props;
+    const { store } = app.value;
+    const {
+      doc: { indexIds },
+      collections,
+    } = store.state;
+
+    const indexes = query(collections)
+      .collection('indexEntities')
+      .selectByIds(indexIds)
+      .filter(index => index.tableId === tableId);
+
+    return html`
+      <div class=${styles.leftArea}>
+        ${repeat(
+          indexes,
+          index => index.id,
+          index =>
+            html`
+              <${IndexesIndex}
+                index=${index}
+                selected=${index.id === state.index?.id}
+                .onSelect=${handleSelectIndex}
+              />
+            `
+        )}
+        <div
+          class=${styles.addIndexButtonArea}
+          title="Add Index"
+          @click=${handleAddIndex}
+        >
+          <${Icon} size=${12} name="plus" />
+        </div>
+      </div>
+      <div class=${styles.rightArea}>
+        <${IndexesCheckboxColumn} tableId=${tableId} index=${state.index} />
+        ${state.index ? html`<${IndexesColumn} index=${state.index} />` : null}
+      </div>
+    `;
+  };
 };
 
 export default TablePropertiesIndexes;
diff --git a/...operties/table-properties-indexes/indexes-checkbox-column/IndexesCheckboxColumn.styles.ts b/...operties/table-properties-indexes/indexes-checkbox-column/IndexesCheckboxColumn.styles.ts
@@ -0,0 +1,9 @@
+import { css } from '@dineug/r-html';
+
+export const root = css`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-height: 240px;
+  overflow: auto;
+`;