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

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/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

package/src/components/CnTabsWidget/CnTabsWidget.vue

@@ -85,8 +85,9 @@
 				<div
 					v-if="entry.widget && entry.stack.length"
 					class="cn-tabs-widget__stack"
+					:class="{ 'cn-tabs-widget__stack--grid': !!entry.grid }"
 					data-testid="cn-tabs-widget-stack">
-					<div class="cn-tabs-widget__stack-first">
+					<div class="cn-tabs-widget__stack-first" :style="spanStyle(entry.grid, 0)">
 						<CnDetailWidgetHost
 							:widget="entry.widget"
 							chrome="card"
@@ -108,9 +109,10 @@
 							@selectObject="onSelectObject" />
 					</div>
 					<div
-						v-for="child in entry.stack"
+						v-for="(child, childIndex) in entry.stack"
 						:key="`${entry.key}-${child.id}`"
 						class="cn-tabs-widget__stack-item"
+						:style="spanStyle(entry.grid, childIndex + 1)"
 						:data-testid="`cn-tabs-widget-stack-${child.id}`">
 						<CnDetailWidgetHost
 							:widget="child"
@@ -330,12 +332,17 @@ export default {
 		 * names the list; `count` and `countField` win over it. `overflow: true`
 		 * lists the tab under "More".
 		 *
+		 * A tab with `widgetIds` can lay them out in a grid instead of one under
+		 * the other: `columns: 4` gives each a quarter of the row, and
+		 * `layout: [{ widgetId, gridWidth }]` sets a width (of 12) per widget, as
+		 * the page grid does. Widgets wrap onto the next row.
+		 *
 		 * `maxVisibleTabs` caps the strip: later tabs go under "More".
 		 * `hideEmpty: true` moves a tab whose count is 0 there too.
 		 * `moreLabel` names that menu. `variant: "segmented"` draws the strip
 		 * as a pill switch (CnTabs' segmented variant); `line` is the default.
 		 *
-		 * @type {{ tabs?: Array<{widgetId?: string, widgetIds?: string[], label?: string, icon?: string, count?: number, countField?: string, countFrom?: ('widget'|{register: string, schema: string, filter?: object}), overflow?: boolean}>, ariaLabel?: string, maxVisibleTabs?: number, hideEmpty?: boolean, moreLabel?: string, variant?: ('line'|'segmented') }}
+		 * @type {{ tabs?: Array<{widgetId?: string, widgetIds?: string[], label?: string, icon?: string, count?: number, countField?: string, countFrom?: ('widget'|{register: string, schema: string, filter?: object}), overflow?: boolean, columns?: number, layout?: Array<{widgetId: string, gridWidth: number}>}>, ariaLabel?: string, maxVisibleTabs?: number, hideEmpty?: boolean, moreLabel?: string, variant?: ('line'|'segmented') }}
 		 */
 		content: {
 			type: Object,
@@ -552,6 +559,7 @@ export default {
 					icon: (tab && tab.icon) || widget?.icon || '',
 					widget,
 					stack: widgets.slice(1),
+					grid: this.stackGrid(tab, widgets),
 					count,
 					overflow,
 					pending: visibility === 'pending',
@@ -751,6 +759,46 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * The grid a stack lays its widgets out in, as one column span (of 12)
+		 * per widget in order, or null for the plain vertical stack. A tab says
+		 * `columns: 4` (every widget spans a quarter of the row) and/or
+		 * `layout: [{ widgetId, gridWidth }]`, the page grid's width key per
+		 * widget (of 12; a widget it does not name takes the `columns` share, or
+		 * the whole row). Widgets wrap onto the next row. Heights follow the
+		 * content.
+		 *
+		 * @param {object|string} tab The `content.tabs[]` entry.
+		 * @param {Array<object>} widgets The widgets of the stack, in order.
+		 * @return {number[]|null} The column span of each widget, or null.
+		 */
+		stackGrid(tab, widgets) {
+			if (!tab || typeof tab !== 'object' || widgets.length < 2) {
+				return null
+			}
+			const clamp = (value) => Math.min(12, Math.max(1, Math.floor(Number(value))))
+			const columns = Number(tab.columns)
+			const share = Number.isFinite(columns) && columns >= 1 ? clamp(12 / Math.min(12, Math.floor(columns))) : 12
+			const placed = new Map((Array.isArray(tab.layout) ? tab.layout : [])
+				.filter((entry) => entry && typeof entry.widgetId === 'string' && Number.isFinite(Number(entry.gridWidth)))
+				.map((entry) => [entry.widgetId, clamp(entry.gridWidth)]))
+			if (placed.size === 0 && share === 12) {
+				return null
+			}
+			return widgets.map((widget) => placed.get(widget.id) ?? share)
+		},
+
+		/**
+		 * The inline column span of one widget of a gridded stack.
+		 *
+		 * @param {number[]|null} grid The spans of the stack, or null.
+		 * @param {number} index The widget's position in the stack.
+		 * @return {object|undefined} The style, or undefined without a grid.
+		 */
+		spanStyle(grid, index) {
+			return grid ? { gridColumn: `span ${grid[index] || 12}` } : undefined
+		},
+
 		/**
 		 * The widget ids a tab names: `widgetIds` (a stack) when it holds at
 		 * least one id, else `widgetId`, or the bare string.
@@ -999,6 +1047,29 @@ export default {
 	gap: 20px;
 }
 
+/* A gridded stack (`columns` / `layout` on the tab): 12 columns, widgets wrap
+   onto the next row, a row's cards as tall as the tallest. Narrow, it is the
+   plain stack again. */
+.cn-tabs-widget__stack--grid {
+	display: grid;
+	grid-template-columns: repeat(12, minmax(0, 1fr));
+	align-items: stretch;
+}
+
+.cn-tabs-widget__stack--grid > * {
+	min-width: 0;
+}
+
+@media (max-width: 700px) {
+	.cn-tabs-widget__stack--grid {
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	.cn-tabs-widget__stack--grid > * {
+		grid-column: auto !important;
+	}
+}
+
 /* The panel is the card; the strip is not inside it. There is no title bar
    above the tabs either: the open tab names the panel, so a title row would
    say the same thing twice and cost a row of height on a card that is mostly
@@ -1119,6 +1190,14 @@ export default {
 	height: 100%;
 }
 
+/* A list widget's footer Add bleeds through its card's 16px content padding
+   (margin 0 -16px -16px). The panel of a tab pads 12px, so on a tab that
+   holds the list directly the footer stuck out 4px on the right and at the
+   bottom and made the panel scroll. It bleeds exactly the panel's padding. */
+.cn-tabs-widget__tabs :deep(.cn-tabs__content > .cn-tab > .cn-detail-widget-host--bare .cn-object-list-widget__add) {
+	margin: auto -12px -12px;
+}
+
 .cn-tabs-widget__title {
 	align-items: center;
 	display: inline-flex;