@izumisy-tailor/tailor-data-viewer 0.1.0

package/src/component/data-view-tab-content.tsx

@@ -0,0 +1,324 @@
+import { useState, useCallback, useMemo } from "react";
+import { RefreshCw, Download } from "lucide-react";
+import { Alert, AlertDescription } from "../ui/alert";
+import { Button } from "../ui/button";
+import type {
+  TableMetadata,
+  TableMetadataMap,
+  FieldMetadata,
+} from "../types/table-metadata";
+import { formatFieldValue } from "../utils/query-builder";
+import { TableSelector } from "./table-selector";
+import { ColumnSelector } from "./column-selector";
+import { DataTable } from "./data-table";
+import { Pagination } from "./pagination";
+import { SearchFilterForm } from "./search-filter";
+import { ViewSave } from "./view-save-load";
+import { useColumnState } from "./hooks/use-column-state";
+import { useTableData } from "./hooks/use-table-data";
+import type { InitialQuery } from "./data-viewer";
+import type { SearchFilters } from "./types";
+import type { SavedView } from "./saved-view-context";
+
+interface DataViewTabContentProps {
+  tables: TableMetadata[];
+  appUri: string;
+  initialTable?: TableMetadata;
+  onTableConfirm: (table: TableMetadata) => void;
+  isTableLocked: boolean;
+  /** All table metadata for relation lookup */
+  tableMetadataMap: TableMetadataMap;
+  /** Initial query condition for filtering */
+  initialQuery?: InitialQuery;
+  /** Initial saved view to load */
+  initialView?: SavedView;
+  /** 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;
+}
+
+/**
+ * Content for a single data view tab
+ * Handles table selection, column selection, and data display
+ */
+export function DataViewTabContent({
+  tables,
+  appUri,
+  initialTable,
+  onTableConfirm,
+  isTableLocked,
+  tableMetadataMap,
+  initialQuery,
+  initialView,
+  onOpenAsSheet,
+  onOpenSingleRecordAsSheet,
+}: DataViewTabContentProps) {
+  const [selectedTable, setSelectedTable] = useState<TableMetadata | null>(
+    initialTable ?? null,
+  );
+
+  // Convert initialQuery to SearchFilter format for initial state
+  const getInitialFilters = useCallback((): SearchFilters => {
+    // If initialView is provided, use its filters
+    if (initialView) {
+      return initialView.filters;
+    }
+
+    if (!initialQuery || !initialTable) return [];
+
+    const field = initialTable.fields.find(
+      (f) => f.name === initialQuery.field,
+    );
+    if (!field) return [];
+
+    return [
+      {
+        field: initialQuery.field,
+        fieldType: field.type,
+        value: initialQuery.value,
+        enumValues: field.enumValues,
+      },
+    ];
+  }, [initialQuery, initialTable, initialView]);
+
+  // Search filters (includes initialQuery as a regular filter that can be edited/removed)
+  const [searchFilters, setSearchFilters] =
+    useState<SearchFilters>(getInitialFilters);
+
+  // Memoize fields to avoid creating new array reference on every render when selectedTable is null
+  const fields = useMemo(
+    () => selectedTable?.fields ?? [],
+    [selectedTable?.fields],
+  );
+
+  // Column state (includes relation selection)
+  // If initialView is provided, use its column selections as defaults
+  const columnState = useColumnState(
+    fields,
+    selectedTable?.relations,
+    initialView?.selectedFields,
+    initialView?.selectedRelations,
+    initialView?.expandedRelationFields,
+  );
+
+  // Table data fetching (pass selectedRelations for FK field inclusion and search filters)
+  const tableData = useTableData(
+    appUri,
+    selectedTable,
+    columnState.selectedFields,
+    columnState.selectedRelations,
+    searchFilters,
+    tableMetadataMap,
+    columnState.expandedRelationFields,
+  );
+
+  // Handle filter changes - reset pagination when filters change
+  const handleFiltersChange = useCallback(
+    (newFilters: SearchFilters) => {
+      setSearchFilters(newFilters);
+      tableData.resetPagination();
+    },
+    [tableData],
+  );
+
+  // Track cursor history for previous page navigation
+  const [cursorHistory] = useState<string[]>([]);
+
+  // CSV Download handler
+  const handleDownloadCsv = useCallback(() => {
+    if (!selectedTable || tableData.data.length === 0) return;
+
+    const selectedFieldsMetadata = selectedTable.fields.filter(
+      (f: FieldMetadata) => columnState.selectedFields.includes(f.name),
+    );
+
+    // Create CSV header
+    const headers = selectedFieldsMetadata.map((f: FieldMetadata) => f.name);
+
+    // Create CSV rows
+    const rows = tableData.data.map((row: Record<string, unknown>) =>
+      selectedFieldsMetadata.map((field: FieldMetadata) => {
+        const value = row[field.name];
+        const formattedValue = formatFieldValue(value, field);
+        // Escape double quotes and wrap in quotes if contains comma, newline, or quotes
+        const stringValue = String(formattedValue ?? "");
+        if (
+          stringValue.includes(",") ||
+          stringValue.includes("\n") ||
+          stringValue.includes('"')
+        ) {
+          return `"${stringValue.replace(/"/g, '""')}"`;
+        }
+        return stringValue;
+      }),
+    );
+
+    // Combine headers and rows
+    const csvContent = [
+      headers.join(","),
+      ...rows.map((r: string[]) => r.join(",")),
+    ].join("\n");
+
+    // Create and download file
+    const blob = new Blob(["\uFEFF" + csvContent], {
+      type: "text/csv;charset=utf-8;",
+    });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `${selectedTable.name}_${new Date().toISOString().slice(0, 10)}.csv`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }, [selectedTable, tableData.data, columnState.selectedFields]);
+
+  const handleTableSelect = useCallback(
+    (table: TableMetadata) => {
+      setSelectedTable(table);
+      onTableConfirm(table);
+    },
+    [onTableConfirm],
+  );
+
+  const hasPreviousPage = cursorHistory.length > 0;
+
+  // Show table selector centered if table is not locked yet
+  if (!isTableLocked) {
+    return (
+      <div className="flex justify-center py-8">
+        <TableSelector
+          tables={tables}
+          selectedTable={null}
+          onSelect={handleTableSelect}
+          centered
+        />
+      </div>
+    );
+  }
+
+  if (!selectedTable) {
+    return (
+      <div className="text-muted-foreground py-8 text-center">
+        テーブルが選択されていません
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Table name and description */}
+      <div className="flex items-baseline gap-2">
+        <span className="font-medium">{selectedTable.name}</span>
+        {selectedTable.description && (
+          <span className="text-muted-foreground text-sm">
+            {selectedTable.description}
+          </span>
+        )}
+      </div>
+
+      {/* Operations row: column selector, search filter, etc. */}
+      <div className="flex items-center gap-4">
+        <ColumnSelector
+          fields={selectedTable.fields}
+          selectedFields={columnState.selectedFields}
+          onToggle={columnState.toggleField}
+          onSelectAll={columnState.selectAll}
+          onDeselectAll={columnState.deselectAll}
+          relations={selectedTable.relations}
+          selectedRelations={columnState.selectedRelations}
+          onToggleRelation={columnState.toggleRelation}
+          tableMetadataMap={tableMetadataMap}
+          expandedRelationFields={columnState.expandedRelationFields}
+          onToggleExpandedRelationField={
+            columnState.toggleExpandedRelationField
+          }
+          isExpandedRelationFieldSelected={
+            columnState.isExpandedRelationFieldSelected
+          }
+        />
+
+        {/* Search filter */}
+        <SearchFilterForm
+          fields={selectedTable.fields}
+          filters={searchFilters}
+          onFiltersChange={handleFiltersChange}
+        />
+
+        {/* View save */}
+        <ViewSave
+          tableName={selectedTable.name}
+          filters={searchFilters}
+          selectedFields={columnState.selectedFields}
+          selectedRelations={columnState.selectedRelations}
+          expandedRelationFields={columnState.expandedRelationFields}
+        />
+
+        <div className="flex-1" />
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleDownloadCsv}
+          disabled={tableData.loading || tableData.data.length === 0}
+        >
+          <Download className="size-4" />
+          CSV
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => tableData.refetch()}
+          disabled={tableData.loading}
+        >
+          <RefreshCw
+            className={`size-4 ${tableData.loading ? "animate-spin" : ""}`}
+          />
+          更新
+        </Button>
+      </div>
+
+      {/* Error Display */}
+      {tableData.error && (
+        <Alert variant="destructive">
+          <AlertDescription>
+            データの取得に失敗しました: {tableData.error.message}
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {/* Data Table */}
+      <DataTable
+        data={tableData.data}
+        fields={selectedTable.fields}
+        selectedFields={columnState.selectedFields}
+        sortState={tableData.sortState}
+        onSort={tableData.setSort}
+        loading={tableData.loading}
+        tableMetadata={selectedTable}
+        tableMetadataMap={tableMetadataMap}
+        appUri={appUri}
+        selectedRelations={columnState.selectedRelations}
+        onOpenAsSheet={onOpenAsSheet}
+        onOpenSingleRecordAsSheet={onOpenSingleRecordAsSheet}
+        expandedRelationFields={columnState.expandedRelationFields}
+      />
+
+      {/* Pagination */}
+      <Pagination
+        pagination={tableData.pagination}
+        currentCount={tableData.data.length}
+        onNext={tableData.nextPage}
+        onPrevious={tableData.previousPage}
+        hasPreviousPage={hasPreviousPage}
+      />
+    </div>
+  );
+}

package/src/component/data-viewer.tsx

@@ -0,0 +1,280 @@
+import { useState, useCallback } from "react";
+import { Plus, X } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+import { Button } from "../ui/button";
+import type { TableMetadata, TableMetadataMap } from "../types/table-metadata";
+import { useAccessibleTables } from "./hooks/use-accessible-tables";
+import { DataViewTabContent } from "./data-view-tab-content";
+import { SingleRecordTabContent } from "./single-record-tab-content";
+import { useSavedViews, type SavedView } from "./saved-view-context";
+
+interface DataViewerProps {
+  tableMetadata: TableMetadataMap;
+  userRoles: string[];
+  appUri: string;
+  /** Initial view ID to load on mount */
+  initialViewId?: string;
+}
+
+/**
+ * Initial query condition for filtering table data
+ */
+export interface InitialQuery {
+  /** Field name to filter by (e.g., "taskId") */
+  field: string;
+  /** Value to filter with */
+  value: string;
+}
+
+interface Tab {
+  id: string;
+  label: string;
+  table: TableMetadata | null;
+  isLocked: boolean;
+  /** Initial query condition for the tab (used when opening from relation) */
+  initialQuery?: InitialQuery;
+  /** Single record mode - shows one record with its relations */
+  singleRecordMode?: {
+    recordId: string;
+  };
+  /** Initial saved view to load */
+  initialView?: SavedView;
+}
+
+let tabIdCounter = 0;
+function generateTabId(): string {
+  return `tab-${++tabIdCounter}`;
+}
+
+/**
+ * Main Data Viewer component with tab-based UI
+ * Similar to Excel sheets - each tab has its own table view
+ */
+export function DataViewer({
+  tableMetadata,
+  userRoles,
+  appUri,
+  initialViewId,
+}: DataViewerProps) {
+  // Get tables accessible to the current user
+  const accessibleTables = useAccessibleTables(tableMetadata, userRoles);
+  const { getViewById } = useSavedViews();
+
+  // Tab management - initialize with saved view if provided
+  const [tabs, setTabs] = useState<Tab[]>(() => {
+    if (initialViewId) {
+      const view = getViewById(initialViewId);
+      if (view) {
+        const table = tableMetadata[view.tableName];
+        if (table) {
+          return [
+            {
+              id: generateTabId(),
+              label: view.name,
+              table,
+              isLocked: true,
+              initialView: view,
+            },
+          ];
+        }
+      }
+    }
+    return [
+      {
+        id: generateTabId(),
+        label: "新規シート",
+        table: null,
+        isLocked: false,
+      },
+    ];
+  });
+  const [activeTabId, setActiveTabId] = useState<string>(tabs[0].id);
+
+  const handleAddTab = useCallback(() => {
+    const newTab: Tab = {
+      id: generateTabId(),
+      label: "新規シート",
+      table: null,
+      isLocked: false,
+    };
+    setTabs((prev) => [...prev, newTab]);
+    setActiveTabId(newTab.id);
+  }, []);
+
+  const handleCloseTab = useCallback(
+    (tabId: string) => {
+      setTabs((prev) => {
+        const newTabs = prev.filter((t) => t.id !== tabId);
+        // If closing active tab, switch to another tab
+        if (tabId === activeTabId && newTabs.length > 0) {
+          setActiveTabId(newTabs[newTabs.length - 1].id);
+        }
+        // Always keep at least one tab
+        if (newTabs.length === 0) {
+          const newTab: Tab = {
+            id: generateTabId(),
+            label: "新規シート",
+            table: null,
+            isLocked: false,
+          };
+          setActiveTabId(newTab.id);
+          return [newTab];
+        }
+        return newTabs;
+      });
+    },
+    [activeTabId],
+  );
+
+  const handleTableConfirm = useCallback(
+    (tabId: string, table: TableMetadata) => {
+      setTabs((prev) =>
+        prev.map((t) =>
+          t.id === tabId
+            ? { ...t, table, label: table.name, isLocked: true }
+            : t,
+        ),
+      );
+    },
+    [],
+  );
+
+  /**
+   * Open a relation as a new sheet with pre-applied filter
+   */
+  const handleOpenAsSheet = useCallback(
+    (targetTableName: string, filterField: string, filterValue: string) => {
+      const targetTable = tableMetadata[targetTableName];
+      if (!targetTable) return;
+
+      const newTab: Tab = {
+        id: generateTabId(),
+        label: `${targetTable.name} (${filterField}=${filterValue.substring(0, 8)}...)`,
+        table: targetTable,
+        isLocked: true,
+        initialQuery: {
+          field: filterField,
+          value: filterValue,
+        },
+      };
+      setTabs((prev) => [...prev, newTab]);
+      setActiveTabId(newTab.id);
+    },
+    [tableMetadata],
+  );
+
+  /**
+   * Open a single record as a new sheet (shows record details with relations)
+   */
+  const handleOpenSingleRecordAsSheet = useCallback(
+    (targetTableName: string, recordId: string) => {
+      const targetTable = tableMetadata[targetTableName];
+      if (!targetTable) return;
+
+      const newTab: Tab = {
+        id: generateTabId(),
+        label: `${targetTable.name} #${recordId}`,
+        table: targetTable,
+        isLocked: true,
+        singleRecordMode: {
+          recordId,
+        },
+      };
+      setTabs((prev) => [...prev, newTab]);
+      setActiveTabId(newTab.id);
+    },
+    [tableMetadata],
+  );
+
+  if (accessibleTables.length === 0) {
+    return (
+      <Card>
+        <CardContent className="py-8">
+          <div className="text-muted-foreground text-center">
+            アクセス可能なテーブルがありません
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle>Data View Explorer</CardTitle>
+      </CardHeader>
+
+      {/* Tab bar */}
+      <div className="border-b px-4">
+        <div className="flex items-center gap-1">
+          {tabs.map((tab) => (
+            <div
+              key={tab.id}
+              className={`group flex cursor-pointer items-center gap-1 border-b-2 px-3 py-2 text-sm transition-colors ${
+                tab.id === activeTabId
+                  ? "border-primary text-primary"
+                  : "text-muted-foreground hover:text-foreground border-transparent"
+              }`}
+              onClick={() => setActiveTabId(tab.id)}
+            >
+              <span className="max-w-32 truncate">{tab.label}</span>
+              {tabs.length > 1 && (
+                <button
+                  className="text-muted-foreground hover:text-destructive ml-1 opacity-0 transition-opacity group-hover:opacity-100"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleCloseTab(tab.id);
+                  }}
+                >
+                  <X className="size-3" />
+                </button>
+              )}
+            </div>
+          ))}
+          <Button
+            variant="ghost"
+            size="sm"
+            className="ml-1 h-8 w-8 p-0"
+            onClick={handleAddTab}
+          >
+            <Plus className="size-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Tab content - all tabs stay mounted to preserve data in memory */}
+      <CardContent>
+        {tabs.map((tab) => (
+          <div
+            key={tab.id}
+            className={tab.id === activeTabId ? "block" : "hidden"}
+          >
+            {tab.singleRecordMode && tab.table ? (
+              <SingleRecordTabContent
+                tableMetadata={tab.table}
+                tableMetadataMap={tableMetadata}
+                appUri={appUri}
+                recordId={tab.singleRecordMode.recordId}
+                onOpenAsSheet={handleOpenAsSheet}
+                onOpenSingleRecordAsSheet={handleOpenSingleRecordAsSheet}
+              />
+            ) : (
+              <DataViewTabContent
+                tables={accessibleTables}
+                appUri={appUri}
+                initialTable={tab.table ?? undefined}
+                onTableConfirm={(table) => handleTableConfirm(tab.id, table)}
+                isTableLocked={tab.isLocked}
+                tableMetadataMap={tableMetadata}
+                initialQuery={tab.initialQuery}
+                initialView={tab.initialView}
+                onOpenAsSheet={handleOpenAsSheet}
+                onOpenSingleRecordAsSheet={handleOpenSingleRecordAsSheet}
+              />
+            )}
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}

package/src/component/hooks/use-accessible-tables.ts

@@ -0,0 +1,22 @@
+import { useMemo } from "react";
+import type {
+  TableMetadata,
+  TableMetadataMap,
+} from "../../types/table-metadata";
+
+/**
+ * Filter tables based on user's roles
+ * Returns only tables the user has read access to
+ */
+export function useAccessibleTables(
+  tableMetadata: TableMetadataMap,
+  userRoles: string[],
+): TableMetadata[] {
+  return useMemo(() => {
+    return Object.values(tableMetadata).filter((table) =>
+      table.readAllowedRoles.some((role) =>
+        userRoles.map((r) => r.toUpperCase()).includes(role.toUpperCase()),
+      ),
+    );
+  }, [tableMetadata, userRoles]);
+}