@conduction/nextcloud-vue 2.99.0 → 2.101.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'
@@ -648,6 +650,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 +662,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 +700,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 +712,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 +734,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 +789,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 +907,7 @@ function searchSource(config = {}) {
 				title: entry.title || '',
 				subtitle: entry.subline || '',
 				status: '',
+				linked: '',
 				href: entry.resourceUrl || '',
 			})),
 		}
@@ -806,6 +922,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 +964,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 +986,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 +1271,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 +1288,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/detail-page.css

@@ -525,3 +525,18 @@
 	align-items: center;
 	gap: 4px;
 }
+
+/* The tag after an admin-only entry in a board detail page's Actions menu
+   ("beheerder", DqZaakMeer): 12px muted text at the end of the row. The menu
+   opens outside the page, so the rule keys on the attribute CnDetailPage sets
+   only in the board look. */
+.action-button[data-cn-admin-tag]::after,
+.action-link[data-cn-admin-tag]::after {
+	content: attr(data-cn-admin-tag);
+	margin-inline-start: auto;
+	padding-inline: 12px 4px;
+	color: var(--color-text-maxcontrast);
+	font-size: 12px;
+	font-weight: 400;
+	white-space: nowrap;
+}

package/src/css/dialog.css

@@ -173,6 +173,54 @@
 	color: var(--color-main-text);
 }
 
+/* A Nextcloud text field or text area in a board dialog is the board's field:
+   its label above the control at 14px/600, the control 40px with a 1px grey
+   border and radius 8 (PlanItemDialog, DqWerkvoorraad). NcInputField draws
+   its border as a 65%-transparent shadow, which on the white dialog read as
+   an empty band, and floats its label inside the border. A field with
+   `labelOutside` keeps the app's own label and takes the same control. */
+.cn-dialog-board .dialog__content .input-field:has(.input-field__label),
+.cn-dialog-board .dialog__content .textarea:has(.textarea__label) {
+	margin-block-start: 26px;
+}
+
+/* The doubled class outranks NcInputField's raised-label rule (focused or
+   filled), which would pin the label's top as well and squash it. */
+.cn-dialog-board .dialog__content .input-field__input + .input-field__label.input-field__label,
+.cn-dialog-board .dialog__content .textarea__input + .textarea__label.textarea__label {
+	inset-block-start: auto;
+	inset-block-end: calc(100% + 4px);
+	inset-inline: 0 auto;
+	max-width: 100%;
+	margin: 0;
+	padding: 0;
+	background: none;
+	color: var(--color-main-text);
+	font-size: var(--cn-field-label-size, 14px);
+	font-weight: 600;
+	line-height: 20px;
+	pointer-events: auto;
+	transition: none;
+}
+
+.cn-dialog-board .dialog__content .input-field__main-wrapper {
+	height: calc(var(--cn-field-height, 40px) + 2 * var(--border-width-input-focused, 2px));
+}
+
+.cn-dialog-board .dialog__content .input-field__input,
+.cn-dialog-board .dialog__content .input-field__input:hover:not([disabled]),
+.cn-dialog-board .dialog__content .textarea__input,
+.cn-dialog-board .dialog__content .textarea__input:hover:not([disabled]) {
+	border-radius: 8px;
+	box-shadow: 0 0 0 1px var(--color-border-dark);
+	font-size: var(--cn-field-text-size, 15px);
+}
+
+.cn-dialog-board .dialog__content .input-field:has(.input-field__label) .input-field__input:not(:focus)::placeholder,
+.cn-dialog-board .dialog__content .textarea__input:not(:focus)::placeholder {
+	opacity: 1 !important;
+}
+
 /* Type-to-confirm: a labelled 40px field with a monospace value and a hint. */
 .cn-dialog__confirm-field {
 	display: flex;

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;