@izumisy-tailor/tailor-data-viewer 0.1.21 → 0.1.23

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

@@ -3,15 +3,18 @@ import { Alert, AlertDescription } from "./ui/alert";
 import type {
   TableMetadata,
   TableMetadataMap,
-  FieldMetadata,
 } from "../generator/metadata-generator";
-import { formatFieldValue } from "../graphql/query-builder";
 import { TableSelector } from "./table-selector";
 import { DataTable } from "./data-table";
 import { DataTableToolbar } from "./data-table-toolbar";
 import { Pagination } from "./pagination";
-import { useColumnState } from "./hooks/use-column-state";
-import { useTableData } from "./hooks/use-table-data";
+import { ColumnSelector } from "./column-selector";
+import { SearchFilterForm } from "./search-filter";
+import { ViewSave } from "./view-save-load";
+import { CsvButton } from "./csv-button";
+import { RefreshButton } from "./refresh-button";
+import { DataViewerProvider } from "./contexts";
+import { TableDataProvider, useTableDataContext } from "./contexts";
 import type { InitialQuery } from "./data-viewer";
 import type { SearchFilters } from "./types";
 import type { SavedView } from "./saved-view-context";
@@ -22,8 +25,8 @@ interface DataViewTabContentProps {
   initialTable?: TableMetadata;
   onTableConfirm: (table: TableMetadata) => void;
   isTableLocked: boolean;
-  /** All table metadata for relation lookup */
-  tableMetadataMap: TableMetadataMap;
+  /** All table metadata (generated from TailorDB schema) */
+  metadata: TableMetadataMap;
   /** Initial query condition for filtering */
   initialQuery?: InitialQuery;
   /** Initial saved view to load */
@@ -51,7 +54,7 @@ export function DataViewTabContent({
   initialTable,
   onTableConfirm,
   isTableLocked,
-  tableMetadataMap,
+  metadata,
   initialQuery,
   initialView,
   onOpenAsSheet,
@@ -79,6 +82,7 @@ export function DataViewTabContent({
       {
         field: initialQuery.field,
         fieldType: field.type,
+        operator: "eq" as const,
         value: initialQuery.value,
         enumValues: field.enumValues,
       },
@@ -86,94 +90,11 @@ export function DataViewTabContent({
   }, [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,
+  const initialFilters = useMemo(
+    () => getInitialFilters(),
+    [getInitialFilters],
   );
 
-  // Handle filter changes - reset pagination when filters change
-  const handleFiltersChange = useCallback(
-    (newFilters: SearchFilters) => {
-      setSearchFilters(newFilters);
-      tableData.resetPagination();
-    },
-    [tableData],
-  );
-
-  // 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);
@@ -204,6 +125,52 @@ export function DataViewTabContent({
     );
   }
 
+  return (
+    <DataViewerProvider
+      appUri={appUri}
+      tableName={selectedTable.name}
+      metadata={metadata}
+      initialData={{
+        filters: initialFilters,
+        selectedFields: initialView?.selectedFields,
+        selectedRelations: initialView?.selectedRelations,
+        expandedRelationFields: initialView?.expandedRelationFields,
+      }}
+    >
+      <TableDataProvider>
+        <DataViewTabContentInner
+          selectedTable={selectedTable}
+          onOpenAsSheet={onOpenAsSheet}
+          onOpenSingleRecordAsSheet={onOpenSingleRecordAsSheet}
+        />
+      </TableDataProvider>
+    </DataViewerProvider>
+  );
+}
+
+interface DataViewTabContentInnerProps {
+  selectedTable: TableMetadata;
+  onOpenAsSheet?: (
+    targetTableName: string,
+    filterField: string,
+    filterValue: string,
+  ) => void;
+  onOpenSingleRecordAsSheet?: (
+    targetTableName: string,
+    recordId: string,
+  ) => void;
+}
+
+/**
+ * Inner component that uses context
+ */
+function DataViewTabContentInner({
+  selectedTable,
+  onOpenAsSheet,
+  onOpenSingleRecordAsSheet,
+}: DataViewTabContentInnerProps) {
+  const tableData = useTableDataContext();
+
   return (
     <div className="space-y-4">
       {/* Table name and description */}
@@ -217,40 +184,14 @@ export function DataViewTabContent({
       </div>
 
       {/* Operations row: column selector, search filter, etc. */}
-      <DataTableToolbar
-        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,
-        }}
-        searchFilter={{
-          fields: selectedTable.fields,
-          filters: searchFilters,
-          onFiltersChange: handleFiltersChange,
-        }}
-        viewSave={{
-          tableName: selectedTable.name,
-          filters: searchFilters,
-          selectedFields: columnState.selectedFields,
-          selectedRelations: columnState.selectedRelations,
-          expandedRelationFields: columnState.expandedRelationFields,
-        }}
-        onDownloadCsv={handleDownloadCsv}
-        onRefresh={() => tableData.refetch()}
-        loading={tableData.loading}
-        csvDisabled={tableData.data.length === 0}
-      />
+      <DataTableToolbar>
+        <ColumnSelector />
+        <SearchFilterForm />
+        <ViewSave />
+        <div className="flex-1" />
+        <CsvButton />
+        <RefreshButton />
+      </DataTableToolbar>
 
       {/* Error Display */}
       {tableData.error && (
@@ -263,19 +204,8 @@ export function DataViewTabContent({
 
       {/* 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 */}

package/src/component/data-viewer.tsx

@@ -11,7 +11,7 @@ import { SingleRecordTabContent } from "./single-record-tab-content";
 import { useSavedViews, type SavedView } from "./saved-view-context";
 
 interface DataViewerProps {
-  tableMetadata: TableMetadataMap;
+  metadata: TableMetadataMap;
   appUri: string;
   /** Initial view ID to load on mount */
   initialViewId?: string;
@@ -52,11 +52,11 @@ function generateTabId(): string {
  * Similar to Excel sheets - each tab has its own table view
  */
 export function DataViewer({
-  tableMetadata,
+  metadata,
   appUri,
   initialViewId,
 }: DataViewerProps) {
-  const allTables = Object.values(tableMetadata);
+  const allTables = Object.values(metadata);
   const { getViewById, isLoading } = useSavedViews();
 
   // Track if we've already initialized from the saved view
@@ -84,7 +84,7 @@ export function DataViewer({
 
     const view = getViewById(initialViewId);
     if (view) {
-      const table = tableMetadata[view.tableName];
+      const table = metadata[view.tableName];
       if (table) {
         initializedFromViewRef.current = true;
         const newTab: Tab = {
@@ -98,7 +98,7 @@ export function DataViewer({
         setActiveTabId(newTab.id);
       }
     }
-  }, [initialViewId, isLoading, getViewById, tableMetadata]);
+  }, [initialViewId, isLoading, getViewById, metadata]);
 
   const handleAddTab = useCallback(() => {
     const newTab: Tab = {
@@ -154,7 +154,7 @@ export function DataViewer({
    */
   const handleOpenAsSheet = useCallback(
     (targetTableName: string, filterField: string, filterValue: string) => {
-      const targetTable = tableMetadata[targetTableName];
+      const targetTable = metadata[targetTableName];
       if (!targetTable) return;
 
       const newTab: Tab = {
@@ -170,7 +170,7 @@ export function DataViewer({
       setTabs((prev) => [...prev, newTab]);
       setActiveTabId(newTab.id);
     },
-    [tableMetadata],
+    [metadata],
   );
 
   /**
@@ -178,7 +178,7 @@ export function DataViewer({
    */
   const handleOpenSingleRecordAsSheet = useCallback(
     (targetTableName: string, recordId: string) => {
-      const targetTable = tableMetadata[targetTableName];
+      const targetTable = metadata[targetTableName];
       if (!targetTable) return;
 
       const newTab: Tab = {
@@ -193,7 +193,7 @@ export function DataViewer({
       setTabs((prev) => [...prev, newTab]);
       setActiveTabId(newTab.id);
     },
-    [tableMetadata],
+    [metadata],
   );
 
   return (
@@ -250,7 +250,7 @@ export function DataViewer({
             {tab.singleRecordMode && tab.table ? (
               <SingleRecordTabContent
                 tableMetadata={tab.table}
-                tableMetadataMap={tableMetadata}
+                metadata={metadata}
                 appUri={appUri}
                 recordId={tab.singleRecordMode.recordId}
                 onOpenAsSheet={handleOpenAsSheet}
@@ -263,7 +263,7 @@ export function DataViewer({
                 initialTable={tab.table ?? undefined}
                 onTableConfirm={(table) => handleTableConfirm(tab.id, table)}
                 isTableLocked={tab.isLocked}
-                tableMetadataMap={tableMetadata}
+                metadata={metadata}
                 initialQuery={tab.initialQuery}
                 initialView={tab.initialView}
                 onOpenAsSheet={handleOpenAsSheet}

package/src/component/hooks/use-column-state.ts

@@ -51,8 +51,8 @@ export interface ColumnState {
  * Manage column visibility state (fields and relations)
  */
 export function useColumnState(
-  fields: FieldMetadata[],
-  relations?: RelationMetadata[],
+  fields: readonly FieldMetadata[],
+  relations?: readonly RelationMetadata[],
   defaultFields?: string[],
   defaultRelations?: string[],
   defaultExpandedRelationFields?: ExpandedRelationFields,