@izumisy-tailor/tailor-data-viewer 0.1.0

package/src/component/data-table.tsx

@@ -0,0 +1,428 @@
+import { useState, useCallback, Fragment, useMemo } from "react";
+import {
+  ArrowDown,
+  ArrowUp,
+  ArrowUpDown,
+  ChevronRight,
+  ChevronDown,
+  X,
+  ExternalLink,
+} from "lucide-react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../ui/table";
+import type {
+  FieldMetadata,
+  TableMetadata,
+  RelationMetadata,
+  TableMetadataMap,
+  ExpandedRelationFields,
+} from "../types/table-metadata";
+import { formatFieldValue } from "../utils/query-builder";
+import type { SortState } from "./hooks/use-table-data";
+import { useRelationData } from "./hooks/use-relation-data";
+import { RelationContent } from "./relation-content";
+
+interface DataTableProps {
+  data: Record<string, unknown>[];
+  fields: FieldMetadata[];
+  selectedFields: string[];
+  sortState: SortState | null;
+  onSort: (field: string) => void;
+  loading?: boolean;
+  /** Current table metadata (for relations) */
+  tableMetadata?: TableMetadata;
+  /** All table metadata (for relation target lookup) */
+  tableMetadataMap?: TableMetadataMap;
+  /** App URI for GraphQL requests */
+  appUri?: string;
+  /** Selected relation field names (if not provided, all relations are shown) */
+  selectedRelations?: string[];
+  /** Callback to open a relation as a new sheet */
+  onOpenAsSheet?: (
+    targetTableName: string,
+    filterField: string,
+    filterValue: string,
+  ) => void;
+  /** Callback to open a single record as a new sheet */
+  onOpenSingleRecordAsSheet?: (
+    targetTableName: string,
+    recordId: string,
+  ) => void;
+  /** Expanded relation fields (manyToOne fields shown as inline columns) */
+  expandedRelationFields?: ExpandedRelationFields;
+}
+
+/**
+ * Expanded cell key format: `${rowId}:${relationFieldName}`
+ */
+type ExpandedCellKey = string;
+
+/**
+ * Data display table with sortable headers and expandable relation cells
+ */
+export function DataTable({
+  data,
+  fields,
+  selectedFields,
+  sortState,
+  onSort,
+  loading,
+  tableMetadata,
+  tableMetadataMap,
+  appUri,
+  selectedRelations,
+  onOpenAsSheet,
+  onOpenSingleRecordAsSheet,
+  expandedRelationFields = {},
+}: DataTableProps) {
+  // Track expanded cells: Set of "rowId:relationFieldName" keys
+  const [expandedCells, setExpandedCells] = useState<Set<ExpandedCellKey>>(
+    () => new Set(),
+  );
+
+  // Relation data hook
+  const { getRelationData, triggerFetch } = useRelationData(
+    appUri ?? "",
+    tableMetadataMap ?? {},
+  );
+
+  // Check if table has relations - filter by selectedRelations if provided
+  const allRelations = useMemo(
+    () => tableMetadata?.relations ?? [],
+    [tableMetadata?.relations],
+  );
+  const relations =
+    selectedRelations !== undefined
+      ? allRelations.filter((r) => selectedRelations.includes(r.fieldName))
+      : allRelations;
+  const hasRelations = relations.length > 0 && appUri && tableMetadataMap;
+
+  // Toggle cell expansion and trigger fetch if expanding
+  const toggleCell = useCallback(
+    (
+      rowId: string,
+      relation: RelationMetadata,
+      rowData: Record<string, unknown>,
+    ) => {
+      const cellKey: ExpandedCellKey = `${rowId}:${relation.fieldName}`;
+      const isCurrentlyExpanded = expandedCells.has(cellKey);
+
+      if (isCurrentlyExpanded) {
+        // Collapse: just remove from expanded set
+        setExpandedCells((prev) => {
+          const next = new Set(prev);
+          next.delete(cellKey);
+          return next;
+        });
+      } else {
+        // Expand: trigger fetch first, then update expanded state
+        // This ensures data fetching starts before the UI shows the expanded content
+        triggerFetch(relation, rowId, rowData);
+        setExpandedCells((prev) => {
+          const next = new Set(prev);
+          next.add(cellKey);
+          return next;
+        });
+      }
+    },
+    [expandedCells, triggerFetch],
+  );
+
+  // Check if a cell is expanded
+  const isCellExpanded = useCallback(
+    (rowId: string, relationFieldName: string): boolean => {
+      return expandedCells.has(`${rowId}:${relationFieldName}`);
+    },
+    [expandedCells],
+  );
+
+  // Get field metadata for selected fields in order
+  const visibleFields = selectedFields
+    .map((name) => fields.find((f) => f.name === name))
+    .filter((f): f is FieldMetadata => f !== undefined);
+
+  // Build expanded relation column info
+  // Each entry: { relationFieldName, targetFieldName, targetField }
+  interface ExpandedColumn {
+    relationFieldName: string;
+    targetFieldName: string;
+    targetField: FieldMetadata;
+    targetTable: TableMetadata;
+  }
+
+  const expandedColumns = useMemo((): ExpandedColumn[] => {
+    const columns: ExpandedColumn[] = [];
+    if (!tableMetadataMap) return columns;
+
+    for (const [relationFieldName, targetFieldNames] of Object.entries(
+      expandedRelationFields,
+    )) {
+      const relation = allRelations.find(
+        (r) =>
+          r.fieldName === relationFieldName && r.relationType === "manyToOne",
+      );
+      if (!relation) continue;
+
+      const targetTable = tableMetadataMap[relation.targetTable];
+      if (!targetTable) continue;
+
+      for (const targetFieldName of targetFieldNames) {
+        const targetField = targetTable.fields.find(
+          (f) => f.name === targetFieldName,
+        );
+        if (targetField) {
+          columns.push({
+            relationFieldName,
+            targetFieldName,
+            targetField,
+            targetTable,
+          });
+        }
+      }
+    }
+    return columns;
+  }, [expandedRelationFields, allRelations, tableMetadataMap]);
+
+  // Calculate total column count (for colspan in expanded rows)
+  // +1 for the action column (open as sheet button)
+  const totalColumns =
+    1 + visibleFields.length + relations.length + expandedColumns.length;
+
+  const getSortIcon = (fieldName: string) => {
+    if (sortState?.field !== fieldName) {
+      return <ArrowUpDown className="size-4 opacity-50" />;
+    }
+    return sortState.direction === "Asc" ? (
+      <ArrowUp className="size-4" />
+    ) : (
+      <ArrowDown className="size-4" />
+    );
+  };
+
+  if (loading) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <div className="text-muted-foreground">読み込み中...</div>
+      </div>
+    );
+  }
+
+  if (data.length === 0) {
+    return (
+      <div className="flex h-64 items-center justify-center rounded-md border">
+        <div className="text-muted-foreground">データがありません</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-md border">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            {/* Action column (open as sheet) */}
+            {onOpenSingleRecordAsSheet && tableMetadata && (
+              <TableHead className="w-10" />
+            )}
+            {/* Regular field columns */}
+            {visibleFields.map((field) => (
+              <TableHead
+                key={field.name}
+                className="hover:bg-muted/50 cursor-pointer select-none"
+                onClick={() => onSort(field.name)}
+              >
+                <div className="flex items-center gap-1">
+                  <span>{field.name}</span>
+                  {getSortIcon(field.name)}
+                </div>
+              </TableHead>
+            ))}
+            {/* Expanded relation field columns (manyToOne inline) */}
+            {expandedColumns.map((col) => (
+              <TableHead
+                key={`${col.relationFieldName}.${col.targetFieldName}`}
+                className="bg-muted/20 select-none"
+                title={`${col.relationFieldName}.${col.targetFieldName}`}
+              >
+                <div className="flex items-center gap-1">
+                  <span className="text-muted-foreground text-xs">
+                    {col.relationFieldName}.
+                  </span>
+                  <span>{col.targetFieldName}</span>
+                </div>
+              </TableHead>
+            ))}
+            {/* Relation columns */}
+            {hasRelations &&
+              relations.map((relation) => (
+                <TableHead
+                  key={relation.fieldName}
+                  className="text-muted-foreground select-none"
+                >
+                  <div className="flex items-center gap-1">
+                    <span>{relation.fieldName}</span>
+                    <span className="text-xs opacity-50">
+                      ({relation.relationType === "manyToOne" ? "1" : "N"})
+                    </span>
+                  </div>
+                </TableHead>
+              ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {data.map((row, rowIndex) => {
+            const rowId = (row.id as string) ?? `row-${rowIndex}`;
+
+            // Check if any cell in this row is expanded
+            const expandedRelationsInRow = hasRelations
+              ? relations.filter((r) => isCellExpanded(rowId, r.fieldName))
+              : [];
+            const hasExpandedCell = expandedRelationsInRow.length > 0;
+
+            return (
+              <Fragment key={rowId}>
+                {/* Main data row */}
+                <TableRow
+                  className={hasExpandedCell ? "border-b-0" : undefined}
+                >
+                  {/* Action cell (open as sheet) */}
+                  {onOpenSingleRecordAsSheet && tableMetadata && (
+                    <TableCell className="p-1">
+                      <button
+                        type="button"
+                        onClick={() => {
+                          if (
+                            typeof rowId === "string" &&
+                            !rowId.startsWith("row-")
+                          ) {
+                            onOpenSingleRecordAsSheet(
+                              tableMetadata.name,
+                              rowId,
+                            );
+                          }
+                        }}
+                        className="hover:bg-muted flex items-center justify-center rounded-md p-1.5 transition-colors"
+                        aria-label="シートで開く"
+                        title="シートで開く"
+                      >
+                        <ExternalLink className="text-muted-foreground size-4" />
+                      </button>
+                    </TableCell>
+                  )}
+                  {/* Regular field cells */}
+                  {visibleFields.map((field) => (
+                    <TableCell key={field.name}>
+                      {formatFieldValue(row[field.name], field)}
+                    </TableCell>
+                  ))}
+                  {/* Expanded relation field cells (manyToOne inline) */}
+                  {expandedColumns.map((col) => {
+                    const relationData = row[col.relationFieldName] as
+                      | Record<string, unknown>
+                      | null
+                      | undefined;
+                    const value = relationData?.[col.targetFieldName];
+                    return (
+                      <TableCell
+                        key={`${col.relationFieldName}.${col.targetFieldName}`}
+                        className="bg-muted/10"
+                      >
+                        {relationData ? (
+                          formatFieldValue(value, col.targetField)
+                        ) : (
+                          <span className="text-muted-foreground">-</span>
+                        )}
+                      </TableCell>
+                    );
+                  })}
+                  {/* Relation cells with expand toggle */}
+                  {hasRelations &&
+                    relations.map((relation) => {
+                      const isExpanded = isCellExpanded(
+                        rowId,
+                        relation.fieldName,
+                      );
+                      // Get total count for oneToMany relations from the row data
+                      const relationData = row[relation.fieldName] as
+                        | { total?: number }
+                        | undefined;
+                      const total =
+                        relation.relationType === "oneToMany"
+                          ? relationData?.total
+                          : undefined;
+                      return (
+                        <TableCell key={relation.fieldName} className="p-1">
+                          <button
+                            type="button"
+                            onClick={() => toggleCell(rowId, relation, row)}
+                            className="hover:bg-muted flex w-full items-center justify-center gap-1 rounded-md px-2 py-1 text-sm transition-colors"
+                            aria-label={isExpanded ? "折りたたむ" : "展開する"}
+                          >
+                            {isExpanded ? (
+                              <ChevronDown className="size-4" />
+                            ) : (
+                              <ChevronRight className="size-4" />
+                            )}
+                            <span className="text-muted-foreground text-xs">
+                              {relation.relationType === "manyToOne"
+                                ? "詳細"
+                                : total !== undefined
+                                  ? `${total}件`
+                                  : "一覧"}
+                            </span>
+                          </button>
+                        </TableCell>
+                      );
+                    })}
+                </TableRow>
+
+                {/* Expanded relation content rows - one per expanded relation */}
+                {hasExpandedCell &&
+                  expandedRelationsInRow.map((relation) => (
+                    <TableRow
+                      key={`${rowId}-${relation.fieldName}-expanded`}
+                      className="hover:bg-transparent"
+                    >
+                      <TableCell
+                        colSpan={totalColumns}
+                        className="bg-muted/20 p-4"
+                      >
+                        <div className="relative">
+                          <button
+                            type="button"
+                            onClick={() => toggleCell(rowId, relation, row)}
+                            className="hover:bg-muted absolute top-0 right-0 rounded-md p-1 transition-colors"
+                            aria-label="閉じる"
+                          >
+                            <X className="text-muted-foreground size-4" />
+                          </button>
+                          <RelationContent
+                            relation={relation}
+                            result={getRelationData(relation, rowId, row)}
+                            targetTableMetadata={
+                              tableMetadataMap?.[relation.targetTable]
+                            }
+                            parentRowId={rowId}
+                            onOpenAsSheet={onOpenAsSheet}
+                            onOpenSingleRecordAsSheet={
+                              onOpenSingleRecordAsSheet
+                            }
+                          />
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+              </Fragment>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}