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

package/app/assets/css/v-onboarding.css

@@ -0,0 +1,64 @@
+/* ==========================================================================
+   v-onboarding — Nuxt UI v4 theme integration
+   ========================================================================== */
+
+/* The library (v-onboarding/nuxt) injects its own inline <style> tag after
+   our stylesheet, so we need either !important or higher specificity to win.
+   We use both: [data-v-onboarding-wrapper] adds an attribute selector that
+   raises specificity above the library's class-only selectors. */
+
+:root {
+  --v-onboarding-overlay-z: 99998;
+  --v-onboarding-step-z: 99999;
+}
+
+[data-v-onboarding-wrapper] .v-onboarding-item {
+  background-color: var(--ui-bg-elevated) !important;
+  border: 1px solid var(--ui-border) !important;
+  border-radius: calc(var(--ui-radius) * 2) !important;
+  color: var(--ui-text) !important;
+  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.15), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
+}
+
+[data-v-onboarding-wrapper] .v-onboarding-item__header-title {
+  color: var(--ui-text-highlighted) !important;
+  font-weight: 600;
+  font-size: 0.9375rem;
+}
+
+[data-ing-wrapper] .v-onboarding-item__header-close:hover {
+  background-color: var(--ui-bg-accented) !important;
+}
+
+[data-v-onboarding-wrapper] .v-onboarding-item__description {
+  color: var(--ui-text-muted) !important;
+}
+
+[data-v-onboarding-wrapper] .v-onboarding-item__actions button.v-onboarding-btn-primary {
+  background-color: var(--ui-primary) !important;
+  border-color: transparent !important;
+  color: var(--ui-text-inverted) !important;
+  border-radius: calc(var(--ui-radius) * 2) !important;
+}
+
+[data-v-onboarding-wrapper] .v-onboarding-item__actions button.v-onboarding-btn-primary:hover {
+  background-color: color-mix(in srgb, var(--ui-primary) 88%, black) !important;
+}
+
+[data-v-onboarding-wrapper] .v-onboarding-item__actions button.v-onboarding-btn-primary:focus {
+  outline-color: var(--ui-primary) !important;
+}
+
+[data-v-onboarding-wrapper] .v-onboarding-item__actions button.v-onboarding-btn-secondary {
+  border-color: var(--ui-border-accented) !important;
+  color: var(--ui-text) !important;
+  border-radius: calc(var(--ui-radius) * 2) !important;
+}
+
+[data-v-onboarding-wrapper] .v-onboarding-item__actions button.v-onboarding-btn-secondary:hover {
+  background-color: var(--ui-bg-accented) !important;
+}
+
+[data-v-onboarding-wrapper] [data-popper-arrow]::before {
+  background: var(--ui-bg-elevated) !important;
+}

package/app/components/OnboardingStep.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { StepEntity } from 'v-onboarding'
+
+const { t } = useI18n()
+
+defineProps<{
+  step: StepEntity | undefined
+  isFirst: boolean
+  isLast: boolean
+  next: () => void
+  previous: () => void
+  skip: () => void
+}>()
+</script>
+
+<template>
+  <VOnboardingStep>
+    <div class="v-onboarding-item">
+      <div class="v-onboarding-item__header">
+        <span v-if="step?.content?.title" class="v-onboarding-item__header-title">
+          {{ step.content.title }}
+        </span>
+        <button type="button" class="v-onboarding-item__header-close" :aria-label="t('motor-admin.onboarding.skip')" @click="skip">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+      <p v-if="step?.content?.description" class="v-onboarding-item__description">
+        {{ step.content.description }}
+      </p>
+      <div class="v-onboarding-item__actions">
+        <button v-if="!isFirst" type="button" class="v-onboarding-btn-secondary" @click="previous">
+          {{ t('motor-admin.onboarding.previous') }}
+        </button>
+        <button type="button" class="v-onboarding-btn-primary" @click="next">
+          {{ isLast ? t('motor-admin.onboarding.finish') : t('motor-admin.onboarding.next') }}
+        </button>
+      </div>
+    </div>
+  </VOnboardingStep>
+</template>

package/app/components/UsersOnboarding.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { useVOnboarding } from 'v-onboarding'
+
+const { t } = useI18n()
+
+const { isCompleted: adminGridCompleted, markCompleted: markAdminGridDone } = useOnboardingState('admin-grid')
+const { getPending, clearPending, setPending } = usePendingOnboarding()
+const { completeOnboarding } = useProfileApi()
+const { commitDone } = useOnboardingDone()
+const router = useRouter()
+
+const wrapper = ref(null)
+const { start, finish: finishWrapper } = useVOnboarding(wrapper)
+
+const steps = computed(() => [
+  {
+    attachTo: { element: '#users-grid' },
+    content: {
+      title: t('motor-admin.onboarding.admin_grid.step1_title'),
+      description: t('motor-admin.onboarding.admin_grid.step1_desc'),
+    },
+  },
+])
+
+const options = computed(() => ({
+  scrollToStep: { enabled: true, options: { behavior: 'smooth' as ScrollBehavior, block: 'center' as ScrollLogicalPosition } },
+  popper: { strategy: 'fixed' as const },
+  labels: {
+    previousButton: t('motor-admin.onboarding.previous'),
+    nextButton: t('motor-admin.onboarding.next'),
+    finishButton: t('motor-admin.onboarding.finish'),
+  },
+}))
+
+// Prevents onFinish from navigating when the user clicked skip instead
+const skipping = ref(false)
+
+function onFinish() {
+  if (skipping.value) {
+    skipping.value = false
+    return
+  }
+  markAdminGridDone()
+  setPending('builder-pages')
+  router.push('/motor-builder/builder-pages')
+}
+
+function skipAdminGrid() {
+  commitDone()
+  skipping.value = true
+  markAdminGridDone()
+  completeOnboarding().catch(() => {})
+  finishWrapper()
+}
+
+// Auto-start when the page was reached via the admin-nav onboarding chain.
+// The pending flag is set in DashboardOnboarding.vue after the admin-nav tour finishes.
+const stopWatch = watch(
+  wrapper,
+  async (w) => {
+    if (!w) return
+    stopWatch()
+
+    if (getPending() === 'admin-grid' && !adminGridCompleted.value) {
+      clearPending()
+      start()
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <VOnboardingWrapper
+    ref="wrapper"
+    :steps="steps"
+    :options="options"
+    @finish="onFinish"
+  >
+    <template #default="{ step, next, previous, isFirst, isLast }">
+      <OnboardingStep :step="step" :next="next" :previous="previous" :skip="skipAdminGrid" :is-first="isFirst" :is-last="isLast" />
+    </template>
+  </VOnboardingWrapper>
+</template>

package/app/components/client/FooterSlotCard.vue

@@ -0,0 +1,313 @@
+<!-- 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 route = useRoute()
+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?returnTo=${encodeURIComponent(route.fullPath)}`)
+  } 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?returnTo=${encodeURIComponent(route.fullPath)}`)
+  }
+}
+
+const unlinkConfirmOpen = ref(false)
+
+function onUnlinkFooter(): void {
+  unlinkConfirmOpen.value = true
+}
+
+function executeUnlink(): void {
+  unlinkConfirmOpen.value = false
+  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="pageInfo ? 'i-lucide-link' : 'i-lucide-unlink'" class="size-5 shrink-0" :class="pageInfo ? 'text-primary' : 'text-dimmed'" />
+
+      <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
+          icon="i-lucide-unlink"
+          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>
+
+  <!-- Unlink confirmation modal -->
+  <UModal v-model:open="unlinkConfirmOpen">
+    <template #header>
+      {{ t('motor-admin.clients.global_components.unlink_footer') }}
+    </template>
+    <template #body>
+      <div class="space-y-3 text-sm">
+        <p>{{ t('motor-admin.clients.global_components.unlink_confirm') }}</p>
+        <div
+          v-if="pageInfo"
+          class="rounded-md bg-[var(--ui-bg-elevated)] px-3 py-2"
+        >
+          <div class="flex items-center gap-1.5">
+            <UIcon
+              name="i-lucide-panel-bottom"
+              class="size-3.5 shrink-0 text-muted"
+            />
+            <span class="font-medium">{{ pageInfo.name }}</span>
+          </div>
+        </div>
+        <p class="text-muted">{{ t('motor-admin.clients.global_components.unlink_effect') }}</p>
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <UButton
+          color="neutral"
+          variant="outline"
+          @click="unlinkConfirmOpen = false"
+        >
+          {{ t('motor-core.global.cancel') }}
+        </UButton>
+        <UButton
+          color="error"
+          icon="i-lucide-unlink"
+          @click="executeUnlink"
+        >
+          {{ t('motor-admin.clients.global_components.unlink_footer') }}
+        </UButton>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/client/GlobalComponentsSection.vue

@@ -0,0 +1,65 @@
+<!-- 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]
+}>()
+
+const appSettings = useAppSettingsStore()
+const isCompact = computed(() => appSettings.formLayout === 'compact')
+
+const cardUi = computed(() => isCompact.value
+  ? { root: 'relative flex rounded-lg items-start', container: 'relative flex flex-col p-4 sm:p-6 gap-x-8 gap-y-4', wrapper: 'flex flex-col items-start', body: '' }
+  : undefined
+)
+
+function getFooterUuid(languageId: number): string | null {
+  return props.footerMap?.[String(languageId)] ?? null
+}
+</script>
+
+<template>
+  <UPageCard
+    :title="t('motor-admin.clients.global_components.title')"
+    :ui="cardUi"
+  >
+    <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>
+    <div v-else :class="isCompact ? 'grid grid-cols-12 gap-x-4 gap-y-3' : 'space-y-4'">
+      <div
+        v-for="lang in languages"
+        :key="lang.id"
+        :class="isCompact ? 'col-span-12' : ''"
+      >
+        <ClientFooterSlotCard
+          :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)"
+        />
+      </div>
+    </div>
+  </UPageCard>
+</template>

package/app/components/dashboard/DashboardActivity.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { ActivityItem } from '../../composables/useDashboardData'
+
+const props = defineProps<{
+  items: ActivityItem[]
+  loading: boolean
+  loadingMore: boolean
+  hasMore: boolean
+}>()
+
+const emit = defineEmits<{
+  loadMore: []
+}>()
+
+const { t } = useI18n()
+const scrollContainer = ref<HTMLElement | null>(null)
+const sentinel = ref<HTMLElement | null>(null)
+let observer: IntersectionObserver | null = null
+
+function setupObserver() {
+  observer?.disconnect()
+  if (!scrollContainer.value || !sentinel.value) return
+
+  observer = new IntersectionObserver(
+    ([entry]) => {
+      if (entry?.isIntersecting && props.hasMore && !props.loadingMore) {
+        emit('loadMore')
+      }
+    },
+    { root: scrollContainer.value, threshold: 0 },
+  )
+  observer.observe(sentinel.value)
+}
+
+onMounted(setupObserver)
+watch([scrollContainer, sentinel], setupObserver)
+onBeforeUnmount(() => observer?.disconnect())
+</script>
+
+<template>
+  <UPageCard :ui="{ root: 'border-0 shadow-none' }">
+    <template #header>
+      <div class="flex items-center justify-between w-full">
+        <span class="text-sm font-heading font-semibold text-highlighted">{{ t('motor-admin.dashboard.activity.title') }}</span>
+      </div>
+    </template>
+    <div v-if="loading" class="flex items-center justify-center py-12 text-muted">
+      <UIcon name="i-lucide-loader-2" class="size-5 animate-spin" />
+    </div>
+    <div v-else-if="items.length === 0" class="flex flex-col items-center justify-center py-12 text-muted">
+      <UIcon name="i-lucide-activity" class="size-10 mb-3" />
+      <p class="text-sm">{{ t('motor-admin.dashboard.activity.empty') }}</p>
+    </div>
+    <div v-else class="relative -mx-4 -my-4 sm:-mx-6 sm:-my-6">
+      <div
+        ref="scrollContainer"
+        class="max-h-[420px] overflow-y-auto"
+      >
+        <DashboardActivityItem
+          v-for="item in items"
+          :key="item.id"
+          :item="item"
+        />
+        <div ref="sentinel" class="h-px" />
+        <div v-if="loadingMore" class="flex items-center justify-center py-3 text-muted">
+          <UIcon name="i-lucide-loader-2" class="size-4 animate-spin" />
+        </div>
+      </div>
+    </div>
+  </UPageCard>
+</template>