kilo-cms 0.1.0

package/src/admin/CollectionListEditor.tsx

@@ -0,0 +1,278 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { CmsSidebar } from './CmsSidebar'
+import { EditorHeader } from './EditorHeader'
+import { ListingView, type Column, type ListingViewHandle } from './ListingView'
+import { RowActionsMenu } from './RowActionsMenu'
+import { FilterBuilder, type FilterFieldDef, type FilterRule } from './FilterBuilder'
+import { Button } from './Button'
+import { formatDateTime } from '../format'
+import { contentViewField, contentViewLabels, defaultContentViewFor, type ContentViewSettings } from '../collections/content-view'
+import { relationFields } from '../collections/registry'
+import { formatFieldValue, resolvePreviewPath } from '../collections/values'
+import { workflowListColumns, workflowListFilters, type CollectionConfig, type FieldConfig, type SelectOption } from '../collections/types'
+
+const reviewStatusLabels: Record<string, string> = { draft: 'Draft', in_review: 'In review', reviewed: 'Reviewed', approved: 'Approved' }
+
+type Row = Record<string, unknown>
+type ListResponse = { items: Row[]; total: number; relationLabels: Record<string, Record<string, string>> }
+const PAGE_SIZE_DEFAULT = 25
+
+export function CollectionListEditor({ config, userName, canCreate, canPublish, canDelete }: { config: CollectionConfig; userName: string; canCreate: boolean; canPublish: boolean; canDelete: boolean }) {
+  // The server page already resolved `config` (registry lookups only work server-side —
+  // `defineKiloConfig()` never runs on the client) and passes it down as a prop; `slug` is
+  // just a local alias so every existing `slug`-referencing line below keeps working unchanged.
+  const slug = config.slug
+  const [items, setItems] = useState<Row[]>([])
+  const [relationLabels, setRelationLabels] = useState<Record<string, Record<string, string>>>({})
+  const [relationFilterOptions, setRelationFilterOptions] = useState<Record<string, SelectOption[]>>({})
+  const [users, setUsers] = useState<Array<{ id: string; name: string }>>([])
+  const [trashed, setTrashed] = useState(false)
+  const [total, setTotal] = useState(0)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [qInput, setQInput] = useState('')
+  const [q, setQ] = useState('')
+  const [filters, setFilters] = useState<FilterRule[]>([])
+  const [contentView, setContentView] = useState<ContentViewSettings>(() => defaultContentViewFor(config))
+  const [sortBy, setSortBy] = useState(config.defaultSort.field)
+  const [sortDir, setSortDir] = useState<'asc' | 'desc'>(config.defaultSort.dir)
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState<number | 'all'>(PAGE_SIZE_DEFAULT)
+  const searchRef = useRef<HTMLInputElement>(null)
+  const listingRef = useRef<ListingViewHandle>(null)
+
+  useEffect(() => {
+    setItems([]); setTotal(0); setPage(1); setSortBy(config.defaultSort.field); setSortDir(config.defaultSort.dir); setFilters([]); setQInput(''); setQ(''); setTrashed(false)
+    fetch(`/api/admin/content-views/${slug}`).then((response) => response.ok ? response.json() : null).then((data) => { if (data) setContentView(data) }).catch(() => {})
+    if (config.workflow?.audit) fetch('/api/admin/users').then((response) => response.ok ? response.json() : []).then(setUsers).catch(() => {})
+    const optionFields = [
+      ...relationFields(config).map((field) => [field.key, field.relationTo] as const),
+      ...config.fields
+        .filter((field): field is Extract<FieldConfig, { type: 'text' }> => field.type === 'text' && Boolean(field.suggestionsFrom) && Boolean(field.filterable))
+        .map((field) => [field.key, field.suggestionsFrom!.collection] as const),
+    ]
+    Promise.all(optionFields.map(([key, target]) =>
+      fetch(`/api/admin/collections/${target}/options`).then((response) => response.ok ? response.json() : []).then((options: SelectOption[]) => [key, options] as const),
+    )).then((entries) => setRelationFilterOptions(Object.fromEntries(entries))).catch(() => {})
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [slug])
+
+  useEffect(() => { const timer = setTimeout(() => { setQ(qInput); setPage(1) }, 300); return () => clearTimeout(timer) }, [qInput])
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    try {
+      const params = new URLSearchParams()
+      if (trashed) params.set('trashed', '1')
+      if (q) params.set('q', q)
+      if (filters.length) params.set('filters', JSON.stringify(filters.map(({ field, operator, value }) => ({ field, operator, value }))))
+      params.set('sortBy', sortBy)
+      params.set('sortDir', sortDir)
+      params.set('page', String(page))
+      params.set('pageSize', String(pageSize))
+      const response = await fetch(`/api/admin/collections/${slug}?${params}`)
+      if (!response.ok) throw new Error()
+      const data: ListResponse = await response.json()
+      setItems(data.items)
+      setTotal(data.total)
+      setRelationLabels(data.relationLabels)
+      setError('')
+    } catch { setError(`Could not load ${config.label.toLowerCase()}`) }
+    finally { setLoading(false) }
+  }, [slug, trashed, q, filters, sortBy, sortDir, page, pageSize, config.label])
+  useEffect(() => { void load() }, [load])
+
+  useEffect(() => {
+    function handler(event: KeyboardEvent) {
+      if (event.key !== '/' || event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) return
+      event.preventDefault()
+      searchRef.current?.focus()
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [])
+
+  function handleSort(by: string, dir: 'asc' | 'desc') { setSortBy(by); setSortDir(dir); setPage(1) }
+  function addFilter(rule: FilterRule) { setFilters((current) => [...current, rule]); setPage(1) }
+  function removeFilter(id: string) { setFilters((current) => current.filter((rule) => rule.id !== id)); setPage(1) }
+  function switchTab(next: boolean) { setTrashed(next); setPage(1) }
+
+  async function deleteOne(id: string) {
+    if (!confirm(config.workflow?.trash ? `Move this ${config.labelSingular.toLowerCase()} to trash?` : `Delete this ${config.labelSingular.toLowerCase()}? This cannot be undone.`)) return
+    await fetch(`/api/admin/collections/${slug}/${id}`, { method: 'DELETE' })
+    void load()
+  }
+  async function restoreOne(id: string) {
+    await fetch(`/api/admin/collections/${slug}/${id}/restore`, { method: 'POST' })
+    void load()
+  }
+  async function destroyOne(id: string) {
+    if (!confirm(`Permanently delete this ${config.labelSingular.toLowerCase()}? This cannot be undone.`)) return
+    await fetch(`/api/admin/collections/${slug}/${id}?permanent=1`, { method: 'DELETE' })
+    void load()
+  }
+  async function bulkRun(selected: Row[], action: 'delete' | 'publish' | 'unpublish' | 'trash' | 'restore') {
+    const label = action === 'trash' ? `Move ${selected.length} ${config.label.toLowerCase()} to trash?`
+      : action === 'delete' ? `Delete ${selected.length} ${config.label.toLowerCase()}? This cannot be undone.`
+      : action === 'restore' ? `Restore ${selected.length} ${config.label.toLowerCase()}?`
+      : `${action === 'publish' ? 'Publish' : 'Unpublish'} ${selected.length} ${config.label.toLowerCase()}?`
+    if (!confirm(label)) return
+    await fetch(`/api/admin/collections/${slug}/bulk`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ids: selected.map((item) => String(item.id)), action }) })
+    void load()
+  }
+  async function togglePublish(id: string, published: boolean) {
+    await fetch(`/api/admin/collections/${slug}/${id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ published }) })
+    void load()
+  }
+  async function duplicateOne(id: string) {
+    await fetch(`/api/admin/collections/${slug}/${id}/duplicate`, { method: 'POST' })
+    void load()
+  }
+  async function move(id: string, direction: 'up' | 'down') {
+    const index = items.findIndex((item) => String(item.id) === id)
+    const swapWith = direction === 'up' ? index - 1 : index + 1
+    if (index < 0 || swapWith < 0 || swapWith >= items.length) return
+    const next = [...items]
+    ;[next[index], next[swapWith]] = [next[swapWith], next[index]]
+    setItems(next)
+    await fetch(`/api/admin/collections/${slug}/reorder`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ids: next.map((item) => String(item.id)) }) })
+  }
+
+  const fieldFilters: FilterFieldDef[] = config.fields.filter((field) => field.filterable).map((field) => {
+    const isSuggestion = field.type === 'text' && Boolean(field.suggestionsFrom)
+    return {
+      key: field.key,
+      label: contentViewField(contentView, field.key)?.label ?? field.label,
+      type: field.type === 'boolean' || field.type === 'select' || field.type === 'relation' || isSuggestion ? 'select' : 'text',
+      supportsEmpty: Boolean(field.nullable) || isSuggestion,
+      options: field.type === 'boolean' ? [{ value: 'true', label: 'Yes' }, { value: 'false', label: 'No' }]
+        : field.type === 'select' ? field.options
+        : (field.type === 'relation' || isSuggestion) ? (relationFilterOptions[field.key] ?? []).map((option) => ({ value: option.label, label: option.label }))
+        : undefined,
+    }
+  })
+  const workflowFilters: FilterFieldDef[] = config.workflow ? workflowListFilters
+    .filter((field) => Boolean(config.workflow?.[field.requires]))
+    .map((field) => ({
+      key: field.key,
+      label: field.label,
+      type: 'select',
+      options: field.type === 'boolean'
+        ? [
+            { value: 'true', label: 'Published' },
+            ...(config.workflow?.scheduling ? [{ value: 'scheduled', label: 'Scheduled' }] : []),
+            { value: 'false', label: 'Draft' },
+          ]
+        : field.options.map((option) => ({ ...option })),
+    })) : []
+  const filterFields = [...fieldFilters, ...workflowFilters]
+
+  const userName_ = (value: unknown) => users.find((user) => user.id === value)?.name || '—'
+  const columns: Column<Row>[] = config.fields
+    .filter((field) => field.listColumn)
+    .map((field) => ({
+      key: field.key,
+      label: field.label,
+      render: (item: Row) => {
+        const display = formatFieldValue(field, item[field.key], relationLabels[field.key])
+        if (field.type === 'image') return typeof item[field.key] === 'string' && item[field.key]
+          ? <img className="cms-table-thumb" src={String(item[field.key])} alt="" />
+          : '—'
+        return field.listPrimary
+          ? <a className="cms-row-title" href={`/admin/collections/${slug}/${String(item.id)}`}><strong>{display || 'Untitled'}</strong></a>
+          : display
+      },
+    }))
+  const workflowColumns: Column<Row>[] = config.workflow ? workflowListColumns
+    .filter((column) => Boolean(config.workflow?.[column.requires]))
+    .map((column) => ({
+      key: column.key,
+      label: column.label,
+      defaultHidden: true,
+      render: (item: Row) =>
+        column.kind === 'user' ? userName_(item[column.key])
+        : column.kind === 'datetime' ? formatDateTime(item[column.key] as string | null | undefined)
+        : reviewStatusLabels[String(item[column.key])] ?? String(item[column.key] ?? '—'),
+    })) : []
+  const statusColumn: Column<Row>[] = config.workflow?.publish ? [{
+    key: 'published',
+    label: 'Status',
+    render: (item: Row) => trashed
+      ? <span className="cms-status">Trashed</span>
+      : canPublish
+        ? <button type="button" className={`cms-switch ${item.published ? 'is-on' : ''}`} onClick={() => void togglePublish(String(item.id), !item.published)}>{item.published ? 'Published' : 'Draft'}</button>
+        : <span className={`cms-status ${item.published ? 'is-published' : ''}`}>{item.published ? 'Published' : 'Draft'}</span>,
+  }] : []
+  const allColumns: Column<Row>[] = [
+    { key: 'id', label: 'ID', defaultHidden: true, render: (item) => <span className="cms-table-id">{String(item.id).slice(0, 8)}</span> },
+    ...columns,
+    ...workflowColumns,
+    ...statusColumn,
+  ]
+
+  const titleField = config.titleField
+  const imageField = config.fields.find((field) => field.type === 'image' && field.listColumn)
+  const reorderable = Boolean(config.workflow?.sortOrder) && !trashed && sortBy === 'sortOrder' && !q && filters.length === 0 && pageSize === 'all'
+  const bulkActions = trashed
+    ? [
+        { key: 'restore', label: 'Restore', icon: 'restore' as const, onRun: (selected: Row[]) => void bulkRun(selected, 'restore') },
+        { key: 'delete', label: 'Delete permanently', icon: 'trash' as const, danger: true, onRun: (selected: Row[]) => void bulkRun(selected, 'delete') },
+      ]
+    : [
+        ...(config.workflow?.publish && canPublish ? [
+          { key: 'publish', label: 'Publish', icon: 'publish' as const, onRun: (selected: Row[]) => void bulkRun(selected, 'publish') },
+          { key: 'unpublish', label: 'Unpublish', icon: 'unpublish' as const, onRun: (selected: Row[]) => void bulkRun(selected, 'unpublish') },
+        ] : []),
+        ...(canDelete ? [{ key: config.workflow?.trash ? 'trash' : 'delete', label: config.workflow?.trash ? 'Move to trash' : 'Delete', icon: 'trash' as const, danger: true, onRun: (selected: Row[]) => void bulkRun(selected, config.workflow?.trash ? 'trash' : 'delete') }] : []),
+      ]
+
+  return <main className="cms-dashboard"><CmsSidebar active="collections" userName={userName} /><section className="cms-content">
+    <EditorHeader compact title={config.label} meta={error || `${total} ${trashed ? 'in trash' : config.label.toLowerCase()}`} actions={<>
+      {config.workflow?.trash && <div className="cms-tabs cms-tabs-inline"><button className={!trashed ? 'active' : ''} onClick={() => switchTab(false)}>Active</button><button className={trashed ? 'active' : ''} onClick={() => switchTab(true)}>Trash</button></div>}
+      {canCreate && <Button variant="positive" href={`/admin/collections/${slug}/new`} icon="↗">Add {config.labelSingular.toLowerCase()}</Button>}
+    </>} />
+    <div className="cms-filter-bar">
+      <input ref={searchRef} className="cms-search-input" value={qInput} onChange={(event) => setQInput(event.target.value)} placeholder="Search… (press /)" />
+      {!trashed && filterFields.length > 0 && <FilterBuilder fields={filterFields} rules={filters} onAdd={addFilter} onRemove={removeFilter} />}
+      {reorderable && <span className="cms-reorder-hint">Drag order active — use ↑↓ to reorder</span>}
+      <Button type="button" variant="secondary" onClick={() => listingRef.current?.openSettings()} aria-label="View settings">⚙ View settings</Button>
+    </div>
+    <ListingView
+      ref={listingRef}
+      items={items}
+      total={total}
+      loading={loading}
+      getId={(item) => String(item.id)}
+      storageKey={`collection-${slug}`}
+      columnLabels={contentViewLabels(contentView)}
+      resetSelectionKey={trashed ? 'trash' : 'active'}
+      emptyLabel={trashed ? 'Trash is empty.' : (q || filters.length) ? `No ${config.label.toLowerCase()} match your search or filters.` : `No ${config.label.toLowerCase()} yet.`}
+      sortBy={sortBy}
+      sortDir={sortDir}
+      onSortChange={handleSort}
+      page={page}
+      pageSize={pageSize}
+      onPageChange={setPage}
+      onPageSizeChange={(size) => { setPageSize(size); setPage(1) }}
+      reorderable={reorderable}
+      onMove={move}
+      columns={allColumns}
+      card={(item) => ({ image: imageField && typeof item[imageField.key] === 'string' ? String(item[imageField.key]) : null, title: formatFieldValue(config.fields.find((field) => field.key === titleField)!, item[titleField]) || 'Untitled', meta: String(item.id).slice(0, 8), published: config.workflow?.publish ? Boolean(item.published) : true, badge: trashed ? <span className="cms-status">Trashed</span> : undefined })}
+      bulkActions={bulkActions.length ? bulkActions : undefined}
+      renderActions={trashed
+        ? (item) => <RowActionsMenu items={[
+            { label: 'Restore', icon: 'restore', onClick: () => void restoreOne(String(item.id)) },
+            ...(canDelete ? [{ label: 'Delete permanently', icon: 'trash' as const, danger: true, onClick: () => void destroyOne(String(item.id)) }] : []),
+          ]} />
+        : (item) => <RowActionsMenu items={[
+            { label: 'Edit', icon: 'edit', href: `/admin/collections/${slug}/${String(item.id)}` },
+            ...(config.workflow?.duplicate && canCreate ? [{ label: 'Duplicate', icon: 'duplicate' as const, onClick: () => void duplicateOne(String(item.id)) }] : []),
+            ...(config.workflow?.publish && canPublish ? [{ label: Boolean(item.published) ? 'Unpublish' : 'Publish', icon: Boolean(item.published) ? 'unpublish' as const : 'publish' as const, onClick: () => void togglePublish(String(item.id), !Boolean(item.published)) }] : []),
+            ...(config.previewPath && Boolean(item.published) ? [{ label: 'Preview', icon: 'preview' as const, href: resolvePreviewPath(config.previewPath, item), newTab: true }] : []),
+            ...(canDelete ? [{ label: config.workflow?.trash ? 'Move to trash' : 'Delete', icon: 'trash' as const, danger: true, onClick: () => void deleteOne(String(item.id)) }] : []),
+          ]} />}
+    />
+  </section></main>
+}