@izumisy-tailor/tailor-data-viewer 0.1.0

package/src/component/hooks/use-table-data.ts

@@ -0,0 +1,317 @@
+import { useState, useCallback, useEffect, useMemo } from "react";
+import type {
+  TableMetadata,
+  TableMetadataMap,
+  ExpandedRelationFields,
+} from "../../types/table-metadata";
+import {
+  createGraphQLClient,
+  executeQuery,
+} from "../../providers/graphql-client";
+import {
+  buildListQuery,
+  type RelationTotalInfo,
+  type ExpandedRelationInfo,
+} from "../../utils/query-builder";
+import type { SearchFilters } from "../types";
+
+export interface SortState {
+  field: string;
+  direction: "Asc" | "Desc";
+}
+
+export interface PaginationState {
+  first: number;
+  after: string | null;
+  hasNextPage: boolean;
+}
+
+export interface TableDataState {
+  data: Record<string, unknown>[];
+  loading: boolean;
+  error: Error | null;
+  sortState: SortState | null;
+  pagination: PaginationState;
+  refetch: () => Promise<void>;
+  setSort: (field: string, direction?: "Asc" | "Desc") => void;
+  nextPage: () => void;
+  previousPage: () => void;
+  resetPagination: () => void;
+}
+
+type GraphQLListResponse = Record<
+  string,
+  {
+    edges: { node: Record<string, unknown> }[];
+    pageInfo: {
+      hasNextPage: boolean;
+      endCursor: string | null;
+    };
+  }
+>;
+
+const DEFAULT_PAGE_SIZE = 20;
+
+/**
+ * Build query input from search filters (AND logic)
+ */
+function buildQueryInput(
+  filters: SearchFilters,
+): Record<string, unknown> | undefined {
+  if (filters.length === 0) return undefined;
+
+  const queryInput: Record<string, unknown> = {};
+
+  for (const filter of filters) {
+    // For boolean, use the boolean value directly
+    // For string/number/enum/uuid, use { eq: value }
+    if (filter.fieldType === "boolean") {
+      queryInput[filter.field] = { eq: filter.value };
+    } else if (filter.fieldType === "number") {
+      // Parse number value
+      const numValue = parseFloat(filter.value as string);
+      if (!isNaN(numValue)) {
+        queryInput[filter.field] = { eq: numValue };
+      }
+    } else {
+      // string, enum, uuid - use string value
+      queryInput[filter.field] = { eq: filter.value };
+    }
+  }
+
+  return Object.keys(queryInput).length > 0 ? queryInput : undefined;
+}
+
+/**
+ * Fetch and manage table data with sorting and pagination
+ */
+export function useTableData(
+  appUri: string,
+  table: TableMetadata | null,
+  selectedFields: string[],
+  selectedRelations?: string[],
+  searchFilters?: SearchFilters,
+  tableMetadataMap?: TableMetadataMap,
+  expandedRelationFields?: ExpandedRelationFields,
+): TableDataState {
+  const [data, setData] = useState<Record<string, unknown>[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const [sortState, setSortState] = useState<SortState | null>(null);
+  const [pagination, setPagination] = useState<PaginationState>({
+    first: DEFAULT_PAGE_SIZE,
+    after: null,
+    hasNextPage: false,
+  });
+  const [cursorHistory, setCursorHistory] = useState<string[]>([]);
+
+  const client = useMemo(() => createGraphQLClient(appUri), [appUri]);
+
+  // Clear data immediately when table changes to avoid stale data display
+  useEffect(() => {
+    setData([]);
+    setError(null);
+    setSortState(null);
+    setPagination({
+      first: DEFAULT_PAGE_SIZE,
+      after: null,
+      hasNextPage: false,
+    });
+    setCursorHistory([]);
+  }, [table?.name]);
+
+  const fetchData = useCallback(async () => {
+    if (!table || selectedFields.length === 0) {
+      setData([]);
+      return;
+    }
+
+    // Validate that selected fields exist in the current table
+    const tableFieldNames = new Set(table.fields.map((f) => f.name));
+    const validFields = selectedFields.filter((f) => tableFieldNames.has(f));
+
+    if (validFields.length === 0) {
+      setData([]);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      // Always include 'id' field if not already selected
+      const fieldsToFetch = validFields.includes("id")
+        ? validFields
+        : ["id", ...validFields];
+
+      // Also include FK fields for selected manyToOne relations
+      // so that relation data can be fetched later
+      const manyToOneFkFields = (table.relations ?? [])
+        .filter(
+          (r) =>
+            r.relationType === "manyToOne" &&
+            selectedRelations?.includes(r.fieldName),
+        )
+        .map((r) => r.foreignKeyField)
+        .filter((fk) => !fieldsToFetch.includes(fk));
+
+      const allFieldsToFetch = [...fieldsToFetch, ...manyToOneFkFields];
+
+      // Build oneToMany relation total info for selected relations
+      const oneToManyRelationTotals: RelationTotalInfo[] = (
+        table.relations ?? []
+      )
+        .filter(
+          (r) =>
+            r.relationType === "oneToMany" &&
+            selectedRelations?.includes(r.fieldName),
+        )
+        .map((r) => {
+          const targetTable = tableMetadataMap?.[r.targetTable];
+          return {
+            relation: r,
+            targetPluralForm: targetTable?.pluralForm ?? r.targetTable + "s",
+          };
+        });
+
+      // Build expanded manyToOne relation info for inline column display
+      const expandedManyToOneRelations: ExpandedRelationInfo[] = (
+        table.relations ?? []
+      )
+        .filter(
+          (r) =>
+            r.relationType === "manyToOne" &&
+            expandedRelationFields?.[r.fieldName]?.length,
+        )
+        .map((r) => ({
+          relation: r,
+          selectedFields: expandedRelationFields?.[r.fieldName] ?? [],
+        }));
+
+      const query = buildListQuery({
+        tableName: table.name,
+        pluralForm: table.pluralForm,
+        selectedFields: allFieldsToFetch,
+        orderBy: sortState ?? undefined,
+        first: pagination.first,
+        after: pagination.after ?? undefined,
+        oneToManyRelationTotals:
+          oneToManyRelationTotals.length > 0
+            ? oneToManyRelationTotals
+            : undefined,
+        expandedManyToOneRelations:
+          expandedManyToOneRelations.length > 0
+            ? expandedManyToOneRelations
+            : undefined,
+      });
+
+      // Build query variables with optional filters from searchFilters
+      const queryVariables: Record<string, unknown> = {};
+      const queryInput = buildQueryInput(searchFilters ?? []);
+      if (queryInput) {
+        queryVariables.query = queryInput;
+      }
+
+      const result = await executeQuery<GraphQLListResponse>(
+        client,
+        query,
+        queryVariables,
+      );
+      const responseData = result[table.pluralForm];
+
+      if (responseData) {
+        setData(responseData.edges.map((edge) => edge.node));
+        setPagination((prev) => ({
+          ...prev,
+          hasNextPage: responseData.pageInfo.hasNextPage,
+        }));
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to fetch data"));
+      setData([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [
+    table,
+    selectedFields,
+    selectedRelations,
+    sortState,
+    pagination.first,
+    pagination.after,
+    client,
+    searchFilters,
+    tableMetadataMap,
+    expandedRelationFields,
+  ]);
+
+  // Refetch when table, fields, sort, or pagination changes
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const setSort = useCallback((field: string, direction?: "Asc" | "Desc") => {
+    setSortState((prev) => {
+      // If clicking the same field, toggle direction
+      if (prev?.field === field && !direction) {
+        return {
+          field,
+          direction: prev.direction === "Asc" ? "Desc" : "Asc",
+        };
+      }
+      return { field, direction: direction ?? "Asc" };
+    });
+    // Reset pagination when sorting changes
+    setPagination((prev) => ({ ...prev, after: null }));
+    setCursorHistory([]);
+  }, []);
+
+  const nextPage = useCallback(() => {
+    const responseData = data;
+    if (pagination.hasNextPage && responseData.length > 0) {
+      // Store current cursor for back navigation
+      if (pagination.after) {
+        setCursorHistory((prev) => [...prev, pagination.after!]);
+      }
+      // Get the cursor from the last item (using the GraphQL response's endCursor)
+      setPagination((prev) => ({
+        ...prev,
+        after: (responseData[responseData.length - 1]?.id as string) ?? null,
+      }));
+    }
+  }, [data, pagination.hasNextPage, pagination.after]);
+
+  const previousPage = useCallback(() => {
+    if (cursorHistory.length > 0) {
+      const newHistory = [...cursorHistory];
+      newHistory.pop();
+      setCursorHistory(newHistory);
+      setPagination((prev) => ({
+        ...prev,
+        after: newHistory.length > 0 ? newHistory[newHistory.length - 1] : null,
+      }));
+    }
+  }, [cursorHistory]);
+
+  const resetPagination = useCallback(() => {
+    setPagination({
+      first: DEFAULT_PAGE_SIZE,
+      after: null,
+      hasNextPage: false,
+    });
+    setCursorHistory([]);
+  }, []);
+
+  return {
+    data,
+    loading,
+    error,
+    sortState,
+    pagination,
+    refetch: fetchData,
+    setSort,
+    nextPage,
+    previousPage,
+    resetPagination,
+  };
+}

package/src/component/index.ts

@@ -0,0 +1,15 @@
+export { DataViewer } from "./data-viewer";
+export type { InitialQuery } from "./data-viewer";
+export { DataViewTabContent } from "./data-view-tab-content";
+export { TableSelector } from "./table-selector";
+export { ColumnSelector } from "./column-selector";
+export { DataTable } from "./data-table";
+export { Pagination } from "./pagination";
+export { SearchFilterForm } from "./search-filter";
+export { ViewSave } from "./view-save-load";
+export { useTableData } from "./hooks/use-table-data";
+export { useColumnState } from "./hooks/use-column-state";
+export { useAccessibleTables } from "./hooks/use-accessible-tables";
+export { useSavedViews, SavedViewProvider } from "./saved-view-context";
+export type { SavedView, SaveViewInput } from "./saved-view-context";
+export type { SearchFilter, SearchFilters } from "./types";

package/src/component/pagination.tsx

@@ -0,0 +1,56 @@
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "../ui/button";
+import type { PaginationState } from "./hooks/use-table-data";
+
+interface PaginationProps {
+  pagination: PaginationState;
+  currentCount: number;
+  onNext: () => void;
+  onPrevious: () => void;
+  hasPreviousPage: boolean;
+}
+
+/**
+ * Pagination controls for the data table
+ */
+export function Pagination({
+  pagination,
+  currentCount,
+  onNext,
+  onPrevious,
+  hasPreviousPage,
+}: PaginationProps) {
+  return (
+    <div className="flex items-center justify-between py-2">
+      <div className="text-muted-foreground text-sm">
+        {currentCount > 0 ? (
+          <>
+            <span className="font-medium">{currentCount}</span> 件を表示
+          </>
+        ) : (
+          "データなし"
+        )}
+      </div>
+      <div className="flex items-center gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onPrevious}
+          disabled={!hasPreviousPage}
+        >
+          <ChevronLeft className="size-4" />
+          前へ
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onNext}
+          disabled={!pagination.hasNextPage}
+        >
+          次へ
+          <ChevronRight className="size-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/component/relation-content.tsx

@@ -0,0 +1,250 @@
+import { ChevronDown, Loader2, ExternalLink } from "lucide-react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../ui/table";
+import { Button } from "../ui/button";
+import { Badge } from "../ui/badge";
+import type {
+  TableMetadata,
+  RelationMetadata,
+  FieldMetadata,
+} from "../types/table-metadata";
+import { formatFieldValue } from "../utils/query-builder";
+import type { RelationDataResult } from "./hooks/use-relation-data";
+
+interface RelationContentProps {
+  relation: RelationMetadata;
+  result: RelationDataResult;
+  targetTableMetadata: TableMetadata | undefined;
+  /** Parent row ID (used for oneToMany to create filter) */
+  parentRowId?: string;
+  /** Callback to open this 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;
+}
+
+/**
+ * Get display fields for a table (first few meaningful fields)
+ */
+function getDisplayFields(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); // Limit to 6 fields for display
+}
+
+/**
+ * Component to display relation data (manyToOne or oneToMany)
+ */
+export function RelationContent({
+  relation,
+  result,
+  targetTableMetadata,
+  parentRowId,
+  onOpenAsSheet,
+  onOpenSingleRecordAsSheet,
+}: RelationContentProps) {
+  const { data, loading, error, hasNextPage, fetchMore } = result;
+
+  // Handler for opening as a new sheet
+  const handleOpenAsSheet = () => {
+    if (!onOpenAsSheet || !parentRowId) return;
+    // For oneToMany, filter by the foreign key field pointing to parent
+    onOpenAsSheet(relation.targetTable, relation.foreignKeyField, parentRowId);
+  };
+
+  if (loading && !data) {
+    return (
+      <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>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="text-destructive py-4 text-center text-sm">
+        エラー: {error.message}
+      </div>
+    );
+  }
+
+  if (!targetTableMetadata) {
+    return (
+      <div className="text-muted-foreground py-4 text-center text-sm">
+        テーブルメタデータが見つかりません: {relation.targetTable}
+      </div>
+    );
+  }
+
+  const displayFields = getDisplayFields(targetTableMetadata);
+
+  if (relation.relationType === "manyToOne") {
+    // Single record display (key-value format)
+    const record = data as Record<string, unknown> | null;
+
+    if (!record) {
+      return (
+        <div className="bg-muted/30 rounded-md p-4">
+          <div className="mb-2 flex items-center gap-2">
+            <Badge variant="outline" className="text-xs">
+              {relation.targetTable}
+            </Badge>
+            <span className="text-muted-foreground text-xs">manyToOne</span>
+          </div>
+          <div className="text-muted-foreground text-center text-sm">
+            関連データがありません
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="bg-muted/30 rounded-md p-4">
+        <div className="mb-2 flex items-center gap-2">
+          <Badge variant="outline" className="text-xs">
+            {relation.targetTable}
+          </Badge>
+          <span className="text-muted-foreground text-xs">manyToOne</span>
+          <div className="flex-1" />
+          {onOpenSingleRecordAsSheet && typeof record.id === "string" && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                onOpenSingleRecordAsSheet(
+                  relation.targetTable,
+                  record.id as string,
+                );
+              }}
+              className="h-6 text-xs"
+            >
+              <ExternalLink className="mr-1 size-3" />
+              シートで開く
+            </Button>
+          )}
+        </div>
+        <div className="grid grid-cols-2 gap-x-4 gap-y-2 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>
+    );
+  }
+
+  // oneToMany: Table display
+  const records = (data as Record<string, unknown>[]) ?? [];
+
+  if (records.length === 0) {
+    return (
+      <div className="bg-muted/30 rounded-md p-4">
+        <div className="mb-2 flex items-center gap-2">
+          <Badge variant="outline" className="text-xs">
+            {relation.targetTable}
+          </Badge>
+          <span className="text-muted-foreground text-xs">oneToMany</span>
+        </div>
+        <div className="text-muted-foreground text-center text-sm">
+          関連データがありません
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-muted/30 rounded-md p-4">
+      <div className="mb-2 flex items-center gap-2">
+        <Badge variant="outline" className="text-xs">
+          {relation.targetTable}
+        </Badge>
+        <span className="text-muted-foreground text-xs">
+          oneToMany ({records.length}件{hasNextPage ? "+" : ""})
+        </span>
+        <div className="flex-1" />
+        {onOpenAsSheet && parentRowId && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleOpenAsSheet}
+            className="h-6 text-xs"
+          >
+            <ExternalLink className="mr-1 size-3" />
+            シートで開く
+          </Button>
+        )}
+      </div>
+      <div className="overflow-hidden rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow className="bg-muted/50">
+              {displayFields.map((field) => (
+                <TableHead key={field.name} className="text-xs">
+                  {field.name}
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {records.map((record, index) => (
+              <TableRow key={(record.id as string) ?? index}>
+                {displayFields.map((field) => (
+                  <TableCell key={field.name} className="text-xs">
+                    {formatFieldValue(record[field.name], field)}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+      {hasNextPage && fetchMore && (
+        <div className="mt-2 flex justify-center">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={fetchMore}
+            disabled={loading}
+            className="text-xs"
+          >
+            {loading ? (
+              <Loader2 className="mr-1 size-3 animate-spin" />
+            ) : (
+              <ChevronDown className="mr-1 size-3" />
+            )}
+            もっと見る
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}