@conduction/nextcloud-vue 2.98.0 → 2.100.0

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.

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -1578,6 +1578,8 @@ export default {
 	 */
 	inject: {
 		cnCustomComponents: { default: () => ({}) },
+		/** The permissions the user holds, provided by CnAppRoot; for gated page tabs. */
+		cnPermissions: { default: () => [] },
 		/** The app id CnAppRoot provides, for the plural form of `countSubtitle`. */
 		cnAppId: { default: '' },
 		/**
@@ -1668,7 +1670,9 @@ export default {
 
 		/**
 		 * A note after the breadcrumb and a middle dot (manifest `config.headerMeta`),
-		 * such as "{total} open": `{total}` and `{shown}` are the list's counts.
+		 * such as "{total} open": `{total}` and `{shown}` are the list's counts,
+		 * and `{count:<name>}` the count of a list named in `headerMetaCounts`
+		 * ("{total} contracten bij {count:suppliers} leveranciers").
 		 *
 		 * @spec openspec/changes/page-header-breadcrumb/specs/page-header/spec.md#requirement-a-list-dashboard-or-settings-page-can-show-a-breadcrumb-and-a-meta-note
 		 */
@@ -1677,12 +1681,29 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * The other lists `headerMeta` counts (manifest `config.headerMetaCounts`):
+		 * `{ <name>: { register, schema, filter? } }`, each read as one list
+		 * total and filled in for `{count:<name>}`. While a count loads, or when
+		 * it fails, the note is left out rather than shown with a gap.
+		 *
+		 * @type {Record<string, {register: string, schema: string, filter?: object}>|null}
+		 */
+		headerMetaCounts: {
+			type: Object,
+			default: null,
+		},
+
 		/**
 		 * Tabs to sibling pages above the toolbar (manifest `config.pageTabs`),
 		 * each `{ id?, label, route?, params?, query?, href?, countFrom?: {
-		 * register, schema, filter? } }`: DqPrivacy's "AVG-verzoeken |
-		 * Datalekken". The current page's tab is marked; `countFrom` adds the
-		 * count of that list. Wins over a named source's own page tabs.
+		 * register, schema, filter? }, adminOnly?, permission? }`: DqPrivacy's
+		 * "AVG-verzoeken | Datalekken". The current page's tab is marked;
+		 * `countFrom` adds the count of that list. A tab with `adminOnly` shows
+		 * only to an instance admin, one with `permission` only to a user who
+		 * holds it. That hides the tab and nothing more: the page it points to
+		 * must still refuse the user on the server. Wins over a named source's
+		 * own page tabs.
 		 *
 		 * @type {Array<object>|null}
 		 * @spec openspec/changes/index-page-tabs-notice/specs/index-page/spec.md#requirement-an-index-page-can-link-its-sibling-pages-as-tabs
@@ -3722,6 +3743,8 @@ export default {
 			filterStripCounts: null,
 			/** The `countFrom` counts of the manifest page tabs, by index. */
 			pageTabCounts: {},
+			/** The `headerMetaCounts` totals, by name; a failed one is null. */
+			headerMetaCountValues: {},
 			/** The tabs `quickFiltersFrom` produced, or null before they load. */
 			generatedQuickFilters: null,
 			/** Count per saved-view id, for the views control; null = none. */
@@ -6202,9 +6225,13 @@ export default {
 			if (!Array.isArray(this.pageTabs) || this.pageTabs.length === 0) {
 				return this.sourcePageTabs
 			}
+			// The index is the tab's place in `pageTabs`, which is how its count
+			// is keyed, so the tabs are numbered before any is left out.
 			return this.pageTabs
-				.filter((tab) => tab && typeof tab.label === 'string' && tab.label !== '' && (tab.route || tab.to || tab.href))
-				.map((tab, index) => {
+				.map((tab, index) => ({ tab, index }))
+				.filter(({ tab }) => tab && typeof tab.label === 'string' && tab.label !== '' && (tab.route || tab.to || tab.href))
+				.filter(({ tab }) => this.pageTabVisible(tab))
+				.map(({ tab, index }) => {
 					const to = tab.route
 						? { name: tab.route, ...(tab.params ? { params: tab.params } : {}), ...(tab.query ? { query: tab.query } : {}) }
 						: (tab.to || tab.href)
@@ -6646,9 +6673,41 @@ export default {
 				return ''
 			}
 			const total = this.effectivePagination?.total
-			return this.cnTranslate(headerMeta)
+			let missing = false
+			const text = this.cnTranslate(headerMeta)
 				.replace('{shown}', String(this.effectiveObjects.length))
 				.replace('{total}', typeof total === 'number' ? String(total) : '')
+				.replace(/\{count:([\w-]+)\}/g, (match, name) => {
+					const value = this.headerMetaCountValues[name]
+					if (typeof value !== 'number') {
+						missing = true
+						return ''
+					}
+					return String(value)
+				})
+			return missing ? '' : text
+		},
+
+		/**
+		 * Whether the header note carries a count, so the board leaves out its
+		 * own "{shown} of {total}" line (DqPrivacy, DqContracten).
+		 *
+		 * @return {boolean}
+		 */
+		headerMetaCarriesCount() {
+			const headerMeta = this.presented('headerMeta')
+			return typeof headerMeta === 'string' && /\{(shown|total|count:[\w-]+)\}/.test(headerMeta)
+		},
+
+		/**
+		 * What the header note's other counts depend on, as one key.
+		 *
+		 * @return {string}
+		 */
+		headerMetaCountKey() {
+			const sources = this.headerMetaCounts && typeof this.headerMetaCounts === 'object' ? this.headerMetaCounts : {}
+			const valid = Object.entries(sources).filter(([, from]) => from && from.register && from.schema)
+			return valid.length > 0 ? JSON.stringify(valid) : ''
 		},
 
 		headerDescription() {
@@ -6661,6 +6720,10 @@ export default {
 				// reads "14 van 14" in Dutch; a page's own template goes
 				// through the app's label lookup.
 				const countText = this.presented('countText')
+				// The note after the breadcrumb already says how many there are.
+				if (!countText && !this.countSubtitle && this.headerMetaCarriesCount) {
+					return this.description
+				}
 				if (!countText && !this.countSubtitle) {
 					return t('nextcloud-vue', '{shown} of {total}', { shown, total })
 				}
@@ -6907,6 +6970,13 @@ export default {
 			},
 		},
 
+		headerMetaCountKey: {
+			immediate: true,
+			handler() {
+				this.loadHeaderMetaCounts()
+			},
+		},
+
 		pageTabCountKey: {
 			immediate: true,
 			/** @spec openspec/changes/index-page-tabs-notice/specs/index-page/spec.md#requirement-an-index-page-can-link-its-sibling-pages-as-tabs */
@@ -7326,6 +7396,65 @@ export default {
 			]
 		},
 
+		/**
+		 * Whether Nextcloud says the user administers this instance; false
+		 * when the user cannot be read.
+		 *
+		 * @return {boolean}
+		 */
+		viewerIsAdmin() {
+			try {
+				return getCurrentUser()?.isAdmin === true
+			} catch {
+				return false
+			}
+		},
+
+		/**
+		 * Whether a manifest page tab shows to this user: an `adminOnly` tab to
+		 * an instance admin, a tab with a `permission` to a user who holds it
+		 * (as a menu entry: with no permissions known, it shows). This only
+		 * decides whether the tab is drawn. It is not access control; the
+		 * page behind the tab must enforce its own access on the server.
+		 *
+		 * @param {object} tab The tab declaration.
+		 * @return {boolean} True when the tab is drawn.
+		 */
+		pageTabVisible(tab) {
+			if (tab.adminOnly === true && !this.viewerIsAdmin()) {
+				return false
+			}
+			if (tab.permission) {
+				const held = Array.isArray(this.cnPermissions) ? this.cnPermissions : []
+				if (held.length > 0 && !held.includes(tab.permission)) {
+					return false
+				}
+			}
+			return true
+		},
+
+		/**
+		 * Read the totals of the lists `headerMetaCounts` names, one list
+		 * request each. A failed count is null and leaves the note out.
+		 *
+		 * @return {Promise<void>}
+		 */
+		async loadHeaderMetaCounts() {
+			const key = this.headerMetaCountKey
+			if (key === '') {
+				this.headerMetaCountValues = {}
+				return
+			}
+			const ctx = typeof this.selfFetchTokenCtx === 'function' ? this.selfFetchTokenCtx() : {}
+			const values = {}
+			await Promise.all(JSON.parse(key).map(async ([name, from]) => {
+				values[name] = await fetchListTotal(from.register, from.schema, from.filter || {}, ctx).catch(() => null)
+			}))
+			if (key === this.headerMetaCountKey) {
+				this.headerMetaCountValues = values
+			}
+		},
+
 		/**
 		 * Count the lists behind the manifest page tabs (`countFrom`), one list
 		 * request each. A failed count shows no number.

package/src/components/CnOrderedListField/CnOrderedListField.vue

@@ -19,7 +19,16 @@
 				class="cn-ordered-list-field__row"
 				:data-testid="`cn-ordered-list-row-${row.value}`">
 				<span class="cn-ordered-list-field__position" aria-hidden="true">{{ index + 1 }}</span>
-				<span class="cn-ordered-list-field__text">{{ row.label }}</span>
+				<span v-if="row.icon" class="cn-ordered-list-field__tile" aria-hidden="true">
+					<CnIcon :name="row.icon" :size="18" />
+				</span>
+				<span class="cn-ordered-list-field__text">
+					<span class="cn-ordered-list-field__name">{{ row.label }}</span>
+					<span v-if="row.description"
+						:id="descriptionId(row)"
+						class="cn-ordered-list-field__description"
+						:data-testid="`cn-ordered-list-description-${row.value}`">{{ row.description }}</span>
+				</span>
 				<span class="cn-ordered-list-field__actions">
 					<button
 						type="button"
@@ -27,6 +36,7 @@
 						:disabled="disabled || index === 0"
 						:aria-label="t('nextcloud-vue', 'Move {item} up', { item: row.label })"
 						:data-testid="`cn-ordered-list-up-${row.value}`"
+						:aria-describedby="row.description ? descriptionId(row) : null"
 						@click="move(index, index - 1)">
 						<ChevronUp :size="20" />
 					</button>
@@ -36,6 +46,7 @@
 						:disabled="disabled || index === rows.length - 1"
 						:aria-label="t('nextcloud-vue', 'Move {item} down', { item: row.label })"
 						:data-testid="`cn-ordered-list-down-${row.value}`"
+						:aria-describedby="row.description ? descriptionId(row) : null"
 						@click="move(index, index + 1)">
 						<ChevronDown :size="20" />
 					</button>
@@ -45,6 +56,7 @@
 						:disabled="disabled"
 						:aria-label="t('nextcloud-vue', 'Remove {item}', { item: row.label })"
 						:data-testid="`cn-ordered-list-remove-${row.value}`"
+						:aria-describedby="row.description ? descriptionId(row) : null"
 						@click="remove(index)">
 						<Close :size="20" />
 					</button>
@@ -66,7 +78,19 @@
 				:filterable="!searchable"
 				data-testid="cn-ordered-list-add"
 				@search="onSearch"
-				@update:modelValue="add" />
+				@update:modelValue="add">
+				<template #option="option">
+					<span class="cn-ordered-list-field__option">
+						<span v-if="option.icon" class="cn-ordered-list-field__tile" aria-hidden="true">
+							<CnIcon :name="option.icon" :size="18" />
+						</span>
+						<span class="cn-ordered-list-field__text">
+							<span class="cn-ordered-list-field__name">{{ option.label }}</span>
+							<span v-if="option.description" class="cn-ordered-list-field__description">{{ option.description }}</span>
+						</span>
+					</span>
+				</template>
+			</NcSelect>
 		</div>
 		<p class="hidden-visually" aria-live="polite" data-testid="cn-ordered-list-live">
 			{{ announcement }}
@@ -80,6 +104,7 @@ import { NcSelect } from '@nextcloud/vue'
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 import Close from 'vue-material-design-icons/Close.vue'
+import CnIcon from '../CnIcon/CnIcon.vue'
 
 let orderedListUid = 0
 
@@ -109,7 +134,7 @@ let orderedListUid = 0
 export default {
 	name: 'CnOrderedListField',
 
-	components: { ChevronDown, ChevronUp, Close, NcSelect },
+	components: { ChevronDown, ChevronUp, Close, CnIcon, NcSelect },
 
 	props: {
 		/** The values in their order. */
@@ -119,8 +144,11 @@ export default {
 		},
 
 		/**
-		 * The choices, `{ value, label }` (a plain string is its own label).
-		 * A value in `modelValue` without a choice shows the value itself.
+		 * The choices, `{ value, label, description?, icon? }` (a plain string
+		 * is its own label). `description` is a muted second line ("19 open
+		 * cases"), in the row and in the picker; `icon` an MDI name drawn in a
+		 * small tile before the label. A value in `modelValue` without a
+		 * choice shows the value itself.
 		 */
 		options: {
 			type: Array,
@@ -185,17 +213,22 @@ export default {
 		choices() {
 			return (Array.isArray(this.options) ? this.options : [])
 				.map((option) => (option && typeof option === 'object'
-					? { value: String(option.value ?? option.id ?? ''), label: String(option.label ?? option.title ?? option.value ?? '') }
-					: { value: String(option), label: String(option) }))
+					? {
+							value: String(option.value ?? option.id ?? ''),
+							label: String(option.label ?? option.title ?? option.value ?? ''),
+							description: typeof option.description === 'string' ? option.description : '',
+							icon: typeof option.icon === 'string' ? option.icon : '',
+						}
+					: { value: String(option), label: String(option), description: '', icon: '' }))
 				.filter((option) => option.value !== '')
 		},
 
-		/** @return {Array<{value: string, label: string}>} The rows, in order. */
+		/** @return {Array<{value: string, label: string, description: string, icon: string}>} The rows, in order. */
 		rows() {
 			return (Array.isArray(this.modelValue) ? this.modelValue : []).map((value) => {
 				const key = String(value)
 				const choice = this.choices.find((option) => option.value === key)
-				return { value: key, label: choice ? choice.label : key }
+				return choice || { value: key, label: key, description: '', icon: '' }
 			})
 		},
 
@@ -214,6 +247,16 @@ export default {
 	methods: {
 		t,
 
+		/**
+		 * The id of a row's description, which its buttons name as their description.
+		 *
+		 * @param {{value: string}} row The row.
+		 * @return {string}
+		 */
+		descriptionId(row) {
+			return `${this.labelId}-desc-${String(row.value).replace(/[^\w-]/g, '-')}`
+		},
+
 		/**
 		 * Emit the new order.
 		 *
@@ -383,4 +426,33 @@ export default {
 	margin: 0;
 	color: var(--color-text-maxcontrast);
 }
+
+.cn-ordered-list-field__tile {
+	display: inline-flex;
+	flex: none;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	border-radius: var(--border-radius-element, 8px);
+	background: var(--color-background-dark);
+	color: var(--color-main-text);
+}
+
+.cn-ordered-list-field__name {
+	display: block;
+}
+
+.cn-ordered-list-field__description {
+	display: block;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
+.cn-ordered-list-field__option {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	min-width: 0;
+}
 </style>