@izumisy-tailor/tailor-data-viewer 0.1.4 → 0.1.6

package/src/component/view-save-load.tsx

@@ -1,7 +1,7 @@
 import { useState, useCallback } from "react";
 import { Save, Filter, Columns } from "lucide-react";
-import { Button } from "../ui/button";
-import { Input } from "../ui/input";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
 import {
   Dialog,
   DialogContent,
@@ -10,8 +10,8 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "../ui/dialog";
-import type { ExpandedRelationFields } from "../types/table-metadata";
+} from "./ui/dialog";
+import type { ExpandedRelationFields } from "../generator/metadata-generator";
 import { useSavedViews, type SaveViewInput } from "./saved-view-context";
 import type { SearchFilters } from "./types";
 

package/src/generator/metadata-generator.ts

@@ -68,6 +68,13 @@ export interface TableMetadata {
  */
 export type TableMetadataMap = Record<string, TableMetadata>;
 
+/**
+ * Expanded relation fields configuration
+ * Key: relation field name (e.g., "task")
+ * Value: array of selected field names from the related table (e.g., ["name", "status"])
+ */
+export type ExpandedRelationFields = Record<string, string[]>;
+
 /**
  * Intermediate type for processed table data
  */

package/src/graphql/index.ts

@@ -0,0 +1,6 @@
+/**
+ * GraphQL utilities and client
+ */
+
+export * from "./graphql-client";
+export * from "./query-builder";

package/src/graphql/query-builder.test.ts

@@ -0,0 +1,238 @@
+import { describe, it, expect } from "vitest";
+import {
+  buildListQuery,
+  getDefaultSelectedFields,
+  getSelectableFields,
+  formatFieldValue,
+} from "./query-builder";
+import type {
+  FieldMetadata,
+  TableMetadata,
+  RelationMetadata,
+} from "../generator/metadata-generator";
+
+describe("query-builder", () => {
+  describe("buildListQuery", () => {
+    it("should build a basic list query", () => {
+      const query = buildListQuery({
+        tableName: "task",
+        pluralForm: "tasks",
+        selectedFields: ["name", "status", "createdAt"],
+      });
+
+      // gql-query-builder outputs with spaces, so we use regex patterns
+      expect(query).toMatch(/query\s+TaskList\s*\(\$query:\s*TaskQueryInput\)/);
+      expect(query).toContain("tasks(query: $query)");
+      expect(query).toContain("name");
+      expect(query).toContain("status");
+      expect(query).toContain("createdAt");
+      expect(query).toContain("pageInfo");
+      expect(query).toContain("hasNextPage");
+      expect(query).toContain("endCursor");
+    });
+
+    it("should include orderBy when specified", () => {
+      const query = buildListQuery({
+        tableName: "task",
+        pluralForm: "tasks",
+        selectedFields: ["name"],
+        orderBy: { field: "createdAt", direction: "Desc" },
+      });
+
+      // Variable should include order with array type
+      expect(query).toMatch(/\$order:\s*\[TaskOrderInput!\]/);
+      // Operation should use variable reference
+      expect(query).toContain("order: $order");
+    });
+
+    it("should include pagination arguments", () => {
+      const query = buildListQuery({
+        tableName: "task",
+        pluralForm: "tasks",
+        selectedFields: ["name"],
+        first: 10,
+        after: "cursor123",
+      });
+
+      // Variables should include first and after
+      expect(query).toMatch(/\$first:\s*Int/);
+      expect(query).toMatch(/\$after:\s*String/);
+      // Operation should use variable references
+      expect(query).toContain("first: $first");
+      expect(query).toContain("after: $after");
+    });
+
+    it("should include oneToMany relation totals", () => {
+      const relation: RelationMetadata = {
+        fieldName: "taskAssignments",
+        targetTable: "taskAssignment",
+        relationType: "oneToMany",
+        foreignKeyField: "taskId",
+      };
+
+      const query = buildListQuery({
+        tableName: "task",
+        pluralForm: "tasks",
+        selectedFields: ["name"],
+        oneToManyRelationTotals: [
+          { relation, targetPluralForm: "taskAssignments" },
+        ],
+      });
+
+      expect(query).toContain("taskAssignments(first: 0)");
+      expect(query).toContain("total");
+    });
+
+    it("should include expanded manyToOne relations", () => {
+      const relation: RelationMetadata = {
+        fieldName: "user",
+        targetTable: "user",
+        relationType: "manyToOne",
+        foreignKeyField: "userId",
+      };
+
+      const query = buildListQuery({
+        tableName: "task",
+        pluralForm: "tasks",
+        selectedFields: ["name"],
+        expandedManyToOneRelations: [
+          { relation, selectedFields: ["email", "displayName"] },
+        ],
+      });
+
+      expect(query).toContain("user {");
+      expect(query).toContain("email");
+      expect(query).toContain("displayName");
+    });
+
+    it("should handle PascalCase conversion for table names", () => {
+      const query = buildListQuery({
+        tableName: "taskAssignment",
+        pluralForm: "taskAssignments",
+        selectedFields: ["id"],
+      });
+
+      expect(query).toMatch(
+        /query\s+TaskAssignmentList\s*\(\$query:\s*TaskAssignmentQueryInput\)/,
+      );
+    });
+  });
+
+  describe("getDefaultSelectedFields", () => {
+    it("should exclude nested and array fields", () => {
+      const table: TableMetadata = {
+        name: "task",
+        pluralForm: "tasks",
+        readAllowedRoles: ["admin"],
+        fields: [
+          { name: "name", type: "string", required: true },
+          { name: "metadata", type: "nested", required: false },
+          { name: "tags", type: "array", required: false },
+        ],
+      };
+
+      const fields = getDefaultSelectedFields(table);
+      expect(fields).toEqual(["name"]);
+    });
+
+    it("should exclude id fields", () => {
+      const table: TableMetadata = {
+        name: "task",
+        pluralForm: "tasks",
+        readAllowedRoles: ["admin"],
+        fields: [
+          { name: "id", type: "uuid", required: true },
+          { name: "name", type: "string", required: true },
+          { name: "userId", type: "uuid", required: false },
+          { name: "status", type: "string", required: true },
+        ],
+      };
+
+      const fields = getDefaultSelectedFields(table);
+      expect(fields).toEqual(["name", "status"]);
+    });
+  });
+
+  describe("getSelectableFields", () => {
+    it("should return all fields except nested types", () => {
+      const table: TableMetadata = {
+        name: "task",
+        pluralForm: "tasks",
+        readAllowedRoles: ["admin"],
+        fields: [
+          { name: "id", type: "uuid", required: true },
+          { name: "name", type: "string", required: true },
+          { name: "metadata", type: "nested", required: false },
+          { name: "count", type: "number", required: false },
+        ],
+      };
+
+      const fields = getSelectableFields(table);
+      expect(fields.map((f) => f.name)).toEqual(["id", "name", "count"]);
+    });
+  });
+
+  describe("formatFieldValue", () => {
+    it("should return '-' for null or undefined", () => {
+      const field: FieldMetadata = {
+        name: "test",
+        type: "string",
+        required: false,
+      };
+      expect(formatFieldValue(null, field)).toBe("-");
+      expect(formatFieldValue(undefined, field)).toBe("-");
+    });
+
+    it("should format boolean as Japanese text", () => {
+      const field: FieldMetadata = {
+        name: "active",
+        type: "boolean",
+        required: false,
+      };
+      expect(formatFieldValue(true, field)).toBe("はい");
+      expect(formatFieldValue(false, field)).toBe("いいえ");
+    });
+
+    it("should format number with locale", () => {
+      const field: FieldMetadata = {
+        name: "count",
+        type: "number",
+        required: false,
+      };
+      expect(formatFieldValue(1234567, field)).toBe("1,234,567");
+    });
+
+    it("should truncate UUID", () => {
+      const field: FieldMetadata = { name: "id", type: "uuid", required: true };
+      const uuid = "550e8400-e29b-41d4-a716-446655440000";
+      expect(formatFieldValue(uuid, field)).toBe("550e8400...");
+    });
+
+    it("should format array values", () => {
+      const field: FieldMetadata = {
+        name: "tags",
+        type: "array",
+        required: false,
+      };
+      expect(formatFieldValue(["a", "b", "c"], field)).toBe("a, b, c");
+    });
+
+    it("should format time as string", () => {
+      const field: FieldMetadata = {
+        name: "startTime",
+        type: "time",
+        required: false,
+      };
+      expect(formatFieldValue("14:30:00", field)).toBe("14:30:00");
+    });
+
+    it("should return string as-is for string type", () => {
+      const field: FieldMetadata = {
+        name: "name",
+        type: "string",
+        required: true,
+      };
+      expect(formatFieldValue("Hello World", field)).toBe("Hello World");
+    });
+  });
+});

package/src/{utils → graphql}/query-builder.ts

@@ -1,8 +1,9 @@
+import { QueryBuilder } from "raku-ql";
 import type {
   TableMetadata,
   FieldMetadata,
   RelationMetadata,
-} from "../types/table-metadata";
+} from "../generator/metadata-generator";
 
 /**
  * Convert camelCase to PascalCase
@@ -65,63 +66,70 @@ export function buildListQuery(options: QueryOptions): string {
   // GraphQL type names need PascalCase
   const typeName = toPascalCase(tableName);
 
-  // Build order clause if specified
-  const orderArg = orderBy
-    ? `, order: [{ field: ${typeName}OrderFields.${orderBy.field}, direction: OrderDirection.${orderBy.direction} }]`
-    : "";
-
-  // Build pagination arguments
-  const firstArg = first !== undefined ? `, first: ${first}` : "";
-  const afterArg = after !== undefined ? `, after: "${after}"` : "";
-
-  // Build oneToMany relation total fields (fetching only total for display before expansion)
-  // These are nested connection queries that get total count for each parent record
-  const relationTotalFields =
-    oneToManyRelationTotals
-      ?.map((info) => {
-        return `${info.relation.fieldName}(first: 0) {
-              total
-            }`;
-      })
-      .join("\n            ") ?? "";
-
-  // Build expanded manyToOne relation fields (inline object fetching)
-  const expandedRelationFields =
-    expandedManyToOneRelations
-      ?.filter((info) => info.selectedFields.length > 0)
-      .map((info) => {
-        const nestedFields = info.selectedFields.join("\n              ");
-        return `${info.relation.fieldName} {
-              ${nestedFields}
-            }`;
-      })
-      .join("\n            ") ?? "";
-
-  // Format fields with proper indentation
-  const fieldsStr = selectedFields.join("\n            ");
-  let allFieldsStr = fieldsStr;
-  if (relationTotalFields) {
-    allFieldsStr = `${allFieldsStr}\n            ${relationTotalFields}`;
+  // Build variables definition
+  const variables: Record<string, string> = {
+    query: `${typeName}QueryInput`,
+  };
+
+  // Build operation arguments using variable references
+  const operationArgs: Record<string, string> = {
+    query: "$query",
+  };
+
+  if (orderBy) {
+    // Use a single order variable with the full array type
+    variables.order = `[${typeName}OrderInput!]`;
+    operationArgs.order = "$order";
   }
-  if (expandedRelationFields) {
-    allFieldsStr = `${allFieldsStr}\n            ${expandedRelationFields}`;
+
+  if (first !== undefined) {
+    variables.first = "Int";
+    operationArgs.first = "$first";
+  }
+
+  if (after !== undefined) {
+    variables.after = "String";
+    operationArgs.after = "$after";
   }
 
-  return `
-    query ${typeName}List($query: ${typeName}QueryInput) {
-      ${pluralForm}(query: $query${orderArg}${firstArg}${afterArg}) {
-        edges {
-          node {
-            ${allFieldsStr}
+  // Build the query using raku-ql
+  const builder = QueryBuilder.query(`${typeName}List`).variables(variables);
+
+  // Use operation method for root-level query with arguments
+  builder.operation(pluralForm, operationArgs, (op) => {
+    op.object("edges", (edges) => {
+      edges.object("node", (node) => {
+        // Add selected fields
+        node.fields(...(selectedFields as []));
+
+        // Add oneToMany relation totals with arguments
+        if (oneToManyRelationTotals) {
+          for (const info of oneToManyRelationTotals) {
+            node.object(info.relation.fieldName, { first: 0 }, (rel) => {
+              rel.fields("total");
+            });
           }
         }
-        pageInfo {
-          hasNextPage
-          endCursor
+
+        // Add expanded manyToOne relations
+        if (expandedManyToOneRelations) {
+          for (const info of expandedManyToOneRelations) {
+            if (info.selectedFields.length > 0) {
+              node.object(info.relation.fieldName, (rel) => {
+                rel.fields(...(info.selectedFields as []));
+              });
+            }
+          }
         }
-      }
-    }
-  `.trim();
+      });
+    });
+
+    op.object("pageInfo", (pageInfo) => {
+      pageInfo.fields("hasNextPage", "endCursor");
+    });
+  });
+
+  return builder.build();
 }
 
 /**

package/src/store/indexeddb.ts

@@ -0,0 +1,150 @@
+import { openDB, type DBSchema, type IDBPDatabase } from "idb";
+import type { SavedView, SavedViewInput, SavedViewStore } from "./types";
+
+const DEFAULT_DB_NAME = "data-viewer";
+const DEFAULT_STORE_NAME = "savedViews";
+
+/**
+ * Stored view format in IndexedDB (dates as ISO strings)
+ */
+interface StoredView extends Omit<SavedView, "createdAt" | "updatedAt"> {
+  createdAt: string;
+  updatedAt: string;
+}
+
+/**
+ * IndexedDB schema definition for type safety
+ */
+interface DataViewerDBSchema extends DBSchema {
+  savedViews: {
+    key: string;
+    value: StoredView;
+    indexes: { tableName: string };
+  };
+}
+
+/**
+ * Configuration for IndexedDB store
+ */
+export interface IndexedDBStoreConfig {
+  /** Database name (default: "data-viewer") */
+  dbName?: string;
+  /** Object store name (default: "savedViews") - Note: changing this requires schema migration */
+  storeName?: string;
+}
+
+function generateId(): string {
+  return `view-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+}
+
+function serializeView(view: SavedView): StoredView {
+  return {
+    ...view,
+    createdAt: view.createdAt.toISOString(),
+    updatedAt: view.updatedAt.toISOString(),
+  };
+}
+
+function deserializeView(stored: StoredView): SavedView {
+  return {
+    ...stored,
+    createdAt: new Date(stored.createdAt),
+    updatedAt: new Date(stored.updatedAt),
+  };
+}
+
+/**
+ * Create an IndexedDB-based saved view store
+ * Stores views locally in the browser using the `idb` library
+ */
+export function createIndexedDBStore(
+  config?: IndexedDBStoreConfig,
+): SavedViewStore {
+  const dbName = config?.dbName ?? DEFAULT_DB_NAME;
+  const storeName = config?.storeName ?? DEFAULT_STORE_NAME;
+
+  let dbInstance: IDBPDatabase<DataViewerDBSchema> | null = null;
+
+  async function getDB(): Promise<IDBPDatabase<DataViewerDBSchema>> {
+    if (dbInstance) return dbInstance;
+
+    dbInstance = await openDB<DataViewerDBSchema>(dbName, 1, {
+      upgrade(db) {
+        if (!db.objectStoreNames.contains(storeName as "savedViews")) {
+          const store = db.createObjectStore(storeName as "savedViews", {
+            keyPath: "id",
+          });
+          store.createIndex("tableName", "tableName");
+        }
+      },
+    });
+
+    return dbInstance;
+  }
+
+  return {
+    async listViews(): Promise<SavedView[]> {
+      const db = await getDB();
+      const stored = await db.getAll(storeName as "savedViews");
+      const views = stored.map(deserializeView);
+      // Sort by updatedAt descending (newest first)
+      return views.sort(
+        (a, b) => b.updatedAt.getTime() - a.updatedAt.getTime(),
+      );
+    },
+
+    async saveView(input: SavedViewInput): Promise<SavedView> {
+      const db = await getDB();
+      const now = new Date();
+
+      let view: SavedView;
+
+      if (input.id) {
+        // Update existing
+        const existing = await this.getView(input.id);
+        if (!existing) {
+          throw new Error(`View not found: ${input.id}`);
+        }
+        view = {
+          ...existing,
+          name: input.name,
+          tableName: input.tableName,
+          columns: input.columns,
+          filters: input.filters,
+          sortOrder: input.sortOrder,
+          selectedRelations: input.selectedRelations,
+          expandedRelationFields: input.expandedRelationFields,
+          updatedAt: now,
+        };
+      } else {
+        // Create new
+        view = {
+          id: generateId(),
+          name: input.name,
+          tableName: input.tableName,
+          columns: input.columns,
+          filters: input.filters,
+          sortOrder: input.sortOrder,
+          selectedRelations: input.selectedRelations,
+          expandedRelationFields: input.expandedRelationFields,
+          createdAt: now,
+          updatedAt: now,
+        };
+      }
+
+      await db.put(storeName as "savedViews", serializeView(view));
+      return view;
+    },
+
+    async deleteView(viewId: string): Promise<void> {
+      const db = await getDB();
+      await db.delete(storeName as "savedViews", viewId);
+    },
+
+    async getView(viewId: string): Promise<SavedView | null> {
+      const db = await getDB();
+      const stored = await db.get(storeName as "savedViews", viewId);
+      return stored ? deserializeView(stored) : null;
+    },
+  };
+}