From 0399ad15842b23b6f731754192e1b2d9b06605c0 Mon Sep 17 00:00:00 2001
From: junkisai <jonki.beam@gmail.com>
Date: Thu, 12 Dec 2024 12:09:46 +0900
Subject: [PATCH] feat: add show mode support for TableHeader and TableNode
 components

---
 .../TableNode/TableHeader/TableHeader.tsx     |  22 +++
 .../ERDContent/TableNode/TableNode.tsx        | 128 +++++++++---------
 2 files changed, 88 insertions(+), 62 deletions(-)

diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.tsx
index 51e488fe0..56e50c247 100644
--- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.tsx
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableHeader/TableHeader.tsx
@@ -1,4 +1,6 @@
+import { useDBStructureStore, useUserEditingStore } from '@/stores'
 import { Table2 } from '@liam-hq/ui'
+import { Handle, Position } from '@xyflow/react'
 import type { FC } from 'react'
 import styles from './TableHeader.module.css'
 
@@ -7,10 +9,30 @@ type Props = {
 }
 
 export const TableHeader: FC<Props> = ({ name }) => {
+  const { showMode } = useUserEditingStore()
+  const { relationships } = useDBStructureStore()
+
+  const isTarget = Object.values(relationships).some(
+    (relationship) => relationship.foreignTableName === name,
+  )
+  const isSource = Object.values(relationships).some(
+    (relationship) => relationship.primaryTableName === name,
+  )
+
   return (
     <div className={styles.wrapper}>
       <Table2 width={16} />
       <span className={styles.name}>{name}</span>
+      {showMode === 'TABLE_NAME' && (
+        <>
+          {isTarget && (
+            <Handle id={name} type="target" position={Position.Left} />
+          )}
+          {isSource && (
+            <Handle id={name} type="source" position={Position.Right} />
+          )}
+        </>
+      )}
     </div>
   )
 }
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx
index 561421eb2..ecc5a3be0 100644
--- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx
@@ -25,6 +25,8 @@ export const TableNode: FC<Props> = ({ data: { table } }) => {
     active: { tableName },
   } = useUserEditingStore()
   const isActive = tableName === table.name
+  const { showMode } = useUserEditingStore()
+
   const handleClick = useCallback(() => {
     updateActiveTableName(table.name)
   }, [table])
@@ -36,76 +38,78 @@ export const TableNode: FC<Props> = ({ data: { table } }) => {
       onClick={handleClick}
     >
       <TableHeader name={table.name} />
-      <ul>
-        {Object.values(table.columns).map((column) => {
-          const handleId = `${table.name}-${column.name}`
-          const isSource = Object.values(relationships).some(
-            (relationship) =>
-              relationship.primaryTableName === table.name &&
-              relationship.primaryColumnName === column.name,
-          )
-          const isTarget = Object.values(relationships).some(
-            (relationship) =>
-              relationship.foreignTableName === table.name &&
-              relationship.foreignColumnName === column.name,
-          )
+      {showMode === 'ALL_FIELDS' && (
+        <ul>
+          {Object.values(table.columns).map((column) => {
+            const handleId = `${table.name}-${column.name}`
+            const isSource = Object.values(relationships).some(
+              (relationship) =>
+                relationship.primaryTableName === table.name &&
+                relationship.primaryColumnName === column.name,
+            )
+            const isTarget = Object.values(relationships).some(
+              (relationship) =>
+                relationship.foreignTableName === table.name &&
+                relationship.foreignColumnName === column.name,
+            )
 
-          return (
-            <li key={column.name} className={styles.columnWrapper}>
-              {column.primary && (
-                <KeyRound
-                  width={16}
-                  height={16}
-                  className={styles.primaryKeyIcon}
-                  role="img"
-                  aria-label="Primary Key"
-                />
-              )}
-              {!column.primary &&
-                (column.notNull ? (
-                  <DiamondFillIcon
+            return (
+              <li key={column.name} className={styles.columnWrapper}>
+                {column.primary && (
+                  <KeyRound
                     width={16}
                     height={16}
-                    className={styles.diamondIcon}
+                    className={styles.primaryKeyIcon}
                     role="img"
-                    aria-label="Not Null"
+                    aria-label="Primary Key"
                   />
-                ) : (
-                  <DiamondIcon
-                    width={16}
-                    height={16}
-                    className={styles.diamondIcon}
-                    role="img"
-                    aria-label="Nullable"
-                  />
-                ))}
+                )}
+                {!column.primary &&
+                  (column.notNull ? (
+                    <DiamondFillIcon
+                      width={16}
+                      height={16}
+                      className={styles.diamondIcon}
+                      role="img"
+                      aria-label="Not Null"
+                    />
+                  ) : (
+                    <DiamondIcon
+                      width={16}
+                      height={16}
+                      className={styles.diamondIcon}
+                      role="img"
+                      aria-label="Nullable"
+                    />
+                  ))}
 
-              <span className={styles.columnNameWrapper}>
-                <span className={styles.columnName}>{column.name}</span>
-                <span className={styles.columnType}>{column.type}</span>
-              </span>
+                <span className={styles.columnNameWrapper}>
+                  <span className={styles.columnName}>{column.name}</span>
+                  <span className={styles.columnType}>{column.type}</span>
+                </span>
 
-              {isSource && (
-                <Handle
-                  id={handleId}
-                  type="source"
-                  position={Position.Right}
-                  className={styles.handle}
-                />
-              )}
+                {isSource && (
+                  <Handle
+                    id={handleId}
+                    type="source"
+                    position={Position.Right}
+                    className={styles.handle}
+                  />
+                )}
 
-              {isTarget && (
-                <Handle
-                  id={handleId}
-                  type="target"
-                  position={Position.Left}
-                  className={styles.handle}
-                />
-              )}
-            </li>
-          )
-        })}
-      </ul>
+                {isTarget && (
+                  <Handle
+                    id={handleId}
+                    type="target"
+                    position={Position.Left}
+                    className={styles.handle}
+                  />
+                )}
+              </li>
+            )
+          })}
+        </ul>
+      )}
     </button>
   )
 }