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

package/src/component/search-filter.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback } from "react";
+import { useState, useCallback, useEffect } from "react";
 import { Search, Plus, X, Filter } from "lucide-react";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
@@ -18,17 +18,10 @@ import {
 import { Badge } from "./ui/badge";
 import { Label } from "./ui/label";
 import type { FieldMetadata } from "../generator/metadata-generator";
-import type { SearchFilter, SearchFilters } from "./types";
-
-interface SearchFilterProps {
-  fields: FieldMetadata[];
-  filters: SearchFilters;
-  onFiltersChange: (filters: SearchFilters) => void;
-  /** Controlled open state */
-  open?: boolean;
-  /** Callback when open state changes */
-  onOpenChange?: (open: boolean) => void;
-}
+import type { SearchFilter, FilterOperator } from "./types";
+import { OPERATOR_LABELS, OPERATORS_BY_FIELD_TYPE } from "./types";
+import { useDataViewer } from "./contexts";
+import { useToolbar } from "./contexts";
 
 // Filterable field types
 const FILTERABLE_TYPES = [
@@ -37,6 +30,8 @@ const FILTERABLE_TYPES = [
   "boolean",
   "enum",
   "uuid",
+  "datetime",
+  "date",
 ] as const;
 
 /**
@@ -49,15 +44,20 @@ function isFilterableField(field: FieldMetadata): boolean {
 /**
  * Search filter form component
  * Allows adding multiple AND filters for string/number/boolean/enum fields
+ * Must be used within DataViewer.Root and DataViewer.Toolbar context
  */
-export function SearchFilterForm({
-  fields,
-  filters,
-  onFiltersChange,
-  open,
-  onOpenChange,
-}: SearchFilterProps) {
+export function SearchFilterForm() {
+  const { tableMetadata, filters, setFilters } = useDataViewer();
+  const { activePanel, setActivePanel } = useToolbar();
+
+  const fields = tableMetadata?.fields ?? [];
+  const open = activePanel === "search";
+  const onOpenChange = (isOpen: boolean) =>
+    setActivePanel(isOpen ? "search" : null);
+
   const [selectedField, setSelectedField] = useState<string>("");
+  const [selectedOperator, setSelectedOperator] =
+    useState<FilterOperator>("eq");
   const [inputValue, setInputValue] = useState<string>("");
   const [booleanValue, setBooleanValue] = useState<boolean>(false);
 
@@ -70,6 +70,21 @@ export function SearchFilterForm({
 
   const selectedFieldMetadata = fields.find((f) => f.name === selectedField);
 
+  // Get available operators for the selected field type
+  const availableOperators = selectedFieldMetadata
+    ? OPERATORS_BY_FIELD_TYPE[selectedFieldMetadata.type]
+    : [];
+
+  // Reset operator when field changes
+  useEffect(() => {
+    if (selectedFieldMetadata) {
+      const operators = OPERATORS_BY_FIELD_TYPE[selectedFieldMetadata.type];
+      if (operators.length > 0 && !operators.includes(selectedOperator)) {
+        setSelectedOperator(operators[0]);
+      }
+    }
+  }, [selectedField, selectedFieldMetadata, selectedOperator]);
+
   const handleAddFilter = useCallback(() => {
     if (!selectedFieldMetadata) return;
 
@@ -81,33 +96,36 @@ export function SearchFilterForm({
     const newFilter: SearchFilter = {
       field: selectedField,
       fieldType: selectedFieldMetadata.type,
+      operator: selectedOperator,
       value,
       enumValues: selectedFieldMetadata.enumValues,
     };
 
-    onFiltersChange([...filters, newFilter]);
+    setFilters([...filters, newFilter]);
     setSelectedField("");
+    setSelectedOperator("eq");
     setInputValue("");
     setBooleanValue(false);
   }, [
     selectedField,
     selectedFieldMetadata,
+    selectedOperator,
     inputValue,
     booleanValue,
     filters,
-    onFiltersChange,
+    setFilters,
   ]);
 
   const handleRemoveFilter = useCallback(
     (fieldName: string) => {
-      onFiltersChange(filters.filter((f) => f.field !== fieldName));
+      setFilters(filters.filter((f) => f.field !== fieldName));
     },
-    [filters, onFiltersChange],
+    [filters, setFilters],
   );
 
   const handleClearAll = useCallback(() => {
-    onFiltersChange([]);
-  }, [onFiltersChange]);
+    setFilters([]);
+  }, [setFilters]);
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
@@ -165,6 +183,28 @@ export function SearchFilterForm({
           />
         );
 
+      case "datetime":
+        return (
+          <Input
+            type="datetime-local"
+            placeholder="日時を選択"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+          />
+        );
+
+      case "date":
+        return (
+          <Input
+            type="date"
+            placeholder="日付を選択"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+          />
+        );
+
       default:
         // string, uuid
         return (
@@ -179,6 +219,105 @@ export function SearchFilterForm({
     }
   };
 
+  // Render operator selector
+  const renderOperatorSelector = () => {
+    if (!selectedFieldMetadata || availableOperators.length <= 1) return null;
+
+    return (
+      <Select
+        value={selectedOperator}
+        onValueChange={(value) => setSelectedOperator(value as FilterOperator)}
+      >
+        <SelectTrigger className="w-full">
+          <SelectValue placeholder="条件を選択" />
+        </SelectTrigger>
+        <SelectContent>
+          {availableOperators.map((op) => (
+            <SelectItem key={op} value={op}>
+              {getOperatorLabel(selectedFieldMetadata.type, op)}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    );
+  };
+
+  // Get operator label based on field type
+  const getOperatorLabel = (
+    fieldType: string,
+    operator: FilterOperator,
+  ): string => {
+    // For date/datetime fields, use more descriptive labels
+    if (fieldType === "datetime" || fieldType === "date") {
+      switch (operator) {
+        case "eq":
+          return "= (等しい)";
+        case "gt":
+          return "> (より後)";
+        case "lt":
+          return "< (より前)";
+        default:
+          return OPERATOR_LABELS[operator];
+      }
+    }
+    // For number fields
+    if (fieldType === "number") {
+      switch (operator) {
+        case "eq":
+          return "= (等しい)";
+        case "gt":
+          return "> (より大きい)";
+        case "lt":
+          return "< (より小さい)";
+        default:
+          return OPERATOR_LABELS[operator];
+      }
+    }
+    // For string fields
+    if (fieldType === "string") {
+      switch (operator) {
+        case "eq":
+          return "= (等しい)";
+        case "contains":
+          return "含む";
+        case "hasPrefix":
+          return "で始まる";
+        case "hasSuffix":
+          return "で終わる";
+        default:
+          return OPERATOR_LABELS[operator];
+      }
+    }
+    return OPERATOR_LABELS[operator];
+  };
+
+  // Format filter display for badge
+  const formatFilterDisplay = (filter: SearchFilter): string => {
+    const value =
+      typeof filter.value === "boolean"
+        ? filter.value
+          ? "true"
+          : "false"
+        : filter.value;
+
+    switch (filter.operator) {
+      case "eq":
+        return `${filter.field} = ${value}`;
+      case "gt":
+        return `${filter.field} > ${value}`;
+      case "lt":
+        return `${filter.field} < ${value}`;
+      case "contains":
+        return `${filter.field} 含む "${value}"`;
+      case "hasPrefix":
+        return `${filter.field} "${value}" で始まる`;
+      case "hasSuffix":
+        return `${filter.field} "${value}" で終わる`;
+      default:
+        return `${filter.field} = ${value}`;
+    }
+  };
+
   const activeFilterCount = filters.length;
 
   return (
@@ -227,14 +366,7 @@ export function SearchFilterForm({
                     variant="secondary"
                     className="flex items-center gap-1 pr-1"
                   >
-                    <span>
-                      {filter.field}=
-                      {typeof filter.value === "boolean"
-                        ? filter.value
-                          ? "true"
-                          : "false"
-                        : filter.value}
-                    </span>
+                    <span>{formatFilterDisplay(filter)}</span>
                     <button
                       className="text-muted-foreground hover:text-foreground ml-1"
                       onClick={() => handleRemoveFilter(filter.field)}
@@ -274,6 +406,9 @@ export function SearchFilterForm({
               {/* Value input - changes based on field type */}
               {selectedField && (
                 <div className="space-y-2">
+                  {/* Operator selector (only shown if multiple operators available) */}
+                  {renderOperatorSelector()}
+                  {/* Value input */}
                   {renderFilterInput()}
                   <Button
                     size="sm"

package/src/component/single-record-tab-content.test.tsx

@@ -127,7 +127,7 @@ describe("SingleRecordTabContent", () => {
       render(
         <SingleRecordTabContent
           tableMetadata={mockTaskTable}
-          tableMetadataMap={mockTableMetadataMap}
+          metadata={mockTableMetadataMap}
           appUri="https://test.example.com"
           recordId="task-123-456-789"
           fetcher={mockFetcher}
@@ -141,7 +141,7 @@ describe("SingleRecordTabContent", () => {
       render(
         <SingleRecordTabContent
           tableMetadata={mockTaskTable}
-          tableMetadataMap={mockTableMetadataMap}
+          metadata={mockTableMetadataMap}
           appUri="https://test.example.com"
           recordId="task-123-456-789"
           fetcher={mockFetcher}
@@ -160,7 +160,7 @@ describe("SingleRecordTabContent", () => {
       render(
         <SingleRecordTabContent
           tableMetadata={mockTaskTable}
-          tableMetadataMap={mockTableMetadataMap}
+          metadata={mockTableMetadataMap}
           appUri="https://test.example.com"
           recordId="task-123-456-789"
           fetcher={mockFetcher}
@@ -193,7 +193,7 @@ describe("SingleRecordTabContent", () => {
       render(
         <SingleRecordTabContent
           tableMetadata={mockTaskTable}
-          tableMetadataMap={mockTableMetadataMap}
+          metadata={mockTableMetadataMap}
           appUri="https://test.example.com"
           recordId="task-123-456-789"
           fetcher={mockFetcher}
@@ -213,7 +213,7 @@ describe("SingleRecordTabContent", () => {
       render(
         <SingleRecordTabContent
           tableMetadata={mockTaskTable}
-          tableMetadataMap={mockTableMetadataMap}
+          metadata={mockTableMetadataMap}
           appUri="https://test.example.com"
           recordId="nonexistent-id"
           fetcher={mockFetcher}
@@ -233,7 +233,7 @@ describe("SingleRecordTabContent", () => {
       render(
         <SingleRecordTabContent
           tableMetadata={mockTaskTable}
-          tableMetadataMap={mockTableMetadataMap}
+          metadata={mockTableMetadataMap}
           appUri="https://test.example.com"
           recordId="task-123-456-789"
           fetcher={mockFetcher}
@@ -257,7 +257,7 @@ describe("SingleRecordTabContent", () => {
       render(
         <SingleRecordTabContent
           tableMetadata={mockTaskTable}
-          tableMetadataMap={mockTableMetadataMap}
+          metadata={mockTableMetadataMap}
           appUri="https://test.example.com"
           recordId="task-123-456-789"
           fetcher={mockFetcher}
@@ -277,7 +277,7 @@ describe("SingleRecordTabContent", () => {
       render(
         <SingleRecordTabContent
           tableMetadata={mockTaskTable}
-          tableMetadataMap={mockTableMetadataMap}
+          metadata={mockTableMetadataMap}
           appUri="https://test.example.com"
           recordId="task-123-456-789"
           fetcher={mockFetcher}
@@ -298,7 +298,7 @@ describe("SingleRecordTabContent", () => {
       render(
         <SingleRecordTabContent
           tableMetadata={mockTaskTable}
-          tableMetadataMap={mockTableMetadataMap}
+          metadata={mockTableMetadataMap}
           appUri="https://test.example.com"
           recordId="task-123-456-789"
           fetcher={mockFetcher}
@@ -326,7 +326,7 @@ describe("SingleRecordTabContent", () => {
       render(
         <SingleRecordTabContent
           tableMetadata={mockTaskTable}
-          tableMetadataMap={mockTableMetadataMap}
+          metadata={mockTableMetadataMap}
           appUri="https://test.example.com"
           recordId="task-123-456-789"
           fetcher={mockFetcher}

package/src/component/single-record-tab-content.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { RefreshCw, Loader2, ChevronDown, ExternalLink } from "lucide-react";
+import { Loader2, ChevronDown, ExternalLink, RefreshCw } from "lucide-react";
 import { Alert, AlertDescription } from "./ui/alert";
 import { Button } from "./ui/button";
 import { Badge } from "./ui/badge";
@@ -18,7 +18,8 @@ import type {
 import { createGraphQLClient } from "../graphql/graphql-client";
 import { formatFieldValue } from "../graphql/query-builder";
 import { ColumnSelector } from "./column-selector";
-import { useColumnState } from "./hooks/use-column-state";
+import { DataViewerProvider, useDataViewer } from "./contexts";
+import { ToolbarProvider } from "./contexts";
 import {
   useSingleRecordData,
   getDisplayFields,
@@ -30,8 +31,8 @@ import { createGraphQLFetcher } from "../graphql/graphql-fetcher";
 interface SingleRecordTabContentProps {
   /** Target table metadata */
   tableMetadata: TableMetadata;
-  /** All table metadata for relation lookup */
-  tableMetadataMap: TableMetadataMap;
+  /** All table metadata (generated from TailorDB schema) */
+  metadata: TableMetadataMap;
   /** App URI for GraphQL requests */
   appUri: string;
   /** Record ID to fetch */
@@ -57,13 +58,61 @@ interface SingleRecordTabContentProps {
  */
 export function SingleRecordTabContent({
   tableMetadata,
-  tableMetadataMap,
+  metadata,
   appUri,
   recordId,
   onOpenAsSheet,
   onOpenSingleRecordAsSheet,
   fetcher: customFetcher,
 }: SingleRecordTabContentProps) {
+  return (
+    <DataViewerProvider
+      appUri={appUri}
+      tableName={tableMetadata.name}
+      metadata={metadata}
+    >
+      <SingleRecordTabContentInner
+        tableMetadata={tableMetadata}
+        metadata={metadata}
+        appUri={appUri}
+        recordId={recordId}
+        onOpenAsSheet={onOpenAsSheet}
+        onOpenSingleRecordAsSheet={onOpenSingleRecordAsSheet}
+        customFetcher={customFetcher}
+      />
+    </DataViewerProvider>
+  );
+}
+
+interface SingleRecordTabContentInnerProps {
+  tableMetadata: TableMetadata;
+  metadata: TableMetadataMap;
+  appUri: string;
+  recordId: string;
+  onOpenAsSheet?: (
+    targetTableName: string,
+    filterField: string,
+    filterValue: string,
+  ) => void;
+  onOpenSingleRecordAsSheet?: (
+    targetTableName: string,
+    recordId: string,
+  ) => void;
+  customFetcher?: SingleRecordDataFetcher;
+}
+
+function SingleRecordTabContentInner({
+  tableMetadata,
+  metadata,
+  appUri,
+  recordId,
+  onOpenAsSheet,
+  onOpenSingleRecordAsSheet,
+  customFetcher,
+}: SingleRecordTabContentInnerProps) {
+  // Get column state from context
+  const { selectedFields, selectedRelations } = useDataViewer();
+
   // Create default fetcher from GraphQL client if not provided
   const defaultFetcher = useMemo(() => {
     const client = createGraphQLClient(appUri);
@@ -72,12 +121,11 @@ export function SingleRecordTabContent({
 
   const fetcher = customFetcher ?? defaultFetcher;
 
-  // Column state for field selection
+  // All display fields for this table
   const allDisplayFields = useMemo(
     () => getDisplayFields(tableMetadata),
     [tableMetadata],
   );
-  const columnState = useColumnState(allDisplayFields, tableMetadata.relations);
 
   // Use the custom hook for data fetching
   const {
@@ -89,7 +137,7 @@ export function SingleRecordTabContent({
     refetch,
   } = useSingleRecordData({
     tableMetadata,
-    tableMetadataMap,
+    tableMetadataMap: metadata,
     recordId,
     fetcher,
   });
@@ -122,10 +170,10 @@ export function SingleRecordTabContent({
   }
 
   const displayFields = allDisplayFields.filter((f) =>
-    columnState.selectedFields.includes(f.name),
+    selectedFields.includes(f.name),
   );
   const relations = (tableMetadata.relations ?? []).filter((r) =>
-    columnState.selectedRelations.includes(r.fieldName),
+    selectedRelations.includes(r.fieldName),
   );
 
   return (
@@ -145,16 +193,9 @@ export function SingleRecordTabContent({
             ID: {recordId.substring(0, 8)}...
           </Badge>
 
-          <ColumnSelector
-            fields={allDisplayFields}
-            selectedFields={columnState.selectedFields}
-            onToggle={columnState.toggleField}
-            onSelectAll={columnState.selectAll}
-            onDeselectAll={columnState.deselectAll}
-            relations={tableMetadata.relations}
-            selectedRelations={columnState.selectedRelations}
-            onToggleRelation={columnState.toggleRelation}
-          />
+          <ToolbarProvider>
+            <ColumnSelector />
+          </ToolbarProvider>
 
           <div className="flex-1" />
           <Button
@@ -192,7 +233,7 @@ export function SingleRecordTabContent({
       {relations.length > 0 && (
         <div className="space-y-6">
           {relations.map((relation) => {
-            const targetTable = tableMetadataMap[relation.targetTable];
+            const targetTable = metadata[relation.targetTable];
             const relationData = relationDataMap[relation.fieldName];
             const displayFieldsForRelation = targetTable
               ? relation.relationType === "manyToOne"

package/src/component/types.ts

@@ -1,5 +1,81 @@
 import type { FieldType } from "../generator/metadata-generator";
 
+/**
+ * Filter operators for String fields
+ */
+export type StringFilterOperator =
+  | "eq" // Equals
+  | "contains" // Contains
+  | "hasPrefix" // Starts with
+  | "hasSuffix"; // Ends with
+
+/**
+ * Filter operators for Number fields
+ */
+export type NumberFilterOperator =
+  | "eq" // Equals
+  | "gt" // Greater than
+  | "lt"; // Less than
+
+/**
+ * Filter operators for Date/DateTime fields
+ */
+export type DateFilterOperator =
+  | "eq" // Equals
+  | "gt" // After (newer than)
+  | "lt"; // Before (older than)
+
+/**
+ * Filter operators for Boolean fields
+ */
+export type BooleanFilterOperator = "eq";
+
+/**
+ * Filter operators for Enum and UUID fields
+ */
+export type EnumFilterOperator = "eq";
+
+/**
+ * Union of all filter operators
+ */
+export type FilterOperator =
+  | StringFilterOperator
+  | NumberFilterOperator
+  | DateFilterOperator
+  | BooleanFilterOperator
+  | EnumFilterOperator;
+
+/**
+ * Operator labels for display (Japanese)
+ */
+export const OPERATOR_LABELS: Record<FilterOperator, string> = {
+  eq: "=",
+  contains: "含む",
+  hasPrefix: "で始まる",
+  hasSuffix: "で終わる",
+  gt: ">",
+  lt: "<",
+};
+
+/**
+ * Available operators by field type
+ */
+export const OPERATORS_BY_FIELD_TYPE: Record<
+  FieldType,
+  readonly FilterOperator[]
+> = {
+  string: ["eq", "contains", "hasPrefix", "hasSuffix"],
+  number: ["eq", "gt", "lt"],
+  boolean: ["eq"],
+  uuid: ["eq"],
+  datetime: ["eq", "gt", "lt"],
+  date: ["eq", "gt", "lt"],
+  time: ["eq"],
+  enum: ["eq"],
+  array: ["eq"],
+  nested: ["eq"],
+};
+
 /**
  * Search filter condition for a single field
  */
@@ -8,6 +84,8 @@ export interface SearchFilter {
   field: string;
   /** Field type (determines UI input type and query format) */
   fieldType: FieldType;
+  /** Filter operator */
+  operator: FilterOperator;
   /** Filter value (string for string/number/enum, boolean for boolean) */
   value: string | boolean;
   /** Enum values (if fieldType is "enum") */

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

@@ -11,29 +11,25 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "./ui/dialog";
-import type { ExpandedRelationFields } from "../generator/metadata-generator";
 import { useSavedViews, type SaveViewInput } from "./saved-view-context";
-import type { SearchFilters } from "./types";
-
-interface ViewSaveProps {
-  tableName: string;
-  filters: SearchFilters;
-  selectedFields: string[];
-  selectedRelations: string[];
-  expandedRelationFields: ExpandedRelationFields;
-}
+import { useDataViewer } from "./contexts";
 
 /**
  * View save control
  * Allows saving views (filters + column selections)
+ * Must be used within DataViewer.Root context
  */
-export function ViewSave({
-  tableName,
-  filters,
-  selectedFields,
-  selectedRelations,
-  expandedRelationFields,
-}: ViewSaveProps) {
+export function ViewSave() {
+  const {
+    tableMetadata,
+    filters,
+    selectedFields,
+    selectedRelations,
+    expandedRelationFields,
+  } = useDataViewer();
+
+  const tableName = tableMetadata?.name ?? "";
+
   const [saveDialogOpen, setSaveDialogOpen] = useState(false);
   const [viewName, setViewName] = useState("");