@conduction/nextcloud-vue 2.80.0 → 2.81.0

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

@@ -22,8 +22,8 @@ import __sfc_main$1 from '../CnIcon/CnIcon.vue.js';
 import { readUserPreference, writeUserPreference } from '../../composables/useUserPreferences.js';
 import { dispatchAction } from '../../utils/actionsDispatcher.js';
 import { preventMiddleClickAutoscroll, isNewTabClick, isRowMiddleClick } from '../../utils/rowAuxClick.js';
-import { crumbsFor, ACTIONS_NEEDING_THE_FILES_PAGE, joinPath } from './filesBrowser.js';
-import { sortNodesByColumn, normaliseFileColumns, visibleFileColumns, attributePropertiesFor, fileColumnValue } from './filesBrowserColumns.js';
+import { crumbsFor, ACTIONS_NEEDING_THE_FILES_PAGE, joinPath, hostActionApplies } from './filesBrowser.js';
+import { sortNodesByColumn, normaliseFileColumns, visibleFileColumns, facetCounts, nodeMatchesFacets, groupNodes, attributePropertiesFor, fileColumnValue } from './filesBrowserColumns.js';
 
 let uploadSeq = 0;
 
@@ -99,9 +99,11 @@ var script = {
 		 * dispatched through the page's action runner with the node's
 		 * `fileId`, `fileName` and `path` merged into an `open-modal` action's
 		 * props (or appended as the node to a `handler` action's args). Folders
-		 * get none. `icon` is an MDI icon name.
+		 * get none. `icon` is an MDI icon name. `visibleIf` offers the action
+		 * only on some files: `extension` (a list, no case) and `mime` (a list;
+		 * `image/` or `image/*` names the family), each that is named must hold.
 		 *
-		 * @type {Array<{id: string, label: string, icon?: string, type?: string, target?: string, props?: object, handler?: string, args?: Array}>}
+		 * @type {Array<{id: string, label: string, icon?: string, type?: string, target?: string, props?: object, handler?: string, args?: Array, visibleIf?: {extension?: string[], mime?: string[]}}>}
 		 */
 		rowActions: {
 			type: Array,
@@ -321,6 +323,52 @@ var script = {
 			default: 'files-browser-columns',
 		},
 
+		/**
+		 * The host's actions on a selection of files, declared like
+		 * `rowActions`. With at least one, every file row (never a folder or a
+		 * linked row) gets a checkbox, the header a select-all, and a bar with
+		 * these actions shows while files are selected. An `open-modal`
+		 * action's props gain `files` (each `{ fileId, fileName, path }`) and
+		 * `fileIds`; a `handler` action's args gain the selected nodes. The
+		 * selection clears after an action and when another folder opens.
+		 *
+		 * @type {Array<{id: string, label: string, icon?: string, type?: string, target?: string, props?: object, handler?: string, args?: Array}>}
+		 */
+		bulkActions: {
+			type: Array,
+			default: () => [],
+		},
+
+		/**
+		 * The key of a declared column to group the files on: a heading row
+		 * per value, in the order each is first met, with its count. Files
+		 * with no value come last under `groupEmptyLabel`; folders stay above.
+		 * Empty (the default) does not group.
+		 */
+		groupBy: {
+			type: String,
+			default: '',
+		},
+
+		/** The heading of the group of files with no value in the `groupBy` column. */
+		groupEmptyLabel: {
+			type: String,
+			default: () => translate('nextcloud-vue', 'Other'),
+		},
+
+		/**
+		 * Keys of declared columns to filter on. Each gets a chip per value in
+		 * use among the folder's files (a list counts per entry) with how many
+		 * files carry it; chosen chips keep the files with any chosen value of
+		 * that column, across every column with a choice.
+		 *
+		 * @type {string[]}
+		 */
+		facets: {
+			type: Array,
+			default: () => [],
+		},
+
 		/** Label of the toolbar's Columns chooser. */
 		columnsLabel: {
 			type: String,
@@ -343,6 +391,10 @@ var script = {
 			sortAsc: true,
 			/** The host's per-file data for `row` columns, by file id. */
 			resolvedRowData: null,
+			/** File ids (as strings) of the selected files. */
+			selectedIds: [],
+			/** Chosen facet values by column key. */
+			facetSelections: {},
 			/**
 			 * The column keys this user chose to see, or null while they have
 			 * chosen nothing. Never a source of membership: it is intersected
@@ -473,6 +525,149 @@ var script = {
 			return visibleFileColumns(this.declaredColumns, this.visibleColumnKeys)
 		},
 
+		/**
+		 * The declared columns by key, for grouping and facets.
+		 *
+		 * @return {object} Resolved columns by key.
+		 */
+		columnsByKey() {
+			const byKey = {};
+			this.declaredColumns.forEach((column) => {
+				byKey[column.key] = column;
+			});
+			return byKey
+		},
+
+		/**
+		 * How many cells a row has, for a heading or message spanning the row.
+		 *
+		 * @return {number} The column count.
+		 */
+		columnCount() {
+			return this.renderedColumns.length + 2 + (this.bulkEnabled ? 1 : 0)
+		},
+
+		/**
+		 * Whether the host gave bulk actions, which turns on the selection.
+		 *
+		 * @return {boolean} True with at least one bulk action.
+		 * @spec openspec/changes/files-browser-hosts-a-documents-list/specs/files-browser/spec.md
+		 */
+		bulkEnabled() {
+			return Array.isArray(this.bulkActions) && this.bulkActions.length > 0
+		},
+
+		/**
+		 * The listed folders, in display order.
+		 *
+		 * @return {Array<object>} The folder nodes.
+		 */
+		folderNodes() {
+			return this.sorted.filter((node) => this.isFolder(node))
+		},
+
+		/**
+		 * The listed files, in display order, before the filter.
+		 *
+		 * @return {Array<object>} The file nodes.
+		 */
+		fileNodes() {
+			return this.sorted.filter((node) => !this.isFolder(node))
+		},
+
+		/**
+		 * Whether any facet value is chosen.
+		 *
+		 * @return {boolean} True when the filter narrows the list.
+		 */
+		facetActive() {
+			return Object.values(this.facetSelections).some((values) => Array.isArray(values) && values.length > 0)
+		},
+
+		/**
+		 * The chips: per facet column, the values in use with their counts.
+		 *
+		 * @return {Array<{key: string, label: string, values: Array<{value: string, count: number, active: boolean}>}>} The facets.
+		 * @spec openspec/changes/files-browser-hosts-a-documents-list/specs/files-browser/spec.md
+		 */
+		facetGroups() {
+			const keys = Array.isArray(this.facets) ? this.facets : [];
+			return keys
+				.map((key) => this.columnsByKey[key])
+				.filter(Boolean)
+				.map((column) => {
+					const chosen = this.facetSelections[column.key] || [];
+					return {
+						key: column.key,
+						label: this.columnLabel(column),
+						values: facetCounts(this.fileNodes, column, this.resolvedRowData)
+							.map((entry) => ({ ...entry, active: chosen.includes(entry.value) })),
+					}
+				})
+				.filter((facet) => facet.values.length > 0)
+		},
+
+		/**
+		 * The files the filter keeps.
+		 *
+		 * @return {Array<object>} The file nodes.
+		 */
+		filteredFiles() {
+			if (!this.facetActive) {
+				return this.fileNodes
+			}
+			return this.fileNodes.filter((node) => nodeMatchesFacets(node, this.facetSelections, this.columnsByKey, this.resolvedRowData))
+		},
+
+		/**
+		 * What the table body renders, in order: folders, then the files,
+		 * under a heading per group when the host groups.
+		 *
+		 * @return {Array<{key: string, group?: object, node?: object}>} The rows.
+		 * @spec openspec/changes/files-browser-hosts-a-documents-list/specs/files-browser/spec.md
+		 */
+		displayRows() {
+			const rows = this.folderNodes.map((node) => ({ key: node.source, node }));
+			const column = this.groupBy ? this.columnsByKey[this.groupBy] : null;
+			if (!column) {
+				this.filteredFiles.forEach((node) => rows.push({ key: node.source, node }));
+				return rows
+			}
+			groupNodes(this.filteredFiles, column, this.resolvedRowData).forEach((group) => {
+				const label = group.value === null ? this.groupEmptyLabel : group.value;
+				rows.push({ key: `group-${group.value === null ? '' : group.value}`, group: { label, count: group.nodes.length } });
+				group.nodes.forEach((node) => rows.push({ key: node.source, node }));
+			});
+			return rows
+		},
+
+		/**
+		 * The ids of the files a select-all takes: the files the filter keeps.
+		 *
+		 * @return {string[]} File ids as strings.
+		 */
+		selectableIds() {
+			return this.filteredFiles.map((node) => String(node.fileid))
+		},
+
+		/**
+		 * Whether every selectable file is selected.
+		 *
+		 * @return {boolean} True when all are.
+		 */
+		allSelected() {
+			return this.selectableIds.length > 0 && this.selectableIds.every((id) => this.selectedIds.includes(id))
+		},
+
+		/**
+		 * Whether some file is selected.
+		 *
+		 * @return {boolean} True when one or more are.
+		 */
+		someSelected() {
+			return this.selectedIds.length > 0
+		},
+
 		/**
 		 * The column the table is currently sorted on, or null when the sort
 		 * key belongs to no declared column.
@@ -521,6 +716,11 @@ var script = {
 			this.currentPath = next;
 			this.refresh();
 		},
+
+		// A selection belongs to the folder it was made in.
+		currentPath() {
+			this.selectedIds = [];
+		},
 	},
 
 	mounted() {
@@ -1417,6 +1617,104 @@ var script = {
 			return generateUrl('/f/{fileid}', { fileid: node.fileid })
 		},
 
+		/**
+		 * Whether a file is selected.
+		 *
+		 * @param {object} node The file.
+		 * @return {boolean} True when selected.
+		 */
+		isSelected(node) {
+			return this.selectedIds.includes(String(node.fileid))
+		},
+
+		/**
+		 * Select or deselect one file.
+		 *
+		 * @param {object} node The file.
+		 * @param {boolean} checked Whether it is now selected.
+		 * @return {void}
+		 */
+		toggleSelected(node, checked) {
+			const id = String(node.fileid);
+			const rest = this.selectedIds.filter((entry) => entry !== id);
+			this.selectedIds = checked ? [...rest, id] : rest;
+		},
+
+		/**
+		 * Select every file the filter keeps, or none.
+		 *
+		 * @param {boolean} checked Whether to select all.
+		 * @return {void}
+		 */
+		toggleAll(checked) {
+			this.selectedIds = checked ? [...this.selectableIds] : [];
+		},
+
+		/** Drop the selection. */
+		clearSelection() {
+			this.selectedIds = [];
+		},
+
+		/**
+		 * Run one of the host's bulk actions on the selected files, then drop
+		 * the selection. An `open-modal` action's props gain `files` and
+		 * `fileIds`; a `handler` action's args gain the selected nodes.
+		 *
+		 * @param {object} action The declared bulk action.
+		 * @return {void}
+		 * @spec openspec/changes/files-browser-hosts-a-documents-list/specs/files-browser/spec.md
+		 */
+		runBulkAction(action) {
+			if (!action || typeof action !== 'object') {
+				return
+			}
+			const nodes = this.fileNodes.filter((node) => this.selectedIds.includes(String(node.fileid)));
+			const type = action.type || 'handler';
+			let wrapped = action;
+			if (type === 'open-modal') {
+				const files = nodes.map((node) => ({ fileId: node.fileid, fileName: node.basename, path: node.path }));
+				wrapped = { ...action, props: { ...(action.props || {}), files, fileIds: files.map((file) => file.fileId) } };
+			} else if (type === 'handler') {
+				wrapped = { ...action, args: [...(action.args || []), nodes] };
+			}
+			this.selectedIds = [];
+			if (typeof this.cnDispatchAction === 'function') {
+				this.cnDispatchAction(wrapped);
+				return
+			}
+			dispatchAction(wrapped, { router: this.$router || null });
+		},
+
+		/**
+		 * Choose or drop one facet value.
+		 *
+		 * @param {string} key The column key.
+		 * @param {string} value The value.
+		 * @return {void}
+		 */
+		toggleFacet(key, value) {
+			const chosen = this.facetSelections[key] || [];
+			const next = chosen.includes(value) ? chosen.filter((entry) => entry !== value) : [...chosen, value];
+			this.facetSelections = { ...this.facetSelections, [key]: next };
+		},
+
+		/** Drop every facet choice. */
+		clearFacets() {
+			this.facetSelections = {};
+		},
+
+		/**
+		 * The host's own row actions that belong on this file: those whose
+		 * `visibleIf` (extension, mime) holds for it, or that name none.
+		 *
+		 * @param {object} node The file.
+		 * @return {Array<object>} The actions to offer.
+		 * @spec openspec/changes/files-browser-hosts-a-documents-list/specs/files-browser/spec.md
+		 */
+		hostActionsFor(node) {
+			return this.rowActions.filter((action) => hostActionApplies(action, node))
+		},
+
 		/**
 		 * Run one of the host's declared actions on a file.
 		 *