@conduction/nextcloud-vue 2.100.0 → 2.102.0

package/src/composables/indexSources.js

@@ -11,6 +11,8 @@ import HandBackRight from 'vue-material-design-icons/HandBackRight.vue'
 import LightningBolt from 'vue-material-design-icons/LightningBolt.vue'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 import { formatRelativeDate } from '../utils/boardDate.js'
+import { fetchReferenceObjects } from '../utils/boardReferenceColumns.js'
+import { fillTemplate } from '../utils/fillTemplate.js'
 import { FLOW_RUN_ERROR_STATUSES, flowRunStatuses } from '../utils/flowRunStatus.js'
 import { fetchGroupMembers, fetchPresence, fetchStatuses } from '../utils/nextcloudDirectory.js'
 import { readPath } from '../utils/readPath.js'
@@ -528,6 +530,15 @@ function tasksSource() {
 		 */
 		loading: () => !!store.loading,
 
+		// The inbox pages: the page sends `limit` and `offset` and draws the
+		// pager from the datastore total.
+		pages: true,
+
+		/**
+		 * @return {number} The datastore total, independent of the page size.
+		 */
+		total: () => Number(store.total) || 0,
+
 		/**
 		 * Count the inbox for a config without touching the rows on screen,
 		 * for a quick-filter tab with `showCount`.
@@ -648,6 +659,10 @@ function readRowsPath(body, path) {
  * requested: page-config keys must never become query parameters. The list
  * stays empty and one console error names the page.
  *
+ * A quick filter with `showCount` is counted with `count(config)`: the same
+ * request with that tab's filter, its total read at `sourceConfig.totalPath`
+ * (`total` by default), else the number of rows the answer holds.
+ *
  * @return {object} The source adapter.
  * @spec openspec/changes/index-endpoint-source/specs/index-page/spec.md#requirement-an-index-page-can-list-rows-from-an-app-endpoint
  */
@@ -656,6 +671,36 @@ function endpointSource() {
 	let seq = 0
 	let warned = false
 
+	/**
+	 * The query parameters for a config: every key but the url and the paths,
+	 * empty values left out, a list joined by commas.
+	 *
+	 * @param {object} rest The config without `url`, `rowsPath` and `totalPath`.
+	 * @return {object} The parameters.
+	 */
+	const paramsOf = (rest) => {
+		const params = {}
+		for (const [key, value] of Object.entries(rest)) {
+			if (value === undefined || value === null || value === '') {
+				continue
+			}
+			params[key] = Array.isArray(value) ? value.join(',') : (typeof value === 'object' ? JSON.stringify(value) : value)
+		}
+		return params
+	}
+
+	/**
+	 * Whether a config can be requested: it names a url and is not the page
+	 * config handed over in its place.
+	 *
+	 * @param {object} config The config.
+	 * @return {boolean}
+	 */
+	const requestable = (config) => {
+		const url = config && config.url
+		return typeof url === 'string' && url !== '' && !Object.hasOwn(config, 'entitySource')
+	}
+
 	return {
 		/**
 		 * Fetch the rows.
@@ -664,10 +709,9 @@ function endpointSource() {
 		 * @return {Promise<void>} Resolves when loaded; a failed request leaves no rows and rethrows.
 		 */
 		load: async (config) => {
-			const { url, rowsPath, ...rest } = config || {}
+			const { url, rowsPath, totalPath, ...rest } = config || {}
 			const mine = ++seq
-			const pageConfig = Boolean(config && Object.hasOwn(config, 'entitySource'))
-			if (typeof url !== 'string' || url === '' || pageConfig) {
+			if (!requestable(config)) {
 				state.rows = []
 				if (!warned) {
 					warned = true
@@ -677,13 +721,7 @@ function endpointSource() {
 				}
 				return
 			}
-			const params = {}
-			for (const [key, value] of Object.entries(rest)) {
-				if (value === undefined || value === null || value === '') {
-					continue
-				}
-				params[key] = Array.isArray(value) ? value.join(',') : (typeof value === 'object' ? JSON.stringify(value) : value)
-			}
+			const params = paramsOf(rest)
 			state.loading = true
 			try {
 				const { default: axios } = await import('@nextcloud/axios')
@@ -705,6 +743,29 @@ function endpointSource() {
 			}
 		},
 
+		/**
+		 * Count the rows for a config without touching the rows on screen, for
+		 * a quick-filter tab with `showCount`.
+		 *
+		 * @param {object} config The page's source config with the tab's filter merged in.
+		 * @return {Promise<number>} The total, or NaN when nothing can be requested.
+		 */
+		count: async (config) => {
+			if (!requestable(config)) {
+				return Number.NaN
+			}
+			const { url, rowsPath, totalPath, ...rest } = config
+			const { default: axios } = await import('@nextcloud/axios')
+			const res = await axios.get(generateUrl(url), { params: paramsOf(rest) })
+			const body = res ? res.data : null
+			const total = body && typeof body === 'object' && !Array.isArray(body) ? readRowsPath(body, totalPath || 'total') : undefined
+			if (typeof total === 'number' && Number.isFinite(total)) {
+				return total
+			}
+			const rows = Array.isArray(body) ? body : readRowsPath(body, rowsPath || 'results')
+			return Array.isArray(rows) ? rows.length : Number.NaN
+		},
+
 		/**
 		 * @return {Array<object>} The rows the endpoint returned.
 		 */
@@ -737,39 +798,102 @@ function fillRowTemplate(template, row) {
  * and its count (DqZoekresultaten).
  *
  * `sourceConfig.kinds` lists what is searched:
- * `{ id, label, register, schema, titleField?, subtitleField?, statusField?, href?, limit? }`
+ * `{ id, label, register, schema, titleField?, subtitleField?, statusField?, statusResolve?, linkedField?, linkedTemplate?, href?, limit? }`
  * for objects (OpenRegister's `_search`, so the reader sees what they may
  * read), or `{ id, label, files: true, limit? }` for the reader's files
  * (Nextcloud's unified search). The term is `sourceConfig.term`, else the
  * address's `?q=` (or `sourceConfig.termQuery`). A kind that fails shows no
  * rows and no count; the others still answer.
  *
+ * The kind's `label` goes through the app's translate (the "Soort" cell and
+ * the quick filters). `statusResolve: { register?, schema, labelField? }`
+ * reads `statusField` as a reference and shows the referenced object's label
+ * (`labelField`, else `title`, then `name`); the status column is a pill,
+ * coloured by `sourceConfig.statusColorMap`. `linkedTemplate` (a field
+ * template, "{case.title}") or `linkedField` (a path) fills the "Linked"
+ * column, drawn when a kind declares one; `sourceConfig.linkedLabel` names it.
+ * The page's title and count line can name the term as `{term}`, and the
+ * count is the active kind's total. Kind, link and status are filterable.
+ *
  * @param {object} [config] The page's source config.
+ * @param {object} [context] The page's helpers.
+ * @param {Function} [context.translate] The app's translate.
  * @return {object} The source adapter.
  * @spec openspec/changes/index-search-source/specs/index-page/spec.md#requirement-an-index-page-can-search-several-schemas-and-files
  */
-function searchSource(config = {}) {
+function searchSource(config = {}, context = {}) {
+	const translate = typeof context.translate === 'function' ? context.translate : (text) => text
 	const kinds = (Array.isArray(config && config.kinds) ? config.kinds : [])
 		.filter((kind) => kind && typeof kind.id === 'string' && kind.id !== '' && (kind.files === true || (kind.register && kind.schema)))
-	const state = reactive({ rows: [], totals: {}, loading: false, kind: 'all', term: '' })
+		.map((kind) => ({ ...kind, label: translate(String(kind.label || kind.id)) }))
+	const hasLinked = kinds.some((kind) => kind.linkedTemplate || kind.linkedField)
+	const state = reactive({ rows: [], totals: {}, loading: false, kind: 'all', term: '', filters: {} })
 	let seq = 0
 
+	/**
+	 * The labels of the objects a kind's status points at, by id: the
+	 * referenced schema read once per search.
+	 *
+	 * @param {object} kind The kind with `statusResolve`.
+	 * @return {Promise<Map<string, string>>} Labels by id; empty when it cannot be read.
+	 */
+	const statusLabels = async (kind) => {
+		const resolve = kind.statusResolve
+		if (!resolve || !resolve.schema) {
+			return new Map()
+		}
+		const objects = await fetchReferenceObjects({ register: resolve.register || kind.register, schema: resolve.schema }).catch(() => [])
+		const labels = new Map()
+		for (const object of objects) {
+			const id = object.id || object.uuid || (object['@self'] && object['@self'].id)
+			const label = readPath(object, resolve.labelField || 'title') ?? object.name
+			if (id !== undefined && label !== undefined && label !== null) {
+				labels.set(String(id), String(label))
+			}
+		}
+		return labels
+	}
+
+	/**
+	 * What a row shows in the Linked column.
+	 *
+	 * @param {object} kind The row's kind.
+	 * @param {object} object The found object.
+	 * @return {string}
+	 */
+	const linkedOf = (kind, object) => {
+		if (kind.linkedTemplate) {
+			return fillTemplate(translate(kind.linkedTemplate), object)
+		}
+		if (kind.linkedField) {
+			const value = readPath(object, kind.linkedField)
+			return value === undefined || value === null ? '' : String(value)
+		}
+		return ''
+	}
+
 	const searchObjects = async (axios, kind, term) => {
 		const url = generateUrl('/apps/openregister/api/objects/{register}/{schema}', { register: kind.register, schema: kind.schema })
 		const res = await axios.get(url, { params: { _search: term, _limit: kind.limit || 20 } })
 		const body = (res && res.data) || {}
 		const results = Array.isArray(body.results) ? body.results : (Array.isArray(body) ? body : [])
+		const labels = kind.statusResolve && kind.statusField ? await statusLabels(kind) : null
 		return {
 			total: typeof body.total === 'number' ? body.total : results.length,
 			rows: results.map((object) => {
 				const id = object.id || object.uuid || (object['@self'] && object['@self'].id)
+				const rawStatus = kind.statusField ? readPath(object, kind.statusField) : undefined
+				const status = rawStatus === undefined || rawStatus === null
+					? ''
+					: (labels ? (labels.get(String(rawStatus)) || '') : String(rawStatus))
 				return {
 					id: `${kind.id}:${id}`,
 					kind: kind.id,
 					kindLabel: kind.label,
 					title: String(readPath(object, kind.titleField || 'title') ?? object.name ?? id ?? ''),
 					subtitle: kind.subtitleField ? String(readPath(object, kind.subtitleField) ?? '') : '',
-					status: kind.statusField ? String(readPath(object, kind.statusField) ?? '') : '',
+					status,
+					linked: linkedOf(kind, object),
 					href: kind.href ? generateUrl(fillRowTemplate(kind.href, { ...object, id })) : '',
 					object,
 				}
@@ -792,6 +916,7 @@ function searchSource(config = {}) {
 				title: entry.title || '',
 				subtitle: entry.subline || '',
 				status: '',
+				linked: '',
 				href: entry.resourceUrl || '',
 			})),
 		}
@@ -806,6 +931,17 @@ function searchSource(config = {}) {
 		 */
 		load: async (cfg) => {
 			state.kind = cfg && typeof cfg.kind === 'string' ? cfg.kind : 'all'
+			// The header filters on Kind, Linked and Status narrow the answer
+			// already fetched; they do not search again.
+			const filters = {}
+			for (const key of ['kindLabel', 'linked', 'status']) {
+				const value = cfg && cfg[key]
+				const values = (Array.isArray(value) ? value : (value === undefined || value === null || value === '' ? [] : [value])).map(String)
+				if (values.length > 0) {
+					filters[key] = values
+				}
+			}
+			state.filters = filters
 			const query = typeof window !== 'undefined' ? new URLSearchParams(window.location.search) : null
 			const term = String((cfg && cfg.term) || (query && query.get((cfg && cfg.termQuery) || 'q')) || '').trim()
 			const mine = ++seq
@@ -837,7 +973,20 @@ function searchSource(config = {}) {
 		/**
 		 * @return {Array<object>} The results of the active kind, or all of them.
 		 */
-		rows: () => (state.kind === 'all' ? state.rows : state.rows.filter((row) => row.kind === state.kind)),
+		rows: () => (state.kind === 'all' ? state.rows : state.rows.filter((row) => row.kind === state.kind))
+			.filter((row) => Object.entries(state.filters).every(([key, values]) => values.includes(String(row[key])))),
+
+		/**
+		 * @return {string} The term searched for, for a `{term}` in the title or count line.
+		 */
+		term: () => state.term,
+
+		/**
+		 * @return {number} The active kind's total, or every kind's together on All.
+		 */
+		total: () => (state.kind === 'all'
+			? Object.values(state.totals).reduce((sum, value) => sum + value, 0)
+			: (state.totals[state.kind] || 0)),
 
 		/**
 		 * @return {boolean} Whether a search is in flight.
@@ -846,8 +995,14 @@ function searchSource(config = {}) {
 
 		columns: [
 			{ key: 'title', label: t('nextcloud-vue', 'Result'), secondary: 'subtitle' },
-			{ key: 'kindLabel', label: t('nextcloud-vue', 'Kind') },
-			{ key: 'status', label: t('nextcloud-vue', 'Status') },
+			{ key: 'kindLabel', label: t('nextcloud-vue', 'Kind'), enum: kinds.map((kind) => kind.label) },
+			...(hasLinked ? [{ key: 'linked', label: config.linkedLabel ? translate(config.linkedLabel) : t('nextcloud-vue', 'Linked') }] : []),
+			{
+				key: 'status',
+				label: t('nextcloud-vue', 'Status'),
+				widget: 'badge',
+				widgetProps: { colorMap: (config && config.statusColorMap) || {} },
+			},
 		],
 
 		quickFilters: kinds.length > 0
@@ -1125,10 +1280,11 @@ export const indexSources = {
  *
  * @param {string} name The source name from `config.source`.
  * @param {object} [config] The page's source config, for a source that builds its tabs from it.
+ * @param {object} [context] The page's helpers a source may use, such as `translate` (the app's catalogue).
  *
  * @return {object|null} The adapter, or null when the name is not registered.
  */
-export function resolveIndexSource(name, config) {
+export function resolveIndexSource(name, config, context) {
 	const key = String(name || '')
 	if (!key) {
 		return null
@@ -1141,7 +1297,7 @@ export function resolveIndexSource(name, config) {
 		return null
 	}
 
-	return factory(config || {})
+	return factory(config || {}, context || {})
 }
 
 /**

package/src/composables/useEndpointSource.js

@@ -155,7 +155,7 @@ export function interpolateUrlTokens(str, ctx) {
  *
  * @param {{url: string, method?: string, params?: object}} config The endpointSource block.
  * @param {{objectId?: (string|number), object?: object, workspace?: object, config?: object, range?: object}} [ctx] The token context.
- * @return {{url: string, method: ('GET'|'POST'), params: object, blocked: boolean}} The resolved request.
+ * @return {{url: string, method: ('GET'|'POST'), params: object, blocked: boolean, responsePath: string}} The resolved request.
  */
 export function resolveEndpointRequest(config, ctx) {
 	const cfg = config || {}
@@ -163,8 +163,30 @@ export function resolveEndpointRequest(config, ctx) {
 	const resolved = resolveFilterTokens(cfg.params || {}, ctx)
 	const params = dropOptionalUnresolved(resolved)
 	const method = String(cfg.method || 'GET').toUpperCase() === 'POST' ? 'POST' : 'GET'
-	const blocked = hasUnresolvedTokens(params) || hasEmptyPathSegment(cfg.url || '', url)
-	return { url, method, params, blocked }
+	const responsePath = resolveResponsePath(cfg.responsePath, ctx)
+	const blocked = hasUnresolvedTokens(params) || hasEmptyPathSegment(cfg.url || '', url) || responsePath === null
+	return { url, method, params, blocked, responsePath: responsePath || '' }
+}
+
+/**
+ * Resolve the tokens in a `responsePath` (`phaseDays.@workspace.measure`), so a
+ * page control can choose which part of one response a widget reads. Null when
+ * a token resolved to nothing and left an empty path segment: the read waits
+ * instead of plucking the wrong part.
+ *
+ * @param {string|undefined} path The configured path.
+ * @param {object} [ctx] The token context.
+ * @return {string|null} The resolved path, '' for none, null when blocked.
+ */
+function resolveResponsePath(path, ctx) {
+	if (typeof path !== 'string' || path === '') {
+		return ''
+	}
+	if (path.indexOf('@') === -1) {
+		return path
+	}
+	const resolved = interpolateUrlTokens(path, ctx)
+	return resolved.split('.').some((segment) => segment === '') ? null : resolved
 }
 
 /**
@@ -309,7 +331,7 @@ export async function fetchEndpointSource(config, ctx, opts) {
 		return null
 	}
 	const body = await fetchSharedResponse(request, opts)
-	const payload = getByPath(body, config.responsePath)
+	const payload = getByPath(body, request.responsePath)
 	return payload === undefined ? null : payload
 }
 
@@ -378,7 +400,7 @@ export function useEndpointSource(source, options) {
 			u: request.url,
 			m: request.method,
 			p: request.params,
-			r: cfg.responsePath || '',
+			r: request.responsePath,
 			b: request.blocked,
 		})
 	})
@@ -418,7 +440,7 @@ export function useEndpointSource(source, options) {
 			if (seq !== fetchSeq) {
 				return
 			}
-			const payload = getByPath(body, cfg.responsePath)
+			const payload = getByPath(body, request.responsePath)
 			data.value = payload === undefined ? null : payload
 		} catch (e) {
 			if (seq !== fetchSeq) {

package/src/css/index-page.css

@@ -73,6 +73,123 @@
 	min-height: 300px;
 }
 
+/* The map with its numbered list (`mapConfig.list`, DqZakenKaart): one framed
+   card, the map taking the larger share and the list beside it, stacking
+   under a narrow width. */
+.cn-index-page__map-card {
+	display: flex;
+	flex: 1;
+	flex-wrap: wrap;
+	gap: 16px;
+	min-height: 0;
+	padding: 16px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--cn-board-card-radius, 12px);
+	background: var(--color-main-background);
+}
+
+.cn-index-page__map-card .cn-index-page__map {
+	flex: 3 1 420px;
+	min-width: 0;
+}
+
+.cn-index-page__map-side {
+	display: flex;
+	flex: 2 1 320px;
+	flex-direction: column;
+	gap: 12px;
+	min-width: 0;
+	overflow-y: auto;
+}
+
+.cn-index-page__map-list {
+	display: flex;
+	flex-direction: column;
+	margin: 0;
+	padding: 0;
+	border: 1px solid var(--color-border);
+	border-radius: 10px;
+	list-style: none;
+}
+
+.cn-index-page__map-item {
+	display: flex;
+	gap: 12px;
+	padding: 12px 14px;
+}
+
+.cn-index-page__map-item + .cn-index-page__map-item {
+	border-top: 1px solid var(--color-border);
+}
+
+.cn-index-page__map-item--active {
+	background: var(--color-primary-element-light);
+}
+
+.cn-index-page__map-number {
+	display: inline-flex;
+	flex: none;
+	align-items: center;
+	justify-content: center;
+	width: 26px;
+	height: 26px;
+	border-radius: 13px;
+	background: var(--color-primary-element);
+	color: var(--color-primary-element-text);
+	font-size: 13px;
+	font-weight: 700;
+}
+
+.cn-index-page__map-item--active .cn-index-page__map-number {
+	background: var(--color-primary-element-light-text);
+}
+
+.cn-index-page__map-text {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	gap: 4px;
+	min-width: 0;
+}
+
+.cn-index-page__map-title {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: none;
+	color: var(--color-main-text);
+	font: inherit;
+	font-size: 15px;
+	font-weight: 600;
+	line-height: 1.35;
+	text-align: start;
+	cursor: pointer;
+}
+
+.cn-index-page__map-sub,
+.cn-index-page__map-due {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
+.cn-index-page__map-pills {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 6px;
+}
+
+.cn-index-page__map-missing {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 8px;
+	padding: 14px;
+	border: 1px solid var(--color-border);
+	border-radius: 10px;
+	font-size: 14px;
+}
+
 /* Opt-in folder navigation pane (left of the list). */
 .cn-index-page__folder-pane {
 	flex: 0 0 240px;

package/src/css/look-board-index.css

@@ -128,6 +128,16 @@
 	gap: 8px;
 }
 
+/* `quickFilterPlacement: "toolbar"` (DqTeamwachtrij): the chips take the room
+   the Filter button and the view switch leave on row 1, so the three stay on
+   one row in the column beside a side panel; the chips that do not fit move
+   into the overflow chip (CnQuickFilterBar `fit`) instead of pushing the
+   buttons onto a row of their own. */
+.cn-look-board.cn-index-page--quick-filters-toolbar .cn-actions-bar--board > .cn-actions-bar__row--views > .cn-quick-filter-bar {
+	flex: 1 1 0;
+	min-width: 0;
+}
+
 /* Row 2: the search field and the active filters on a line of their own. */
 .cn-look-board .cn-actions-bar--board > .cn-actions-bar__row--search {
 	display: flex;

package/src/css/look-board.css

@@ -99,6 +99,50 @@
 	padding-inline-start: 56px;
 }
 
+/* The dashboard header as the board draws it (DqTermijnen): the actions on
+   the title's row, the description and its segmented period under both, at
+   the header's full width. As two flex columns the description sat in the
+   title's column only, so a long period group wrapped under its text and the
+   actions dropped to a line of their own. The title column never shrinks
+   below its longest word; the actions wrap their buttons first.
+   @spec openspec/changes/dashboard-board-header-row/specs/dashboard-page/spec.md#requirement-the-board-dashboard-header-keeps-its-actions-on-the-title-row */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-dashboard-page__header {
+	display: grid;
+	grid-template-columns: minmax(min-content, 1fr) auto;
+	align-items: start;
+	column-gap: 16px;
+	row-gap: 0;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-dashboard-page__header-left {
+	display: contents;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-dashboard-page__title-row {
+	grid-column: 1;
+	grid-row: 1;
+	align-self: center;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-dashboard-page__header-left > :not(.cn-dashboard-page__title-row) {
+	grid-column: 1 / -1;
+}
+
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-dashboard-page__header > .cn-dashboard-page__header-actions {
+	grid-column: 2;
+	grid-row: 1;
+	justify-content: flex-end;
+	margin-inline-start: 0;
+}
+
+/* A stat tile in the board's KPI row carries the board's own 18px 20px inset
+   (`cn-kpi-card--board`), so the card-fit cell adds none of its own: with
+   both the label sat 29px from the tile's top and 37px from its side, and
+   the row stood about 1.4 times the board's height. */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-dashboard-page__kpi-cell .cn-dashboard-page__card-fit .cn-widget-wrapper__content:has(> .cn-kpi-card--board.cn-kpi-card--stacked) {
+	padding: 0;
+}
+
 /* ---- The header button ------------------------------------------------- */
 .cn-look-board .cn-index-page__header-buttons:not(.cn-look-nextcloud *),
 .cn-look-board .cn-detail-page__header-actions:not(.cn-look-nextcloud *),

package/src/index.js

@@ -158,6 +158,7 @@ export {
 	CnGaugeWidget,
 	CnGaugeWidgetForm,
 	CnGraphCanvas,
+	CnGroupedCardsWidget,
 	CnGuardianHome,
 	CnHeaderWidget,
 	CnHeaderWidgetForm,