@conduction/nextcloud-vue 2.142.0 → 2.144.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/CnTimelineWidget/CnTimelineManage.vue

@@ -199,13 +199,18 @@
 					{{ t('nextcloud-vue', 'Goes on the timeline above, internal unless you make it visible') }}
 				</p>
 			</template>
+			<label v-if="textBlocks.length" class="cn-timeline-manage__draft-label" :for="blockId">
+				{{ t('nextcloud-vue', 'Template') }}
+			</label>
 			<NcSelect v-if="textBlocks.length"
 				v-model="chosenBlock"
 				class="cn-timeline-manage__filter"
 				:options="blockOptions"
 				:clearable="true"
 				label="label"
-				:inputLabel="t('nextcloud-vue', 'Template')"
+				:inputId="blockId"
+				:labelOutside="true"
+				:ariaLabelCombobox="t('nextcloud-vue', 'Template')"
 				:placeholder="t('nextcloud-vue', 'Write your own')"
 				data-testid="cn-timeline-block"
 				@update:modelValue="pickBlock" />
@@ -437,6 +442,10 @@ export default {
 			return `cn-timeline-draft-${this.uid}`
 		},
 
+		blockId() {
+			return `cn-timeline-block-${this.uid}`
+		},
+
 		/**
 		 * The kind options, the plain note first. A note is an entry with NO
 		 * kind, so "Note" filters on its absence.

package/src/css/dialog.css

@@ -168,13 +168,22 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
    goes to those tokens too (DqOverdragen, DqDocumentGenereren). */
 .cn-dialog-header__subtitle {
 	--nldesign-component-paragraph-font-size: 14px;
+	--nldesign-component-paragraph-line-height: 1.5;
 	--nldesign-component-paragraph-color: var(--color-text-maxcontrast);
 	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	margin: 4px 0 0;
 	font-size: 14px;
+	line-height: 1.5;
 	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. */
+.cn-dialog-board .dialog__content .cn-edit-view,
+.cn-dialog-board .dialog__content .cn-share-view {
+	padding-top: 6px;
+}
+
 /* The close button is a 36px circle. NcButton sizes an icon-only button by
    --button-size with `!important`, so the size goes through that; the radius
    also goes to the nldesign theme's button radius token. */
@@ -207,9 +216,15 @@ 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. */
+   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. */
 .cn-dialog-board .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,
@@ -539,6 +554,15 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
 	}
 }
 
+/* A choice legend in a board dialog is 14px/600 on the normal line height, as
+   the dialog boards draw it (DqDocumentGenereren "Sjabloon").
+   @spec openspec/changes/board-choice-legend-type/specs/board-choice-legend-type/spec.md#requirement-a-board-dialogs-choice-legend-is-14px-600-on-the-normal-line-height */
+.cn-dialog-board .cn-choice-cards__legend {
+	font-size: 14px;
+	font-weight: 600;
+	line-height: normal;
+}
+
 /* Above a phone the boards top-align a dialog (DqNieuweZaak, DqUwWachtrij,
    DqVolgendeStap: the top edge sits about 90px down at 1440 wide) instead of
    centring it. `--cn-dialog-top` moves it. */

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 {