@conduction/nextcloud-vue 2.58.0 → 2.60.0

package/src/components/CnObjectList/CnObjectList.vue

@@ -163,7 +163,7 @@ export default {
 		},
 	},
 
-	emits: ['click', 'select'],
+	emits: ['click', 'select', 'aux-click'],
 
 	computed: {
 		/**
@@ -194,6 +194,7 @@ export default {
 			const listeners = { select: () => this.toggleSelect(object) }
 			if (!this.selectable) {
 				listeners.click = (_row, event) => this.emitClick(object, event)
+				listeners['aux-click'] = (_row, event) => this.emitAuxClick(object, event)
 			}
 			return listeners
 		},
@@ -202,16 +203,31 @@ export default {
 		 * Emit `click` for a non-selectable row (navigation).
 		 *
 		 * @param {object} object The clicked row's object.
-		 * @param {MouseEvent} [event] The native click/auxclick event.
+		 * @param {MouseEvent} [event] The native click event.
 		 */
 		emitClick(object, event) {
 			/**
-			 * @event click Emitted when a non-selectable row is clicked or middle-clicked (navigation). Payload: `(object, event)` — the row's object and the native click/auxclick event, for opening it in a new tab on a ctrl/cmd/shift or middle click.
+			 * @event click Emitted when a non-selectable row is clicked (navigation). Payload: `(object, event)` — the row's object and the native click event, for opening it in a new tab on a ctrl/cmd/shift click. A middle click emits `aux-click` instead.
 			 * @type {object} The clicked row's object.
 			 */
 			this.$emit('click', object, event)
 		},
 
+		/**
+		 * Emit `aux-click` for a middle click on a non-selectable row, kept off
+		 * `click` so a navigating listener never moves the current tab away.
+		 *
+		 * @param {object} object The clicked row's object.
+		 * @param {MouseEvent} event The native auxclick event.
+		 */
+		emitAuxClick(object, event) {
+			/**
+			 * @event aux-click Emitted when a non-selectable row is middle-clicked, for opening it in a new tab (see `openRowTarget`). Payload: `(object, event)` — the row's object and the native auxclick event.
+			 * @type {object} The clicked row's object.
+			 */
+			this.$emit('aux-click', object, event)
+		},
+
 		toggleSelect(object) {
 			const id = object[this.rowKey]
 			const newIds = this.isSelected(object)

package/src/components/CnObjectListWidget/CnObjectListWidget.vue

@@ -152,6 +152,7 @@
 						:sortOrder="localSort.dir || 'asc'"
 						borderless
 						@rowClick="onRowClick"
+						@rowAuxClick="onRowAuxClick"
 						@select="onSelect"
 						@sort="onSort">
 						<template v-if="mappedRowActions.length > 0" #row-actions="{ row }">
@@ -172,6 +173,7 @@
 					:sortOrder="localSort.dir || 'asc'"
 					borderless
 					@rowClick="onRowClick"
+					@rowAuxClick="onRowAuxClick"
 					@select="onSelect"
 					@sort="onSort">
 					<!-- Declarative per-row actions (`content.rowActions`).
@@ -286,7 +288,7 @@ import CnFkResolveCell from '../CnFkResolveCell/CnFkResolveCell.vue'
 import CnFormDialog from '../CnFormDialog/CnFormDialog.vue'
 import CnPagination from '../CnPagination/CnPagination.vue'
 import CnWidgetEmptyState from '../CnWidgetEmptyState/CnWidgetEmptyState.vue'
-import { actionLink, dispatchAction } from '../../utils/actionsDispatcher.js'
+import { actionLink, dispatchAction, hasActionTargetTokens } from '../../utils/actionsDispatcher.js'
 import { followLinkClick, openRowTarget, resolveHref } from '../../utils/linkNavigation.js'
 import { objectFieldValue } from '../../utils/objectName.js'
 import { dropOptionalUnresolved, hasUnresolvedTokens, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
@@ -421,7 +423,7 @@ export default {
 		},
 	},
 
-	emits: ['created', 'row-click', 'view-all', 'files-dropped'],
+	emits: ['created', 'row-click', 'row-aux-click', 'view-all', 'files-dropped'],
 
 	data() {
 		return {
@@ -1414,29 +1416,60 @@ export default {
 
 		/**
 		 * Navigate to a configured detail route on row click (when `rowRoute`
-		 * is set and a router is available); a ctrl/cmd/shift or middle click
-		 * opens it in a new tab.
+		 * is set and a router is available); a ctrl/cmd/shift click opens it
+		 * in a new tab.
 		 *
 		 * @param {object} row The clicked object row.
-		 * @param {MouseEvent} [event] The originating click/auxclick event.
+		 * @param {MouseEvent} [event] The originating click event.
 		 * @return {void}
 		 */
 		onRowClick(row, event) {
-			const route = this.content.rowRoute
-			const id = row && (row.id || (row['@self'] && row['@self'].id))
-			if (route && id && this.$router) {
-				markNewTabHandled(event, openRowTarget(event, { name: route, params: { id } }, this.$router))
-			}
+			this.openRowRoute(row, event)
 			/**
 			 * @event row-click Emitted with the clicked object (for hosts that
-			 * want to handle navigation themselves), on a click or middle click.
-			 * Payload: `(row, event)`, the second being the native click/auxclick
-			 * event.
+			 * want to handle navigation themselves). Payload: `(row, event)`, the
+			 * second being the native click event. A middle click emits
+			 * `row-aux-click` instead.
 			 * @type {object}
 			 */
 			this.$emit('row-click', row, event)
 		},
 
+		/**
+		 * A row middle click: opens the configured detail route in a new tab
+		 * and emits `row-aux-click`, not `row-click`.
+		 *
+		 * @param {object} row The clicked object row.
+		 * @param {MouseEvent} event The originating auxclick event.
+		 * @return {void}
+		 */
+		onRowAuxClick(row, event) {
+			this.openRowRoute(row, event)
+			/**
+			 * @event row-aux-click Emitted with the middle-clicked object, for
+			 * opening it in a new tab. Payload: `(row, event)`, the second being
+			 * the native auxclick event.
+			 * @type {object}
+			 */
+			this.$emit('row-aux-click', row, event)
+		},
+
+		/**
+		 * Open `content.rowRoute` for a row: in place, or in a new tab on a
+		 * ctrl/cmd/shift or middle click.
+		 *
+		 * @param {object} row The clicked object row.
+		 * @param {MouseEvent} [event] The originating event.
+		 * @return {void}
+		 */
+		openRowRoute(row, event) {
+			const route = this.content.rowRoute
+			const id = row && (row.id || (row['@self'] && row['@self'].id))
+			if (route && id && this.$router) {
+				markNewTabHandled(event, openRowTarget(event, { name: route, params: { id } }, this.$router))
+			}
+		},
+
 		/**
 		 * Dispatch one declared row action. A `handler` action gets the row
 		 * appended as its last argument, the same convention CnWidgetObjectTable
@@ -1465,8 +1498,7 @@ export default {
 		 * @return {object} `{ href, linkTarget }`, `{ to }`, or `{}`.
 		 */
 		rowActionLink(action) {
-			const target = typeof action.target === 'string' ? action.target : ''
-			if (/[@{]/.test(target)) {
+			if (hasActionTargetTokens(action.target)) {
 				return {}
 			}
 			const link = actionLink(action, { router: this.$router || null })

package/src/components/CnObjectRow/CnObjectRow.vue

@@ -2,7 +2,7 @@
 	<div
 		class="cn-object-row"
 		:class="{ 'cn-object-row--selected': selected }"
-		@mousedown="onPointerDown"
+		@mousedown="onRowMouseDown"
 		@click="onRowClick($event)"
 		@auxclick="onRowAuxClick($event)">
 		<!-- Selection checkbox -->
@@ -68,7 +68,7 @@
 import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import { useClickDragGuard } from '../../composables/useClickDragGuard.js'
 import { resolveImageUrl } from '../../utils/resolveImageUrl.js'
-import { isRowMiddleClick } from '../../utils/rowAuxClick.js'
+import { isRowMiddleClick, preventMiddleClickAutoscroll } from '../../utils/rowAuxClick.js'
 import { CnIcon } from '../CnIcon/index.js'
 import { CnStatusBadge } from '../CnStatusBadge/index.js'
 
@@ -146,7 +146,7 @@ export default {
 	// again from `$emit('click', object)` — twice per click, with different
 	// payloads. Declaring the names here removes them from `$attrs`, which is
 	// also what stops VTU v2 recording the native DOM event into `emitted()`.
-	emits: ['select', 'click'],
+	emits: ['select', 'click', 'aux-click'],
 
 	setup() {
 		// Tell a deliberate row click apart from a text-selection drag.
@@ -237,15 +237,29 @@ export default {
 				return
 			}
 			/**
-			 * @event click Emitted when a non-selectable row is clicked or middle-clicked (navigation). Payload: `(object, event)` — the row's object and the native click/auxclick event, for opening it in a new tab on a ctrl/cmd/shift or middle click.
+			 * @event click Emitted when a non-selectable row is clicked (navigation). Payload: `(object, event)` — the row's object and the native click event, for opening it in a new tab on a ctrl/cmd/shift click. A middle click emits `aux-click` instead.
 			 * @type {object} The row's object.
 			 */
 			this.$emit('click', this.object, event)
 		},
 
 		/**
-		 * Row-body middle click: emits `click` like a click on a
-		 * non-selectable row.
+		 * Row mousedown: record the press for the drag guard, and on a
+		 * non-selectable row keep a middle press from starting autoscroll.
+		 *
+		 * @param {MouseEvent} event The mousedown event.
+		 */
+		onRowMouseDown(event) {
+			this.onPointerDown(event)
+			if (!this.selectable) {
+				preventMiddleClickAutoscroll(event)
+			}
+		},
+
+		/**
+		 * Row-body middle click on a non-selectable row: emits `aux-click`, not
+		 * `click`, so an existing `click` listener that navigates never moves
+		 * the current tab away.
 		 *
 		 * @param {MouseEvent} event The auxclick event.
 		 */
@@ -253,7 +267,11 @@ export default {
 			if (this.selectable || !isRowMiddleClick(event)) {
 				return
 			}
-			this.$emit('click', this.object, event)
+			/**
+			 * @event aux-click Emitted when a non-selectable row is middle-clicked, for opening it in a new tab (see `openRowTarget`). Payload: `(object, event)` — the row's object and the native auxclick event.
+			 * @type {object} The row's object.
+			 */
+			this.$emit('aux-click', this.object, event)
 		},
 	},
 }

package/src/components/CnObjectSidebar/CnFilesTab.vue

@@ -153,7 +153,6 @@
 							v-if="file.id"
 							:href="showInFilesUrl(file)"
 							target="_blank"
-							rel="noopener noreferrer"
 							:closeAfterClick="true">
 							<template #icon>
 								<FolderOutline :size="20" />

package/src/components/CnPageRenderer/CnPageRenderer.vue

@@ -128,6 +128,7 @@
 				v-bind="{ ...$attrs, ...resolvedProps }"
 				@view="onRowOpen"
 				@rowClick="onRowOpen"
+				@rowAuxClick="onRowOpen"
 				@editOpen="onRowOpen"
 				@configure="showConfigModal = true">
 				<!-- This `<template v-for>` defines dynamic SLOTS, not a
@@ -203,6 +204,7 @@
 			v-bind="{ ...$attrs, ...resolvedProps }"
 			@view="onRowOpen"
 			@rowClick="onRowOpen"
+			@rowAuxClick="onRowOpen"
 			@editOpen="onRowOpen"
 			@configure="showConfigModal = true">
 			<!-- Dynamic slot definition, not a rendered list — see the note on

package/src/components/CnQuickFilterBar/CnQuickFilterBar.md

@@ -45,6 +45,8 @@ In `manifest.json` (the usual entry-point — CnIndexPage mounts the bar for you
 | `filter` | Object | yes | Filter map merged into the fetch when this tab is active. Same value syntax as `config.filter`: literals pass through; `"@route.<name>"` / `":<name>"` resolve from `$route.params`. |
 | `default` | Boolean | no | Pre-selected on mount; first tab with `default:true` (else index 0) is active |
 | `icon` | String | no | Optional MDI icon name shown next to the label |
+| `showCount` | Boolean | no | On a CnIndexPage: show how many records this tab matches. Tabs that filter the same single field share one grouped request. |
+| `count` | Number | no | A count you supply yourself, shown after the label. |
 
 ## Props
 
@@ -57,6 +59,7 @@ In `manifest.json` (the usual entry-point — CnIndexPage mounts the bar for you
 - `selectLabel` (String, default `'Filter'`) — accessible label / placeholder for the dropdown control.
 - `placeholder` (String) — placeholder text for the dropdown (falls back to `selectLabel`).
 - `maxVisible` (Number, default `0`) — chips mode only: how many pills render inline before the rest move behind one more chip, a `⋯` pill that opens a small panel of the hidden lenses (also as chips). `0` renders every tab. The visible set is the first `maxVisible` entries of `tabs`, so their declared order decides what stays in the strip; an active hidden tab moves its label and fill onto that chip. Manifest: `config.quickFilterMaxVisible`.
+- `counts` (Object or Array, default `null`): how many records each tab matches, keyed by tab index. A tab with a number shows it after its label. CnIndexPage fills this for tabs that set `showCount`.
 
 ### Events
 

package/src/components/CnQuickFilterBar/CnQuickFilterBar.vue

@@ -44,6 +44,10 @@
 					:size="16"
 					class="cn-quick-filter-bar__icon" />
 				<span class="cn-quick-filter-bar__label">{{ entry.tab.label }}</span>
+				<span
+					v-if="countOf(entry) !== null"
+					class="cn-quick-filter-bar__count"
+					data-testid="cn-quick-filter-count">{{ ' ' + countOf(entry) }}</span>
 			</button>
 		</div>
 		<!-- The overflow is a CHIP and not a toolbar button: it is one of the
@@ -96,6 +100,10 @@
 							:size="16"
 							class="cn-quick-filter-bar__icon" />
 						<span class="cn-quick-filter-bar__label">{{ entry.tab.label }}</span>
+						<span
+							v-if="countOf(entry) !== null"
+							class="cn-quick-filter-bar__count"
+							data-testid="cn-quick-filter-count">{{ ' ' + countOf(entry) }}</span>
 					</button>
 				</div>
 			</div>
@@ -231,6 +239,19 @@ export default {
 			default: 0,
 			validator: (v) => Number.isFinite(v) && v >= 0,
 		},
+
+		/**
+		 * How many records each tab matches, keyed by tab index (an array in
+		 * tab order works too). A tab with a number here shows it after its
+		 * label; a tab without one shows no count. A tab can also carry its
+		 * own `count`. `null` (the default) shows no counts at all.
+		 *
+		 * @type {{[index: number]: number}|Array<number|null>|null}
+		 */
+		counts: {
+			type: [Object, Array],
+			default: null,
+		},
 	},
 
 	emits: ['update:active-index', 'update:selected-indices'],
@@ -324,10 +345,19 @@ export default {
 		 * omitted — an empty selection already means "all".
 		 *
 		 * @return {Array<{label: string, index: number, icon: string}>}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-counts-on-filters-and-views
 		 */
 		dropdownOptions() {
 			return this.tabs
-				.map((tab, index) => ({ label: tab.label, icon: tab.icon, index, _empty: this.isEmptyFilter(tab) }))
+				.map((tab, index) => {
+					const count = this.countOf({ tab, index })
+					return {
+						label: count === null ? tab.label : `${tab.label} (${count})`,
+						icon: tab.icon,
+						index,
+						_empty: this.isEmptyFilter(tab),
+					}
+				})
 				.filter((o) => !o._empty)
 		},
 
@@ -346,6 +376,20 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * The count to show on a tab, or null for none: `counts[index]`
+		 * first, else the tab's own `count`.
+		 *
+		 * @param {{tab: object, index: number}} entry The tab and its index.
+		 * @return {number|null}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-counts-on-filters-and-views
+		 */
+		countOf(entry) {
+			const fromProp = this.counts ? this.counts[entry.index] : undefined
+			const value = (fromProp !== undefined && fromProp !== null) ? fromProp : entry.tab.count
+			return (typeof value === 'number' && Number.isFinite(value)) ? value : null
+		},
+
 		/**
 		 * Is tab `i` rendered active in chips mode (handles both single
 		 * `activeIndex` and `multiple` `selectedIndices`).
@@ -501,6 +545,21 @@ export default {
 	line-height: 1;
 }
 
+/* Inherits the chip's own text colour, so it stays readable on the active
+   (primary) fill as well as on the resting one. The count's text starts with
+   a space: the chip is a flex row, so the space is not drawn, but it keeps a
+   screen reader from reading label and count as one word. */
+.cn-quick-filter-bar__count {
+	min-width: 1.5em;
+	padding: 2px 6px;
+	border: 1px solid currentColor;
+	border-radius: var(--border-radius-pill, 10px);
+	font-size: 0.85em;
+	font-weight: 600;
+	line-height: 1;
+	text-align: center;
+}
+
 /* NcPopover wraps its trigger in a plain `<div class="v-popper">`, which as a
    block would drop the chip onto its own line under the strip. */
 .cn-quick-filter-bar > :deep(.v-popper) {

package/src/components/CnRelatedObjectsWidget/CnRelatedObjectsWidget.vue

@@ -322,6 +322,26 @@ const CORE_TABS = ['files', 'notes', 'tags', 'tasks', 'auditTrail', 'shares']
 /** One-time guard so the legacy-path deprecation warning logs only once. */
 let legacyWarned = false
 
+/**
+ * Schema titles by numeric schema id, shared by every widget on the page so a
+ * schema is asked for once. OpenRegister's `/uses` and `/used` answer
+ * `@self.schema` as that id ("120"), which is not a word anyone can read.
+ *
+ * @type {Map<string, Promise<string>>}
+ */
+const schemaTitleCache = new Map()
+
+/**
+ * Whether a value is a bare number, the way OpenRegister names a schema by id.
+ *
+ * @param {string|number|undefined|null} value The value.
+ * @return {boolean}
+ */
+function isNumericId(value) {
+	return (typeof value === 'number' && Number.isFinite(value))
+		|| (typeof value === 'string' && /^\d+$/.test(value.trim()))
+}
+
 /**
  * Leaf groups surfaced by the aggregated `/relations` endpoint, in tab order.
  * `responseKey` is the key in the `/relations` payload; `integrationId` is the
@@ -404,6 +424,14 @@ export default {
 		NcEmptyContent,
 	},
 
+	inject: {
+		/**
+		 * The host app's translator (CnAppRoot provides it), so a schema title
+		 * reads in the app's language. Without it a title reads as stored.
+		 */
+		cnTranslate: { default: () => (key) => key },
+	},
+
 	props: {
 		/** Widget title shown in the header. */
 		title: {
@@ -667,6 +695,8 @@ export default {
 			 * @type {HTMLInputElement|null}
 			 */
 			fileInputEl: null,
+			/** Schema titles by numeric schema id, for object rows. */
+			schemaTitles: {},
 			/** Whether any section/tab is currently fetching. */
 			loading: false,
 			/** True once the first fetch has completed (gates the empty state). */
@@ -1359,9 +1389,74 @@ export default {
 				self.name,
 				raw.summary,
 				raw.description,
-			].find((v) => typeof v === 'string' && v.trim() && !isUuid(v)) || self.schema || String(id)
-			const meta = self.schema || raw.schema || ''
-			return { id, label, meta: typeof meta === 'string' ? meta : '', raw }
+			].find((v) => typeof v === 'string' && v.trim() && !isUuid(v))
+			|| [raw.givenName, raw.familyName].filter((v) => typeof v === 'string' && v.trim()).join(' ')
+			// OpenRegister names the schema by numeric id: show its title, never the number.
+			const schema = this.schemaName(self.schema || raw.schema)
+			const finalLabel = label || schema || String(id)
+			return { id, label: finalLabel, meta: schema === finalLabel ? '' : schema, raw }
+		},
+
+		/**
+		 * How a row names its schema: the translated title for a numeric id
+		 * (empty until it is read, or when it cannot be), a slug as it is.
+		 *
+		 * @param {string|number|undefined|null} schema - `@self.schema` of the related object.
+		 * @return {string}
+		 */
+		schemaName(schema) {
+			if (isNumericId(schema)) {
+				const title = this.schemaTitles[String(schema).trim()]
+				return title ? this.cnTranslate(title) : ''
+			}
+			return typeof schema === 'string' ? schema : ''
+		},
+
+		/**
+		 * Read the titles of the numeric schema ids in these envelopes once,
+		 * before the rows are built, so no row shows a number first.
+		 *
+		 * @param {Array<object|null>} envelopes - The `{ results }` payloads.
+		 * @return {Promise<void>}
+		 */
+		async resolveSchemaTitles(envelopes) {
+			const ids = new Set()
+			for (const envelope of envelopes) {
+				for (const raw of ((envelope && envelope.results) || [])) {
+					const schema = (raw && (raw['@self'] || {}).schema) ?? (raw && raw.schema)
+					if (isNumericId(schema)) {
+						ids.add(String(schema).trim())
+					}
+				}
+			}
+			const titles = { ...this.schemaTitles }
+			await Promise.all([...ids].filter((id) => !(id in titles)).map(async (id) => {
+				if (!schemaTitleCache.has(id)) {
+					schemaTitleCache.set(id, this.fetchSchemaTitle(id))
+				}
+				titles[id] = await schemaTitleCache.get(id)
+			}))
+			this.schemaTitles = titles
+		},
+
+		/**
+		 * GET one schema's title; '' when it cannot be read.
+		 *
+		 * @param {string} id - The numeric schema id.
+		 * @return {Promise<string>}
+		 */
+		async fetchSchemaTitle(id) {
+			try {
+				const response = await fetch(generateUrl('/apps/openregister/api/schemas/{id}', { id }), { method: 'GET', headers: buildHeaders() })
+				if (!response.ok) {
+					return ''
+				}
+				const schema = await response.json()
+				const title = schema && (schema.title || schema.slug)
+				return typeof title === 'string' ? title : ''
+			} catch {
+				return ''
+			}
 		},
 
 		/**
@@ -1465,6 +1560,7 @@ export default {
 				const groups = []
 
 				if (this.showObjects) {
+					await this.resolveSchemaTitles([uses, used, contracts])
 					const objectItems = this.mergeObjectResults([uses, used, contracts])
 					groups.push({ key: 'objects', label: this.objectsLabel, icon: 'FileTreeOutline', integrationId: '', items: objectItems, total: objectItems.length })
 				}
@@ -1590,6 +1686,7 @@ export default {
 						calls.push(store.fetchContracts(type, id))
 					}
 					const groups = await Promise.all(calls)
+					await this.resolveSchemaTitles(groups.map((results) => ({ results: results || [] })))
 					const seen = new Set()
 					const merged = []
 					for (const group of groups) {

package/src/components/CnRowActions/CnRowActions.vue

@@ -41,6 +41,7 @@
 <script>
 import { NcActionButton, NcActionLink, NcActions } from '@nextcloud/vue'
 import { followItemActionLink, resolveItemActionLink } from '../../utils/actionLink.js'
+import { isModifiedClick } from '../../utils/linkNavigation.js'
 import { evaluateVisibleWhenLocal, isLocallyDecidableVisibleWhen } from '../../utils/visibleWhen.js'
 import { CnIcon } from '../CnIcon/index.js'
 
@@ -215,16 +216,20 @@ export default {
 		/**
 		 * A link entry was clicked: route a plain in-app click, leave the rest to
 		 * the browser, and emit `action` as a button would. The `handler` is not
-		 * called, since navigating is what the link already does.
+		 * called, since navigating is what the link already does. A modified
+		 * click opens a new tab, so nothing is emitted in this one.
 		 *
 		 * @param {object} action The action definition.
 		 * @param {object} link The resolved link.
 		 * @param {MouseEvent} event The click event.
 		 */
 		onLinkAction(action, link, event) {
+			if (isModifiedClick(event)) {
+				return
+			}
 			followItemActionLink(event, link, this.$router)
 			/**
-			 * @event action User picked an entry. Payload: the action's label and the row. A button entry has already run its `handler`; a link entry navigates instead.
+			 * @event action User picked an entry. Payload: the action's label and the row. A button entry has already run its `handler`; a link entry navigates instead, and a modified (new-tab) click on a link emits nothing.
 			 * @type {{ action: string, row: object|null }}
 			 */
 			this.$emit('action', { action: action.label, row: this.row })

package/src/components/CnSavedViewsControl/CnSavedViewsControl.vue

@@ -182,6 +182,18 @@ export default {
 			type: Number,
 			default: 3,
 		},
+
+		/**
+		 * How many records each view matches, keyed by view id (or slug). A
+		 * view with a number here shows it after its name; a view can also
+		 * carry its own `count`. `null` (the default) shows no counts.
+		 *
+		 * @type {{[viewId: string]: number}|null}
+		 */
+		counts: {
+			type: Object,
+			default: null,
+		},
 	},
 
 	emits: ['apply', 'delete-request', 'save-request'],
@@ -245,9 +257,42 @@ export default {
 		 *
 		 * @param {object} row The row from buildViewTree().
 		 * @return {string} The name.
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-counts-on-filters-and-views
 		 */
 		rowName(row) {
-			return `${'\u2007'.repeat(row.depth * 2)}${row.view.name}`
+			return `${'\u2007'.repeat(row.depth * 2)}${this.nameWithCount(row.view)}`
+		},
+
+		/**
+		 * The number of records a view matches, or null when none is known:
+		 * `counts[id]` (or `counts[slug]`) first, else the view's own `count`.
+		 *
+		 * @param {object} view The saved view.
+		 * @return {number|null}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-counts-on-filters-and-views
+		 */
+		countOf(view) {
+			const counts = this.counts || {}
+			let value = counts[view.id]
+			if (value === undefined || value === null) {
+				value = counts[view.slug]
+			}
+			if (value === undefined || value === null) {
+				value = view.count
+			}
+			return (typeof value === 'number' && Number.isFinite(value)) ? value : null
+		},
+
+		/**
+		 * A view's name, followed by its count when one is known.
+		 *
+		 * @param {object} view The saved view.
+		 * @return {string}
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-counts-on-filters-and-views
+		 */
+		nameWithCount(view) {
+			const count = this.countOf(view)
+			return count === null ? view.name : `${view.name} (${count})`
 		},
 
 		/**
@@ -259,11 +304,13 @@ export default {
 		 *
 		 * @param {object} row The row from buildViewTree().
 		 * @return {string} The accessible label.
+		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-counts-on-filters-and-views
 		 */
 		rowLabel(row) {
+			const viewName = this.nameWithCount(row.view)
 			const name = row.depth === 0
-				? row.view.name
-				: t('nextcloud-vue', '{name}, level {level}', { name: row.view.name, level: row.depth + 1 })
+				? viewName
+				: t('nextcloud-vue', '{name}, level {level}', { name: viewName, level: row.depth + 1 })
 
 			if (row.orphaned !== true) {
 				return name