@conduction/nextcloud-vue 2.83.0 → 2.85.0

package/src/components/CnReportsPage/CnReportsPage.vue

@@ -34,7 +34,31 @@
 <template>
 	<div class="cn-reports-page" :class="{ 'cn-reports-page--board': isBoard }">
 		<div class="cn-reports-page__header">
-			<h2 class="cn-reports-page__title">
+			<!-- The header buttons (`headerButtons`) beside the title, as the
+			     board's "Downloaden" and the buildiq square (board DcRapportages).
+			     Without them, and outside the board look, the title stands alone
+			     as before. -->
+			<div v-if="headerButtonsRow.length > 0" class="cn-reports-page__heading-row">
+				<h2 class="cn-reports-page__title">
+					{{ resolvedTitle }}
+				</h2>
+				<div class="cn-reports-page__header-buttons" data-testid="cn-reports-header-buttons">
+					<template v-for="button in headerButtonsRow" :key="button.key">
+						<CnBuildiqEditButton v-if="button.action === '__buildiq'" />
+						<NcButton
+							v-else
+							:variant="button.variant"
+							:data-testid="`cn-reports-header-button-${button.key}`"
+							@click="onHeaderButton(button)">
+							<template v-if="button.icon" #icon>
+								<CnIcon :name="button.icon" :size="20" />
+							</template>
+							{{ button.label }}
+						</NcButton>
+					</template>
+				</div>
+			</div>
+			<h2 v-else class="cn-reports-page__title">
 				{{ resolvedTitle }}
 			</h2>
 			<p v-if="resolvedDescription" class="cn-reports-page__description">
@@ -134,9 +158,12 @@
  * The Reports page: one surface listing an app's reports as cards.
  */
 import { translate as t } from '@nextcloud/l10n'
+import { NcButton } from '@nextcloud/vue'
 import { defineAsyncComponent } from 'vue'
+import CnBuildiqEditButton from '../CnBuildiqEditButton/CnBuildiqEditButton.vue'
 import CnIcon from '../CnIcon/CnIcon.vue'
 import { useLook } from '../../composables/useLook.js'
+import { resolveRegisteredHandler } from '../../utils/actionsDispatcher.js'
 import { followLinkClick } from '../../utils/linkNavigation.js'
 
 export default {
@@ -146,10 +173,18 @@ export default {
 		// Loaded only for a page that declares widgets: a cards-only reports
 		// page does not pull the dashboard in.
 		CnDashboardPage: defineAsyncComponent(() => import('../CnDashboardPage/CnDashboardPage.vue').then((m) => m.default)),
+		CnBuildiqEditButton,
 		CnIcon,
+		NcButton,
 	},
 
 	inject: {
+		/**
+		 * The v2 registry and the legacy customComponents map, provided by
+		 * CnAppRoot: a header action's named handler resolves against them.
+		 */
+		cnRegistry: { default: () => ({}) },
+		cnCustomComponents: { default: () => ({}) },
 		/**
 		 * The consuming app's translate function, provided by CnAppRoot.
 		 * Defaults to identity so the page still renders outside one.
@@ -268,6 +303,38 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * Buttons beside the title (`config.headerButtons`), as the board's
+		 * "Downloaden". Each is `{ label, action, variant?, icon?, id? }`:
+		 * `action` is the id of a `headerActions` entry, which says what the
+		 * click does. Under the board look the buildiq square sits between the
+		 * secondary buttons and the primary one. Empty (the default) changes
+		 * nothing.
+		 *
+		 * @spec openspec/changes/screens-reports-header-buttons/specs/reports-page/spec.md#requirement-a-reports-page-carries-header-buttons
+		 * @type {Array<{label: string, action: string, variant?: ('primary'|'secondary'), icon?: string, id?: string}>|null}
+		 */
+		headerButtons: {
+			type: Array,
+			default: null,
+		},
+
+		/**
+		 * The page's header actions (`config.headerActions`), in the shape of
+		 * an index page's: a header button names one by id. `handler` is a
+		 * function, `navigate` (with `route`, and `params`), `emit`, `none`,
+		 * or a registry name; `type: "navigate"` with a `target` URL opens
+		 * that URL in a new tab. Every click also emits `header-action`
+		 * `{ action, id }`, except for `handler: "none"`.
+		 *
+		 * @spec openspec/changes/screens-reports-header-buttons/specs/reports-page/spec.md#requirement-a-reports-page-carries-header-buttons
+		 * @type {Array<object>|null}
+		 */
+		headerActions: {
+			type: Array,
+			default: null,
+		},
+
 		/**
 		 * The look to draw in: `board` or `nextcloud`. Absent: the look
 		 * CnAppRoot provides (`cnLook`), else `nextcloud`.
@@ -290,6 +357,8 @@ export default {
 		},
 	},
 
+	emits: ['header-action'],
+
 	setup(props) {
 		const { isBoard } = useLook(props)
 		return { isBoard }
@@ -339,6 +408,8 @@ export default {
 				'emptyLabel',
 				'widgets',
 				'layout',
+				'headerButtons',
+				'headerActions',
 			]) {
 				if (this[key] !== null && this[key] !== undefined) {
 					fromProps[key] = this[key]
@@ -378,6 +449,51 @@ export default {
 			})
 		},
 
+		/**
+		 * The declared header buttons that have a label and an action,
+		 * translated, each with a stable key and a variant.
+		 *
+		 * @spec openspec/changes/screens-reports-header-buttons/specs/reports-page/spec.md#requirement-a-reports-page-carries-header-buttons
+		 * @return {Array<{key: string, label: string, action: string, variant: string, icon: string}>} The buttons.
+		 */
+		resolvedHeaderButtons() {
+			const declared = Array.isArray(this.config.headerButtons) ? this.config.headerButtons : []
+			return declared
+				.filter((button) => button && typeof button === 'object'
+					&& typeof button.action === 'string' && button.action !== ''
+					&& typeof button.label === 'string' && button.label !== '')
+				.map((button) => ({
+					key: String(button.id || button.action),
+					label: this.tr(button.label),
+					action: button.action,
+					variant: button.variant === 'primary' ? 'primary' : 'secondary',
+					icon: typeof button.icon === 'string' ? button.icon : '',
+				}))
+		},
+
+		/**
+		 * The header row in the order it renders. Without the board look:
+		 * the declared buttons in the declared order. Under the board look:
+		 * the secondary buttons, the buildiq square, then the primary ones,
+		 * as the board draws "Downloaden" and the square. No declared button
+		 * leaves the header as it was, without the square.
+		 *
+		 * @spec openspec/changes/screens-reports-header-buttons/specs/reports-page/spec.md#requirement-a-reports-page-carries-header-buttons
+		 * @return {Array<object>} The buttons; the square is `{ key: '__buildiq', action: '__buildiq' }`.
+		 */
+		headerButtonsRow() {
+			const buttons = this.resolvedHeaderButtons
+			if (buttons.length === 0 || !this.isBoard) {
+				return buttons
+			}
+			const square = { key: '__buildiq', action: '__buildiq', variant: 'secondary', label: '', icon: '' }
+			return [
+				...buttons.filter((button) => button.variant !== 'primary'),
+				square,
+				...buttons.filter((button) => button.variant === 'primary'),
+			]
+		},
+
 		/**
 		 * The heading.
 		 *
@@ -567,6 +683,47 @@ export default {
 			}
 		},
 
+		/**
+		 * A header button was clicked: run the `headerActions` entry it names
+		 * and emit `header-action`, as an index page's header button does.
+		 *
+		 * @spec openspec/changes/screens-reports-header-buttons/specs/reports-page/spec.md#requirement-a-reports-page-carries-header-buttons
+		 * @param {{action: string}} button The resolved button.
+		 * @return {void}
+		 */
+		onHeaderButton(button) {
+			const id = button.action
+			const actions = Array.isArray(this.config.headerActions) ? this.config.headerActions : []
+			const entry = actions.find((action) => action && action.id === id) || null
+			const handler = entry ? entry.handler : undefined
+			if (handler === 'none') {
+				return
+			}
+			if (typeof handler === 'function') {
+				handler({ actionId: id })
+			} else if (handler === 'navigate' && entry.route) {
+				const params = (entry.params && typeof entry.params === 'object') ? entry.params : null
+				if (this.$router && typeof this.$router.push === 'function') {
+					this.$router.push(params ? { name: entry.route, params } : { name: entry.route })
+				}
+			} else if (entry && entry.type === 'navigate' && typeof entry.target === 'string' && entry.target !== '') {
+				window.open(entry.target, '_blank', 'noopener,noreferrer')
+			} else if (typeof handler === 'string' && handler !== 'emit') {
+				const resolved = resolveRegisteredHandler(handler, this.cnRegistry, this.cnCustomComponents)
+				if (typeof resolved === 'function') {
+					resolved({ actionId: id })
+				}
+			}
+			/**
+			 * A header button was clicked (`headerButtons`), after its
+			 * `headerActions` entry ran; not for `handler: "none"`.
+			 *
+			 * @event header-action
+			 * @property {{action: string, id: string}} payload The id of the `headerActions` entry the button names, as `action` and `id`.
+			 */
+			this.$emit('header-action', { action: id, id })
+		},
+
 		/**
 		 * Navigate by route NAME on a plain click; a modified or middle click
 		 * is left to the browser so it can open the card's href elsewhere.
@@ -598,6 +755,27 @@ export default {
 	margin: 0 0 4px;
 }
 
+.cn-reports-page__heading-row {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 12px 24px;
+}
+
+.cn-reports-page__heading-row .cn-reports-page__title {
+	flex: 1 1 320px;
+	min-width: 0;
+}
+
+.cn-reports-page__header-buttons {
+	display: flex;
+	flex: none;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 10px;
+}
+
 .cn-reports-page__description {
 	margin: 0 0 16px;
 	color: var(--color-text-maxcontrast);

package/src/components/CnSettingsPage/CnSettingsPage.vue

@@ -303,6 +303,7 @@ import {
 import ContentSave from 'vue-material-design-icons/ContentSave.vue'
 import CnBuildiqEditButton from '../CnBuildiqEditButton/CnBuildiqEditButton.vue'
 import CnRegisterMapping from '../CnRegisterMapping/CnRegisterMapping.vue'
+import CnToggleTableWidget from '../CnToggleTableWidget/CnToggleTableWidget.vue'
 import CnVersionInfoCard from '../CnVersionInfoCard/CnVersionInfoCard.vue'
 import { useLook } from '../../composables/useLook.js'
 import { prefixUrl } from '../../utils/headers.js'
@@ -340,6 +341,8 @@ const COMPONENT_DISCRIMINATOR = Symbol('cn-settings-component-widget')
 const BUILTIN_SETTINGS_WIDGETS = Object.freeze({
 	'version-info': CnVersionInfoCard,
 	'register-mapping': CnRegisterMapping,
+	// Rows with a switch: objects (`bind.mode: 'each'`) or a config map (`'map'`).
+	'toggle-table': CnToggleTableWidget,
 	component: COMPONENT_DISCRIMINATOR,
 })
 
@@ -367,7 +370,8 @@ const BUILTIN_SETTINGS_WIDGETS = Object.freeze({
  *  - `widgets[]`   — ordered list of widgets. Each entry has a `type`
  *    string and optional `props`. Built-in widget types resolve
  *    first (`version-info` → `CnVersionInfoCard`, `register-mapping`
- *    → `CnRegisterMapping`); unknown types fall back to the
+ *    → `CnRegisterMapping`, `toggle-table` → `CnToggleTableWidget`);
+ *    unknown types fall back to the
  *    `customComponents` registry.
  *
  * Widget events (e.g. CnRegisterMapping's `@save`, CnVersionInfoCard's

package/src/components/CnStagesWidget/CnStagesWidget.vue

@@ -59,8 +59,15 @@
 						class="cn-stages-widget__bar-label"
 						:title="stage.hint || stage.label"
 						:aria-disabled="stage.disabled && stage.clickable ? 'true' : null"
+						:aria-busy="movingTo === stage.id ? 'true' : null"
 						:data-testid="`cn-stages-widget-stage-${stage.id}`"
 						@click="onBarClick(stage)">
+						<NcLoadingIcon
+							v-if="movingTo === stage.id"
+							class="cn-stages-widget__moving"
+							:size="16"
+							:name="movingMessage"
+							data-testid="cn-stages-widget-moving" />
 						{{ stage.label }}<span v-if="stage.state === 'current'" class="cn-stages-widget__sr-only"> ({{ tr('current step') }})</span>
 					</component>
 					<span v-if="stage.date" class="cn-stages-widget__bar-date">{{ stage.date }}</span>
@@ -83,7 +90,19 @@
 				@stageClick="onStageClick"
 				@stageBlocked="onStageBlocked">
 				<template #label="{ stage }">
-					<span class="cn-timeline-stages__label" :data-testid="`cn-stages-widget-stage-${stage.id}`">
+					<span
+						class="cn-timeline-stages__label"
+						:aria-busy="movingTo === stage.id ? 'true' : null"
+						:data-testid="`cn-stages-widget-stage-${stage.id}`">
+						<!-- The move in flight. A transition can take seconds, and
+						     a strip that shows nothing until it returns reads as
+						     one that never moved. -->
+						<NcLoadingIcon
+							v-if="movingTo === stage.id"
+							class="cn-stages-widget__moving"
+							:size="16"
+							:name="movingMessage"
+							data-testid="cn-stages-widget-moving" />
 						{{ stage.label }}
 					</span>
 					<span v-if="stage.subtitle" class="cn-timeline-stages__subtitle">
@@ -156,8 +175,11 @@
 			v-if="pendingAction"
 			:transition="pendingAction"
 			:schema="schema"
+			:error="inputError"
+			:fieldErrors="inputFieldErrors"
+			:busy="busy"
 			@confirm="onInputConfirm"
-			@close="pendingAction = null" />
+			@close="closeInputDialog" />
 	</div>
 </template>
 
@@ -177,6 +199,7 @@ import {
 	performTransition,
 	readAvailableActions,
 	transitionError,
+	transitionFieldErrors,
 } from '../../composables/useLifecycleTransitions.js'
 import { normalizeLook } from '../../composables/useLook.js'
 import { useObjectStore } from '../../store/useObjectStore.js'
@@ -534,6 +557,17 @@ export default {
 			pendingAction: null,
 			/** @type {boolean} Whether a move is running. */
 			busy: false,
+			/**
+			 * @type {string} The stage a running move leads to, or ''. Drives
+			 * the loading indicator on that one stage.
+			 */
+			movingTo: '',
+			/** @type {string} A refusal shown inside the open input dialog. */
+			inputError: '',
+			/** @type {string[]} The input keys that refusal named. */
+			inputFieldErrors: [],
+			/** @type {string[]} The input keys the last refused move named. */
+			lastFieldErrors: [],
 			/** @type {string} Why the last move failed, or ''. */
 			moveError: '',
 			/**
@@ -766,6 +800,20 @@ export default {
 			return this.interactive && !this.busy
 		},
 
+		/**
+		 * What the stage a move is running to says while it runs: the
+		 * loading indicator's name and the live region's sentence.
+		 *
+		 * @return {string} The sentence, or '' when nothing is moving.
+		 */
+		movingMessage() {
+			if (!this.movingTo) {
+				return ''
+			}
+			const stage = this.stages.find((s) => s.id === this.movingTo)
+			return this.tr('Moving to {stage}', { stage: stage ? stage.label : this.movingTo })
+		},
+
 		/**
 		 * The allowed moves by the stage they lead to, or null while they are
 		 * unknown.
@@ -1225,13 +1273,44 @@ export default {
 		 * @param {object} data The collected input values.
 		 * @return {void}
 		 */
-		onInputConfirm(data) {
+		async onInputConfirm(data) {
 			const pending = this.pendingAction
-			this.pendingAction = null
 			if (!pending || !pending.__request) {
+				this.closeInputDialog()
+				return
+			}
+			this.inputError = ''
+			this.inputFieldErrors = []
+			// THE DIALOG STAYS OPEN WHILE THE MOVE RUNS, with its confirm
+			// button busy. Closing it first left the person looking at an
+			// unchanged strip for as long as the transition took, which on a
+			// live case was long enough to reload the page thinking it had
+			// not been sent.
+			const moved = await this.performMove(pending.__request, data)
+			if (this.pendingAction !== pending) {
+				// Closed while the move ran; nothing left to update.
 				return
 			}
-			this.performMove(pending.__request, data)
+			if (moved) {
+				this.closeInputDialog()
+				return
+			}
+			// Refused. The sentence goes into the dialog the person is looking
+			// at, with what they typed still in it.
+			this.inputError = this.moveError
+			this.inputFieldErrors = this.lastFieldErrors
+			this.moveError = ''
+		},
+
+		/**
+		 * Close the input dialog and forget the refusal it was showing.
+		 *
+		 * @return {void}
+		 */
+		closeInputDialog() {
+			this.pendingAction = null
+			this.inputError = ''
+			this.inputFieldErrors = []
 		},
 
 		/**
@@ -1239,11 +1318,17 @@ export default {
 		 *
 		 * @param {{stage: {id: string, label: string}, action: string}} request The move.
 		 * @param {object} [data] The collected transition inputs, when any.
-		 * @return {Promise<void>}
+		 * @return {Promise<boolean>} Whether the move was made.
 		 */
 		async performMove(request, data) {
 			this.busy = true
+			this.movingTo = request.stage.id
 			this.moveError = ''
+			this.lastFieldErrors = []
+			// Said as the move starts, not only when it lands: a screen reader
+			// user otherwise hears nothing for as long as the server takes.
+			this.statusMessage = this.movingMessage
+			let moved = false
 			try {
 				if (this.lifecycleMode) {
 					await performTransition(this.recordId, request.action, data)
@@ -1270,11 +1355,16 @@ export default {
 				if (this.lifecycleMode) {
 					await this.loadActions()
 				}
+				moved = true
 			} catch (error) {
 				this.moveError = transitionError(error, this.tr('The move could not be made'))
+				this.lastFieldErrors = transitionFieldErrors(error)
+				this.statusMessage = this.moveError
 			} finally {
 				this.busy = false
+				this.movingTo = ''
 			}
+			return moved
 		},
 
 		/**
@@ -1501,6 +1591,13 @@ export default {
 	padding: 8px 0;
 }
 
+/* The stage a running move leads to: a small spinner before its label. */
+.cn-stages-widget__moving {
+	display: inline-flex;
+	vertical-align: middle;
+	margin-inline-end: 4px;
+}
+
 .cn-stages-widget__notice {
 	margin: 0;
 	color: var(--color-text-maxcontrast);