@conduction/nextcloud-vue 2.99.0 → 2.100.0

package/l10n/en.json

@@ -1694,7 +1694,13 @@
     "{fields}: {reason}": "{fields}: {reason}",
     "Current {name}": "Current {name}",
     "Upload {name}": "Upload {name}",
-    "The image could not be uploaded: {reason}": "The image could not be uploaded: {reason}"
+    "The image could not be uploaded: {reason}": "The image could not be uploaded: {reason}",
+    "The saved flow runs once with the record you pick as its subject.": "The saved flow runs once with the record you pick as its subject.",
+    "Record": "Record",
+    "Run test": "Run test",
+    "Test with a record": "Test with a record",
+    "admin": "admin",
+    "Wizard": "Wizard"
   },
   "plurals": {
     "{count} selected": [

package/l10n/nl.json

@@ -1909,7 +1909,13 @@
     "Day added.": "Dag toegevoegd.",
     "Only an administrator can change the working calendar.": "Alleen een beheerder kan de werkkalender wijzigen.",
     "The day could not be added. Try again.": "De dag kon niet worden toegevoegd. Probeer het opnieuw.",
-    "Loading …": "Laden …"
+    "Loading …": "Laden …",
+    "The saved flow runs once with the record you pick as its subject.": "De opgeslagen flow draait één keer met het record dat u kiest als onderwerp.",
+    "Record": "Record",
+    "Run test": "Test uitvoeren",
+    "Test with a record": "Testen met een record",
+    "admin": "beheerder",
+    "Wizard": "Assistent"
   },
   "plurals": {
     "{count} selected": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.99.0",
+  "version": "2.100.0",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/src/components/CnAdminSettingsShell/CnAdminSettingsShell.vue

@@ -218,6 +218,7 @@
 		<CnSetupWizard
 			v-if="showSetup && setupWizardOpen"
 			:appId="appId"
+			:appName="appName"
 			:steps="setupSteps"
 			@complete="setupWizardOpen = false"
 			@close="setupWizardOpen = false" />
@@ -231,7 +232,7 @@ import { loadState } from '@nextcloud/initial-state'
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { NcButton, NcLoadingIcon, NcSettingsSection } from '@nextcloud/vue'
-import { computed, provide } from 'vue'
+import { computed, inject, provide } from 'vue'
 import AutoFix from 'vue-material-design-icons/AutoFix.vue'
 import BookOpenVariant from 'vue-material-design-icons/BookOpenVariant.vue'
 import HelpCircleOutline from 'vue-material-design-icons/HelpCircleOutline.vue'
@@ -772,6 +773,11 @@ export default {
 		// Everything inside the shell, its own version card and the app's
 		// sections alike, follows the shell's look without the app providing it.
 		provide('cnLook', look)
+		// The setup wizard translates its step titles and bodies through
+		// `cnTranslate`. On an admin page no CnAppRoot provides it, so the
+		// shell hands down the app's own catalog, keyed by its app id.
+		const hostTranslate = inject('cnTranslate', null)
+		provide('cnTranslate', hostTranslate || ((text, vars) => t(props.appId, text, vars)))
 		return { environmentName, isBoard, ownLookClass }
 	},
 

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -414,7 +414,8 @@
 									:key="`${entry.id}-link`"
 									:href="entry.href"
 									:target="entry.linkTarget || undefined"
-									:data-testid="entry.testid">
+									:data-testid="entry.testid"
+									:data-cn-admin-tag="adminTagFor(group)">
 									<template v-if="entry.iconName || entry.iconClass" #icon>
 										<CnIcon v-if="entry.iconName" :name="entry.iconName" :size="20" />
 										<span v-else :class="entry.iconClass" />
@@ -428,6 +429,7 @@
 									:disabled="entry.disabled"
 									:aria-pressed="entry.pressed === null ? null : String(entry.pressed)"
 									:closeAfterClick="true"
+									:data-cn-admin-tag="adminTagFor(group)"
 									@click="entry.run()">
 									<template v-if="entry.iconName || entry.iconClass" #icon>
 										<CnIcon v-if="entry.iconName" :name="entry.iconName" :size="20" />
@@ -2443,13 +2445,15 @@ export default {
 
 		/**
 		 * What the Actions menu itself shows (manifest `config.actionsMenu`):
-		 * `{ showRefresh?, showHelpLinks?, label? }`. `showRefresh: false`
-		 * removes Refresh. `showHelpLinks: false` removes Request a feature,
-		 * Report a bug and Documentation, for an app that offers them in its
-		 * own help menu. `label` names the menu, for example "More". `null`
-		 * (the default) changes nothing.
+		 * `{ showRefresh?, showHelpLinks?, showMarkUnread?, showOpenSidebar?, label? }`.
+		 * `showRefresh: false` removes Refresh. `showHelpLinks: false` removes
+		 * Request a feature, Report a bug and Documentation, for an app that
+		 * offers them in its own help menu. `showMarkUnread: false` and
+		 * `showOpenSidebar: false` remove those two built-in entries, for a
+		 * menu the board draws without them (DqZaakMeer). `label` names the
+		 * menu, for example "More". `null` (the default) changes nothing.
 		 *
-		 * @type {{showRefresh?: boolean, showHelpLinks?: boolean, label?: string}|null}
+		 * @type {{showRefresh?: boolean, showHelpLinks?: boolean, showMarkUnread?: boolean, showOpenSidebar?: boolean, label?: string}|null}
 		 */
 		actionsMenu: {
 			type: Object,
@@ -4173,7 +4177,8 @@ export default {
 		 * @spec openspec/changes/record-unread-markers/tasks.md#task-2
 		 */
 		showMarkUnread() {
-			return typeof this.resolvedSelf.unread === 'boolean'
+			return this.actionsMenu?.showMarkUnread !== false
+				&& typeof this.resolvedSelf.unread === 'boolean'
 				&& this.register !== '' && this.schema !== '' && this.objectId !== ''
 		},
 
@@ -4185,7 +4190,8 @@ export default {
 		 * @return {boolean}
 		 */
 		showOpenSidebar() {
-			return this.isBoard && this.hasExternalSidebar && this.sidebarActive && this.objectSidebarState.open !== true
+			return this.actionsMenu?.showOpenSidebar !== false
+				&& this.isBoard && this.hasExternalSidebar && this.sidebarActive && this.objectSidebarState.open !== true
 		},
 
 		/** @return {string} Label of the Open sidebar entry. */
@@ -4933,6 +4939,19 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * The tag after an admin-only entry in the board look ("beheerder",
+		 * DqZaakMeer), or null for any other entry or look. It is drawn by
+		 * detail-page.css from the attribute, since the menu renders its
+		 * entries' text as plain text.
+		 *
+		 * @param {{key: string}} group The menu group the entry is in.
+		 * @return {string|null} The tag, or null.
+		 */
+		adminTagFor(group) {
+			return this.isBoard && group && group.key === 'cn-admin' ? t('nextcloud-vue', 'admin') : null
+		},
+
 		/**
 		 * Open the object sidebar through the shared channel.
 		 *

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/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;

package/src/components/CnFlowsPage/CnFlowBoard.vue

@@ -39,6 +39,15 @@
 					@click="$emit('run')">
 					{{ t('nextcloud-vue', 'Run') }}
 				</NcButton>
+				<NcButton v-if="testSubjectReady"
+					:disabled="store.running || !store.flow.id"
+					data-testid="flow-board-test"
+					@click="testOpen = true">
+					<template #icon>
+						<TestTube :size="16" />
+					</template>
+					{{ testLabel }}
+				</NcButton>
 				<CnBuildiqEditButton />
 				<NcButton variant="primary"
 					:disabled="store.saving || !store.flow.name || store.graphLocked"
@@ -49,6 +58,32 @@
 			</div>
 		</header>
 
+		<CnDialog v-if="testOpen"
+			:name="testLabel"
+			data-testid="flow-board-test-dialog"
+			@closing="testOpen = false">
+			<p class="cn-flow-board__test-intro">
+				{{ t('nextcloud-vue', 'The saved flow runs once with the record you pick as its subject.') }}
+			</p>
+			<CnResourceSelect v-model="testRecord"
+				:register="testSubject.register"
+				:schema="testSubject.schema"
+				:labelField="testSubject.labelField || 'title'"
+				:inputLabel="t('nextcloud-vue', 'Record')"
+				data-testid="flow-board-test-record" />
+			<template #actions>
+				<NcButton data-testid="flow-board-test-cancel" @click="testOpen = false">
+					{{ t('nextcloud-vue', 'Cancel') }}
+				</NcButton>
+				<NcButton variant="primary"
+					:disabled="!testRecord || store.running"
+					data-testid="flow-board-test-run"
+					@click="runTest">
+					{{ t('nextcloud-vue', 'Run test') }}
+				</NcButton>
+			</template>
+		</CnDialog>
+
 		<p class="cn-flow-board__path" data-testid="flow-board-path">
 			<a :href="listHref" class="cn-flow-board__crumb" @click="onCrumbClick($event, detailRoute)">{{ listText }}</a>
 			<span aria-hidden="true"> / </span>
@@ -186,11 +221,14 @@
 <script>
 import { translate as t } from '@nextcloud/l10n'
 import { NcButton, NcCheckboxRadioSwitch, NcNoteCard } from '@nextcloud/vue'
+import TestTube from 'vue-material-design-icons/TestTube.vue'
 import CnBuildiqEditButton from '../CnBuildiqEditButton/CnBuildiqEditButton.vue'
+import CnDialog from '../CnDialog/CnDialog.vue'
 import CnFlowDetail from '../CnFlowDetail/CnFlowDetail.vue'
 import CnFlowRunSummary from '../CnFlowDetail/CnFlowRunSummary.vue'
 import CnFlowSidebar from '../CnFlowDetail/CnFlowSidebar.vue'
 import CnFlowStepLog from '../CnFlowDetail/CnFlowStepLog.vue'
+import CnResourceSelect from '../CnResourceSelect/CnResourceSelect.vue'
 import { FLOW_RUN_ACTIVE_STATUSES, useFlowStore } from '../../composables/useFlowStore.js'
 import { formatRelativeDate } from '../../utils/boardDate.js'
 import { flowOutcomeLevels, flowRunDurationMs, flowRunLogLines, flowRunName, formatFlowDuration } from '../../utils/flowRunLog.js'
@@ -204,7 +242,7 @@ import { CnStatusBadge } from '../CnStatusBadge/index.js'
 export default {
 	name: 'CnFlowBoard',
 
-	components: { CnBuildiqEditButton, CnFlowDetail, CnFlowRunSummary, CnFlowSidebar, CnFlowStepLog, CnStatusBadge, NcButton, NcCheckboxRadioSwitch, NcNoteCard },
+	components: { CnBuildiqEditButton, CnDialog, CnFlowDetail, CnResourceSelect, TestTube, CnFlowRunSummary, CnFlowSidebar, CnFlowStepLog, CnStatusBadge, NcButton, NcCheckboxRadioSwitch, NcNoteCard },
 
 	props: {
 		/** The flow uuid, or `new`. */
@@ -225,6 +263,12 @@ export default {
 		notice: { type: String, default: '' },
 		/** The pill beside the title ("Case type flow"). */
 		pill: { type: String, default: '' },
+		/**
+		 * The records a test run can take as its subject: `{ register, schema,
+		 * labelField?, label? }`. Draws a header button ("Testen met een zaak",
+		 * DqFlow) that runs the saved flow once with a picked record.
+		 */
+		testSubject: { type: Object, default: null },
 	},
 
 	emits: ['save', 'run', 'retried'],
@@ -234,10 +278,20 @@ export default {
 	},
 
 	data() {
-		return { runTab: 'step' }
+		return { runTab: 'step', testOpen: false, testRecord: null }
 	},
 
 	computed: {
+		/** @return {boolean} Whether a test subject is declared well enough to pick one. */
+		testSubjectReady() {
+			return Boolean(this.testSubject && this.testSubject.register && this.testSubject.schema)
+		},
+
+		/** @return {string} The test button's label: the page's own, else the library's. */
+		testLabel() {
+			return (this.testSubject && this.testSubject.label) || t('nextcloud-vue', 'Test with a record')
+		},
+
 		/** @return {boolean} Whether the palette card is drawn. */
 		showPalette() {
 			return this.palette === 'column' && !this.store.inRunView
@@ -454,6 +508,22 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Run the saved flow once with the picked record as its subject, then
+		 * close the dialog; the run shows on the canvas as any run does.
+		 *
+		 * @return {Promise<void>}
+		 */
+		async runTest() {
+			const uuid = Array.isArray(this.testRecord) ? this.testRecord[0] : this.testRecord
+			if (!uuid) {
+				return
+			}
+			await this.store.run({ uuid, register: this.testSubject.register, schema: this.testSubject.schema })
+			this.testOpen = false
+			this.testRecord = null
+		},
+
 		t,
 
 		/**
@@ -581,6 +651,11 @@ export default {
 	gap: 8px;
 }
 
+.cn-flow-board__test-intro {
+	margin: 0 0 12px;
+	color: var(--color-text-maxcontrast);
+}
+
 .cn-flow-board__path {
 	margin: 0;
 	color: var(--color-text-maxcontrast);

package/src/components/CnFlowsPage/CnFlowEditorPage.vue

@@ -11,6 +11,7 @@
 		:paletteFootnote="paletteFootnote ? cnTranslate(paletteFootnote) : ''"
 		:notice="notice ? cnTranslate(notice) : ''"
 		:pill="pill ? cnTranslate(pill) : ''"
+		:testSubject="testSubject ? { ...testSubject, label: testSubject.label ? cnTranslate(testSubject.label) : '' } : null"
 		@save="onSave"
 		@run="onRun" />
 	<CnFlowDetail v-else
@@ -122,6 +123,16 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Board look: the records a test run can take as its subject,
+		 * `{ register, schema, labelField?, label? }`. Manifest key
+		 * `config.testSubject`; `label` is translated with the app's catalogue.
+		 */
+		testSubject: {
+			type: Object,
+			default: null,
+		},
+
 		/**
 		 * Board look: an info notice under the path. Manifest key
 		 * `config.notice`, translated with the app's catalogue.