@conduction/nextcloud-vue 2.56.0-beta.30 → 2.56.0-beta.31

package/src/components/CnDataTable/CnDataTable.vue

@@ -1765,17 +1765,6 @@ export default {
 			return (col && typeof col.format === 'object') ? col.format : null
 		},
 
-		/**
-		 * Value to render in a cell. For a column that declares `aggregate`
-		 * (a count of related objects), returns the cached count once
-		 * `loadAggregates()` has resolved it (or `'…'` while pending, `'—'`
-		 * if it failed / there's nothing to count). Otherwise the row's
-		 * property value via `getCellValue`.
-		 *
-		 * @param {object} row The row data.
-		 * @param {object} col The column definition.
-		 * @return {unknown} The value handed to the slot / CnCellRenderer.
-		 */
 		/**
 		 * The secondary line of a cell, from `col.secondary`: a function is
 		 * called with the row; a string with `{field}` placeholders is a
@@ -1806,6 +1795,21 @@ export default {
 			return asText(this.getCellValue(row, spec))
 		},
 
+		/**
+		 * Value to render in a cell. For a column that declares `aggregate`
+		 * (a count of related objects), returns the cached count once
+		 * `loadAggregates()` has resolved it (or `'…'` while pending, `'—'`
+		 * if it failed / there's nothing to count). A count of zero reads as
+		 * `aggregate.zeroLabel` when the column sets one ("None", which the
+		 * app's `cnTranslate` turns into "Geen" as the boards draw it); without
+		 * it the cell shows `0` as before. Otherwise the row's property value
+		 * via `getCellValue`.
+		 *
+		 * @spec openspec/changes/aggregate-zero-label/specs/aggregate-zero-label/spec.md#requirement-a-count-column-can-name-zero
+		 * @param {object} row The row data.
+		 * @param {object} col The column definition.
+		 * @return {unknown} The value handed to the slot / CnCellRenderer.
+		 */
 		cellValue(row, col) {
 			if (col && col.aggregate) {
 				const cached = this.aggregateValues[String(row[this.rowKey])]
@@ -1813,6 +1817,10 @@ export default {
 				if (v === undefined) {
 					return this.aggregateLoading ? '…' : '—'
 				}
+				const zeroLabel = col.aggregate.zeroLabel
+				if ((v === 0 || v === '0') && typeof zeroLabel === 'string' && zeroLabel !== '') {
+					return typeof this.cnTranslate === 'function' ? this.cnTranslate(zeroLabel) : zeroLabel
+				}
 				return v
 			}
 			return this.getCellValue(row, col.key)

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -745,7 +745,7 @@
 				:layout="section.layout"
 				:editable="section.editable"
 				:columns="12"
-				:columnOpts="columnOpts"
+				:columnOpts="bodyColumnOpts"
 				class="cn-detail-page__grid"
 				@layoutChange="section.view ? onViewLayoutChange($event) : onBodyLayoutChange($event)">
 				<template #widget="{ item }">
@@ -1295,6 +1295,35 @@ const DEFAULT_DETAIL_COLUMN_OPTS = Object.freeze({
 	breakpointForWindow: false,
 })
 
+/**
+ * Where the default table stacks when a side column sits beside the body grid.
+ *
+ * The side column takes about 320px, so the grid it leaves is far narrower than
+ * the page: 790px at a 1100px window. Stacking that at 1000px made a row of
+ * small tiles (a KPI row of 5 or 6 stat tiles) impossible beside a side column.
+ * 1000px exists to keep a `gridWidth: 3` side PANEL inside the grid readable; a
+ * page with a real side column has no such panel, and 12 columns at 600px is
+ * still 50px a column, enough for a tile. Below 600px it stacks as before.
+ */
+const SIDE_COLUMN_STACK_WIDTH = 600
+
+/**
+ * Whether `opts` is the untouched default table, so a page that passed its own
+ * `columnOpts` keeps exactly what it asked for.
+ *
+ * @param {object|null} opts The `columnOpts` value.
+ * @return {boolean}
+ */
+function isDefaultColumnOpts(opts) {
+	const breakpoints = opts && opts.breakpoints
+	return !!opts
+		&& opts.columnMax === DEFAULT_DETAIL_COLUMN_OPTS.columnMax
+		&& Array.isArray(breakpoints)
+		&& breakpoints.length === 1
+		&& breakpoints[0].w === DEFAULT_DETAIL_COLUMN_OPTS.breakpoints[0].w
+		&& breakpoints[0].c === 1
+}
+
 /**
  * Event-bus channel a page-level refresh is announced on. The page's own
  * Actions menu emits it, the manifest `refresh` / `api-call` actions bump it,
@@ -3335,6 +3364,20 @@ export default {
 				.map(({ widget }) => widget)
 		},
 
+		/**
+		 * The `columnOpts` the body grid gets: the default table stacks at 1000px
+		 * of grid width, or at 600px when a side column narrows the grid. An
+		 * explicit `columnOpts` prop is passed through untouched.
+		 *
+		 * @return {object|null} The column options.
+		 */
+		bodyColumnOpts() {
+			if (!this.showsSideColumn || !isDefaultColumnOpts(this.columnOpts)) {
+				return this.columnOpts
+			}
+			return { ...this.columnOpts, breakpoints: [{ w: SIDE_COLUMN_STACK_WIDTH, c: 1 }] }
+		},
+
 		/**
 		 * Whether the side column renders.
 		 *

package/src/components/CnDocumentReviewList/CnDocumentReviewWidget.vue

@@ -31,7 +31,7 @@ import { readPath } from '../../utils/readPath.js'
  * Renders CnDocumentReviewList from a list on the bound record:
  * `content: { field, title?, statusField?, statuses?, rowAction?: { label, route } }`.
  * A row action with a `route` opens that route with the row's key as `id`.
- * Resolved by its registry key, not exported.
+ * Resolved by its registry key, and exported for an app that renders it itself.
  */
 export default {
 	name: 'CnDocumentReviewWidget',

package/src/components/CnFacetSidebar/CnFacetSidebar.vue

@@ -62,7 +62,7 @@
 <script>
 import { translate as t } from '@nextcloud/l10n'
 import { NcButton, NcCheckboxRadioSwitch, NcLoadingIcon, NcSelect, NcTextField } from '@nextcloud/vue'
-import { facetOptionLabel } from '../../utils/facets.js'
+import { facetOptions } from '../../utils/facets.js'
 import { filtersFromSchema } from '../../utils/schema.js'
 
 /**
@@ -175,12 +175,12 @@ export default {
 
 		getFilterOptions(filter) {
 			// Use facet data if available (live values with counts)
-			const facet = this.facetData[filter.key]
-			if (facet?.values?.length > 0) {
-				return facet.values.map((v) => ({
-					id: v.value,
-					label: facetOptionLabel(v),
-				}))
+			const live = facetOptions(
+				this.facetData[filter.key],
+				(count) => t('nextcloud-vue', 'No value ({count})', { count }),
+			)
+			if (live !== null) {
+				return live
 			}
 			// Fall back to static enum options from schema
 			return filter.options || []

package/src/components/CnFactsWidget/CnFactsWidget.vue

@@ -140,6 +140,7 @@ import EyeOutline from 'vue-material-design-icons/EyeOutline.vue'
 import CnIcon from '../CnIcon/CnIcon.vue'
 import CnStatusBadge from '../CnStatusBadge/CnStatusBadge.vue'
 import { resolveEndpointRequest } from '../../composables/useEndpointSource.js'
+import { useRefLabels } from '../../composables/useRefLabels.js'
 import { dispatchAction } from '../../utils/actionsDispatcher.js'
 import { isBadgeVariant } from '../../utils/badgeVariants.js'
 import { formatBoardDate } from '../../utils/boardDate.js'
@@ -150,6 +151,29 @@ import { hasUnresolvedDeepTokens, resolveDeepTokens } from '../../utils/resolveF
 /** Kinds of entry a `fields[]` item can be. A labelled item without `as` is a row. */
 const KINDS = Object.freeze(['row', 'title', 'line', 'pill', 'lead', 'text'])
 
+/**
+ * The label resolver every facts widget on the page shares, made on first use
+ * (the object store needs an active pinia). One batched request per register and
+ * schema for the ids it has not seen; a label it has read stays until the page
+ * reloads, and an object the store already holds is not fetched at all.
+ *
+ * @type {{resolve: Function}|null}
+ */
+let refLabels = null
+
+/** The page-wide reference label resolver. */
+function sharedRefLabels() {
+	if (!refLabels) {
+		refLabels = useRefLabels()
+	}
+	return refLabels
+}
+
+/** Key of a resolved reference in the widget's `labels` data. */
+function refKey(resolve, id) {
+	return `${resolve.register}/${resolve.schema}/${resolve.labelField || ''}/${id}`
+}
+
 /** Event-bus channel a reveal of a masked value is announced on, so an app can log it. */
 export const FACTS_REVEAL_CHANNEL = 'cn:facts:reveal'
 
@@ -213,6 +237,7 @@ export default {
 		 *   `as` is `row` (default when `label` or `icon` is set), `title`, `line`, `text` (a line in the normal ink), `lead` (an icon tile or initials beside `title` and `subtitle`) or `pill`.
 		 *   A row's `format` may also be `email`, `phone` or `url` (a link) or `masked` (the last four characters; `reveal: true` adds Show). `copy: true` adds a copy button; `icon` replaces the label.
 		 *   A part may be `{ text }`, a constant; a `line` or `text` entry without `path` or `parts` shows its `text`.
+		 *   `resolve: { register, schema, labelField? }` on an entry or a part turns a value that is a reference (an id, or a list of ids) into the label of the referenced object (`labelField`, else `title`, then `name`): the case type or status of a task shows its name, not its uuid. The ids are fetched once per register and schema through the object store and shared by every facts widget on the page; the entry stays empty until its label is known, and when no label can be read.
 		 * - `action` — an action drawn as a button under the facts; `headerAction` — one drawn in the card header (reported through the `header` event).
 		 *   `format` is `text` (default), `date` (board short date), `date-long` (always with the year) or `list` (an array joined by ", ", each item read at `itemPath`).
 		 *   `map` turns a raw value into a label (translated). `parts` (on a `line`) lists paths, or `{ path, label?, format? }`, joined by `separator` (default " · "); empty parts are dropped.
@@ -255,6 +280,8 @@ export default {
 			revealed: {},
 			/** Key of the row whose value was just copied. */
 			copied: '',
+			/** Labels of the referenced objects read so far, by `refKey`. */
+			labels: {},
 		}
 	},
 
@@ -430,6 +457,13 @@ export default {
 			},
 		},
 
+		record: {
+			immediate: true,
+			handler() {
+				this.loadLabels()
+			},
+		},
+
 		headerAction: {
 			immediate: true,
 			handler() {
@@ -668,6 +702,94 @@ export default {
 			})
 		},
 
+		/**
+		 * The text of a reference: the labels of the objects its id(s) name, joined
+		 * by ", ". An id whose label is not known yet (or cannot be read) adds nothing.
+		 *
+		 * @param {unknown} raw The id, or a list of ids (or of `{ id }` objects).
+		 * @param {object} spec `{ resolve: { register, schema, labelField? }, itemPath? }`.
+		 * @return {string}
+		 */
+		refText(raw, spec) {
+			return this.refIds(raw, spec)
+				.map((id) => this.labels[refKey(spec.resolve, id)])
+				.filter((label) => typeof label === 'string' && label !== '')
+				.join(', ')
+		},
+
+		/**
+		 * The ids a reference value holds.
+		 *
+		 * @param {unknown} raw The value.
+		 * @param {object} spec `{ itemPath? }`.
+		 * @return {string[]}
+		 */
+		refIds(raw, spec) {
+			return (Array.isArray(raw) ? raw : [raw])
+				.map((item) => (item && typeof item === 'object' ? (spec.itemPath ? readPath(item, spec.itemPath) : (item.id ?? item.uuid)) : item))
+				.filter((id) => id !== null && id !== undefined && id !== '' && typeof id !== 'object')
+				.map(String)
+		},
+
+		/**
+		 * Every entry or part that carries `resolve`, with the record's value at its path.
+		 *
+		 * @param {object} record The object.
+		 * @return {Array<{spec: object, raw: unknown}>}
+		 */
+		refSpecs(record) {
+			const fields = Array.isArray(this.content?.fields) ? this.content.fields : []
+			const specs = []
+			const visit = (spec) => {
+				if (!spec || typeof spec !== 'object') {
+					return
+				}
+				if (spec.resolve && typeof spec.resolve === 'object' && spec.path) {
+					specs.push({ spec, raw: readPath(record, spec.path) })
+				}
+				const nested = [...(Array.isArray(spec.parts) ? spec.parts : []), ...(Array.isArray(spec.title) ? spec.title : [spec.title]), ...(Array.isArray(spec.subtitle) ? spec.subtitle : [spec.subtitle])]
+				nested.forEach(visit)
+			}
+			fields.forEach(visit)
+			return specs
+		},
+
+		/**
+		 * Read the labels of the referenced objects, one batched request per
+		 * register and schema, and keep them in `labels`.
+		 *
+		 * @param {object|null} record The object shown (defaults to the current record).
+		 * @return {Promise<void>}
+		 */
+		async loadLabels(record = this.record) {
+			if (!record) {
+				return
+			}
+			const groups = new Map()
+			for (const { spec, raw } of this.refSpecs(record)) {
+				const { register, schema, labelField } = spec.resolve
+				if (!register || !schema) {
+					continue
+				}
+				const groupKey = `${register}/${schema}/${labelField || ''}`
+				const group = groups.get(groupKey) || { resolve: spec.resolve, ids: new Set() }
+				this.refIds(raw, spec).forEach((id) => group.ids.add(id))
+				groups.set(groupKey, group)
+			}
+			if (groups.size === 0) {
+				return
+			}
+			const resolver = sharedRefLabels()
+			const next = { ...this.labels }
+			await Promise.all([...groups.values()].map(async ({ resolve, ids }) => {
+				const found = await resolver.resolve(resolve.register, resolve.schema, [...ids], resolve.labelField)
+				Object.entries(found).forEach(([id, label]) => {
+					next[refKey(resolve, id)] = label
+				})
+			}))
+			this.labels = next
+		},
+
 		/**
 		 * Read the source object.
 		 *
@@ -774,6 +896,9 @@ export default {
 			if (raw === null || raw === undefined || raw === '') {
 				return ''
 			}
+			if (spec.resolve && typeof spec.resolve === 'object') {
+				return this.refText(raw, spec)
+			}
 			const format = spec.format || 'text'
 			if (format === 'list' || Array.isArray(raw)) {
 				const items = (Array.isArray(raw) ? raw : [raw])

package/src/components/CnFieldListWidget/CnFieldListWidget.vue

@@ -137,7 +137,7 @@ export default {
 		 *
 		 * - `field` (required) — the object field holding the array.
 		 * - `key` — the item field that identifies an entry (default: the item itself for strings).
-		 * - `row` — `{ title, titleFallback?, avatar?, meta?: [paths|{ path, map?, format? }], pill?: { path, map?, variantMap? }, aside?: { path, format?, prefix? }, detail?: { template, when? } }`.
+		 * - `row` — `{ title, titleFallback?, avatar?, meta?: [paths|{ path, map?, format? }], pill?: { path, map?, variantMap? }, aside?: { path, format?, prefix?, fallback? }, detail?: { template, when? } }`.
 		 * - `add` — `{ label?, fields: [{ key, label, type?: 'text'|'select', options?, required?, pattern?, patternMessage? }], unique?, defaults? }`.
 		 * - `remove` — `{ label? }`; omitted = no remove.
 		 * - `rowActions` — `[{ id, label, when?, request: { method?, url, payload? } }]`; tokens `@object.<field>`, `@objectId`, `@row.<field>`.
@@ -375,7 +375,8 @@ export default {
 		asideOf(entry, spec) {
 			const value = this.text(entry, spec)
 			if (value === '') {
-				return ''
+				// No value: the optional `fallback` label, translated, instead of an empty aside.
+				return this.tr(spec.fallback)
 			}
 			return spec.prefix ? `${this.tr(spec.prefix)} ${value}` : value
 		},