@conduction/nextcloud-vue 2.141.0 → 2.143.0

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 ?? ''))
+	})
 }