@conduction/nextcloud-vue 2.100.0 → 2.101.0

package/src/components/CnExportsWidget/CnExportsWidget.vue

@@ -0,0 +1,233 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Conduction B.V.
+  - SPDX-License-Identifier: EUPL-1.2
+-->
+<template>
+	<div class="cn-exports-widget" data-testid="cn-exports-widget">
+		<p v-if="loading && runs.length === 0" class="cn-exports-widget__muted">
+			{{ t('nextcloud-vue', 'Loading …') }}
+		</p>
+		<p v-else-if="failed" class="cn-exports-widget__muted" data-testid="cn-exports-error">
+			{{ t('nextcloud-vue', 'Your exports could not be loaded.') }}
+		</p>
+		<p v-else-if="runs.length === 0" class="cn-exports-widget__muted" data-testid="cn-exports-empty">
+			{{ emptyText }}
+		</p>
+		<ul v-else class="cn-exports-widget__list">
+			<li v-for="run in shownRuns"
+				:key="run.key"
+				class="cn-exports-widget__row"
+				data-testid="cn-exports-row">
+				<span class="cn-exports-widget__text">
+					<span class="cn-exports-widget__name">{{ run.filename }}</span>
+					<span class="cn-exports-widget__meta">{{ run.meta }}</span>
+				</span>
+				<span v-if="run.expiresToday" class="cn-exports-widget__tag" data-testid="cn-exports-expires-today">
+					{{ t('nextcloud-vue', 'Expires today') }}
+				</span>
+				<NcButton v-else-if="run.href"
+					:href="run.href"
+					data-testid="cn-exports-download">
+					{{ t('nextcloud-vue', 'Download') }}
+				</NcButton>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script>
+import { getCurrentUser } from '@nextcloud/auth'
+import axios from '@nextcloud/axios'
+import { translatePlural as n, translate as t } from '@nextcloud/l10n'
+import { generateRemoteUrl, generateUrl } from '@nextcloud/router'
+import { NcButton } from '@nextcloud/vue'
+import { formatBoardDate } from '../../utils/boardDate.js'
+
+/**
+ * CnExportsWidget — the reader's own exports (DqZoekresultaten "Uw exports"):
+ * each file with when it was made, how often it was downloaded and when it
+ * expires, a Download button while the file is there, and "Expires today" on
+ * the day it goes.
+ *
+ * Reads OpenRegister's export runs (`GET /apps/openregister/api/exports`)
+ * with the reader as the actor, so an administrator sees their own here too.
+ * `content.register` and `content.schema` narrow it to one list's exports.
+ * A run whose file was swept, or that never produced one, is left out.
+ *
+ * Example (manifest, in an index page's `sidePanel`):
+ * ```json
+ * { "id": "exports", "type": "exports", "title": "Your exports", "content": { "register": "dossiq", "schema": "case", "limit": 5 } }
+ * ```
+ */
+export default {
+	name: 'CnExportsWidget',
+
+	components: { NcButton },
+
+	inject: {
+		/** Host translate function provided by CnAppRoot. */
+		cnTranslate: { default: () => (key) => key },
+	},
+
+	props: {
+		/** `{ register?, schema?, limit?, emptyText? }`; `limit` defaults to 5. */
+		content: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+
+	data() {
+		return { loading: false, failed: false, runs: [], now: new Date() }
+	},
+
+	computed: {
+		/** @return {number} How many exports to show. */
+		limit() {
+			const limit = Number(this.content && this.content.limit)
+			return Number.isInteger(limit) && limit > 0 ? limit : 5
+		},
+
+		/** @return {Array<object>} The exports to draw, newest first. */
+		shownRuns() {
+			return this.runs
+				.filter((run) => run && run.filename && run.fileId !== null && run.fileId !== undefined && run.status !== 'expired')
+				.slice(0, this.limit)
+				.map((run) => this.view(run))
+		},
+
+		/** @return {string} The empty line. */
+		emptyText() {
+			const own = this.content && this.content.emptyText
+			return own ? this.cnTranslate(own) : t('nextcloud-vue', 'You have no exports here.')
+		},
+	},
+
+	mounted() {
+		this.load()
+	},
+
+	methods: {
+		t,
+
+		/**
+		 * Read the reader's export runs.
+		 *
+		 * @return {Promise<void>}
+		 */
+		async load() {
+			const user = getCurrentUser()
+			if (!user || !user.uid) {
+				return
+			}
+			this.loading = true
+			this.failed = false
+			try {
+				const params = { actor: user.uid, limit: Math.max(this.limit * 2, 10) }
+				for (const key of ['register', 'schema']) {
+					if (this.content && typeof this.content[key] === 'string' && this.content[key] !== '') {
+						params[key] = this.content[key]
+					}
+				}
+				const response = await axios.get(generateUrl('/apps/openregister/api/exports'), { params })
+				const results = response && response.data && Array.isArray(response.data.results) ? response.data.results : []
+				this.runs = [...results].sort((a, b) => String(b.producedAt || b.created || '').localeCompare(String(a.producedAt || a.created || '')))
+			} catch {
+				this.failed = true
+				this.runs = []
+			} finally {
+				this.loading = false
+			}
+		},
+
+		/**
+		 * One export as the list draws it.
+		 *
+		 * @param {object} run An export run.
+		 * @return {{key: string, filename: string, meta: string, href: string, expiresToday: boolean}}
+		 */
+		view(run) {
+			const made = run.producedAt || run.created
+			const parts = []
+			if (made) {
+				parts.push(t('nextcloud-vue', 'Made {date}', { date: formatBoardDate(made, this.now) }))
+			}
+			if (typeof run.downloadCount === 'number') {
+				parts.push(n('nextcloud-vue', 'downloaded %n time', 'downloaded %n times', run.downloadCount))
+			}
+			if (run.expiresAt) {
+				parts.push(t('nextcloud-vue', 'expires {date}', { date: formatBoardDate(run.expiresAt, this.now) }))
+			}
+			const user = getCurrentUser()
+			const href = run.filePath && user && user.uid
+				? generateRemoteUrl(`dav/files/${encodeURIComponent(user.uid)}`) + String(run.filePath).split('/').map(encodeURIComponent).join('/')
+				: ''
+			return {
+				key: String(run.uuid || run.id),
+				filename: run.filename,
+				meta: parts.join(' · '),
+				href,
+				expiresToday: Boolean(run.expiresAt) && new Date(run.expiresAt).toDateString() === this.now.toDateString(),
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-exports-widget__list {
+	display: flex;
+	flex-direction: column;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.cn-exports-widget__row {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	padding: 10px 0;
+}
+
+.cn-exports-widget__row + .cn-exports-widget__row {
+	border-top: 1px solid var(--color-border);
+}
+
+.cn-exports-widget__text {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+
+.cn-exports-widget__name {
+	overflow: hidden;
+	font-size: 14px;
+	font-weight: 600;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.cn-exports-widget__meta,
+.cn-exports-widget__muted {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
+.cn-exports-widget__muted {
+	margin: 0;
+}
+
+.cn-exports-widget__tag {
+	flex: none;
+	padding: 3px 10px;
+	border-radius: 12px;
+	background: var(--color-warning-light, color-mix(in srgb, var(--color-warning) 18%, transparent));
+	color: var(--color-warning-text, var(--color-main-text));
+	font-size: 13px;
+	font-weight: 600;
+	white-space: nowrap;
+}
+</style>

package/src/components/CnExportsWidget/index.js

@@ -0,0 +1,7 @@
+// SPDX-FileCopyrightText: 2026 Conduction B.V.
+// SPDX-License-Identifier: EUPL-1.2
+
+import CnExportsWidget from './CnExportsWidget.vue'
+
+export default CnExportsWidget
+export { CnExportsWidget }

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);
 }