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

package/README.md

@@ -52,7 +52,7 @@ import { tableMetadata } from "./generated/table-metadata";
 export const dataViewModule = createDataViewModule({
   tableMetadata,
   appUri: import.meta.env.VITE_APP_URL,
-  store: createIndexedDBStore(),
+  savedViewStore: createIndexedDBStore(),
 });
 ```
 
@@ -98,6 +98,15 @@ function App() {
 
 For store options, see [Saved View Store](./docs/saved-view-store.md).
 
+### About savedViewStore
+
+`savedViewStore` is a storage implementation for persisting views created in Data Viewer (such as filter settings and column visibility settings). Two built-in stores are provided:
+
+- **IndexedDB Store** (`createIndexedDBStore`): Stores data in browser's IndexedDB. Ideal for development, personal use, and offline support
+- **TailorDB Store** (`createTailorDBStore`): Stores data on the server side. Ideal for sharing views across teams
+
+For more details, see [Saved View Store](./docs/saved-view-store.md).
+
 ### Generating Table Metadata
 
 This library includes a custom generator for [Tailor Platform SDK](https://www.npmjs.com/package/@tailor-platform/sdk) that automatically generates table metadata from your TailorDB schema.

package/docs/app-shell-module.md

@@ -21,7 +21,7 @@ import { tableMetadata } from "@tailor-platform/my-app/generated/table-metadata"
 export const dataViewModule = createDataViewModule({
   tableMetadata,
   appUri: import.meta.env.VITE_APP_URL,
-  store: createIndexedDBStore(),
+  savedViewStore: createIndexedDBStore(),
 });
 ```
 
@@ -36,7 +36,7 @@ import { tableMetadata } from "@tailor-platform/my-app/generated/table-metadata"
 export const dataViewModule = createDataViewModule({
   tableMetadata,
   appUri: import.meta.env.VITE_APP_URL,
-  store: createTailorDBStore(),
+  savedViewStore: createTailorDBStore(),
 });
 ```
 
@@ -68,7 +68,7 @@ interface DataViewModuleConfig {
   appUri: string;
 
   /** Store implementation for view persistence (required) */
-  store: SavedViewStore | SavedViewStoreFactory;
+  savedViewStore: SavedViewStore | SavedViewStoreFactory;
 
   /** Routing configuration (optional) */
   path?: {

package/package.json

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

package/src/app-shell/create-data-view-module.tsx

@@ -36,7 +36,7 @@ import { Badge } from "../component/ui/badge";
  * export const dataViewModule = createDataViewModule({
  *   tableMetadata,
  *   appUri: import.meta.env.VITE_APP_URL,
- *   store: createIndexedDBStore(),
+ *   savedViewStore: createIndexedDBStore(),
  * });
  * ```
  */
@@ -44,7 +44,7 @@ export function createDataViewModule(config: DataViewModuleConfig) {
   const {
     tableMetadata,
     appUri,
-    store: storeOrFactory,
+    savedViewStore: storeOrFactory,
     path = {},
     meta = {},
   } = config;

package/src/app-shell/types.ts

@@ -13,7 +13,7 @@ export interface DataViewModuleConfig {
   appUri: string;
 
   /** Saved view store implementation (required) */
-  store: SavedViewStore | SavedViewStoreFactory;
+  savedViewStore: SavedViewStore | SavedViewStoreFactory;
 
   /** Routing configuration */
   path?: {
@@ -33,10 +33,10 @@ export interface DataViewModuleConfig {
 }
 
 /**
- * Type guard to check if store is a factory function
+ * Type guard to check if savedViewStore is a factory function
  */
 export function isStoreFactory(
-  store: SavedViewStore | SavedViewStoreFactory,
-): store is SavedViewStoreFactory {
-  return typeof store === "function";
+  savedViewStore: SavedViewStore | SavedViewStoreFactory,
+): savedViewStore is SavedViewStoreFactory {
+  return typeof savedViewStore === "function";
 }

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 };