@izumisy-tailor/tailor-data-viewer 0.1.0

package/src/component/saved-view-context.tsx

@@ -0,0 +1,145 @@
+import {
+  createContext,
+  use,
+  useState,
+  useCallback,
+  type ReactNode,
+} from "react";
+import type { ExpandedRelationFields } from "../types/table-metadata";
+import type { SearchFilters } from "./types";
+
+/**
+ * Saved view configuration
+ */
+export interface SavedView {
+  /** Unique identifier */
+  id: string;
+  /** User-defined name for the view */
+  name: string;
+  /** Table name this view applies to */
+  tableName: string;
+  /** The filter conditions */
+  filters: SearchFilters;
+  /** Selected field names */
+  selectedFields: string[];
+  /** Selected relation field names */
+  selectedRelations: string[];
+  /** Expanded relation fields (manyToOne fields shown as inline columns) */
+  expandedRelationFields: ExpandedRelationFields;
+  /** When this view was created */
+  createdAt: Date;
+}
+
+export interface SaveViewInput {
+  name: string;
+  tableName: string;
+  filters: SearchFilters;
+  selectedFields: string[];
+  selectedRelations: string[];
+  expandedRelationFields: ExpandedRelationFields;
+}
+
+interface SavedViewContextValue {
+  views: SavedView[];
+  saveView: (input: SaveViewInput) => SavedView;
+  deleteView: (id: string) => boolean;
+  renameView: (id: string, newName: string) => boolean;
+  getViewById: (id: string) => SavedView | undefined;
+  getViewsByTable: (tableName: string) => SavedView[];
+}
+
+const SavedViewContext = createContext<SavedViewContextValue | null>(null);
+
+let idCounter = 0;
+function generateId(): string {
+  return `saved-view-${++idCounter}`;
+}
+
+interface SavedViewProviderProps {
+  children: ReactNode;
+}
+
+export function SavedViewProvider({ children }: SavedViewProviderProps) {
+  const [views, setViews] = useState<SavedView[]>([]);
+
+  const saveView = useCallback((input: SaveViewInput): SavedView => {
+    const newView: SavedView = {
+      id: generateId(),
+      name: input.name,
+      tableName: input.tableName,
+      filters: [...input.filters],
+      selectedFields: [...input.selectedFields],
+      selectedRelations: [...input.selectedRelations],
+      expandedRelationFields: { ...input.expandedRelationFields },
+      createdAt: new Date(),
+    };
+    setViews((prev) => [newView, ...prev]);
+    return newView;
+  }, []);
+
+  const deleteView = useCallback((id: string): boolean => {
+    let deleted = false;
+    setViews((prev) => {
+      const newViews = prev.filter((v) => {
+        if (v.id === id) {
+          deleted = true;
+          return false;
+        }
+        return true;
+      });
+      return newViews;
+    });
+    return deleted;
+  }, []);
+
+  const renameView = useCallback((id: string, newName: string): boolean => {
+    let renamed = false;
+    setViews((prev) =>
+      prev.map((v) => {
+        if (v.id === id) {
+          renamed = true;
+          return { ...v, name: newName };
+        }
+        return v;
+      }),
+    );
+    return renamed;
+  }, []);
+
+  const getViewById = useCallback(
+    (id: string): SavedView | undefined => {
+      return views.find((v) => v.id === id);
+    },
+    [views],
+  );
+
+  const getViewsByTable = useCallback(
+    (tableName: string): SavedView[] => {
+      return views.filter((v) => v.tableName === tableName);
+    },
+    [views],
+  );
+
+  return (
+    <SavedViewContext
+      value={{
+        views,
+        saveView,
+        deleteView,
+        renameView,
+        getViewById,
+        getViewsByTable,
+      }}
+    >
+      {children}
+    </SavedViewContext>
+  );
+}
+
+export function useSavedViews(): SavedViewContextValue {
+  const context = use(SavedViewContext);
+  if (!context) {
+    throw new Error("useSavedViews must be used within a SavedViewProvider");
+  }
+  return context;
+}

package/src/component/search-filter.tsx

@@ -0,0 +1,319 @@
+import { useState, useCallback } from "react";
+import {
+  Search,
+  Plus,
+  X,
+  Filter,
+  ChevronDown,
+  ChevronRight,
+} from "lucide-react";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Checkbox } from "../ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../ui/collapsible";
+import { Badge } from "../ui/badge";
+import { Label } from "../ui/label";
+import type { FieldMetadata } from "../types/table-metadata";
+import type { SearchFilter, SearchFilters } from "./types";
+
+interface SearchFilterProps {
+  fields: FieldMetadata[];
+  filters: SearchFilters;
+  onFiltersChange: (filters: SearchFilters) => void;
+}
+
+// Filterable field types
+const FILTERABLE_TYPES = [
+  "string",
+  "number",
+  "boolean",
+  "enum",
+  "uuid",
+] as const;
+
+/**
+ * Check if a field is filterable
+ */
+function isFilterableField(field: FieldMetadata): boolean {
+  return (FILTERABLE_TYPES as readonly string[]).includes(field.type);
+}
+
+/**
+ * Search filter form component
+ * Allows adding multiple AND filters for string/number/boolean/enum fields
+ */
+export function SearchFilterForm({
+  fields,
+  filters,
+  onFiltersChange,
+}: SearchFilterProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedField, setSelectedField] = useState<string>("");
+  const [inputValue, setInputValue] = useState<string>("");
+  const [booleanValue, setBooleanValue] = useState<boolean>(false);
+
+  // Get filterable fields excluding already-filtered fields
+  const filterableFields = fields.filter(
+    (f) =>
+      isFilterableField(f) &&
+      !filters.some((filter) => filter.field === f.name),
+  );
+
+  const selectedFieldMetadata = fields.find((f) => f.name === selectedField);
+
+  const handleAddFilter = useCallback(() => {
+    if (!selectedFieldMetadata) return;
+
+    const value =
+      selectedFieldMetadata.type === "boolean" ? booleanValue : inputValue;
+
+    if (selectedFieldMetadata.type !== "boolean" && !inputValue.trim()) return;
+
+    const newFilter: SearchFilter = {
+      field: selectedField,
+      fieldType: selectedFieldMetadata.type,
+      value,
+      enumValues: selectedFieldMetadata.enumValues,
+    };
+
+    onFiltersChange([...filters, newFilter]);
+    setSelectedField("");
+    setInputValue("");
+    setBooleanValue(false);
+  }, [
+    selectedField,
+    selectedFieldMetadata,
+    inputValue,
+    booleanValue,
+    filters,
+    onFiltersChange,
+  ]);
+
+  const handleRemoveFilter = useCallback(
+    (fieldName: string) => {
+      onFiltersChange(filters.filter((f) => f.field !== fieldName));
+    },
+    [filters, onFiltersChange],
+  );
+
+  const handleClearAll = useCallback(() => {
+    onFiltersChange([]);
+  }, [onFiltersChange]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleAddFilter();
+      }
+    },
+    [handleAddFilter],
+  );
+
+  // Render input based on field type
+  const renderFilterInput = () => {
+    if (!selectedFieldMetadata) return null;
+
+    switch (selectedFieldMetadata.type) {
+      case "boolean":
+        return (
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id="boolean-filter-value"
+              checked={booleanValue}
+              onCheckedChange={(checked) => setBooleanValue(checked === true)}
+            />
+            <Label htmlFor="boolean-filter-value">
+              {booleanValue ? "true" : "false"}
+            </Label>
+          </div>
+        );
+
+      case "enum":
+        return (
+          <Select value={inputValue} onValueChange={setInputValue}>
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="値を選択" />
+            </SelectTrigger>
+            <SelectContent>
+              {selectedFieldMetadata.enumValues?.map((enumValue) => (
+                <SelectItem key={enumValue} value={enumValue}>
+                  {enumValue}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        );
+
+      case "number":
+        return (
+          <Input
+            type="number"
+            placeholder="値を入力"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+          />
+        );
+
+      default:
+        // string, uuid
+        return (
+          <Input
+            type="text"
+            placeholder="値を入力"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+          />
+        );
+    }
+  };
+
+  const activeFilterCount = filters.length;
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={setIsOpen} className="relative">
+      <CollapsibleTrigger asChild>
+        <Button variant="outline" size="sm" className="gap-1">
+          {isOpen ? (
+            <ChevronDown className="size-4" />
+          ) : (
+            <ChevronRight className="size-4" />
+          )}
+          <Search className="size-4" />
+          検索
+          {activeFilterCount > 0 && (
+            <Badge variant="secondary" className="ml-1 px-1.5 py-0 text-xs">
+              {activeFilterCount}
+            </Badge>
+          )}
+        </Button>
+      </CollapsibleTrigger>
+
+      <CollapsibleContent className="absolute top-full left-0 z-10 mt-2">
+        <div className="bg-background w-96 rounded-md border p-4 shadow-md">
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2 text-sm font-medium">
+                <Filter className="size-4" />
+                検索フィルター
+              </div>
+              {activeFilterCount > 0 && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-auto p-1 text-xs"
+                  onClick={handleClearAll}
+                >
+                  すべてクリア
+                </Button>
+              )}
+            </div>
+
+            {/* Active filters */}
+            {filters.length > 0 && (
+              <div className="space-y-2">
+                <div className="text-muted-foreground text-xs">
+                  適用中のフィルター (AND)
+                </div>
+                <div className="flex flex-wrap gap-1">
+                  {filters.map((filter) => (
+                    <Badge
+                      key={filter.field}
+                      variant="secondary"
+                      className="flex items-center gap-1 pr-1"
+                    >
+                      <span>
+                        {filter.field}=
+                        {typeof filter.value === "boolean"
+                          ? filter.value
+                            ? "true"
+                            : "false"
+                          : filter.value}
+                      </span>
+                      <button
+                        className="text-muted-foreground hover:text-foreground ml-1"
+                        onClick={() => handleRemoveFilter(filter.field)}
+                      >
+                        <X className="size-3" />
+                      </button>
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Add new filter */}
+            {filterableFields.length > 0 && (
+              <div className="space-y-3">
+                <div className="text-muted-foreground text-xs">
+                  フィルターを追加
+                </div>
+
+                {/* Field selector */}
+                <Select value={selectedField} onValueChange={setSelectedField}>
+                  <SelectTrigger className="w-full">
+                    <SelectValue placeholder="フィールドを選択" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {filterableFields.map((field) => (
+                      <SelectItem key={field.name} value={field.name}>
+                        {field.name}{" "}
+                        <span className="text-muted-foreground">
+                          ({field.type})
+                        </span>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+
+                {/* Value input - changes based on field type */}
+                {selectedField && (
+                  <div className="space-y-2">
+                    {renderFilterInput()}
+                    <Button
+                      size="sm"
+                      onClick={handleAddFilter}
+                      disabled={
+                        selectedFieldMetadata?.type !== "boolean" &&
+                        !inputValue.trim()
+                      }
+                      className="w-full"
+                    >
+                      <Plus className="mr-1 size-3" />
+                      追加
+                    </Button>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {filterableFields.length === 0 && filters.length === 0 && (
+              <div className="text-muted-foreground py-2 text-center text-sm">
+                フィルター可能なフィールドがありません
+              </div>
+            )}
+
+            {filterableFields.length === 0 && filters.length > 0 && (
+              <div className="text-muted-foreground py-2 text-center text-sm">
+                すべてのフィールドにフィルターが適用されています
+              </div>
+            )}
+          </div>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}