@motor-cms/ui-admin 1.1.0-alpha.3 → 1.1.0-alpha.5

package/app/components/form/inputs/EntityConfigurationsPanel.vue

@@ -0,0 +1,235 @@
+<script setup lang="ts">
+const props = defineProps<{
+  configurableType: string
+  configurableId: number | string
+}>()
+
+const { t } = useI18n()
+const client = useSanctumClient()
+const { success: notifySuccess, error: notifyError } = useNotify()
+
+interface ConfigVariable {
+  id: number
+  package: string
+  group: string
+  name: string
+  value: string
+}
+
+interface EntityConfiguration {
+  id: number
+  configurable_type: string
+  configurable_id: number
+  config_variable_id: number
+  config_variable?: ConfigVariable
+  value: string | null
+}
+
+const configurations = ref<EntityConfiguration[]>([])
+const configVariables = ref<ConfigVariable[]>([])
+const loading = ref(false)
+const saving = ref(false)
+const removing = ref<number | null>(null)
+
+const newConfigVariableId = ref<number | null>(null)
+const newValue = ref('')
+
+async function loadConfigurations() {
+  loading.value = true
+  try {
+    const response = await client<{ data: EntityConfiguration[] }>('/api/v2/entity-configurations', {
+      query: {
+        configurable_type: props.configurableType,
+        configurable_id: props.configurableId,
+        per_page: 100
+      }
+    })
+    configurations.value = response.data ?? []
+  } catch {
+    configurations.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+async function loadConfigVariables() {
+  try {
+    const response = await client<{ data: ConfigVariable[] }>('/api/v2/config-variables', {
+      query: { per_page: 200 }
+    })
+    configVariables.value = response.data ?? []
+  } catch {
+    configVariables.value = []
+  }
+}
+
+const availableConfigVariables = computed(() => {
+  const usedIds = new Set(configurations.value.map(c => c.config_variable_id))
+  return configVariables.value
+    .filter(v => !usedIds.has(v.id))
+    .map(v => ({
+      label: `${v.package}.${v.group}.${v.name}`,
+      value: v.id
+    }))
+})
+
+const canAdd = computed(() => newConfigVariableId.value !== null)
+
+async function addConfiguration() {
+  if (!canAdd.value) return
+  saving.value = true
+  try {
+    await client('/api/v2/entity-configurations', {
+      method: 'POST',
+      body: {
+        configurable_type: props.configurableType,
+        configurable_id: props.configurableId,
+        config_variable_id: newConfigVariableId.value,
+        value: newValue.value || null
+      }
+    })
+    newConfigVariableId.value = null
+    newValue.value = ''
+    await loadConfigurations()
+    notifySuccess(
+      t('motor-admin.entity_configurations.title'),
+      t('motor-admin.entity_configurations.saved')
+    )
+  } catch (e) {
+    notifyError(
+      t('motor-admin.entity_configurations.title'),
+      (e as Error).message
+    )
+  } finally {
+    saving.value = false
+  }
+}
+
+async function removeConfiguration(config: EntityConfiguration) {
+  removing.value = config.id
+  try {
+    await client(`/api/v2/entity-configurations/${config.id}`, {
+      method: 'DELETE'
+    })
+    await loadConfigurations()
+    notifySuccess(
+      t('motor-admin.entity_configurations.title'),
+      t('motor-admin.entity_configurations.removed')
+    )
+  } catch (e) {
+    notifyError(
+      t('motor-admin.entity_configurations.title'),
+      (e as Error).message
+    )
+  } finally {
+    removing.value = null
+  }
+}
+
+function formatVariableName(cv: ConfigVariable | undefined): string {
+  if (!cv) return '—'
+  return `${cv.package}.${cv.group}.${cv.name}`
+}
+
+onMounted(() => {
+  loadConfigurations()
+  loadConfigVariables()
+})
+</script>
+
+<template>
+  <UCard>
+    <template #header>
+      <div class="flex items-center justify-between">
+        <h3 class="text-base font-semibold">
+          {{ t('motor-admin.entity_configurations.title') }}
+        </h3>
+        <span
+          v-if="configurations.length > 0"
+          class="text-xs text-[var(--ui-text-muted)]"
+        >
+          {{ configurations.length }}
+        </span>
+      </div>
+    </template>
+
+    <div
+      v-if="loading"
+      class="flex items-center justify-center py-6"
+    >
+      <UIcon
+        name="i-lucide-loader-2"
+        class="size-5 animate-spin text-[var(--ui-text-muted)]"
+      />
+    </div>
+
+    <div v-else>
+      <!-- Existing configurations -->
+      <div
+        v-if="configurations.length > 0"
+        class="mb-4 space-y-2"
+      >
+        <div
+          v-for="config in configurations"
+          :key="config.id"
+          class="flex items-center gap-4 py-2.5 px-3 rounded-lg ring-1 ring-[var(--ui-border)] group"
+        >
+          <UIcon
+            name="i-lucide-link"
+            class="size-3.5 text-emerald-500 shrink-0"
+          />
+          <div class="min-w-0 flex-1">
+            <p class="text-sm font-medium truncate">
+              {{ formatVariableName(config.config_variable) }}
+            </p>
+          </div>
+          <div class="shrink-0 max-w-xs">
+            <span class="text-sm text-[var(--ui-text-muted)] font-mono truncate">
+              {{ config.value ?? '—' }}
+            </span>
+          </div>
+          <UButton
+            icon="i-lucide-unlink"
+            variant="ghost"
+            color="error"
+            size="xs"
+            :loading="removing === config.id"
+            class="opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+            @click="removeConfiguration(config)"
+          />
+        </div>
+      </div>
+
+      <p
+        v-else
+        class="text-sm text-[var(--ui-text-muted)] mb-4"
+      >
+        {{ t('motor-admin.entity_configurations.no_configurations') }}
+      </p>
+
+      <!-- Add new configuration -->
+      <div class="flex items-start gap-3">
+        <USelect
+          v-model="newConfigVariableId"
+          :items="availableConfigVariables"
+          :placeholder="t('motor-admin.entity_configurations.select_variable')"
+          class="flex-1"
+        />
+        <UInput
+          v-model="newValue"
+          :placeholder="t('motor-admin.entity_configurations.value')"
+          class="flex-1"
+          @keydown.enter.prevent="addConfiguration"
+        />
+        <UButton
+          icon="i-lucide-plus"
+          variant="outline"
+          :disabled="!canAdd"
+          :loading="saving"
+          class="shrink-0"
+          @click="addConfiguration"
+        />
+      </div>
+    </div>
+  </UCard>
+</template>

package/app/composables/useClientFormExtensions.ts

@@ -0,0 +1,89 @@
+// app/composables/useClientFormExtensions.ts
+import type { Component, Ref } from 'vue'
+
+export interface ClientFormExtension {
+  key: string
+  order: number
+  component: Component
+}
+
+const registry: ClientFormExtension[] = reactive([])
+const validityState = reactive<Record<string, boolean>>({})
+
+const callbackRefs = new Map<string, {
+  validate: Ref<() => boolean | Promise<boolean>>
+  getSubmitData: Ref<() => Record<string, unknown>>
+}>()
+
+function ensureCallbackRefs(key: string) {
+  if (!callbackRefs.has(key)) {
+    callbackRefs.set(key, {
+      validate: ref(() => true),
+      getSubmitData: ref(() => ({})),
+    })
+  }
+  return callbackRefs.get(key)!
+}
+
+export function useClientFormExtensions() {
+  function register(ext: ClientFormExtension) {
+    if (registry.some(e => e.key === ext.key)) return
+    registry.push(ext)
+    registry.sort((a, b) => a.order - b.order)
+    validityState[ext.key] = false
+    ensureCallbackRefs(ext.key)
+  }
+
+  function setValidity(key: string, isValid: boolean) {
+    validityState[key] = isValid
+  }
+
+  async function validateAll(): Promise<boolean> {
+    for (const ext of registry) {
+      const refs = callbackRefs.get(ext.key)
+      if (refs) {
+        const result = await refs.validate.value()
+        if (!result) return false
+      }
+    }
+    return true
+  }
+
+  function getAllSubmitData(): Record<string, unknown> {
+    let merged: Record<string, unknown> = {}
+    for (const ext of registry) {
+      const refs = callbackRefs.get(ext.key)
+      if (refs) {
+        merged = { ...merged, ...refs.getSubmitData.value() }
+      }
+    }
+    return merged
+  }
+
+  const extensions = computed(() => [...registry])
+
+  const allExtensionsValid = computed(() =>
+    registry.length === 0 || registry.every(ext => validityState[ext.key] === true)
+  )
+
+  return { extensions, register, setValidity, allExtensionsValid, validateAll, getAllSubmitData }
+}
+
+export function useExtensionCallbacks(key: string) {
+  const refs = ensureCallbackRefs(key)
+
+  function setValidate(fn: () => boolean | Promise<boolean>) {
+    refs.validate.value = fn
+  }
+
+  function setGetSubmitData(fn: () => Record<string, unknown>) {
+    refs.getSubmitData.value = fn
+  }
+
+  onUnmounted(() => {
+    refs.validate.value = () => true
+    refs.getSubmitData.value = () => ({})
+  })
+
+  return { setValidate, setGetSubmitData }
+}

package/app/composables/useClientLanguages.ts

@@ -0,0 +1,81 @@
+import type { Ref, ComputedRef } from 'vue'
+import type { components } from '@motor-cms/ui-core/app/types/generated/api'
+
+type NavigationTreeResource = components['schemas']['NavigationTreeResource']
+type LanguageResource = components['schemas']['LanguageResource']
+
+interface PaginatedResponse<T> {
+  data: T[]
+}
+
+export interface ClientLanguage {
+  id: number
+  name: string
+}
+
+export interface UseClientLanguagesReturn {
+  languages: Ref<ClientLanguage[]>
+  isMultiLanguage: ComputedRef<boolean>
+  loading: Ref<boolean>
+}
+
+export function useClientLanguages(clientId: Ref<string | number>): UseClientLanguagesReturn {
+  const client = useSanctumClient()
+
+  const languages = ref<ClientLanguage[]>([])
+  const loading = ref(false)
+
+  const isMultiLanguage = computed(() => languages.value.length > 1)
+
+  watch(
+    clientId,
+    async (id) => {
+      if (!id) {
+        languages.value = []
+        return
+      }
+
+      loading.value = true
+      try {
+        const treesResponse = await client<PaginatedResponse<NavigationTreeResource>>(
+          `/api/v2/navigation-trees?filter[client_id]=${id}&per_page=100`
+        )
+
+        const trees = treesResponse.data ?? []
+
+        const distinctLanguageIds = [...new Set(
+          trees
+            .map((tree) => Number(tree.language_id))
+            .filter((langId) => !isNaN(langId) && langId > 0)
+        )]
+
+        if (distinctLanguageIds.length === 0) {
+          languages.value = []
+          return
+        }
+
+        const languagesResponse = await client<PaginatedResponse<LanguageResource>>(
+          '/api/v2/languages?per_page=100'
+        )
+
+        const allLanguages = languagesResponse.data ?? []
+
+        languages.value = allLanguages
+          .filter((lang) => distinctLanguageIds.includes(lang.id))
+          .map((lang) => ({ id: lang.id, name: lang.english_name }))
+          .sort((a, b) => a.id - b.id)
+      } catch {
+        languages.value = []
+      } finally {
+        loading.value = false
+      }
+    },
+    { immediate: true }
+  )
+
+  return {
+    languages,
+    isMultiLanguage,
+    loading,
+  }
+}

package/app/composables/useDashboardData.ts

@@ -0,0 +1,169 @@
+export interface DashboardStats {
+  pages_total: number
+  pages_draft: number
+  pages_published: number
+  pages_scheduled: number
+  media_total: number
+  navigation_trees: number
+}
+
+export interface ActivityItem {
+  id: number
+  description: string
+  subject_type: string
+  subject_id: number
+  subject_name: string | null
+  subject_exists: boolean
+  causer_name: string | null
+  created_at: string
+}
+
+export interface PublishingQueueItem {
+  id: number
+  name: string
+  to_be_published_at: string
+  publishable_type: string
+  publishable_id: number
+}
+
+export interface AnnouncementItem {
+  id: number
+  title: string
+  body: string | null
+  type: 'info' | 'warning' | 'error'
+  audience: 'self' | 'users' | 'client'
+  linkable_type: string | null
+  linkable_id: number | null
+  linkable_name: string | null
+  linkable_url: string | null
+  created_by_name: string | null
+  starts_at: string | null
+  created_at: string
+}
+
+interface ActivityMeta {
+  current_page: number
+  last_page: number
+  per_page: number
+  total: number
+}
+
+interface DashboardResponse {
+  data: {
+    stats: DashboardStats
+    activity: ActivityItem[]
+    activity_meta: ActivityMeta
+    publishing_queue: PublishingQueueItem[]
+    announcements: AnnouncementItem[]
+  }
+}
+
+const NOTIFIED_STORAGE_KEY = 'dashboard-announcements-notified'
+
+function getNotifiedIds(): Set<number> {
+  try {
+    const raw = localStorage.getItem(NOTIFIED_STORAGE_KEY)
+    return new Set(raw ? JSON.parse(raw) : [])
+  } catch {
+    return new Set()
+  }
+}
+
+function persistNotifiedIds(ids: Set<number>) {
+  localStorage.setItem(NOTIFIED_STORAGE_KEY, JSON.stringify([...ids]))
+}
+
+export function useDashboardData() {
+  const client = useSanctumClient()
+  const { notify } = useNotify()
+
+  const stats = ref<DashboardStats>({
+    pages_total: 0,
+    pages_draft: 0,
+    pages_published: 0,
+    pages_scheduled: 0,
+    media_total: 0,
+    navigation_trees: 0,
+  })
+  const activity = ref<ActivityItem[]>([])
+  const activityMeta = ref<ActivityMeta>({ current_page: 1, last_page: 1, per_page: 10, total: 0 })
+  const activityLoadingMore = ref(false)
+  const publishingQueue = ref<PublishingQueueItem[]>([])
+  const announcements = ref<AnnouncementItem[]>([])
+  const loading = ref(true)
+
+  const hasMoreActivity = computed(() => activityMeta.value.current_page < activityMeta.value.last_page)
+
+  async function refresh() {
+    loading.value = true
+    try {
+      const response = await client<DashboardResponse>('/api/v2/dashboard')
+      stats.value = response.data.stats
+      activity.value = response.data.activity
+      activityMeta.value = response.data.activity_meta
+      publishingQueue.value = response.data.publishing_queue
+      announcements.value = response.data.announcements
+
+      const notified = getNotifiedIds()
+      for (const a of response.data.announcements) {
+        if (!notified.has(a.id)) {
+          notify({
+            title: a.title,
+            description: a.body ?? undefined,
+            color: a.type === 'error' ? 'error' : a.type === 'warning' ? 'warning' : 'info',
+            icon: a.type === 'error' ? 'i-lucide-alert-circle' : a.type === 'warning' ? 'i-lucide-alert-triangle' : 'i-lucide-megaphone',
+          })
+          notified.add(a.id)
+        }
+      }
+      persistNotifiedIds(notified)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function loadMoreActivity() {
+    if (!hasMoreActivity.value || activityLoadingMore.value) return
+    activityLoadingMore.value = true
+    try {
+      const nextPage = activityMeta.value.current_page + 1
+      const response = await client<DashboardResponse>(`/api/v2/dashboard?activity_page=${nextPage}`)
+      activity.value.push(...response.data.activity)
+      activityMeta.value = response.data.activity_meta
+    } finally {
+      activityLoadingMore.value = false
+    }
+  }
+
+  async function dismissAnnouncement(id: number) {
+    await client(`/api/v2/dashboard/announcements/${id}/dismiss`, {
+      method: 'POST',
+    })
+    announcements.value = announcements.value.filter(a => a.id !== id)
+  }
+
+  async function createAnnouncement(data: Record<string, unknown>) {
+    await client('/api/v2/dashboard/announcements', {
+      method: 'POST',
+      body: data,
+    })
+    await refresh()
+  }
+
+  refresh().catch(() => {})
+
+  return {
+    stats,
+    activity,
+    activityMeta,
+    activityLoadingMore,
+    hasMoreActivity,
+    publishingQueue,
+    announcements,
+    loading,
+    refresh,
+    loadMoreActivity,
+    dismissAnnouncement,
+    createAnnouncement,
+  }
+}