@conduction/nextcloud-vue 2.100.0 → 2.102.0

package/src/components/CnFilesBrowser/CnFilesBrowser.vue

@@ -113,6 +113,22 @@
 					{{ hostLabel(action) }}
 				</NcActionButton>
 			</NcActions>
+			<!-- The host's own buttons in the bar ("Vraag een bestand aan een
+			     partij", DqZaakDocumenten), dispatched like a New-menu entry with
+			     the current folder; `#header-actions` adds anything else. -->
+			<NcButton v-for="action in headerActions"
+				:key="`header-${action.id}`"
+				:variant="action.variant === 'primary' ? 'primary' : 'secondary'"
+				:disabled="folder === null"
+				:data-testid="`cn-files-browser-header-action-${action.id}`"
+				@click="runHostAction(action, null)">
+				<template v-if="action.icon" #icon>
+					<CnIcon :name="action.icon" :size="20" />
+				</template>
+				{{ hostLabel(action) }}
+			</NcButton>
+			<!-- @slot header-actions Buttons in the bar, before the upload button. -->
+			<slot name="header-actions" />
 			<!-- A plain upload as its own button, when the host names it
 			     (`uploadButton`). It takes the primary place and the New
 			     menu steps back beside it. -->
@@ -147,6 +163,31 @@
 			</li>
 		</ul>
 
+		<!-- The review summary (`reviewSummary`): how many files are reviewed,
+		     a bar in the review tones and a legend with the count per value. -->
+		<div v-if="review && review.total > 0 && !loading && error === ''"
+			class="cn-files-browser__review"
+			data-testid="cn-files-browser-review">
+			<div class="cn-files-browser__review-head">
+				<strong class="cn-files-browser__review-title">{{ reviewTitle }}</strong>
+				<span v-if="reviewSubtitle" class="cn-files-browser__review-sub">{{ reviewSubtitle }}</span>
+			</div>
+			<span class="cn-files-browser__review-bar" role="img" :aria-label="reviewTitle">
+				<span v-for="segment in review.segments"
+					v-show="segment.count > 0 && !isOpenValue(segment.value)"
+					:key="segment.value"
+					:class="`cn-files-browser__review-part cn-files-browser__review-part--${segment.tone}`"
+					:style="{ width: `${segment.share}%` }" />
+			</span>
+			<ul class="cn-files-browser__review-legend">
+				<li v-for="segment in review.segments" :key="segment.value" data-testid="cn-files-browser-review-entry">
+					<span :class="`cn-files-browser__review-dot cn-files-browser__review-part--${segment.tone}`" aria-hidden="true" />
+					{{ hostLabel(segment) }}
+					<strong>{{ segment.count }}</strong>
+				</li>
+			</ul>
+		</div>
+
 		<!-- The host's filter: per declared column, a chip per value in use
 		     with how many files carry it. Chips narrow the list. -->
 		<div v-if="facetGroups.length > 0 && !loading && error === ''"
@@ -330,6 +371,9 @@
 								:class="`cn-files-browser__col-${column.key}`"
 								:data-testid="`cn-files-browser-cell-${column.key}`">
 								<span v-if="column.key === 'name'" class="cn-files-browser__name">{{ node.basename }}</span>
+								<span v-if="column.key === 'name' && nameSecondaryOf(node)"
+									class="cn-files-browser__name-secondary"
+									data-testid="cn-files-browser-name-secondary">{{ nameSecondaryOf(node) }}</span>
 								<template v-else-if="column.key === 'size'">
 									{{ isFolder(node) ? '' : formatSize(node.size) }}
 								</template>
@@ -347,6 +391,16 @@
 									:row="node" />
 							</td>
 							<td class="cn-files-browser__col-actions" @click.stop @auxclick.stop>
+								<!-- The host's one visible button on a file ("Beoordelen"),
+								     primary while the row still asks for it. -->
+								<NcButton v-if="rowButton && !isFolder(node) && hostActionApplies(rowButton, node)"
+									:variant="rowButtonPrimary(node) ? 'primary' : 'secondary'"
+									class="cn-files-browser__row-button"
+									:aria-label="t('nextcloud-vue', '{action}: {name}', { action: hostLabel(rowButton), name: node.basename })"
+									data-testid="cn-files-browser-row-button"
+									@click="runHostAction(rowButton, node)">
+									{{ hostLabel(rowButton) }}
+								</NcButton>
 								<NcActions :forceMenu="true" :ariaLabel="t('nextcloud-vue', 'Actions for {name}', { name: node.basename })">
 									<NcActionButton
 										v-for="action in actionsFor(node)"
@@ -548,6 +602,14 @@
 			<Upload :size="16" />
 			{{ dropHintLabel }}
 		</p>
+		<!-- The host's own line under the list ("Elk bestand wordt bij het
+		     uploaden op virussen gescand", DqDocumentenBeheer), apart from
+		     the drop hint. -->
+		<p v-if="footnote && !loading && error === ''"
+			class="cn-files-browser__footnote"
+			data-testid="cn-files-browser-footnote">
+			{{ cnTranslate(footnote) }}
+		</p>
 
 		<NcDialog
 			v-if="renaming !== null"
@@ -688,6 +750,7 @@ import CnEmptyContent from '../CnEmptyContent/CnEmptyContent.vue'
 import CnIcon from '../CnIcon/CnIcon.vue'
 import { readUserPreference, writeUserPreference } from '../../composables/useUserPreferences.js'
 import { dispatchAction } from '../../utils/actionsDispatcher.js'
+import { fillTemplate } from '../../utils/fillTemplate.js'
 import { isNewTabClick, isRowMiddleClick, preventMiddleClickAutoscroll } from '../../utils/rowAuxClick.js'
 import { ACTIONS_NEEDING_THE_FILES_PAGE, crumbsFor, hostActionApplies, joinPath } from './filesBrowser.js'
 import {
@@ -700,6 +763,7 @@ import {
 	sortNodesByColumn,
 	visibleFileColumns,
 } from './filesBrowserColumns.js'
+import { reviewSummary } from './filesReview.js'
 
 let uploadSeq = 0
 
@@ -811,6 +875,50 @@ export default {
 			default: () => [],
 		},
 
+		/**
+		 * The host's own buttons in the bar, before the upload button ("Vraag
+		 * een bestand aan een partij", DqZaakDocumenten). Each is dispatched
+		 * like a New-menu entry, with the current folder; `variant:
+		 * 'primary'` draws it as the primary button.
+		 *
+		 * @type {Array<{id: string, label: string, icon?: string, variant?: string, type?: string, target?: string, props?: object, handler?: string, args?: Array}>}
+		 */
+		headerActions: {
+			type: Array,
+			default: () => [],
+		},
+
+		/**
+		 * One visible button on every file row ("Beoordelen"), dispatched like a
+		 * row action. `primaryWhen: { key, values }` draws it as the primary
+		 * button while the row-data field `key` holds one of `values` (a file
+		 * still to review), and secondary otherwise. `visibleIf` works as on a
+		 * row action.
+		 *
+		 * @type {{id: string, label: string, type?: string, target?: string, props?: object, handler?: string, args?: Array, primaryWhen?: {key: string, values: Array<string>}, visibleIf?: object}|null}
+		 */
+		rowButton: {
+			type: Object,
+			default: null,
+		},
+
+		/**
+		 * A review summary above the list (DqZaakDocumenten "4 van 7
+		 * beoordeeld"): `{ key, open, values: [{ value, label?, tone? }], title?,
+		 * subtitle? }`. `key` is the row-data field with the review state, `open`
+		 * the value (or values) of a file still to review; a file without a
+		 * listed value counts as open. `tone` is `success`, `warning`, `error`,
+		 * `info` or `default`. `title` and `subtitle` take `{done}`, `{total}` and
+		 * `{open}`, through the host's translate; they default to the library's
+		 * "{done} of {total} reviewed" and "{open} still to review".
+		 *
+		 * @type {{key: string, open?: string|Array<string>, values: Array<{value: string, label?: string, tone?: string}>, title?: string, subtitle?: string}|null}
+		 */
+		reviewSummary: {
+			type: Object,
+			default: null,
+		},
+
 		/**
 		 * Rows that are not nodes of this folder: files the host joined from
 		 * another object's folder. Rendered after the folder's own rows with
@@ -930,6 +1038,29 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * A line of the host's own under the list, apart from the drop hint
+		 * ("Elk bestand wordt bij het uploaden op virussen gescand en krijgt een
+		 * controlegetal", DqDocumentenBeheer). Translated with the host's
+		 * catalogue.
+		 */
+		footnote: {
+			type: String,
+			default: '',
+		},
+
+		/**
+		 * A second line under each file's name (DqDocumentenBeheer "Inwoner ·
+		 * 4 okt"): a field template read from the file's row data, plus
+		 * `name`, `modified` (the change date) and `owner` (the owner's display
+		 * name), e.g. `"{uploadedBy} · {modified|date}"`. A line with an empty
+		 * value is left out. Translated with the host's catalogue first.
+		 */
+		nameSecondary: {
+			type: String,
+			default: '',
+		},
+
 		/** The line `dropHint` shows. */
 		dropHintLabel: {
 			type: String,
@@ -1331,6 +1462,28 @@ export default {
 			return this.sorted.filter((node) => !this.isFolder(node))
 		},
 
+		/**
+		 * The review counts over the folder's files, or null without a summary.
+		 *
+		 * @return {object|null}
+		 */
+		review() {
+			return reviewSummary(this.reviewSummary, this.fileNodes, this.resolvedRowData)
+		},
+
+		/** @return {string} The summary's title, counts filled in. */
+		reviewTitle() {
+			return this.reviewText('title', t('nextcloud-vue', '{done} of {total} reviewed'))
+		},
+
+		/** @return {string} The summary's second line, or '' when nothing is open. */
+		reviewSubtitle() {
+			if (!this.review || this.review.open === 0) {
+				return ''
+			}
+			return this.reviewText('subtitle', t('nextcloud-vue', '{open} still to review'))
+		},
+
 		/**
 		 * Whether any facet value is chosen.
 		 *
@@ -1793,6 +1946,73 @@ export default {
 			return this.cnTranslate(String(action?.label ?? ''))
 		},
 
+		/**
+		 * The second line under a file's name, or '' without `nameSecondary`,
+		 * for a folder, or when a value in it is empty.
+		 *
+		 * @param {object} node The file.
+		 * @return {string}
+		 */
+		nameSecondaryOf(node) {
+			if (!this.nameSecondary || this.isFolder(node)) {
+				return ''
+			}
+			const byId = this.resolvedRowData && typeof this.resolvedRowData === 'object' ? this.resolvedRowData : {}
+			const entry = byId[node.fileid] ?? byId[String(node.fileid)] ?? {}
+			const owner = node.attributes ? node.attributes['owner-display-name'] : undefined
+			const object = { ...entry, name: node.basename, modified: node.mtime, ...(owner ? { owner } : {}) }
+			return fillTemplate(this.cnTranslate(this.nameSecondary), object)
+		},
+
+		/**
+		 * A review summary line: the host's template through its translate, else
+		 * the library's, with the counts filled in.
+		 *
+		 * @param {string} key `title` or `subtitle`.
+		 * @param {string} fallback The library's line, already translated.
+		 * @return {string}
+		 */
+		reviewText(key, fallback) {
+			const own = this.reviewSummary && typeof this.reviewSummary[key] === 'string' && this.reviewSummary[key] !== ''
+				? this.cnTranslate(this.reviewSummary[key])
+				: fallback
+			const counts = this.review || { done: 0, total: 0, open: 0 }
+			return own.replace(/\{(done|total|open)\}/g, (match, name) => String(counts[name]))
+		},
+
+		/**
+		 * Whether a review value is one of the summary's open values.
+		 *
+		 * @param {string} value The value.
+		 * @return {boolean}
+		 */
+		isOpenValue(value) {
+			const open = this.reviewSummary ? this.reviewSummary.open : undefined
+			const list = (Array.isArray(open) ? open : [open]).filter((v) => v !== undefined && v !== null)
+			return list.some((v) => String(v).toLowerCase() === String(value).toLowerCase())
+		},
+
+		/**
+		 * Whether a file's row button is the primary one: the row-data field
+		 * `primaryWhen.key` holds one of `primaryWhen.values`.
+		 *
+		 * @param {object} node The file.
+		 * @return {boolean}
+		 */
+		rowButtonPrimary(node) {
+			const when = this.rowButton && this.rowButton.primaryWhen
+			if (!when || typeof when.key !== 'string' || !Array.isArray(when.values)) {
+				return false
+			}
+			const raw = fileColumnValue({ key: when.key, source: 'row' }, node, this.resolvedRowData)
+			if (raw === null || raw === undefined) {
+				return false
+			}
+			return when.values.some((v) => String(v).toLowerCase() === String(raw).toLowerCase())
+		},
+
+		hostActionApplies,
+
 		/**
 		 * Re-read the folder once after a burst of change signals. One upload
 		 * of ten files answers ten `files:node:created`, and one PROPFIND
@@ -2938,6 +3158,89 @@ export default {
 	margin-inline-end: 8px;
 }
 
+.cn-files-browser__review {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	margin-block-end: 12px;
+	padding: 14px 16px;
+	border-radius: 10px;
+	background: var(--color-background-hover);
+}
+
+.cn-files-browser__review-head {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: 8px;
+}
+
+.cn-files-browser__review-title {
+	font-size: 15px;
+}
+
+.cn-files-browser__review-sub {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
+.cn-files-browser__review-bar {
+	display: flex;
+	height: 8px;
+	overflow: hidden;
+	border-radius: 4px;
+	background: var(--color-border);
+}
+
+.cn-files-browser__review-legend {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px 18px;
+	margin: 0;
+	padding: 0;
+	font-size: 14px;
+	list-style: none;
+}
+
+.cn-files-browser__review-legend li {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.cn-files-browser__review-dot {
+	width: 10px;
+	height: 10px;
+	border-radius: 5px;
+}
+
+.cn-files-browser__review-part--success {
+	background: var(--color-success-text, var(--color-success));
+}
+
+.cn-files-browser__review-part--warning {
+	background: var(--color-warning);
+}
+
+.cn-files-browser__review-part--error {
+	background: var(--color-error-text, var(--color-error));
+}
+
+.cn-files-browser__review-part--info {
+	background: var(--color-primary-element);
+}
+
+.cn-files-browser__review-part--default {
+	background: var(--color-border-dark);
+}
+
+.cn-files-browser__row-button {
+	display: inline-flex;
+	margin-inline-end: 8px;
+	vertical-align: middle;
+}
+
 .cn-files-browser__facets {
 	display: flex;
 	flex-wrap: wrap;
@@ -2988,6 +3291,11 @@ export default {
 
 .cn-files-browser__col-actions {
 	width: 48px;
+	white-space: nowrap;
+}
+
+.cn-files-browser__col-actions:has(.cn-files-browser__row-button) {
+	width: auto;
 }
 
 .cn-files-browser__col-name {
@@ -3001,6 +3309,22 @@ export default {
 	white-space: nowrap;
 }
 
+.cn-files-browser__name-secondary {
+	display: block;
+	overflow: hidden;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.cn-files-browser__footnote {
+	margin: 0;
+	padding-top: 12px;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
 .cn-files-browser__row--linked {
 	color: var(--color-text-maxcontrast);
 }

package/src/components/CnFilesBrowser/filesReview.js

@@ -0,0 +1,57 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+import { fileColumnValue } from './filesBrowserColumns.js'
+
+/** The tones a review segment may take; anything else draws as `default`. */
+const TONES = ['success', 'warning', 'error', 'info', 'default']
+
+/**
+ * The review summary of a file list (DqZaakDocumenten "4 van 7 beoordeeld"):
+ * how many files carry each review value, read from the host's row data.
+ *
+ * `spec` is `{ key, open, values: [{ value, label?, tone? }] }`: `key` is the
+ * row-data field that holds the review state, `open` the value (or values) of
+ * a file still to review. A file with no value, or one not listed, counts as
+ * open. Values compare without case.
+ *
+ * @param {object} spec The summary declaration.
+ * @param {Array<object>} nodes The file nodes (folders already left out).
+ * @param {object|null} rowData The host's row data, by file id.
+ * @return {{total: number, done: number, open: number, segments: Array<{value: string, label: string, tone: string, count: number, share: number}>}|null}
+ *   The counts, or null when the declaration names no key or no values.
+ */
+export function reviewSummary(spec, nodes, rowData) {
+	if (!spec || typeof spec !== 'object' || typeof spec.key !== 'string' || spec.key === '' || !Array.isArray(spec.values) || spec.values.length === 0) {
+		return null
+	}
+	const files = Array.isArray(nodes) ? nodes : []
+	const openValues = (Array.isArray(spec.open) ? spec.open : [spec.open]).filter((v) => v !== undefined && v !== null).map((v) => String(v).toLowerCase())
+	const segments = spec.values
+		.filter((entry) => entry && entry.value !== undefined && entry.value !== null)
+		.map((entry) => ({
+			value: String(entry.value),
+			label: typeof entry.label === 'string' && entry.label !== '' ? entry.label : String(entry.value),
+			tone: TONES.includes(entry.tone) ? entry.tone : 'default',
+			count: 0,
+			share: 0,
+		}))
+	let open = 0
+	for (const node of files) {
+		const raw = fileColumnValue({ key: spec.key, source: 'row' }, node, rowData)
+		const value = raw === null || raw === undefined ? '' : String(raw).toLowerCase()
+		const segment = segments.find((s) => s.value.toLowerCase() === value)
+		if (segment) {
+			segment.count++
+		}
+		if (!segment || openValues.includes(value)) {
+			open++
+		}
+	}
+	const total = files.length
+	for (const segment of segments) {
+		segment.share = total > 0 ? Math.round((segment.count / total) * 1000) / 10 : 0
+	}
+	return { total, done: total - open, open, segments }
+}