feat: TableProperties - SchemaSQL, GeneratorCode

dineug · Dec 4, 2023 · fb6f06f · fb6f06f
1 parent dceb413
commit fb6f06f
Show file tree

Hide file tree

Showing 13 changed files with 333 additions and 26 deletions.
diff --git a/packages/erd-editor/src/components/erd-editor/ErdEditor.ts b/packages/erd-editor/src/components/erd-editor/ErdEditor.ts
@@ -174,7 +174,11 @@ const ErdEditor: FC<ErdEditorProps, ErdEditorElement> = (props, ctx) => {
         <${Toolbar} />
         ${cache(
           settings.canvasType === CanvasType.ERD
-            ? html`<div class=${styles.scope}><${Erd} /></div>`
+            ? html`
+                <div class=${styles.scope}>
+                  <${Erd} isDarkMode=${isDarkMode} />
+                </div>
+              `
             : null
         )}
         ${settings.canvasType === CanvasType.visualization

diff --git a/packages/erd-editor/src/components/erd/Erd.ts b/packages/erd-editor/src/components/erd/Erd.ts
@@ -41,7 +41,9 @@ import { isMod } from '@/utils/keyboard-shortcut';
 import * as styles from './Erd.styles';
 import { useErdShortcut } from './useErdShortcut';
 
-export type ErdProps = {};
+export type ErdProps = {
+  isDarkMode: boolean;
+};
 
 const Erd: FC<ErdProps> = (props, ctx) => {
   const contextMenu = useContextMenuRootProvider(ctx);
@@ -61,6 +63,7 @@ const Erd: FC<ErdProps> = (props, ctx) => {
     colorPickerViewport: null as Viewport | null,
     colorPickerInitialColor: '',
     tablePropertiesId: '',
+    tablePropertiesIds: [] as string[],
   });
   useErdShortcut(ctx);
 
@@ -170,6 +173,10 @@ const Erd: FC<ErdProps> = (props, ctx) => {
     store.dispatch(tables.map(moveToTableAction));
   };
 
+  const handleChangeTableProperties = (tableId: string) => {
+    state.tablePropertiesId = tableId;
+  };
+
   onMounted(() => {
     const { store, emitter } = app.value;
     const $root = root.value;
@@ -190,6 +197,18 @@ const Erd: FC<ErdProps> = (props, ctx) => {
           state.colorPickerShow = false;
         },
         openTableProperties: ({ payload: { tableId } }) => {
+          const { doc } = store.state;
+          const tablePropertiesIds = state.tablePropertiesIds.filter(id =>
+            doc.tableIds.includes(id)
+          );
+
+          if (tablePropertiesIds.includes(tableId)) {
+            const index = tablePropertiesIds.indexOf(tableId);
+            tablePropertiesIds.splice(index, 1);
+          }
+
+          tablePropertiesIds.unshift(tableId);
+          state.tablePropertiesIds = tablePropertiesIds.slice(0, 5);
           state.tablePropertiesId = tableId;
         },
       })
@@ -264,7 +283,14 @@ const Erd: FC<ErdProps> = (props, ctx) => {
             `
           : null}
         ${openMap[Open.tableProperties]
-          ? html`<${TableProperties} tableId=${state.tablePropertiesId} />`
+          ? html`
+              <${TableProperties}
+                tableId=${state.tablePropertiesId}
+                tableIds=${state.tablePropertiesIds}
+                isDarkMode=${props.isDarkMode}
+                .onChange=${handleChangeTableProperties}
+              />
+            `
           : null}
       </div>
     `;

diff --git a/packages/erd-editor/src/components/erd/table-properties/TableProperties.styles.ts b/packages/erd-editor/src/components/erd/table-properties/TableProperties.styles.ts
@@ -14,18 +14,70 @@ export const root = css`
     content: '';
     position: absolute;
     inset: 0;
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgba(0, 0, 0, 0.4);
   }
 `;
 
 export const container = css`
+  display: flex;
+  flex-direction: column;
   width: 100%;
   max-width: 900px;
   max-height: calc(100% - 32px);
-  overflow: auto;
+  position: relative;
   z-index: 1;
-  border-radius: 6px;
-  padding: 12px;
   background-color: var(--context-menu-background);
   border: 1px solid var(--context-menu-border);
+  border-radius: 6px;
+  overflow: hidden;
+`;
+
+export const scrollbarArea = css`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow: auto;
+  padding: 0 12px 12px 12px;
+`;
+
+export const header = css`
+  display: flex;
+  padding: 0 8px;
+  min-height: 32px;
+  overflow-x: auto;
+`;
+
+export const tab = css`
+  display: flex;
+  max-width: 200px;
+  height: 32px;
+  padding: 0 12px;
+  border-radius: 4px;
+  cursor: default;
+  align-items: center;
+
+  &:hover {
+    background-color: var(--context-menu-hover);
+    color: var(--active);
+    fill: var(--active);
+  }
+
+  &.selected {
+    background-color: var(--context-menu-select);
+    color: var(--active);
+    fill: var(--active);
+  }
+
+  & > span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+
+export const scope = css`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: 450px;
 `;
diff --git a/packages/erd-editor/src/components/erd/table-properties/TableProperties.ts b/packages/erd-editor/src/components/erd/table-properties/TableProperties.ts
@@ -1,22 +1,36 @@
-import { FC, html, onMounted } from '@dineug/r-html';
+import { FC, html, observable, onMounted } from '@dineug/r-html';
 
 import { useAppContext } from '@/components/appContext';
+import TablePropertiesIndexes from '@/components/erd/table-properties/table-properties-indexes/TablePropertiesIndexes';
+import TablePropertiesTabs, {
+  Tab,
+} from '@/components/erd/table-properties/table-properties-tabs/TablePropertiesTabs';
+import GeneratorCode from '@/components/generator-code/GeneratorCode';
+import SchemaSQL from '@/components/schema-sql/SchemaSQL';
 import { Open } from '@/constants/open';
 import { changeOpenMapAction } from '@/engine/modules/editor/atom.actions';
 import { useUnmounted } from '@/hooks/useUnmounted';
+import { query } from '@/utils/collection/query';
 import { onStop } from '@/utils/domEvent';
 import { KeyBindingName } from '@/utils/keyboard-shortcut';
 
 import * as styles from './TableProperties.styles';
 
 export type TablePropertiesProps = {
+  isDarkMode: boolean;
   tableId: string;
+  tableIds: string[];
+  onChange: (tableId: string) => void;
 };
 
 const TableProperties: FC<TablePropertiesProps> = (props, ctx) => {
   const app = useAppContext(ctx);
   const { addUnsubscribe } = useUnmounted();
 
+  const state = observable({
+    tab: Tab.Indexes as Tab,
+  });
+
   const handleClose = () => {
     const { store } = app.value;
     store.dispatch(changeOpenMapAction({ [Open.tableProperties]: false }));
@@ -30,6 +44,10 @@ const TableProperties: FC<TablePropertiesProps> = (props, ctx) => {
     canClose && handleClose();
   };
 
+  const handleChangeTab = (tab: Tab) => {
+    state.tab = tab;
+  };
+
   onMounted(() => {
     const { shortcut$ } = app.value;
 
@@ -40,20 +58,76 @@ const TableProperties: FC<TablePropertiesProps> = (props, ctx) => {
     );
   });
 
-  return () => html`
-    <div
-      class=${styles.root}
-      @contextmenu=${onStop}
-      @mousedown=${onStop}
-      @touchstart=${onStop}
-      @wheel=${onStop}
-      @click=${handleOutsideClick}
-    >
-      <div class=${['scrollbar', styles.container]}>
-        <div style=${{ width: '800px', height: '400px' }}>TableProperties</div>
+  return () => {
+    const { store } = app.value;
+    const { collections } = store.state;
+    const { tableIds } = props;
+
+    const tables = query(collections)
+      .collection('tableEntities')
+      .selectByIds(tableIds);
+
+    return html`
+      <div
+        class=${styles.root}
+        @contextmenu=${onStop}
+        @mousedown=${onStop}
+        @touchstart=${onStop}
+        @wheel=${onStop}
+        @click=${handleOutsideClick}
+      >
+        <div class=${styles.container}>
+          <div class=${['scrollbar', styles.header]}>
+            ${tables.map(
+              table => html`
+                <div
+                  class=${[
+                    styles.tab,
+                    { selected: table.id === props.tableId },
+                  ]}
+                  title=${table.name}
+                  @click=${() => props.onChange(table.id)}
+                >
+                  <span>${table.name.trim() ? table.name : 'unnamed'}</span>
+                </div>
+              `
+            )}
+          </div>
+          <${TablePropertiesTabs}
+            value=${state.tab}
+            .onChange=${handleChangeTab}
+          />
+          <div class=${['scrollbar', styles.scrollbarArea]}>
+            ${state.tab === Tab.Indexes
+              ? html`
+                  <div class=${styles.scope}>
+                    <${TablePropertiesIndexes} tableId=${props.tableId} />
+                  </div>
+                `
+              : state.tab === Tab.SchemaSQL
+              ? html`
+                  <div class=${styles.scope}>
+                    <${SchemaSQL}
+                      isDarkMode=${props.isDarkMode}
+                      tableId=${props.tableId}
+                    />
+                  </div>
+                `
+              : state.tab === Tab.GeneratorCode
+              ? html`
+                  <div class=${styles.scope}>
+                    <${GeneratorCode}
+                      isDarkMode=${props.isDarkMode}
+                      tableId=${props.tableId}
+                    />
+                  </div>
+                `
+              : null}
+          </div>
+        </div>
       </div>
-    </div>
-  `;
+    `;
+  };
 };
 
 export default TableProperties;
diff --git a/...components/erd/table-properties/table-properties-indexes/TablePropertiesIndexes.styles.ts b/...components/erd/table-properties/table-properties-indexes/TablePropertiesIndexes.styles.ts
@@ -0,0 +1,13 @@
+import { css } from '@dineug/r-html';
+
+export const tableProperties = css`
+  width: 50%;
+  min-width: 400px;
+  height: 100%;
+`;
+
+export const tableInfo = css`
+  width: 50%;
+  min-width: 400px;
+  height: 100%;
+`;
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
@@ -0,0 +1,25 @@
+import { FC, html } from '@dineug/r-html';
+
+import { useAppContext } from '@/components/appContext';
+import { useUnmounted } from '@/hooks/useUnmounted';
+
+import * as styles from './TablePropertiesIndexes.styles';
+
+export type TablePropertiesIndexesProps = {
+  tableId: string;
+};
+
+const TablePropertiesIndexes: FC<TablePropertiesIndexesProps> = (
+  props,
+  ctx
+) => {
+  const app = useAppContext(ctx);
+  const { addUnsubscribe } = useUnmounted();
+
+  return () => html`
+    <div class=${styles.tableProperties}>TableProperties</div>
+    <div class=${styles.tableInfo}>TableInfo</div>
+  `;
+};
+
+export default TablePropertiesIndexes;
diff --git a/...r/src/components/erd/table-properties/table-properties-tabs/TablePropertiesTabs.styles.ts b/...r/src/components/erd/table-properties/table-properties-tabs/TablePropertiesTabs.styles.ts
@@ -0,0 +1,29 @@
+import { css } from '@dineug/r-html';
+
+export const tabs = css`
+  display: flex;
+  padding: 12px;
+  min-height: 56px;
+`;
+
+export const tab = css`
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  height: 32px;
+  border-radius: 4px;
+  cursor: default;
+  white-space: nowrap;
+
+  &:hover {
+    background-color: var(--context-menu-hover);
+    color: var(--active);
+    fill: var(--active);
+  }
+
+  &.selected {
+    background-color: var(--context-menu-select);
+    color: var(--active);
+    fill: var(--active);
+  }
+`;