@motor-cms/ui-admin 1.16.3 → 2.0.0

package/app/components/client/FooterSlotCard.vue

@@ -0,0 +1,261 @@
+<!-- app/components/client/FooterSlotCard.vue -->
+<script setup lang="ts">
+import type { components } from '@motor-cms/ui-core/app/types/generated/api'
+import { createFooterTemplate } from '../../data/footerTemplate'
+
+type BuilderPageResource = components['schemas']['BuilderPageResource']
+
+const props = defineProps<{
+  clientId: number | string
+  clientName: string
+  languageId: number
+  languageName?: string
+  showLanguageLabel: boolean
+  builderPageUuid: string | null
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  'linked': [uuid: string, pageId: number]
+  'unlinked': []
+}>()
+
+const client = useSanctumClient()
+const router = useRouter()
+const { t, locale } = useI18n()
+const { success, error: notifyError } = useNotify()
+
+// ============================================
+// Page info state
+// ============================================
+
+interface PageInfo {
+  id: number
+  name: string
+  is_published: boolean
+  updated_at: string
+}
+
+const pageInfo = ref<PageInfo | null>(null)
+const loadingPage = ref(false)
+const creating = ref(false)
+
+// ============================================
+// Fetch page info on mount if UUID provided
+// ============================================
+
+async function fetchPageInfo(uuid: string): Promise<void> {
+  loadingPage.value = true
+  try {
+    const response = await client<{ data: BuilderPageResource }>(
+      `/api/v2/builder-pages/uuid/${uuid}`
+    )
+    const data = response.data
+    pageInfo.value = {
+      id: data.id,
+      name: data.name,
+      is_published: data.is_published,
+      updated_at: data.updated_at,
+    }
+  } catch (err: unknown) {
+    const message = err instanceof Error ? err.message : t('motor-core.errors.something_went_wrong')
+    notifyError(t('motor-admin.clients.global_components.footer'), message)
+  } finally {
+    loadingPage.value = false
+  }
+}
+
+watch(
+  () => props.builderPageUuid,
+  (uuid) => {
+    if (uuid) {
+      void fetchPageInfo(uuid)
+    } else {
+      pageInfo.value = null
+    }
+  },
+  { immediate: true }
+)
+
+// ============================================
+// Helpers
+// ============================================
+
+function formatDate(isoString: string): string {
+  return new Date(isoString).toLocaleDateString(locale.value, {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+function buildPageName(): string {
+  const base = `${props.clientName} - Footer`
+  if (props.showLanguageLabel && props.languageName) {
+    return `${base} (${props.languageName})`
+  }
+  return base
+}
+
+// ============================================
+// Actions
+// ============================================
+
+async function onCreateFooter(): Promise<void> {
+  creating.value = true
+  try {
+    // Step 1: create the empty page. The backend's createBuilderPage service
+    // hard-codes page_definition to []; the template is installed via the
+    // separate definition endpoint below.
+    const response = await client<{ data: BuilderPageResource }>('/api/v2/builder-pages', {
+      method: 'POST',
+      body: {
+        name: buildPageName(),
+        client_id: props.clientId,
+        language_id: props.languageId,
+        type: 'global_component',
+        cache_type: 'always',
+        ttl: 0,
+        is_excluded_from_search_index: false,
+        is_excluded_from_search: false,
+        is_excluded_from_cookie_banner: false,
+      },
+    })
+    const data = response.data
+
+    // Step 2: install the template via the definition endpoint.
+    try {
+      await client(`/api/v2/builder-pages/${data.id}/definition`, {
+        method: 'PUT',
+        body: {
+          id: data.id,
+          page_definition: JSON.stringify(createFooterTemplate()),
+          is_published: false,
+        },
+      })
+    } catch (defErr: unknown) {
+      // Page exists but the template install failed. Surface a warning so the
+      // user knows to populate it manually, but still link + navigate so the
+      // empty page isn't orphaned.
+      const message = defErr instanceof Error ? defErr.message : t('motor-core.errors.update_failed')
+      notifyError(t('motor-admin.clients.global_components.footer'), message)
+    }
+
+    emit('linked', data.uuid, data.id)
+    success(t('motor-admin.clients.global_components.footer_created'))
+    await router.push(`/motor-builder/builder-pages/${data.id}/edit`)
+  } catch (err: unknown) {
+    const message = err instanceof Error ? err.message : t('motor-core.errors.create_failed')
+    notifyError(t('motor-admin.clients.global_components.footer'), message)
+  } finally {
+    creating.value = false
+  }
+}
+
+function onEditFooter(): void {
+  if (pageInfo.value) {
+    router.push(`/motor-builder/builder-pages/${pageInfo.value.id}/edit`)
+  }
+}
+
+function onUnlinkFooter(): void {
+  emit('unlinked')
+}
+</script>
+
+<template>
+  <div class="flex items-center justify-between gap-4 rounded-lg border border-default px-4 py-3">
+    <!-- Left: info -->
+    <div class="flex items-center gap-3 min-w-0">
+      <UIcon name="i-lucide-panel-bottom" class="size-5 text-muted shrink-0" />
+
+      <div class="min-w-0">
+        <!-- Label -->
+        <div class="text-sm font-medium text-highlighted">
+          {{ t('motor-admin.clients.global_components.footer') }}
+          <span v-if="showLanguageLabel && languageName" class="text-muted font-normal">
+            ({{ languageName }})
+          </span>
+        </div>
+
+        <!-- Footer details when page exists -->
+        <template v-if="pageInfo">
+          <div class="flex items-center flex-wrap gap-2 mt-0.5">
+            <span class="text-sm text-muted truncate">{{ pageInfo.name }}</span>
+            <UBadge
+              v-if="pageInfo.is_published"
+              color="success"
+              variant="subtle"
+              size="xs"
+            >
+              {{ t('motor-admin.clients.global_components.published') }}
+            </UBadge>
+            <UBadge
+              v-else
+              color="warning"
+              variant="subtle"
+              size="xs"
+            >
+              {{ t('motor-admin.clients.global_components.draft') }}
+            </UBadge>
+            <span class="text-xs text-dimmed">{{ formatDate(pageInfo.updated_at) }}</span>
+          </div>
+        </template>
+
+        <!-- Loading state -->
+        <template v-else-if="loadingPage">
+          <div class="flex items-center gap-1.5 mt-0.5">
+            <UIcon name="i-lucide-loader-2" class="size-3.5 animate-spin text-muted" />
+            <span class="text-sm text-muted">{{ t('motor-core.global.loading') }}</span>
+          </div>
+        </template>
+
+        <!-- No footer configured -->
+        <template v-else>
+          <div class="text-sm text-dimmed mt-0.5">
+            {{ t('motor-admin.clients.global_components.no_footer') }}
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <!-- Right: actions -->
+    <div class="flex items-center gap-2 shrink-0">
+      <!-- Footer exists: Edit + Unlink -->
+      <template v-if="pageInfo">
+        <UButton
+          variant="outline"
+          size="sm"
+          :disabled="disabled"
+          @click="onEditFooter"
+        >
+          {{ t('motor-admin.clients.global_components.edit_footer') }}
+        </UButton>
+        <UButton
+          variant="ghost"
+          color="error"
+          size="sm"
+          :disabled="disabled"
+          @click="onUnlinkFooter"
+        >
+          {{ t('motor-admin.clients.global_components.unlink_footer') }}
+        </UButton>
+      </template>
+
+      <!-- No footer: Create -->
+      <template v-else-if="!loadingPage">
+        <UButton
+          variant="outline"
+          size="sm"
+          :loading="creating"
+          :disabled="disabled || creating"
+          @click="onCreateFooter"
+        >
+          {{ t('motor-admin.clients.global_components.create_footer') }}
+        </UButton>
+      </template>
+    </div>
+  </div>
+</template>

package/app/components/client/FrontendConfigSection.vue

@@ -0,0 +1,115 @@
+<!-- app/components/client/FrontendConfigSection.vue -->
+<script setup lang="ts">
+import type { FormFieldConfig, FormGroupConfig } from '@motor-cms/ui-core/app/types/form'
+
+const props = defineProps<{
+  state: Record<string, unknown>
+  fields: FormFieldConfig[]
+  groups: FormGroupConfig[]
+  errors: Record<string, string>
+  disabled?: boolean
+  colorSchemeOptions: { label: string, value: string }[]
+  logoSlugOptions: { label: string, value: string }[]
+}>()
+
+// ============================================
+// Dot-path helpers
+// ============================================
+
+function getNestedValue(obj: Record<string, unknown>, path: string): unknown {
+  return path.split('.').reduce<unknown>((current, key) => {
+    if (current != null && typeof current === 'object') {
+      return (current as Record<string, unknown>)[key]
+    }
+    return undefined
+  }, obj)
+}
+
+function setNestedValue(obj: Record<string, unknown>, path: string, value: unknown): void {
+  const keys = path.split('.')
+  let current: Record<string, unknown> = obj
+  for (let i = 0; i < keys.length - 1; i++) {
+    const key = keys[i]!
+    if (current[key] == null || typeof current[key] !== 'object') {
+      current[key] = {}
+    }
+    current = current[key] as Record<string, unknown>
+  }
+  const lastKey = keys[keys.length - 1]!
+  current[lastKey] = value
+}
+
+// ============================================
+// Grouped field helpers
+// ============================================
+
+function fieldsForGroup(groupKey: string): FormFieldConfig[] {
+  return props.fields.filter(f => f.group === groupKey)
+}
+
+// ============================================
+// Options resolver
+// ============================================
+
+function optionsForField(fieldKey: string): { label: string, value: string }[] {
+  if (fieldKey === 'colorScheme') return props.colorSchemeOptions
+  if (fieldKey === 'logoSlug') return props.logoSlugOptions
+  return []
+}
+</script>
+
+<template>
+  <template
+    v-for="group in groups"
+    :key="group.key"
+  >
+    <UPageCard :title="group.label">
+      <div class="space-y-4">
+        <template
+          v-for="field in fieldsForGroup(group.key)"
+          :key="field.key"
+        >
+          <UFormField
+            :label="field.label"
+            :name="field.key"
+            :required="field.required"
+            :error="errors[field.key]"
+            orientation="horizontal"
+            :ui="{ container: 'w-full max-w-2xl' }"
+          >
+            <!-- Toggle -->
+            <USwitch
+              v-if="field.input === 'toggle'"
+              :model-value="(getNestedValue(state, field.key) as boolean) ?? false"
+              :disabled="disabled"
+              @update:model-value="setNestedValue(state, field.key, $event)"
+            />
+
+            <!-- Select -->
+            <USelectMenu
+              v-else-if="field.input === 'select'"
+              :model-value="(getNestedValue(state, field.key) as string | undefined)"
+              :items="optionsForField(field.key)"
+              value-key="value"
+              label-key="label"
+              :placeholder="field.label"
+              :disabled="disabled"
+              class="w-full"
+              @update:model-value="setNestedValue(state, field.key, $event)"
+            />
+
+            <!-- Text / Email / URL -->
+            <UInput
+              v-else
+              :model-value="(getNestedValue(state, field.key) as string) ?? ''"
+              :type="field.input === 'email' ? 'email' : field.input === 'url' ? 'url' : 'text'"
+              :disabled="disabled"
+              class="w-full"
+              @update:model-value="setNestedValue(state, field.key, $event)"
+            />
+          </UFormField>
+        </template>
+      </div>
+    </UPageCard>
+  </template>
+</template>

package/app/components/client/GlobalComponentsSection.vue

@@ -0,0 +1,50 @@
+<!-- app/components/client/GlobalComponentsSection.vue -->
+<script setup lang="ts">
+const { t } = useI18n()
+
+const props = defineProps<{
+  clientId: number | string
+  clientName: string
+  footerMap: Record<string, string> | undefined
+  languages: { id: number, name: string }[]
+  isMultiLanguage: boolean
+  languagesLoading: boolean
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  'footer-linked': [languageId: number, uuid: string, pageId: number]
+  'footer-unlinked': [languageId: number]
+}>()
+
+function getFooterUuid(languageId: number): string | null {
+  return props.footerMap?.[String(languageId)] ?? null
+}
+</script>
+
+<template>
+  <UPageCard :title="t('motor-admin.clients.global_components.title')">
+    <div v-if="languagesLoading" class="flex items-center gap-2 text-muted py-4">
+      <UIcon name="i-lucide-loader-2" class="size-4 animate-spin" />
+      <span class="text-sm">{{ t('motor-core.global.loading') }}</span>
+    </div>
+    <div v-else-if="languages.length === 0" class="text-sm text-muted py-4">
+      {{ t('motor-admin.clients.global_components.no_languages') }}
+    </div>
+    <template v-else>
+      <ClientFooterSlotCard
+        v-for="lang in languages"
+        :key="lang.id"
+        :client-id="clientId"
+        :client-name="clientName"
+        :language-id="lang.id"
+        :language-name="lang.name"
+        :show-language-label="isMultiLanguage"
+        :builder-page-uuid="getFooterUuid(lang.id)"
+        :disabled="disabled"
+        @linked="(uuid: string, pageId: number) => emit('footer-linked', lang.id, uuid, pageId)"
+        @unlinked="emit('footer-unlinked', lang.id)"
+      />
+    </template>
+  </UPageCard>
+</template>

package/app/composables/useClientFrontendConfig.ts

@@ -0,0 +1,145 @@
+import type { Ref, ComputedRef } from 'vue'
+import type { FormFieldConfig, FormGroupConfig } from '@motor-cms/ui-core/app/types/form'
+import {
+  type FrontendConfigFormState,
+  frontendConfigSchema,
+  emptyFrontendConfig,
+  frontendConfigFields,
+  frontendConfigGroups
+} from '../types/frontend-config'
+
+// ============================================
+// Types
+// ============================================
+
+export interface UseClientFrontendConfigOptions {
+  clientRecord: Ref<{ data: Record<string, unknown> } | null | undefined>
+  fetching: Ref<boolean>
+}
+
+export interface UseClientFrontendConfigReturn {
+  state: FrontendConfigFormState
+  errors: Ref<Record<string, string>>
+  fields: ComputedRef<FormFieldConfig[]>
+  groups: ComputedRef<FormGroupConfig[]>
+  validate(): boolean
+  getSubmitData(): Record<string, unknown>
+}
+
+// ============================================
+// Composable
+// ============================================
+
+export function useClientFrontendConfig(
+  options: UseClientFrontendConfigOptions
+): UseClientFrontendConfigReturn {
+  const { t } = useI18n()
+
+  // Reactive form state — starts empty, hydrated on load
+  const state = reactive<FrontendConfigFormState>(emptyFrontendConfig())
+
+  // Flat validation error map: dot-path → first message
+  const errors = ref<Record<string, string>>({})
+
+  // ============================================
+  // Hydration
+  // ============================================
+
+  watch(
+    () => options.fetching.value,
+    (isFetching) => {
+      // Hydrate when fetching completes (or data is already loaded)
+      if (!isFetching) {
+        const raw = options.clientRecord.value?.data?.frontend_config
+        if (!raw) return
+
+        const parsed = frontendConfigSchema.safeParse(raw)
+
+        if (parsed.success) {
+          Object.assign(state, parsed.data)
+        } else {
+          // Best-effort deep merge of whatever passed validation
+          const rawConfig = raw as Record<string, unknown>
+          for (const key of Object.keys(state) as Array<keyof FrontendConfigFormState>) {
+            const incoming = rawConfig[key]
+            if (incoming !== undefined && incoming !== null) {
+              if (typeof incoming === 'object' && !Array.isArray(incoming)) {
+                Object.assign(
+                  state[key] as Record<string, unknown>,
+                  incoming as Record<string, unknown>
+                )
+              } else {
+                // @ts-expect-error -- best-effort assignment for primitive fields
+                state[key] = incoming
+              }
+            }
+          }
+        }
+      }
+    },
+    { immediate: true }
+  )
+
+  // ============================================
+  // Validation
+  // ============================================
+
+  function validate(): boolean {
+    const result = frontendConfigSchema.safeParse(state)
+    if (result.success) {
+      errors.value = {}
+      return true
+    }
+
+    const flat: Record<string, string> = {}
+    for (const issue of result.error.issues) {
+      const path = issue.path.join('.')
+      if (!flat[path]) {
+        flat[path] = issue.message
+      }
+    }
+    errors.value = flat
+    return false
+  }
+
+  // ============================================
+  // Submit data
+  // ============================================
+
+  function getSubmitData(): Record<string, unknown> {
+    const clone = JSON.parse(JSON.stringify(state)) as Record<string, unknown>
+
+    // Preserve globalComponents from the raw API record — these are
+    // footer UUIDs managed separately (e.g. by GlobalComponentsSection) and
+    // must not be overwritten by the frontend config form.
+    const originalConfig = options.clientRecord.value?.data?.frontend_config as
+      | { globalComponents?: Record<string, unknown> }
+      | undefined
+
+    if (originalConfig?.globalComponents !== undefined) {
+      clone.globalComponents = originalConfig.globalComponents
+    }
+
+    return clone
+  }
+
+  // ============================================
+  // Field / group definitions (i18n-aware)
+  // ============================================
+
+  const fields = computed<FormFieldConfig[]>(() => frontendConfigFields(t))
+  const groups = computed<FormGroupConfig[]>(() => frontendConfigGroups(t))
+
+  // ============================================
+  // Return
+  // ============================================
+
+  return {
+    state,
+    errors,
+    fields,
+    groups,
+    validate,
+    getSubmitData
+  }
+}

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,
+  }
+}