@conduction/nextcloud-vue 2.99.0 → 2.101.0

package/src/components/CnDetailWidgetHost/CnDetailWidgetHost.vue

@@ -184,8 +184,14 @@
 				<CnIcon :name="widget.icon" :size="20" />
 			</template>
 			<!-- A renderer that reports its own header (`header` event:
-			     `{ link, note }`, e.g. record-list's "3 in totaal"). -->
-			<template v-if="rendererHeader.note || rendererHeader.action" #actions>
+			     `{ link, note, action, pill }`, e.g. record-list's "3 in totaal",
+			     a facts card's status pill). -->
+			<template v-if="rendererHeader.note || rendererHeader.action || rendererHeader.pill" #actions>
+				<CnStatusBadge
+					v-if="rendererHeader.pill"
+					:label="rendererHeader.pill.label"
+					:variant="rendererHeader.pill.variant"
+					data-testid="cn-detail-widget-header-pill" />
 				<span
 					v-if="rendererHeader.note"
 					class="cn-detail-page__catalog-note"
@@ -298,6 +304,7 @@ import CnObjectDataWidget from '../CnObjectDataWidget/CnObjectDataWidget.vue'
 import CnObjectFilesWidget from '../CnObjectFilesWidget/CnObjectFilesWidget.vue'
 import CnObjectGeoWidget from '../CnObjectGeoWidget/CnObjectGeoWidget.vue'
 import CnRelatedObjectsWidget from '../CnRelatedObjectsWidget/CnRelatedObjectsWidget.vue'
+import CnStatusBadge from '../CnStatusBadge/CnStatusBadge.vue'
 import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry.js'
 import { normalizeLook } from '../../composables/useLook.js'
 import { isAppInstalled } from '../../utils/appInstalled.js'
@@ -376,6 +383,7 @@ export default {
 		CnObjectDataWidget,
 		CnObjectGeoWidget,
 		CnRelatedObjectsWidget,
+		CnStatusBadge,
 		CnWidgetWrapper,
 		NcActionButton,
 		CnEmptyContent,
@@ -631,7 +639,7 @@ export default {
 			 * `header` event (screens-relation-pages): a link and a note,
 			 * with the list's total already filled in.
 			 */
-			rendererHeader: { link: null, note: '', action: null },
+			rendererHeader: { link: null, note: '', action: null, pill: null },
 		}
 	},
 
@@ -1218,7 +1226,8 @@ export default {
 			const link = header && header.link && typeof header.link === 'object' ? header.link : null
 			const note = header && typeof header.note === 'string' ? header.note : ''
 			const action = header && header.action && typeof header.action.run === 'function' && header.action.label ? header.action : null
-			this.rendererHeader = { link, note, action }
+			const pill = header && header.pill && typeof header.pill.label === 'string' && header.pill.label !== '' ? header.pill : null
+			this.rendererHeader = { link, note, action, pill }
 		},
 
 		/**

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/CnFactsWidget/CnFactsWidget.vue

@@ -132,6 +132,13 @@
 				</div>
 			</template>
 		</template>
+		<NcNoteCard
+			v-if="notice && record"
+			:type="notice.type"
+			class="cn-facts-widget__notice"
+			data-testid="cn-facts-notice">
+			{{ notice.text }}
+		</NcNoteCard>
 		<component
 			:is="link.to ? 'router-link' : 'a'"
 			v-if="link && record"
@@ -157,7 +164,7 @@
 import { emit } from '@nextcloud/event-bus'
 import { formatFileSize } from '@nextcloud/files'
 import { translate as t } from '@nextcloud/l10n'
-import { NcLoadingIcon } from '@nextcloud/vue'
+import { NcLoadingIcon, NcNoteCard } from '@nextcloud/vue'
 import Check from 'vue-material-design-icons/Check.vue'
 import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
 import EyeOutline from 'vue-material-design-icons/EyeOutline.vue'
@@ -266,7 +273,7 @@ export const FACTS_REVEAL_CHANNEL = 'cn:facts:reveal'
 export default {
 	name: 'CnFactsWidget',
 
-	components: { Check, CnIcon, CnStatusBadge, ContentCopy, EyeOutline, NcLoadingIcon },
+	components: { Check, CnIcon, CnStatusBadge, ContentCopy, EyeOutline, NcLoadingIcon, NcNoteCard },
 
 	inject: {
 		cnTranslate: { default: () => (key) => key },
@@ -290,6 +297,8 @@ export default {
 		 *   `resolve: { register, schema, labelField? }` on an entry or a part turns a value that is a reference (an id, or a list of ids) into the label of the referenced object (`labelField`, else `title`, then `name`): the case type or status of a task shows its name, not its uuid. The ids are fetched once per register and schema through the object store and shared by every facts widget on the page; the entry stays empty until its label is known, and when no label can be read. A resolved value works as a pill too: `map` is applied to the resolved label, and `variantMap` / `colorMap` look the tone up by the value of `resolve.toneField` on the referenced object when that is set (a status named by its `name`, coloured by its `state`), then by the resolved label, then by the stored value.
 		 *   `format: 'user'` shows a Nextcloud user id as the user's display name, read once per id; the entry stays empty until the name is known.
 		 * - `action` — an action drawn as a button under the facts; `headerAction` — one drawn in the card header (reported through the `header` event).
+		 * - `headerPill` — a status pill in the card header (reported through the `header` event): `{ path?, text?, map?, variant?, variantMap?, colorMap? }`, read from the record like a `pill` entry (DqBezwaar "Advies ontvangen"); nothing shows while the value is empty.
+		 * - `notice` — `{ text, variant? }`, a note band inside the card under the facts (`info` by default; `success`, `warning` or `error`); the text is translated.
 		 *   `format` is `text` (default), `date` (board short date), `date-long` (always with the year), `list` (an array joined by ", ", each item read at `itemPath`), `bytes` (a size, "1.5 MB") or `currency` (a money amount in the reader's language, "€ 1.234,50": the code in `currency`, else the record's `currencyField`, else the app's reporting currency, else EUR; `decimals` defaults to 2).
 		 *   `map` turns a raw value into a label (translated). `parts` (on a `line`) lists paths, or `{ path, label?, format? }`, joined by `separator` (default " · "); empty parts are dropped.
 		 * - `source` — `{ register, schema, id }` or `{ url }`; omitted = the current object. An entry with `from: "object"` reads the current object even then (a client card that also shows the ticket's channel).
@@ -508,6 +517,47 @@ export default {
 			return this.actionView(this.content?.headerAction)
 		},
 
+		/**
+		 * The card header's status pill, read from the record like a `pill`
+		 * entry, or null when it has no text.
+		 *
+		 * @return {{label: string, variant: string}|null}
+		 */
+		headerPill() {
+			const pill = this.content?.headerPill
+			if (!pill || typeof pill !== 'object' || !this.record) {
+				return null
+			}
+			const raw = typeof pill.path === 'string' && pill.path !== '' ? readPath(this.record, pill.path) : undefined
+			const mapped = pill.map && (typeof raw === 'string' || typeof raw === 'number') && Object.hasOwn(pill.map, raw) ? pill.map[raw] : undefined
+			const text = mapped ?? pill.text ?? raw
+			if (typeof text !== 'string' && typeof text !== 'number') {
+				return null
+			}
+			const label = this.tr(String(text))
+			if (label === '') {
+				return null
+			}
+			const colours = pill.variantMap || pill.colorMap
+			const hit = colours && (typeof raw === 'string' || typeof raw === 'number') && Object.hasOwn(colours, raw) ? colours[raw] : pill.variant
+			return { label, variant: isBadgeVariant(hit) ? hit : 'default' }
+		},
+
+		/**
+		 * The note band under the facts: its text translated, its NcNoteCard
+		 * type from `variant` (info by default), or null without text.
+		 *
+		 * @return {{text: string, type: string}|null}
+		 */
+		notice() {
+			const notice = this.content?.notice
+			const text = notice && typeof notice.text === 'string' ? this.tr(notice.text) : ''
+			if (text === '') {
+				return null
+			}
+			return { text, type: ['success', 'warning', 'error'].includes(notice.variant) ? notice.variant : 'info' }
+		},
+
 		/** @return {string} The reveal button's text. */
 		showLabel() {
 			return t('nextcloud-vue', 'Show')
@@ -544,6 +594,13 @@ export default {
 				this.emitHeader()
 			},
 		},
+
+		headerPill: {
+			deep: true,
+			handler() {
+				this.emitHeader()
+			},
+		},
 	},
 
 	methods: {
@@ -803,12 +860,13 @@ export default {
 			const view = this.headerAction
 			/**
 			 * @event header Emitted with the card header's parts: the header action, if any.
-			 * @type {{link: null, note: string, action: (object|null)}} `action` is `{ label, icon, run }`.
+			 * @type {{link: null, note: string, action: (object|null), pill: (object|null)}} `action` is `{ label, icon, run }`, `pill` is `{ label, variant }`.
 			 */
 			this.$emit('header', {
 				link: null,
 				note: '',
 				action: view ? { ...view, run: () => this.runAction(this.content.headerAction) } : null,
+				pill: this.headerPill,
 			})
 		},
 
@@ -1368,6 +1426,10 @@ export default {
 	background: var(--color-primary-element-light-hover, var(--color-primary-element-light));
 }
 
+.cn-facts-widget__notice {
+	margin: 4px 0 0;
+}
+
 .cn-facts-widget__link {
 	font-size: 14px;
 	font-weight: 600;