@bobbykim/manguito-cms-admin 0.1.1 → 0.3.0

package/src/components/shared/Pagination.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  total: number
+  page: number
+  perPage: number
+}>()
+
+const emit = defineEmits<{
+  'update:page': [page: number]
+}>()
+
+const totalPages = computed(() => Math.max(1, Math.ceil(props.total / props.perPage)))
+
+// Sliding-window range: always show first + last, ±1 around current, null = ellipsis.
+const pageRange = computed<(number | null)[]>(() => {
+  const t = totalPages.value
+  const c = props.page
+
+  if (t <= 7) return Array.from({ length: t }, (_, i) => i + 1)
+
+  const pages: (number | null)[] = [1]
+  if (c > 3) pages.push(null)
+
+  const start = Math.max(2, c - 1)
+  const end = Math.min(t - 1, c + 1)
+  for (let i = start; i <= end; i++) pages.push(i)
+
+  if (c < t - 2) pages.push(null)
+  pages.push(t)
+
+  return pages
+})
+
+function go(p: number) {
+  if (p < 1 || p > totalPages.value || p === props.page) return
+  emit('update:page', p)
+}
+</script>
+
+<template>
+  <nav
+    v-if="totalPages > 1"
+    class="flex items-center gap-1"
+    aria-label="Pagination"
+  >
+    <button
+      type="button"
+      class="rounded-md px-2.5 py-1.5 text-sm font-medium text-gray-600 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-40"
+      :disabled="page === 1"
+      aria-label="Previous page"
+      @click="go(page - 1)"
+    >
+      &lsaquo;
+    </button>
+
+    <template v-for="(item, i) in pageRange" :key="i">
+      <span
+        v-if="item === null"
+        class="px-1.5 py-1.5 text-sm text-gray-400"
+        aria-hidden="true"
+      >
+        &hellip;
+      </span>
+      <button
+        v-else
+        type="button"
+        :aria-label="`Page ${item}`"
+        :aria-current="item === page ? 'page' : undefined"
+        :class="[
+          'min-w-8 rounded-md px-2.5 py-1.5 text-sm font-medium',
+          item === page
+            ? 'bg-indigo-600 text-white'
+            : 'text-gray-600 hover:bg-gray-100',
+        ]"
+        @click="go(item)"
+      >
+        {{ item }}
+      </button>
+    </template>
+
+    <button
+      type="button"
+      class="rounded-md px-2.5 py-1.5 text-sm font-medium text-gray-600 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-40"
+      :disabled="page === totalPages"
+      aria-label="Next page"
+      @click="go(page + 1)"
+    >
+      &rsaquo;
+    </button>
+  </nav>
+</template>

package/src/components/shared/StatusBadge.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineProps<{ published: boolean }>()
+</script>
+
+<template>
+  <span
+    :class="[
+      'inline-flex items-center rounded-full px-[11px] py-1 text-xs font-semibold',
+      published ? 'bg-[#E7F6EC] text-[#1E8E4E]' : 'bg-[#FBF1DF] text-[#B5790E]',
+    ]"
+  >
+    {{ published ? 'Published' : 'Draft' }}
+  </span>
+</template>

package/src/components/shared/ToastContainer.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useUiStore } from '../../stores/ui'
+
+const ui = useUiStore()
+
+// Newest at top — the store appends with push(), so reverse for display.
+const visibleToasts = computed(() => [...ui.toasts].reverse())
+
+const variantClasses: Record<string, string> = {
+  success: 'bg-green-600 text-white',
+  error:   'bg-red-600 text-white',
+  warning: 'bg-amber-500 text-white',
+  info:    'bg-blue-600 text-white',
+}
+</script>
+
+<template>
+  <div
+    aria-live="polite"
+    aria-atomic="false"
+    class="pointer-events-none fixed bottom-4 right-4 z-50 flex flex-col gap-2"
+  >
+    <div
+      v-for="toast in visibleToasts"
+      :key="toast.id"
+      :class="[
+        'pointer-events-auto flex w-80 items-start gap-3 rounded-lg px-4 py-3 shadow-lg',
+        variantClasses[toast.variant] ?? 'bg-blue-600 text-white',
+      ]"
+      role="status"
+    >
+      <span class="flex-1 text-sm">{{ toast.message }}</span>
+      <button
+        type="button"
+        class="shrink-0 opacity-80 hover:opacity-100"
+        :aria-label="`Dismiss: ${toast.message}`"
+        @click="ui.removeToast(toast.id)"
+      >
+        &times;
+      </button>
+    </div>
+  </div>
+</template>

package/src/composables/__tests__/useApiClient.test.ts

@@ -0,0 +1,90 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
+import { http, HttpResponse } from 'msw'
+import { server } from '../../test-utils/server'
+import { useApiClient } from '../useApiClient'
+import { useAuthStore } from '../../stores/auth'
+
+const mockPush = vi.fn()
+
+vi.mock('vue-router', () => ({
+  useRouter: () => ({ push: mockPush }),
+}))
+
+const ADMIN = '/admin'
+
+beforeEach(() => {
+  setActivePinia(createPinia())
+  mockPush.mockClear()
+})
+
+describe('useApiClient', () => {
+  it('successful GET returns { ok: true, data: ... }', async () => {
+    server.use(
+      http.get(`${ADMIN}/api/items`, () =>
+        HttpResponse.json({ ok: true, data: [{ id: 1, name: 'test' }] })
+      )
+    )
+    const { get } = useApiClient()
+    const result = await get<{ id: number; name: string }[]>('/items')
+    expect(result).toEqual({ ok: true, data: [{ id: 1, name: 'test' }] })
+  })
+
+  it('401 → triggers refresh → if refresh succeeds → original call retried', async () => {
+    let getCallCount = 0
+    server.use(
+      http.get(`${ADMIN}/api/protected`, () => {
+        getCallCount++
+        if (getCallCount === 1) return new HttpResponse(null, { status: 401 })
+        return HttpResponse.json({ ok: true, data: 'retry-result' })
+      }),
+      http.post(`${ADMIN}/api/auth/refresh`, () => new HttpResponse(null, { status: 200 }))
+    )
+    const { get } = useApiClient()
+    const result = await get('/protected')
+
+    // Refresh was attempted and retry succeeded
+    expect(getCallCount).toBe(2)
+    expect(result).toEqual({ ok: true, data: 'retry-result' })
+  })
+
+  it('401 on retry (isRetrying=true) → no further refresh attempt — only one retry maximum', async () => {
+    let refreshCount = 0
+    server.use(
+      // All calls to the resource return 401
+      http.get(`${ADMIN}/api/protected`, () =>
+        HttpResponse.json(
+          { ok: false, error: { code: 'UNAUTHORIZED', message: 'Session expired.' } },
+          { status: 401 }
+        )
+      ),
+      http.post(`${ADMIN}/api/auth/refresh`, () => {
+        refreshCount++
+        return new HttpResponse(null, { status: 200 })
+      })
+    )
+    const { get } = useApiClient()
+    await get('/protected')
+
+    // Refresh was attempted exactly once: for the first 401.
+    // The retry also got 401 but isRetrying=true, so no second refresh.
+    expect(refreshCount).toBe(1)
+  })
+
+  it('failed refresh → authStore.clear() called and redirect to login', async () => {
+    server.use(
+      http.get(`${ADMIN}/api/protected`, () => new HttpResponse(null, { status: 401 })),
+      // Refresh endpoint returns 401 → refresh fails
+      http.post(`${ADMIN}/api/auth/refresh`, () => new HttpResponse(null, { status: 401 }))
+    )
+    const authStore = useAuthStore()
+    authStore.setUser({ id: 'u1', email: 'test@test.local', role: 'editor' })
+    const clearSpy = vi.spyOn(authStore, 'clear')
+
+    const { get } = useApiClient()
+    await get('/protected')
+
+    expect(clearSpy).toHaveBeenCalled()
+    expect(mockPush).toHaveBeenCalledWith(`${ADMIN}/login`)
+  })
+})

package/src/composables/__tests__/useFormValidation.test.ts

@@ -0,0 +1,83 @@
+import { describe, it, expect } from 'vitest'
+import type { ParsedField } from '@bobbykim/manguito-cms-core'
+import { useFormValidation } from '../useFormValidation'
+
+function makeField(overrides: Partial<ParsedField> = {}): ParsedField {
+  return {
+    name: 'title',
+    label: 'Title',
+    field_type: 'text/plain',
+    required: true,
+    nullable: false,
+    order: 0,
+    validation: { required: true },
+    db_column: { column_name: 'title', column_type: 'varchar', nullable: false },
+    ui_component: { component: 'text-input' },
+    ...overrides,
+  }
+}
+
+describe('useFormValidation', () => {
+  it('validate(): required field empty → adds error for that field', () => {
+    const { validate, touch, errors } = useFormValidation()
+    const field = makeField({ name: 'title', label: 'Title', required: true })
+    touch('title')
+    validate([field], { title: '' })
+    expect(errors.value['title']).toBe('Title is required.')
+  })
+
+  it('validate(): field with value → no error', () => {
+    const { validate, touch, errors } = useFormValidation()
+    const field = makeField({ name: 'title', required: true })
+    touch('title')
+    validate([field], { title: 'Hello world' })
+    expect(errors.value['title']).toBeUndefined()
+  })
+
+  it('blur behavior: error only shown after touch() is called for that field', () => {
+    const { validate, touch, errors } = useFormValidation()
+    const field = makeField({ name: 'title', required: true })
+
+    // validate without touching — validation returns false but no visible error
+    const invalid = validate([field], { title: '' })
+    expect(invalid).toBe(false)
+    expect(errors.value['title']).toBeUndefined()
+
+    // touch then validate again — error now appears
+    touch('title')
+    validate([field], { title: '' })
+    expect(errors.value['title']).toBeDefined()
+  })
+
+  it('publish mode: all fields validated regardless of touched state', () => {
+    const { validate, errors } = useFormValidation()
+    const field = makeField({ name: 'title', required: true })
+
+    // validateAll = true (publish mode) — no touch() needed
+    const valid = validate([field], { title: '' }, true)
+    expect(valid).toBe(false)
+    expect(errors.value['title']).toBe('Title is required.')
+  })
+
+  it('mergeServerErrors(): PUBLISH_VALIDATION_ERROR details merged into errors state', () => {
+    const { mergeServerErrors, errors } = useFormValidation()
+    mergeServerErrors([
+      { field: 'title', message: 'Title is too long.' },
+      { field: 'body', message: 'Body is required.' },
+    ])
+    expect(errors.value['title']).toBe('Title is too long.')
+    expect(errors.value['body']).toBe('Body is required.')
+  })
+
+  it('clearErrors(): resets all error state', () => {
+    const { validate, touch, clearErrors, errors, touched } = useFormValidation()
+    const field = makeField({ name: 'title', required: true })
+    touch('title')
+    validate([field], { title: '' }, true)
+    expect(Object.keys(errors.value).length).toBeGreaterThan(0)
+
+    clearErrors()
+    expect(Object.keys(errors.value)).toHaveLength(0)
+    expect(touched.value.size).toBe(0)
+  })
+})

package/src/composables/__tests__/usePermission.test.ts

@@ -0,0 +1,116 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
+import type { ParsedRole } from '@bobbykim/manguito-cms-core'
+import { useAuthStore } from '../../stores/auth'
+import { useSchemaStore } from '../../stores/schema'
+import { usePermission } from '../usePermission'
+
+// Five roles with clear hierarchy and distinct permission sets.
+const roles: ParsedRole[] = [
+  {
+    name: 'admin',
+    label: 'Admin',
+    is_system: true,
+    hierarchy_level: 0,
+    permissions: [
+      'content:read', 'content:create', 'content:edit', 'content:delete',
+      'media:read', 'media:create', 'media:edit', 'media:delete',
+      'taxonomy:read', 'taxonomy:create', 'taxonomy:edit', 'taxonomy:delete',
+      'users:read', 'users:create', 'users:edit', 'users:delete',
+      'roles:read',
+    ],
+  },
+  {
+    name: 'manager',
+    label: 'Manager',
+    is_system: false,
+    hierarchy_level: 1,
+    permissions: [
+      'content:read', 'content:create', 'content:edit', 'content:delete',
+      'media:read', 'media:create',
+      'taxonomy:read', 'taxonomy:create', 'taxonomy:edit',
+      'users:read',
+    ],
+  },
+  {
+    name: 'editor',
+    label: 'Editor',
+    is_system: false,
+    hierarchy_level: 2,
+    permissions: ['content:read', 'content:create', 'content:edit', 'media:read'],
+  },
+  {
+    name: 'writer',
+    label: 'Writer',
+    is_system: false,
+    hierarchy_level: 3,
+    permissions: ['content:read', 'content:create'],
+  },
+  {
+    name: 'viewer',
+    label: 'Viewer',
+    is_system: false,
+    hierarchy_level: 4,
+    permissions: [],
+  },
+]
+
+let authStore: ReturnType<typeof useAuthStore>
+let schemaStore: ReturnType<typeof useSchemaStore>
+
+beforeEach(() => {
+  setActivePinia(createPinia())
+  authStore = useAuthStore()
+  schemaStore = useSchemaStore()
+  schemaStore.setRoles(roles)
+})
+
+describe('usePermission', () => {
+  describe('can()', () => {
+    it('can("content:read") is true for editor', () => {
+      authStore.setUser({ id: '1', email: 'editor@test.local', role: 'editor' })
+      const { can } = usePermission()
+      expect(can('content:read')).toBe(true)
+    })
+
+    it('can("content:read") is false for viewer who lacks it', () => {
+      authStore.setUser({ id: '2', email: 'viewer@test.local', role: 'viewer' })
+      const { can } = usePermission()
+      expect(can('content:read')).toBe(false)
+    })
+
+    it('can("users:read") is false for editor', () => {
+      authStore.setUser({ id: '1', email: 'editor@test.local', role: 'editor' })
+      const { can } = usePermission()
+      expect(can('users:read')).toBe(false)
+    })
+  })
+
+  describe('rolesBelow()', () => {
+    it('manager (level 1): returns editor, writer, viewer — never admin', () => {
+      authStore.setUser({ id: '1', email: 'manager@test.local', role: 'manager' })
+      const { rolesBelow } = usePermission()
+      const below = rolesBelow()
+      const names = below.map(r => r.name)
+
+      expect(names).toContain('editor')
+      expect(names).toContain('writer')
+      expect(names).toContain('viewer')
+      expect(names).not.toContain('admin')
+      expect(names).not.toContain('manager')
+    })
+
+    it('admin (level 0): returns all roles except admin itself', () => {
+      authStore.setUser({ id: '1', email: 'admin@test.local', role: 'admin' })
+      const { rolesBelow } = usePermission()
+      const below = rolesBelow()
+      const names = below.map(r => r.name)
+
+      expect(names).toContain('manager')
+      expect(names).toContain('editor')
+      expect(names).toContain('writer')
+      expect(names).toContain('viewer')
+      expect(names).not.toContain('admin')
+    })
+  })
+})

package/src/composables/useApiClient.ts

@@ -0,0 +1,68 @@
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '../stores/auth'
+
+type ApiResult<T> =
+  | { ok: true; data: T }
+  | { ok: false; error: { code: string; message: string } }
+
+export function useApiClient() {
+  const router = useRouter()
+  const authStore = useAuthStore()
+
+  async function request<T>(
+    path: string,
+    options?: RequestInit,
+    isRetrying = false
+  ): Promise<ApiResult<T>> {
+    const response = await fetch(`${__ADMIN_PREFIX__}/api${path}`, {
+      ...options,
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+        ...options?.headers,
+      },
+    })
+
+    if (response.status === 401 && !isRetrying) {
+      const refreshed = await tryRefresh()
+      if (!refreshed) {
+        authStore.clear()
+        router.push(`${__ADMIN_PREFIX__}/login`)
+        return { ok: false, error: { code: 'UNAUTHORIZED', message: 'Session expired.' } }
+      }
+      return request<T>(path, options, true)
+    }
+
+    return response.json() as Promise<ApiResult<T>>
+  }
+
+  async function tryRefresh(): Promise<boolean> {
+    const res = await fetch(`${__ADMIN_PREFIX__}/api/auth/refresh`, {
+      method: 'POST',
+      credentials: 'include',
+    })
+    return res.ok
+  }
+
+  function get<T>(path: string) {
+    return request<T>(path, { method: 'GET' })
+  }
+
+  function post<T>(path: string, body: unknown) {
+    return request<T>(path, { method: 'POST', body: JSON.stringify(body) })
+  }
+
+  function patch<T>(path: string, body: unknown) {
+    return request<T>(path, { method: 'PATCH', body: JSON.stringify(body) })
+  }
+
+  function put<T>(path: string, body: unknown) {
+    return request<T>(path, { method: 'PUT', body: JSON.stringify(body) })
+  }
+
+  function del(path: string) {
+    return request(path, { method: 'DELETE' })
+  }
+
+  return { get, post, patch, put, del }
+}

package/src/composables/useDirtyState.ts

@@ -0,0 +1,28 @@
+import { ref, computed } from 'vue'
+
+export function useDirtyState() {
+  const currentData = ref<unknown>(null)
+  const savedSnapshot = ref<unknown>(null)
+  const hasSaved = ref(false)
+
+  // Comparing via JSON.stringify handles nested objects. Form data is expected
+  // to be serializable plain objects — no class instances or circular refs.
+  const isDirty = computed(() => {
+    if (!hasSaved.value) return false
+    return JSON.stringify(currentData.value) !== JSON.stringify(savedSnapshot.value)
+  })
+
+  function markSaved(data: unknown) {
+    const snapshot = JSON.parse(JSON.stringify(data ?? null)) as unknown
+    currentData.value = snapshot
+    savedSnapshot.value = snapshot
+    hasSaved.value = true
+  }
+
+  function confirmNavigation(): boolean {
+    if (!isDirty.value) return true
+    return window.confirm('You have unsaved changes. Are you sure you want to leave?')
+  }
+
+  return { currentData, isDirty, markSaved, confirmNavigation }
+}

package/src/composables/useFormValidation.ts

@@ -0,0 +1,107 @@
+import { ref } from 'vue'
+import type { ParsedField } from '@bobbykim/manguito-cms-core'
+
+export function useFormValidation() {
+  const errors = ref<Record<string, string>>({})
+  const touched = ref<Set<string>>(new Set())
+
+  function touch(field: string) {
+    touched.value.add(field)
+  }
+
+  function setError(field: string, message: string) {
+    errors.value[field] = message
+  }
+
+  function clearErrors() {
+    errors.value = {}
+    touched.value = new Set()
+  }
+
+  function mergeServerErrors(details: Array<{ field: string; message: string }>) {
+    for (const { field, message } of details) {
+      errors.value[field] = message
+    }
+  }
+
+  function validate(
+    fields: ParsedField[],
+    values: Record<string, unknown>,
+    validateAll = false
+  ): boolean {
+    // When validating for publish, mark all fields touched so errors persist
+    // for subsequent interactions — no disappearing errors after a publish attempt.
+    if (validateAll) {
+      for (const field of fields) {
+        touched.value.add(field.name)
+      }
+    }
+
+    let allValid = true
+
+    for (const field of fields) {
+      const value = values[field.name]
+      const errorMessage = checkField(field, value)
+
+      if (errorMessage) {
+        allValid = false
+        if (touched.value.has(field.name)) {
+          errors.value[field.name] = errorMessage
+        }
+      } else {
+        delete errors.value[field.name]
+      }
+    }
+
+    return allValid
+  }
+
+  function checkField(field: ParsedField, value: unknown): string | null {
+    const { required, pattern, min, max, max_items, allowed_values } = field.validation
+
+    if (required && isEmpty(value)) {
+      return `${field.label} is required.`
+    }
+
+    if (isEmpty(value)) return null
+
+    if (pattern && typeof value === 'string' && !new RegExp(pattern).test(value)) {
+      return `${field.label} is not in the correct format.`
+    }
+
+    if (typeof value === 'number') {
+      if (min !== undefined && value < min) {
+        return `${field.label} must be at least ${min}.`
+      }
+      if (max !== undefined && value > max) {
+        return `${field.label} must be at most ${max}.`
+      }
+    }
+
+    if (allowed_values && allowed_values.length > 0 && typeof value === 'string') {
+      if (!allowed_values.includes(value)) {
+        return `${field.label} must be one of: ${allowed_values.join(', ')}.`
+      }
+    }
+
+    if (max_items !== undefined && Array.isArray(value) && value.length > max_items) {
+      return `${field.label} can have at most ${max_items} items.`
+    }
+
+    return null
+  }
+
+  function isEmpty(value: unknown): boolean {
+    return value === null || value === undefined || value === ''
+  }
+
+  return {
+    errors,
+    touched,
+    touch,
+    setError,
+    clearErrors,
+    mergeServerErrors,
+    validate,
+  }
+}

package/src/composables/useNotification.ts

@@ -0,0 +1,26 @@
+import { useUiStore } from '../stores/ui'
+
+// Codes where the raw API message is not suitable for end users.
+// Unmapped codes fall back to result.error.message directly.
+const ERROR_MESSAGES: Partial<Record<string, string>> = {
+  INTERNAL_ERROR:          'Something went wrong. Please try again.',
+  NOT_FOUND:               'The requested item could not be found.',
+  STORAGE_ERROR:           'File storage is unavailable. Please try again later.',
+  MEDIA_IN_USE:            'This file is still in use and cannot be deleted.',
+  INSUFFICIENT_PERMISSION: 'You do not have permission to do that.',
+  RATE_LIMITED:            'Too many requests. Please wait before trying again.',
+  UNAUTHORIZED:            'Your session has expired. Please log in again.',
+  TOKEN_EXPIRED:           'Your session has expired. Please log in again.',
+}
+
+export function useNotification() {
+  const ui = useUiStore()
+
+  return {
+    success: (message: string) => ui.addToast('success', message),
+    error: (message: string) => ui.addToast('error', message),
+    warning: (message: string) => ui.addToast('warning', message),
+    apiError: (code: string, fallback: string) =>
+      ui.addToast('error', ERROR_MESSAGES[code] ?? fallback),
+  }
+}