@jumentix/cli-init 0.0.0

package/templates/frontend/src/components/x-crud/XCrud.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import { CCard, CCardBody, CCardHeader, CNav, CNavItem } from '@coreui/vue';
+
+import XCrudForm from '@/components/x-crud/XCrudForm.vue';
+import XCrudGrid from '@/components/x-crud/XCrudGrid.vue';
+import XCrudPanels from '@/components/x-crud/XCrudPanels.vue';
+import XCrudRowDetail from '@/components/x-crud/XCrudRowDetail.vue';
+import XCrudToolbar from '@/components/x-crud/XCrudToolbar.vue';
+import { useXCrud } from '@/components/x-crud/useXCrud';
+import type { XCrudEntityConfig } from '@/components/x-crud/xCrudTypes';
+import { usePermissions } from '@/contracts/usePermissions';
+import { t } from '@/i18n';
+import { useNotificationStore } from '@/stores/notifications';
+
+/**
+ * XCrud (JUM-772 redesign, X-SYNTH pattern): one card; pills "New ${entity} |
+ * ${entity} Listing" in the card header; aggregates render as widgets on top
+ * of the listing; RBAC gates every affordance (scopes read from the OAS).
+ */
+const props = defineProps<{
+  config: XCrudEntityConfig;
+  canUpdateRow?: (row: Record<string, unknown>) => boolean;
+  canDeleteRow?: (row: Record<string, unknown>) => boolean;
+  referenceRestrictions?: Record<string, string[]>;
+}>();
+
+const crud = useXCrud(props.config);
+const permissions = usePermissions();
+
+const view = ref<'listing' | 'new'>('listing');
+const detailTab = ref<'preview' | 'edit'>('preview');
+const filtersOpen = ref(false);
+const reopenRecord = ref<Record<string, unknown> | undefined>(undefined);
+const notifications = useNotificationStore();
+
+const canCreate = permissions.canOp(props.config.operations.create);
+const canUpdateOp = permissions.canOp(props.config.operations.update);
+const canDeleteOp = permissions.canOp(props.config.operations.delete);
+
+const canUpdateRow = (row: Record<string, unknown>) => (
+  canUpdateOp.value && (props.canUpdateRow ? props.canUpdateRow(row) : true)
+);
+const canDeleteRow = (row: Record<string, unknown>) => (
+  canDeleteOp.value && (props.canDeleteRow ? props.canDeleteRow(row) : true)
+);
+
+const expand = (id: string, tab: 'preview' | 'edit'): void => {
+  detailTab.value = tab;
+  crud.toggleExpanded(id);
+};
+
+const submitCreate = async (body: Record<string, unknown>): Promise<void> => {
+  await crud.submitCreate(body);
+  if (!crud.errorMessage.value) view.value = 'listing';
+};
+
+const submitRowUpdate = async (body: Record<string, unknown>): Promise<void> => {
+  if (!crud.expandedId.value) return;
+  await crud.submitUpdate(crud.expandedId.value, body);
+};
+
+onMounted(async () => {
+  await permissions.ensure();
+  await Promise.all([crud.load(), crud.loadReferences()]);
+});
+
+watch(() => notifications.reopenTarget, (target) => {
+  if (!target?.reopen || target.entity !== props.config.entity) return;
+  reopenRecord.value = target.reopen;
+  view.value = 'new';
+  notifications.clearReopen();
+});
+</script>
+
+<template>
+  <CCard class="border-0 shadow-sm xcrud">
+    <CCardHeader class="bg-transparent">
+      <CNav variant="pills" role="tablist">
+        <CNavItem v-if="canCreate">
+          <a
+            class="nav-link"
+            href="#"
+            :class="{ active: view === 'new' }"
+            @click.prevent="view = 'new'"
+          >
+            {{ t('crud.new', { entity: crud.title.value }) }}
+          </a>
+        </CNavItem>
+        <CNavItem>
+          <a
+            class="nav-link"
+            href="#"
+            :class="{ active: view === 'listing' }"
+            @click.prevent="view = 'listing'"
+          >
+            {{ t('crud.listing', { entity: crud.title.value }) }}
+          </a>
+        </CNavItem>
+      </CNav>
+    </CCardHeader>
+    <CCardBody>
+      <div v-if="crud.errorMessage.value" class="alert alert-danger" role="alert">
+        {{ crud.errorMessage.value }}
+      </div>
+      <div v-if="crud.notice.value" class="alert alert-success" role="alert">
+        {{ crud.notice.value }}
+      </div>
+
+      <template v-if="view === 'listing'">
+        <XCrudPanels v-if="(config.aggregates ?? []).length" :crud="crud" />
+        <XCrudToolbar v-model:filters-open="filtersOpen" :crud="crud" />
+        <XCrudGrid
+          :crud="crud"
+          :can-update="canUpdateRow"
+          :can-delete="canDeleteRow"
+          :show-filters="filtersOpen"
+          @expand="expand"
+          @delete="crud.submitDelete"
+          @inline-commit="crud.submitInline"
+        >
+          <template #detail="{ row }">
+            <XCrudRowDetail
+              :config="config"
+              :record="row"
+              :update-descriptors="crud.updateDescriptors"
+              :can-update="canUpdateRow(row)"
+              :initial-tab="detailTab"
+              :reference-restrictions="referenceRestrictions"
+              :reference-labels="crud.referenceLabels"
+              @submit-update="submitRowUpdate"
+              @close="crud.toggleExpanded(crud.rowId(row))"
+            />
+          </template>
+        </XCrudGrid>
+      </template>
+
+      <template v-else>
+        <h5 class="mb-3">{{ t('crud.new', { entity: crud.title.value }) }}</h5>
+        <XCrudForm
+          :config="config"
+          mode="create"
+          :descriptors="crud.createDescriptors"
+          :record="reopenRecord"
+          :reference-restrictions="referenceRestrictions"
+          @submit="submitCreate"
+          @cancel="view = 'listing'; reopenRecord = undefined"
+        />
+      </template>
+    </CCardBody>
+  </CCard>
+</template>

package/templates/frontend/src/components/x-crud/XCrudArrayEditor.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { CButton, CFormCheck } from '@coreui/vue';
+
+import OasFormField from '@/components/OasFormField.vue';
+import SearchableEnumInput from '@/components/SearchableEnumInput.vue';
+import type { FieldDescriptor } from '@/contracts/formSchema';
+import { fieldLabel } from '@/contracts/labels';
+import { t } from '@/i18n';
+
+/**
+ * XCrudArrayEditor (JUM-772): editor for array-of-objects fields (documents,
+ * phones, emails…). Each item edits inline against the item schema's
+ * descriptors (OAS-driven); add/remove rows; nothing is hardcoded.
+ */
+const props = defineProps<{
+  descriptor: FieldDescriptor;
+  itemDescriptors: FieldDescriptor[];
+  modelValue: Array<Record<string, unknown>>;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: Array<Record<string, unknown>>];
+}>();
+
+const blankItem = (): Record<string, unknown> => Object.fromEntries(
+  props.itemDescriptors
+    .filter((d) => d.default !== undefined)
+    .map((d) => [d.name, d.default])
+);
+
+const addItem = (): void => {
+  emit('update:modelValue', [...props.modelValue, blankItem()]);
+};
+
+const removeItem = (index: number): void => {
+  emit('update:modelValue', props.modelValue.filter((_, i) => i !== index));
+};
+
+const setItemField = (index: number, field: string, value: unknown): void => {
+  emit('update:modelValue', props.modelValue.map((item, i) => (
+    i === index ? { ...item, [field]: value } : item
+  )));
+};
+</script>
+
+<template>
+  <div class="xcrud-array-editor border rounded p-2">
+    <div class="small text-uppercase text-body-secondary mb-2">
+      {{ fieldLabel(descriptor) }}
+      <span v-if="descriptor.required" class="text-danger">*</span>
+    </div>
+    <div
+      v-for="(item, index) in modelValue"
+      :key="index"
+      class="d-flex gap-2 align-items-end mb-2 border-bottom pb-2"
+    >
+      <template v-for="d in itemDescriptors" :key="d.name">
+        <div v-if="d.enum" class="xcrud-array-cell">
+          <label class="form-label small mb-1" :for="`${descriptor.name}-${index}-${d.name}`">
+            {{ fieldLabel(d) }}<span v-if="d.required" class="text-danger">*</span>
+          </label>
+          <SearchableEnumInput
+            :id="`${descriptor.name}-${index}-${d.name}`"
+            :model-value="String(item[d.name] ?? '')"
+            :options="d.enum"
+            :maxlength="d.maxLength"
+            :aria-label="`${descriptor.name} ${index} ${d.name}`"
+            :placeholder="fieldLabel(d)"
+            @update:model-value="setItemField(index, d.name, $event)"
+          />
+        </div>
+        <CFormCheck
+          v-else-if="d.type === 'boolean'"
+          :id="`${descriptor.name}-${index}-${d.name}`"
+          :model-value="Boolean(item[d.name])"
+          :label="fieldLabel(d)"
+          @update:model-value="setItemField(index, d.name, $event)"
+        />
+        <div v-else class="flex-grow-1">
+          <OasFormField
+            :descriptor="d"
+            :model-value="item[d.name]"
+            class="mb-0"
+            @update:model-value="setItemField(index, d.name, $event)"
+          />
+        </div>
+      </template>
+      <CButton
+        color="danger"
+        variant="outline"
+        size="sm"
+        :aria-label="t('crud.remove', { field: descriptor.name, index })"
+        @click="removeItem(index)"
+      >
+        <CIcon icon="cil-trash" size="sm" />
+      </CButton>
+    </div>
+    <CButton
+      color="success"
+      variant="outline"
+      size="sm"
+      :aria-label="`add ${descriptor.name}`"
+      @click="addItem"
+    >
+      <CIcon icon="cil-plus" size="sm" /> {{ t('crud.add') }}
+    </CButton>
+  </div>
+</template>

package/templates/frontend/src/components/x-crud/XCrudChart.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { CChart } from '@coreui/vue-chartjs';
+
+import { t } from '@/i18n';
+
+/**
+ * XCrudChart (JUM-772): aggregate bar chart (per enum facet or numeric
+ * groupBy) using @coreui/vue-chartjs — a dependency the app already has.
+ * The canvas gets an explicit height (JUM-781): Chart.js with
+ * `maintainAspectRatio: false` inside a flex card rendered 0 px tall on
+ * narrow viewports.
+ */
+defineProps<{
+  title: string;
+  breakdown: Array<{ label: string; value: number }>;
+}>();
+</script>
+
+<template>
+  <div class="xcrud-chart">
+    <div class="text-body-secondary small mb-2">{{ title }}</div>
+    <div v-if="breakdown.length" class="xcrud-chart-canvas">
+      <CChart
+        type="bar"
+        :data="{
+          labels: breakdown.map((b) => b.label),
+          datasets: [{ label: title, data: breakdown.map((b) => b.value), backgroundColor: '#4a5cd4' }]
+        }"
+        :options="{
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: { legend: { display: false } },
+          scales: { y: { beginAtZero: true, ticks: { precision: 0 } } }
+        }"
+      />
+    </div>
+    <div v-else class="text-body-secondary small">{{ t('app.noData') }}</div>
+  </div>
+</template>
+
+<style scoped>
+.xcrud-chart-canvas {
+  position: relative;
+  height: 180px;
+  min-height: 180px;
+  width: 100%;
+}
+</style>

package/templates/frontend/src/components/x-crud/XCrudFilters.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { CFormInput, CFormSelect } from '@coreui/vue';
+
+import type { FieldDescriptor } from '@/contracts/formSchema';
+import { isTimestampField } from '@/components/x-crud/xCrudFormat';
+import { t } from '@/i18n';
+
+/**
+ * XCrudColumnFilter (JUM-772 redesign): one compact filter control per column,
+ * rendered in the grid's second thead row (Smart Table style). The control
+ * matches the OAS facet: enum → select, boolean → tri-state, date → range
+ * (stacked, so the column keeps its width — JUM-781).
+ */
+const props = defineProps<{
+  descriptor: FieldDescriptor;
+  value: unknown;
+}>();
+
+const emit = defineEmits<{ set: [value: unknown] }>();
+
+const range = () => (Array.isArray(props.value) ? props.value as [string?, string?] : ['', '']);
+</script>
+
+<template>
+  <CFormSelect
+    v-if="descriptor.enum"
+    size="sm"
+    :aria-label="`filter-${descriptor.name}`"
+    :model-value="String(value ?? '')"
+    :options="[{ label: t('app.all'), value: '' }, ...descriptor.enum.map((option) => ({ label: option, value: option }))]"
+    @update:model-value="emit('set', String($event))"
+  />
+  <CFormSelect
+    v-else-if="descriptor.type === 'boolean'"
+    size="sm"
+    :aria-label="`filter-${descriptor.name}`"
+    :model-value="String(value ?? '')"
+    :options="[
+      { label: t('app.all'), value: '' },
+      { label: t('app.yes'), value: 'true' },
+      { label: t('app.no'), value: 'false' }
+    ]"
+    @update:model-value="emit('set', $event === '' ? '' : $event === 'true')"
+  />
+  <div v-else-if="isTimestampField(descriptor)" class="d-flex flex-column gap-1 xcrud-date-filter">
+    <CFormInput
+      size="sm"
+      type="date"
+      :aria-label="`filter-${descriptor.name}-from`"
+      :model-value="String(range()[0] ?? '')"
+      @update:model-value="emit('set', [String($event), range()[1] ?? ''])"
+    />
+    <CFormInput
+      size="sm"
+      type="date"
+      :aria-label="`filter-${descriptor.name}-to`"
+      :model-value="String(range()[1] ?? '')"
+      @update:model-value="emit('set', [range()[0] ?? '', String($event)])"
+    />
+  </div>
+  <CFormInput
+    v-else
+    size="sm"
+    :aria-label="`filter-${descriptor.name}`"
+    :model-value="String(value ?? '')"
+    :maxlength="descriptor.maxLength"
+    @update:model-value="emit('set', $event)"
+  />
+</template>

package/templates/frontend/src/components/x-crud/XCrudForm.vue

@@ -0,0 +1,261 @@
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from 'vue';
+import { CAvatar, CButton } from '@coreui/vue';
+
+import OasFormField from '@/components/OasFormField.vue';
+import XCrudArrayEditor from '@/components/x-crud/XCrudArrayEditor.vue';
+import XCrudReferenceInput from '@/components/x-crud/XCrudReferenceInput.vue';
+import { formatCellValue, shortId } from '@/components/x-crud/xCrudFormat';
+import type { XCrudEntityConfig, XCrudMode } from '@/components/x-crud/xCrudTypes';
+import {
+  arrayItemDescriptors, fieldDescriptors, type FieldDescriptor
+} from '@/contracts/formSchema';
+import { fieldHelp, fieldLabel } from '@/contracts/labels';
+import { collectBody, validateAll } from '@/contracts/oasForm';
+import { t } from '@/i18n';
+
+/**
+ * XCrudForm (JUM-772 redesign, X-SYNTH pattern): 2-column field grid with
+ * OAS descriptions as helper text, avatar block, Save/Cancel footer; preview
+ * renders a readonly 4-column field grid with the same cell formatting as
+ * the table.
+ */
+const props = defineProps<{
+  config: XCrudEntityConfig;
+  mode: XCrudMode;
+  descriptors: FieldDescriptor[];
+  record?: Record<string, unknown>;
+  referenceRestrictions?: Record<string, string[]>;
+  /** Resolved `x-relation` labels (field → id → label) for preview cells (JUM-787). */
+  referenceLabels?: Record<string, Record<string, string>>;
+}>();
+
+const emit = defineEmits<{
+  submit: [body: Record<string, unknown>];
+  cancel: [];
+}>();
+
+const values = reactive<Record<string, unknown>>({});
+const formError = ref('');
+
+watch(
+  () => [props.record, props.mode],
+  () => {
+    Object.keys(values).forEach((key) => delete values[key]);
+    if (props.record) {
+      for (const d of props.descriptors) {
+        if (props.record[d.name] !== undefined) values[d.name] = props.record[d.name];
+      }
+    }
+    for (const d of props.descriptors) {
+      if (values[d.name] === undefined && d.default !== undefined) values[d.name] = d.default;
+    }
+    formError.value = '';
+  },
+  { immediate: true, deep: true }
+);
+
+const isArrayField = (d: FieldDescriptor) => d.type === 'array';
+
+/** Item descriptors for array-of-objects fields (from the active schema). */
+const itemDescriptorsFor = (d: FieldDescriptor): FieldDescriptor[] | undefined => {
+  const schema = props.mode === 'create' ? props.config.schemas.create : props.config.schemas.update;
+  return arrayItemDescriptors(schema, d.name);
+};
+
+const editableDescriptors = computed(() => (
+  props.descriptors.filter((d) => d.name !== props.config.avatarField)
+));
+
+const arrayValues = (d: FieldDescriptor): string[] => {
+  const current = values[d.name];
+  return Array.isArray(current) ? current.map(String) : [];
+};
+
+const toggleArrayOption = (d: FieldDescriptor, option: string, checked: boolean): void => {
+  const current = new Set(arrayValues(d));
+  if (checked) current.add(option);
+  else current.delete(option);
+  values[d.name] = [...current];
+};
+
+const submit = (): void => {
+  const invalid = validateAll(props.descriptors, values);
+  if (invalid) {
+    formError.value = invalid;
+    return;
+  }
+  formError.value = '';
+  emit('submit', collectBody(props.descriptors, values));
+};
+
+const previewEntries = computed(() => {
+  if (!props.record) return [];
+  return Object.entries(props.record).filter(([key]) => key !== 'password');
+});
+
+/** Entity descriptors drive preview labels, formats and reference resolution. */
+const entityDescriptors = computed<Record<string, FieldDescriptor>>(() => {
+  try {
+    return Object.fromEntries(fieldDescriptors(props.config.entity).map((d) => [d.name, d]));
+  } catch {
+    return {};
+  }
+});
+
+const previewLabel = (key: string): string => {
+  const descriptor = entityDescriptors.value[key];
+  return descriptor ? fieldLabel(descriptor, props.config.columnLabels) : fieldLabel({ name: key }, props.config.columnLabels);
+};
+
+const previewValue = (key: string, value: unknown): string => {
+  const descriptor = entityDescriptors.value[key] ?? { name: key, type: typeof value, required: false };
+  return formatCellValue(descriptor, value);
+};
+
+const referenceLabelFor = (key: string, value: unknown): string => (
+  props.referenceLabels?.[key]?.[String(value ?? '')] ?? String(value ?? '')
+);
+
+const isReference = (key: string): boolean => Boolean(entityDescriptors.value[key]?.relation);
+
+const label = (d: FieldDescriptor): string => fieldLabel(d, props.config.columnLabels);
+const help = (d: FieldDescriptor): string | undefined => fieldHelp(d);
+</script>
+
+<template>
+  <div class="xcrud-form">
+    <!-- PREVIEW: readonly full record, 4-column field grid -->
+    <template v-if="mode === 'preview' && record">
+      <div class="row g-3">
+        <template v-for="[key, value] in previewEntries" :key="key">
+          <div class="col-12 col-md-3">
+            <div class="small text-uppercase text-body-secondary">{{ previewLabel(key) }}</div>
+            <div class="fw-medium">
+              <template v-if="Array.isArray(value) && value.length && typeof value[0] === 'object'">
+                <div v-for="(item, index) in value" :key="index" class="border rounded p-2 mb-1 small">
+                  <div v-for="(fieldValue, fieldKey) in item" :key="fieldKey">
+                    <strong>{{ fieldLabel({ name: String(fieldKey) }) }}:</strong> {{ fieldValue }}
+                  </div>
+                </div>
+              </template>
+              <template v-else-if="Array.isArray(value) && isReference(key)">
+                <span v-for="(chip, index) in value" :key="index" class="badge text-bg-light me-1">
+                  {{ referenceLabelFor(key, chip) }}
+                </span>
+                <span v-if="value.length === 0">—</span>
+              </template>
+              <template v-else-if="Array.isArray(value)">
+                <span v-for="(chip, index) in value" :key="index" class="badge text-bg-secondary me-1">
+                  {{ chip }}
+                </span>
+                <span v-if="value.length === 0">—</span>
+              </template>
+              <template v-else-if="isReference(key)">
+                {{ referenceLabelFor(key, value) }}
+              </template>
+              <template v-else-if="key === config.avatarField">
+                <CAvatar :src="String(value ?? '')" size="lg" color="secondary" text-color="white">
+                  <CIcon icon="cil-user" size="lg" />
+                </CAvatar>
+              </template>
+              <template v-else-if="key === 'id' || key.endsWith('Id')">
+                <span class="font-monospace small" :title="String(value ?? '')">{{ shortId(value) }}</span>
+              </template>
+              <template v-else>
+                {{ previewValue(key, value) }}
+              </template>
+            </div>
+          </div>
+        </template>
+      </div>
+    </template>
+
+    <!-- CREATE / UPDATE: 2-column field grid with helper text -->
+    <template v-else>
+      <div v-if="formError" class="alert alert-danger" role="alert">{{ formError }}</div>
+
+      <div v-if="config.avatarField" class="d-flex align-items-center gap-3 mb-3">
+        <CAvatar
+          :src="String(record?.[config.avatarField] ?? '')"
+          size="lg"
+          color="secondary"
+          text-color="white"
+        >
+          <CIcon icon="cil-user" size="lg" />
+        </CAvatar>
+        <CButton color="secondary" variant="outline" size="sm" type="button">
+          <CIcon icon="cil-cloud-upload" size="sm" />
+          {{ mode === 'create' ? t('crud.uploadPhoto') : t('crud.changePhoto') }}
+        </CButton>
+      </div>
+
+      <div class="row g-3">
+        <template v-for="d in editableDescriptors" :key="d.name">
+          <!-- array-of-objects: full sub-resource editor (JUM-772) -->
+          <div
+            v-if="isArrayField(d) && itemDescriptorsFor(d)"
+            class="col-12"
+          >
+            <XCrudArrayEditor
+              :descriptor="d"
+              :item-descriptors="itemDescriptorsFor(d) ?? []"
+              :model-value="Array.isArray(values[d.name]) ? values[d.name] as Record<string, unknown>[] : []"
+              @update:model-value="values[d.name] = $event"
+            />
+          </div>
+          <!-- array-of-strings as checkbox group (options from the config) -->
+          <div v-if="isArrayField(d) && config.arrayOptions?.[d.name]" class="col-12 col-md-6">
+            <label class="form-label fw-semibold mb-1">
+              {{ label(d) }}
+              <span v-if="d.required" class="text-danger">*</span>
+            </label>
+            <div>
+              <label
+                v-for="option in config.arrayOptions[d.name]"
+                :key="option"
+                class="form-check form-check-inline"
+              >
+                <input
+                  class="form-check-input"
+                  type="checkbox"
+                  :checked="arrayValues(d).includes(option)"
+                  :aria-label="`${d.name}-${option}`"
+                  @change="toggleArrayOption(d, option, ($event.target as HTMLInputElement).checked)"
+                >
+                <span class="form-check-label">{{ option }}</span>
+              </label>
+            </div>
+          </div>
+          <!-- entity reference (x-relation) -->
+          <div v-else-if="d.relation?.entity" class="col-12 col-md-6">
+            <label class="form-label fw-semibold mb-1" :for="`xref-${d.name}`">
+              {{ label(d) }}
+              <span v-if="d.required" class="text-danger">*</span>
+            </label>
+            <XCrudReferenceInput
+              :descriptor="d"
+              :model-value="String(values[d.name] ?? '')"
+              :restrict-to="referenceRestrictions?.[d.name]"
+              @update:model-value="values[d.name] = $event"
+            />
+            <div v-if="help(d)" class="form-text">{{ help(d) }}</div>
+          </div>
+          <!-- plain OAS field -->
+          <div v-else-if="!isArrayField(d)" class="col-12 col-md-6">
+            <OasFormField v-model="values[d.name]" :descriptor="d" class="mb-0" />
+          </div>
+        </template>
+      </div>
+
+      <div class="d-flex gap-2 mt-3 pt-3 border-top">
+        <CButton color="primary" type="button" @click="submit">
+          <CIcon icon="cil-save" size="sm" /> {{ mode === 'create' ? t('crud.create') : t('crud.save') }}
+        </CButton>
+        <CButton color="secondary" variant="outline" type="button" @click="emit('cancel')">
+          {{ t('crud.cancel') }}
+        </CButton>
+      </div>
+    </template>
+  </div>
+</template>