@conduction/nextcloud-vue 2.142.0 → 2.144.0

package/dist/esm/components/CnTasksWidget/CnTasksWidget.vue.js

@@ -2,7 +2,7 @@ import script from './CnTasksWidget.vue2.js';
 import { render } from './CnTasksWidget.vue3.js';
 
 script.render = render;
-script.__scopeId = "data-v-9804876c";
+script.__scopeId = "data-v-7dc074ce";
 const __sfc_main = script;
 
 export { __sfc_main as default };

package/dist/esm/components/CnTasksWidget/CnTasksWidget.vue2.js

@@ -3,10 +3,13 @@ import axios__default from '@nextcloud/axios';
 import { s as showError, x as showSuccess } from '../../node_modules/@nextcloud/dialogs/dist/chunks/index.js';
 import { translate } from '@nextcloud/l10n';
 import { generateUrl } from '@nextcloud/router';
-import { NcActions, NcActionButton, NcAvatar, NcButton, NcLoadingIcon, NcTextField } from '@nextcloud/vue';
+import { NcActions, NcActionButton, NcActionCheckbox, NcAvatar, NcButton, NcLoadingIcon, NcTextField } from '@nextcloud/vue';
 import { ref, inject } 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 __sfc_main from '../CnStatusBadge/CnStatusBadge.vue.js';
 import __sfc_main$1 from '../CnTaskFormDialog/CnTaskFormDialog.vue.js';
 import __sfc_main$2 from './CnTaskWorkCard.vue.js';
@@ -86,12 +89,16 @@ var script = {
 
 	components: {
 		CheckCircle,
+		ChevronDown,
+		ChevronUp,
 		CircleOutline,
 		CnStatusBadge: __sfc_main,
 		CnTaskFormDialog: __sfc_main$1,
 		CnTaskWorkCard: __sfc_main$2,
+		FilterOutline,
 		NcActions,
 		NcActionButton,
+		NcActionCheckbox,
 		NcAvatar,
 		NcButton,
 		NcLoadingIcon,
@@ -246,6 +253,10 @@ var script = {
 	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. */
@@ -405,7 +416,26 @@ var script = {
 		 * @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') },
+			]
 		},
 
 		/**
@@ -786,6 +816,84 @@ var script = {
 		 * @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 || '')
 		},