@jumentix/cli-init 0.0.0

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

@@ -0,0 +1,399 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import {
+  CAvatar,
+  CButton,
+  CFormCheck,
+  CFormInput,
+  CFormSelect,
+  CPlaceholder,
+  CTable,
+  CTableBody,
+  CTableDataCell,
+  CTableHead,
+  CTableHeaderCell,
+  CTableRow
+} from '@coreui/vue';
+
+import SearchableEnumInput from '@/components/SearchableEnumInput.vue';
+import XCrudColumnFilter from '@/components/x-crud/XCrudFilters.vue';
+import XCrudRowMenu from '@/components/x-crud/XCrudRowMenu.vue';
+import {
+  badgeColorFor, formatCellValue, isInlineEditable, pageWindow, shortId
+} from '@/components/x-crud/xCrudFormat';
+import type { useXCrud } from '@/components/x-crud/useXCrud';
+import type { FieldDescriptor } from '@/contracts/formSchema';
+import { fieldLabel } from '@/contracts/labels';
+import { t } from '@/i18n';
+
+/**
+ * XCrudGrid (JUM-772 redesign, X-SYNTH/Smart Table pattern): selection
+ * column, uppercase sortable headers, per-column filter row, avatar cells,
+ * colored badges, sticky actions column (JUM-781: never scrolls out of
+ * view), numbered pager footer. Sort/filter affordances follow the contract
+ * (JUM-778): a column the OAS does not declare sortable shows no arrows.
+ */
+const props = defineProps<{
+  crud: ReturnType<typeof useXCrud>;
+  canUpdate: (row: Record<string, unknown>) => boolean;
+  canDelete: (row: Record<string, unknown>) => boolean;
+  showFilters: boolean;
+}>();
+
+const emit = defineEmits<{
+  expand: [id: string, tab: 'preview' | 'edit'];
+  delete: [id: string];
+  inlineCommit: [id: string, field: string, value: unknown];
+}>();
+
+const editingCell = ref<{ id: string; field: string } | null>(null);
+const editingValue = ref('');
+
+const columnLabel = (d: FieldDescriptor): string => fieldLabel(d, props.crud.config.columnLabels);
+
+const isId = (d: FieldDescriptor): boolean => d.name === 'id' || (d.format === 'uuid' && !d.relation);
+
+const startInlineEdit = (id: string, d: FieldDescriptor, row: Record<string, unknown>): void => {
+  if (!props.crud.config.inlineEdit || !isInlineEditable(d) || !props.canUpdate(row)) return;
+  editingCell.value = { id, field: d.name };
+  editingValue.value = String(row[d.name] ?? '');
+};
+
+const commitInlineEdit = (): void => {
+  if (!editingCell.value) return;
+  emit('inlineCommit', editingCell.value.id, editingCell.value.field, editingValue.value);
+  editingCell.value = null;
+};
+
+const onScroll = (event: Event): void => {
+  const target = event.target as HTMLElement;
+  if (target.scrollTop + target.clientHeight >= target.scrollHeight - 32) {
+    props.crud.nextPage();
+  }
+};
+
+const goTo = ref('1');
+const goToPage = (): void => {
+  props.crud.goToPage(Number(goTo.value));
+};
+
+const pageNumbers = (): number[] => {
+  const count = props.crud.pageCount.value;
+  const current = props.crud.page.value;
+  const window = 5;
+  const start = Math.max(1, Math.min(current - 2, count - window + 1));
+  return Array.from({ length: Math.min(window, count) }, (_, index) => start + index);
+};
+
+/** Array-of-reference cells (members) show resolved labels, not a count of uuids. */
+const referenceList = (d: FieldDescriptor, value: unknown): string[] => (
+  Array.isArray(value) ? value.map((entry) => props.crud.referenceLabel(d.name, entry)) : []
+);
+</script>
+
+<template>
+  <div
+    class="xcrud-grid"
+    :class="{ 'xcrud-grid-scroll': crud.config.pagination === 'scroll' }"
+    @scroll="crud.config.pagination === 'scroll' ? onScroll($event) : undefined"
+  >
+    <CTable responsive hover striped align="middle" class="mb-0">
+      <CTableHead>
+        <CTableRow>
+          <CTableHeaderCell class="xcrud-select-col">
+            <CFormCheck
+              :model-value="crud.allVisibleSelected.value"
+              :aria-label="t('crud.selectAll')"
+              @update:model-value="crud.toggleSelectAllVisible()"
+            />
+          </CTableHeaderCell>
+          <CTableHeaderCell
+            v-for="d in crud.visibleColumns.value"
+            :key="d.name"
+            :role="crud.canSort(d.name) ? 'button' : undefined"
+            class="small text-uppercase fw-semibold text-body-secondary"
+            :class="{ 'xcrud-sortable': crud.canSort(d.name) }"
+            :aria-sort="crud.sort.value?.field === d.name ? (crud.sort.value.direction === 'asc' ? 'ascending' : 'descending') : 'none'"
+            @click="crud.toggleSort(d.name)"
+          >
+            {{ columnLabel(d) }}
+            <template v-if="crud.canSort(d.name)">
+              <CIcon
+                v-if="crud.sort.value?.field === d.name"
+                :icon="crud.sort.value.direction === 'asc' ? 'cil-arrow-top' : 'cil-arrow-bottom'"
+                size="sm"
+              />
+              <CIcon v-else icon="cil-swap-vertical" size="sm" class="text-body-tertiary" />
+            </template>
+          </CTableHeaderCell>
+          <CTableHeaderCell class="text-end xcrud-actions-col xcrud-sticky-end small text-uppercase fw-semibold text-body-secondary">
+            {{ t('crud.actions') }}
+          </CTableHeaderCell>
+        </CTableRow>
+        <CTableRow v-if="showFilters" class="xcrud-filter-row">
+          <CTableHeaderCell class="xcrud-select-col" />
+          <CTableHeaderCell v-for="d in crud.visibleColumns.value" :key="d.name" class="fw-normal">
+            <XCrudColumnFilter
+              v-if="crud.canFilter(d.name)"
+              :descriptor="d"
+              :value="crud.filters[d.name]"
+              @set="crud.setFilter(d.name, $event)"
+            />
+          </CTableHeaderCell>
+          <CTableHeaderCell class="xcrud-sticky-end" />
+        </CTableRow>
+      </CTableHead>
+      <CTableBody>
+        <template v-if="crud.loading.value && crud.visibleRows.value.length === 0">
+          <CTableRow v-for="index in 5" :key="index">
+            <CTableDataCell :colspan="crud.visibleColumns.value.length + 2">
+              <CPlaceholder component="span" animation="glow" class="d-block w-100">&nbsp;</CPlaceholder>
+            </CTableDataCell>
+          </CTableRow>
+        </template>
+        <template v-else>
+          <template v-for="row in crud.visibleRows.value" :key="crud.rowId(row)">
+            <CTableRow
+              :active="crud.expandedId.value === crud.rowId(row)"
+              :class="{ 'xcrud-row-pending': row._sync === 'pending' }"
+              @click="emit('expand', crud.rowId(row), 'preview')"
+            >
+              <CTableDataCell class="xcrud-select-col" @click.stop>
+                <CFormCheck
+                  :model-value="crud.selected.value.has(crud.rowId(row))"
+                  :aria-label="t('crud.select', { id: crud.rowId(row) })"
+                  @update:model-value="crud.toggleSelect(crud.rowId(row))"
+                />
+                <span
+                  v-if="row._sync === 'pending'"
+                  class="ms-1 text-warning"
+                  :title="t('crud.pending')"
+                >
+                  <CIcon icon="cil-cloud-upload" size="sm" />
+                  <span class="visually-hidden">{{ t('crud.pending') }}</span>
+                </span>
+              </CTableDataCell>
+              <CTableDataCell
+                v-for="d in crud.visibleColumns.value"
+                :key="d.name"
+                @dblclick.stop="startInlineEdit(crud.rowId(row), d, row)"
+              >
+                <template v-if="editingCell?.id === crud.rowId(row) && editingCell?.field === d.name">
+                  <div class="d-flex gap-1 align-items-center">
+                    <SearchableEnumInput
+                      v-if="d.enum"
+                      :id="`inline-${crud.rowId(row)}-${d.name}`"
+                      :model-value="editingValue"
+                      :options="d.enum"
+                      :maxlength="d.maxLength"
+                      @update:model-value="editingValue = $event"
+                    />
+                    <CFormInput
+                      v-else
+                      :id="`inline-${crud.rowId(row)}-${d.name}`"
+                      v-model="editingValue"
+                      :maxlength="d.maxLength"
+                      size="sm"
+                      @keyup.enter="commitInlineEdit"
+                      @keyup.esc="editingCell = null"
+                    />
+                    <CButton color="success" variant="outline" size="sm" :aria-label="t('crud.inlineConfirm')" @click="commitInlineEdit">
+                      <CIcon icon="cil-check" size="sm" />
+                    </CButton>
+                    <CButton color="secondary" variant="outline" size="sm" :aria-label="t('crud.inlineCancel')" @click="editingCell = null">
+                      <CIcon icon="cil-x" size="sm" />
+                    </CButton>
+                  </div>
+                </template>
+                <template v-else-if="crud.config.avatarField === d.name">
+                  <CAvatar :src="String(row[d.name] ?? '')" size="sm" />
+                </template>
+                <template v-else-if="d.relation && d.type === 'array'">
+                  <span
+                    v-for="label in referenceList(d, row[d.name]).slice(0, 3)"
+                    :key="label"
+                    class="badge text-bg-light me-1"
+                  >{{ label }}</span>
+                  <span v-if="referenceList(d, row[d.name]).length > 3" class="badge text-bg-secondary">
+                    +{{ referenceList(d, row[d.name]).length - 3 }}
+                  </span>
+                  <span v-if="referenceList(d, row[d.name]).length === 0">—</span>
+                </template>
+                <template v-else-if="d.relation">
+                  {{ crud.referenceLabel(d.name, row[d.name]) }}
+                </template>
+                <template v-else-if="isId(d)">
+                  <span class="font-monospace small" :title="String(row[d.name] ?? '')">
+                    {{ shortId(row[d.name]) }}
+                  </span>
+                </template>
+                <span
+                  v-else-if="d.enum"
+                  class="badge"
+                  :class="`text-bg-${badgeColorFor(row[d.name])}`"
+                >{{ formatCellValue(d, row[d.name]) }}</span>
+                <span v-else-if="d.type === 'array'" class="badge text-bg-light">
+                  {{ formatCellValue(d, row[d.name]) }}
+                </span>
+                <template v-else>{{ formatCellValue(d, row[d.name]) }}</template>
+              </CTableDataCell>
+              <CTableDataCell class="text-end xcrud-actions-col xcrud-sticky-end" @click.stop>
+                <CButton
+                  color="primary"
+                  variant="outline"
+                  size="sm"
+                  class="me-1"
+                  :aria-label="`preview ${crud.rowId(row)}`"
+                  @click="emit('expand', crud.rowId(row), 'preview')"
+                >
+                  <CIcon icon="cil-featured-playlist" size="sm" />
+                </CButton>
+                <CButton
+                  v-if="canUpdate(row)"
+                  color="primary"
+                  variant="outline"
+                  size="sm"
+                  class="me-1"
+                  :aria-label="`edit ${crud.rowId(row)}`"
+                  @click="emit('expand', crud.rowId(row), 'edit')"
+                >
+                  <CIcon icon="cil-pencil" size="sm" />
+                </CButton>
+                <CButton
+                  v-if="canDelete(row)"
+                  color="danger"
+                  variant="outline"
+                  size="sm"
+                  :aria-label="`delete ${crud.rowId(row)}`"
+                  @click="emit('delete', crud.rowId(row))"
+                >
+                  <CIcon icon="cil-trash" size="sm" />
+                </CButton>
+                <XCrudRowMenu
+                  v-if="(crud.config.rowActions ?? []).length"
+                  :can-update="false"
+                  :can-delete="false"
+                  :extra-actions="crud.config.rowActions"
+                />
+              </CTableDataCell>
+            </CTableRow>
+            <CTableRow v-if="crud.expandedId.value === crud.rowId(row)" class="xcrud-detail-row">
+              <CTableDataCell :colspan="crud.visibleColumns.value.length + 2">
+                <slot name="detail" :row="row" />
+              </CTableDataCell>
+            </CTableRow>
+          </template>
+        </template>
+        <CTableRow v-if="!crud.loading.value && crud.visibleRows.value.length === 0">
+          <CTableDataCell
+            :colspan="crud.visibleColumns.value.length + 2"
+            class="text-center text-body-secondary py-4"
+          >
+            <CIcon icon="cil-inbox" size="lg" class="d-block mx-auto mb-2" />
+            {{ t('crud.noRecords') }}
+          </CTableDataCell>
+        </CTableRow>
+      </CTableBody>
+    </CTable>
+
+    <div class="d-flex flex-wrap align-items-center gap-2 px-3 py-2 border-top xcrud-footer">
+      <span class="text-body-secondary small">
+        {{ pageWindow(crud.page.value, crud.pageSize.value, crud.total.value) }}
+      </span>
+      <label class="small text-body-secondary mb-0 d-flex align-items-center gap-1">
+        {{ t('crud.rowsPerPage') }}
+        <CFormSelect
+          size="sm"
+          class="w-auto"
+          aria-label="rows per page"
+          :model-value="String(crud.pageSize.value)"
+          :options="['5', '10', '20', '50']"
+          @update:model-value="crud.setPageSize(Number($event))"
+        />
+      </label>
+      <nav class="ms-auto" aria-label="pagination">
+        <ul class="pagination pagination-sm mb-0">
+          <li class="page-item" :class="{ disabled: crud.page.value <= 1 }">
+            <button class="page-link" :aria-label="t('crud.previous')" @click="crud.prevPage()">‹</button>
+          </li>
+          <li
+            v-for="number in pageNumbers()"
+            :key="number"
+            class="page-item"
+            :class="{ active: number === crud.page.value }"
+          >
+            <button class="page-link" @click="crud.goToPage(number)">{{ number }}</button>
+          </li>
+          <li class="page-item" :class="{ disabled: !crud.hasMore.value }">
+            <button class="page-link" :aria-label="t('crud.next')" @click="crud.nextPage()">›</button>
+          </li>
+        </ul>
+      </nav>
+      <label class="small text-body-secondary mb-0 d-flex align-items-center gap-1">
+        {{ t('crud.goTo') }}
+        <CFormInput
+          v-model="goTo"
+          size="sm"
+          class="xcrud-goto"
+          aria-label="go to page"
+          @keyup.enter="goToPage"
+        />
+      </label>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.xcrud-grid-scroll {
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.xcrud-select-col {
+  width: 2.5rem;
+}
+
+.xcrud-actions-col {
+  width: 9rem;
+  white-space: nowrap;
+}
+
+/* JUM-781: the actions column stays visible while the table scrolls sideways. */
+.xcrud-grid :deep(.xcrud-sticky-end) {
+  position: sticky;
+  right: 0;
+  background-color: var(--cui-body-bg);
+  box-shadow: -4px 0 6px -4px rgba(0, 0, 0, 0.15);
+}
+
+.xcrud-grid :deep(.table-striped > tbody > tr:nth-of-type(odd) > .xcrud-sticky-end) {
+  background-color: var(--cui-tertiary-bg);
+}
+
+.xcrud-grid :deep(.xcrud-date-filter) {
+  min-width: 8.5rem;
+}
+
+.xcrud-sortable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.xcrud-goto {
+  width: 4rem;
+}
+
+/* X-SYNTH density: tighter rows and cells */
+.xcrud-grid :deep(.table) {
+  font-size: 0.875rem;
+  margin-bottom: 0;
+}
+
+.xcrud-grid :deep(.table > :not(caption) > * > *) {
+  padding: 0.35rem 0.6rem;
+}
+
+.xcrud-row-pending {
+  --cui-table-bg: var(--cui-warning-bg-subtle, #fff3cd);
+}
+</style>

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

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import XCrudChart from '@/components/x-crud/XCrudChart.vue';
+import type { useXCrud } from '@/components/x-crud/useXCrud';
+import { localized, t } from '@/i18n';
+
+/**
+ * XCrudPanels (JUM-772 redesign): aggregate widgets in the CWidgetStatsA
+ * style (colored background, big value, small label) + one chart card per
+ * groupBy aggregate. Only real data from the loaded list.
+ */
+const props = defineProps<{ crud: ReturnType<typeof useXCrud> }>();
+
+const WIDGET_COLORS = ['primary', 'info', 'warning', 'danger', 'success'];
+
+const widgets = computed(() => (props.crud.config.aggregates ?? []).map((aggregate, index) => ({
+  aggregate,
+  color: WIDGET_COLORS[index % WIDGET_COLORS.length],
+  value: props.crud.aggregateValue(aggregate),
+  // Server mode computes over the loaded page; the widget says so (JUM-778/781).
+  partial: props.crud.aggregateIsPartial(aggregate)
+})));
+
+const formatValue = (value: number): string => (
+  Number.isInteger(value) ? String(value) : value.toFixed(2)
+);
+</script>
+
+<template>
+  <div class="row g-3 mb-3 xcrud-panels">
+    <div v-for="widget in widgets" :key="widget.aggregate.field + widget.aggregate.op" class="col-6 col-md-3">
+      <div class="card text-white border-0 shadow-sm" :class="`bg-${widget.color}`">
+        <div class="card-body pb-2">
+          <div class="fs-3 fw-semibold">{{ formatValue(widget.value) }}</div>
+          <div class="small text-white-50">
+            {{ widget.aggregate.label ? localized(widget.aggregate.label) : `${widget.aggregate.op} ${widget.aggregate.field}` }}
+            <span v-if="widget.partial">{{ t('crud.thisPage') }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      v-for="aggregate in (crud.config.aggregates ?? []).filter((a) => a.groupBy)"
+      :key="`chart-${aggregate.field}`"
+      class="col-12 col-md-6"
+    >
+      <div class="card border-0 shadow-sm">
+        <div class="card-body">
+          <XCrudChart
+            :title="`${aggregate.label ? localized(aggregate.label) : `${aggregate.field} by ${aggregate.groupBy}`}${crud.aggregateIsPartial(aggregate) ? ` ${t('crud.thisPage')}` : ''}`"
+            :breakdown="crud.aggregateBreakdown(aggregate)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+
+import SearchableEnumInput from '@/components/SearchableEnumInput.vue';
+import { getSharedApiClient } from '@/contracts/apiClient';
+import { entityPrimaryKey, listOperationForEntity, type FieldDescriptor } from '@/contracts/formSchema';
+import { listCapabilities } from '@/contracts/listSchema';
+import { isCanaOpen } from '@/data/db';
+import { listLocal } from '@/data/localRepository';
+import { t } from '@/i18n';
+import { useAuthStore } from '@/stores/auth';
+
+/**
+ * XCrudReferenceInput (JUM-787): searchable select for `x-relation` FKs.
+ * Candidates come from the target entity's `<Entity>ArrayOf` list operation.
+ */
+const props = defineProps<{
+  descriptor: FieldDescriptor;
+  modelValue: string;
+  restrictTo?: string[];
+}>();
+
+const emit = defineEmits<{ 'update:modelValue': [value: string] }>();
+
+const options = ref<Array<{ value: string; label: string }>>([]);
+const loadError = ref('');
+
+onMounted(async () => {
+  const relation = props.descriptor.relation;
+  const operationId = relation?.entity ? listOperationForEntity(relation.entity) : undefined;
+  if (!operationId) return;
+  try {
+    const capabilities = listCapabilities(operationId);
+    let rows: Array<Record<string, unknown>> = [];
+    if (isCanaOpen() && relation?.entity) {
+      const page = await listLocal(relation.entity, {
+        page: 1,
+        size: capabilities?.maxSize ?? 100
+      });
+      rows = page.result;
+    } else {
+      const response = await getSharedApiClient().request<{ result?: Array<Record<string, unknown>> } | Array<Record<string, unknown>>>({
+        operationId,
+        query: capabilities ? { page: 1, size: capabilities.maxSize } : undefined,
+        headers: { Authorization: useAuthStore().token }
+      });
+      rows = Array.isArray(response) ? response : (response.result ?? []);
+    }
+    const labelField = relation?.display ?? 'name';
+    const match = relation?.match || entityPrimaryKey(relation?.entity ?? '');
+    options.value = rows.map((row) => ({
+      value: String(row[match] ?? row.id),
+      label: String(row[labelField] ?? row[match] ?? row.id)
+    }));
+  } catch {
+    loadError.value = t('crud.referencesUnavailable');
+  }
+});
+
+const visibleOptions = computed(() => {
+  const restriction = props.restrictTo;
+  return restriction ? options.value.filter((o) => restriction.includes(o.value)) : options.value;
+});
+</script>
+
+<template>
+  <SearchableEnumInput
+    :id="`xref-${descriptor.name}`"
+    :model-value="modelValue"
+    :options="visibleOptions"
+    :aria-label="descriptor.name"
+    :placeholder="loadError || undefined"
+    @update:model-value="emit('update:modelValue', $event)"
+  />
+</template>