@conduction/nextcloud-vue 2.141.0 → 2.142.0

package/src/integrations/builtin/contacts/CnContactsTab.vue

@@ -87,7 +87,7 @@
 				class="cn-contacts-tab__group">
 				<h3 class="cn-contacts-tab__group-title">
 					{{ group.label }}
-					<span class="cn-contacts-tab__group-count">{{ group.items.length }}</span>
+					<span v-if="!isBoard" class="cn-contacts-tab__group-count">{{ group.items.length }}</span>
 				</h3>
 				<ul class="cn-contacts-tab__list">
 					<li
@@ -97,7 +97,7 @@
 						@click="openReverseLookup(contact)">
 						<div class="cn-contacts-tab__avatar">
 							<NcAvatar
-								:size="40"
+								:size="isBoard ? 32 : 40"
 								:displayName="contact.displayName || unknownLabel"
 								:user="avatarSeed(contact)"
 								:url="contact.avatarUrl || undefined"
@@ -112,7 +112,7 @@
 									{{ contact.displayName || unknownLabel }}
 								</span>
 								<CnStatusBadge
-									v-if="contact.role"
+									v-if="contact.role && !isBoard"
 									:label="roleLabel(contact)"
 									:variant="roleVariant(contact)"
 									size="small" />
@@ -123,30 +123,54 @@
 									size="small"
 									data-testid="cn-contacts-tab-inactive" />
 							</div>
-							<div v-if="contact.email" class="cn-contacts-tab__sub">
-								<Email :size="14" class="cn-contacts-tab__sub-icon" />
-								<span class="cn-contacts-tab__sub-text">{{ contact.email }}</span>
-							</div>
-							<div v-if="contact.phone" class="cn-contacts-tab__sub">
-								<Phone :size="14" class="cn-contacts-tab__sub-icon" />
-								<span class="cn-contacts-tab__sub-text">{{ contact.phone }}</span>
-							</div>
-							<div v-if="contact.org" class="cn-contacts-tab__sub">
-								<OfficeBuildingOutline :size="14" class="cn-contacts-tab__sub-icon" />
-								<span class="cn-contacts-tab__sub-text">{{ contact.org }}</span>
-							</div>
-							<div
-								v-if="periodOf(contact)"
-								class="cn-contacts-tab__sub"
-								data-testid="cn-contacts-tab-period">
-								<CalendarRange :size="14" class="cn-contacts-tab__sub-icon" />
-								<span class="cn-contacts-tab__sub-text">{{ periodOf(contact) }}</span>
-							</div>
-							<div v-if="contact.note" class="cn-contacts-tab__sub">
-								<span class="cn-contacts-tab__sub-text">{{ contact.note }}</span>
-							</div>
+							<!-- The board look sets the details on one line (DqZaakBetrokkenen). -->
+							<span v-if="isBoard && boardMetaOf(contact)"
+								class="cn-contacts-tab__meta"
+								data-testid="cn-contacts-tab-meta">{{ boardMetaOf(contact) }}</span>
+							<template v-if="!isBoard">
+								<div v-if="contact.email" class="cn-contacts-tab__sub">
+									<Email :size="14" class="cn-contacts-tab__sub-icon" />
+									<span class="cn-contacts-tab__sub-text">{{ contact.email }}</span>
+								</div>
+								<div v-if="contact.phone" class="cn-contacts-tab__sub">
+									<Phone :size="14" class="cn-contacts-tab__sub-icon" />
+									<span class="cn-contacts-tab__sub-text">{{ contact.phone }}</span>
+								</div>
+								<div v-if="contact.org" class="cn-contacts-tab__sub">
+									<OfficeBuildingOutline :size="14" class="cn-contacts-tab__sub-icon" />
+									<span class="cn-contacts-tab__sub-text">{{ contact.org }}</span>
+								</div>
+								<div
+									v-if="periodOf(contact)"
+									class="cn-contacts-tab__sub"
+									data-testid="cn-contacts-tab-period">
+									<CalendarRange :size="14" class="cn-contacts-tab__sub-icon" />
+									<span class="cn-contacts-tab__sub-text">{{ periodOf(contact) }}</span>
+								</div>
+								<div v-if="contact.note" class="cn-contacts-tab__sub">
+									<span class="cn-contacts-tab__sub-text">{{ contact.note }}</span>
+								</div>
+							</template>
 						</div>
+						<template v-if="isBoard">
+							<span v-if="boardPeriodOf(contact)"
+								class="cn-contacts-tab__period"
+								data-testid="cn-contacts-tab-board-period">{{ boardPeriodOf(contact) }}</span>
+							<NcActions class="cn-contacts-tab__menu"
+								variant="secondary"
+								:aria-label="moreActionsLabel(contact)"
+								data-testid="cn-contacts-tab-menu"
+								@click.stop>
+								<NcActionButton :closeAfterClick="true" @click="unlink(contact)">
+									<template #icon>
+										<Close :size="20" />
+									</template>
+									{{ unlinkLabel }}
+								</NcActionButton>
+							</NcActions>
+						</template>
 						<button
+							v-else
 							type="button"
 							class="cn-contacts-tab__unlink"
 							:aria-label="unlinkLabel"
@@ -178,7 +202,7 @@
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
-import { NcAvatar, NcButton, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
+import { NcActionButton, NcActions, NcAvatar, NcButton, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
 import AccountMultipleOutline from 'vue-material-design-icons/AccountMultipleOutline.vue'
 import AccountPlus from 'vue-material-design-icons/AccountPlus.vue'
 import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
@@ -193,6 +217,7 @@ import CnContactPicker from '../../../components/CnContactPicker/CnContactPicker
 import CnStatusBadge from '../../../components/CnStatusBadge/CnStatusBadge.vue'
 import CnWidgetHeaderActionButtons from '../../../components/CnWidgetWrapper/CnWidgetHeaderActionButtons.vue'
 import { normalizeLook } from '../../../composables/useLook.js'
+import { formatBoardDate } from '../../../utils/boardDate.js'
 import { buildHeaders, prefixUrl } from '../../../utils/index.js'
 import { WIDGET_BODY_ACTIONS } from '../../../utils/widgetHeaderActions.js'
 
@@ -223,6 +248,8 @@ export default {
 	name: 'CnContactsTab',
 
 	components: {
+		NcActionButton,
+		NcActions,
 		NcAvatar,
 		NcButton,
 		NcEmptyContent,
@@ -313,6 +340,11 @@ export default {
 	},
 
 	computed: {
+		/** @return {boolean} The board look draws the rows as DqZaakBetrokkenen does. */
+		isBoard() {
+			return normalizeLook(this.cnLook) === 'board'
+		},
+
 		/**
 		 * The two header buttons in the order and weight of the look: the
 		 * board look draws Link contact then New contact, both outlined; the
@@ -605,6 +637,49 @@ export default {
 		 *
 		 * @return {string} The window.
 		 */
+		/**
+		 * A person's details on one line for the board look: e-mail, phone,
+		 * organisation and note, separated by middots.
+		 *
+		 * @param {object} contact The contact link.
+		 * @return {string}
+		 */
+		boardMetaOf(contact) {
+			return [contact?.email, contact?.phone, contact?.org, contact?.note].filter((part) => typeof part === 'string' && part !== '').join(' · ')
+		},
+
+		/**
+		 * The validity window in the board's short dates: "Vanaf 3 okt",
+		 * "Tot 31 okt" or "3 okt – 31 okt".
+		 *
+		 * @param {object} contact The contact link.
+		 * @return {string}
+		 */
+		boardPeriodOf(contact) {
+			const from = formatBoardDate(contact?.validFrom || '')
+			const until = formatBoardDate(contact?.validUntil || '')
+			if (from === '' && until === '') {
+				return ''
+			}
+			if (until === '') {
+				return t('nextcloud-vue', 'From {date}', { date: from })
+			}
+			if (from === '') {
+				return t('nextcloud-vue', 'Until {date}', { date: until })
+			}
+			return `${from} – ${until}`
+		},
+
+		/**
+		 * The label of a person's actions menu.
+		 *
+		 * @param {object} contact The contact link.
+		 * @return {string}
+		 */
+		moreActionsLabel(contact) {
+			return t('nextcloud-vue', 'More actions for {name}', { name: contact?.displayName || this.unknownLabel })
+		},
+
 		periodOf(contact) {
 			const from = contact?.validFrom || ''
 			const until = contact?.validUntil || ''

package/src/integrations/builtin/contacts/__tests__/CnContactsTabBoardRows.spec.js

@@ -0,0 +1,67 @@
+/**
+ * SPDX-License-Identifier: EUPL-1.2
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ *
+ * CnContactsTab in the board look draws a person as DqZaakBetrokkenen
+ * "Partijen" does: no role badge under a group that already names the role
+ * (r26a showed a role id as a badge), no count beside the group heading, the
+ * contact details on one line, the period at the right in the board's short
+ * date ("Vanaf 3 okt"), and the remove action in a "…" menu.
+ *
+ * @spec openspec/changes/board-contacts-rows/specs/contacts/spec.md
+ */
+
+const { flushPromises, mount } = require('@vue/test-utils')
+const CnContactsTab = require('../CnContactsTab.vue').default
+const { formatBoardDate } = require('../../../../utils/boardDate.js')
+
+const ROWS = [{
+	id: 1,
+	contactUid: 'c1',
+	displayName: 'Sanne de Vries',
+	role: '3c0f5a00-0000-4000-a000-0000000c0001',
+	email: 'sanne@example.nl',
+	note: 'ingelogd met DigiD',
+	validFrom: '2026-10-03',
+}]
+
+function mountTab(look) {
+	return mount(CnContactsTab, {
+		propsData: { objectId: 'o1', register: 'r1', schema: 's1' },
+		global: { provide: { cnLook: look } },
+	})
+}
+
+describe('CnContactsTab board rows', () => {
+	beforeEach(() => {
+		global.fetch = jest.fn().mockResolvedValue({ ok: true, json: () => Promise.resolve({ results: ROWS, total: 1 }) })
+	})
+
+	afterEach(() => {
+		delete global.fetch
+	})
+
+	it('draws the board row in the board look', async () => {
+		const w = mountTab('board')
+		await flushPromises()
+		const item = w.find('.cn-contacts-tab__item')
+		expect(item.find('.cn-contacts-tab__group-count').exists()).toBe(false)
+		expect(w.find('.cn-contacts-tab__group-count').exists()).toBe(false)
+		expect(item.text()).not.toContain('3c0f5a00')
+		expect(item.find('[data-testid="cn-contacts-tab-meta"]').text()).toBe('sanne@example.nl · ingelogd met DigiD')
+		expect(item.find('[data-testid="cn-contacts-tab-board-period"]').text()).toBe(`From ${formatBoardDate('2026-10-03')}`)
+		expect(item.find('.cn-contacts-tab__unlink').exists()).toBe(false)
+		expect(item.find('[data-testid="cn-contacts-tab-menu"]').exists()).toBe(true)
+		w.unmount()
+	})
+
+	it('keeps the Nextcloud row in the Nextcloud look', async () => {
+		const w = mountTab('nextcloud')
+		await flushPromises()
+		const item = w.find('.cn-contacts-tab__item')
+		expect(w.find('.cn-contacts-tab__group-count').exists()).toBe(true)
+		expect(item.find('.cn-contacts-tab__unlink').exists()).toBe(true)
+		expect(item.find('[data-testid="cn-contacts-tab-meta"]').exists()).toBe(false)
+		w.unmount()
+	})
+})

package/src/integrations/builtin/deck/CnDeckCard.vue

@@ -21,6 +21,22 @@
 -->
 <template>
 	<CnDetailCard :title="cardHeaderTitle" :icon="cardIcon" :collapsible="collapsible">
+		<!-- `headerActions`: the Deck tab's link and create flows in the title row (detail page). -->
+		<template v-if="shownHeaderActions.length > 0" #actions>
+			<NcButton
+				v-for="action in shownHeaderActions"
+				:key="action"
+				variant="secondary"
+				:data-testid="`cn-deck-card-${action}`"
+				@click.stop="action === 'create' ? (createOpen = true) : (pickerOpen = true)">
+				<template #icon>
+					<Plus v-if="action === 'create'" :size="20" />
+					<LinkVariant v-else :size="20" />
+				</template>
+				{{ action === 'create' ? createLabel : linkLabel }}
+			</NcButton>
+		</template>
+
 		<NcLoadingIcon v-if="loading" />
 
 		<!-- single-entity surface: chip -->
@@ -102,13 +118,33 @@
 				</section>
 			</div>
 		</template>
+
+		<p v-if="actionError" class="cn-deck-card__action-error" role="alert">
+			{{ actionError }}
+		</p>
+
+		<CnDeckCardPicker
+			v-if="pickerOpen"
+			:apiBase="apiBase"
+			@close="pickerOpen = false"
+			@link="onLink" />
+
+		<CnDeckCardCreate
+			v-if="createOpen"
+			:apiBase="apiBase"
+			@close="createOpen = false"
+			@create="onCreate" />
 	</CnDetailCard>
 </template>
 
 <script>
 import { translatePlural as n, translate as t } from '@nextcloud/l10n'
-import { NcLoadingIcon } from '@nextcloud/vue'
+import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
+import LinkVariant from 'vue-material-design-icons/LinkVariant.vue'
+import Plus from 'vue-material-design-icons/Plus.vue'
 import ViewColumnOutline from 'vue-material-design-icons/ViewColumnOutline.vue'
+import CnDeckCardCreate from '../../../components/CnDeckCardCreate/CnDeckCardCreate.vue'
+import CnDeckCardPicker from '../../../components/CnDeckCardPicker/CnDeckCardPicker.vue'
 import CnDetailCard from '../../../components/CnDetailCard/CnDetailCard.vue'
 import { buildHeaders, prefixUrl, safeHref } from '../../../utils/index.js'
 
@@ -123,7 +159,7 @@ const VALID_SURFACES = ['user-dashboard', 'app-dashboard', 'detail-page', 'singl
 export default {
 	name: 'CnDeckCard',
 
-	components: { CnDetailCard, NcLoadingIcon, ViewColumnOutline },
+	components: { CnDeckCardCreate, CnDeckCardPicker, CnDetailCard, LinkVariant, NcButton, NcLoadingIcon, Plus, ViewColumnOutline },
 
 	props: {
 		/** Stable integration id (forwarded from the registry — always `'deck'`). */
@@ -157,6 +193,16 @@ export default {
 		unavailableLabel: { type: String, default: () => t('nextcloud-vue', 'NC Deck is currently unavailable.') },
 		/** URL of the NC Deck app entry. */
 		deckAppUrl: { type: String, default: '/index.php/apps/deck' },
+		/**
+		 * Buttons in the card's title row on a detail page: `link` links an
+		 * existing Deck card, `create` makes a new one linked to the object.
+		 * In the order given; none by default.
+		 */
+		headerActions: { type: Array, default: () => [] },
+		/** Label of the `link` button. */
+		linkLabel: { type: String, default: () => t('nextcloud-vue', 'Link an existing card') },
+		/** Label of the `create` button. */
+		createLabel: { type: String, default: () => t('nextcloud-vue', 'New card') },
 	},
 
 	data() {
@@ -165,10 +211,26 @@ export default {
 			entity: null,
 			loading: false,
 			degraded: '',
+			pickerOpen: false,
+			createOpen: false,
+			actionError: '',
 		}
 	},
 
 	computed: {
+		/**
+		 * The title-row buttons to draw: only on a detail page with an
+		 * object, only the known ones, in the order given.
+		 *
+		 * @return {Array<string>}
+		 */
+		shownHeaderActions() {
+			if (this.surface !== 'detail-page' || !this.objectId || !Array.isArray(this.headerActions)) {
+				return []
+			}
+			return this.headerActions.filter((action, index, all) => ['create', 'link'].includes(action) && all.indexOf(action) === index)
+		},
+
 		cardHeaderTitle() {
 			return this.title || this.integrationId
 		},
@@ -263,6 +325,58 @@ export default {
 	},
 
 	methods: {
+		/** @return {string} The object's Deck endpoint the link and create flows post to. */
+		deckEndpoint() {
+			return `${this.apiBase}/objects/${this.register}/${this.schema}/${this.objectId}/deck`
+		},
+
+		/**
+		 * Link the picked card, then read the list again.
+		 *
+		 * @param {object} payload `{ cardId }` from the picker.
+		 */
+		async onLink(payload) {
+			this.pickerOpen = false
+			await this.post(this.deckEndpoint(), payload, t('nextcloud-vue', 'Could not link card.'))
+		},
+
+		/**
+		 * Create the card linked to the object, then read the list again.
+		 *
+		 * @param {object} payload `{ boardId, stackId, title, ... }` from the form.
+		 */
+		async onCreate(payload) {
+			this.createOpen = false
+			await this.post(`${this.deckEndpoint()}/new`, payload, t('nextcloud-vue', 'Could not create card.'))
+		},
+
+		/**
+		 * POST one flow's payload and reload on success.
+		 *
+		 * @param {string} url The endpoint.
+		 * @param {object} payload The body.
+		 * @param {string} failure The sentence shown when it fails.
+		 */
+		async post(url, payload, failure) {
+			this.actionError = ''
+			try {
+				const response = await fetch(prefixUrl(url), {
+					method: 'POST',
+					headers: { ...buildHeaders(), 'Content-Type': 'application/json' },
+					body: JSON.stringify(payload),
+				})
+				if (response.ok) {
+					await this.fetchList()
+				} else if (response.status === 409) {
+					this.actionError = t('nextcloud-vue', 'This card is already linked.')
+				} else {
+					this.actionError = failure
+				}
+			} catch {
+				this.actionError = failure
+			}
+		},
+
 		baseUrl() {
 			return `${this.apiBase}/objects/${this.register}/${this.schema}/${this.objectId}/integrations/${this.integrationId}`
 		},
@@ -366,6 +480,11 @@ export default {
 </script>
 
 <style scoped>
+.cn-deck-card__action-error {
+	margin: 8px 0 0;
+	color: var(--color-error-text, var(--color-error));
+}
+
 .cn-deck-card__empty {
 	color: var(--color-text-maxcontrast);
 	font-size: 0.9em;

package/src/integrations/builtin/deck/__tests__/CnDeckCardHeaderActions.spec.js

@@ -0,0 +1,68 @@
+/**
+ * CnDeckCard `headerActions` (DqZaakTaken "Kaarten": "Bestaande kaart
+ * koppelen" and "Nieuwe kaart" in the title row): on a detail page with an
+ * object, the card offers the Deck tab's link and create flows and reloads
+ * after either.
+ *
+ * @spec openspec/changes/deck-card-header-actions/specs/deck-card/spec.md
+ */
+
+const { flushPromises, mount } = require('@vue/test-utils')
+const CnDeckCard = require('../CnDeckCard.vue').default
+
+const PROPS = { register: 'reg', schema: 'case', objectId: 'obj-1', surface: 'detail-page' }
+
+function ok(body = { results: [] }) {
+	return { ok: true, status: 200, json: () => Promise.resolve(body) }
+}
+
+describe('CnDeckCard headerActions', () => {
+	beforeEach(() => {
+		global.fetch = jest.fn().mockResolvedValue(ok())
+	})
+
+	afterEach(() => {
+		delete global.fetch
+	})
+
+	it('draws no buttons by default', async () => {
+		const w = mount(CnDeckCard, { props: PROPS })
+		await flushPromises()
+		expect(w.find('[data-testid="cn-deck-card-link"]').exists()).toBe(false)
+		expect(w.find('[data-testid="cn-deck-card-create"]').exists()).toBe(false)
+		w.unmount()
+	})
+
+	it('draws link and create in the order given, only on a detail page', async () => {
+		const w = mount(CnDeckCard, { props: { ...PROPS, headerActions: ['link', 'create'] } })
+		await flushPromises()
+		const buttons = w.findAll('[data-testid^="cn-deck-card-"]').filter((b) => ['cn-deck-card-link', 'cn-deck-card-create'].includes(b.attributes('data-testid')))
+		expect(buttons.map((b) => b.attributes('data-testid'))).toEqual(['cn-deck-card-link', 'cn-deck-card-create'])
+		await w.setProps({ surface: 'user-dashboard' })
+		expect(w.find('[data-testid="cn-deck-card-link"]').exists()).toBe(false)
+		w.unmount()
+	})
+
+	it('links a picked card through the deck endpoint and reloads', async () => {
+		const w = mount(CnDeckCard, { props: { ...PROPS, headerActions: ['link'] } })
+		await flushPromises()
+		global.fetch.mockClear()
+		await w.vm.onLink({ cardId: 7 })
+		await flushPromises()
+		expect(global.fetch.mock.calls[0][0]).toContain('/objects/reg/case/obj-1/deck')
+		expect(global.fetch.mock.calls[0][1].method).toBe('POST')
+		expect(global.fetch.mock.calls[1][0]).toContain('/integrations/deck')
+		w.unmount()
+	})
+
+	it('creates a card through the deck endpoint and reloads', async () => {
+		const w = mount(CnDeckCard, { props: { ...PROPS, headerActions: ['create'] } })
+		await flushPromises()
+		global.fetch.mockClear()
+		await w.vm.onCreate({ boardId: 1, stackId: 2, title: 'Offerte' })
+		await flushPromises()
+		expect(global.fetch.mock.calls[0][0]).toContain('/objects/reg/case/obj-1/deck/new')
+		expect(global.fetch.mock.calls[1][0]).toContain('/integrations/deck')
+		w.unmount()
+	})
+})

package/src/utils/buildViewTree.js

@@ -164,15 +164,15 @@ export function buildViewTree({ views = [], labelFilter = '', maxDepth = 3 } = {
 		}
 	}
 
-	// Seeded roots first, then the reader's own, each alphabetically. A
-	// dropdown whose order changes between two openings is a dropdown nobody
-	// can build a habit with.
+	// Seeded roots first, in the order the app declares them, then the
+	// reader's own in the order they were saved (DqFilterBeheren). Both are
+	// stable between two openings, so a person can build a habit with them.
 	const seededRoots = roots.filter(({ view }) => view?.seeded === true)
 	const ownRoots = roots.filter(({ view }) => view?.seeded !== true)
-	for (const { view, orphaned } of sortRootsByName(seededRoots)) {
+	for (const { view, orphaned } of seededRoots) {
 		emit(view, 0, orphaned)
 	}
-	for (const { view, orphaned } of sortRootsByName(ownRoots)) {
+	for (const { view, orphaned } of sortRootsBySaved(ownRoots)) {
 		emit(view, 0, orphaned)
 	}
 
@@ -228,11 +228,26 @@ function sortByName(views) {
 }
 
 /**
- * Root entries by the name of the view they carry.
+ * Root entries in the order their views were saved (`created`, oldest
+ * first); views without a saved time follow, by name.
  *
  * @param {Array<object>} roots - The root entries.
  * @return {Array<object>} The same entries, sorted.
  */
-function sortRootsByName(roots) {
-	return [...roots].sort((left, right) => String(left.view?.name ?? '').localeCompare(String(right.view?.name ?? '')))
+function sortRootsBySaved(roots) {
+	const savedAt = (entry) => (typeof entry.view?.created === 'string' ? entry.view.created : '')
+	return [...roots].sort((left, right) => {
+		const a = savedAt(left)
+		const b = savedAt(right)
+		if (a !== b) {
+			if (a === '') {
+				return 1
+			}
+			if (b === '') {
+				return -1
+			}
+			return a < b ? -1 : 1
+		}
+		return String(left.view?.name ?? '').localeCompare(String(right.view?.name ?? ''))
+	})
 }