@bobbykim/manguito-cms-admin 0.1.1 → 0.3.0

package/src/views/taxonomy/TaxonomyFormView.vue

@@ -0,0 +1,286 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import type { Component } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import type { ParsedField } from '@bobbykim/manguito-cms-core'
+import { useApiClient } from '../../composables/useApiClient'
+import { usePermission } from '../../composables/usePermission'
+import { useFormValidation } from '../../composables/useFormValidation'
+import { useNotification } from '../../composables/useNotification'
+import { useSchemaStore } from '../../stores/schema'
+import { useTaxonomyStore } from '../../stores/taxonomy'
+import TextInput from '../../components/fields/TextInput.vue'
+import RichTextEditor from '../../components/fields/RichTextEditor.vue'
+import NumberInput from '../../components/fields/NumberInput.vue'
+import BooleanToggle from '../../components/fields/BooleanToggle.vue'
+import DatePicker from '../../components/fields/DatePicker.vue'
+import EnumSelect from '../../components/fields/EnumSelect.vue'
+import ComputedDisplay from '../../components/fields/ComputedDisplay.vue'
+import ConfirmDialog from '../../components/shared/ConfirmDialog.vue'
+
+const route = useRoute()
+const router = useRouter()
+const api = useApiClient()
+const { can } = usePermission()
+const { errors, validate, mergeServerErrors, clearErrors, setError } = useFormValidation()
+const notify = useNotification()
+const schemaStore = useSchemaStore()
+const taxonomyStore = useTaxonomyStore()
+
+// ── Route ─────────────────────────────────────────────────────────────────────
+
+const type = computed(() => route.params.type as string)
+const routeId = computed(() => route.params.id as string | undefined)
+const isEdit = computed(() => !!routeId.value)
+
+// ── Schema ────────────────────────────────────────────────────────────────────
+
+const taxonomyType = computed(() => schemaStore.taxonomyTypes[type.value])
+const allFields = computed(() => taxonomyType.value?.fields ?? [])
+
+// ── Form state ────────────────────────────────────────────────────────────────
+
+const item = ref<Record<string, unknown> | null>(null)
+const form = ref<Record<string, unknown>>({})
+const loading = ref(true)
+const saving = ref(false)
+const formError = ref('')
+const showDeleteConfirm = ref(false)
+
+// ── Field component mapping (flat — no paragraphs, media, or references in taxonomy) ──
+
+const FIELD_COMP = {
+  'text/plain': TextInput,
+  'text/rich': RichTextEditor,
+  integer: NumberInput,
+  float: NumberInput,
+  boolean: BooleanToggle,
+  date: DatePicker,
+  enum: EnumSelect,
+  programmatic: ComputedDisplay,
+} as const
+
+function componentFor(field: ParsedField): Component {
+  const key = field.field_type as keyof typeof FIELD_COMP
+  return FIELD_COMP[key] ?? TextInput
+}
+
+// ── Form helpers ──────────────────────────────────────────────────────────────
+
+function defaultForField(field: ParsedField): unknown {
+  switch (field.field_type) {
+    case 'text/plain':
+    case 'text/rich':
+      return ''
+    case 'integer':
+    case 'float':
+      return null
+    case 'boolean':
+      return false
+    case 'date':
+      return null
+    case 'enum':
+      return ''
+    default:
+      return null
+  }
+}
+
+function initForm(source?: Record<string, unknown>) {
+  const f: Record<string, unknown> = {}
+  for (const field of allFields.value) {
+    // Programmatic fields are computed at read time — never edited or submitted,
+    // so they stay out of the form state (and therefore the save payload).
+    if (field.field_type === 'programmatic') continue
+    f[field.name] = source?.[field.name] ?? defaultForField(field)
+  }
+  form.value = f
+}
+
+function updateField(name: string, value: unknown) {
+  form.value[name] = value
+}
+
+// ── Data loading ──────────────────────────────────────────────────────────────
+
+async function loadItem(id: string) {
+  const res = await api.get<Record<string, unknown>>(`/taxonomy/${type.value}/${id}`)
+  if (res.ok) {
+    item.value = res.data
+    initForm(res.data)
+  } else {
+    formError.value = res.error.message
+  }
+}
+
+onMounted(async () => {
+  if (!taxonomyType.value) {
+    loading.value = false
+    return
+  }
+  if (isEdit.value && routeId.value) {
+    await loadItem(routeId.value)
+  } else {
+    initForm()
+  }
+  loading.value = false
+})
+
+watch(routeId, async (newId, oldId) => {
+  if (newId === oldId) return
+  loading.value = true
+  clearErrors()
+  if (newId) {
+    await loadItem(newId)
+  } else {
+    item.value = null
+    initForm()
+  }
+  loading.value = false
+})
+
+// ── Save / delete ─────────────────────────────────────────────────────────────
+
+async function onSave() {
+  const valid = validate(allFields.value, form.value)
+  if (!valid) return
+
+  saving.value = true
+  formError.value = ''
+
+  const res = isEdit.value
+    ? await api.patch<Record<string, unknown>>(
+        `/taxonomy/${type.value}/${routeId.value!}`,
+        form.value
+      )
+    : await api.post<Record<string, unknown>>(`/taxonomy/${type.value}`, form.value)
+
+  saving.value = false
+
+  if (!res.ok) {
+    const raw = res.error as {
+      code: string
+      message: string
+      details?: Array<{ field: string; message: string }>
+    }
+    if (raw.code === 'PUBLISH_VALIDATION_ERROR' && raw.details) {
+      mergeServerErrors(raw.details)
+    } else if (raw.code === 'SLUG_CONFLICT') {
+      setError('slug', 'This slug is already taken.')
+    } else {
+      formError.value = raw.message
+    }
+    return
+  }
+
+  item.value = res.data
+  taxonomyStore.invalidate(type.value)
+  notify.success('Saved.')
+
+  if (!isEdit.value) {
+    void router.replace({
+      name: 'taxonomy-edit',
+      params: { type: type.value, id: String(res.data.id) },
+    })
+  }
+}
+
+async function doDelete() {
+  showDeleteConfirm.value = false
+  saving.value = true
+  const res = await api.del(`/taxonomy/${type.value}/${routeId.value!}`)
+  saving.value = false
+
+  if (!res.ok) {
+    formError.value = (res as { ok: false; error: { message: string } }).error.message
+    return
+  }
+
+  taxonomyStore.invalidate(type.value)
+  void router.push({ name: 'taxonomy-list', params: { type: type.value } })
+}
+
+// ── Page title ────────────────────────────────────────────────────────────────
+
+const pageTitle = computed(() => {
+  if (!isEdit.value) return `New ${taxonomyType.value?.label ?? ''}`
+  const tf = allFields.value.find(f => f.field_type === 'text/plain')
+  return tf ? String(item.value?.[tf.name] ?? '') : (taxonomyType.value?.label ?? '')
+})
+</script>
+
+<template>
+  <!-- Loading -->
+  <div v-if="loading" class="flex items-center justify-center py-20">
+    <span
+      class="inline-block h-6 w-6 animate-spin rounded-full border-2 border-indigo-600 border-t-transparent"
+      aria-hidden="true"
+    />
+  </div>
+
+  <div v-else-if="!taxonomyType" class="py-12 text-center text-sm text-gray-500">
+    Taxonomy type not found.
+  </div>
+
+  <div v-else>
+    <!-- Page header -->
+    <div class="mb-6 flex items-start justify-between gap-4">
+      <div>
+        <p class="text-xs font-medium uppercase tracking-wide text-gray-400">
+          {{ taxonomyType.label }}
+        </p>
+        <h1 class="text-[26px] font-bold tracking-tight text-ink">{{ pageTitle }}</h1>
+      </div>
+
+      <!-- Action bar -->
+      <div class="flex shrink-0 items-center gap-2">
+        <button
+          v-if="can('taxonomy:delete') && isEdit"
+          type="button"
+          :disabled="saving"
+          class="rounded-md px-3 py-2 text-sm font-medium text-red-600 ring-1 ring-inset ring-red-300 hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-50"
+          @click="showDeleteConfirm = true"
+        >
+          Delete
+        </button>
+
+        <button
+          v-if="isEdit ? can('taxonomy:edit') : can('taxonomy:create')"
+          type="button"
+          :disabled="saving"
+          class="rounded-[11px] bg-indigo-600 px-4 py-2.5 text-[13.5px] font-semibold text-white shadow-[0_3px_10px_rgba(91,87,232,0.3)] transition-all hover:bg-indigo-700 hover:shadow-[0_6px_18px_rgba(91,87,232,0.4)] disabled:cursor-not-allowed disabled:opacity-50"
+          @click="onSave"
+        >
+          {{ saving ? 'Saving…' : 'Save' }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Flat field layout — no tabs, no slug, no publish toggle -->
+    <div class="space-y-5">
+      <component
+        :is="componentFor(field)"
+        v-for="field in allFields"
+        :key="field.name"
+        :field="field"
+        :model-value="form[field.name]"
+        :error="errors[field.name]"
+        :disabled="saving"
+        @update:model-value="updateField(field.name, $event)"
+      />
+    </div>
+
+    <!-- Form-level error -->
+    <p v-if="formError" class="mt-4 text-sm text-red-600" role="alert">
+      {{ formError }}
+    </p>
+
+    <!-- Delete confirmation -->
+    <ConfirmDialog
+      v-if="showDeleteConfirm"
+      message="Are you sure you want to delete this term? This action cannot be undone."
+      :on-confirm="doDelete"
+      :on-cancel="() => (showDeleteConfirm = false)"
+    />
+  </div>
+</template>

package/src/views/taxonomy/TaxonomyListView.vue

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useDebounceFn } from '@vueuse/core'
+import { useApiClient } from '../../composables/useApiClient'
+import { usePermission } from '../../composables/usePermission'
+import { useSchemaStore } from '../../stores/schema'
+import { useTaxonomyStore, DEFAULT_PAGE_SIZE } from '../../stores/taxonomy'
+import Pagination from '../../components/shared/Pagination.vue'
+
+const route = useRoute()
+const router = useRouter()
+const api = useApiClient()
+const { can } = usePermission()
+const schemaStore = useSchemaStore()
+const taxonomyStore = useTaxonomyStore()
+
+const type = computed(() => route.params.type as string)
+const taxonomyType = computed(() => schemaStore.taxonomyTypes[type.value])
+
+// First text/plain field — used as the title column.
+const titleField = computed(
+  () => taxonomyType.value?.fields.find(f => f.field_type === 'text/plain')?.name ?? 'id'
+)
+
+const items = ref<Record<string, unknown>[]>([])
+const total = ref(0)
+const page = ref(1)
+const loading = ref(false)
+const search = ref('')
+
+function formatDate(val: unknown): string {
+  if (typeof val !== 'string' || !val) return '—'
+  return new Date(val).toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  })
+}
+
+async function loadPage(p: number) {
+  loading.value = true
+
+  const term = search.value.trim()
+  if (term === '') {
+    const cached = taxonomyStore.getPage(type.value, p, DEFAULT_PAGE_SIZE)
+    if (cached) {
+      items.value = cached as Record<string, unknown>[]
+      total.value = taxonomyStore.total
+      loading.value = false
+      return
+    }
+  }
+
+  const searchParam = term !== '' ? `&search=${encodeURIComponent(term)}` : ''
+  const res = await api.get<Record<string, unknown>[]>(
+    `/taxonomy/${type.value}?page=${p}&per_page=${DEFAULT_PAGE_SIZE}${searchParam}`
+  )
+  loading.value = false
+
+  if (res.ok) {
+    items.value = res.data
+    const raw = res as unknown as { meta?: { total: number } }
+    total.value = raw.meta?.total ?? res.data.length
+    if (term === '') {
+      taxonomyStore.total = total.value
+      taxonomyStore.setPage(type.value, p, DEFAULT_PAGE_SIZE, res.data)
+    }
+  }
+}
+
+const onSearchInput = useDebounceFn(() => {
+  page.value = 1
+  void loadPage(1)
+}, 300)
+
+onMounted(() => { void loadPage(page.value) })
+
+watch(type, () => {
+  page.value = 1
+  items.value = []
+  void loadPage(1)
+})
+
+function onPageChange(p: number) {
+  page.value = p
+  void loadPage(p)
+}
+
+function goToEdit(item: Record<string, unknown>) {
+  void router.push({
+    name: 'taxonomy-edit',
+    params: { type: type.value, id: String(item.id) },
+  })
+}
+
+function goToCreate() {
+  void router.push({ name: 'taxonomy-new', params: { type: type.value } })
+}
+</script>
+
+<template>
+  <div>
+    <!-- Page header -->
+    <div class="mb-5.5 flex flex-wrap items-center justify-between gap-4">
+      <h1 class="text-[26px] font-bold tracking-tight text-ink">
+        {{ taxonomyType?.label ?? type }}
+      </h1>
+      <button
+        v-if="can('taxonomy:create')"
+        type="button"
+        class="inline-flex items-center gap-1.75 rounded-[11px] bg-indigo-600 px-4 py-2.5 text-[13.5px] font-semibold text-white shadow-[0_3px_10px_rgba(91,87,232,0.3)] transition-all hover:bg-indigo-700 hover:shadow-[0_6px_18px_rgba(91,87,232,0.4)]"
+        @click="goToCreate"
+      >
+        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14" /><path d="M5 12h14" /></svg>
+        New {{ taxonomyType?.label ?? 'Term' }}
+      </button>
+    </div>
+
+    <!-- Search -->
+    <div class="mb-4 flex h-9.5 items-center gap-2 rounded-[10px] border border-card-border bg-[#FBFBFD] px-2.75 text-[13px] transition-colors focus-within:border-indigo-400">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-faint">
+        <path d="M21 21l-4.3-4.3" /><path d="M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z" />
+      </svg>
+      <input
+        v-model="search"
+        type="text"
+        placeholder="Search terms…"
+        class="w-full bg-transparent text-ink outline-none placeholder:text-faint"
+        @input="onSearchInput"
+      />
+    </div>
+
+    <!-- Loading skeleton -->
+    <div v-if="loading" class="space-y-2">
+      <div
+        v-for="n in 6"
+        :key="n"
+        class="h-12 animate-pulse rounded-[10px] bg-gray-100"
+      />
+    </div>
+
+    <!-- Empty state -->
+    <div
+      v-else-if="items.length === 0"
+      class="rounded-2xl border border-dashed border-gray-300 p-12 text-center"
+    >
+      <p class="text-sm text-muted">
+        {{ search.trim() !== '' ? `No results for “${search.trim()}”.` : 'No terms yet.' }}
+      </p>
+      <button
+        v-if="can('taxonomy:create') && search.trim() === ''"
+        type="button"
+        class="mt-3 text-sm font-medium text-indigo-600 hover:text-indigo-800"
+        @click="goToCreate"
+      >
+        Create the first one →
+      </button>
+    </div>
+
+    <!-- Table -->
+    <div v-else class="overflow-hidden rounded-2xl border border-card-border bg-white shadow-[0_1px_2px_rgba(24,24,48,0.04),0_10px_28px_rgba(24,24,48,0.04)]">
+      <table class="w-full text-sm">
+        <thead class="text-[11.5px] font-bold uppercase tracking-[.06em] text-faint">
+          <tr class="border-b border-divider">
+            <th class="px-5.5 py-3.5 text-left">Name</th>
+            <th class="px-5.5 py-3.5 text-left">Updated</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-[#F4F3F9]">
+          <tr
+            v-for="item in items"
+            :key="String(item.id)"
+            class="cursor-pointer transition-colors hover:bg-[#FAFAFE]"
+            @click="goToEdit(item)"
+          >
+            <td class="px-5.5 py-4 text-[14.5px] font-semibold text-ink">
+              {{ item[titleField] ?? '—' }}
+            </td>
+            <td class="px-5.5 py-4 text-[13px] text-faint">
+              {{ formatDate(item.updated_at) }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Pagination -->
+    <div v-if="!loading && total > DEFAULT_PAGE_SIZE" class="mt-4 flex justify-center">
+      <Pagination
+        :total="total"
+        :page="page"
+        :per-page="DEFAULT_PAGE_SIZE"
+        @update:page="onPageChange"
+      />
+    </div>
+  </div>
+</template>