@jumentix/cli-init 0.0.0

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

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import {
+  CNav,
+  CNavItem,
+  CTabContent,
+  CTabPane,
+  CTable,
+  CTableBody,
+  CTableDataCell,
+  CTableHead,
+  CTableHeaderCell,
+  CTableRow
+} from '@coreui/vue';
+
+import XCrudForm from '@/components/x-crud/XCrudForm.vue';
+import type { XCrudEntityConfig } from '@/components/x-crud/xCrudTypes';
+import { arrayItemDescriptors, type FieldDescriptor } from '@/contracts/formSchema';
+import { fieldLabel } from '@/contracts/labels';
+import { localized, t } from '@/i18n';
+
+/**
+ * XCrudRowDetail (JUM-772 redesign): card below the clicked row with tabs —
+ * "${entity} Data" (scalars), one tab per array-of-objects field (emails,
+ * phones, documents…) rendered as a clean readonly table, and "Edit"
+ * (RBAC-gated). Close button on the right (X-SYNTH pattern).
+ */
+const props = defineProps<{
+  config: XCrudEntityConfig;
+  record: Record<string, unknown>;
+  updateDescriptors: FieldDescriptor[];
+  canUpdate: boolean;
+  initialTab?: 'preview' | 'edit';
+  referenceRestrictions?: Record<string, string[]>;
+  referenceLabels?: Record<string, Record<string, string>>;
+}>();
+
+const emit = defineEmits<{
+  submitUpdate: [body: Record<string, unknown>];
+  close: [];
+}>();
+
+const isObjectArray = (value: unknown): value is Array<Record<string, unknown>> => (
+  Array.isArray(value) && value.length > 0 && typeof value[0] === 'object' && value[0] !== null
+);
+
+/** Array-of-objects fields get an exclusive preview tab each (JUM-772). */
+const arrayFields = computed(() => Object.entries(props.record)
+  .filter(([, value]) => isObjectArray(value))
+  .map(([name, value]) => ({
+    name,
+    label: fieldLabel({ name }, props.config.columnLabels),
+    items: value as Array<Record<string, unknown>>,
+    // Item column labels come from the item schema when the entity declares it.
+    itemLabels: Object.fromEntries((safeItemDescriptors(name)).map((d) => [d.name, fieldLabel(d)]))
+  })));
+
+const safeItemDescriptors = (field: string): FieldDescriptor[] => {
+  try {
+    return arrayItemDescriptors(props.config.entity, field) ?? [];
+  } catch {
+    return [];
+  }
+};
+
+/** The main tab carries scalars and scalar arrays only. */
+const scalarRecord = computed(() => Object.fromEntries(
+  Object.entries(props.record).filter(([, value]) => !isObjectArray(value))
+));
+
+const itemKeys = (items: Array<Record<string, unknown>>): string[] => [
+  ...new Set(items.flatMap((item) => Object.keys(item).filter((key) => key !== 'id')))
+];
+
+const activeTab = ref<string>('preview');
+watch(
+  () => [props.record, props.initialTab],
+  () => {
+    activeTab.value = props.initialTab === 'edit' && props.canUpdate ? 'edit' : 'preview';
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div class="card xcrud-row-detail border-start border-3 border-primary my-2">
+    <div class="card-header d-flex align-items-center py-1">
+      <CNav variant="underline" role="tablist" class="border-0">
+        <CNavItem>
+          <a
+            class="nav-link"
+            href="#"
+            :class="{ active: activeTab === 'preview' }"
+            @click.prevent="activeTab = 'preview'"
+          >
+            {{ t('crud.data', { entity: localized(config.title) }) }}
+          </a>
+        </CNavItem>
+        <CNavItem v-for="field in arrayFields" :key="field.name">
+          <a
+            class="nav-link text-capitalize"
+            href="#"
+            :class="{ active: activeTab === field.name }"
+            @click.prevent="activeTab = field.name"
+          >
+            {{ field.label }}
+          </a>
+        </CNavItem>
+        <CNavItem v-if="canUpdate">
+          <a
+            class="nav-link"
+            href="#"
+            :class="{ active: activeTab === 'edit' }"
+            @click.prevent="activeTab = 'edit'"
+          >
+            {{ t('crud.edit', { entity: localized(config.title) }) }}
+          </a>
+        </CNavItem>
+      </CNav>
+      <button type="button" class="btn-close ms-auto" :aria-label="t('crud.close')" @click="emit('close')" />
+    </div>
+    <div class="card-body">
+      <CTabContent>
+        <CTabPane :visible="activeTab === 'preview'">
+          <XCrudForm
+            :config="config"
+            mode="preview"
+            :descriptors="[]"
+            :record="scalarRecord"
+            :reference-labels="referenceLabels"
+          />
+        </CTabPane>
+        <CTabPane v-for="field in arrayFields" :key="field.name" :visible="activeTab === field.name">
+          <CTable striped hover align="middle" class="mb-0">
+            <CTableHead>
+              <CTableRow>
+                <CTableHeaderCell
+                  v-for="key in itemKeys(field.items)"
+                  :key="key"
+                  class="small text-uppercase text-body-secondary"
+                >
+                  {{ field.itemLabels[key] ?? fieldLabel({ name: key }) }}
+                </CTableHeaderCell>
+              </CTableRow>
+            </CTableHead>
+            <CTableBody>
+              <CTableRow v-for="(item, index) in field.items" :key="index">
+                <CTableDataCell v-for="key in itemKeys(field.items)" :key="key">
+                  {{ item[key] ?? '—' }}
+                </CTableDataCell>
+              </CTableRow>
+            </CTableBody>
+          </CTable>
+        </CTabPane>
+        <CTabPane v-if="canUpdate" :visible="activeTab === 'edit'">
+          <XCrudForm
+            :config="config"
+            mode="update"
+            :descriptors="updateDescriptors"
+            :record="record"
+            :reference-restrictions="referenceRestrictions"
+            @submit="emit('submitUpdate', $event)"
+            @cancel="activeTab = 'preview'"
+          />
+        </CTabPane>
+      </CTabContent>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle } from '@coreui/vue';
+
+/**
+ * XCrudRowMenu (JUM-772): contextual menu with the CRUD tools for one record.
+ * Actions are permission-filtered by the parent (can() per operationId).
+ */
+defineProps<{
+  canUpdate: boolean;
+  canDelete: boolean;
+  extraActions?: Array<{ key: string; label: string }>;
+}>();
+
+const emit = defineEmits<{
+  preview: [];
+  edit: [];
+  delete: [];
+  extra: [key: string];
+}>();
+</script>
+
+<template>
+  <CDropdown variant="btn-group" placement="bottom-end">
+    <CDropdownToggle color="secondary" variant="outline" size="sm" aria-label="row actions">
+      ⋯
+    </CDropdownToggle>
+    <CDropdownMenu>
+      <CDropdownItem component="button" @click="emit('preview')">Preview</CDropdownItem>
+      <CDropdownItem v-if="canUpdate" component="button" @click="emit('edit')">Edit</CDropdownItem>
+      <CDropdownItem
+        v-for="action in extraActions ?? []"
+        :key="action.key"
+        component="button"
+        @click="emit('extra', action.key)"
+      >
+        {{ action.label }}
+      </CDropdownItem>
+      <CDropdownItem
+        v-if="canDelete"
+        component="button"
+        class="text-danger"
+        @click="emit('delete')"
+      >
+        Delete
+      </CDropdownItem>
+    </CDropdownMenu>
+  </CDropdown>
+</template>

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

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import {
+  CButton,
+  CDropdown,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+  CFormInput,
+  CFormSelect,
+  CInputGroup,
+  CInputGroupText
+} from '@coreui/vue';
+
+import { getSharedApiClient } from '@/contracts/apiClient';
+import { fieldLabel } from '@/contracts/labels';
+import { listCapabilities } from '@/contracts/listSchema';
+import { localized, t } from '@/i18n';
+import { useAuthStore } from '@/stores/auth';
+
+import type { useXCrud } from './useXCrud';
+
+/**
+ * XCrudToolbar (JUM-772 redesign, X-SYNTH pattern): search, quick context
+ * filter, Filters toggle (JUM-781: a labelled button, not a hidden checkbox),
+ * bulk delete with selection count, Export, Columns visibility, Refresh —
+ * compact outline buttons with cil icons. Search renders only when the
+ * contract declares searchable fields (JUM-778).
+ */
+const props = defineProps<{
+  crud: ReturnType<typeof useXCrud>;
+  filtersOpen: boolean;
+}>();
+
+const emit = defineEmits<{ 'update:filtersOpen': [value: boolean] }>();
+
+const quickOptions = ref<Array<{ value: string; label: string }>>([]);
+
+onMounted(async () => {
+  const quick = props.crud.config.quickFilter;
+  if (!quick?.optionsOperationId) return;
+  try {
+    const auth = useAuthStore();
+    const capabilities = listCapabilities(quick.optionsOperationId);
+    const response = await getSharedApiClient().request<{ result?: Array<Record<string, unknown>> } | Array<Record<string, unknown>>>({
+      operationId: quick.optionsOperationId,
+      query: capabilities ? { page: 1, size: capabilities.maxSize } : undefined,
+      headers: { Authorization: auth.token }
+    });
+    const rows = Array.isArray(response) ? response : (response.result ?? []);
+    quickOptions.value = rows.map((row) => ({
+      value: String(row.id),
+      label: String(row.name ?? row.id)
+    }));
+  } catch {
+    quickOptions.value = [];
+  }
+});
+
+const selectedCount = computed(() => props.crud.selected.value.size);
+const bulkEnabled = computed(() => selectedCount.value > 0);
+const activeFilterCount = computed(() => Object.keys(props.crud.filters).length);
+const counter = computed(() => (
+  props.crud.serverMode
+    ? t('crud.recordsOf', { count: props.crud.rows.value.length, total: props.crud.total.value })
+    : t('crud.records', { count: props.crud.filteredRows.value.length })
+));
+</script>
+
+<template>
+  <div class="d-flex flex-wrap gap-2 align-items-center mb-3 xcrud-toolbar">
+    <CInputGroup v-if="crud.canSearch.value" class="w-auto" size="sm">
+      <CInputGroupText><CIcon icon="cil-search" size="sm" /></CInputGroupText>
+      <CFormInput
+        :model-value="crud.search.value"
+        type="search"
+        :placeholder="t('crud.search', { entity: crud.title.value })"
+        aria-label="search"
+        @update:model-value="crud.setSearch(String($event))"
+      />
+    </CInputGroup>
+
+    <CFormSelect
+      v-if="crud.config.quickFilter"
+      size="sm"
+      class="w-auto"
+      :aria-label="crud.config.quickFilter.field"
+      :model-value="String(crud.filters[crud.config.quickFilter.field] ?? '')"
+      :options="[
+        { label: crud.config.quickFilter.allLabel ? localized(crud.config.quickFilter.allLabel) : t('app.all'), value: '' },
+        ...quickOptions
+      ]"
+      @update:model-value="crud.setFilter(crud.config.quickFilter!.field, String($event))"
+    />
+
+    <CButton
+      color="secondary"
+      :variant="filtersOpen ? undefined : 'outline'"
+      size="sm"
+      :aria-pressed="filtersOpen"
+      aria-label="toggle column filters"
+      @click="emit('update:filtersOpen', !filtersOpen)"
+    >
+      <CIcon icon="cil-filter" size="sm" /> {{ t('crud.filters') }}{{ activeFilterCount ? ` (${activeFilterCount})` : '' }}
+    </CButton>
+
+    <CButton
+      v-if="crud.config.bulkDelete !== false"
+      color="danger"
+      variant="outline"
+      size="sm"
+      :disabled="!bulkEnabled"
+      @click="crud.submitBulkDelete"
+    >
+      <CIcon icon="cil-trash" size="sm" />
+      {{ selectedCount ? t('crud.deleteSelected', { count: selectedCount }) : t('crud.delete') }}
+    </CButton>
+
+    <CButton
+      v-if="crud.config.exportable !== false"
+      color="secondary"
+      variant="outline"
+      size="sm"
+      @click="crud.exportJson"
+    >
+      <CIcon icon="cil-cloud-download" size="sm" /> {{ crud.serverMode ? t('crud.exportPage') : t('crud.exportJson') }}
+    </CButton>
+
+    <CDropdown variant="btn-group">
+      <CDropdownToggle color="secondary" variant="outline" size="sm">
+        <CIcon icon="cil-view-column" size="sm" /> {{ t('crud.columns') }}
+      </CDropdownToggle>
+      <CDropdownMenu>
+        <CDropdownItem
+          v-for="d in crud.columns"
+          :key="d.name"
+          component="button"
+          @click="crud.toggleColumn(d.name)"
+        >
+          <CIcon
+            :icon="crud.hiddenColumns.includes(d.name) ? 'cil-square' : 'cil-check'"
+            size="sm"
+            class="me-1"
+          />
+          {{ fieldLabel(d, crud.config.columnLabels) }}
+        </CDropdownItem>
+      </CDropdownMenu>
+    </CDropdown>
+
+    <CButton color="secondary" variant="outline" size="sm" @click="crud.load">
+      <CIcon icon="cil-reload" size="sm" /> {{ t('crud.refresh') }}
+    </CButton>
+
+    <span class="ms-auto text-body-secondary small">{{ counter }}</span>
+  </div>
+</template>