@conduction/nextcloud-vue 2.133.0 → 2.134.0

package/src/components/CnIntegrationWidget/CnIntegrationWidget.vue

@@ -305,6 +305,15 @@ export default {
 		 */
 		objectLabel: { type: String, default: '' },
 
+		/**
+		 * Extra props for the leaf, set by the placement (a manifest widget's
+		 * `props.placementProps`), for example the kinds a finance leaf shows. The
+		 * record's own identity always wins over a key of the same name.
+		 *
+		 * @type {object}
+		 */
+		placementProps: { type: Object, default: () => ({}) },
+
 		/**
 		 * The surface the leaf itself is told it renders on, when it differs
 		 * from `surface` (a leaf placed in a dialog that draws its sidebar-tab
@@ -580,6 +589,7 @@ export default {
 		 */
 		leafProps(provider) {
 			return {
+				...this.placementProps,
 				integrationId: provider.id,
 				register: this.resolvedRegister,
 				schema: this.resolvedSchema,

package/src/components/CnObjectPartiesWidget/CnObjectPartiesWidget.vue

@@ -5,6 +5,23 @@
 
 <template>
 	<div class="cn-object-parties" data-testid="cn-object-parties">
+		<div v-if="canAdd" class="cn-object-parties__manage">
+			<NcButton data-testid="cn-object-parties-add" @click="adding = true">
+				<template #icon>
+					<Plus :size="20" />
+				</template>
+				{{ manageWord('add', 'label', t('nextcloud-vue', 'Add a party')) }}
+			</NcButton>
+		</div>
+
+		<NcNoteCard
+			v-if="manageError"
+			type="error"
+			role="alert"
+			data-testid="cn-object-parties-manage-error">
+			{{ manageError }}
+		</NcNoteCard>
+
 		<NcLoadingIcon v-if="loading" :size="24" />
 
 		<NcEmptyContent
@@ -128,19 +145,60 @@
 							:data-effect="indicator.effect"
 							:title="indicator.verdict"
 							data-testid="cn-object-parties-indicator">{{ indicator.label }} · {{ indicator.verdict }}</span>
+						<NcButton
+							v-if="canRemove && party.partyUuid"
+							class="cn-object-parties__remove"
+							variant="tertiary"
+							:aria-label="removeLabel(party, group)"
+							:title="removeLabel(party, group)"
+							data-testid="cn-object-parties-remove"
+							@click="removing = { party, group }">
+							<template #icon>
+								<TrashCanOutline :size="20" />
+							</template>
+						</NcButton>
 					</li>
 				</ul>
 			</section>
 		</template>
+
+		<CnPartyAddDialog
+			v-if="adding"
+			ref="addDialog"
+			:dialogTitle="manageWord('add', 'dialogTitle', t('nextcloud-vue', 'Add a party'))"
+			:roles="addRoles"
+			:sources="addSources"
+			:createFields="createFields"
+			:createLabel="manageWord('add', 'createLabel', t('nextcloud-vue', 'Someone new'))"
+			:allowPrimary="content.manage.add.primary === true"
+			:primaryLabel="label('primary')"
+			:confirmLabel="manageWord('add', 'confirmLabel', t('nextcloud-vue', 'Add'))"
+			@close="adding = false"
+			@confirm="addParty" />
+
+		<CnConfirmDialog
+			v-if="removing"
+			ref="removeDialog"
+			:dialogTitle="manageWord('remove', 'title', t('nextcloud-vue', 'Remove party'))"
+			:message="removeMessage"
+			:confirmLabel="manageWord('remove', 'confirmLabel', t('nextcloud-vue', 'Remove'))"
+			variant="error"
+			@close="removing = null"
+			@confirm="removeParty" />
 	</div>
 </template>
 
 <script>
 import axios from '@nextcloud/axios'
+import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { translatePlural as n, translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
-import { NcEmptyContent, NcLoadingIcon, NcNoteCard } from '@nextcloud/vue'
+import { NcButton, NcEmptyContent, NcLoadingIcon, NcNoteCard } from '@nextcloud/vue'
 import EmailOutline from 'vue-material-design-icons/EmailOutline.vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
+import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
+import CnConfirmDialog from '../../dialogs/CnConfirmDialog.vue'
+import CnPartyAddDialog from '../../dialogs/CnPartyAddDialog.vue'
 import { interpolateUrlTokens } from '../../composables/useEndpointSource.js'
 import innerHeading from '../../mixins/innerHeading.js'
 import { conditionalLine } from '../../utils/conditionalLine.js'
@@ -150,10 +208,13 @@ import {
 	indicatorsOf,
 	indicatorVerdict,
 	kindCode,
+	newPartyRecord,
 	representedByMap,
 	roleLabel,
 	rolesInOrder,
+	savedUuid,
 } from '../../utils/objectParties.js'
+import { fetchCallerScope } from '../../utils/objectPermissions.js'
 import { readPath } from '../../utils/readPath.js'
 
 let uid = 0
@@ -197,6 +258,16 @@ function defaultLabels() {
  * }
  * ```
  *
+ * `manage` lets a reader change the parties through OpenRegister's party
+ * API, which asks the record's update right on every write: `add` (`{ label?,
+ * dialogTitle?, kind?, sources, create?, primary?, confirmLabel? }`) opens a
+ * dialog to pick somebody known or describe somebody new (`create: {
+ * register, schema, label?, fields, compose? }`, see `newPartyRecord`), choose
+ * a role and optionally make them the primary party; `remove` (`{ title?,
+ * message?, confirmLabel? }`, `{name}` and `{role}` in the message) takes a
+ * party off in one role. Both are hidden when OpenRegister says the reader
+ * may not update the schema; a refusal is shown, never swallowed.
+ *
  * `presentation: "primary"` draws only the primary party, as a side card
  * does: initials, name and role label, its correspondence e-mail, and
  * `link` (`{ label, href? | tab? }`, `{total}` = the number of parties) at
@@ -210,7 +281,7 @@ function defaultLabels() {
 export default {
 	name: 'CnObjectPartiesWidget',
 
-	components: { EmailOutline, NcEmptyContent, NcLoadingIcon, NcNoteCard },
+	components: { CnConfirmDialog, CnPartyAddDialog, EmailOutline, NcButton, NcEmptyContent, NcLoadingIcon, NcNoteCard, Plus, TrashCanOutline },
 
 	mixins: [innerHeading],
 
@@ -229,7 +300,8 @@ export default {
 		 * party, `{party}` filled in), `correspondence` (`{ endpoint, path?,
 		 * senderField?, recipientsField? }`), `labels`, `presentation`
 		 * (`"primary"`: only the primary party) and `link` (`{ label,
-		 * href? | tab? }`, the primary presentation's foot link).
+		 * href? | tab? }`, the primary presentation's foot link) and
+		 * `manage` (`{ add?, remove? }`, adding and removing parties).
 		 */
 		content: {
 			type: Object,
@@ -267,6 +339,10 @@ export default {
 			kinds: null,
 			extra: {},
 			documents: [],
+			mayUpdate: true,
+			adding: false,
+			removing: null,
+			manageError: '',
 		}
 	},
 
@@ -276,6 +352,58 @@ export default {
 			return rolesInOrder(this.listing, this.translatedMap(this.content?.roleLabels))
 		},
 
+		/** @return {object} The `manage` declaration, or an empty one. */
+		manage() {
+			const manage = this.content?.manage
+			return manage && typeof manage === 'object' ? manage : {}
+		},
+
+		/** @return {boolean} Whether the add button shows. */
+		canAdd() {
+			return Boolean(this.manage.add) && this.mayUpdate && !this.isPrimaryPresentation && !this.loading && !this.failed
+		},
+
+		/** @return {boolean} Whether each party offers its remove button. */
+		canRemove() {
+			return Boolean(this.manage.remove) && this.mayUpdate && !this.isPrimaryPresentation
+		},
+
+		/** @return {Array<{key: string, label: string}>} The roles a new party may hold, in the reader's words. */
+		addRoles() {
+			const declared = Array.isArray(this.listing?.roles) ? this.listing.roles : []
+			const kind = this.manage.add?.kind
+			const accepted = kind ? (this.listing?.kinds || []).find((entry) => kindCode(entry) === kind)?.roles : null
+			const keys = Array.isArray(accepted) && accepted.length > 0 ? accepted : declared.map((role) => role?.key).filter(Boolean)
+			const own = this.translatedMap(this.content?.roleLabels)
+			return keys.map((key) => ({ key, label: own[key] || this.cnTranslate(roleLabel(key, declared, {})) }))
+		},
+
+		/** @return {Array<object>} The picker sources, their words translated by the picker. */
+		addSources() {
+			return Array.isArray(this.manage.add?.sources) ? this.manage.add.sources : []
+		},
+
+		/** @return {Array<object>} The new-person fields, labels translated. */
+		createFields() {
+			const fields = this.manage.add?.create?.fields
+			return (Array.isArray(fields) ? fields : [])
+				.filter((field) => field && field.key)
+				.map((field) => ({ ...field, label: this.cnTranslate(field.label || field.key) }))
+		},
+
+		/** @return {string} The question the remove dialog asks. */
+		removeMessage() {
+			if (!this.removing) {
+				return ''
+			}
+			const name = this.nameOf(this.removing.party)
+			const role = this.removing.group.label
+			const own = this.manage.remove?.message
+			return own
+				? this.cnTranslate(own).replaceAll('{name}', name).replaceAll('{role}', role)
+				: t('nextcloud-vue', 'Remove {name} as {role}?', { name, role }, undefined, { escape: false })
+		},
+
 		/** @return {boolean} Whether only the primary party is drawn. */
 		isPrimaryPresentation() {
 			return this.content?.presentation === 'primary'
@@ -381,7 +509,21 @@ export default {
 		},
 	},
 
+	mounted() {
+		this.onPageRefresh = (payload) => {
+			if (payload?.source !== this.idPrefix) {
+				this.load()
+			}
+		}
+		subscribe('cn:page:refresh', this.onPageRefresh)
+	},
+
+	beforeUnmount() {
+		unsubscribe('cn:page:refresh', this.onPageRefresh)
+	},
+
 	methods: {
+		t,
 		initialsOf,
 		kindCode,
 
@@ -396,6 +538,115 @@ export default {
 			return own !== '' ? this.cnTranslate(own) : defaultLabels()[key]
 		},
 
+		/**
+		 * A word of the `manage` declaration, translated, else the default.
+		 *
+		 * @param {string} part `add` or `remove`.
+		 * @param {string} key The word's key.
+		 * @param {string} fallback The default.
+		 * @return {string}
+		 */
+		manageWord(part, key, fallback) {
+			const own = this.manage[part]?.[key]
+			return typeof own === 'string' && own !== '' ? this.cnTranslate(own) : fallback
+		},
+
+		/**
+		 * The remove button's accessible name.
+		 *
+		 * @param {object} party The listing row.
+		 * @param {object} group The role group.
+		 * @return {string}
+		 */
+		removeLabel(party, group) {
+			return t('nextcloud-vue', 'Remove {name} as {role}', { name: this.nameOf(party), role: group.label }, undefined, { escape: false })
+		},
+
+		/**
+		 * Why a write failed, in the reader's words.
+		 *
+		 * @param {unknown} error The axios error.
+		 * @return {string}
+		 */
+		refusalOf(error) {
+			if (error?.response?.status === 403) {
+				return t('nextcloud-vue', 'You may not change who is on this record.')
+			}
+			const said = error?.response?.data?.error
+			return typeof said === 'string' && said !== '' ? said : t('nextcloud-vue', 'The change could not be saved. Nothing was changed.')
+		},
+
+		/** @return {string} The record's parties URL. */
+		partiesUrl() {
+			return this.urlOf(this.content?.rolesSource || '/apps/openregister/api/objects/@register/@schema/@objectId/parties')
+		},
+
+		/** @return {Promise<void>} Whether OpenRegister lets the reader update this schema; unknown counts as yes, the server decides. */
+		async loadMayUpdate() {
+			if (!this.manage.add && !this.manage.remove) {
+				return
+			}
+			const slug = (value) => (value && typeof value === 'object' ? String(value.slug || value.id || '') : String(value || ''))
+			const scope = await fetchCallerScope({ register: slug(this.register), schema: slug(this.schema) })
+			this.mayUpdate = !scope || !Array.isArray(scope.actions) || scope.actions.includes('update')
+		},
+
+		/**
+		 * Create the person when they are new, then give them the role; a
+		 * primary party is set through the primary route, which records the
+		 * replacement.
+		 *
+		 * @param {{mode: string, partyUuid: string|null, values: object, role: string, primary: boolean}} choice The dialog's choice.
+		 * @return {Promise<void>}
+		 */
+		async addParty(choice) {
+			try {
+				let partyUuid = choice.partyUuid
+				if (choice.mode === 'new') {
+					const create = this.manage.add?.create || {}
+					const { data } = await axios.post(
+						generateUrl(`/apps/openregister/api/objects/${encodeURIComponent(create.register || '')}/${encodeURIComponent(create.schema || '')}`),
+						newPartyRecord(create, choice.values),
+					)
+					partyUuid = savedUuid(data)
+					if (partyUuid === '') {
+						throw new Error(t('nextcloud-vue', 'The new person was not saved.'))
+					}
+				}
+				if (choice.primary) {
+					await axios.put(generateUrl(`${this.partiesUrl()}/primary`), { partyUuid, role: choice.role })
+				} else {
+					await axios.post(generateUrl(this.partiesUrl()), { partyUuid, role: choice.role })
+				}
+				this.adding = false
+				this.changed()
+			} catch (error) {
+				this.$refs.addDialog?.fail(error?.response ? this.refusalOf(error) : (error?.message || this.refusalOf(error)))
+			}
+		},
+
+		/** @return {Promise<void>} Take the chosen party off in the chosen role. */
+		async removeParty() {
+			const { party, group } = this.removing || {}
+			if (!party) {
+				return
+			}
+			try {
+				await axios.delete(generateUrl(`${this.partiesUrl()}/${encodeURIComponent(party.partyUuid)}`), { params: { role: group.key } })
+				this.removing = null
+				this.changed()
+			} catch (error) {
+				this.$refs.removeDialog?.setResult({ error: this.refusalOf(error) })
+			}
+		},
+
+		/** @return {void} Read the parties again and tell the page (tab counts, the side card). */
+		changed() {
+			this.manageError = ''
+			this.load()
+			emit('cn:page:refresh', { source: this.idPrefix })
+		},
+
 		/**
 		 * A map of manifest words, translated.
 		 *
@@ -465,6 +716,7 @@ export default {
 				return
 			}
 			this.listing = listing
+			await this.loadMayUpdate()
 			if (this.isPrimaryPresentation) {
 				this.loading = false
 				return
@@ -743,6 +995,15 @@ export default {
 	color: var(--color-text-maxcontrast);
 }
 
+.cn-object-parties__manage {
+	display: flex;
+	justify-content: flex-end;
+}
+
+.cn-object-parties__remove {
+	margin-inline-start: auto;
+}
+
 .cn-object-parties__main-card {
 	display: flex;
 	flex-direction: column;

package/src/dialogs/CnPartyAddDialog.vue

@@ -0,0 +1,309 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Conduction B.V.
+  - SPDX-License-Identifier: EUPL-1.2
+-->
+
+<template>
+	<CnDialog
+		:look="look"
+		:width="width"
+		defaultWidth="form"
+		:eyebrow="eyebrow"
+		:subtitle="subtitle"
+		:name="dialogTitle"
+		size="normal"
+		:noClose="loading"
+		@closing="$emit('close')">
+		<div class="cn-party-add" data-testid="cn-party-add-dialog">
+			<fieldset v-if="canCreate" class="cn-party-add__mode">
+				<legend class="cn-party-add__legend">
+					{{ t('nextcloud-vue', 'Who') }}
+				</legend>
+				<NcCheckboxRadioSwitch
+					v-model="mode"
+					type="radio"
+					:name="`${idPrefix}-mode`"
+					value="existing"
+					:disabled="loading"
+					data-testid="cn-party-add-mode-existing">
+					{{ t('nextcloud-vue', 'Someone already known') }}
+				</NcCheckboxRadioSwitch>
+				<NcCheckboxRadioSwitch
+					v-model="mode"
+					type="radio"
+					:name="`${idPrefix}-mode`"
+					value="new"
+					:disabled="loading"
+					data-testid="cn-party-add-mode-new">
+					{{ createLabel }}
+				</NcCheckboxRadioSwitch>
+			</fieldset>
+
+			<CnPartyPicker
+				v-if="mode === 'existing'"
+				v-model="partyUuid"
+				:sources="sources"
+				:inputLabel="t('nextcloud-vue', 'Person')"
+				labelOutside
+				:disabled="loading"
+				data-testid="cn-party-add-picker" />
+
+			<template v-else>
+				<NcTextField
+					v-for="field in createFields"
+					:key="field.key"
+					:modelValue="values[field.key] || ''"
+					:label="field.label"
+					:type="inputType(field)"
+					:required="field.required === true"
+					:disabled="loading"
+					:data-testid="`cn-party-add-field-${field.key}`"
+					@update:modelValue="setValue(field.key, $event)" />
+			</template>
+
+			<NcSelect
+				:modelValue="roleOption"
+				:options="roleOptions"
+				label="label"
+				:clearable="false"
+				:inputLabel="t('nextcloud-vue', 'Role')"
+				:disabled="loading"
+				data-testid="cn-party-add-role"
+				@update:modelValue="role = $event ? $event.key : ''" />
+
+			<NcCheckboxRadioSwitch
+				v-if="allowPrimary"
+				v-model="primary"
+				type="checkbox"
+				:disabled="loading"
+				data-testid="cn-party-add-primary">
+				{{ primaryLabel }}
+			</NcCheckboxRadioSwitch>
+
+			<NcNoteCard v-if="error" type="error" data-testid="cn-party-add-error">
+				{{ error }}
+			</NcNoteCard>
+		</div>
+
+		<template #actions>
+			<NcButton :disabled="loading" data-testid="cn-party-add-cancel" @click="$emit('close')">
+				{{ t('nextcloud-vue', 'Cancel') }}
+			</NcButton>
+			<NcButton
+				variant="primary"
+				:disabled="loading || !complete"
+				data-testid="cn-party-add-confirm"
+				@click="confirm">
+				<template #icon>
+					<NcLoadingIcon v-if="loading" :size="20" :name="t('nextcloud-vue', 'Loading …')" />
+				</template>
+				{{ confirmLabel }}
+			</NcButton>
+		</template>
+	</CnDialog>
+</template>
+
+<script>
+import { translate as t } from '@nextcloud/l10n'
+import { NcButton, NcCheckboxRadioSwitch, NcLoadingIcon, NcNoteCard, NcSelect, NcTextField } from '@nextcloud/vue'
+import CnDialog from '../components/CnDialog/CnDialog.vue'
+import CnPartyPicker from '../components/CnPartyPicker/CnPartyPicker.vue'
+import { dialogBoardMixin } from '../mixins/dialogBoard.js'
+
+let uid = 0
+
+/**
+ * CnPartyAddDialog — give a party a role on a record: pick somebody already
+ * known (CnPartyPicker over `sources`), or describe a new person with the
+ * `create.fields` the host declares (no identifier needed: a name and an
+ * address are enough). Then a role from `roles`, and optionally "make this the
+ * primary party".
+ *
+ * The dialog writes nothing. `confirm` emits `{ mode, partyUuid, values, role,
+ * primary }`; the host creates the person when `mode` is `new`, links the
+ * party, then closes the dialog or calls `fail(message)` to show the refusal
+ * (a 403 when the reader may not update the record) and let them try again.
+ *
+ * @spec openspec/changes/object-parties-manage/specs/record-widgets/spec.md#requirement-the-parties-widget-can-add-and-remove-parties
+ */
+export default {
+	name: 'CnPartyAddDialog',
+
+	components: { CnDialog, CnPartyPicker, NcButton, NcCheckboxRadioSwitch, NcLoadingIcon, NcNoteCard, NcSelect, NcTextField },
+
+	mixins: [dialogBoardMixin],
+
+	props: {
+		/** The dialog's title ("Add contact person"). */
+		dialogTitle: {
+			type: String,
+			default: () => t('nextcloud-vue', 'Add a party'),
+		},
+
+		/** The roles to choose from, `[{ key, label }]`, already in the reader's words. */
+		roles: {
+			type: Array,
+			default: () => [],
+		},
+
+		/** CnPartyPicker sources for somebody already known. */
+		sources: {
+			type: Array,
+			default: () => [],
+		},
+
+		/**
+		 * The fields of a new person, `[{ key, label, type? (text, email, integer), required? }]`,
+		 * labels already translated. None: only existing parties can be picked.
+		 */
+		createFields: {
+			type: Array,
+			default: () => [],
+		},
+
+		/** The choice that opens the new-person fields. */
+		createLabel: {
+			type: String,
+			default: () => t('nextcloud-vue', 'Someone new'),
+		},
+
+		/** Offer "make this the primary party". */
+		allowPrimary: {
+			type: Boolean,
+			default: false,
+		},
+
+		/** The primary choice's words ("Main contact"). */
+		primaryLabel: {
+			type: String,
+			default: () => t('nextcloud-vue', 'Primary party'),
+		},
+
+		/** The confirm button's words. */
+		confirmLabel: {
+			type: String,
+			default: () => t('nextcloud-vue', 'Add'),
+		},
+	},
+
+	emits: ['close', 'confirm'],
+
+	data() {
+		uid += 1
+		return {
+			idPrefix: `cn-party-add-${uid}`,
+			mode: 'existing',
+			partyUuid: null,
+			values: {},
+			role: this.roles.length === 1 ? this.roles[0].key : '',
+			primary: false,
+			loading: false,
+			error: '',
+		}
+	},
+
+	computed: {
+		/** @return {boolean} Whether a new person can be described here. */
+		canCreate() {
+			return this.createFields.length > 0
+		},
+
+		/** @return {Array<{key: string, label: string}>} The role choices. */
+		roleOptions() {
+			return this.roles.filter((role) => role && role.key).map((role) => ({ key: role.key, label: role.label || role.key }))
+		},
+
+		/** @return {object|null} The chosen role's option. */
+		roleOption() {
+			return this.roleOptions.find((option) => option.key === this.role) || null
+		},
+
+		/** @return {boolean} Whether the choice is complete enough to send. */
+		complete() {
+			if (this.role === '') {
+				return false
+			}
+			if (this.mode === 'existing') {
+				return Boolean(this.partyUuid)
+			}
+			return this.createFields.every((field) => field.required !== true || String(this.values[field.key] || '').trim() !== '')
+		},
+	},
+
+	methods: {
+		t,
+
+		/**
+		 * The input type of a new-person field.
+		 *
+		 * @param {{type?: string}} field The field.
+		 * @return {string} `email`, `number` or `text`.
+		 */
+		inputType(field) {
+			if (field.type === 'email') {
+				return 'email'
+			}
+			return field.type === 'integer' ? 'number' : 'text'
+		},
+
+		/**
+		 * Set one new-person field.
+		 *
+		 * @param {string} key The field key.
+		 * @param {string} value The value.
+		 * @return {void}
+		 */
+		setValue(key, value) {
+			this.values = { ...this.values, [key]: value }
+		},
+
+		/** @return {void} Hand the choice to the host. */
+		confirm() {
+			if (!this.complete) {
+				return
+			}
+			this.loading = true
+			this.error = ''
+			this.$emit('confirm', {
+				mode: this.mode,
+				partyUuid: this.mode === 'existing' ? String(this.partyUuid) : null,
+				values: this.mode === 'new' ? { ...this.values } : {},
+				role: this.role,
+				primary: this.allowPrimary && this.primary === true,
+			})
+		},
+
+		/**
+		 * The host could not write: show why and let the reader try again.
+		 *
+		 * @param {string} message The refusal.
+		 * @return {void}
+		 */
+		fail(message) {
+			this.loading = false
+			this.error = message || t('nextcloud-vue', 'The party could not be added.')
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-party-add {
+	display: flex;
+	flex-direction: column;
+	gap: calc(var(--default-grid-baseline, 4px) * 3);
+}
+
+.cn-party-add__mode {
+	display: flex;
+	flex-direction: column;
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+
+.cn-party-add__legend {
+	margin-bottom: var(--default-grid-baseline, 4px);
+	font-weight: 600;
+}
+</style>