@interactive-inc/docs-client 0.0.1

package/app/components/directory-table-view.tsx

@@ -0,0 +1,383 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+import { Link } from "@tanstack/react-router"
+import { Archive, ArchiveRestore, Plus, Trash2 } from "lucide-react"
+import { useState } from "react"
+import { EditableTableCell } from "@/components/editable-table-cell"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { apiClient } from "@/lib/api-client"
+import { normalizePath } from "@/lib/path-utils"
+import type { DocFile, DocFileMd, DocRelation, DocSchemaFieldType } from "@/lib/types"
+
+/**
+ * テーブルカラムの型定義
+ */
+type DocTableColumn = {
+  key: string
+  label: string
+  type: DocSchemaFieldType
+  path: string
+  options: string[] | number[]
+}
+
+function isDocFileMd(file: DocFile): file is DocFileMd {
+  return file.type === 'markdown'
+}
+
+type Props = {
+  files: DocFile[]
+  columns: DocTableColumn[]
+  directoryPath: string
+  onDataChanged?: () => void
+  relations?: DocRelation[]
+  archivedCount?: number
+  showArchived?: boolean
+  onToggleArchived?: () => void
+}
+
+export function DirectoryTableView(props: Props) {
+  const queryClient = useQueryClient()
+  const [deleteConfirmFiles, setDeleteConfirmFiles] = useState<Set<string>>(
+    new Set(),
+  )
+
+  const createFileMutation = useMutation({
+    async mutationFn() {
+      const endpoint = apiClient.api.files
+      const resp = await endpoint.$post({
+        json: {
+          directoryPath: normalizePath(props.directoryPath),
+        },
+      })
+
+      return resp.json()
+    },
+    onSuccess() {
+      // ファイルツリーキャッシュを無効化
+      queryClient.invalidateQueries({ queryKey: ["file-tree"] })
+
+      if (!props.onDataChanged) return
+      props.onDataChanged()
+    },
+  })
+
+  const updateCellMutation = useMutation({
+    async mutationFn(params: { path: string; field: string; value: unknown }) {
+      console.log('Updating cell:', params)
+      try {
+        const endpoint = apiClient.api.files[":path{.+}"]
+        const resp = await endpoint.$put({
+          param: { path: params.path },
+          json: {
+            properties: { [params.field]: params.value },
+            content: null,
+            title: null,
+            description: null,
+            isArchived: null,
+          },
+        })
+
+        console.log('Response status:', resp.status)
+        
+        if (!resp.ok) {
+          const errorText = await resp.text()
+          console.error('Response error:', errorText)
+          throw new Error(`API Error: ${resp.status} - ${errorText}`)
+        }
+
+        const result = await resp.json()
+        console.log('Update response:', result)
+        return result
+      } catch (error) {
+        console.error('Update request failed:', error)
+        throw error
+      }
+    },
+    onSuccess() {
+      // キャッシュを無効化
+      queryClient.invalidateQueries({ queryKey: ["file-tree"] })
+      queryClient.invalidateQueries({ queryKey: ["directory"] })
+      
+      if (!props.onDataChanged) return
+      props.onDataChanged()
+    },
+    onError(error) {
+      console.error('Update mutation failed:', error)
+    },
+  })
+
+  const updateTitleMutation = useMutation({
+    async mutationFn(params: { path: string; title: string }) {
+      const endpoint = apiClient.api.files[":path{.+}"]
+      const resp = await endpoint.$put({
+        param: { path: params.path },
+        json: {
+          title: params.title,
+          properties: null,
+          content: null,
+          description: null,
+          isArchived: null,
+        },
+      })
+
+      return resp.json()
+    },
+    onSuccess() {
+      if (!props.onDataChanged) return
+      props.onDataChanged()
+    },
+  })
+
+  const deleteFileMutation = useMutation({
+    async mutationFn(filePath: string) {
+      // パスを正規化
+      const normalizedPath = normalizePath(filePath)
+
+      // apiClientを使用して削除
+      const endpoint = apiClient.api.files[":path{.+}"]
+      const resp = await endpoint.$delete({
+        param: { path: normalizedPath },
+      })
+
+      if (!resp.ok) {
+        const errorText = await resp.text()
+        throw new Error(`Failed to delete file: ${errorText}`)
+      }
+
+      return resp.json()
+    },
+    onSuccess() {
+      // ファイルツリーキャッシュを無効化
+      queryClient.invalidateQueries({ queryKey: ["file-tree"] })
+
+      if (!props.onDataChanged) return
+      props.onDataChanged()
+    },
+  })
+
+  const archiveFileMutation = useMutation({
+    async mutationFn(filePath: string) {
+      // パスを正規化
+      const normalizedPath = normalizePath(filePath)
+
+      const endpoint = apiClient.api.files[":path{.+}"]
+      const resp = await endpoint.$put({
+        param: { path: normalizedPath },
+        json: {
+          properties: null,
+          content: null,
+          title: null,
+          description: null,
+          isArchived: true,
+        },
+      })
+
+      return resp.json()
+    },
+    onSuccess() {
+      // ファイルツリーキャッシュを無効化
+      queryClient.invalidateQueries({ queryKey: ["file-tree"] })
+
+      if (!props.onDataChanged) return
+      props.onDataChanged()
+    },
+  })
+
+  const restoreFileMutation = useMutation({
+    async mutationFn(filePath: string) {
+      // パスを正規化
+      const normalizedPath = normalizePath(filePath)
+
+      const endpoint = apiClient.api.files[":path{.+}"]
+      const resp = await endpoint.$put({
+        param: { path: normalizedPath },
+        json: {
+          properties: null,
+          content: null,
+          title: null,
+          description: null,
+          isArchived: false,
+        },
+      })
+
+      return resp.json()
+    },
+    onSuccess() {
+      // ファイルツリーキャッシュを無効化
+      queryClient.invalidateQueries({ queryKey: ["file-tree"] })
+
+      if (!props.onDataChanged) return
+      props.onDataChanged()
+    },
+  })
+
+
+  const handleDeleteClick = (filePath: string) => {
+    if (deleteConfirmFiles.has(filePath)) {
+      // 2回目のクリック - ファイルを削除
+      deleteFileMutation.mutate(filePath)
+      setDeleteConfirmFiles(new Set())
+    } else {
+      // 1回目のクリック - 確認状態にする
+      setDeleteConfirmFiles(new Set([filePath]))
+    }
+  }
+
+  const handleArchiveClick = (filePath: string) => {
+    archiveFileMutation.mutate(filePath)
+  }
+
+  const handleRestoreClick = (filePath: string) => {
+    restoreFileMutation.mutate(filePath)
+  }
+
+  return (
+    <Card className="gap-0 overflow-x-scroll rounded-md p-0">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-40">ファイル名</TableHead>
+            <TableHead className="min-w-64">タイトル</TableHead>
+            {props.columns.map((column) => (
+              <TableHead key={column.key}>{column.label}</TableHead>
+            ))}
+            <TableHead className="w-16" />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {props.files.filter(isDocFileMd).map((fileData) => {
+            const isArchived = 'isArchived' in fileData && fileData.isArchived
+            return (
+              <TableRow
+                key={fileData.path.path}
+                className={isArchived ? "opacity-60" : ""}
+              >
+                <TableCell className="font-medium">
+                  <Link
+                    to="/$"
+                    params={{ _splat: normalizePath(fileData.path.path) }}
+                    className="text-blue-600 hover:underline"
+                  >
+                    {fileData.path.name}
+                  </Link>
+                </TableCell>
+                <TableCell className="p-0">
+                  <EditableTableCell
+                    value={fileData.content.title || ""}
+                    type="string"
+                    onUpdate={(newValue) => {
+                      return updateTitleMutation.mutate({
+                        path: fileData.path.path,
+                        title: String(newValue),
+                      })
+                    }}
+                  />
+                </TableCell>
+                {props.columns.map((column) => {
+                  // リレーション情報を取得
+                  const relationData = props.relations?.find(
+                    (rel) => rel.path === column.path,
+                  )
+
+                  const cellValue = fileData.content.frontMatter?.[column.key]
+
+                  return (
+                    <TableCell key={column.key} className="p-1">
+                      <EditableTableCell
+                        value={cellValue}
+                        type={column.type}
+                        path={column.path}
+                        relationOptions={relationData?.files}
+                        selectOptions={column.options}
+                        onUpdate={(newValue) => {
+                          return updateCellMutation.mutate({
+                            path: fileData.path.path,
+                            field: column.key,
+                            value: newValue,
+                          })
+                        }}
+                      />
+                    </TableCell>
+                  )
+                })}
+                <TableCell className="p-2">
+                  <div className="flex justify-end gap-1">
+                    {!isArchived && (
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={() => handleArchiveClick(fileData.path.path)}
+                        disabled={archiveFileMutation.isPending}
+                        className="h-8 w-8 p-0"
+                        title="アーカイブする"
+                      >
+                        <Archive className="h-4 w-4" />
+                      </Button>
+                    )}
+                    {isArchived && (
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={() => handleRestoreClick(fileData.path.path)}
+                        disabled={restoreFileMutation.isPending}
+                        className="h-8 w-8 p-0"
+                        title="復元する"
+                      >
+                        <ArchiveRestore className="h-4 w-4" />
+                      </Button>
+                    )}
+                    <Button
+                      size="sm"
+                      variant={
+                        deleteConfirmFiles.has(fileData.path.path)
+                          ? "destructive"
+                          : "ghost"
+                      }
+                      onClick={() => handleDeleteClick(fileData.path.path)}
+                      disabled={deleteFileMutation.isPending}
+                      className="h-8 w-8 p-0"
+                      title="削除する"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </TableCell>
+              </TableRow>
+            )
+          })}
+        </TableBody>
+      </Table>
+      <div className="border-t p-2 flex gap-2">
+        <Button
+          size="sm"
+          variant="secondary"
+          onClick={() => createFileMutation.mutate()}
+          disabled={createFileMutation.isPending}
+        >
+          <Plus className="h-4 w-4" />
+          {"新しいファイル"}
+        </Button>
+        {(props.archivedCount ?? 0) > 0 && (
+          <Button
+            size="sm"
+            variant={props.showArchived ? "default" : "outline"}
+            onClick={props.onToggleArchived}
+          >
+            {props.showArchived 
+              ? `表示中（${props.archivedCount}件）`
+              : `非表示（${props.archivedCount}件）`
+            }
+          </Button>
+        )}
+      </div>
+    </Card>
+  )
+}

package/app/components/editable-table-cell/boolean-editable-cell.tsx

@@ -0,0 +1,44 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+type Props = {
+  value: unknown
+  onUpdate: (value: unknown) => void
+}
+
+export function BooleanEditableCell(props: Props) {
+  return (
+    <Select
+      value={
+        props.value === true
+          ? "true"
+          : props.value === false
+            ? "false"
+            : "undefined"
+      }
+      onValueChange={(value) => {
+        if (value === "true") {
+          props.onUpdate(true)
+        } else if (value === "false") {
+          props.onUpdate(false)
+        } else {
+          props.onUpdate(undefined)
+        }
+      }}
+    >
+      <SelectTrigger className="w-full">
+        <SelectValue placeholder="選択してください" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="undefined">-</SelectItem>
+        <SelectItem value="true">true</SelectItem>
+        <SelectItem value="false">false</SelectItem>
+      </SelectContent>
+    </Select>
+  )
+}

package/app/components/editable-table-cell/multi-boolean-editable-cell.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useState } from "react"
+import { Input } from "@/components/ui/input"
+
+type Props = {
+  value: unknown
+  onUpdate: (value: unknown) => void
+}
+
+export function MultiBooleanEditableCell(props: Props) {
+  const formatValue = (value: unknown): string => {
+    if (value === undefined || value === null) {
+      return ""
+    }
+    return Array.isArray(value) ? value.join(", ") : ""
+  }
+
+  const [editValue, setEditValue] = useState(formatValue(props.value))
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
+    setEditValue(formatValue(props.value))
+  }, [props.value])
+
+  const parseValue = (text: string): unknown => {
+    if (text === "") {
+      return undefined
+    }
+    return text.split(",").map((s) => s.trim().toLowerCase() === "true")
+  }
+
+  const displayValue = formatValue(props.value)
+
+  const handleBlur = () => {
+    const parsedValue = parseValue(editValue)
+    if (parsedValue !== props.value) {
+      props.onUpdate(parsedValue)
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      handleBlur()
+    }
+    if (e.key === "Escape") {
+      setEditValue(displayValue)
+    }
+  }
+
+  return (
+    <Input
+      type="text"
+      value={editValue}
+      onChange={(e) => setEditValue(e.target.value)}
+      onBlur={handleBlur}
+      onKeyDown={handleKeyDown}
+      placeholder={displayValue || "-"}
+    />
+  )
+}

package/app/components/editable-table-cell/multi-number-editable-cell.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useState } from "react"
+import { Input } from "@/components/ui/input"
+
+type Props = {
+  value: unknown
+  onUpdate: (value: unknown) => void
+}
+
+export function MultiNumberEditableCell(props: Props) {
+  const formatValue = (value: unknown): string => {
+    if (value === undefined || value === null) {
+      return ""
+    }
+    return Array.isArray(value) ? value.join(", ") : ""
+  }
+
+  const [editValue, setEditValue] = useState(formatValue(props.value))
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
+    setEditValue(formatValue(props.value))
+  }, [props.value])
+
+  const parseValue = (text: string): unknown => {
+    if (text === "") {
+      return undefined
+    }
+    return text.split(",").map((s) => {
+      const n = Number(s.trim())
+      return Number.isNaN(n) ? 0 : n
+    })
+  }
+
+  const displayValue = formatValue(props.value)
+
+  const handleBlur = () => {
+    const parsedValue = parseValue(editValue)
+    if (parsedValue !== props.value) {
+      props.onUpdate(parsedValue)
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      handleBlur()
+    }
+    if (e.key === "Escape") {
+      setEditValue(displayValue)
+    }
+  }
+
+  return (
+    <Input
+      type="text"
+      value={editValue}
+      onChange={(e) => setEditValue(e.target.value)}
+      onBlur={handleBlur}
+      onKeyDown={handleKeyDown}
+      placeholder={displayValue || "-"}
+    />
+  )
+}

package/app/components/editable-table-cell/multi-relation-editable-cell.tsx

@@ -0,0 +1,19 @@
+import { MultiRelationSelect } from "@/components/file-view/multi-relation-select"
+import type { DocRelationFile } from "@/lib/types"
+
+type Props = {
+  value: unknown
+  onUpdate: (value: unknown) => void
+  relationOptions?: DocRelationFile[]
+}
+
+export function MultiRelationEditableCell(props: Props) {
+  // MultiRelationSelectはDocRelationFileを直接受け取る
+  return (
+    <MultiRelationSelect
+      value={Array.isArray(props.value) ? props.value : []}
+      relationOptions={props.relationOptions}
+      onValueChange={(value) => props.onUpdate(value)}
+    />
+  )
+}

package/app/components/editable-table-cell/multi-select-number-editable-cell.tsx

@@ -0,0 +1,82 @@
+import { X } from "lucide-react"
+import { useState } from "react"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+
+type Props = {
+  value: number[]
+  options: number[]
+  onUpdate: (value: number[]) => void
+}
+
+/**
+ * 複数選択数値セル
+ */
+export function MultiSelectNumberEditableCell(props: Props) {
+  const [isOpen, setIsOpen] = useState(false)
+  const currentValues = props.value || []
+
+  const handleToggle = (option: number) => {
+    const isSelected = currentValues.includes(option)
+    const newValues = isSelected
+      ? currentValues.filter((v) => v !== option)
+      : [...currentValues, option]
+    props.onUpdate(newValues)
+  }
+
+  const handleRemove = (value: number) => {
+    const newValues = currentValues.filter((v) => v !== value)
+    props.onUpdate(newValues)
+  }
+
+  return (
+    <div className="relative">
+      <div className="flex min-h-8 flex-wrap gap-1 rounded-md border p-2">
+        {currentValues.map((value) => (
+          <Badge
+            key={value}
+            variant="secondary"
+            className="flex items-center gap-1"
+          >
+            {value}
+            <Button
+              size="sm"
+              variant="ghost"
+              className="h-4 w-4 p-0"
+              onClick={() => handleRemove(value)}
+            >
+              <X className="h-3 w-3" />
+            </Button>
+          </Badge>
+        ))}
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => setIsOpen(!isOpen)}
+          className="text-muted-foreground"
+        >
+          追加
+        </Button>
+      </div>
+      {isOpen && (
+        <div className="absolute z-10 mt-1 w-full rounded-md border bg-white shadow-lg">
+          {props.options
+            .filter((option) => !currentValues.includes(option))
+            .map((option) => (
+              <button
+                type="button"
+                key={option}
+                className="w-full px-3 py-2 text-left hover:bg-gray-100"
+                onClick={() => {
+                  handleToggle(option)
+                  setIsOpen(false)
+                }}
+              >
+                {option}
+              </button>
+            ))}
+        </div>
+      )}
+    </div>
+  )
+}