@conduction/nextcloud-vue 2.143.0 → 2.145.0

package/src/components/CnTasksWidget/CnTasksWidget.vue

@@ -47,17 +47,42 @@
 			<table v-else class="cn-tasks-widget__table" data-testid="cn-tasks-widget-table">
 				<thead>
 					<tr>
-						<th scope="col">
-							{{ tr('Task') }}
-						</th>
-						<th scope="col">
-							{{ tr('Handler') }}
-						</th>
-						<th scope="col">
-							{{ tr('Task deadline') }}
-						</th>
-						<th scope="col">
-							{{ tr('Status') }}
+						<!-- `content.sortable` / `content.filterable`: a head sorts by its
+						     column and filters on its values (DqZaakTaken). -->
+						<th v-for="column in headColumns"
+							:key="column.key"
+							scope="col"
+							:aria-sort="headSort.key === column.key ? (headSort.dir === 'asc' ? 'ascending' : 'descending') : null"
+							:data-testid="`cn-tasks-widget-head-${column.key}`">
+							<span v-if="content.sortable === true || content.filterable === true" class="cn-tasks-widget__head">
+								<button v-if="content.sortable === true"
+									type="button"
+									class="cn-tasks-widget__head-sort"
+									:data-testid="`cn-tasks-widget-sort-${column.key}`"
+									@click="sortBy(column.key)">
+									{{ column.label }}
+									<ChevronUp v-if="headSort.key === column.key && headSort.dir === 'asc'" :size="14" />
+									<ChevronDown v-else :size="14" />
+								</button>
+								<template v-else>{{ column.label }}</template>
+								<NcActions v-if="content.filterable === true"
+									class="cn-tasks-widget__head-filter"
+									:aria-label="tr('Filter by {column}').replace('{column}', column.label)"
+									:data-testid="`cn-tasks-widget-filter-${column.key}`">
+									<template #icon>
+										<FilterOutline :size="14" />
+									</template>
+									<NcActionCheckbox v-for="option in headOptions(column.key)"
+										:key="option.value"
+										:modelValue="(headFilters[column.key] || []).includes(option.value)"
+										@update:modelValue="toggleHeadFilter(column.key, option.value)">
+										{{ option.label }}
+									</NcActionCheckbox>
+								</NcActions>
+							</span>
+							<template v-else>
+								{{ column.label }}
+							</template>
 						</th>
 						<th scope="col">
 							<span class="hidden-visually">{{ tr('Task actions') }}</span>
@@ -375,10 +400,13 @@ import axios from '@nextcloud/axios'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
-import { NcActionButton, NcActions, NcAvatar, NcButton, NcLoadingIcon, NcTextField } from '@nextcloud/vue'
+import { NcActionButton, NcActionCheckbox, NcActions, NcAvatar, NcButton, NcLoadingIcon, NcTextField } from '@nextcloud/vue'
 import { inject, ref } from 'vue'
 import CheckCircle from 'vue-material-design-icons/CheckCircle.vue'
+import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
+import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 import CircleOutline from 'vue-material-design-icons/CircleOutline.vue'
+import FilterOutline from 'vue-material-design-icons/FilterOutline.vue'
 import CnStatusBadge from '../CnStatusBadge/CnStatusBadge.vue'
 import CnTaskFormDialog from '../CnTaskFormDialog/CnTaskFormDialog.vue'
 import CnTaskWorkCard from './CnTaskWorkCard.vue'
@@ -458,12 +486,16 @@ export default {
 
 	components: {
 		CheckCircle,
+		ChevronDown,
+		ChevronUp,
 		CircleOutline,
 		CnStatusBadge,
 		CnTaskFormDialog,
 		CnTaskWorkCard,
+		FilterOutline,
 		NcActions,
 		NcActionButton,
+		NcActionCheckbox,
 		NcAvatar,
 		NcButton,
 		NcLoadingIcon,
@@ -618,6 +650,10 @@ export default {
 	data() {
 		return {
 			pollTimer: null,
+			/** The table's head sort, `{ key, dir }`; no key keeps open tasks first. */
+			headSort: { key: '', dir: 'asc' },
+			/** The table's head filters, `{ column: values[] }`. */
+			headFilters: {},
 			/** Uuids of the tasks a checkbox is completing, until the next read. */
 			completing: [],
 			/** Whether the table's create form is open. */
@@ -777,7 +813,26 @@ export default {
 		 * @spec openspec/changes/record-task-table/specs/record-task-table/spec.md#requirement-a-records-tasks-show-as-a-table-with-their-summary-and-new-task-in-the-header
 		 */
 		tableRows() {
-			return [...this.rows.filter((task) => task.isTerminal !== true), ...this.rows.filter((task) => task.isTerminal === true)]
+			const kept = this.rows.filter((task) => Object.entries(this.headFilters).every(([key, values]) => values.length === 0 || values.includes(this.headValue(task, key))))
+			if (this.headSort.key) {
+				const dir = this.headSort.dir === 'desc' ? -1 : 1
+				return [...kept].sort((a, b) => {
+					const x = this.headSortValue(a, this.headSort.key)
+					const y = this.headSortValue(b, this.headSort.key)
+					return (x < y ? -1 : (x > y ? 1 : 0)) * dir
+				})
+			}
+			return [...kept.filter((task) => task.isTerminal !== true), ...kept.filter((task) => task.isTerminal === true)]
+		},
+
+		/** @return {Array<{key: string, label: string}>} The table's data columns. */
+		headColumns() {
+			return [
+				{ key: 'title', label: this.tr('Task') },
+				{ key: 'handler', label: this.tr('Handler') },
+				{ key: 'due', label: this.tr('Task deadline') },
+				{ key: 'state', label: this.tr('Status') },
+			]
 		},
 
 		/**
@@ -1158,6 +1213,84 @@ export default {
 		 * @param {object} task The task row.
 		 * @return {string} The name.
 		 */
+		/**
+		 * A row's value in a column, as a head filter keeps it.
+		 *
+		 * @param {object} task The task row.
+		 * @param {string} key The column.
+		 * @return {string}
+		 */
+		headValue(task, key) {
+			if (key === 'title') {
+				return this.titleOf(task)
+			}
+			if (key === 'handler') {
+				return String(task.assignee || '')
+			}
+			if (key === 'due') {
+				return this.content.dueFormat === 'date' ? this.dueDate(task) : this.dueLabel(task)
+			}
+			return String(task.state || '')
+		},
+
+		/**
+		 * A row's value in a column, as its head sorts it: the deadline by date.
+		 *
+		 * @param {object} task The task row.
+		 * @param {string} key The column.
+		 * @return {string|number}
+		 */
+		headSortValue(task, key) {
+			if (key === 'due') {
+				const time = Date.parse(task.dueAt || task.dueDate || '')
+				return Number.isNaN(time) ? Number.POSITIVE_INFINITY : time
+			}
+			if (key === 'handler') {
+				return this.handlerName(task).toLowerCase()
+			}
+			if (key === 'state') {
+				return this.stateLabel(task).toLowerCase()
+			}
+			return this.titleOf(task).toLowerCase()
+		},
+
+		/**
+		 * The values a column's head filter offers, one per value the rows hold.
+		 *
+		 * @param {string} key The column.
+		 * @return {Array<{value: string, label: string}>}
+		 */
+		headOptions(key) {
+			const seen = new Map()
+			for (const task of this.rows) {
+				const value = this.headValue(task, key)
+				if (value !== '' && !seen.has(value)) {
+					seen.set(value, key === 'handler' ? this.handlerName(task) : (key === 'state' ? this.stateLabel(task) : value))
+				}
+			}
+			return [...seen].map(([value, label]) => ({ value, label }))
+		},
+
+		/**
+		 * Sort by a column: ascending first, then descending.
+		 *
+		 * @param {string} key The column.
+		 */
+		sortBy(key) {
+			this.headSort = this.headSort.key === key && this.headSort.dir === 'asc' ? { key, dir: 'desc' } : { key, dir: 'asc' }
+		},
+
+		/**
+		 * Keep or drop one value of a column's head filter.
+		 *
+		 * @param {string} key The column.
+		 * @param {string} value The value.
+		 */
+		toggleHeadFilter(key, value) {
+			const current = this.headFilters[key] || []
+			this.headFilters = { ...this.headFilters, [key]: current.includes(value) ? current.filter((v) => v !== value) : [...current, value] }
+		},
+
 		handlerName(task) {
 			return userDisplayName(task.assignee) || String(task.assignee || '')
 		},
@@ -1594,6 +1727,30 @@ function recordUuid(configured, objectId) {
 	font-size: 14px;
 }
 
+.cn-tasks-widget__head {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+}
+
+.cn-tasks-widget__head-sort {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	min-height: 0;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	color: inherit;
+	font: inherit;
+	cursor: pointer;
+}
+
+.cn-tasks-widget__head-filter {
+	--button-size: 22px;
+}
+
 .cn-tasks-widget__table th {
 	padding: 12px 16px;
 	background: color-mix(in srgb, var(--color-background-hover) 40%, var(--color-main-background));

package/src/components/CnWidgetObjectTable/CnWidgetObjectTable.vue

@@ -118,9 +118,10 @@ import CnConfirmDialog from '../../dialogs/CnConfirmDialog.vue'
 import CnDataTable from '../CnDataTable/CnDataTable.vue'
 import { getByPath, useEndpointSource } from '../../composables/useEndpointSource.js'
 import { useObjectStore } from '../../store/useObjectStore.js'
-import { dispatchAction, resolveObjectOpType } from '../../utils/actionsDispatcher.js'
+import { dispatchAction, interpolateActionTarget, resolveObjectOpType } from '../../utils/actionsDispatcher.js'
 import { resolveObjectTokenContext } from '../../utils/detailObjectContext.js'
 import { headerFilterParams, nextHeaderFilters, withSortableColumns } from '../../utils/headerFilterState.js'
+import { localHeaderRows } from '../../utils/localHeaderRows.js'
 import { pageFilter, pageSort } from '../../utils/pageControls.js'
 import { readPath } from '../../utils/readPath.js'
 import { dropOptionalUnresolved, hasUnresolvedTokens, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
@@ -869,9 +870,9 @@ export default {
 			if (this.endpointActive && this.columns.some((col) => col && typeof col === 'object' && col.labelPath)) {
 				inner.columns = this.labelledColumns(inner.columns || this.columns)
 			}
-			// Header sort and filter (`sortable`, `filterable`) only where the
-			// widget fetches its own rows: the server sorts and filters.
-			if (this.selfFetchActive && (this.sortable !== false || this.filterable)) {
+			// Header sort and filter (`sortable`, `filterable`): the server sorts
+			// and filters a self-fetch; endpoint rows are sorted and filtered here.
+			if ((this.selfFetchActive || this.endpointActive) && (this.sortable !== false || this.filterable)) {
 				inner.columns = withSortableColumns(inner.columns || this.columns, this.sortable)
 				inner.filterable = this.filterable
 				inner.activeFilters = this.headerFilters
@@ -889,7 +890,7 @@ export default {
 				}
 			}
 			if (this.endpointActive) {
-				inner.rows = this.endpointRows
+				inner.rows = localHeaderRows(this.endpointRows, this.headerSort, this.headerFilters)
 				inner.loading = this.epLoading || this.loading
 			}
 			if (this.rowRoute) {
@@ -1159,9 +1160,13 @@ export default {
 				return { ok: false, error: '' }
 			}
 			if (action.type !== 'object-op') {
-				const wrapped = (!action.type || action.type === 'handler')
-					? { ...action, args: [...(action.args || []), row] }
-					: action
+				let wrapped = action
+				if (!action.type || action.type === 'handler') {
+					wrapped = { ...action, args: [...(action.args || []), row] }
+				} else if (action.type === 'navigate' && row) {
+					// A row's navigate reads that row: `{objectId}` / `@objectId` is its id, `@object.<field>` its fields.
+					wrapped = { ...action, target: interpolateActionTarget(action.target, { objectId: row.id, object: row }) }
+				}
 				if (typeof this.cnDispatchAction === 'function') {
 					this.cnDispatchAction(wrapped)
 				} else {

package/src/components/CnWorkspaceFilterWidget/CnWorkspaceFilterWidget.vue

@@ -880,15 +880,23 @@ export default {
 		 */
 		/**
 		 * The value an input starts with: `content.default`, else the current
-		 * quarter or year for those types, else empty.
+		 * quarter or year for those types, else empty. For a quarter or year
+		 * input, `default: "previous"` is the last complete one (DqTermijnen
+		 * opens on the last complete quarter).
 		 *
 		 * @return {string}
 		 */
 		inputDefault() {
+			const today = new Date()
+			if (this.content.default === 'previous' && this.inputType === 'quarter') {
+				return quarterKey(new Date(today.getFullYear(), today.getMonth() - 3, 1))
+			}
+			if (this.content.default === 'previous' && this.inputType === 'year') {
+				return String(today.getFullYear() - 1)
+			}
 			if (this.content.default !== undefined && this.content.default !== null) {
 				return String(this.content.default)
 			}
-			const today = new Date()
 			if (this.inputType === 'quarter') {
 				return quarterKey(today)
 			}

package/src/composables/indexSources.js

@@ -1109,7 +1109,9 @@ function fillRowTemplate(template, row) {
  * template, "{case.title}") or `linkedField` (a path) fills the "Linked"
  * column, drawn when a kind declares one; `sourceConfig.linkedLabel` names it.
  * `subtitleTemplate` ("Case {identifier}", translated) fills the line under a
- * result, else `subtitleField`.
+ * result, else `subtitleField`; `subtitleResolve` (`{ field, schema, labelField,
+ * as }`) names a referenced object for it as `{as}`. `sourceConfig.titleWrap`
+ * wraps a long result title instead of cutting it.
  * `linkedUser: true` reads that value as a user id and shows the user's
  * display name. `sourceConfig.columnWidths` sets a width per column key.
  * The page's title and count line can name the term as `{term}`, and the
@@ -1226,9 +1228,32 @@ function searchSource(config = {}, context = {}) {
 		return ''
 	}
 
-	const subtitleOf = (kind, object) => {
+	// `subtitleResolve`: `{ field, schema, register?, labelField?, as }` names
+	// the object a reference points at, for the subtitle template as `{as}`.
+	const subtitleLabels = async (kind) => {
+		const resolve = kind.subtitleResolve
+		if (!resolve || !resolve.schema || !resolve.field) {
+			return null
+		}
+		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
+	}
+
+	const subtitleOf = (kind, object, labels = null) => {
 		if (kind.subtitleTemplate) {
-			return fillTemplate(translate(kind.subtitleTemplate), object)
+			const resolve = kind.subtitleResolve
+			const data = labels && resolve
+				? { ...object, [resolve.as || resolve.field]: labels.get(String(readPath(object, resolve.field) ?? '')) ?? '' }
+				: object
+			return fillTemplate(translate(kind.subtitleTemplate), data)
 		}
 		return kind.subtitleField ? String(readPath(object, kind.subtitleField) ?? '') : ''
 	}
@@ -1247,6 +1272,7 @@ function searchSource(config = {}, context = {}) {
 		const results = Array.isArray(body.results) ? body.results : (Array.isArray(body) ? body : [])
 		const labels = kind.statusResolve && kind.statusField ? await statusLabels(kind) : null
 		const userNames = kind.linkedUser === true ? await linkedUserNames(kind, results) : null
+		const subtitleNames = await subtitleLabels(kind)
 		return {
 			total: typeof body.total === 'number' ? body.total : results.length,
 			rows: results.map((object) => {
@@ -1261,7 +1287,7 @@ function searchSource(config = {}, context = {}) {
 					kindLabel: kind.label,
 					kindText: kindTextOf(kind, object),
 					title: String(readPath(object, kind.titleField || 'title') ?? object.name ?? id ?? ''),
-					subtitle: subtitleOf(kind, object),
+					subtitle: subtitleOf(kind, object, subtitleNames),
 					status,
 					linked: userNames ? (userNames.get(linkedOf(kind, object)) || linkedOf(kind, object)) : linkedOf(kind, object),
 					href: kind.href ? generateUrl(fillRowTemplate(kind.href, { ...object, id })) : '',
@@ -1372,7 +1398,7 @@ function searchSource(config = {}, context = {}) {
 		loading: () => state.loading,
 
 		columns: withColumnWidths([
-			{ key: 'title', label: t('nextcloud-vue', 'Result'), secondary: 'subtitle', sortable: true },
+			{ key: 'title', label: t('nextcloud-vue', 'Result'), secondary: 'subtitle', sortable: true, ...(config && config.titleWrap === true ? { cellClass: 'cn-cell--wrap' } : {}) },
 			// `kindAsText`: what one row is, as plain text ("Zaak", "Lantaarnpaal",
 			// DqZoekresultaten), instead of the plural kind as a pill.
 			config && config.kindAsText === true
@@ -1619,10 +1645,10 @@ function usersSource() {
 		loading: () => state.loading,
 
 		columns: [
-			{ key: 'displayname', label: t('nextcloud-vue', 'Employee'), secondary: 'function' },
-			{ key: 'roles', label: t('nextcloud-vue', 'Roles') },
-			{ key: 'email', label: t('nextcloud-vue', 'E-mail') },
-			{ key: 'today', label: t('nextcloud-vue', 'Today'), widget: 'badge', widgetProps: { colorMap: presenceColors, variant: 'warning' } },
+			{ key: 'displayname', label: t('nextcloud-vue', 'Employee'), secondary: 'function', sortable: true, cellClass: 'cn-cell--lead' },
+			{ key: 'roles', label: t('nextcloud-vue', 'Roles'), sortable: true },
+			{ key: 'email', label: t('nextcloud-vue', 'E-mail'), sortable: true },
+			{ key: 'today', label: t('nextcloud-vue', 'Today'), widget: 'badge', widgetProps: { colorMap: presenceColors, variant: 'warning' }, sortable: true },
 		],
 
 		searchFields: {

package/src/css/dialog.css

@@ -177,11 +177,14 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
 	color: var(--color-text-maxcontrast);
 }
 
-/* The saved-view edit and share forms start 22px under the subtitle, as
-   the Dq dialog boards draw a first field: the body's 16px gap and 6px. */
+/* A body starts 22px under the subtitle, as the Dq dialog boards draw a
+   first field: the header's foot and the body gap alone, so the saved-view
+   edit and share forms and the confirm sentence pad nothing on top
+   (r29 on :8080: 28, 28 and 26px with their own padding). */
 .cn-dialog-board .dialog__content .cn-edit-view,
-.cn-dialog-board .dialog__content .cn-share-view {
-	padding-top: 6px;
+.cn-dialog-board .dialog__content .cn-share-view,
+.cn-dialog-board .dialog__content .cn-confirm__confirm {
+	padding-top: 0;
 }
 
 /* The close button is a 36px circle. NcButton sizes an icon-only button by
@@ -216,9 +219,17 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
 /* A choice card with a checkbox (CnAssignDialog's toggles) is as tight as
    the board draws it (DqOverdragen, 76px for a label and a two-line note):
    10px 14px padding, the checkbox row at the 24px minimum target instead of
-   NcCheckboxRadioSwitch's 34px, the note at 1.2 line height. */
-.cn-dialog-board .cn-assign-dialog__toggle {
+   NcCheckboxRadioSwitch's 34px, the note at 1.2 line height; the card's
+   corners 8px and the label on an 18px line, as the board draws them. */
+/* `.dialog` outranks the component's scoped rule (class + attribute), which
+   loads after this sheet and kept 12px 14px and 12px corners on :8080 (r29). */
+.cn-dialog-board .dialog .cn-assign-dialog__toggle {
 	padding: 10px 14px;
+	border-radius: 8px;
+}
+
+.cn-dialog-board .cn-assign-dialog__toggle .checkbox-content__text {
+	line-height: 18px;
 }
 
 .cn-dialog-board .cn-assign-dialog__toggle .checkbox-radio-switch-checkbox .checkbox-content,
@@ -341,10 +352,14 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
    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. */
+   `labelOutside` keeps the app's own label and takes the same control. The
+   label's box starts where the field starts and the control 23px under it,
+   as on every dialog board (72 fields on 11 boards): the label at the font's
+   normal line, 21px of room plus the control's 2px focus inset, the label
+   4px above that room's end. */
 .cn-dialog-board .dialog__content .input-field:has(.input-field__label),
 .cn-dialog-board .dialog__content .textarea:has(.textarea__label) {
-	margin-block-start: 26px;
+	margin-block-start: 21px;
 }
 
 /* NcSelect's search is an NcInputField inside the select, and the select's
@@ -353,7 +368,7 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
    select makes the label's room instead.
    @spec openspec/changes/board-dialog-select-label-room/specs/board-dialog-select-label-room/spec.md#requirement-a-board-dialog-select-makes-room-for-its-raised-label */
 .cn-dialog-board .dialog__content .v-select:has(.input-field__label) {
-	margin-block-start: 26px;
+	margin-block-start: 21px;
 }
 
 /* A select in a form dialog sits under its label and over its help line
@@ -414,7 +429,7 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
 	color: var(--color-main-text);
 	font-size: var(--cn-field-label-size, 14px);
 	font-weight: 600;
-	line-height: 20px;
+	line-height: normal;
 	pointer-events: auto;
 	transition: none;
 }

package/src/css/kpi-card.css

@@ -547,6 +547,9 @@ a.cn-kpi-card--board * {
 .cn-kpi-card--board.cn-kpi-card--stacked:has(.cn-kpi-card__title--badge-end) {
 	--cn-kpi-stacked-padding: 20px 22px;
 	--cn-kpi-stacked-gap: 8px;
+	/* Its label is set at 600, as every board draws this tile (DqDashboard,
+	   DqMijnTeam, DqPersoonlijkeInstellingen); the plain stacked tile keeps 400. */
+	--cn-kpi-stacked-title-weight: 600;
 }
 
 .cn-kpi-card--board.cn-kpi-card--stacked:has(.cn-kpi-card__title--badge-end) .cn-kpi-card__value {