@conduction/nextcloud-vue 2.56.0-beta.34 → 2.56.0-beta.36

package/src/components/CnObjectDataWidget/CnObjectDataWidget.vue

@@ -339,16 +339,30 @@
 									{{ stringifyCell(v) }}
 								</span>
 							</div>
-							<!-- Single plain OBJECT → key: value definition list. -->
+							<!-- Single plain OBJECT → key: value definition list; a
+							     nested plain object (e.g. a per-language map) gets
+							     its own list one level down. -->
 							<dl
 								v-else-if="fieldValueKind(field) === 'object'"
 								class="cn-object-data-widget__deflist">
 								<template v-for="(pair, pi) in objectEntries(rawOf(field))" :key="pi">
 									<dt>
-										{{ pair[0] }}
+										{{ nestedLabel(field, [pair[0]]) }}
 									</dt>
 									<dd>
-										{{ stringifyCell(pair[1]) }}
+										<dl
+											v-if="isPlainObject(pair[1])"
+											class="cn-object-data-widget__deflist cn-object-data-widget__deflist--nested">
+											<template v-for="(sub, si) in objectEntries(pair[1])" :key="si">
+												<dt>
+													{{ nestedLabel(field, [pair[0], sub[0]]) }}
+												</dt>
+												<dd>
+													<span class="cn-object-data-widget__deflist-text">{{ stringifyNested(sub[1]) }}</span>
+												</dd>
+											</template>
+										</dl>
+										<span v-else class="cn-object-data-widget__deflist-text">{{ stringifyNested(pair[1]) }}</span>
 									</dd>
 								</template>
 							</dl>
@@ -413,15 +427,20 @@ import CnFormDialog from '../CnFormDialog/CnFormDialog.vue'
 import { normalizeLook } from '../../composables/useLook.js'
 import { useObjectStore } from '../../store/index.js'
 import { groupDisplayName, loadGroupDisplayName, searchNextcloudGroups } from '../../utils/groupAutocomplete.js'
+import { humaniseKey } from '../../utils/humaniseKey.js'
 import { PANEL_ACTION_SINK } from '../../utils/panelActions.js'
 import { resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 import { fieldsFromSchema, formatValue } from '../../utils/schema.js'
 import { schemaRefSlug } from '../../utils/schemaRefSlug.js'
 import { resolveNextcloudUser, searchNextcloudUsers } from '../../utils/userAutocomplete.js'
+import { evaluateVisibleWhenLocal, isLocallyDecidableVisibleWhen } from '../../utils/visibleWhen.js'
 import { CnIcon } from '../CnIcon/index.js'
 import { CnObjectMetadataModal } from '../CnObjectMetadataModal/index.js'
 import { CnWidgetWrapper } from '../CnWidgetWrapper/index.js'
 
+// Widgets whose value the inline text fallback would corrupt.
+const STRUCTURED_WIDGETS = ['json', 'code', 'file', 'sub-objects', 'child-records']
+
 /**
  * CnObjectDataWidget — Schema-driven editable data grid widget.
  *
@@ -939,13 +958,18 @@ export default {
 				gridRow: (this.resolvedOverrides[field.key] && this.resolvedOverrides[field.key].gridRow) || 1,
 			}))
 
+			// Per-field condition: `overrides[key].visibleWhen` shows a field only
+			// for the objects it belongs to, such as a person's preferred name on
+			// a client that can also be an organisation.
+			const shown = withSpans.filter((field) => this.isVisibleByCondition(field))
+
 			if (!this.hideEmpty) {
-				return withSpans
+				return shown
 			}
 
 			// Keep a field the user is currently editing or has pending changes for,
 			// otherwise it would vanish mid-edit the moment its value is cleared.
-			return withSpans.filter((field) => field.key === this.editingField
+			return shown.filter((field) => field.key === this.editingField
 				|| field.key in this.dirtyFields
 				|| !this.isEmptyValue((this.objectData || {})[field.key]))
 		},
@@ -1357,6 +1381,59 @@ export default {
 			return (raw && typeof raw === 'object') ? Object.entries(raw) : []
 		},
 
+		/**
+		 * Whether a value is a plain object (not an array, not null).
+		 *
+		 * @param {unknown} v The value.
+		 * @return {boolean} True for a plain object.
+		 */
+		isPlainObject(v) {
+			return v !== null && typeof v === 'object' && !Array.isArray(v)
+		},
+
+		/**
+		 * Label for a key inside an object value: the sub-schema's `title`
+		 * (translated) when the schema describes it, else the key, made
+		 * readable when it is identifier-shaped (`shortDescription` → "Short
+		 * description"; `nl` stays `nl`).
+		 *
+		 * @param {object} field Resolved field definition.
+		 * @param {string[]} path Keys from the field's value down to this entry.
+		 * @return {string} The label.
+		 * @spec openspec/changes/data-widget-nested-objects/specs/data-widget-nested-objects/spec.md#requirement-a-nested-object-reads-as-a-list-per-key
+		 */
+		nestedLabel(field, path) {
+			let prop = ((this.schema && this.schema.properties) || {})[field.key]
+			for (const key of path) {
+				if (!this.isPlainObject(prop)) {
+					prop = null
+					break
+				}
+				prop = (prop.properties && prop.properties[key])
+					|| (this.isPlainObject(prop.additionalProperties) ? prop.additionalProperties : null)
+			}
+			if (prop && typeof prop.title === 'string' && prop.title) {
+				return this.cnTranslate(prop.title)
+			}
+			const key = String(path[path.length - 1])
+			return /[A-Z_-]/.test(key) ? humaniseKey(key) : key
+		},
+
+		/**
+		 * Stringify a value inside a definition list: a list of scalars reads
+		 * as a comma-separated line, anything else as `stringifyCell`.
+		 *
+		 * @param {unknown} v The value.
+		 * @return {string} The display string.
+		 * @spec openspec/changes/data-widget-nested-objects/specs/data-widget-nested-objects/spec.md#requirement-a-nested-object-reads-as-a-list-per-key
+		 */
+		stringifyNested(v) {
+			if (Array.isArray(v) && v.length && v.every((item) => item === null || typeof item !== 'object')) {
+				return v.map((item) => this.stringifyCell(item)).join(', ')
+			}
+			return this.stringifyCell(v)
+		},
+
 		/**
 		 * Stringify a scalar cell value; a nested object/array collapses to
 		 * compact JSON (never "[object Object]").
@@ -1684,15 +1761,53 @@ export default {
 			}))
 		},
 
+		/**
+		 * Whether a field's value cannot be edited inline: a structured widget
+		 * (json, code, file, sub-objects, child-records), or a plain-object /
+		 * list-of-objects value that is not a relation. Scalar widgets without
+		 * a dedicated editor (duration, language, …) keep the text fallback.
+		 *
+		 * @param {object} field Resolved field definition.
+		 * @return {boolean} True when only the form dialog can edit it.
+		 * @spec openspec/changes/data-widget-nested-objects/specs/data-widget-nested-objects/spec.md#requirement-a-structured-value-is-never-edited-inline
+		 */
+		hasNoInlineEditor(field) {
+			if (STRUCTURED_WIDGETS.includes(field.widget)) {
+				return true
+			}
+			const prop = ((this.schema && this.schema.properties) || {})[field.key]
+			if (this.isRelationField(prop)) {
+				return false
+			}
+			// A list of objects by schema, also while empty (it resolves to `tags`).
+			if (prop && prop.type === 'array' && prop.items && prop.items.type === 'object') {
+				return true
+			}
+			// Classify the raw value itself: fieldValueKind reports a formatter
+			// field as 'scalar' whatever it holds.
+			const raw = this.rawOf(field)
+			if (Array.isArray(raw)) {
+				return raw.some((v) => this.isPlainObject(v))
+			}
+			return this.isPlainObject(raw)
+		},
+
 		/**
 		 * Check if a field is editable.
 		 *
 		 * @param {object} field - Resolved field definition from resolvedFields
+		 * @spec openspec/changes/data-widget-nested-objects/specs/data-widget-nested-objects/spec.md#requirement-a-structured-value-is-never-edited-inline
 		 */
 		isEditable(field) {
 			if (!this.editable) {
 				return false
 			}
+			// No inline editor exists for structured values: the text fallback
+			// would commit "[object Object]". Those edit through the form dialog,
+			// unless the consumer supplies its own `field-<key>` editor slot.
+			if (!this.$slots['field-' + field.key] && this.hasNoInlineEditor(field)) {
+				return false
+			}
 			// Per-field override takes priority
 			const override = this.resolvedOverrides[field.key]
 			if (override && typeof override.editable === 'boolean') {
@@ -1709,6 +1824,29 @@ export default {
 			return !field.readOnly
 		},
 
+		/**
+		 * Evaluate a field's `visibleWhen` override against the object.
+		 *
+		 * The rule is the shared visibility predicate in its LOCAL mode
+		 * (`{ field, op, value }`, `all` / `any`, `appInstalled`), evaluated by
+		 * `evaluateVisibleWhenLocal` against the object with its unsaved
+		 * changes, so a field appears or goes the moment the field it depends
+		 * on changes. A rule that needs a request (`endpoint`, `source`) cannot
+		 * be decided here and is ignored: the field shows, as it did before
+		 * the rule existed.
+		 *
+		 * @param {object} field - Resolved field definition.
+		 * @return {boolean} True when the field is shown.
+		 */
+		isVisibleByCondition(field) {
+			const override = this.resolvedOverrides[field.key]
+			const rule = override ? override.visibleWhen : undefined
+			if (rule === undefined || rule === null || !isLocallyDecidableVisibleWhen(rule)) {
+				return true
+			}
+			return evaluateVisibleWhenLocal(rule, { ...(this.objectData || {}), ...this.dirtyFields })
+		},
+
 		/**
 		 * Evaluate a field's conditional read-only rule against the object data.
 		 *
@@ -2410,6 +2548,17 @@ export default {
 	overflow-wrap: anywhere;
 }
 
+/* A long description keeps its own paragraphs. Set on an inline span with no
+   surrounding template whitespace, so only the value's own line breaks show. */
+.cn-object-data-widget__deflist-text {
+	white-space: pre-wrap;
+}
+
+.cn-object-data-widget__deflist--nested {
+	padding-inline-start: 8px;
+	border-inline-start: 2px solid var(--color-border);
+}
+
 /* Responsive: collapse to single column on narrow widths */
 @media (max-width: 600px) {
 	.cn-object-data-widget__grid {

package/src/components/CnRecordListWidget/CnRecordListWidget.vue

@@ -212,7 +212,9 @@ export default {
 		/**
 		 * The list config: `{ register, schema, filter?, sort?, limit?, extend?,
 		 * presentation?, title?, meta?, text?, label?, pill?, trailing?, icon?,
-		 * rowRoute?, rowIdField?, headerLink?, headerNote?, emptyText?, errorText? }`.
+		 * rowRoute?, rowIdField?, headerLink?, headerNote?, emptyText?, errorText?,
+		 * valueLabels? }`. `valueLabels` maps a field's stored values to the labels
+		 * the templates show.
 		 *
 		 * @type {object}
 		 */
@@ -441,7 +443,40 @@ export default {
 		 * @return {string} The text, '' when a token is empty.
 		 */
 		fill(template, row) {
-			return typeof template === 'string' && template !== '' ? fillTemplate(this.translate(template), row, new Date(), this.templateContext) : ''
+			return typeof template === 'string' && template !== '' ? fillTemplate(this.translate(template), this.labelledRow(row), new Date(), this.templateContext) : ''
+		},
+
+		/**
+		 * The row as the templates read it: a field named in `valueLabels`
+		 * (`{ channel: { phone: "Phone", telefoon: "Phone" } }`) shows the
+		 * translated label of its stored value, so "{channel}" reads "Telefoon"
+		 * for both spellings the data holds. A value without a label stays as
+		 * stored. The pill, the badges and the sort read the stored value.
+		 *
+		 * @param {object} row The row.
+		 * @return {object} The row, or a shallow copy with labelled fields.
+		 * @spec openspec/changes/screens-record-list-value-labels/specs/record-list-value-labels/spec.md#requirement-a-record-list-template-can-show-a-label-for-a-stored-value
+		 */
+		labelledRow(row) {
+			const map = this.content?.valueLabels
+			if (!row || typeof row !== 'object' || !map || typeof map !== 'object') {
+				return row
+			}
+			let out = row
+			for (const [field, labels] of Object.entries(map)) {
+				const raw = row[field]
+				if (!labels || typeof labels !== 'object' || (typeof raw !== 'string' && typeof raw !== 'number')) {
+					continue
+				}
+				const label = labels[String(raw)]
+				if (typeof label === 'string' && label !== '') {
+					if (out === row) {
+						out = { ...row }
+					}
+					out[field] = this.translate(label)
+				}
+			}
+			return out
 		},
 
 		/**

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