@conduction/nextcloud-vue 2.80.0 → 2.81.0

package/src/components/CnStatWidget/CnStatWidget.vue

@@ -163,6 +163,7 @@ import widgetLink from '../../mixins/widgetLink.js'
 import { useObjectStore } from '../../store/useObjectStore.js'
 import { resolveObjectOpType } from '../../utils/actionsDispatcher.js'
 import { resolveObjectTokenContext } from '../../utils/detailObjectContext.js'
+import { fetchListTotal, needsListEndpoint } from '../../utils/fetchFilterCounts.js'
 import { formatMetricValue, unwrapAppConfig } from '../../utils/formatMetric.js'
 import { dropOptionalUnresolved, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 import { STATUS_TEXT_COLORS } from '../../utils/statusColors.js'
@@ -1746,8 +1747,7 @@ export default {
 			// drop any optional `@workspace.<key>?` / `@config.<key>?` that stayed
 			// unresolved so an unset value omits the filter (show all) instead of
 			// sending a literal token.
-			const ctx = { ...(this.objectCtx || {}), workspace: this.pageCtx, config: this.configCtx }
-			filter = dropOptionalUnresolved(resolveFilterTokens(filter, ctx))
+			filter = this.resolveSourceFilter(filter)
 			for (const [k, v] of Object.entries(filter)) {
 				if (v && typeof v === 'object') {
 					for (const [op, ov] of Object.entries(v)) {
@@ -1759,6 +1759,21 @@ export default {
 			}
 		},
 
+		/**
+		 * A source filter with its @-tokens resolved against the object, page
+		 * and config contexts, and unresolved optional clauses dropped.
+		 *
+		 * @param {object} filter The raw filter map.
+		 * @return {object} The resolved filter.
+		 */
+		resolveSourceFilter(filter) {
+			if (!filter || typeof filter !== 'object') {
+				return {}
+			}
+			const ctx = { ...(this.objectCtx || {}), workspace: this.pageCtx, config: this.configCtx }
+			return dropOptionalUnresolved(resolveFilterTokens(filter, ctx))
+		},
+
 		/**
 		 * Fetch one scalar from the OpenRegister `/value` aggregation endpoint.
 		 *
@@ -1768,9 +1783,19 @@ export default {
 		 * @param {string} metric The aggregation metric.
 		 * @param {?string} field The numeric field (non-count metrics).
 		 * @param {object} filter The filter map.
+		 * @param {string} [via] `"list"` counts through the list endpoint's total.
 		 * @return {Promise<number|null>} The aggregated value.
 		 */
-		async fetchAggregate(axios, generateUrl, s, metric, field, filter) {
+		async fetchAggregate(axios, generateUrl, s, metric, field, filter, via) {
+			// A count the aggregation endpoint cannot express (a filter holding a
+			// list of values, a test for no value (`null` or `{ isnull: true }`),
+			// or `via: "list"`) reads the list endpoint's total instead, because
+			// the aggregation endpoint has no null operator.
+			const resolved = this.resolveSourceFilter(filter)
+			const listed = Object.values(resolved).some((v) => Array.isArray(v) || (v && typeof v === 'object' && Object.values(v).some(Array.isArray)))
+			if ((!metric || metric === 'count') && (via === 'list' || listed || needsListEndpoint(resolved))) {
+				return fetchListTotal(s.register, s.schema, resolved, {})
+			}
 			const url = generateUrl(
 				'/apps/openregister/api/objects/aggregations/{register}/{schema}/value',
 				{ register: s.register, schema: s.schema },
@@ -1827,9 +1852,15 @@ export default {
 				if (s.kind === 'endpoint') {
 					this.value = await this.fetchEndpoint(s, refresh)
 				} else if (s.kind === 'ratio') {
-					const num = await this.fetchAggregate(axios, generateUrl, s, s.metric, s.field, (s.numerator && s.numerator.filter) || {})
-					const den = await this.fetchAggregate(axios, generateUrl, s, s.metric, s.field, (s.denominator && s.denominator.filter) || {})
+					// Each part may name its own metric, field and `via`, so "answered
+					// in time" over "answered" is two counts, and a share of a sum is
+					// two sums.
+					const part = (p) => this.fetchAggregate(axios, generateUrl, s, (p && p.metric) || s.metric, (p && p.field) || s.field, (p && p.filter) || {}, (p && p.via) || s.via)
+					const num = await part(s.numerator)
+					const den = await part(s.denominator)
 					this.value = (den && Number(den) !== 0) ? (Number(num) / Number(den)) * 100 : null
+				} else if (s.kind === 'elapsed') {
+					this.value = await this.fetchElapsed(axios, generateUrl, s)
 				} else if (s.kind === 'computed') {
 					// Fetch each named part, then evaluate the formula over them.
 					const { evalFormula } = await import('../../utils/evalFormula.js')
@@ -1842,7 +1873,7 @@ export default {
 				} else if (s.kind === 'weighted') {
 					this.value = await this.fetchWeighted(axios, generateUrl, s)
 				} else {
-					this.value = await this.fetchAggregate(axios, generateUrl, s, s.metric, s.field, s.filter || {})
+					this.value = await this.fetchAggregate(axios, generateUrl, s, s.metric, s.field, s.filter || {}, s.via)
 				}
 			} catch (e) {
 				this.error = (e && e.message) || 'error'
@@ -1852,6 +1883,56 @@ export default {
 			}
 		},
 
+		/**
+		 * The average time between two date fields of the matching objects
+		 * (`{ from, to, unit?, filter?, limit? }`): an average answer time is
+		 * `occurredAt` to `resolvedAt`. Computed client-side over the fetched
+		 * objects (capped at `limit`, default 1000), because the aggregation
+		 * endpoint averages one numeric field, not a difference. Objects missing
+		 * either date, or with `to` before `from`, are left out; null when none
+		 * is left. `unit` is `days` (default), `hours` or `minutes`.
+		 *
+		 * @param {object} axios The axios instance.
+		 * @param {(url: string, params?: object) => string} generateUrl The router helper.
+		 * @param {object} s The elapsed source.
+		 * @return {Promise<number|null>} The average, in `unit`.
+		 * @spec openspec/changes/screens-ratio-stat/specs/ratio-stat/spec.md#requirement-a-stat-can-average-the-time-between-two-dates
+		 */
+		async fetchElapsed(axios, generateUrl, s) {
+			if (!s.from || !s.to) {
+				return null
+			}
+			const url = generateUrl(
+				'/apps/openregister/api/objects/{register}/{schema}',
+				{ register: s.register, schema: s.schema },
+			)
+			const params = { _limit: s.limit || 1000 }
+			const filter = this.resolveSourceFilter(s.filter || {})
+			for (const [k, v] of Object.entries(filter)) {
+				if (v && typeof v === 'object' && !Array.isArray(v)) {
+					for (const [op, operand] of Object.entries(v)) {
+						params[`${k}[${op}]`] = operand
+					}
+				} else if (v !== '' && v !== null && v !== undefined) {
+					params[k] = v
+				}
+			}
+			const res = await axios.get(url, { params })
+			const rows = (res && res.data && res.data.results) || []
+			const per = { minutes: 60000, hours: 3600000, days: 86400000 }[s.unit] || 86400000
+			let sum = 0
+			let n = 0
+			for (const r of rows) {
+				const from = Date.parse(r && r[s.from])
+				const to = Date.parse(r && r[s.to])
+				if (Number.isFinite(from) && Number.isFinite(to) && to >= from) {
+					sum += (to - from) / per
+					n += 1
+				}
+			}
+			return n > 0 ? sum / n : null
+		},
+
 		/**
 		 * Compute a weighted sum `Σ (field × weightField) ÷ divisor` client-side
 		 * (no OpenRegister expression-aggregation primitive yet). Pulls the

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/CnSwitchRowsWidget/CnSwitchRowsWidget.vue

@@ -0,0 +1,226 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Conduction B.V.
+  - SPDX-License-Identifier: EUPL-1.2
+-->
+
+<template>
+	<div class="cn-switch-rows" data-testid="cn-switch-rows">
+		<ul class="cn-switch-rows__list">
+			<li
+				v-for="row in rows"
+				:key="row.key"
+				class="cn-switch-rows__row"
+				:data-testid="`cn-switch-rows-row-${row.key}`">
+				<NcCheckboxRadioSwitch
+					:modelValue="values[row.key] === true"
+					type="switch"
+					:disabled="readOnly || busy === row.key"
+					@update:modelValue="toggle(row, $event)">
+					<span class="cn-switch-rows__label">{{ row.label }}</span>
+					<span v-if="row.hint" class="cn-switch-rows__hint">{{ row.hint }}</span>
+				</NcCheckboxRadioSwitch>
+			</li>
+		</ul>
+		<NcNoteCard v-if="notice" type="error" data-testid="cn-switch-rows-notice">
+			{{ notice }}
+		</NcNoteCard>
+	</div>
+</template>
+
+<script>
+import { NcCheckboxRadioSwitch, NcNoteCard } from '@nextcloud/vue'
+import { objectUrlOf, patchObject } from '../../utils/objectWrite.js'
+import { readPath } from '../../utils/readPath.js'
+import { serverErrorMessage } from '../../utils/serverErrorMessage.js'
+
+/**
+ * CnSwitchRowsWidget — the `switch-rows` widget: a card of switches, each with
+ * a label and a hint, bound to boolean fields of the CURRENT object. A toggle
+ * saves at once with ONE PATCH of that field; a refused PATCH puts the switch
+ * back and shows the server's words.
+ *
+ * @spec openspec/changes/abstract-switch-rows/specs/switch-rows/spec.md
+ */
+export default {
+	name: 'CnSwitchRowsWidget',
+
+	components: { NcCheckboxRadioSwitch, NcNoteCard },
+
+	inject: {
+		cnTranslate: { default: () => (key) => key },
+	},
+
+	props: {
+		/**
+		 * The widget configuration.
+		 *
+		 * - `rows` (required) — `[{ key, label, hint?, invert? }]`; `key` is a top-level boolean field. `invert` shows the switch on when the field is false (a stored `disabled` read as "enabled").
+		 * - `readOnly`.
+		 *
+		 * @type {object}
+		 */
+		content: {
+			type: Object,
+			default: () => ({}),
+		},
+
+		/** The current detail-page object. */
+		objectData: {
+			type: Object,
+			default: null,
+		},
+
+		/** The current object id. */
+		objectId: {
+			type: [String, Number],
+			default: '',
+		},
+
+		/** OpenRegister register slug of the surface. */
+		register: {
+			type: [String, Object],
+			default: '',
+		},
+
+		/** OpenRegister schema slug of the surface. */
+		schema: {
+			type: [String, Object],
+			default: '',
+		},
+	},
+
+	emits: ['saved'],
+
+	data() {
+		return {
+			/** The switch states as last saved (by key, as the switch shows them). */
+			saved: {},
+			values: {},
+			busy: '',
+			notice: '',
+		}
+	},
+
+	computed: {
+		rows() {
+			const list = Array.isArray(this.content.rows) ? this.content.rows : []
+			return list
+				.filter((row) => row && row.key)
+				.map((row) => ({ ...row, label: this.tr(row.label || row.key), hint: this.tr(row.hint || '') }))
+		},
+
+		readOnly() {
+			return this.content.readOnly === true
+		},
+
+		objectUrl() {
+			return objectUrlOf(this.register, this.schema, this.objectId || (this.objectData && this.objectData.id))
+		},
+	},
+
+	watch: {
+		objectData() {
+			this.adopt()
+		},
+	},
+
+	created() {
+		this.adopt()
+	},
+
+	methods: {
+		tr(text) {
+			if (typeof text !== 'string' || text === '') {
+				return ''
+			}
+			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
+		},
+
+		/** Read every switch off the object. */
+		adopt() {
+			const values = {}
+			for (const row of this.rows) {
+				const stored = readPath(this.objectData || {}, row.key) === true
+				values[row.key] = row.invert ? !stored : stored
+			}
+			this.saved = values
+			this.values = { ...values }
+		},
+
+		/**
+		 * Flip one switch and save that one field.
+		 *
+		 * @param {object} row The row.
+		 * @param {boolean} on The new switch state.
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/abstract-switch-rows/specs/switch-rows/spec.md#requirement-a-toggle-saves-that-one-field
+		 */
+		async toggle(row, on) {
+			if (!this.objectUrl) {
+				this.notice = this.tr('This switch cannot be saved here.')
+				return
+			}
+			this.notice = ''
+			this.busy = row.key
+			this.values = { ...this.values, [row.key]: on }
+			const stored = row.invert ? !on : on
+			try {
+				const data = await patchObject(this.objectUrl, { [row.key]: stored })
+				const written = data[row.key] !== undefined ? data[row.key] === true : stored
+				const shown = row.invert ? !written : written
+				this.saved = { ...this.saved, [row.key]: shown }
+				this.values = { ...this.values, [row.key]: shown }
+				/**
+				 * @event saved A switch was written.
+				 * @type {{field: string, value: boolean}}
+				 */
+				this.$emit('saved', { field: row.key, value: written })
+			} catch (e) {
+				this.values = { ...this.values, [row.key]: this.saved[row.key] }
+				this.notice = serverErrorMessage(e)
+			} finally {
+				this.busy = ''
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-switch-rows {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	min-width: 0;
+}
+
+.cn-switch-rows__list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.cn-switch-rows__row {
+	padding: 10px 0;
+	border-top: 1px solid var(--cn-board-hairline, var(--color-border));
+}
+
+.cn-switch-rows__row:first-child {
+	border-top: none;
+	padding-top: 0;
+}
+
+.cn-switch-rows__label {
+	display: block;
+	font-weight: 600;
+}
+
+.cn-switch-rows__hint {
+	display: block;
+	font-size: 12px;
+	font-weight: 400;
+	color: var(--color-text-maxcontrast);
+}
+</style>

package/src/components/CnSwitchRowsWidget/index.js

@@ -0,0 +1,25 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * CnSwitchRowsWidget — self-registers the `switch-rows` widget type (a card of
+ * switches, each with a label and a hint, bound to boolean fields of the
+ * current object and saved on toggle) into the shared dashboardWidgetRegistry.
+ */
+
+import CnSwitchRowsWidget from './CnSwitchRowsWidget.vue'
+import { registerDashboardWidget } from '../CnWidgetGrid/dashboardWidgetRegistry.js'
+
+registerDashboardWidget('switch-rows', {
+	renderer: CnSwitchRowsWidget,
+	form: null,
+	defaultContent: {
+		rows: [],
+	},
+	displayName: 'Switch rows',
+	icon: 'ToggleSwitch',
+	surfaces: ['detail-page'],
+})
+
+export { CnSwitchRowsWidget }
+export default CnSwitchRowsWidget