Skip to content

Commit

Permalink
feat: add show mode support for TableHeader and TableNode components
Browse files Browse the repository at this point in the history
  • Loading branch information
junkisai committed Dec 12, 2024
1 parent 4f8b7e0 commit 3e576e1
Show file tree
Hide file tree
Showing 2 changed files with 93 additions and 63 deletions.
Original file line number Diff line number Diff line change
@@ -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'

Expand All @@ -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>
)
}
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
import { updateActiveTableName, useDBStructureStore } from '@/stores'
import {
updateActiveTableName,
useDBStructureStore,
useUserEditingStore,
} from '@/stores'
import type { Table } from '@liam-hq/db-structure'
import { DiamondFillIcon, DiamondIcon, KeyRound } from '@liam-hq/ui'
import { Handle, type Node, type NodeProps, Position } from '@xyflow/react'
Expand All @@ -16,83 +20,87 @@ type Props = NodeProps<TableNodeType>

export const TableNode: FC<Props> = ({ data: { table } }) => {
const { relationships } = useDBStructureStore()
const { showMode } = useUserEditingStore()

const handleClick = useCallback(() => {
updateActiveTableName(table.name)
}, [table])

return (
<button type="button" className={styles.wrapper} 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>
)
}

0 comments on commit 3e576e1

Please sign in to comment.