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

package/package.json

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

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

@@ -1,9 +1,28 @@
-import { defineModule, defineResource } from "@tailor-platform/app-shell";
-import { Database } from "lucide-react";
+import {
+  defineModule,
+  defineResource,
+  useNavigate,
+  useSearchParams,
+  Link,
+} from "@tailor-platform/app-shell";
+import {
+  Database,
+  Trash2,
+  Calendar,
+  Filter,
+  Columns,
+  LayoutGrid,
+} from "lucide-react";
 import type { DataViewModuleConfig } from "./types";
 import { isStoreFactory } from "./types";
 import { DataViewer } from "../component/data-viewer";
-import { SavedViewProvider } from "../component/saved-view-context";
+import {
+  SavedViewProvider,
+  useSavedViews,
+} from "../component/saved-view-context";
+import { Card, CardContent, CardHeader, CardTitle } from "../component/ui/card";
+import { Button } from "../component/ui/button";
+import { Badge } from "../component/ui/badge";
 
 /**
  * Create a DataView module for use with AppShell
@@ -42,22 +61,130 @@ export function createDataViewModule(config: DataViewModuleConfig) {
 
   // Create the explorer resource page component
   const ExplorerPage = () => {
+    const [searchParams] = useSearchParams();
+    const viewId = searchParams.get("viewId") ?? undefined;
+
     return (
       <SavedViewProvider store={store}>
-        <DataViewer tableMetadata={tableMetadata} appUri={appUri} />
+        <DataViewer
+          tableMetadata={tableMetadata}
+          appUri={appUri}
+          initialViewId={viewId}
+        />
       </SavedViewProvider>
     );
   };
 
+  // Saved views list component (used inside ModulePage)
+  const SavedViewsList = ({
+    explorerFullPath,
+  }: {
+    explorerFullPath: string;
+  }) => {
+    const { views, deleteView } = useSavedViews();
+    const navigate = useNavigate();
+
+    const handleOpenView = (viewId: string) => {
+      navigate(`${explorerFullPath}?viewId=${viewId}`);
+    };
+
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <LayoutGrid className="size-5" />
+            保存済みビュー
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {views.length === 0 ? (
+            <div className="py-8 text-center">
+              <div className="text-muted-foreground mb-4">
+                保存されたビューはありません
+              </div>
+              <Link to={explorerFullPath}>
+                <Button variant="outline">
+                  <Database className="mr-2 size-4" />
+                  Data View Explorer を開く
+                </Button>
+              </Link>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {views.map((savedView) => (
+                <div
+                  key={savedView.id}
+                  className="hover:bg-muted flex cursor-pointer items-center justify-between rounded-lg border p-4 transition-colors"
+                  onClick={() => handleOpenView(savedView.id)}
+                >
+                  <div className="flex-1">
+                    <div className="flex items-center gap-2">
+                      <span className="font-medium">{savedView.name}</span>
+                      <Badge variant="secondary">{savedView.tableName}</Badge>
+                    </div>
+                    <div className="text-muted-foreground mt-1 flex items-center gap-4 text-sm">
+                      <span className="flex items-center gap-1">
+                        <Filter className="size-3" />
+                        {savedView.filters.length} フィルター
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <Columns className="size-3" />
+                        {savedView.selectedFields.length} カラム
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <Calendar className="size-3" />
+                        {savedView.createdAt.toLocaleString()}
+                      </span>
+                    </div>
+                    {savedView.filters.length > 0 && (
+                      <div className="mt-2 flex flex-wrap gap-1">
+                        {savedView.filters.map((filter) => (
+                          <Badge
+                            key={filter.field}
+                            variant="outline"
+                            className="text-xs"
+                          >
+                            {filter.field}=
+                            {typeof filter.value === "boolean"
+                              ? filter.value
+                                ? "true"
+                                : "false"
+                              : filter.value}
+                          </Badge>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-destructive hover:text-destructive"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      deleteView(savedView.id);
+                    }}
+                  >
+                    <Trash2 className="size-4" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    );
+  };
+
   // Create the module page component
+  const explorerFullPath = `/${basePath}/${explorerPath}`;
+
   const ModulePage = () => {
     return (
-      <div className="space-y-4">
-        <h1 className="text-2xl font-bold">{title}</h1>
-        <p className="text-muted-foreground">
-          データビューでテーブルを探索できます。
-        </p>
-      </div>
+      <SavedViewProvider store={store}>
+        <div className="space-y-6">
+          <SavedViewsList explorerFullPath={explorerFullPath} />
+        </div>
+      </SavedViewProvider>
     );
   };
 

package/src/component/hooks/use-table-access-check.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { GraphQLClient } from "graphql-request";
 import type { TableMetadata } from "../../generator/metadata-generator";
 
@@ -23,6 +23,11 @@ export function useTableAccessCheck(
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
+  // Memoize tables to prevent infinite loops
+  // when the parent component passes a new array reference on each render
+  const tableKey = tables.map((t) => t.name).join(",");
+  const stableTables = useMemo(() => tables, [tableKey]);
+
   useEffect(() => {
     let cancelled = false;
 
@@ -39,7 +44,7 @@ export function useTableAccessCheck(
       });
 
       const results = await Promise.allSettled(
-        tables.map(async (table) => {
+        stableTables.map(async (table) => {
           // Execute a lightweight aggregate query to check access
           const query = `query CheckAccess { ${table.pluralForm}(query: {}) { total } }`;
           await client.request(query);
@@ -73,7 +78,7 @@ export function useTableAccessCheck(
     return () => {
       cancelled = true;
     };
-  }, [tables, appUri]);
+  }, [stableTables, appUri]);
 
   return { accessibleTables, isLoading, error };
 }