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

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

@@ -3,11 +3,10 @@
 import { categoryTreeFormMeta } from '@motor-cms/ui-core/app/types/generated/form-meta'
 import { categoryTreeEditFormConfig } from '@motor-cms/ui-core/app/types/config/category-tree'
 
-definePageMeta({ layout: 'default', permission: 'category-trees.write' })
+definePageMeta({ layout: 'default', permission: 'category-trees.read' })
 
 const route = useRoute()
-const { t } = useI18n()
-const { fields, schema, groups, state, loading, fetching, fetchError, formRef, onSubmit, onSaveAndContinue, onSaveAndNew, deleteRecord, deleting } = await useEntityForm({
+const { fields, schema, groups, state, loading, fetching, fetchError, canWrite, pageTitle, formRef, onSubmit, onSaveAndContinue, onSaveAndNew, deleteRecord, deleting } = await useEntityForm({
   apiEndpoint: '/api/v2/category-trees',
   routePrefix: '/motor-admin/category-trees',
   translationPrefix: 'motor-admin.category_trees',
@@ -20,13 +19,14 @@ const { fields, schema, groups, state, loading, fetching, fetchError, formRef, o
 
 <template>
   <FormPage
-    :title="t('motor-admin.category_trees.edit_title')"
+    :title="pageTitle"
     back-route="/motor-admin/category-trees"
     :loading="fetching"
     :error="fetchError"
   >
     <FormBase
       ref="formRef"
+      :disabled="!canWrite"
       v-model:state="state"
       :fields="fields"
       :schema="schema"

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

@@ -2,31 +2,142 @@
 <script setup lang="ts">
 import { clientFormMeta } from '../../../../types/generated/form-meta'
 import { clientFormConfig } from '@motor-cms/ui-core/app/types/config/client'
+import { useClientLanguages } from '../../../../composables/useClientLanguages'
 
-definePageMeta({ layout: 'default', permission: 'clients.write' })
+definePageMeta({ layout: 'default', permission: 'clients.read' })
 
-const route = useRoute()
 const { t } = useI18n()
-const { fields, schema, groups, state, loading, fetching, fetchError, formRef, onSubmit, onSaveAndContinue, onSaveAndNew, deleteRecord, deleting } = await useEntityForm({
+const { error: notifyError } = useNotify()
+const route = useRoute()
+const clientId = route.params.id as string
+
+const isFrontendConfigEnabled
+  = useRuntimeConfig().public.featureClientFrontendConfig === true
+
+const { extensions, allExtensionsValid, validateAll, getAllSubmitData } = useClientFormExtensions()
+
+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: async (data) => {
+    if (!isFrontendConfigEnabled || extensions.value.length === 0) return
+    const valid = await validateAll()
+    if (!valid) {
+      throw new Error(t('motor-core.global.validation_failed'))
+    }
+    data.frontend_config = {
+      ...getAllSubmitData(),
+      globalComponents: (data.frontend_config as Record<string, unknown>)?.globalComponents
+        ?? (clientRecord.value?.data?.frontend_config as Record<string, unknown>)?.globalComponents,
+    }
+  }
+})
+
+const { data: clientRecord } = useNuxtData<{ data: Record<string, unknown> }>(
+  `entity-form-/api/v2/clients-${clientId}`
+)
+
+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: {
+        ...freshClient.data,
+        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: {
+        ...freshClient.data,
+        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>
   <FormPage
-    :title="t('motor-admin.clients.edit_title')"
+    :title="pageTitle"
     back-route="/motor-admin/clients"
     :loading="fetching"
     :error="fetchError"
   >
     <FormBase
       ref="formRef"
+      :disabled="!canWrite"
       v-model:state="state"
       :fields="fields"
       :schema="schema"
@@ -40,6 +151,35 @@ const { fields, schema, groups, state, loading, fetching, fetchError, formRef, o
       @submit="onSubmit"
       @save-and-continue="onSaveAndContinue"
       @save-and-new="onSaveAndNew"
-    />
+    >
+      <template
+        v-if="isFrontendConfigEnabled && extensions.length > 0"
+        #after-fields
+      >
+        <h2 class="text-lg font-semibold text-highlighted mt-2">
+          {{ t('motor-admin.clients.frontend_config_title') }}
+        </h2>
+        <component
+          v-for="ext in extensions"
+          :key="ext.key"
+          :is="ext.component"
+          :client-id="clientId"
+          :client-record="clientRecord"
+          :disabled="!canWrite"
+          mode="edit"
+        />
+        <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 || !allExtensionsValid"
+          @footer-linked="onFooterLinked"
+          @footer-unlinked="onFooterUnlinked"
+        />
+      </template>
+    </FormBase>
   </FormPage>
 </template>

package/app/pages/motor-admin/clients/create.vue

@@ -6,13 +6,27 @@ import { clientFormConfig } from '@motor-cms/ui-core/app/types/config/client'
 definePageMeta({ layout: 'default', permission: 'clients.write' })
 
 const { t } = useI18n()
+
+const isFrontendConfigEnabled
+  = useRuntimeConfig().public.featureClientFrontendConfig === true
+
+const { extensions, validateAll, getAllSubmitData } = useClientFormExtensions()
+
 const { fields, schema, groups, state, loading, formRef, onSubmit, onSaveAndNew } = await useEntityForm({
   apiEndpoint: '/api/v2/clients',
   routePrefix: '/motor-admin/clients',
   translationPrefix: 'motor-admin.clients',
   formMeta: clientFormMeta,
   formConfig: clientFormConfig,
-  mode: 'create'
+  mode: 'create',
+  beforeSubmit: async (data) => {
+    if (!isFrontendConfigEnabled || extensions.value.length === 0) return
+    const valid = await validateAll()
+    if (!valid) {
+      throw new Error(t('motor-core.global.validation_failed'))
+    }
+    data.frontend_config = getAllSubmitData()
+  }
 })
 </script>
 
@@ -32,6 +46,24 @@ const { fields, schema, groups, state, loading, formRef, onSubmit, onSaveAndNew
       show-save-and-new
       @submit="onSubmit"
       @save-and-new="onSaveAndNew"
-    />
+    >
+      <template
+        v-if="isFrontendConfigEnabled && extensions.length > 0"
+        #after-fields
+      >
+        <h2 class="text-lg font-semibold text-highlighted mt-2">
+          {{ t('motor-admin.clients.frontend_config_title') }}
+        </h2>
+        <component
+          v-for="ext in extensions"
+          :key="ext.key"
+          :is="ext.component"
+          :client-id="undefined"
+          :client-record="null"
+          :disabled="false"
+          mode="create"
+        />
+      </template>
+    </FormBase>
   </FormPage>
 </template>

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

@@ -2,11 +2,10 @@
 import { configVariableFormMeta } from '../../../../types/generated/form-meta'
 import { configVariableFormConfig } from '@motor-cms/ui-core/app/types/config/config-variable'
 
-definePageMeta({ layout: 'default', permission: 'config-variables.write' })
+definePageMeta({ layout: 'default', permission: 'config-variables.read' })
 
 const route = useRoute()
-const { t } = useI18n()
-const { fields, schema, groups, state, loading, fetching, fetchError, formRef, onSubmit, onSaveAndContinue, onSaveAndNew, deleteRecord, deleting } = await useEntityForm({
+const { fields, schema, groups, state, loading, fetching, fetchError, canWrite, pageTitle, formRef, onSubmit, onSaveAndContinue, onSaveAndNew, deleteRecord, deleting } = await useEntityForm({
   apiEndpoint: '/api/v2/config-variables',
   routePrefix: '/motor-admin/config-variables',
   translationPrefix: 'motor-admin.config_variables',
@@ -19,13 +18,14 @@ const { fields, schema, groups, state, loading, fetching, fetchError, formRef, o
 
 <template>
   <FormPage
-    :title="t('motor-admin.config_variables.edit_title')"
+    :title="pageTitle"
     back-route="/motor-admin/config-variables"
     :loading="fetching"
     :error="fetchError"
   >
     <FormBase
       ref="formRef"
+      :disabled="!canWrite"
       v-model:state="state"
       :fields="fields"
       :schema="schema"

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

@@ -3,12 +3,11 @@
 import { domainFormMeta } from '../../../../types/generated/form-meta'
 import { domainFormConfig, domainSelectOptionConfigs, domainProtocolOptions } from '@motor-cms/ui-core/app/types/config/domain'
 
-definePageMeta({ layout: 'default', permission: 'domains.write' })
+definePageMeta({ layout: 'default', permission: 'domains.read' })
 
 const route = useRoute()
-const { t } = useI18n()
 
-const { fields, schema, groups, state, loading, fetching, fetchError, formRef, selectOptions, selectOptionsLoading, onSubmit, onSaveAndContinue, onSaveAndNew, deleteRecord, deleting } = await useEntityForm({
+const { fields, schema, groups, state, loading, fetching, fetchError, canWrite, pageTitle, formRef, selectOptions, selectOptionsLoading, onSubmit, onSaveAndContinue, onSaveAndNew, deleteRecord, deleting } = await useEntityForm({
   apiEndpoint: '/api/v2/domains',
   routePrefix: '/motor-admin/domains',
   translationPrefix: 'motor-admin.domains',
@@ -23,17 +22,21 @@ const mergedSelectOptions = computed(() => ({
   ...selectOptions?.value,
   protocol: domainProtocolOptions
 }))
+
+const { can } = usePermissions()
+const showEntityConfigs = computed(() => can('entity-configurations.read'))
 </script>
 
 <template>
   <FormPage
-    :title="t('motor-admin.domains.edit_title')"
+    :title="pageTitle"
     back-route="/motor-admin/domains"
     :loading="fetching"
     :error="fetchError"
   >
     <FormBase
       ref="formRef"
+      :disabled="!canWrite"
       v-model:state="state"
       :fields="fields"
       :schema="schema"
@@ -49,6 +52,16 @@ const mergedSelectOptions = computed(() => ({
       @submit="onSubmit"
       @save-and-continue="onSaveAndContinue"
       @save-and-new="onSaveAndNew"
-    />
+    >
+      <template
+        v-if="showEntityConfigs"
+        #after-fields
+      >
+        <FormInputsEntityConfigurationsPanel
+          configurable-type="Motor\Admin\Models\Domain"
+          :configurable-id="Number(route.params.id)"
+        />
+      </template>
+    </FormBase>
   </FormPage>
 </template>

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

@@ -3,11 +3,10 @@
 import { emailTemplateFormMeta } from '../../../../types/generated/form-meta'
 import { emailTemplateFormConfig, emailTemplateSelectOptionConfigs } from '@motor-cms/ui-core/app/types/config/email-template'
 
-definePageMeta({ layout: 'default', permission: 'email-templates.write' })
+definePageMeta({ layout: 'default', permission: 'email-templates.read' })
 
 const route = useRoute()
-const { t } = useI18n()
-const { fields: rawFields, schema, groups, state, loading, fetching, fetchError, formRef, selectOptions, selectOptionsLoading, onSubmit, onSaveAndContinue, onSaveAndNew, deleteRecord, deleting } = await useEntityForm({
+const { fields: rawFields, schema, groups, state, loading, fetching, fetchError, canWrite, pageTitle, formRef, selectOptions, selectOptionsLoading, onSubmit, onSaveAndContinue, onSaveAndNew, deleteRecord, deleting } = await useEntityForm({
   apiEndpoint: '/api/v2/email-templates',
   routePrefix: '/motor-admin/email-templates',
   translationPrefix: 'motor-admin.email_templates',
@@ -29,13 +28,14 @@ if (bodyHtmlField) {
 
 <template>
   <FormPage
-    :title="t('motor-admin.email_templates.edit_title')"
+    :title="pageTitle"
     back-route="/motor-admin/email-templates"
     :loading="fetching"
     :error="fetchError"
   >
     <FormBase
       ref="formRef"
+      :disabled="!canWrite"
       v-model:state="state"
       :fields="fields"
       :schema="schema"

package/app/pages/motor-admin/email-templates/index.vue

@@ -10,6 +10,7 @@ definePageMeta({ permission: 'email-templates.read' })
 type EmailTemplate = components['schemas']['EmailTemplateResource']
 
 const { t } = useI18n()
+const client = useSanctumClient()
 
 const usageModalOpen = ref(false)
 const usageEndpoint = ref('')
@@ -28,6 +29,18 @@ const rowActions: RowActionDef<EmailTemplate>[] = [
       usageEndpoint.value = `/api/v2/email-templates/${row.id}/usage`
       usageModalOpen.value = true
     }
+  },
+  {
+    key: 'duplicate',
+    label: t('motor-core.grid.duplicate'),
+    icon: 'i-lucide-copy',
+    handler: async (row: EmailTemplate) => {
+      const response = await client<{ data: EmailTemplate }>(
+        `/api/v2/email-templates/${row.id}/duplicate`,
+        { method: 'POST' }
+      )
+      await navigateTo(`/motor-admin/email-templates/${response.data.id}/edit`)
+    }
   }
 ]
 
@@ -37,31 +50,29 @@ const fetchEmailTemplates = useGridFetch<EmailTemplate>('/api/v2/email-templates
 </script>
 
 <template>
-  <div>
-    <GridPage
-      :title="t('motor-admin.email_templates.title')"
-      :subtitle="t('motor-admin.email_templates.subtitle')"
-      add-route="/motor-admin/email-templates/create"
-      :add-label="t('motor-admin.email_templates.add')"
+  <GridPage
+    :title="t('motor-admin.email_templates.title')"
+    :subtitle="t('motor-admin.email_templates.subtitle')"
+    add-route="/motor-admin/email-templates/create"
+    :add-label="t('motor-admin.email_templates.add')"
+    write-permission="email-templates.write"
+  >
+    <GridBase
+      id="email-templates-grid"
+      :fetch="fetchEmailTemplates"
+      :columns="columns"
+      :filters="filters"
+      :row-actions="rowActions"
+      base-path="/motor-admin/email-templates"
+      :row-click-to="(row: any) => `/motor-admin/email-templates/${row.id}/edit`"
       write-permission="email-templates.write"
-    >
-      <GridBase
-        id="email-templates-grid"
-        :fetch="fetchEmailTemplates"
-        :columns="columns"
-        :filters="filters"
-        :row-actions="rowActions"
-        base-path="/motor-admin/email-templates"
-        :row-click-to="(row: any) => `/motor-admin/email-templates/${row.id}/edit`"
-        write-permission="email-templates.write"
-        delete-permission="email-templates.delete"
-      />
-    </GridPage>
-
-    <EntityUsageModal
-      v-model:open="usageModalOpen"
-      :endpoint="usageEndpoint"
-      :title="t('motor-admin.email_templates.usage_title')"
+      delete-permission="email-templates.delete"
     />
-  </div>
+  </GridPage>
+
+  <EntityUsageModal
+    v-model:open="usageModalOpen"
+    :endpoint="usageEndpoint"
+    :title="t('motor-admin.email_templates.usage_title')"
+  />
 </template>

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

@@ -2,11 +2,10 @@
 import { languageFormMeta } from '../../../../types/generated/form-meta'
 import { languageFormConfig } from '@motor-cms/ui-core/app/types/config/language'
 
-definePageMeta({ layout: 'default', permission: 'languages.write' })
+definePageMeta({ layout: 'default', permission: 'languages.read' })
 
 const route = useRoute()
-const { t } = useI18n()
-const { fields, schema, groups, state, loading, fetching, fetchError, formRef, onSubmit, onSaveAndContinue, onSaveAndNew, deleteRecord, deleting } = await useEntityForm({
+const { fields, schema, groups, state, loading, fetching, fetchError, canWrite, pageTitle, formRef, onSubmit, onSaveAndContinue, onSaveAndNew, deleteRecord, deleting } = await useEntityForm({
   apiEndpoint: '/api/v2/languages',
   routePrefix: '/motor-admin/languages',
   translationPrefix: 'motor-admin.languages',
@@ -15,17 +14,31 @@ const { fields, schema, groups, state, loading, fetching, fetchError, formRef, o
   mode: 'edit',
   id: route.params.id as string
 })
+
+const isoField = fields.find(f => f.key === 'iso_639_1')
+watch(() => state.iso_639_1, (code) => {
+  const opt = isoField?.staticOptions?.find(o => o.value === code)
+  if (opt) {
+    const match = opt.label.match(/^(.+?)\s*—\s*(.+?)\s*\(/)
+    state.english_name = match?.[1]?.trim() ?? ''
+    state.native_name = match?.[2]?.trim() ?? ''
+  } else {
+    state.english_name = ''
+    state.native_name = ''
+  }
+})
 </script>
 
 <template>
   <FormPage
-    :title="t('motor-admin.languages.edit_title')"
+    :title="pageTitle"
     back-route="/motor-admin/languages"
     :loading="fetching"
     :error="fetchError"
   >
     <FormBase
       ref="formRef"
+      :disabled="!canWrite"
       v-model:state="state"
       :fields="fields"
       :schema="schema"

package/app/pages/motor-admin/languages/create.vue

@@ -13,6 +13,19 @@ const { fields, schema, groups, state, loading, formRef, onSubmit, onSaveAndNew
   formConfig: languageFormConfig,
   mode: 'create'
 })
+
+const isoField = fields.find(f => f.key === 'iso_639_1')
+watch(() => state.iso_639_1, (code) => {
+  const opt = isoField?.staticOptions?.find(o => o.value === code)
+  if (opt) {
+    const match = opt.label.match(/^(.+?)\s*—\s*(.+?)\s*\(/)
+    state.english_name = match?.[1]?.trim() ?? ''
+    state.native_name = match?.[2]?.trim() ?? ''
+  } else {
+    state.english_name = ''
+    state.native_name = ''
+  }
+})
 </script>
 
 <template>

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

@@ -2,11 +2,10 @@
 import { permissionGroupFormMeta } from '../../../../types/generated/form-meta'
 import { permissionGroupFormConfig, permissionGroupSelectOptionConfigs, permissionGroupExtraFields } from '@motor-cms/ui-core/app/types/config/permission-group'
 
-definePageMeta({ layout: 'default', permission: 'permission-groups.write' })
+definePageMeta({ layout: 'default', permission: 'permission-groups.read' })
 
 const route = useRoute()
-const { t } = useI18n()
-const { fields, schema, groups, state, loading, fetching, fetchError, formRef, selectOptions, selectOptionsLoading, onSubmit, onSaveAndContinue, onSaveAndNew, deleteRecord, deleting } = await useEntityForm({
+const { fields, schema, groups, state, loading, fetching, fetchError, canWrite, pageTitle, formRef, selectOptions, selectOptionsLoading, onSubmit, onSaveAndContinue, onSaveAndNew, deleteRecord, deleting } = await useEntityForm({
   apiEndpoint: '/api/v2/permission-groups',
   routePrefix: '/motor-admin/permission-groups',
   translationPrefix: 'motor-admin.permissions',
@@ -22,13 +21,14 @@ const { fields, schema, groups, state, loading, fetching, fetchError, formRef, s
 
 <template>
   <FormPage
-    :title="t('motor-admin.permissions.edit_title')"
+    :title="pageTitle"
     back-route="/motor-admin/permission-groups"
     :loading="fetching"
     :error="fetchError"
   >
     <FormBase
       ref="formRef"
+      :disabled="!canWrite"
       v-model:state="state"
       :fields="fields"
       :schema="schema"

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

@@ -2,11 +2,10 @@
 import { roleFormMeta } from '../../../../types/generated/form-meta'
 import { roleFormConfig, roleSelectOptionConfigs } from '@motor-cms/ui-core/app/types/config/role'
 
-definePageMeta({ layout: 'default', permission: 'roles.write' })
+definePageMeta({ layout: 'default', permission: 'roles.read' })
 
 const route = useRoute()
-const { t } = useI18n()
-const { fields, schema, groups, state, loading, fetching, fetchError, formRef, selectOptions, selectOptionsLoading, onSubmit, onSaveAndContinue, onSaveAndNew, deleteRecord, deleting } = await useEntityForm({
+const { fields, schema, groups, state, loading, fetching, fetchError, canWrite, pageTitle, formRef, selectOptions, selectOptionsLoading, onSubmit, onSaveAndContinue, onSaveAndNew, deleteRecord, deleting } = await useEntityForm({
   apiEndpoint: '/api/v2/roles',
   routePrefix: '/motor-admin/roles',
   translationPrefix: 'motor-admin.roles',
@@ -20,13 +19,14 @@ const { fields, schema, groups, state, loading, fetching, fetchError, formRef, s
 
 <template>
   <FormPage
-    :title="t('motor-admin.roles.edit_title')"
+    :title="pageTitle"
     back-route="/motor-admin/roles"
     :loading="fetching"
     :error="fetchError"
   >
     <FormBase
       ref="formRef"
+      :disabled="!canWrite"
       v-model:state="state"
       :fields="fields"
       :schema="schema"

package/app/pages/motor-admin/roles/create.vue

@@ -13,7 +13,10 @@ const { fields, schema, groups, state, loading, selectOptions, selectOptionsLoad
   formConfig: roleFormConfig,
   mode: 'create',
   selectOptionConfigs: roleSelectOptionConfigs,
-  extraState: { guard_name: 'web' }
+  extraState: { guard_name: 'web' },
+  beforeSubmit: (data, formState) => {
+    data.guard_name = formState.guard_name
+  }
 })
 </script>
 

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

@@ -3,12 +3,12 @@
 import { userFormMeta } from '../../../../types/generated/form-meta'
 import { userEditFormConfig, userSelectOptionConfigs, userEditExtraFields } from '@motor-cms/ui-core/app/types/config/user'
 
-definePageMeta({ layout: 'default', permission: 'users.write' })
+definePageMeta({ layout: 'default', permission: 'users.read' })
 
 const route = useRoute()
 const { t } = useI18n()
 
-const { fields: rawFields, schema, groups, state, loading, fetching, fetchError, formRef, selectOptions, selectOptionsLoading, onSubmit, onSaveAndContinue, onSaveAndNew, deleteRecord, deleting } = await useEntityForm({
+const { fields: rawFields, schema, groups, state, loading, fetching, fetchError, canWrite, pageTitle, formRef, selectOptions, selectOptionsLoading, onSubmit, onSaveAndContinue, onSaveAndNew, deleteRecord, deleting } = await useEntityForm({
   apiEndpoint: '/api/v2/users',
   routePrefix: '/motor-admin/users',
   translationPrefix: 'motor-admin.users',
@@ -56,13 +56,14 @@ watchEffect(() => {
 
 <template>
   <FormPage
-    :title="t('motor-admin.users.edit_title')"
+    :title="pageTitle"
     back-route="/motor-admin/users"
     :loading="fetching"
     :error="fetchError"
   >
     <FormBase
       ref="formRef"
+      :disabled="!canWrite"
       v-model:state="state"
       :fields="fields"
       :schema="refinedSchema"

package/app/pages/motor-admin/users/index.vue

@@ -44,6 +44,7 @@ const { fetch: fetchUsers } = useGridData<User>('/api/v2/users')
 </script>
 
 <template>
+  <UsersOnboarding />
   <GridPage
     :title="t('motor-admin.users.title')"
     :subtitle="t('motor-admin.users.subtitle')"