@conduction/nextcloud-vue 2.62.0 → 2.64.0

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

@@ -1,16 +1,20 @@
 import axios__default from '@nextcloud/axios';
-import { translate } from '@nextcloud/l10n';
+import { translate, translatePlural } from '@nextcloud/l10n';
 import { generateUrl } from '@nextcloud/router';
 import { NcLoadingIcon, NcCheckboxRadioSwitch } from '@nextcloud/vue';
+import FilterIcon from 'vue-material-design-icons/Filter.vue';
+import FilterOutline from 'vue-material-design-icons/FilterOutline.vue';
+import __sfc_main$1 from './CnColumnFilterPopover.vue.js';
 import { useClickDragGuard } from '../../composables/useClickDragGuard.js';
+import { columnFilterDef, columnFilterState, isColumnFilterActive, columnFilterParams, clearedColumnFilterParams, isColumnSortable } from '../../utils/columnFilters.js';
 import { resolveHref, openRowTarget, followLinkClick } from '../../utils/linkNavigation.js';
 import { nextSortState } from '../../utils/multiColumnSort.js';
 import { preventMiddleClickAutoscroll, isRowMiddleClick, isNewTabHandled, markNewTabHandled, isNewTabClick } from '../../utils/rowAuxClick.js';
 import { DEFAULT_ROW_INDICATOR_CAP, resolveRowIndicators } from '../../utils/rowIndicators.js';
 import { columnsFromSchema } from '../../utils/schema.js';
 import __sfc_main from '../CnCellRenderer/CnCellRenderer.vue.js';
-import __sfc_main$1 from '../CnIcon/CnIcon.vue.js';
-import __sfc_main$2 from '../CnLockIndicator/CnLockIndicator.vue.js';
+import __sfc_main$2 from '../CnIcon/CnIcon.vue.js';
+import __sfc_main$3 from '../CnLockIndicator/CnLockIndicator.vue.js';
 
 /**
  * CnDataTable — Generic sortable data table for list views.
@@ -68,8 +72,11 @@ var script = {
 		NcLoadingIcon,
 		NcCheckboxRadioSwitch,
 		CnCellRenderer: __sfc_main,
-		CnIcon: __sfc_main$1,
-		CnLockIndicator: __sfc_main$2,
+		CnColumnFilterPopover: __sfc_main$1,
+		CnIcon: __sfc_main$2,
+		CnLockIndicator: __sfc_main$3,
+		FilterIcon,
+		FilterOutline,
 	},
 
 	inject: {
@@ -100,7 +107,13 @@ var script = {
 		 * reader is looking. `columnsFromSchema` fills it from the JSON Schema property
 		 * description automatically, so schema-driven tables get it for free.
 		 *
-		 * @type {Array<{key: string, label: string, description: string, sortable: boolean, width: string, class: string, cellClass: string}|string>}
+		 * `secondary` draws a second, muted line under the cell's value: a field
+		 * key (`"number"`), a template with `{field}` placeholders
+		 * (`"{number} · {requester}"`, dotted paths allowed), or a function of
+		 * the row. Empty fields leave their placeholder blank; a line that
+		 * resolves to nothing is not drawn.
+		 *
+		 * @type {Array<{key: string, label: string, description: string, sortable: boolean, width: string, class: string, cellClass: string, secondary: (string|((row: object) => string))}|string>}
 		 */
 		columns: {
 			type: Array,
@@ -438,9 +451,39 @@ var script = {
 			type: Boolean,
 			default: false,
 		},
+
+		/**
+		 * Show a filter button in every header whose column can filter (see
+		 * `columnFilterDef`): enum, boolean, text, number, date and reference
+		 * columns backed by a schema property. A column opts out with
+		 * `filterable: false`. Applying a filter emits `column-filter`; the
+		 * host owns the filter state and passes it back as `activeFilters`.
+		 *
+		 * @spec openspec/changes/table-header-sort-and-filter/specs/cn-data-table/spec.md#requirement-every-backed-column-filters-from-its-header
+		 */
+		filterable: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * The active filter map, `{ paramKey: values[] }`: the same map the
+		 * facet sidebar writes, so a header filter and a sidebar filter on one
+		 * field show the same state.
+		 */
+		activeFilters: {
+			type: Object,
+			default: () => ({}),
+		},
+
+		/** Register slug a reference column's filter searches in when the column names none. */
+		filterRegister: {
+			type: String,
+			default: '',
+		},
 	},
 
-	emits: ['row-click', 'row-aux-click', 'row-context-menu', 'select', 'select-all', 'sort', 'view-all'],
+	emits: ['row-click', 'row-aux-click', 'row-context-menu', 'select', 'select-all', 'sort', 'view-all', 'column-filter'],
 
 	setup() {
 		// Tell a deliberate row click apart from a text-selection drag.
@@ -449,6 +492,10 @@ var script = {
 
 	data() {
 		return {
+			/** Key of the column whose filter panel is open, or ''. */
+			openFilterKey: '',
+			/** The open filter button's bounding rect, to place the panel. */
+			filterAnchorRect: null,
 			/**
 			 * Resolved aggregate-column values, keyed by `String(row[rowKey])`
 			 * then by column key. Populated by `loadAggregates()` for columns
@@ -566,8 +613,12 @@ var script = {
 						overrides: this.columnOverrides,
 					})
 				: this.columns;
+			// Every column backed by a schema property sorts unless it says
+			// `sortable: false`; object columns from a manifest used to need an
+			// explicit flag and so could not sort at all.
+			const withSort = (c) => (c && typeof c === 'object' ? { ...c, sortable: isColumnSortable(c, this.schema) } : c);
 			if (!(cols || []).some((c) => typeof c === 'string')) {
-				return cols || []
+				return (cols || []).map(withSort)
 			}
 			const schemaCols = this.schema
 				? columnsFromSchema(this.schema, { overrides: this.columnOverrides })
@@ -575,7 +626,7 @@ var script = {
 			const byKey = new Map(schemaCols.map((c) => [c.key, c]));
 			return (cols || []).map((c) => {
 				if (typeof c !== 'string') {
-					return c
+					return withSort(c)
 				}
 				return byKey.get(c) || { key: c, label: c, sortable: true }
 			})
@@ -616,6 +667,40 @@ var script = {
 			return links
 		},
 
+		/**
+		 * The column whose filter panel is open, or null.
+		 *
+		 * @return {object|null}
+		 */
+		openFilterColumn() {
+			if (!this.openFilterKey) {
+				return null
+			}
+			return this.effectiveColumns.find((c) => c && c.key === this.openFilterKey && this.filterDefFor(c)) || null
+		},
+
+		/**
+		 * One chip per column with an active header filter.
+		 *
+		 * @return {Array<{key: string, col: object, text: string, removeLabel: string}>}
+		 */
+		activeColumnFilterChips() {
+			if (!this.filterable) {
+				return []
+			}
+			return this.effectiveColumns
+				.filter((c) => c && this.isColumnFiltered(c))
+				.map((col) => {
+					const label = this.translateLabel(col.label);
+					const text = translate('nextcloud-vue', '{column}: {value}', { column: label, value: this.columnFilterSummary(col) });
+					return { key: col.key, col, text, removeLabel: translate('nextcloud-vue', 'Remove filter {column}', { column: label }) }
+				})
+		},
+
+		activeFiltersLabel() {
+			return translate('nextcloud-vue', 'Active filters')
+		},
+
 		effectiveSortKeys() {
 			if (this.sortKeys && this.sortKeys.length > 0) {
 				return this.sortKeys
@@ -999,6 +1084,36 @@ var script = {
 		 * @param {object} col The column definition.
 		 * @return {unknown} The value handed to the slot / CnCellRenderer.
 		 */
+		/**
+		 * The secondary line of a cell, from `col.secondary`: a function is
+		 * called with the row; a string with `{field}` placeholders is a
+		 * template filled from the row (dotted paths allowed); any other
+		 * string is a field key. Returns '' when there is nothing to draw.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-table-column-carries-a-secondary-line
+		 * @param {object} row The row.
+		 * @param {object} col The column definition.
+		 * @return {string} The secondary text, or ''.
+		 */
+		secondaryValue(row, col) {
+			const spec = col?.secondary;
+			if (typeof spec === 'function') {
+				const out = spec(row);
+				return out === null || out === undefined ? '' : String(out)
+			}
+			if (typeof spec !== 'string' || spec === '') {
+				return ''
+			}
+			const asText = (v) => (v === null || v === undefined ? '' : String(v));
+			if (spec.includes('{')) {
+				const filled = spec.replace(/\{([^}]+)\}/g, (_, key) => asText(this.getCellValue(row, key.trim())));
+				// A template whose every field is empty leaves only separators:
+				// nothing worth a line.
+				return /[\p{L}\p{N}]/u.test(filled) ? filled.trim() : ''
+			}
+			return asText(this.getCellValue(row, spec))
+		},
+
 		cellValue(row, col) {
 			if (col && col.aggregate) {
 				const cached = this.aggregateValues[String(row[this.rowKey])];
@@ -1287,6 +1402,135 @@ var script = {
 		 * @param {string} key Column key.
 		 * @param {MouseEvent} [event] The originating click event.
 		 */
+		/**
+		 * The filter definition for a column, or null when it does not filter
+		 * (header filters off, `filterable: false`, or nothing to filter on).
+		 *
+		 * @param {object} col The column.
+		 * @return {object|null}
+		 */
+		filterDefFor(col) {
+			if (!this.filterable || !col) {
+				return null
+			}
+			return columnFilterDef(col, this.schema)
+		},
+
+		columnFilterStateFor(col) {
+			return columnFilterState(this.filterDefFor(col), this.activeFilters)
+		},
+
+		isColumnFiltered(col) {
+			const def = this.filterDefFor(col);
+			return !!def && isColumnFilterActive(def, this.activeFilters)
+		},
+
+		filterButtonLabel(col) {
+			const column = this.translateLabel(col.label);
+			return this.isColumnFiltered(col)
+				? translate('nextcloud-vue', 'Filter {column}, active', { column })
+				: translate('nextcloud-vue', 'Filter {column}', { column })
+		},
+
+		/**
+		 * Short text for an active filter: the picked labels, or the range.
+		 *
+		 * @param {object} col The column.
+		 * @return {string}
+		 */
+		columnFilterSummary(col) {
+			const def = this.filterDefFor(col);
+			const state = this.columnFilterStateFor(col);
+			if (!def) {
+				return ''
+			}
+			if (def.kind === 'enum') {
+				const labels = Object.fromEntries((def.options || []).map((o) => [o.value, o.label]));
+				return state.values.map((v) => this.translateLabel(labels[v] || v)).join(', ')
+			}
+			if (def.kind === 'reference') {
+				return translatePlural('nextcloud-vue', '{count} selected', '{count} selected', state.values.length, { count: state.values.length })
+			}
+			if (def.kind === 'number' || def.kind === 'date') {
+				if (state.from && state.to) {
+					return translate('nextcloud-vue', '{from} to {to}', { from: state.from, to: state.to })
+				}
+				return state.from
+					? translate('nextcloud-vue', 'from {value}', { value: state.from })
+					: translate('nextcloud-vue', 'up to {value}', { value: state.to })
+			}
+			if (def.kind === 'boolean') {
+				return state.value === 'true' ? translate('nextcloud-vue', 'Yes') : translate('nextcloud-vue', 'No')
+			}
+			return state.value
+		},
+
+		/**
+		 * Open or close a column's filter panel under its button.
+		 *
+		 * @param {object} col The column.
+		 * @param {Event} event The click.
+		 * @return {void}
+		 */
+		toggleColumnFilter(col, event) {
+			if (this.openFilterKey === col.key) {
+				this.closeColumnFilter();
+				return
+			}
+			const target = event && event.currentTarget;
+			this.filterAnchorRect = target && typeof target.getBoundingClientRect === 'function'
+				? target.getBoundingClientRect()
+				: null;
+			this.openFilterKey = col.key;
+		},
+
+		/**
+		 * Close the open panel and give focus back to its button.
+		 *
+		 * @return {void}
+		 */
+		closeColumnFilter() {
+			const key = this.openFilterKey;
+			this.openFilterKey = '';
+			if (!key) {
+				return
+			}
+			this.$nextTick(() => {
+				const ref = this.$refs['filterButton-' + key];
+				const button = Array.isArray(ref) ? ref[0] : ref;
+				if (button && typeof button.focus === 'function') {
+					button.focus();
+				}
+			});
+		},
+
+		/**
+		 * Apply a panel's state: emit the query parameters it stands for.
+		 *
+		 * @param {object} col The column.
+		 * @param {object} state The panel state.
+		 * @return {void}
+		 * @spec openspec/changes/table-header-sort-and-filter/specs/cn-data-table/spec.md#requirement-a-header-filter-speaks-the-sidebars-query-language
+		 */
+		applyColumnFilter(col, state) {
+			const def = this.filterDefFor(col);
+			if (def) {
+				/**
+				 * @event column-filter A header filter was applied or cleared.
+				 * @type {{ key: string, params: object }} `params` maps each query parameter the column owns to its values; an empty list clears it.
+				 */
+				this.$emit('column-filter', { key: col.key, params: columnFilterParams(def, state) });
+			}
+			this.closeColumnFilter();
+		},
+
+		clearColumnFilter(col) {
+			const def = this.filterDefFor(col);
+			if (def) {
+				this.$emit('column-filter', { key: col.key, params: clearedColumnFilterParams(def) });
+			}
+		},
+
 		onHeaderClick(key, event) {
 			this.applySort(key, !!(event && event.shiftKey));
 		},