@bobbykim/manguito-cms-admin 0.1.1 → 0.2.0

package/src/views/content/ContentListView.vue

@@ -0,0 +1,236 @@
+<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 { useContentStore, DEFAULT_PAGE_SIZE } from '../../stores/content'
+import Pagination from '../../components/shared/Pagination.vue'
+import StatusBadge from '../../components/shared/StatusBadge.vue'
+
+const route = useRoute()
+const router = useRouter()
+const api = useApiClient()
+const { can } = usePermission()
+const schemaStore = useSchemaStore()
+const contentStore = useContentStore()
+
+const type = computed(() => route.params.type as string)
+const contentType = computed(() => schemaStore.contentTypes[type.value])
+const isSingleton = computed(() => contentType.value?.only_one === true)
+
+// First text/plain field — used as the title column.
+const titleField = computed(
+  () => contentType.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()
+  // Search has no place in the page cache's key — bypass it and hit the API directly.
+  if (term === '') {
+    const cached = contentStore.getPage(type.value, p, DEFAULT_PAGE_SIZE)
+    if (cached) {
+      items.value = cached as Record<string, unknown>[]
+      total.value = contentStore.total
+      loading.value = false
+      return
+    }
+  }
+
+  const searchParam = term !== '' ? `&search=${encodeURIComponent(term)}` : ''
+  const res = await api.get<Record<string, unknown>[]>(
+    `/content/${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 === '') {
+      contentStore.total = total.value
+      contentStore.setPage(type.value, p, DEFAULT_PAGE_SIZE, res.data)
+    }
+  }
+}
+
+const onSearchInput = useDebounceFn(() => {
+  page.value = 1
+  void loadPage(1)
+}, 300)
+
+async function handleSingletonRedirect() {
+  const res = await api.get<Record<string, unknown>[]>(`/content/${type.value}`)
+  const first = res.ok ? res.data[0] : undefined
+  if (first) {
+    void router.replace({
+      name: 'content-edit',
+      params: { type: type.value, id: String(first.id) },
+    })
+  } else {
+    void router.replace({ name: 'content-new', params: { type: type.value } })
+  }
+}
+
+onMounted(async () => {
+  if (!contentType.value) return
+  if (isSingleton.value) {
+    await handleSingletonRedirect()
+    return
+  }
+  await loadPage(page.value)
+})
+
+// Re-fetch when type changes (sidebar nav between content types).
+watch(type, async () => {
+  page.value = 1
+  items.value = []
+  if (!contentType.value) return
+  if (isSingleton.value) {
+    await handleSingletonRedirect()
+    return
+  }
+  await loadPage(1)
+})
+
+function onPageChange(p: number) {
+  page.value = p
+  void loadPage(p)
+}
+
+function goToEdit(item: Record<string, unknown>) {
+  void router.push({
+    name: 'content-edit',
+    params: { type: type.value, id: String(item.id) },
+  })
+}
+
+function goToCreate() {
+  void router.push({ name: 'content-new', params: { type: type.value } })
+}
+</script>
+
+<template>
+  <!-- Loading / redirect for singleton — blank while redirect fires -->
+  <div v-if="isSingleton || !contentType" />
+
+  <div v-else>
+    <!-- Page header -->
+    <div class="mb-[22px] flex flex-wrap items-center justify-between gap-4">
+      <h1 class="text-[26px] font-bold tracking-tight text-ink">{{ contentType.label }}</h1>
+      <button
+        v-if="can('content:create')"
+        type="button"
+        class="inline-flex items-center gap-[7px] 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 {{ contentType.label }}
+      </button>
+    </div>
+
+    <!-- Search -->
+    <div class="mb-4 flex h-[38px] items-center gap-2 rounded-[10px] border border-card-border bg-[#FBFBFD] px-[11px] 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 ${contentType.label.toLowerCase()}…`"
+        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 8"
+        :key="n"
+        class="h-12 animate-pulse rounded-[10px] bg-gray-100"
+      />
+    </div>
+
+    <!-- Empty state -->
+    <div
+      v-else-if="items.length === 0"
+      class="rounded-[16px] border border-dashed border-gray-300 p-12 text-center"
+    >
+      <p class="text-sm text-muted">
+        {{ search.trim() !== '' ? `No results for “${search.trim()}”.` : `No ${contentType.label} items yet.` }}
+      </p>
+      <button
+        v-if="can('content: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-[16px] 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-[22px] py-3.5 text-left">Title</th>
+            <th class="px-[22px] py-3.5 text-left">Slug</th>
+            <th class="px-[22px] py-3.5 text-left">Status</th>
+            <th class="px-[22px] 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-[22px] py-4 text-[14.5px] font-semibold text-ink">
+              {{ item[titleField] ?? '—' }}
+            </td>
+            <td class="px-[22px] py-4 font-mono text-[12.5px] text-muted">
+              {{ item.slug ?? '—' }}
+            </td>
+            <td class="px-[22px] py-4">
+              <StatusBadge :published="item.published === true" />
+            </td>
+            <td class="px-[22px] 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>

package/src/views/content/ContentSettingsView.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { useApiClient } from '../../composables/useApiClient'
+import { useNotification } from '../../composables/useNotification'
+import { useSchemaStore } from '../../stores/schema'
+
+const route = useRoute()
+const api = useApiClient()
+const notify = useNotification()
+const schemaStore = useSchemaStore()
+
+const type = computed(() => route.params.type as string)
+const contentType = computed(() => schemaStore.contentTypes[type.value])
+
+// Available base paths fetched from the API at mount.
+const availableRoutes = ref<string[]>([])
+const selectedPath = ref('')
+const loadingRoutes = ref(true)
+const saving = ref(false)
+const formError = ref('')
+
+onMounted(async () => {
+  // Seed with current path from schema.
+  selectedPath.value = contentType.value?.default_base_path ?? ''
+
+  const res = await api.get<string[]>('/routes')
+  loadingRoutes.value = false
+
+  if (res.ok) {
+    availableRoutes.value = res.data
+    // Ensure the current path appears even if not in the list.
+    if (selectedPath.value && !availableRoutes.value.includes(selectedPath.value)) {
+      availableRoutes.value = [selectedPath.value, ...availableRoutes.value]
+    }
+  } else {
+    // If the routes endpoint isn't available, fall back to a free-text input.
+    availableRoutes.value = []
+  }
+})
+
+async function onSave() {
+  if (!selectedPath.value.trim()) return
+  saving.value = true
+  formError.value = ''
+
+  const res = await api.patch(`/content/${type.value}/settings`, {
+    base_path: selectedPath.value.trim(),
+  })
+
+  saving.value = false
+
+  if (!res.ok) {
+    formError.value = (res as { ok: false; error: { message: string } }).error.message
+    return
+  }
+
+  notify.success('Settings saved.')
+}
+</script>
+
+<template>
+  <div class="max-w-lg">
+    <div class="mb-6">
+      <h1 class="text-[26px] font-bold tracking-tight text-ink">
+        {{ contentType?.label ?? type }} — Settings
+      </h1>
+      <p class="mt-1 text-sm text-gray-500">
+        Change the base path for this content type. This does not modify schema files.
+      </p>
+    </div>
+
+    <div v-if="loadingRoutes" class="space-y-2">
+      <div class="h-8 w-48 animate-pulse rounded bg-gray-100" />
+      <div class="h-10 animate-pulse rounded bg-gray-100" />
+    </div>
+
+    <form v-else class="space-y-4" @submit.prevent="onSave">
+      <div>
+        <label for="base-path" class="block text-[13px] font-semibold text-[#3D3D52]">
+          Base path
+        </label>
+
+        <!-- Dropdown when routes are available -->
+        <select
+          v-if="availableRoutes.length > 0"
+          id="base-path"
+          v-model="selectedPath"
+          :disabled="saving"
+          class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:cursor-not-allowed disabled:opacity-60"
+        >
+          <option v-for="p in availableRoutes" :key="p" :value="p">
+            {{ p }}
+          </option>
+        </select>
+
+        <!-- Free-text fallback when routes endpoint not available -->
+        <input
+          v-else
+          id="base-path"
+          v-model="selectedPath"
+          type="text"
+          :disabled="saving"
+          placeholder="/my-route"
+          class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 font-mono text-sm shadow-sm focus:border-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:cursor-not-allowed disabled:opacity-60"
+        />
+      </div>
+
+      <p v-if="formError" class="text-sm text-red-600" role="alert">
+        {{ formError }}
+      </p>
+
+      <button
+        type="submit"
+        :disabled="saving || !selectedPath.trim()"
+        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"
+      >
+        {{ saving ? 'Saving…' : 'Save' }}
+      </button>
+    </form>
+  </div>
+</template>

package/src/views/media/MediaDetailView.vue

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import type { MediaItem } from '@bobbykim/manguito-cms-core'
+import { useApiClient } from '../../composables/useApiClient'
+import { usePermission } from '../../composables/usePermission'
+import { useNotification } from '../../composables/useNotification'
+import { useMediaStore } from '../../stores/media'
+import ConfirmDialog from '../../components/shared/ConfirmDialog.vue'
+
+const route = useRoute()
+const router = useRouter()
+const api = useApiClient()
+const { can } = usePermission()
+const notify = useNotification()
+const mediaStore = useMediaStore()
+
+const id = computed(() => route.params.id as string)
+
+const item = ref<MediaItem | null>(null)
+const loading = ref(true)
+const altText = ref('')
+const savingAlt = ref(false)
+const deleting = ref(false)
+const showDeleteConfirm = ref(false)
+
+function formatSize(bytes: number): string {
+  if (bytes >= 1_000_000) return `${(bytes / 1_000_000).toFixed(1)} MB`
+  if (bytes >= 1_000) return `${Math.round(bytes / 1_000)} KB`
+  return `${bytes} B`
+}
+
+function formatDate(dateStr: string | Date | unknown): string {
+  if (!dateStr) return '—'
+  return new Date(String(dateStr)).toLocaleString(undefined, {
+    year: 'numeric', month: 'short', day: 'numeric',
+    hour: '2-digit', minute: '2-digit',
+  })
+}
+
+onMounted(async () => {
+  const cached = mediaStore.items.get(id.value)
+  if (cached) {
+    item.value = cached
+    altText.value = cached.alt ?? ''
+    loading.value = false
+    return
+  }
+
+  const res = await api.get<MediaItem>(`/media/${id.value}`)
+  loading.value = false
+  if (res.ok) {
+    item.value = res.data
+    altText.value = res.data.alt ?? ''
+    mediaStore.setItem(res.data)
+  }
+})
+
+async function saveAlt() {
+  if (!item.value) return
+  savingAlt.value = true
+  const res = await api.patch<MediaItem>(`/media/${item.value.id}`, { alt: altText.value.trim() })
+  savingAlt.value = false
+  if (res.ok) {
+    item.value = res.data
+    mediaStore.setItem(res.data)
+    notify.success('Alt text saved.')
+  } else {
+    notify.error(res.error.message)
+  }
+}
+
+async function doDelete() {
+  if (!item.value) return
+  showDeleteConfirm.value = false
+  deleting.value = true
+  const res = await api.del(`/media/${item.value.id}`)
+  deleting.value = false
+  if (!res.ok) {
+    notify.error((res as { ok: false; error: { message: string } }).error.message)
+    return
+  }
+  mediaStore.removeItem(item.value.id)
+  void router.push({ name: 'media-library' })
+}
+
+const canDelete = computed(() => item.value !== null && item.value.reference_count === 0)
+const deleteTooltip = computed(() =>
+  canDelete.value
+    ? undefined
+    : `This file is referenced by ${item.value?.reference_count ?? 0} item${(item.value?.reference_count ?? 0) !== 1 ? 's' : ''} and cannot be deleted.`
+)
+</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="!item" class="py-12 text-center text-sm text-gray-500">
+    Media item not found.
+  </div>
+
+  <div v-else class="mx-auto max-w-2xl space-y-6">
+    <!-- Back link -->
+    <button
+      type="button"
+      class="text-sm text-indigo-600 hover:text-indigo-800"
+      @click="router.back()"
+    >
+      ← Back to library
+    </button>
+
+    <!-- Preview -->
+    <div class="overflow-hidden rounded-2xl border border-card-border shadow-[0_1px_2px_rgba(24,24,48,0.04),0_8px_22px_rgba(24,24,48,0.04)] bg-white">
+      <img
+        v-if="item.type === 'image'"
+        :src="item.url"
+        :alt="item.alt ?? ''"
+        class="max-h-96 w-full object-contain"
+      />
+      <div
+        v-else
+        class="flex h-48 items-center justify-center text-6xl text-gray-300"
+        aria-hidden="true"
+      >
+        {{ item.type === 'video' ? '▶' : '📄' }}
+      </div>
+    </div>
+
+    <!-- Metadata -->
+    <div class="rounded-2xl border border-card-border shadow-[0_1px_2px_rgba(24,24,48,0.04),0_8px_22px_rgba(24,24,48,0.04)] bg-white p-5">
+      <h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500">Metadata</h2>
+      <dl class="grid grid-cols-2 gap-x-6 gap-y-3 text-sm">
+        <div>
+          <dt class="text-gray-500">Type</dt>
+          <dd class="mt-0.5 font-medium text-gray-800">{{ item.mime_type }}</dd>
+        </div>
+        <div>
+          <dt class="text-gray-500">Size</dt>
+          <dd class="mt-0.5 font-medium text-gray-800">{{ formatSize(item.file_size) }}</dd>
+        </div>
+        <div v-if="item.width && item.height">
+          <dt class="text-gray-500">Dimensions</dt>
+          <dd class="mt-0.5 font-medium text-gray-800">{{ item.width }} × {{ item.height }}px</dd>
+        </div>
+        <div v-if="item.duration">
+          <dt class="text-gray-500">Duration</dt>
+          <dd class="mt-0.5 font-medium text-gray-800">{{ item.duration }}s</dd>
+        </div>
+        <div>
+          <dt class="text-gray-500">Uploaded</dt>
+          <dd class="mt-0.5 font-medium text-gray-800">{{ formatDate(item.created_at) }}</dd>
+        </div>
+        <div>
+          <dt class="text-gray-500">References</dt>
+          <dd class="mt-0.5 font-medium text-gray-800">
+            {{ item.reference_count }} content item{{ item.reference_count !== 1 ? 's' : '' }}
+          </dd>
+        </div>
+      </dl>
+    </div>
+
+    <!-- Alt text -->
+    <div class="rounded-2xl border border-card-border shadow-[0_1px_2px_rgba(24,24,48,0.04),0_8px_22px_rgba(24,24,48,0.04)] bg-white p-5">
+      <h2 class="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-500">Alt text</h2>
+      <textarea
+        v-model="altText"
+        rows="3"
+        :disabled="savingAlt"
+        placeholder="Describe this file for screen readers and SEO"
+        class="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-200 disabled:cursor-not-allowed disabled:opacity-60"
+      />
+      <div class="mt-3 flex justify-end">
+        <button
+          type="button"
+          :disabled="savingAlt"
+          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="saveAlt"
+        >
+          {{ savingAlt ? 'Saving…' : 'Save alt text' }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Danger zone -->
+    <div v-if="can('media:delete')" class="rounded-lg border border-red-200 bg-white p-5">
+      <h2 class="mb-1 text-sm font-semibold uppercase tracking-wide text-red-500">Danger zone</h2>
+      <p class="mb-3 text-sm text-gray-500">
+        Permanently deletes this file from storage. This cannot be undone.
+      </p>
+
+      <!-- Wrapper needed for title on a disabled button in some browsers -->
+      <span :title="deleteTooltip">
+        <button
+          type="button"
+          :disabled="!canDelete || deleting"
+          class="rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-50"
+          @click="showDeleteConfirm = true"
+        >
+          {{ deleting ? 'Deleting…' : 'Delete file' }}
+        </button>
+      </span>
+
+      <p v-if="!canDelete" class="mt-2 text-xs text-gray-400">
+        {{ deleteTooltip }}
+      </p>
+    </div>
+
+    <!-- Delete confirmation -->
+    <ConfirmDialog
+      v-if="showDeleteConfirm"
+      message="Permanently delete this file? This action cannot be undone."
+      :on-confirm="doDelete"
+      :on-cancel="() => (showDeleteConfirm = false)"
+    />
+  </div>
+</template>