@conduction/nextcloud-vue 2.79.0 → 2.80.0

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -1231,12 +1231,15 @@ import {
 	groupMenuEntries,
 	MAX_QUICK_ACTIONS,
 	normalisePinnedAction,
+	pillCountSource,
+	resolveCountPill,
 	resolveNextStep,
 	resolvePill,
 	stageEntry,
 	stageOf,
 } from '../../utils/detailActionModel.js'
 import { reportBindingProblems } from '../../utils/diagnostics.js'
+import { fetchListTotal } from '../../utils/fetchFilterCounts.js'
 import { cnGridCellStyle, hasGridRow } from '../../utils/grid.js'
 import { isActivityWidget, resolveHeaderMeta } from '../../utils/headerMeta.js'
 import { patchStoredSelf } from '../../utils/patchStoredSelf.js'
@@ -2393,9 +2396,13 @@ export default {
 		 * A pill above the title saying what kind of record this is
 		 * (manifest `config.typePill`): `{ field, colorMap?, labels?, variant? }`.
 		 * Rendered through `CnStatusBadge`; `colorMap` is keyed on the field's
-		 * raw value, `labels` maps a raw value to the text to show.
+		 * raw value, `labels` maps a raw value to the text to show. Instead of
+		 * `field`: `text`, a constant ("Inwoner"), or `countFrom`
+		 * (`{ register, schema, filter? }`) with `countLabel` (`{ one, other }`
+		 * with `{count}`), a count of a related list ("1 lopende zaak") that
+		 * shows nothing at 0.
 		 *
-		 * @type {{field: string, colorMap?: object, labels?: object, variant?: string}|null}
+		 * @type {{field?: string, text?: string, countFrom?: object, countLabel?: object, colorMap?: object, labels?: object, variant?: string}|null}
 		 */
 		typePill: {
 			type: Object,
@@ -2747,6 +2754,10 @@ export default {
 
 	data() {
 		return {
+			/** The counts of the header's count pills (`countFrom`), by pill key (`type`, `status`). */
+			pillCounts: {},
+			/** Sequence of the last pill count round, so a late answer does not overwrite a newer one. */
+			pillCountSeq: 0,
 			/** `register/schema/id` the read-state call was last made for, so it is sent once per load. */
 			readStateSentFor: '',
 			/** Whether the user is arranging the chosen view (`userLayout`). */
@@ -3259,12 +3270,25 @@ export default {
 		headerPills() {
 			return [['type', this.typePill], ['status', this.statusPill]]
 				.map(([key, config]) => {
-					const pill = resolvePill(config, this.resolvedObject)
+					const pill = pillCountSource(config)
+						? resolveCountPill(config, this.pillCounts[key], (text) => this.effectiveTranslate(text))
+						: resolvePill(config, this.resolvedObject)
 					return pill ? { ...pill, key, label: this.effectiveTranslate(pill.label) } : null
 				})
 				.filter(Boolean)
 		},
 
+		/**
+		 * What the count pills depend on: the record id and the lists they
+		 * count. A change counts again.
+		 *
+		 * @return {string} The key.
+		 * @spec openspec/changes/screens-relation-pages/specs/relation-pages/spec.md#requirement-a-header-pill-can-be-a-constant-or-a-count
+		 */
+		pillCountKey() {
+			return JSON.stringify([this.objectId, pillCountSource(this.typePill), pillCountSource(this.statusPill)])
+		},
+
 		/**
 		 * The widget the header holds (`headerWidget`): the definition in
 		 * `widgets` with that id, or null without the key or a match.
@@ -4337,6 +4361,14 @@ export default {
 	},
 
 	watch: {
+		// The header's count pills count again for another record or other lists.
+		pillCountKey: {
+			immediate: true,
+			handler() {
+				this.refreshPillCounts()
+			},
+		},
+
 		// Opening a record marks it read, once, after its data has rendered.
 		readStateDue: {
 			immediate: true,
@@ -4754,6 +4786,33 @@ export default {
 			}
 		},
 
+		/**
+		 * Count the lists behind the header's count pills (`countFrom`): one
+		 * list request each (`_limit=1`, the `total`). A failed count, or a
+		 * record without an id yet, shows no pill.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/screens-relation-pages/specs/relation-pages/spec.md#requirement-a-header-pill-can-be-a-constant-or-a-count
+		 */
+		async refreshPillCounts() {
+			const pills = [['type', this.typePill], ['status', this.statusPill]]
+				.map(([key, config]) => [key, pillCountSource(config)])
+				.filter(([, source]) => source)
+			const seq = ++this.pillCountSeq
+			if (pills.length === 0 || this.objectId === null || this.objectId === undefined || this.objectId === '') {
+				this.pillCounts = {}
+				return
+			}
+			const ctx = { objectId: this.objectId, object: this.resolvedObject || undefined }
+			const counts = {}
+			await Promise.all(pills.map(async ([key, source]) => {
+				counts[key] = await fetchListTotal(source.register, source.schema, source.filter, ctx).catch(() => null)
+			}))
+			if (seq === this.pillCountSeq) {
+				this.pillCounts = counts
+			}
+		},
+
 		/**
 		 * A `cn:page:refresh` reached the page — re-read the object so every
 		 * object-bound widget re-renders from what the backend now holds.
@@ -4768,6 +4827,7 @@ export default {
 		 * @return {void}
 		 */
 		onPageRefreshBus(payload) {
+			this.refreshPillCounts()
 			if (!this.hasSchemaDrivenFetch) {
 				return
 			}

package/src/components/CnDetailWidgetHost/CnDetailWidgetHost.vue

@@ -169,10 +169,28 @@
 			:showActions="actionsShown || catalogAddEnabled"
 			:showRefresh="false"
 			:showRequestFeature="false"
+			:headerLink="rendererHeader.link"
 			class="cn-detail-page__catalog-card">
 			<template v-if="widget.icon" #title-icon>
 				<CnIcon :name="widget.icon" :size="20" />
 			</template>
+			<!-- A renderer that reports its own header (`header` event:
+			     `{ link, note }`, e.g. record-list's "3 in totaal"). -->
+			<template v-if="rendererHeader.note || rendererHeader.action" #actions>
+				<span
+					v-if="rendererHeader.note"
+					class="cn-detail-page__catalog-note"
+					data-testid="cn-detail-widget-header-note">{{ rendererHeader.note }}</span>
+				<button
+					v-if="rendererHeader.action"
+					type="button"
+					class="cn-detail-page__catalog-action"
+					data-testid="cn-detail-widget-header-action"
+					@click="rendererHeader.action.run()">
+					<CnIcon v-if="rendererHeader.action.icon" :name="rendererHeader.action.icon" :size="16" />
+					{{ rendererHeader.action.label }}
+				</button>
+			</template>
 			<template v-if="catalogAddEnabled" #action-items>
 				<NcActionButton @click="invokeCatalogAdd">
 					<template #icon>
@@ -185,6 +203,7 @@
 				:is="renderer"
 				ref="renderer"
 				v-bind="rendererProps"
+				@header="onRendererHeader"
 				@selectObject="onSelectObject" />
 		</CnWidgetWrapper>
 
@@ -534,6 +553,17 @@ export default {
 		}
 	},
 
+	data() {
+		return {
+			/**
+			 * The card header a content-only renderer reports through its
+			 * `header` event (screens-relation-pages): a link and a note,
+			 * with the list's total already filled in.
+			 */
+			rendererHeader: { link: null, note: '', action: null },
+		}
+	},
+
 	computed: {
 		/**
 		 * Whether the caller owns the title and card.
@@ -992,6 +1022,19 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Take the header a content-only renderer reports.
+		 *
+		 * @param {{link?: object|null, note?: string, action?: {label: string, icon?: string, run: () => unknown}|null}} header The header parts.
+		 * @spec openspec/changes/screens-relation-pages/specs/relation-pages/spec.md#requirement-a-record-list-shows-the-objects-that-point-at-this-record
+		 */
+		onRendererHeader(header) {
+			const link = header && header.link && typeof header.link === 'object' ? header.link : null
+			const note = header && typeof header.note === 'string' ? header.note : ''
+			const action = header && header.action && typeof header.action.run === 'function' && header.action.label ? header.action : null
+			this.rendererHeader = { link, note, action }
+		},
+
 		/**
 		 * A manifest label through the host's translate; '' stays ''.
 		 *
@@ -1110,6 +1153,29 @@ export default {
 </script>
 
 <style scoped>
+.cn-detail-page__catalog-action {
+	align-items: center;
+	background: var(--color-primary-element-light);
+	border: 0;
+	border-radius: 16px;
+	color: var(--color-primary-element-light-text, var(--color-primary-element));
+	cursor: pointer;
+	display: inline-flex;
+	font: inherit;
+	font-size: 13px;
+	font-weight: 700;
+	gap: 6px;
+	min-height: 32px;
+	padding: 0 14px;
+	white-space: nowrap;
+}
+
+.cn-detail-page__catalog-note {
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+	white-space: nowrap;
+}
+
 .cn-detail-widget-host,
 .cn-detail-widget-host > * {
 	height: 100%;