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

package/src/components/CnRecordListWidget/CnRecordListWidget.vue

@@ -81,6 +81,7 @@ import CnIcon from '../CnIcon/CnIcon.vue'
 import CnStatusBadge from '../CnStatusBadge/CnStatusBadge.vue'
 import { isBadgeVariant } from '../../utils/badgeVariants.js'
 import { fillTemplate, firstFilled } from '../../utils/fillTemplate.js'
+import { pageFilter, pageSort } from '../../utils/pageControls.js'
 import { readPath } from '../../utils/readPath.js'
 import { dropOptionalUnresolved, hasUnresolvedTokens, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 
@@ -108,7 +109,7 @@ function unwrap(value) {
  * objects filtered on a reference to this record. The source keys are those of
  * `object-list` (`register`, `schema`, `filter` with the `@objectId` /
  * `@object.<field>` / `@workspace.<key>` tokens, `sort`, `limit`, `extend`,
- * `rowRoute`); what differs is the drawing: `presentation` is `rows`, `feed`
+ * `rowRoute`, `pageControls`); what differs is the drawing: `presentation` is `rows`, `feed`
  * or `inline`, and each line is a template (`"{identifier} · {caseTypeName}"`,
  * `"Termijn {deadline|date}"`).
  *
@@ -188,8 +189,8 @@ export default {
 
 		/** @return {object} The filter with its tokens resolved. */
 		resolvedFilter() {
-			const filter = this.content?.filter
-			return dropOptionalUnresolved(resolveFilterTokens(filter && typeof filter === 'object' ? filter : {}, this.tokenCtx))
+			const filter = pageFilter(this.content?.pageControls, this.tokenCtx.workspace, this.content?.filter)
+			return dropOptionalUnresolved(resolveFilterTokens(filter, this.tokenCtx))
 		},
 
 		/** @return {boolean} A required token (the record id, say) has no value yet. */
@@ -197,6 +198,11 @@ export default {
 			return hasUnresolvedTokens(this.resolvedFilter)
 		},
 
+		/** @return {object|null} The sort: the page's sort control when the widget listens to one, else its own. */
+		effectiveSort() {
+			return pageSort(this.content?.pageControls, this.tokenCtx.workspace, this.content?.sort)
+		},
+
 		/** @return {number} The fetch cap. */
 		limit() {
 			const value = Number(this.content?.limit)
@@ -206,7 +212,7 @@ export default {
 		/** @return {string} What a fetch depends on; a change fetches again. */
 		requestKey() {
 			const c = this.content || {}
-			return JSON.stringify([c.register, c.schema, this.resolvedFilter, c.sort, this.limit, c.extend, this.waiting])
+			return JSON.stringify([c.register, c.schema, this.resolvedFilter, this.effectiveSort, this.limit, c.extend, this.waiting])
 		},
 
 		/** @return {Array<object>} The rows ready to draw. */
@@ -422,8 +428,9 @@ export default {
 				])
 				const url = generateUrl('/apps/openregister/api/objects/{register}/{schema}', { register: c.register, schema: c.schema })
 				const params = { _limit: this.limit }
-				if (c.sort && typeof c.sort === 'object' && c.sort.field) {
-					params[`_order[${c.sort.field}]`] = c.sort.dir === 'desc' ? 'desc' : 'asc'
+				const sort = this.effectiveSort
+				if (sort && typeof sort === 'object' && sort.field) {
+					params[`_order[${sort.field}]`] = sort.dir === 'desc' ? 'desc' : 'asc'
 				}
 				if (Array.isArray(c.extend)) {
 					const extend = c.extend.filter((e) => typeof e === 'string' && e !== '')

package/src/components/CnStatsBlockWidget/CnStatsBlockWidget.vue

@@ -17,10 +17,42 @@
 <template>
 	<div
 		class="cn-stats-block-widget"
-		:class="[iconClass, { 'cn-stats-block-widget--multi': hasEntries }]">
+		:class="[iconClass, { 'cn-stats-block-widget--multi': hasEntries && !isRows, 'cn-stats-block-widget--rows': isRows }]">
+		<!-- Rows layout: a title and one label-left, number-right row per entry
+		     (the board's "Mijn Zuiddrecht nu" card). -->
+		<template v-if="isRows">
+			<h2 v-if="title" class="cn-stats-block-widget__rows-title" data-testid="cn-stats-block-rows-title">
+				{{ tl(title) }}
+			</h2>
+			<dl class="cn-stats-block-widget__rows" data-testid="cn-stats-block-rows">
+				<div
+					v-for="view in rowViews"
+					:key="view.key"
+					class="cn-stats-block-widget__row"
+					data-testid="cn-stats-block-row">
+					<dt class="cn-stats-block-widget__row-label">
+						<a
+							v-if="view.href"
+							:href="view.href"
+							data-testid="cn-stats-block-row-link"
+							@click="onRowClick($event, view.route)">{{ view.label }}</a>
+						<template v-else>
+							{{ view.label }}
+						</template>
+					</dt>
+					<dd
+						class="cn-stats-block-widget__row-value"
+						:class="'cn-stats-block-widget__row-value--' + view.variant"
+						data-testid="cn-stats-block-row-value">
+						{{ view.display }}
+					</dd>
+				</div>
+			</dl>
+		</template>
+
 		<!-- Multi-entry mode: one KPI per entry, all inside this widget card.
 		     An entry with hideWhenZero whose resolved count is 0 is omitted. -->
-		<template v-if="hasEntries">
+		<template v-else-if="hasEntries">
 			<CnStatsBlock
 				v-for="view in entryViews"
 				:key="view.key"
@@ -71,6 +103,7 @@ import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import CnStatsBlock from '../CnStatsBlock/CnStatsBlock.vue'
 import { useDataSource } from '../../composables/useDataSource.js'
 import { formatMetricValue, normalizeMetricFormat, unwrapAppConfig } from '../../utils/formatMetric.js'
+import { followLinkClick, resolveHref } from '../../utils/linkNavigation.js'
 import { dropOptionalUnresolved, hasUnresolvedTokens, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 
 // The canonical KPI scale (`--cn-kpi-*`) lives in one stylesheet. Imported
@@ -167,6 +200,8 @@ export default {
 		 * currency (`currency`) and `@config.<key>` tokens in `format`.
 		 */
 		cnAppConfig: { default: () => ({}) },
+		/** The host's label lookup (CnAppRoot provides it); identity without one. */
+		cnTranslate: { default: () => (key) => key },
 	},
 
 	props: {
@@ -264,7 +299,10 @@ export default {
 
 		/**
 		 * `stacked` gives every block the board look (see CnStatsBlock
-		 * `layout`). Empty (the default) keeps the KPI card.
+		 * `layout`). `rows` draws the title and then one row per entry (or the
+		 * single source): the label on the left, the number on the right, the
+		 * label a link when the entry has a `route`. Empty (the default) keeps
+		 * the KPI card.
 		 *
 		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-stats-block-can-take-the-stacked-board-look
 		 */
@@ -353,6 +391,52 @@ export default {
 			return Array.isArray(this.entries) && this.entries.length > 0
 		},
 
+		/**
+		 * Whether the widget draws label/number rows (`layout: "rows"`).
+		 *
+		 * @return {boolean}
+		 */
+		isRows() {
+			return this.layout === 'rows'
+		},
+
+		/**
+		 * The rows of the rows layout: one per entry, or a single row from the
+		 * `dataSource` (labelled by `countLabel`). A row is `{ key, label,
+		 * display, variant, route, href }`; `display` is the formatted value,
+		 * a dash while it loads or when the count could not be read.
+		 *
+		 * @return {Array<object>}
+		 */
+		rowViews() {
+			if (!this.hasEntries) {
+				const formatted = this.formattedSingle
+				return [{
+					key: 'single',
+					label: this.tl(this.countLabel),
+					display: this.loading ? '\u2014' : (formatted !== null ? formatted : this.formatCount(this.resolvedCount)),
+					variant: this.variant || 'default',
+					route: this.route,
+					href: this.route ? resolveHref(this.route, this.$router) : '',
+				}]
+			}
+			return this.entryViews.map((view) => {
+				const resolved = view.resolved === true
+				let display = '\u2014'
+				if (resolved) {
+					display = view.formatted !== null ? view.formatted : this.formatCount(view.count)
+				}
+				return {
+					key: view.key,
+					label: this.tl(view.entry.title || ''),
+					display,
+					variant: view.entry.variant || 'default',
+					route: view.route,
+					href: view.route ? resolveHref(view.route, this.$router) : '',
+				}
+			})
+		},
+
 		/**
 		 * The unwrapped detail-page object context for token resolution, or
 		 * null on surfaces (dashboards) that don't provide one.
@@ -566,6 +650,37 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * A manifest string through the host's label lookup.
+		 *
+		 * @param {string} text The text as written in the manifest.
+		 * @return {string} The translated text.
+		 */
+		tl(text) {
+			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
+		},
+
+		/**
+		 * A count in the user's locale.
+		 *
+		 * @param {number} count The count.
+		 * @return {string} The localized count.
+		 */
+		formatCount(count) {
+			return new Intl.NumberFormat().format(count)
+		},
+
+		/**
+		 * Follow a row label's link in the router, leaving a modified click to the browser.
+		 *
+		 * @param {MouseEvent} event The click.
+		 * @param {object} route The route location.
+		 * @return {void}
+		 */
+		onRowClick(event, route) {
+			followLinkClick(event, route, this.$router)
+		},
+
 		/**
 		 * Re-query the tile's counts — the REST `/value` aggregation, the
 		 * per-entry counts of multi-entry mode, and the `dataSource` GraphQL
@@ -758,4 +873,66 @@ export default {
 	flex-direction: column;
 	gap: var(--cn-kpi-stack-gap, 12px);
 }
+
+/* Rows layout: the board's "label left, number right" card body. */
+.cn-stats-block-widget--rows {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	box-sizing: border-box;
+	padding: 20px 22px;
+}
+
+.cn-stats-block-widget__rows-title {
+	margin: 0;
+	font-size: 15px;
+	font-weight: 600;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-stats-block-widget__rows {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	margin: 0;
+	font-size: 14px;
+}
+
+.cn-stats-block-widget__row {
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: 16px;
+}
+
+.cn-stats-block-widget__row-label {
+	min-width: 0;
+	margin: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.cn-stats-block-widget__row-value {
+	flex: none;
+	margin: 0;
+	font-size: 17px;
+	font-weight: 700;
+	text-align: right;
+}
+
+.cn-stats-block-widget__row-value--success {
+	color: var(--color-text-success, var(--color-success-text));
+}
+
+.cn-stats-block-widget__row-value--warning {
+	color: var(--color-text-warning, var(--color-warning-text));
+}
+
+.cn-stats-block-widget__row-value--error {
+	color: var(--color-text-error, var(--color-error-text));
+}
+
+.cn-stats-block-widget__row-value--primary {
+	color: var(--color-primary-element);
+}
 </style>

package/src/components/CnWidgetObjectTable/CnWidgetObjectTable.vue

@@ -86,6 +86,7 @@ import { useEndpointSource } from '../../composables/useEndpointSource.js'
 import { useObjectStore } from '../../store/useObjectStore.js'
 import { dispatchAction, resolveObjectOpType } from '../../utils/actionsDispatcher.js'
 import { resolveObjectTokenContext } from '../../utils/detailObjectContext.js'
+import { pageFilter, pageSort } from '../../utils/pageControls.js'
 import { dropOptionalUnresolved, hasUnresolvedTokens, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 import { compareVisibleWhen, readVisibleWhenPath } from '../../utils/visibleWhen.js'
 import { CnIcon } from '../CnIcon/index.js'
@@ -517,7 +518,8 @@ export default {
 		 * @return {object}
 		 */
 		resolvedFilter() {
-			return dropOptionalUnresolved(resolveFilterTokens((this.source && this.source.filter) || {}, this.tokenCtx))
+			const filter = pageFilter(this.source && this.source.pageControls, this.workspaceCtx, this.source && this.source.filter)
+			return dropOptionalUnresolved(resolveFilterTokens(filter, this.tokenCtx))
 		},
 
 		/**
@@ -590,7 +592,10 @@ export default {
 		resolvedFetchParams() {
 			const src = this.source || {}
 			const params = {}
-			for (const [field, dir] of Object.entries(src.order || {})) {
+			// A page sort control (`source.pageControls.sort`) replaces the order.
+			const chosen = pageSort(src.pageControls, this.workspaceCtx, null)
+			const order = chosen ? { [chosen.field]: chosen.dir } : (src.order || {})
+			for (const [field, dir] of Object.entries(order)) {
 				params[`_order[${field}]`] = dir === 'desc' ? 'desc' : 'asc'
 			}
 			if (typeof src.limit === 'number' && src.limit > 0) {

package/src/components/CnWidgetObjectTable/dashboardRegistration.js

@@ -73,6 +73,11 @@ export function objectTableContentToProps(content) {
 	if (hasLimit) {
 		source.limit = limit
 	}
+	// The page controls the table listens to belong to its source.
+	if (rest.pageControls && typeof rest.pageControls === 'object') {
+		source.pageControls = rest.pageControls
+		delete rest.pageControls
+	}
 	return { ...rest, source }
 }