katecms 0.0.0-stage → 1.0.0-beta.1

package/src/runtime/pages/admin/dictionaries/[id].vue

@@ -0,0 +1,246 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
+import { $fetch, navigateTo, useHead, useRoute } from '#imports'
+import { parseAuthError } from '../../../utils/auth-error'
+import { dictionaryApi, dictionaryTermUrl } from '../../../utils/dictionaries'
+import type {
+  AdminDictionaryMeta,
+  DictionaryTermFormModel,
+  DictionaryTermResponse,
+  ParentOption,
+} from '../../../utils/dictionaries'
+import { useCmsPaths } from '../../../composables/useCmsPaths'
+import { useKateCmsTermPanels } from '../../../composables/useKateCmsExtensions'
+
+const route = useRoute()
+const paths = useCmsPaths()
+const rootClass = 'katecms-dictionary-entry'
+const formId = 'cms-dictionary-edit-form'
+
+const dictionarySlug = computed(() => String(route.params.dictionary ?? ''))
+const termId = computed(() => Number(route.params.id))
+
+const dictionary = ref<AdminDictionaryMeta | null>(null)
+const parents = ref<ParentOption[]>([])
+const found = ref(false)
+const loading = ref(true)
+const saving = ref(false)
+const error = ref<string | null>(null)
+const canUpdate = ref(false)
+const canDelete = ref(false)
+const entryForm = ref<{ validateForSubmit: () => boolean } | null>(null)
+const termPanels = useKateCmsTermPanels()
+
+const slugPath = ref('')
+const viewUrl = computed(() => dictionary.value
+  ? dictionaryTermUrl(dictionary.value, slugPath.value)
+  : null)
+
+const form = reactive<DictionaryTermFormModel>({
+  title: '',
+  slug: '',
+  parentId: null,
+  fields: {},
+})
+
+const pageTitle = computed(() => form.title.trim() || 'Edit term')
+useHead({ title: pageTitle })
+
+function applyTerm(res: DictionaryTermResponse) {
+  dictionary.value = res.dictionary
+  parents.value = res.parents
+  form.title = res.term.title
+  form.slug = res.term.slug
+  form.parentId = res.term.parentId
+  slugPath.value = res.term.slugPath || res.term.slug
+  form.fields = { ...(res.term.fields ?? {}) }
+  canUpdate.value = res.canUpdate
+  canDelete.value = res.canDelete
+  found.value = true
+}
+
+async function load() {
+  if (!Number.isInteger(termId.value) || termId.value <= 0) {
+    await navigateTo(paths.dictionary(dictionarySlug.value))
+    return
+  }
+
+  loading.value = true
+  error.value = null
+  found.value = false
+  try {
+    const res = await $fetch<DictionaryTermResponse>(
+      dictionaryApi(dictionarySlug.value, termId.value),
+    )
+    applyTerm(res)
+  }
+  catch (err) {
+    error.value = parseAuthError(err, 'Could not load the term.').message
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+async function submit() {
+  if (saving.value || !dictionary.value || !canUpdate.value) {
+    return
+  }
+  if (!entryForm.value?.validateForSubmit()) {
+    return
+  }
+  saving.value = true
+  error.value = null
+  try {
+    const res = await $fetch<DictionaryTermResponse>(
+      dictionaryApi(dictionarySlug.value, termId.value),
+      {
+        method: 'PATCH',
+        body: {
+          title: form.title.trim(),
+          slug: form.slug.trim(),
+          fields: form.fields,
+          parentId: form.parentId,
+        },
+      },
+    )
+    applyTerm(res)
+    await nextTick()
+  }
+  catch (err) {
+    error.value = parseAuthError(err, 'Could not save the term.').message
+  }
+  finally {
+    saving.value = false
+  }
+}
+
+async function removeTerm() {
+  if (!canDelete.value || saving.value) {
+    return
+  }
+  if (!window.confirm(`Delete “${form.title || 'this term'}”? Child terms will become top-level. This cannot be undone.`)) {
+    return
+  }
+  saving.value = true
+  error.value = null
+  try {
+    await $fetch(dictionaryApi(dictionarySlug.value, termId.value), { method: 'DELETE' })
+    await navigateTo(paths.dictionary(dictionarySlug.value))
+  }
+  catch (err) {
+    error.value = parseAuthError(err, 'Could not delete the term.').message
+  }
+  finally {
+    saving.value = false
+  }
+}
+
+onMounted(load)
+watch([dictionarySlug, termId], load)
+</script>
+
+<template>
+  <div :class="rootClass">
+    <KateCmsAdminHeader
+      :title="pageTitle"
+      :back-to="paths.dictionary(dictionarySlug)"
+    >
+      <KateCmsUiButton
+        v-if="viewUrl"
+        tag="a"
+        variant="secondary"
+        :link="{ url: viewUrl, title: 'View', target: '_blank' }"
+      >
+        View
+      </KateCmsUiButton>
+      <KateCmsUiButton
+        v-if="found && canUpdate"
+        tag="button"
+        type="submit"
+        :form="formId"
+        :disabled="saving"
+      >
+        {{ saving ? 'Saving…' : 'Save' }}
+      </KateCmsUiButton>
+    </KateCmsAdminHeader>
+
+    <KateCmsUiNotice
+      v-if="loading"
+      placement="static"
+      variant="info"
+      message="Loading…"
+      :closable="false"
+    />
+    <KateCmsUiNotice
+      v-else-if="!found"
+      placement="static"
+      variant="danger"
+      :message="error || 'Term not found.'"
+      :closable="false"
+    />
+
+    <template v-else-if="dictionary">
+      <div :class="`${rootClass}__fields`">
+        <KateCmsDictionaryTermForm
+          ref="entryForm"
+          :form-id="formId"
+          :model-value="form"
+          :dictionary="dictionary"
+          :entry-key="termId"
+          :parents="parents"
+          :saving="saving"
+          :error="error"
+          :can-update="canUpdate"
+          :show-submit="false"
+          @update:model-value="(value: DictionaryTermFormModel) => Object.assign(form, value)"
+          @submit="submit"
+        />
+        <component
+          :is="panel"
+          v-for="panel in termPanels"
+          :key="panel"
+        />
+      </div>
+
+      <div
+        v-if="canDelete"
+        :class="`${rootClass}__danger`"
+      >
+        <KateCmsUiButton
+          tag="button"
+          type="button"
+          :variant="['red']"
+          :disabled="saving"
+          @click="removeTerm"
+        >
+          Delete
+        </KateCmsUiButton>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use "../../../assets/styles" as *;
+
+$root: '.katecms-dictionary-entry';
+
+@include katecms-wrapper {
+  #{$root} {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: math-rem(16);
+    min-height: 0;
+    padding: 0 math-rem(8) math-rem(8);
+    overflow: auto;
+
+    &__danger {
+      display: flex;
+      flex-shrink: 0;
+      justify-content: flex-start;
+    }
+  }
+}
+</style>

package/src/runtime/pages/admin/dictionaries/index.vue

@@ -0,0 +1,438 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { $fetch, useHead, useRoute, useRuntimeConfig } from '#imports'
+import { buildFormValues } from '@katecms/core'
+import { parseAuthError } from '../../../utils/auth-error'
+import type { PublicCollectionNav } from '../../../utils/collections'
+import { dictionaryApi, dictionaryTermUrl } from '../../../utils/dictionaries'
+import type {
+  AdminDictionaryMeta,
+  AdminDictionaryTerm,
+  DictionaryListResponse,
+  DictionaryTermFormModel,
+  ParentOption,
+} from '../../../utils/dictionaries'
+import { useCmsPaths } from '../../../composables/useCmsPaths'
+
+const route = useRoute()
+const paths = useCmsPaths()
+const collectionsNav = (useRuntimeConfig().public.katecms?.collections ?? {}) as Record<string, PublicCollectionNav>
+const rootClass = 'katecms-dictionary-list'
+const createFormId = 'cms-dictionary-create-form'
+
+const dictionarySlug = computed(() => String(route.params.dictionary ?? ''))
+
+const dictionary = ref<AdminDictionaryMeta | null>(null)
+const terms = ref<AdminDictionaryTerm[]>([])
+const parents = ref<ParentOption[]>([])
+const canCreate = ref(false)
+
+const loading = ref(true)
+const saving = ref(false)
+const error = ref<string | null>(null)
+const createError = ref<string | null>(null)
+const pendingId = ref<number | null>(null)
+const createKey = ref(0)
+
+const form = reactive<DictionaryTermFormModel>({
+  title: '',
+  slug: '',
+  parentId: null,
+  fields: {},
+})
+
+const title = computed(() => dictionary.value?.labels.name || 'Dictionary')
+useHead({ title })
+
+const attachedLabel = computed(() => {
+  const slugs = dictionary.value?.collections ?? []
+  if (slugs.length === 0) {
+    return ''
+  }
+  const names = slugs.map(slug => collectionsNav[slug]?.labels?.name || slug)
+  return `Used on ${names.join(', ')}`
+})
+
+function termListTitle(term: AdminDictionaryTerm): string {
+  const depth = dictionary.value?.hierarchical ? (term.depth ?? 0) : 0
+  if (depth < 1) {
+    return term.title
+  }
+  return `${'— '.repeat(depth)}${term.title}`
+}
+
+function formatListDate(iso: string): string {
+  const date = new Date(iso)
+  if (Number.isNaN(date.getTime())) {
+    return iso
+  }
+  return date.toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  })
+}
+
+function resetCreateForm() {
+  form.title = ''
+  form.slug = ''
+  form.parentId = null
+  form.fields = dictionary.value
+    ? buildFormValues(dictionary.value.fields ?? {})
+    : {}
+  createKey.value += 1
+}
+
+async function load(showLoading = true) {
+  if (!dictionarySlug.value) {
+    return
+  }
+  if (showLoading) {
+    loading.value = true
+  }
+  error.value = null
+  try {
+    const res = await $fetch<DictionaryListResponse>(dictionaryApi(dictionarySlug.value))
+    dictionary.value = res.dictionary
+    terms.value = res.terms
+    parents.value = res.parents
+    canCreate.value = res.canCreate
+    if (createKey.value === 0) {
+      form.fields = buildFormValues(res.dictionary.fields ?? {})
+    }
+  }
+  catch (err) {
+    if (showLoading) {
+      dictionary.value = null
+      terms.value = []
+      parents.value = []
+    }
+    error.value = parseAuthError(err, 'Could not load the dictionary.').message
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+async function createTerm() {
+  if (saving.value || !dictionary.value || !canCreate.value) {
+    return
+  }
+  saving.value = true
+  createError.value = null
+  try {
+    await $fetch(dictionaryApi(dictionarySlug.value), {
+      method: 'POST',
+      body: {
+        title: form.title.trim(),
+        slug: form.slug.trim(),
+        fields: form.fields,
+        parentId: form.parentId,
+      },
+    })
+    resetCreateForm()
+    await load(false)
+  }
+  catch (err) {
+    createError.value = parseAuthError(err, 'Could not create the term.').message
+  }
+  finally {
+    saving.value = false
+  }
+}
+
+async function removeTerm(term: AdminDictionaryTerm) {
+  if (!term.canDelete || pendingId.value !== null) {
+    return
+  }
+  if (!window.confirm(`Delete “${term.title}”? Child terms will become top-level. This cannot be undone.`)) {
+    return
+  }
+  pendingId.value = term.id
+  error.value = null
+  try {
+    await $fetch(dictionaryApi(dictionarySlug.value, term.id), { method: 'DELETE' })
+    await load(false)
+  }
+  catch (err) {
+    error.value = parseAuthError(err, 'Could not delete the term.').message
+  }
+  finally {
+    pendingId.value = null
+  }
+}
+
+onMounted(load)
+watch(dictionarySlug, async () => {
+  createError.value = null
+  await load()
+  resetCreateForm()
+})
+</script>
+
+<template>
+  <div :class="rootClass">
+    <KateCmsAdminHeader
+      :title="title"
+      :meta="attachedLabel"
+    />
+
+    <KateCmsUiNotice
+      v-if="loading"
+      placement="static"
+      variant="info"
+      message="Loading…"
+      :closable="false"
+    />
+    <KateCmsUiNotice
+      v-else-if="error && !dictionary"
+      placement="static"
+      variant="danger"
+      :message="error"
+      :closable="false"
+    />
+
+    <div
+      v-else-if="dictionary"
+      :class="`${rootClass}__layout`"
+    >
+      <div
+        v-if="canCreate"
+        :class="`${rootClass}__create`"
+      >
+        <div :class="`${rootClass}__create-title`">
+          Add {{ dictionary.labels.singularName }}
+        </div>
+        <KateCmsDictionaryTermForm
+          :key="createKey"
+          :form-id="createFormId"
+          :model-value="form"
+          :dictionary="dictionary"
+          :entry-key="`new-${createKey}`"
+          :parents="parents"
+          :saving="saving"
+          :error="createError"
+          :can-update="true"
+          :submit-label="saving ? 'Adding…' : `Add ${dictionary.labels.singularName}`"
+          @update:model-value="(value: DictionaryTermFormModel) => Object.assign(form, value)"
+          @submit="createTerm"
+        />
+      </div>
+
+      <div :class="`${rootClass}__list`">
+        <KateCmsUiNotice
+          v-if="error"
+          placement="static"
+          variant="danger"
+          :message="error"
+          @close="error = null"
+        />
+        <KateCmsUiNotice
+          v-else-if="!terms.length"
+          placement="static"
+          variant="info"
+          :message="`No ${dictionary.labels.name.toLowerCase()} yet.`"
+          :closable="false"
+        />
+
+        <div
+          v-else
+          :class="`${rootClass}__table-wrap`"
+        >
+          <div
+            :class="[`${rootClass}__columns`, `${rootClass}__columns--head`]"
+            role="row"
+          >
+            <span role="columnheader">Title</span>
+            <span role="columnheader">Slug</span>
+            <span role="columnheader">Date</span>
+            <span
+              role="columnheader"
+              aria-label="Actions"
+            />
+          </div>
+          <div :class="`${rootClass}__rows`">
+            <div
+              v-for="term in terms"
+              :key="term.id"
+              :class="`${rootClass}__columns`"
+              role="row"
+            >
+              <div role="cell">
+                {{ termListTitle(term) }}
+              </div>
+              <div role="cell">
+                {{ term.slug }}
+              </div>
+              <div role="cell">
+                {{ formatListDate(term.updatedAt) }}
+              </div>
+              <div
+                role="cell"
+                :class="`${rootClass}__actions`"
+              >
+                <KateCmsUiButton
+                  v-if="dictionary.public"
+                  tag="a"
+                  :variant="['secondary', 'small']"
+                  :link="{
+                    url: dictionaryTermUrl(dictionary, term.slugPath) || '/',
+                    title: 'View',
+                    target: '_blank',
+                  }"
+                >
+                  View
+                </KateCmsUiButton>
+                <KateCmsUiButton
+                  v-if="term.canUpdate"
+                  tag="a"
+                  :variant="['secondary', 'small']"
+                  :link="{
+                    url: paths.dictionaryTerm(dictionarySlug, term.id),
+                    title: 'Edit',
+                  }"
+                >
+                  Edit
+                </KateCmsUiButton>
+                <KateCmsUiButton
+                  v-if="term.canDelete"
+                  tag="button"
+                  :variant="['red', 'small']"
+                  :disabled="pendingId === term.id"
+                  @click="removeTerm(term)"
+                >
+                  Delete
+                </KateCmsUiButton>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use "../../../assets/styles" as *;
+
+$root: '.katecms-dictionary-list';
+
+@include katecms-wrapper {
+  #{$root} {
+    display: flex;
+    flex-direction: column;
+    gap: math-rem(16);
+    padding: 0 math-rem(8);
+    height: 100%;
+
+    &__layout {
+      display: flex;
+      flex-wrap: wrap;
+      gap: math-rem(8);
+      align-items: start;
+      flex-grow: 1;
+      min-height: 0;
+      overflow: hidden;
+    }
+
+    &__create {
+      flex: 0 0 400px;
+      max-width: 400px;
+      display: flex;
+      flex-direction: column;
+      gap: math-rem(10);
+      min-width: 0;
+      min-height: 0;
+      height: 100%;
+      overflow: auto;
+      padding: 0 math-rem(8) math-rem(8) 0;
+
+      &-title {
+        flex-shrink: 0;
+        font-size: math-rem(15);
+        font-weight: 600;
+      }
+    }
+
+    &__list {
+      flex-basis: 0;
+      flex-grow: 1;
+      align-self: stretch;
+      max-width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: math-rem(12);
+      min-width: 0;
+      min-height: 0;
+      overflow: hidden;
+      padding-bottom: math-rem(8);
+    }
+
+    &__table {
+      &-wrap {
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        overflow-x: auto;
+        overflow-y: hidden;
+        background: $color-surface;
+        border: 1px solid $color-border;
+        border-radius: $border-radius;
+      }
+    }
+
+    &__columns {
+      display: grid;
+      grid-template-columns: minmax(math-rem(160), 2fr) minmax(math-rem(120), 1.4fr) math-rem(200) minmax(math-rem(140), auto);
+      align-items: center;
+      min-width: math-rem(640);
+
+      > [role='columnheader'],
+      > [role='cell'] {
+        min-width: 0;
+        padding: math-rem(10) math-rem(14);
+        overflow-wrap: anywhere;
+      }
+
+      &--head {
+        flex-shrink: 0;
+        background: $color-bg;
+        border-bottom: 1px solid $color-border;
+
+        > [role='columnheader'] {
+          font-size: math-rem(12);
+          font-weight: 600;
+          text-transform: uppercase;
+          letter-spacing: 0.03em;
+          color: $color-muted;
+        }
+      }
+    }
+
+    &__rows {
+      flex: 1;
+      min-height: 0;
+      overflow-x: hidden;
+      overflow-y: auto;
+
+      #{$root}__columns {
+        border-bottom: 1px solid $color-border;
+
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+    }
+
+    &__actions {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      gap: math-rem(8);
+    }
+  }
+}
+</style>