@motor-cms/ui-admin 1.16.3 → 2.0.1

package/app/data/footerTemplate.ts

@@ -0,0 +1,283 @@
+import { generateUuid } from '@motor-cms/ui-core/app/utils/uuid'
+
+// Types mirror @zrmdev/ui-builder/app/types/builder/page-definition. Names
+// (HeadlineParagraphComponent, ImageComponent, HeadlineAtom, ParagraphAtom,
+// ButtonAtom, ImageAtom) match the renderer registry in
+// motor-ui-components/app/builder-registry/bootstrap.ts.
+
+// ============================================
+// Local type definitions (mirror page-definition)
+// ============================================
+
+interface CssProp {
+  key: string
+  value: string
+}
+
+interface PageAtom {
+  uuid: string
+  display_name: string
+  component_name: string
+  classes: string
+  attributes: Record<string, unknown>
+  locked_attributes: string[]
+  disabled: boolean
+  visible: boolean
+  cssProps?: CssProp[]
+  admin_scss?: string
+}
+
+interface ComponentSlot {
+  uuid: string
+  name: string
+  display_name: string
+  allowedAtoms: string[]
+  atoms: PageAtom[]
+}
+
+interface PageComponent {
+  uuid: string
+  name: string
+  display_name: string
+  icon: string
+  classes: string
+  cssClassName: string
+  visible: boolean
+  disabled: boolean
+  attributes: Record<string, unknown>
+  component_slot_name: string | null
+  component_slot_prefix: string | null
+  is_removable: number
+  is_duplicatable: number
+  min_amount_in_another_component: number
+  display_viewports: string
+  slots: ComponentSlot[]
+  components: PageComponent[]
+  scorings: unknown[]
+  scoring_component_configuration: { score: number; topic_id: number; comparison_operator: string }
+  anchors: unknown[]
+  admin_scss?: string
+}
+
+interface PageColumn {
+  uuid: string
+  classes: string
+  display_name: string
+  value_as_grid_column: number
+  rows: PageRow[]
+  components: PageComponent[]
+  admin_scss?: string
+}
+
+interface PageRow {
+  uuid: string
+  display_name: string
+  classes: string
+  global_css: string
+  cols: PageColumn[]
+  admin_scss?: string
+}
+
+type PageDefinition = PageRow[]
+
+// ============================================
+// Builder helpers
+// ============================================
+
+function makeAtom(
+  display_name: string,
+  component_name: string,
+  attributes: Record<string, unknown> = {}
+): PageAtom {
+  return {
+    uuid: generateUuid(),
+    display_name,
+    component_name,
+    classes: '',
+    attributes,
+    locked_attributes: [],
+    disabled: false,
+    visible: true
+  }
+}
+
+function makeSlot(
+  name: string,
+  display_name: string,
+  allowedAtoms: string[],
+  atoms: PageAtom[]
+): ComponentSlot {
+  return {
+    uuid: generateUuid(),
+    name,
+    display_name,
+    allowedAtoms,
+    atoms
+  }
+}
+
+function makeComponent(
+  name: string,
+  display_name: string,
+  cssClassName: string,
+  slots: ComponentSlot[],
+  attributes: Record<string, unknown> = {},
+  components: PageComponent[] = []
+): PageComponent {
+  return {
+    uuid: generateUuid(),
+    name,
+    display_name,
+    icon: '',
+    classes: '',
+    cssClassName,
+    visible: true,
+    disabled: false,
+    attributes,
+    component_slot_name: null,
+    component_slot_prefix: null,
+    is_removable: 1,
+    is_duplicatable: 1,
+    min_amount_in_another_component: 0,
+    display_viewports: 's,t,m,l,xl',
+    slots,
+    components,
+    scorings: [],
+    scoring_component_configuration: { score: 0, topic_id: 0, comparison_operator: '' },
+    anchors: []
+  }
+}
+
+function makeColumn(
+  display_name: string,
+  value_as_grid_column: number,
+  components: PageComponent[]
+): PageColumn {
+  return {
+    uuid: generateUuid(),
+    classes: '',
+    display_name,
+    value_as_grid_column,
+    rows: [],
+    components
+  }
+}
+
+function makeRow(display_name: string, cols: PageColumn[], classes = ''): PageRow {
+  return {
+    uuid: generateUuid(),
+    display_name,
+    classes,
+    global_css: '',
+    cols
+  }
+}
+
+// ============================================
+// Footer template factory
+// ============================================
+
+const PLACEHOLDER_IMAGE = '/images/general/frau_mit_kind.jpeg'
+
+const TEXT_SLOT_ALLOWED = ['OverlineAtom', 'HeadlineAtom', 'ParagraphAtom', 'ButtonAtom', 'ImageAtom', 'VideoAtom']
+
+function textContentComponent(
+  display_name: string,
+  atoms: PageAtom[],
+  attributes: Record<string, unknown> = { has_background: false }
+): PageComponent {
+  return makeComponent(
+    'HeadlineParagraphComponent',
+    display_name,
+    'headline-paragraph',
+    [makeSlot('content', 'Content', TEXT_SLOT_ALLOWED, atoms)],
+    attributes
+  )
+}
+
+function headlineAtom(text: string, level: 'h2' | 'h3' | 'h4' = 'h3'): PageAtom {
+  return makeAtom('Headline', 'HeadlineAtom', {
+    text,
+    type: level,
+    displayedLevel: level,
+    weight: 'bold'
+  })
+}
+
+function paragraphAtom(text: string): PageAtom {
+  return makeAtom('Paragraph', 'ParagraphAtom', {
+    text,
+    bullet_type: 'check__default',
+    orderedlist_type: 'decimal'
+  })
+}
+
+function buttonAtom(title: string): PageAtom {
+  return makeAtom('Button', 'ButtonAtom', {
+    title,
+    link: '',
+    variant: 'dark',
+    has_arrow: false
+  })
+}
+
+function imageAtom(display_name: string): PageAtom {
+  return makeAtom(display_name, 'ImageAtom', {
+    src: PLACEHOLDER_IMAGE,
+    alt: display_name
+  })
+}
+
+function imageComponent(display_name: string, extraClasses = ''): PageComponent {
+  const c = makeComponent(
+    'ImageComponent',
+    display_name,
+    'image',
+    [makeSlot('content', 'Content', ['ImageAtom'], [imageAtom(display_name)])]
+  )
+  if (extraClasses) c.classes = extraClasses
+  return c
+}
+
+export function createFooterTemplate(): PageDefinition {
+  // ---- Row 1: 6/6 split ----
+  // Col 1: intro text (Headline + Paragraph)
+  // Col 2: three award badges, each its own ImageComponent
+  const row1 = makeRow('Row 1', [
+    makeColumn('Column 1', 6, [
+      textContentComponent('Intro', [
+        headlineAtom('Headline', 'h2'),
+        paragraphAtom('Paragraph')
+      ])
+    ]),
+    makeColumn('Column 2', 6, [
+      imageComponent('Badge 1', 'footer-badge'),
+      imageComponent('Badge 2', 'footer-badge'),
+      imageComponent('Badge 3', 'footer-badge')
+    ])
+  ])
+
+  // ---- Row 2: four 3/12 columns ----
+  // Col 1: Kontakt (pre-filled headline)
+  // Col 2-4: nav-style headline + paragraph + CTA button
+  // Row gets the white inset card chrome inside the peach FooterFrame.
+  const row2 = makeRow('Row 2', [
+    makeColumn('Column 1', 3, [
+      textContentComponent('Kontakt', [
+        headlineAtom('Kontakt', 'h3'),
+        paragraphAtom('Paragraph')
+      ])
+    ]),
+    ...['Column 2', 'Column 3', 'Column 4'].map((label) =>
+      makeColumn(label, 3, [
+        textContentComponent(label, [
+          headlineAtom('Headline', 'h3'),
+          paragraphAtom('Paragraph'),
+          buttonAtom('CTA Button')
+        ])
+      ])
+    )
+  ], 'footer-content-card')
+
+  return [row1, row2]
+}

package/app/lang/de/motor-admin/clients.json

@@ -23,5 +23,38 @@
   "contact_phone": "Telefon",
   "group_address": "Adresse",
   "group_contact": "Kontakt",
-  "group_other": "Sonstiges"
+  "group_other": "Sonstiges",
+  "frontend_config": {
+    "group_brand": "Marke",
+    "group_contact": "Kontakt (Frontend)",
+    "group_features": "Funktionen",
+    "group_social": "Social Media",
+    "group_seo": "SEO",
+    "brand_name": "Markenname",
+    "brand_logo_alt": "Logo Alt-Text",
+    "color_scheme": "Farbschema",
+    "logo_slug": "Logo",
+    "contact_url": "Kontaktseiten-URL",
+    "contact_email": "Kontakt-E-Mail",
+    "contact_whatsapp_url": "WhatsApp-URL",
+    "features_order_line": "Bestellstrecke",
+    "features_appointments": "Terminbuchung",
+    "features_clickpath": "Clickpath",
+    "features_footer_menu": "Footer-Menü",
+    "social_instagram": "Instagram",
+    "social_facebook": "Facebook",
+    "seo_site_name": "Seitenname"
+  },
+  "global_components": {
+    "title": "Globale Komponenten",
+    "footer": "Footer",
+    "no_footer": "Kein Footer konfiguriert",
+    "create_footer": "Footer erstellen",
+    "edit_footer": "Footer bearbeiten",
+    "unlink_footer": "Verknüpfung lösen",
+    "footer_created": "Footer erfolgreich erstellt.",
+    "published": "Veröffentlicht",
+    "draft": "Entwurf",
+    "no_languages": "Keine Sprachen für diesen Mandanten konfiguriert. Erstellen Sie zuerst Navigationsbäume."
+  }
 }

package/app/lang/en/motor-admin/clients.json

@@ -23,5 +23,38 @@
   "contact_phone": "Phone",
   "group_address": "Address",
   "group_contact": "Contact",
-  "group_other": "Other"
+  "group_other": "Other",
+  "frontend_config": {
+    "group_brand": "Brand",
+    "group_contact": "Contact (Frontend)",
+    "group_features": "Features",
+    "group_social": "Social Media",
+    "group_seo": "SEO",
+    "brand_name": "Brand Name",
+    "brand_logo_alt": "Logo Alt Text",
+    "color_scheme": "Color Scheme",
+    "logo_slug": "Logo",
+    "contact_url": "Contact Page URL",
+    "contact_email": "Contact Email",
+    "contact_whatsapp_url": "WhatsApp URL",
+    "features_order_line": "Order Line",
+    "features_appointments": "Appointments",
+    "features_clickpath": "Clickpath",
+    "features_footer_menu": "Footer Menu",
+    "social_instagram": "Instagram",
+    "social_facebook": "Facebook",
+    "seo_site_name": "Site Name"
+  },
+  "global_components": {
+    "title": "Global Components",
+    "footer": "Footer",
+    "no_footer": "No footer configured",
+    "create_footer": "Create Footer",
+    "edit_footer": "Edit Footer",
+    "unlink_footer": "Unlink",
+    "footer_created": "Footer created successfully.",
+    "published": "Published",
+    "draft": "Draft",
+    "no_languages": "No languages configured for this client. Add navigation trees first."
+  }
 }

package/app/pages/motor-admin/clients/[id]/edit.vue

@@ -2,19 +2,148 @@
 <script setup lang="ts">
 import { clientFormMeta } from '../../../../types/generated/form-meta'
 import { clientFormConfig } from '@motor-cms/ui-core/app/types/config/client'
+import { useClientFrontendConfig } from '../../../../composables/useClientFrontendConfig'
+import { useClientLanguages } from '../../../../composables/useClientLanguages'
 
 definePageMeta({ layout: 'default', permission: 'clients.read' })
 
+const { t } = useI18n()
+const { error: notifyError } = useNotify()
 const route = useRoute()
-const { fields, schema, groups, state, loading, fetching, fetchError, canWrite, pageTitle, formRef, onSubmit, onSaveAndContinue, onSaveAndNew, deleteRecord, deleting } = await useEntityForm({
+const clientId = route.params.id as string
+
+const isFrontendConfigEnabled
+  = useRuntimeConfig().public.featureClientFrontendConfig === true
+
+const {
+  fields,
+  schema,
+  groups,
+  state,
+  loading,
+  fetching,
+  fetchError,
+  canWrite,
+  pageTitle,
+  formRef,
+  onSubmit,
+  onSaveAndContinue,
+  onSaveAndNew,
+  deleteRecord,
+  deleting
+} = await useEntityForm({
   apiEndpoint: '/api/v2/clients',
   routePrefix: '/motor-admin/clients',
   translationPrefix: 'motor-admin.clients',
   formMeta: clientFormMeta,
   formConfig: clientFormConfig,
   mode: 'edit',
-  id: route.params.id as string
+  id: clientId,
+  beforeSubmit: (data) => {
+    if (!isFrontendConfigEnabled) return
+    if (!validateFrontendConfig()) {
+      throw new Error(t('motor-core.global.validation_failed'))
+    }
+    data.frontend_config = getFrontendConfigSubmitData()
+  }
+})
+
+const { data: clientRecord } = useNuxtData<{ data: Record<string, unknown> }>(
+  `entity-form-/api/v2/clients-${clientId}`
+)
+
+const {
+  state: frontendConfigState,
+  errors: frontendConfigErrors,
+  fields: frontendConfigFields,
+  groups: frontendConfigGroups,
+  validate: validateFrontendConfig,
+  getSubmitData: getFrontendConfigSubmitData
+} = useClientFrontendConfig({ clientRecord, fetching })
+
+const colorSchemeOptions = [
+  { label: 'energis', value: 'energis' },
+  { label: 'highspeed', value: 'highspeed' },
+  { label: 'jaeckel', value: 'jaeckel' }
+]
+
+const logoSlugOptions = [
+  { label: 'energis', value: 'energis' },
+  { label: 'highspeed', value: 'highspeed' },
+  { label: 'jaeckel', value: 'jaeckel' }
+]
+
+const clientIdRef = computed(() =>
+  isFrontendConfigEnabled ? (route.params.id as string) : ''
+)
+const { languages, isMultiLanguage, loading: languagesLoading } = useClientLanguages(clientIdRef)
+
+const footerMap = computed(() => {
+  const fc = clientRecord.value?.data?.frontend_config as Record<string, unknown> | undefined
+  const gc = fc?.globalComponents as Record<string, unknown> | undefined
+  return gc?.footer as Record<string, string> | undefined
 })
+
+const sanctumClient = useSanctumClient()
+
+async function onFooterLinked(languageId: number, uuid: string, _pageId: number) {
+  try {
+    const freshClient = await sanctumClient<{ data: Record<string, unknown> }>(
+      `/api/v2/clients/${clientId}`
+    )
+    const freshConfig = (freshClient.data.frontend_config as Record<string, unknown>) ?? {}
+    const freshGc = (freshConfig.globalComponents as Record<string, unknown>) ?? {}
+    const freshFooter = { ...(freshGc.footer as Record<string, string>) ?? {} }
+    freshFooter[String(languageId)] = uuid
+
+    await sanctumClient(`/api/v2/clients/${clientId}`, {
+      method: 'PATCH',
+      body: {
+        name: freshClient.data.name,
+        slug: freshClient.data.slug,
+        frontend_config: {
+          ...freshConfig,
+          globalComponents: { ...freshGc, footer: freshFooter }
+        }
+      }
+    })
+
+    await refreshNuxtData(`entity-form-/api/v2/clients-${clientId}`)
+  } catch (err: unknown) {
+    const message = err instanceof Error ? err.message : t('motor-core.errors.update_failed')
+    notifyError(t('motor-admin.clients.edit_title'), message)
+  }
+}
+
+async function onFooterUnlinked(languageId: number) {
+  try {
+    const freshClient = await sanctumClient<{ data: Record<string, unknown> }>(
+      `/api/v2/clients/${clientId}`
+    )
+    const freshConfig = (freshClient.data.frontend_config as Record<string, unknown>) ?? {}
+    const freshGc = (freshConfig.globalComponents as Record<string, unknown>) ?? {}
+    const freshFooter = { ...(freshGc.footer as Record<string, string>) ?? {} }
+    delete freshFooter[String(languageId)]
+
+    await sanctumClient(`/api/v2/clients/${clientId}`, {
+      method: 'PATCH',
+      body: {
+        name: freshClient.data.name,
+        slug: freshClient.data.slug,
+        frontend_config: {
+          ...freshConfig,
+          globalComponents: { ...freshGc, footer: freshFooter }
+        }
+      }
+    })
+
+    await refreshNuxtData(`entity-form-/api/v2/clients-${clientId}`)
+  } catch (err: unknown) {
+    const message = err instanceof Error ? err.message : t('motor-core.errors.update_failed')
+    notifyError(t('motor-admin.clients.edit_title'), message)
+  }
+}
+
 </script>
 
 <template>
@@ -40,6 +169,32 @@ const { fields, schema, groups, state, loading, fetching, fetchError, canWrite,
       @submit="onSubmit"
       @save-and-continue="onSaveAndContinue"
       @save-and-new="onSaveAndNew"
-    />
+    >
+      <template
+        v-if="isFrontendConfigEnabled"
+        #after-fields
+      >
+        <ClientFrontendConfigSection
+          :state="frontendConfigState"
+          :fields="frontendConfigFields"
+          :groups="frontendConfigGroups"
+          :errors="frontendConfigErrors"
+          :disabled="!canWrite"
+          :color-scheme-options="colorSchemeOptions"
+          :logo-slug-options="logoSlugOptions"
+        />
+        <ClientGlobalComponentsSection
+          :client-id="route.params.id"
+          :client-name="(state.name as string) ?? ''"
+          :footer-map="footerMap"
+          :languages="languages"
+          :is-multi-language="isMultiLanguage"
+          :languages-loading="languagesLoading"
+          :disabled="!canWrite"
+          @footer-linked="onFooterLinked"
+          @footer-unlinked="onFooterUnlinked"
+        />
+      </template>
+    </FormBase>
   </FormPage>
 </template>