@izumisy-tailor/tailor-data-viewer 0.1.18 → 0.1.20

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@izumisy-tailor/tailor-data-viewer",
   "private": false,
-  "version": "0.1.18",
+  "version": "0.1.20",
   "type": "module",
   "description": "Flexible data viewer component for Tailor Platform",
   "files": [

package/src/component/data-table-toolbar.test.tsx

@@ -110,16 +110,24 @@ describe("DataTableToolbar", () => {
       });
       await user.click(searchButton);
 
-      // 検索パネルが開き、カラム選択パネルが閉じることを確認
+      // カラム選択パネルが閉じることを確認
       await waitFor(() => {
         const body = within(document.body);
-        expect(body.getByText("検索フィルター")).toBeInTheDocument();
         expect(body.queryByText("全選択")).not.toBeInTheDocument();
       });
+
+      // 検索パネルを開く（もう一度クリックが必要な場合）
+      await user.click(screen.getByRole("button", { name: /検索/ }));
+
+      // 検索パネルが開くことを確認
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("検索フィルター")).toBeInTheDocument();
+      });
     });
 
     it("検索パネルが開いている状態でカラム選択パネルを開くと検索パネルが閉じる", async () => {
-      const user = userEvent.setup();
+      const user = userEvent.setup({ pointerEventsCheck: 0 });
       render(<DataTableToolbar {...createDefaultProps()} />);
 
       // 検索パネルを開く
@@ -129,19 +137,27 @@ describe("DataTableToolbar", () => {
         expect(body.getByText("検索フィルター")).toBeInTheDocument();
       });
 
-      // カラム選択パネルを開く (検索パネルが開いていても通常アクセス可能だが一貫性のためhidden: trueを追加)
+      // カラム選択パネルを開く
       const columnButton = screen.getByRole("button", {
         name: /カラム選択/,
         hidden: true,
       });
       await user.click(columnButton);
 
-      // カラム選択パネルが開き、検索パネルが閉じることを確認
+      // 検索パネルが閉じることを確認
       await waitFor(() => {
         const body = within(document.body);
-        expect(body.getByText("全選択")).toBeInTheDocument();
         expect(body.queryByText("検索フィルター")).not.toBeInTheDocument();
       });
+
+      // カラム選択パネルを開く（もう一度クリックが必要な場合）
+      await user.click(screen.getByRole("button", { name: /カラム選択/ }));
+
+      // カラム選択パネルが開くことを確認
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("全選択")).toBeInTheDocument();
+      });
     });
   });
 

package/src/component/hooks/use-single-record-data.ts

@@ -0,0 +1,361 @@
+import { useState, useCallback, useEffect } from "react";
+import type {
+  TableMetadata,
+  TableMetadataMap,
+  FieldMetadata,
+} from "../../generator/metadata-generator";
+import {
+  buildSingleRecordQuery,
+  buildOneToManyRelationQuery,
+} from "../../graphql/query-builder";
+
+/**
+ * Relation data state
+ */
+export interface RelationData {
+  data: Record<string, unknown>[] | null;
+  loading: boolean;
+  error: Error | null;
+  hasNextPage: boolean;
+  endCursor: string | null;
+}
+
+/**
+ * Single record data fetcher interface for dependency injection
+ */
+export interface SingleRecordDataFetcher {
+  /**
+   * Fetch a single record by ID
+   */
+  fetchSingleRecord: (
+    tableName: string,
+    selectedFields: string[],
+    recordId: string,
+  ) => Promise<Record<string, unknown> | null>;
+
+  /**
+   * Fetch oneToMany relation data
+   */
+  fetchOneToManyRelation: (
+    targetTableName: string,
+    targetPluralForm: string,
+    foreignKeyField: string,
+    selectedFields: string[],
+    parentId: string,
+    first: number,
+    after?: string | null,
+  ) => Promise<{
+    data: Record<string, unknown>[];
+    hasNextPage: boolean;
+    endCursor: string | null;
+  }>;
+
+  /**
+   * Fetch manyToOne relation data (single record)
+   */
+  fetchManyToOneRelation: (
+    targetTableName: string,
+    selectedFields: string[],
+    recordId: string,
+  ) => Promise<Record<string, unknown> | null>;
+}
+
+/**
+ * Get display fields for a table (excluding nested types)
+ */
+export function getDisplayFields(table: TableMetadata): FieldMetadata[] {
+  return table.fields.filter(
+    (field) => field.type !== "nested" && field.type !== "array",
+  );
+}
+
+/**
+ * Get fields for relation table display
+ */
+export 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);
+}
+
+const PAGE_SIZE = 10;
+
+export interface UseSingleRecordDataOptions {
+  tableMetadata: TableMetadata;
+  tableMetadataMap: TableMetadataMap;
+  recordId: string;
+  fetcher: SingleRecordDataFetcher;
+}
+
+export interface UseSingleRecordDataResult {
+  record: Record<string, unknown> | null;
+  loading: boolean;
+  error: Error | null;
+  relationDataMap: Record<string, RelationData>;
+  fetchRelationData: (
+    relationFieldName: string,
+    append?: boolean,
+  ) => Promise<void>;
+  refetch: () => void;
+}
+
+/**
+ * Custom hook for fetching single record data with relations
+ */
+export function useSingleRecordData({
+  tableMetadata,
+  tableMetadataMap,
+  recordId,
+  fetcher,
+}: UseSingleRecordDataOptions): UseSingleRecordDataResult {
+  // 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>
+  >({});
+
+  // Fetch the main record
+  const fetchRecord = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const fields = getDisplayFields(tableMetadata).map((f) => f.name);
+
+      // 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 = [...fields, ...fkFields];
+
+      const result = await fetcher.fetchSingleRecord(
+        tableMetadata.name,
+        allFields,
+        recordId,
+      );
+
+      setRecord(result);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Failed to fetch record"),
+      );
+    } finally {
+      setLoading(false);
+    }
+  }, [fetcher, 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;
+
+      // Use a promise to get current state for append check to avoid stale closure
+      let currentEndCursor: string | null = null;
+      let shouldSkip = false;
+
+      if (append) {
+        // Check current state synchronously via setState callback
+        await new Promise<void>((resolve) => {
+          setRelationDataMap((prev) => {
+            const existingData = prev[relationFieldName];
+            if (!existingData?.hasNextPage) {
+              shouldSkip = true;
+            } else {
+              currentEndCursor = existingData.endCursor;
+            }
+            resolve();
+            return prev; // Return unchanged state
+          });
+        });
+        if (shouldSkip) 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 = [
+          "id",
+          ...getRelationDisplayFields(targetTable).map((f) => f.name),
+        ];
+
+        const result = await fetcher.fetchOneToManyRelation(
+          relation.targetTable,
+          targetTable.pluralForm,
+          relation.foreignKeyField,
+          fields,
+          recordId,
+          PAGE_SIZE,
+          currentEndCursor,
+        );
+
+        setRelationDataMap((prev) => {
+          const existingRecords =
+            append && Array.isArray(prev[relationFieldName]?.data)
+              ? prev[relationFieldName].data
+              : [];
+
+          return {
+            ...prev,
+            [relationFieldName]: {
+              data: [
+                ...(existingRecords as Record<string, unknown>[]),
+                ...result.data,
+              ],
+              loading: false,
+              error: null,
+              hasNextPage: result.hasNextPage,
+              endCursor: result.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,
+          },
+        }));
+      }
+    },
+    [fetcher, tableMetadata, tableMetadataMap, recordId],
+  );
+
+  // 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);
+
+        const data = await fetcher.fetchManyToOneRelation(
+          relation.targetTable,
+          fields,
+          relatedId,
+        );
+
+        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,
+          },
+        }));
+      }
+    },
+    [fetcher, 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);
+        }
+      }
+    }
+  }, [record, tableMetadata.relations, fetchManyToOneData, fetchRelationData]);
+
+  const handleRefresh = useCallback(() => {
+    fetchRecord();
+    setRelationDataMap({});
+  }, [fetchRecord]);
+
+  return {
+    record,
+    loading,
+    error,
+    relationDataMap,
+    fetchRelationData,
+    refetch: handleRefresh,
+  };
+}
+
+/**
+ * Build query string for single record fetch
+ */
+export { buildSingleRecordQuery, buildOneToManyRelationQuery };