@conduction/nextcloud-vue 2.75.0 → 2.77.0

package/src/components/CnIndexPage/selfModeActions.js

@@ -13,6 +13,58 @@ function resolveNameField(ctx) {
 
 function findSource(ctx, id) {
 	return ctx.effectiveObjects().find((o) => o.id === id || o['@self']?.id === id)
+		|| (typeof ctx.knownRow === 'function' ? ctx.knownRow(id) : undefined)
+}
+
+/**
+ * The register/schema of a row that belongs to another pair than the page's,
+ * in a list fetched from a `collectionUrl`. Registers a store type for that
+ * pair on first use. Returns null for rows of the page's own pair, and always
+ * without a `collectionUrl`.
+ *
+ * @param {object} opts Page context.
+ * @param {string} opts.collectionUrl The page's collection endpoint, or ''.
+ * @param {string} opts.register The page's register.
+ * @param {string} opts.schema The page's schema.
+ * @param {object|null} opts.primarySchema The page's resolved schema.
+ * @param {object|null} [opts.primaryRegister] The page's resolved register, which matches a slug `register` to `@self.register`.
+ * @param {object|null} opts.store The object store.
+ * @param {object} row The row.
+ * @return {{register: string, schema: string, type: string}|null} The row's own pair.
+ */
+export function resolveRowTarget({ collectionUrl, register, schema, primarySchema, primaryRegister, store }, row) {
+	if (!collectionUrl || !row || !store) {
+		return null
+	}
+	const self = row['@self'] || {}
+	const reg = self.register !== undefined && self.register !== null ? String(self.register) : ''
+	const sch = self.schema !== undefined && self.schema !== null ? String(self.schema) : ''
+	if (!reg || !sch) {
+		return null
+	}
+	const idsOf = (...values) => values.filter((v) => v !== undefined && v !== null && v !== '').map(String)
+	const schemaIds = idsOf(schema, primarySchema && primarySchema.id, primarySchema && primarySchema.slug)
+	const registerIds = idsOf(register, primaryRegister && primaryRegister.id, primaryRegister && primaryRegister.slug)
+	if (schemaIds.includes(sch) && registerIds.includes(reg)) {
+		return null
+	}
+	const type = `${reg}-${sch}`
+	if (!store.objectTypeRegistry?.[type]) {
+		store.registerObjectType(type, sch, reg, { registerSlug: reg, schemaSlug: sch })
+	}
+	return { register: reg, schema: sch, type }
+}
+
+/**
+ * The store type a row is written through: its own pair's, or the page's.
+ *
+ * @param {object} ctx Accessor closures.
+ * @param {object} [row] The row.
+ * @return {string} The type slug.
+ */
+function typeFor(ctx, row) {
+	const target = row && typeof ctx.rowTarget === 'function' ? ctx.rowTarget(row) : null
+	return target ? target.type : ctx.selfObjectType()
 }
 
 /**
@@ -25,6 +77,10 @@ function findSource(ctx, id) {
  */
 function copyAddress(ctx, source) {
 	const self = source['@self'] || {}
+	const target = typeof ctx.rowTarget === 'function' ? ctx.rowTarget(source) : null
+	if (target) {
+		return { register: target.register, schema: target.schema, id: String(source.id || self.id) }
+	}
 	const reg = ctx.register()
 	const sch = ctx.schema()
 	const register = (typeof reg === 'string' && reg) || self.register
@@ -54,12 +110,12 @@ function refreshList(ctx) {
 	}
 }
 
-function storeError(ctx) {
-	return ctx.selfObjectStore()?.getError?.(ctx.selfObjectType())
+function storeError(ctx, type = ctx.selfObjectType()) {
+	return ctx.selfObjectStore()?.getError?.(type)
 }
 
-function storeErrorMessage(ctx, fallback) {
-	const err = storeError(ctx)
+function storeErrorMessage(ctx, fallback, type) {
+	const err = storeError(ctx, type)
 	return (err && err.message) || fallback
 }
 
@@ -76,13 +132,14 @@ export function createSelfModeActions(ctx) {
 			return false
 		}
 		try {
-			const ok = await ctx.selfObjectStore().deleteObject(ctx.selfObjectType(), id)
+			const type = typeFor(ctx, findSource(ctx, id))
+			const ok = await ctx.selfObjectStore().deleteObject(type, id)
 			if (ok) {
 				ctx.setResults.singleDelete({ success: true })
 				ctx.emit('delete', id)
 				refreshList(ctx)
 			} else {
-				ctx.setResults.singleDelete({ error: storeErrorMessage(ctx, 'Delete failed') })
+				ctx.setResults.singleDelete({ error: storeErrorMessage(ctx, 'Delete failed', type) })
 			}
 		} catch (err) {
 			ctx.setResults.singleDelete({ error: (err && err.message) || 'Delete failed' })
@@ -95,12 +152,28 @@ export function createSelfModeActions(ctx) {
 			return false
 		}
 		try {
-			const { successfulIds, failedIds } = await ctx.selfObjectStore().deleteObjects(ctx.selfObjectType(), ids)
+			// One request per pair: a mixed list holds rows of several types.
+			const idsByType = new Map()
+			for (const id of ids) {
+				const type = typeFor(ctx, findSource(ctx, id))
+				idsByType.set(type, [...(idsByType.get(type) || []), id])
+			}
+			const successfulIds = []
+			const failedIds = []
+			let failedType = null
+			for (const [type, typeIds] of idsByType) {
+				const outcome = await ctx.selfObjectStore().deleteObjects(type, typeIds)
+				successfulIds.push(...outcome.successfulIds)
+				failedIds.push(...outcome.failedIds)
+				if (outcome.failedIds.length > 0 && failedType === null) {
+					failedType = type
+				}
+			}
 			if (failedIds.length === 0) {
 				ctx.setResults.massDelete({ success: true, successfulIds })
 			} else {
 				ctx.setResults.massDelete({
-					error: storeErrorMessage(ctx, `Failed to delete ${failedIds.length} item(s)`),
+					error: storeErrorMessage(ctx, `Failed to delete ${failedIds.length} item(s)`, failedType),
 					successfulIds,
 					failedIds,
 				})
@@ -142,13 +215,14 @@ export function createSelfModeActions(ctx) {
 				}
 			}
 			const clone = cloneObjectForCopy(source, newName, resolveNameField(ctx))
-			const saved = await ctx.selfObjectStore().saveObject(ctx.selfObjectType(), clone)
+			const type = typeFor(ctx, source)
+			const saved = await ctx.selfObjectStore().saveObject(type, clone)
 			if (saved) {
 				ctx.setResults.singleCopy({ success: true })
 				ctx.emit('copy', payload)
 				refreshList(ctx)
 			} else {
-				ctx.setResults.singleCopy({ error: storeErrorMessage(ctx, 'Copy failed') })
+				ctx.setResults.singleCopy({ error: storeErrorMessage(ctx, 'Copy failed', type) })
 			}
 		} catch (err) {
 			ctx.setResults.singleCopy({ error: (err && err.message) || 'Copy failed' })
@@ -191,7 +265,7 @@ export function createSelfModeActions(ctx) {
 			}
 			const clone = cloneObjectForCopy(source, getName(source), nameField)
 			try {
-				const saved = await ctx.selfObjectStore().saveObject(ctx.selfObjectType(), clone)
+				const saved = await ctx.selfObjectStore().saveObject(typeFor(ctx, source), clone)
 				if (saved) {
 					successfulIds.push(id)
 				} else {
@@ -261,7 +335,9 @@ export function createSelfModeActions(ctx) {
 			return false
 		}
 		try {
-			const saved = await ctx.selfObjectStore().saveObject(ctx.selfObjectType(), formData)
+			const item = ctx.editItem()
+			const type = item ? typeFor(ctx, item) : ctx.selfObjectType()
+			const saved = await ctx.selfObjectStore().saveObject(type, formData)
 			if (saved) {
 				ctx.setResults.form({ success: true })
 				const isCreate = !ctx.editItem()
@@ -277,7 +353,7 @@ export function createSelfModeActions(ctx) {
 					ctx.afterCreateSuccess(saved)
 				}
 			} else {
-				const err = storeError(ctx)
+				const err = storeError(ctx, type)
 				if (err && err.isValidation) {
 					// Keep the form visible so the user can fix the invalid data.
 					ctx.setResults.formValidation(err.fields, err.message || 'Validation failed')

package/src/components/CnIndexPage/useSelfFetchList.js

@@ -106,7 +106,11 @@ export function useSelfFetchList(props, instance, inject, extras = {}) {
 			const register = folder.register || props.register
 			return { register, schema: folder.schema, type: `${register}-${folder.schema}` }
 		}
-		return { register: props.register, schema: props.schema, type: `${props.register}-${props.schema}` }
+		// A collection endpoint gets its own type key, so a plain registration of
+		// the same pair elsewhere never resets it.
+		const collectionUrl = props.collectionUrl || ''
+		const type = `${props.register}-${props.schema}` + (collectionUrl ? `@${collectionUrl}` : '')
+		return { register: props.register, schema: props.schema, type, collectionUrl }
 	})
 	const objectType = computed(() => resolvedTarget.value.type)
 	const sidebarState = inject('sidebarState', null) ?? inject('objectSidebarState', null)
@@ -155,9 +159,17 @@ export function useSelfFetchList(props, instance, inject, extras = {}) {
 	// second arg) — that previously made fetch URLs go to `/api/objects/undefined/[object Object]`.
 	// Runs (sync, ahead of the list's own watcher) again whenever the type switches.
 	function registerTarget() {
-		const { register, schema, type } = resolvedTarget.value
+		const { register, schema, type, collectionUrl } = resolvedTarget.value
 		if (typeof objectStore.registerObjectType === 'function') {
-			objectStore.registerObjectType(type, schema, register, { registerSlug: register, schemaSlug: schema })
+			objectStore.registerObjectType(type, schema, register, {
+				registerSlug: register,
+				schemaSlug: schema,
+				...(collectionUrl ? { collectionUrl } : {}),
+			})
+		}
+		// A mixed list tells its own rows apart by `@self.register`, an id, so a slug register needs resolving.
+		if (collectionUrl && !/^\d+$/.test(String(register)) && typeof objectStore.fetchRegister === 'function') {
+			objectStore.fetchRegister(type)
 		}
 	}
 	registerTarget()

package/src/components/CnObjectCard/CnObjectCard.md

@@ -137,6 +137,7 @@ export default {
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `maxMetadata` | `Number` | `4` | Maximum number of schema properties to show in the metadata section. Properties are sorted by their `order` value before slicing |
+| `accent` | `Object` | `null` | Status accent `{ variant, icon?, label? }`: a colored start border and, with `icon`, a colored icon before the title. `variant` is `success`, `warning`, `error`, `info` or `primary`; `label` is the icon's tooltip and accessible name |
 
 ## Slots
 

package/src/components/CnObjectCard/CnObjectCard.vue

@@ -1,7 +1,7 @@
 <template>
 	<div
 		class="cn-object-card"
-		:class="{ 'cn-object-card--selected': selected, 'cn-object-card--board': isBoardLook }"
+		:class="[{ 'cn-object-card--selected': selected, 'cn-object-card--board': isBoardLook }, accentVariant && ['cn-object-card--accent', `cn-object-card--accent-${accentVariant}`]]"
 		@mousedown="onCardMouseDown"
 		@click="onCardClick($event)"
 		@auxclick="onCardAuxClick($event)">
@@ -42,6 +42,16 @@
 						     to report. A card whose consumer passes no badges
 						     would otherwise show no padlock at all. -->
 						<CnLockIndicator :object="object" :size="16" />
+						<span
+							v-if="accentVariant && accent.icon"
+							class="cn-object-card__accent-icon"
+							data-testid="cn-object-card-accent-icon"
+							:role="accent.label ? 'img' : null"
+							:aria-label="accent.label || null"
+							:aria-hidden="accent.label ? null : 'true'"
+							:title="accent.label || null">
+							<CnIcon :name="accent.icon" :size="16" />
+						</span>
 						{{ title }}
 					</h3>
 					<p v-if="description" class="cn-object-card__description">
@@ -128,6 +138,8 @@ import { CnIcon } from '../CnIcon/index.js'
 import { CnLockIndicator } from '../CnLockIndicator/index.js'
 import { CnStatusBadge } from '../CnStatusBadge/index.js'
 
+const ACCENT_VARIANTS = ['success', 'warning', 'error', 'info', 'primary']
+
 /**
  * CnObjectCard — Schema-configuration-driven card for object display.
  *
@@ -244,6 +256,20 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * A status accent: a colored border at the start of the card and,
+		 * with `icon`, a colored icon before the title. `variant` is one of
+		 * `success`, `warning`, `error`, `info` or `primary`; `icon` is a
+		 * name registered with CnIcon; `label` names the status for screen
+		 * readers and as the icon's tooltip.
+		 *
+		 * @type {{variant: string, icon?: string, label?: string}}
+		 */
+		accent: {
+			type: Object,
+			default: null,
+		},
+
 		/**
 		 * The property keys the facts list shows, in order (manifest key
 		 * `config.cardFields`). Without it the card shows the first
@@ -307,6 +333,16 @@ export default {
 			return null
 		},
 
+		/**
+		 * The accent variant when it is a known one, else ''.
+		 *
+		 * @return {string}
+		 */
+		accentVariant() {
+			const variant = this.accent?.variant
+			return ACCENT_VARIANTS.includes(variant) ? variant : ''
+		},
+
 		config() {
 			return this.schema?.configuration || {}
 		},
@@ -502,6 +538,58 @@ export default {
 	background: var(--color-primary-element-light);
 }
 
+/* The 4px start border takes 3px of padding, so the content stays put. */
+.cn-object-card.cn-object-card--accent {
+	border-inline-start-width: 4px;
+	padding-inline-start: 13px;
+}
+
+.cn-object-card.cn-object-card--accent-success {
+	border-inline-start-color: var(--color-element-success);
+}
+
+.cn-object-card.cn-object-card--accent-warning {
+	border-inline-start-color: var(--color-element-warning);
+}
+
+.cn-object-card.cn-object-card--accent-error {
+	border-inline-start-color: var(--color-element-error);
+}
+
+.cn-object-card.cn-object-card--accent-info {
+	border-inline-start-color: var(--color-element-info);
+}
+
+.cn-object-card.cn-object-card--accent-primary {
+	border-inline-start-color: var(--color-primary-element);
+}
+
+.cn-object-card__accent-icon {
+	display: inline-flex;
+	vertical-align: -2px;
+	margin-inline-end: 4px;
+}
+
+.cn-object-card--accent-success .cn-object-card__accent-icon {
+	color: var(--color-text-success);
+}
+
+.cn-object-card--accent-warning .cn-object-card__accent-icon {
+	color: var(--color-text-warning);
+}
+
+.cn-object-card--accent-error .cn-object-card__accent-icon {
+	color: var(--color-text-error);
+}
+
+.cn-object-card--accent-info .cn-object-card__accent-icon {
+	color: var(--color-element-info);
+}
+
+.cn-object-card--accent-primary .cn-object-card__accent-icon {
+	color: var(--color-primary-element);
+}
+
 .cn-object-card__checkbox {
 	flex-shrink: 0;
 	padding-top: 2px;

package/src/components/CnObjectDataWidget/CnObjectDataWidget.vue

@@ -149,6 +149,28 @@
 								@update:modelValue="onRelationChange(field, $event)"
 								@close="commitEdit" />
 
+							<!-- Nextcloud group or user (`referenceType: nextcloud-group`
+						     / `nextcloud-user`, one or a list): pick by display name,
+						     store the group id or uid. The same search the create and
+						     edit dialogs use. -->
+							<component
+								:is="isUserPicker(field) ? 'NcSelectUsers' : 'NcSelect'"
+								v-else-if="isPersonPicker(field)"
+								ref="activeEditor"
+								:inputLabel="field.label"
+								:labelOutside="true"
+								:options="personOptions[field.key] || []"
+								:modelValue="personSelected(field)"
+								:multiple="isPersonMultiple(field)"
+								:keepOpen="isPersonMultiple(field)"
+								:loading="personLoading === field.key"
+								:filterable="false"
+								:clearable="!field.required"
+								label="label"
+								@search="(q) => searchPeople(field, q)"
+								@update:modelValue="onPersonChange(field, $event)"
+								@close="isPersonMultiple(field) ? undefined : commitEdit()" />
+
 							<!-- Select -->
 							<NcSelect
 								v-else-if="field.widget === 'select'"
@@ -259,7 +281,17 @@
 							:value="displayValues[field.key]"
 							:raw="(objectData || {})[field.key]" />
 						<template v-else>
-							<img v-if="isImageField(field) && rawOf(field)"
+							<!-- A Nextcloud group (or list): its display name, cached
+							     per id; the id while the name loads or when unknown. -->
+							<span
+								v-if="isGroupPicker(field) && groupIdsOf(field).length"
+								class="cn-object-data-widget__groups">
+								<template v-for="(gid, gi) in groupIdsOf(field)" :key="gid">
+									<span v-if="gi > 0">, </span>
+									<CnGroupNameCell :gid="gid" />
+								</template>
+							</span>
+							<img v-else-if="isImageField(field) && rawOf(field)"
 								:src="rawOf(field)"
 								:alt="field.label"
 								class="cn-object-data-widget__image">
@@ -370,19 +402,22 @@
 import axios from '@nextcloud/axios'
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
-import { NcActionButton, NcButton, NcCheckboxRadioSwitch, NcLoadingIcon, NcSelect, NcTextField } from '@nextcloud/vue'
+import { NcActionButton, NcButton, NcCheckboxRadioSwitch, NcLoadingIcon, NcSelect, NcSelectUsers, NcTextField } from '@nextcloud/vue'
 import Check from 'vue-material-design-icons/Check.vue'
 import Close from 'vue-material-design-icons/Close.vue'
 import ContentSaveOutline from 'vue-material-design-icons/ContentSaveOutline.vue'
 import InformationOutline from 'vue-material-design-icons/InformationOutline.vue'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
+import CnGroupNameCell from '../CnCellRenderer/CnGroupNameCell.vue'
 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 { 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 { CnIcon } from '../CnIcon/index.js'
 import { CnObjectMetadataModal } from '../CnObjectMetadataModal/index.js'
 import { CnWidgetWrapper } from '../CnWidgetWrapper/index.js'
@@ -427,6 +462,8 @@ export default {
 		NcLoadingIcon,
 		NcTextField,
 		NcSelect,
+		NcSelectUsers,
+		CnGroupNameCell,
 		NcCheckboxRadioSwitch,
 		NcActionButton,
 		CnWidgetWrapper,
@@ -806,6 +843,12 @@ export default {
 			relationOptions: {},
 			/** Whether relation picker options are being fetched. */
 			relationOptionsLoading: false,
+			/** Group and user picker options per field key ({ id, label }[]). */
+			personOptions: {},
+			/** Key of the group or user field whose options are loading, or null. */
+			personLoading: null,
+			/** Display names of users seen in a user picker, by uid. */
+			userLabels: {},
 			/** Whether the user expanded the widget to see every field. */
 			expanded: false,
 			/** Fields that fit the cell while collapsed; null when all fit. */
@@ -1719,6 +1762,11 @@ export default {
 			if (this.isSingleRelationField(field.key)) {
 				this.loadRelationOptions(field.key)
 			}
+			// Group and user fields pick from Nextcloud's own directory.
+			if (this.isPersonPicker(field)) {
+				this.searchPeople(field, '')
+				this.resolvePersonLabels(field, currentValue)
+			}
 
 			this.$nextTick(() => {
 				// Focus the editor
@@ -1944,6 +1992,182 @@ export default {
 			return options.find((opt) => opt.id === val) || { id: val, label: String(val) }
 		},
 
+		/**
+		 * Whether a field picks a Nextcloud group (widget `group` or
+		 * `group-multiselect`, from `referenceType: nextcloud-group`).
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @return {boolean}
+		 */
+		isGroupPicker(field) {
+			return !!field && (field.widget === 'group' || field.widget === 'group-multiselect')
+		},
+
+		/**
+		 * Whether a field picks a Nextcloud user (widget `user` or
+		 * `user-multiselect`, from `referenceType: nextcloud-user`).
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @return {boolean}
+		 */
+		isUserPicker(field) {
+			return !!field && (field.widget === 'user' || field.widget === 'user-multiselect')
+		},
+
+		/**
+		 * Whether a field picks a group or a user.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @return {boolean}
+		 */
+		isPersonPicker(field) {
+			return this.isGroupPicker(field) || this.isUserPicker(field)
+		},
+
+		/**
+		 * Whether a group or user field holds a list.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @return {boolean}
+		 */
+		isPersonMultiple(field) {
+			return !!field && (field.widget === 'group-multiselect' || field.widget === 'user-multiselect')
+		},
+
+		/**
+		 * The group ids a group field holds, for the display mode.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @return {string[]}
+		 */
+		groupIdsOf(field) {
+			const raw = this.rawOf(field)
+			const list = Array.isArray(raw) ? raw : [raw]
+			return list.filter((v) => typeof v === 'string' && v !== '')
+		},
+
+		/**
+		 * The display name of a group id or uid, falling back to the id.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @param {string} id The group id or uid.
+		 * @return {string}
+		 */
+		personLabel(field, id) {
+			if (this.isGroupPicker(field)) {
+				return groupDisplayName(id) || String(id)
+			}
+			return this.userLabels[id] || String(id)
+		},
+
+		/**
+		 * Search Nextcloud groups or users for a picker. Fails soft (the
+		 * helpers return `[]`), so the picker stays usable with what it has.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @param {string} query The search term.
+		 * @return {Promise<void>}
+		 */
+		async searchPeople(field, query) {
+			this.personLoading = field.key
+			try {
+				const options = this.isGroupPicker(field)
+					? await searchNextcloudGroups(query || '')
+					: await searchNextcloudUsers(query || '')
+				const list = Array.isArray(options) ? options : []
+				if (this.isUserPicker(field)) {
+					const labels = { ...this.userLabels }
+					for (const opt of list) {
+						labels[opt.id] = opt.label
+					}
+					this.userLabels = labels
+				}
+				this.personOptions = { ...this.personOptions, [field.key]: list }
+			} finally {
+				if (this.personLoading === field.key) {
+					this.personLoading = null
+				}
+			}
+		},
+
+		/**
+		 * Look up the display names of the value a group or user field holds,
+		 * so the open editor shows names rather than ids.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @param {unknown} value The held value (an id or a list of ids).
+		 * @return {Promise<void>}
+		 */
+		async resolvePersonLabels(field, value) {
+			const ids = (Array.isArray(value) ? value : [value])
+				.filter((v) => typeof v === 'string' && v !== '')
+			if (this.isGroupPicker(field)) {
+				await Promise.all(ids.map((gid) => loadGroupDisplayName(gid)))
+				return
+			}
+			const unknown = ids.filter((uid) => !this.userLabels[uid])
+			const options = await Promise.all(unknown.map((uid) => resolveNextcloudUser(uid)))
+			if (options.length > 0) {
+				const labels = { ...this.userLabels }
+				for (const opt of options) {
+					if (opt && opt.id) {
+						labels[opt.id] = opt.label || opt.id
+					}
+				}
+				this.userLabels = labels
+			}
+		},
+
+		/**
+		 * The selected option(s) of a group or user picker.
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @return {object|object[]|null}
+		 */
+		personSelected(field) {
+			const toOption = (id) => {
+				const label = this.personLabel(field, id)
+				return { id, label, displayName: label }
+			}
+			const v = this.editData[field.key]
+			if (this.isPersonMultiple(field)) {
+				return (Array.isArray(v) ? v : [])
+					.filter((id) => typeof id === 'string' && id !== '')
+					.map(toOption)
+			}
+			return (typeof v === 'string' && v !== '') ? toOption(v) : null
+		},
+
+		/**
+		 * Store a group or user choice as the id (or list of ids).
+		 *
+		 * @spec openspec/changes/nextcloud-group-surfaces/specs/data-display/spec.md#requirement-the-inline-editor-picks-a-nextcloud-group-or-user
+		 * @param {object} field Field descriptor.
+		 * @param {object|object[]|null} selected The chosen option(s).
+		 */
+		onPersonChange(field, selected) {
+			if (this.isPersonMultiple(field)) {
+				const ids = (Array.isArray(selected) ? selected : [])
+					.map((opt) => (opt && typeof opt === 'object' ? opt.id : opt))
+					.filter((id) => typeof id === 'string' && id !== '')
+				this.updateField(field.key, ids)
+				return
+			}
+			if (selected && this.isUserPicker(field) && selected.id) {
+				this.userLabels = { ...this.userLabels, [selected.id]: selected.label || selected.id }
+			}
+			this.updateField(field.key, selected && selected.id ? selected.id : null)
+		},
+
 		onSelectChange(field, option) {
 			this.updateField(field.key, option ? option.id : null)
 		},

package/src/components/CnObjectListWidget/CnObjectListWidget.vue

@@ -357,7 +357,8 @@ export default {
 		 * Host translate function provided by CnAppRoot as
 		 * `cnTranslate: this.translate` (bound to the host app's id). The
 		 * manifest-authored `content.emptyText` is run through it for this
-		 * component's OWN empty state, and so is `content.prompt`. Defaults to an identity function so
+		 * component's OWN empty state, and so are `content.prompt` and
+		 * `content.addLabel`. Defaults to an identity function so
 		 * an untranslated key renders as itself.
 		 */
 		cnTranslate: { default: () => (key) => key },
@@ -1092,9 +1093,24 @@ export default {
 			return (c.formFieldOverrides && typeof c.formFieldOverrides === 'object') ? c.formFieldOverrides : {}
 		},
 
-		/** Pre-translated Add label (overridable via `content.addLabel`). */
+		/**
+		 * The Add label: `content.addLabel` through the app's translate
+		 * function, else the library's "Add".
+		 *
+		 * @spec openspec/changes/r4-object-lock-url-and-credentials-copy/specs/object-list-add-label/spec.md
+		 * @return {string}
+		 */
 		addLabel() {
-			return this.content.addLabel || t('nextcloud-vue', 'Add')
+			// `content.addLabel` is manifest copy in the APP's catalogue, so it
+			// goes through the host translate function like `emptyText` and
+			// `prompt`. It used to print raw, so a Dutch user read the English
+			// manifest string. A label an app already translated has no key
+			// of its own in the catalogue and comes back unchanged.
+			if (this.content.addLabel) {
+				const fn = typeof this.cnTranslate === 'function' ? this.cnTranslate : (k) => k
+				return fn(this.content.addLabel)
+			}
+			return t('nextcloud-vue', 'Add')
 		},
 
 		/** Stable signature of the query so the watcher only refetches on real change. */