@izumisy-tailor/tailor-data-viewer 0.1.0

package/src/component/single-record-tab-content.tsx

@@ -0,0 +1,676 @@
+import { useState, useCallback, useMemo, useEffect } from "react";
+import { RefreshCw, Loader2, ChevronDown, ExternalLink } from "lucide-react";
+import { Alert, AlertDescription } from "../ui/alert";
+import { Button } from "../ui/button";
+import { Badge } from "../ui/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../ui/table";
+import type {
+  TableMetadata,
+  TableMetadataMap,
+  FieldMetadata,
+} from "../types/table-metadata";
+import { createGraphQLClient, executeQuery } from "../providers/graphql-client";
+import { formatFieldValue } from "../utils/query-builder";
+import { ColumnSelector } from "./column-selector";
+import { useColumnState } from "./hooks/use-column-state";
+
+interface SingleRecordTabContentProps {
+  /** Target table metadata */
+  tableMetadata: TableMetadata;
+  /** All table metadata for relation lookup */
+  tableMetadataMap: TableMetadataMap;
+  /** App URI for GraphQL requests */
+  appUri: string;
+  /** Record ID to fetch */
+  recordId: string;
+  /** Callback to open a relation as a new sheet (table view) */
+  onOpenAsSheet?: (
+    targetTableName: string,
+    filterField: string,
+    filterValue: string,
+  ) => void;
+  /** Callback to open a single record as a new sheet */
+  onOpenSingleRecordAsSheet?: (
+    targetTableName: string,
+    recordId: string,
+  ) => void;
+}
+
+interface RelationData {
+  data: Record<string, unknown>[] | null;
+  loading: boolean;
+  error: Error | null;
+  hasNextPage: boolean;
+  endCursor: string | null;
+}
+
+const PAGE_SIZE = 10;
+
+/**
+ * Convert camelCase to PascalCase
+ */
+function toPascalCase(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+/**
+ * Get display fields for a table (excluding nested types)
+ */
+function getDisplayFields(table: TableMetadata): FieldMetadata[] {
+  return table.fields.filter(
+    (field) => field.type !== "nested" && field.type !== "array",
+  );
+}
+
+/**
+ * Get fields for relation table display
+ */
+function getRelationDisplayFields(table: TableMetadata): FieldMetadata[] {
+  return table.fields
+    .filter(
+      (field) =>
+        field.type !== "nested" &&
+        field.type !== "array" &&
+        field.name !== "id" &&
+        !field.name.endsWith("Id") &&
+        !["createdAt", "updatedAt"].includes(field.name),
+    )
+    .slice(0, 6);
+}
+
+/**
+ * Content for a single record view tab
+ * Shows record details and all its relations with separators
+ */
+export function SingleRecordTabContent({
+  tableMetadata,
+  tableMetadataMap,
+  appUri,
+  recordId,
+  onOpenAsSheet,
+  onOpenSingleRecordAsSheet,
+}: SingleRecordTabContentProps) {
+  // Record data state
+  const [record, setRecord] = useState<Record<string, unknown> | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  // Relation data states (keyed by relation field name)
+  const [relationDataMap, setRelationDataMap] = useState<
+    Record<string, RelationData>
+  >({});
+
+  // Column state for field selection
+  const allDisplayFields = useMemo(
+    () => getDisplayFields(tableMetadata),
+    [tableMetadata],
+  );
+  const columnState = useColumnState(allDisplayFields, tableMetadata.relations);
+
+  const client = useMemo(() => createGraphQLClient(appUri), [appUri]);
+
+  // Fetch the main record
+  const fetchRecord = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const fields = getDisplayFields(tableMetadata)
+        .map((f) => f.name)
+        .join("\n        ");
+
+      // Also include FK fields for manyToOne relations
+      const fkFields = (tableMetadata.relations ?? [])
+        .filter((r) => r.relationType === "manyToOne")
+        .map((r) => r.foreignKeyField)
+        .filter((fk) => !tableMetadata.fields.some((f) => f.name === fk));
+
+      const allFields =
+        fkFields.length > 0
+          ? `${fields}\n        ${fkFields.join("\n        ")}`
+          : fields;
+
+      const query = `
+        query ${toPascalCase(tableMetadata.name)}Single($id: ID!) {
+          ${tableMetadata.name}(id: $id) {
+            ${allFields}
+          }
+        }
+      `.trim();
+
+      const result = await executeQuery<
+        Record<string, Record<string, unknown> | null>
+      >(client, query, { id: recordId });
+
+      setRecord(result[tableMetadata.name]);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Failed to fetch record"),
+      );
+    } finally {
+      setLoading(false);
+    }
+  }, [client, tableMetadata, recordId]);
+
+  // Fetch relation data (oneToMany)
+  const fetchRelationData = useCallback(
+    async (relationFieldName: string, append = false) => {
+      const relation = tableMetadata.relations?.find(
+        (r) => r.fieldName === relationFieldName,
+      );
+      if (!relation) return;
+
+      const targetTable = tableMetadataMap[relation.targetTable];
+      if (!targetTable) return;
+
+      const existingData = relationDataMap[relationFieldName];
+      if (append && !existingData?.hasNextPage) return;
+
+      setRelationDataMap((prev) => ({
+        ...prev,
+        [relationFieldName]: {
+          ...prev[relationFieldName],
+          data: append ? (prev[relationFieldName]?.data ?? null) : null,
+          loading: true,
+          error: null,
+          hasNextPage: prev[relationFieldName]?.hasNextPage ?? false,
+          endCursor: prev[relationFieldName]?.endCursor ?? null,
+        },
+      }));
+
+      try {
+        const fields = getRelationDisplayFields(targetTable)
+          .map((f) => f.name)
+          .join("\n            ");
+        const afterCursor = append ? existingData?.endCursor : undefined;
+        const afterArg = afterCursor ? `, after: "${afterCursor}"` : "";
+
+        const query = `
+          query ${toPascalCase(relation.targetTable)}List($parentId: ID!) {
+            ${targetTable.pluralForm}(query: { ${relation.foreignKeyField}: { eq: $parentId } }, first: ${PAGE_SIZE}${afterArg}) {
+              edges {
+                node {
+                  id
+                  ${fields}
+                }
+              }
+              pageInfo {
+                hasNextPage
+                endCursor
+              }
+            }
+          }
+        `.trim();
+
+        const result = await executeQuery<
+          Record<
+            string,
+            {
+              edges: { node: Record<string, unknown> }[];
+              pageInfo: { hasNextPage: boolean; endCursor: string | null };
+            }
+          >
+        >(client, query, { parentId: recordId });
+
+        const responseData = result[targetTable.pluralForm];
+        if (responseData) {
+          const newData = responseData.edges.map((edge) => edge.node);
+          const existingRecords =
+            append && Array.isArray(existingData?.data)
+              ? existingData.data
+              : [];
+
+          setRelationDataMap((prev) => ({
+            ...prev,
+            [relationFieldName]: {
+              data: [...existingRecords, ...newData],
+              loading: false,
+              error: null,
+              hasNextPage: responseData.pageInfo.hasNextPage,
+              endCursor: responseData.pageInfo.endCursor,
+            },
+          }));
+        }
+      } catch (err) {
+        setRelationDataMap((prev) => ({
+          ...prev,
+          [relationFieldName]: {
+            ...prev[relationFieldName],
+            data: prev[relationFieldName]?.data ?? null,
+            loading: false,
+            error:
+              err instanceof Error
+                ? err
+                : new Error("Failed to fetch relation"),
+            hasNextPage: false,
+            endCursor: null,
+          },
+        }));
+      }
+    },
+    [client, tableMetadata, tableMetadataMap, recordId, relationDataMap],
+  );
+
+  // Fetch manyToOne relation data
+  const fetchManyToOneData = useCallback(
+    async (relationFieldName: string, relatedId: string) => {
+      const relation = tableMetadata.relations?.find(
+        (r) => r.fieldName === relationFieldName,
+      );
+      if (!relation) return;
+
+      const targetTable = tableMetadataMap[relation.targetTable];
+      if (!targetTable) return;
+
+      setRelationDataMap((prev) => ({
+        ...prev,
+        [relationFieldName]: {
+          data: null,
+          loading: true,
+          error: null,
+          hasNextPage: false,
+          endCursor: null,
+        },
+      }));
+
+      try {
+        const fields = getDisplayFields(targetTable)
+          .map((f) => f.name)
+          .join("\n        ");
+
+        const query = `
+          query ${toPascalCase(relation.targetTable)}Single($id: ID!) {
+            ${relation.targetTable}(id: $id) {
+              ${fields}
+            }
+          }
+        `.trim();
+
+        const result = await executeQuery<
+          Record<string, Record<string, unknown> | null>
+        >(client, query, { id: relatedId });
+
+        const data = result[relation.targetTable];
+        setRelationDataMap((prev) => ({
+          ...prev,
+          [relationFieldName]: {
+            data: data ? [data] : null,
+            loading: false,
+            error: null,
+            hasNextPage: false,
+            endCursor: null,
+          },
+        }));
+      } catch (err) {
+        setRelationDataMap((prev) => ({
+          ...prev,
+          [relationFieldName]: {
+            data: null,
+            loading: false,
+            error:
+              err instanceof Error
+                ? err
+                : new Error("Failed to fetch relation"),
+            hasNextPage: false,
+            endCursor: null,
+          },
+        }));
+      }
+    },
+    [client, tableMetadata, tableMetadataMap],
+  );
+
+  // Initial fetch
+  useEffect(() => {
+    fetchRecord();
+  }, [fetchRecord]);
+
+  // Fetch relations after record is loaded
+  useEffect(() => {
+    if (!record || !tableMetadata.relations) return;
+
+    for (const relation of tableMetadata.relations) {
+      if (relation.relationType === "oneToMany") {
+        fetchRelationData(relation.fieldName);
+      } else if (relation.relationType === "manyToOne") {
+        const relatedId = record[relation.foreignKeyField];
+        if (typeof relatedId === "string" && relatedId) {
+          fetchManyToOneData(relation.fieldName, relatedId);
+        }
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [record, tableMetadata.relations]);
+
+  const handleRefresh = () => {
+    fetchRecord();
+    setRelationDataMap({});
+  };
+
+  if (loading && !record) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <Loader2 className="text-muted-foreground size-6 animate-spin" />
+        <span className="text-muted-foreground ml-2">読み込み中...</span>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <Alert variant="destructive">
+        <AlertDescription>
+          データの取得に失敗しました: {error.message}
+        </AlertDescription>
+      </Alert>
+    );
+  }
+
+  if (!record) {
+    return (
+      <div className="text-muted-foreground py-8 text-center">
+        レコードが見つかりません
+      </div>
+    );
+  }
+
+  const displayFields = allDisplayFields.filter((f) =>
+    columnState.selectedFields.includes(f.name),
+  );
+  const relations = (tableMetadata.relations ?? []).filter((r) =>
+    columnState.selectedRelations.includes(r.fieldName),
+  );
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="space-y-2">
+        <div className="flex items-baseline gap-2">
+          <span className="font-medium">{tableMetadata.name}</span>
+          {tableMetadata.description && (
+            <span className="text-muted-foreground text-sm">
+              {tableMetadata.description}
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-4">
+          <Badge variant="outline" className="text-xs">
+            ID: {recordId.substring(0, 8)}...
+          </Badge>
+
+          <ColumnSelector
+            fields={allDisplayFields}
+            selectedFields={columnState.selectedFields}
+            onToggle={columnState.toggleField}
+            onSelectAll={columnState.selectAll}
+            onDeselectAll={columnState.deselectAll}
+            relations={tableMetadata.relations}
+            selectedRelations={columnState.selectedRelations}
+            onToggleRelation={columnState.toggleRelation}
+          />
+
+          <div className="flex-1" />
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleRefresh}
+            disabled={loading}
+          >
+            <RefreshCw className={`size-4 ${loading ? "animate-spin" : ""}`} />
+            更新
+          </Button>
+        </div>
+      </div>
+
+      {/* Main Record Data */}
+      <div className="rounded-lg border p-4">
+        <div className="text-muted-foreground mb-3 text-sm font-medium">
+          レコード詳細
+        </div>
+        <div className="grid grid-cols-2 gap-x-6 gap-y-3 md:grid-cols-3 lg:grid-cols-4">
+          {displayFields.map((field) => (
+            <div key={field.name} className="flex flex-col">
+              <span className="text-muted-foreground text-xs font-medium">
+                {field.name}
+              </span>
+              <span className="text-sm">
+                {formatFieldValue(record[field.name], field)}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Relations with Separators */}
+      {relations.length > 0 && (
+        <div className="space-y-6">
+          {relations.map((relation) => {
+            const targetTable = tableMetadataMap[relation.targetTable];
+            const relationData = relationDataMap[relation.fieldName];
+            const displayFieldsForRelation = targetTable
+              ? relation.relationType === "manyToOne"
+                ? getDisplayFields(targetTable)
+                : getRelationDisplayFields(targetTable)
+              : [];
+
+            return (
+              <div key={relation.fieldName}>
+                {/* Separator */}
+                <div className="relative my-4">
+                  <div className="absolute inset-0 flex items-center">
+                    <span className="w-full border-t" />
+                  </div>
+                  <div className="relative flex justify-center text-xs uppercase">
+                    <span className="bg-background text-muted-foreground px-2">
+                      {relation.fieldName} (
+                      {relation.relationType === "manyToOne" ? "1" : "N"})
+                    </span>
+                  </div>
+                </div>
+
+                {/* Relation Content */}
+                <div className="rounded-lg border p-4">
+                  <div className="mb-3 flex items-center gap-2">
+                    <Badge variant="outline" className="text-xs">
+                      {relation.targetTable}
+                    </Badge>
+                    <span className="text-muted-foreground text-xs">
+                      {relation.relationType === "manyToOne"
+                        ? "manyToOne"
+                        : `oneToMany (${relationData?.data?.length ?? 0}件${relationData?.hasNextPage ? "+" : ""})`}
+                    </span>
+                    <div className="flex-1" />
+                    {relation.relationType === "oneToMany" && onOpenAsSheet && (
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() =>
+                          onOpenAsSheet(
+                            relation.targetTable,
+                            relation.foreignKeyField,
+                            recordId,
+                          )
+                        }
+                        className="h-6 text-xs"
+                      >
+                        <ExternalLink className="mr-1 size-3" />
+                        シートで開く
+                      </Button>
+                    )}
+                  </div>
+
+                  {/* Loading state */}
+                  {relationData?.loading && !relationData.data && (
+                    <div className="flex items-center justify-center py-4">
+                      <Loader2 className="text-muted-foreground size-5 animate-spin" />
+                      <span className="text-muted-foreground ml-2 text-sm">
+                        読み込み中...
+                      </span>
+                    </div>
+                  )}
+
+                  {/* Error state */}
+                  {relationData?.error && (
+                    <div className="text-destructive py-4 text-center text-sm">
+                      エラー: {relationData.error.message}
+                    </div>
+                  )}
+
+                  {/* No data */}
+                  {!relationData?.loading &&
+                    !relationData?.error &&
+                    (!relationData?.data || relationData.data.length === 0) && (
+                      <div className="text-muted-foreground py-4 text-center text-sm">
+                        関連データがありません
+                      </div>
+                    )}
+
+                  {/* Data display */}
+                  {relationData?.data && relationData.data.length > 0 && (
+                    <>
+                      {relation.relationType === "manyToOne" ? (
+                        // Single record grid display for manyToOne
+                        <div className="space-y-3">
+                          <div className="grid grid-cols-2 gap-x-6 gap-y-3 md:grid-cols-3 lg:grid-cols-4">
+                            {displayFieldsForRelation.map((field) => {
+                              const records = relationData.data!;
+                              const firstRecord = records[0];
+                              return (
+                                <div key={field.name} className="flex flex-col">
+                                  <span className="text-muted-foreground text-xs font-medium">
+                                    {field.name}
+                                  </span>
+                                  <span className="text-sm">
+                                    {formatFieldValue(
+                                      firstRecord?.[field.name],
+                                      field,
+                                    )}
+                                  </span>
+                                </div>
+                              );
+                            })}
+                          </div>
+                          {/* Open as sheet button for manyToOne */}
+                          {onOpenSingleRecordAsSheet && (
+                            <div className="flex justify-end pt-2">
+                              <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => {
+                                  const records = relationData.data!;
+                                  const relatedRecord = records[0];
+                                  const relatedId = relatedRecord?.id;
+                                  if (typeof relatedId === "string") {
+                                    onOpenSingleRecordAsSheet(
+                                      relation.targetTable,
+                                      relatedId,
+                                    );
+                                  }
+                                }}
+                                className="h-6 text-xs"
+                              >
+                                <ExternalLink className="mr-1 size-3" />
+                                シートで開く
+                              </Button>
+                            </div>
+                          )}
+                        </div>
+                      ) : (
+                        // Table display for oneToMany
+                        <>
+                          <div className="overflow-hidden rounded-md border">
+                            <Table>
+                              <TableHeader>
+                                <TableRow className="bg-muted/50">
+                                  {displayFieldsForRelation.map((field) => (
+                                    <TableHead
+                                      key={field.name}
+                                      className="text-xs"
+                                    >
+                                      {field.name}
+                                    </TableHead>
+                                  ))}
+                                  {onOpenSingleRecordAsSheet && (
+                                    <TableHead className="w-24 text-xs" />
+                                  )}
+                                </TableRow>
+                              </TableHeader>
+                              <TableBody>
+                                {relationData.data.map((row, index) => (
+                                  <TableRow key={(row.id as string) ?? index}>
+                                    {displayFieldsForRelation.map((field) => (
+                                      <TableCell
+                                        key={field.name}
+                                        className="text-xs"
+                                      >
+                                        {formatFieldValue(
+                                          row[field.name],
+                                          field,
+                                        )}
+                                      </TableCell>
+                                    ))}
+                                    {onOpenSingleRecordAsSheet && (
+                                      <TableCell className="text-xs">
+                                        <Button
+                                          variant="ghost"
+                                          size="sm"
+                                          onClick={() => {
+                                            const rowId = row.id;
+                                            if (typeof rowId === "string") {
+                                              onOpenSingleRecordAsSheet(
+                                                relation.targetTable,
+                                                rowId,
+                                              );
+                                            }
+                                          }}
+                                          className="h-6 text-xs"
+                                        >
+                                          <ExternalLink className="size-3" />
+                                        </Button>
+                                      </TableCell>
+                                    )}
+                                  </TableRow>
+                                ))}
+                              </TableBody>
+                            </Table>
+                          </div>
+                          {relationData.hasNextPage && (
+                            <div className="mt-2 flex justify-center">
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() =>
+                                  fetchRelationData(relation.fieldName, true)
+                                }
+                                disabled={relationData.loading}
+                                className="text-xs"
+                              >
+                                {relationData.loading ? (
+                                  <Loader2 className="mr-1 size-3 animate-spin" />
+                                ) : (
+                                  <ChevronDown className="mr-1 size-3" />
+                                )}
+                                もっと見る
+                              </Button>
+                            </div>
+                          )}
+                        </>
+                      )}
+                    </>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}