@conduction/nextcloud-vue 2.75.0 → 2.76.0

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. */

package/src/components/CnRelatedObjectsWidget/CnRelatedObjectsWidget.vue

@@ -91,6 +91,20 @@
 					</ul>
 				</section>
 
+				<p v-if="visibleGroups.length && pendingSections.length"
+					class="cn-related-objects-widget__section-status"
+					data-testid="cn-related-pending"
+					role="status">
+					{{ pendingLabel }}
+				</p>
+				<p v-for="failed in failedSections"
+					:key="`failed-${failed.key}`"
+					class="cn-related-objects-widget__section-error"
+					data-testid="cn-related-section-error"
+					:data-section="failed.key">
+					{{ t('nextcloud-vue', 'Could not load {section}.', { section: failed.label }) }}
+				</p>
+
 				<div v-if="loading && !visibleGroups.length" class="cn-related-objects-widget__empty">
 					{{ loadingLabel }}
 				</div>
@@ -710,6 +724,12 @@ export default {
 			groups: [],
 			/** Active tab key. */
 			activeKey: '',
+			/** Keys of the tabbed sections whose request is still in flight (`objects`, `files`, `relations`). */
+			pendingSections: [],
+			/** Tabbed sections whose request failed: `{ key, label }`. */
+			failedSections: [],
+			/** Bumped per `loadTabs()`; an answer from an older load is dropped. */
+			loadToken: 0,
 			/** Key of the inline-expanded row (`{group}-{id}`) for leaves with no owning-app page (e.g. notes). */
 			expandedKey: '',
 			/** Whether a footer file upload is in flight. */
@@ -834,6 +854,22 @@ export default {
 			)
 		},
 
+		/**
+		 * The line under the panel naming the sections still loading, once
+		 * another section is already on screen.
+		 *
+		 * @return {string}
+		 */
+		pendingLabel() {
+			const labels = {
+				objects: this.objectsLabel,
+				files: this.filesLabel,
+				relations: t('nextcloud-vue', 'Linked items'),
+			}
+			const names = this.pendingSections.map((key) => labels[key] || key).join(', ')
+			return t('nextcloud-vue', 'Still loading: {sections}', { sections: names })
+		},
+
 		/** Placeholder shown in the body while the first fetch is in flight. */
 		loadingLabel() {
 			return t('nextcloud-vue', 'Loading …')
@@ -1330,16 +1366,27 @@ export default {
 		 * @return {Promise<object|null>}
 		 */
 		async fetchSubResource(suffix) {
+			return (await this.fetchSection(suffix)).data
+		},
+
+		/**
+		 * GET an OpenRegister sub-resource and say whether it answered, so a
+		 * section can tell "nothing linked" from "could not load".
+		 *
+		 * @param {string} suffix - The sub-resource suffix.
+		 * @return {Promise<{ ok: boolean, data: object|null }>}
+		 */
+		async fetchSection(suffix) {
 			try {
 				// `no-store`: relations change as the user links content; a stale
 				// cached empty response would wrongly show the empty state on load.
 				const response = await fetch(this.relatedUrl(suffix), { method: 'GET', headers: buildHeaders(), cache: 'no-store' })
 				if (!response.ok) {
-					return null
+					return { ok: false, data: null }
 				}
-				return await response.json()
+				return { ok: true, data: await response.json() }
 			} catch {
-				return null
+				return { ok: false, data: null }
 			}
 		},
 
@@ -1543,56 +1590,138 @@ export default {
 		},
 
 		/**
-		 * Fetch every group directly from OpenRegister and build the tabs.
+		 * Fetch every group directly from OpenRegister and build the tabs,
+		 * one section at a time.
+		 *
+		 * 🔴 EACH SECTION SHOWS WHEN ITS OWN REQUEST RETURNS. This used to wait
+		 * for relations, uses, used, contracts and files together behind one
+		 * `Promise.all`, so the relations call (0.45 s on pipelinq's lead page)
+		 * sat behind uses/used (about 9 s) and the card said "Loading …" the
+		 * whole time. Now the groups are laid out up front in their fixed order
+		 * and filled in place as each answer arrives, so a slow section never
+		 * reorders or hides a fast one. A section still in flight is named in
+		 * `pendingSections`; one whose request failed in `failedSections`.
 		 *
+		 * @spec openspec/changes/r4-object-lock-url-and-credentials-copy/specs/related-objects-progressive/spec.md
 		 * @return {Promise<void>}
 		 */
 		async loadTabs() {
+			const token = ++this.loadToken
+			const current = () => token === this.loadToken
 			this.loading = true
-			try {
-				const [relations, uses, used, contracts, files] = await Promise.all([
-					this.fetchSubResource('relations'),
-					this.showObjects ? this.fetchSubResource('uses') : null,
-					this.showObjects ? this.fetchSubResource('used') : null,
-					(this.showObjects && this.showContracts) ? this.fetchSubResource('contracts') : null,
-					this.showFiles ? this.fetchSubResource('files') : null,
-				])
+			this.failedSections = []
+
+			const objectSuffixes = this.showObjects
+				? ['uses', 'used', ...(this.showContracts ? ['contracts'] : [])]
+				: []
+			const sections = [
+				...(this.showObjects ? [{ key: 'objects', label: this.objectsLabel }] : []),
+				...(this.showFiles ? [{ key: 'files', label: this.filesLabel }] : []),
+				{ key: 'relations', label: t('nextcloud-vue', 'Linked items') },
+			]
+			this.pendingSections = sections.map((section) => section.key)
 
-				const groups = []
+			// Lay out every group now, in its fixed order, empty. visibleGroups
+			// hides an empty group, so nothing shows until a section fills it.
+			const groups = []
+			if (this.showObjects) {
+				groups.push({ key: 'objects', label: this.objectsLabel, icon: 'FileTreeOutline', integrationId: '', items: [], total: 0 })
+			}
+			if (this.showFiles) {
+				groups.push({ key: 'files', label: this.filesLabel, icon: 'Paperclip', integrationId: 'files', items: [], total: 0 })
+			}
+			for (const def of LEAF_GROUPS) {
+				groups.push({
+					key: def.key,
+					label: this.leafLabel(def.key),
+					// Prefer the registered integration's icon so it matches the
+					// sidebar/linked-apps; fall back to the known-good default.
+					icon: this.integrationIcon(def.integrationId) || def.icon,
+					integrationId: def.integrationId,
+					requiredApp: def.requiredApp,
+					items: [],
+					total: 0,
+				})
+			}
+			this.groups = groups
 
-				if (this.showObjects) {
-					await this.resolveSchemaTitles([uses, used, contracts])
-					const objectItems = this.mergeObjectResults([uses, used, contracts])
-					groups.push({ key: 'objects', label: this.objectsLabel, icon: 'FileTreeOutline', integrationId: '', items: objectItems, total: objectItems.length })
+			const setGroup = (key, items, total) => {
+				const index = this.groups.findIndex((group) => group.key === key)
+				if (index === -1) {
+					return
 				}
-
-				if (this.showFiles) {
-					const fileResults = (files && files.results) || []
-					groups.push({ key: 'files', label: this.filesLabel, icon: 'Paperclip', integrationId: 'files', items: fileResults.map((f) => this.toFileRow(f)), total: files ? (files.total ?? fileResults.length) : 0 })
+				const next = this.groups.slice()
+				next[index] = { ...next[index], items, total }
+				this.groups = next
+			}
+			const settle = (key, ok) => {
+				this.pendingSections = this.pendingSections.filter((k) => k !== key)
+				if (!ok) {
+					const section = sections.find((s) => s.key === key)
+					this.failedSections = [...this.failedSections, { key, label: section ? section.label : key }]
 				}
+				// Keep the tab the reader saw first: pin it, so a slower section
+				// that sorts before it does not take the panel away.
+				if (!this.activeKey && this.visibleGroups.length) {
+					this.activeKey = this.visibleGroups[0].key
+				}
+			}
 
+			const loadRelations = this.fetchSection('relations').then(({ ok, data }) => {
+				if (!current()) {
+					return
+				}
 				for (const def of LEAF_GROUPS) {
-					const block = relations && relations[def.responseKey]
+					const block = data && data[def.responseKey]
 					const results = (block && block.results) || []
-					groups.push({
-						key: def.key,
-						label: this.leafLabel(def.key),
-						// Prefer the registered integration's icon so it matches the
-						// sidebar/linked-apps; fall back to the known-good default.
-						icon: this.integrationIcon(def.integrationId) || def.icon,
-						integrationId: def.integrationId,
-						requiredApp: def.requiredApp,
-						items: results.map((r, i) => this.toLeafRow(r, i)),
-						total: block ? (block.total ?? results.length) : 0,
-					})
+					setGroup(def.key, results.map((r, i) => this.toLeafRow(r, i)), block ? (block.total ?? results.length) : 0)
 				}
+				settle('relations', ok)
+			})
 
-				this.groups = groups
-				if (!this.activeGroup && this.visibleGroups.length) {
-					this.activeKey = this.visibleGroups[0].key
-				}
+			const loadFiles = this.showFiles
+				? this.fetchSection('files').then(({ ok, data }) => {
+						if (!current()) {
+							return
+						}
+						const fileResults = (data && data.results) || []
+						setGroup('files', fileResults.map((f) => this.toFileRow(f)), data ? (data.total ?? fileResults.length) : 0)
+						settle('files', ok)
+					})
+				: null
+
+			// uses, used and contracts merge into one Objects group: each answer
+			// re-merges what has arrived so far, and the group stays pending
+			// until the last of them is in.
+			const envelopes = objectSuffixes.map(() => null)
+			let objectsOk = true
+			const loadObjects = objectSuffixes.length
+				? Promise.all(objectSuffixes.map((suffix, i) => this.fetchSection(suffix).then(async ({ ok, data }) => {
+						if (!current()) {
+							return
+						}
+						objectsOk = objectsOk && ok
+						envelopes[i] = data
+						await this.resolveSchemaTitles([data])
+						if (!current()) {
+							return
+						}
+						const objectItems = this.mergeObjectResults(envelopes)
+						setGroup('objects', objectItems, objectItems.length)
+					}))).then(() => {
+						if (current()) {
+							settle('objects', objectsOk)
+						}
+					})
+				: null
+
+			try {
+				await Promise.all([loadRelations, loadFiles, loadObjects])
 			} finally {
-				this.loading = false
+				if (current()) {
+					this.loading = false
+					this.pendingSections = []
+				}
 			}
 		},
 
@@ -1896,6 +2025,20 @@ export default {
 	font-style: italic;
 }
 
+.cn-related-objects-widget__section-status {
+	margin: 0;
+	padding: var(--default-grid-baseline, 4px) calc(2 * var(--default-grid-baseline, 4px));
+	color: var(--color-text-maxcontrast);
+	font-size: 0.85em;
+}
+
+.cn-related-objects-widget__section-error {
+	margin: 0;
+	padding: var(--default-grid-baseline, 4px) calc(2 * var(--default-grid-baseline, 4px));
+	color: var(--color-error-text, var(--color-error));
+	font-size: 0.85em;
+}
+
 .cn-related-objects-widget__empty-state {
 	/* NcEmptyContent defaults to filling tall parents; inside a widget cell a
 	   compact block reads better. */

package/src/composables/__tests__/useObjectLock.endpoints.spec.js

@@ -174,3 +174,86 @@ describe('useObjectLock reaches the routes OpenRegister actually declares', () =
 		})
 	})
 })
+
+/**
+ * Run the composable with getter inputs, the way CnDetailPage calls it.
+ *
+ * @param {object}   store   The object store double.
+ * @param {object}   targets Getters for register, schema (cache key), id and slug.
+ * @param {Function} body    What to do with the lock state.
+ * @return {Promise<*>} Whatever `body` returned.
+ */
+async function withGetterLock(store, targets, body) {
+	const scope = effectScope()
+	let lock
+	scope.run(() => {
+		lock = useObjectLock(store, targets.register, targets.schema, targets.id, {
+			autoRenew: false,
+			schemaSlug: targets.slug,
+		})
+	})
+	try {
+		return await body(lock)
+	} finally {
+		scope.stop()
+	}
+}
+
+describe('useObjectLock reads getter inputs as values', () => {
+	beforeEach(() => {
+		mockAxios.post.mockReset().mockResolvedValue({ data: {} })
+	})
+
+	it('🔴 puts the getter VALUES in the lock URL, not their source', async () => {
+		await withGetterLock(storeWithLock(null), {
+			register: () => 'dossiq',
+			schema: () => 'dossiq-case',
+			id: () => 'case-1',
+			slug: () => 'case',
+		}, async (lock) => {
+			await lock.acquire()
+		})
+
+		const [url] = mockAxios.post.mock.calls[0]
+		expect(url).toBe('/apps/openregister/api/objects/dossiq/case/case-1/lock')
+		expect(url).not.toMatch(/=>/)
+	})
+
+	it('🔴 reads the cached lock under the getter value of the cache key', async () => {
+		await withGetterLock(storeWithLock('bram'), {
+			register: () => 'dossiq',
+			schema: () => 'dossiq-case',
+			id: () => 'case-1',
+			slug: () => 'case',
+		}, async (lock) => {
+			expect(lock.locked.value).toBe(true)
+			expect(lock.lockedBy.value).toBe('bram')
+		})
+	})
+
+	it('🔴 releases on the getter values too', async () => {
+		await withGetterLock(storeWithLock('anna'), {
+			register: () => 'dossiq',
+			schema: () => 'dossiq-case',
+			id: () => 'case-1',
+			slug: () => 'case',
+		}, async (lock) => {
+			await lock.release()
+		})
+
+		expect(mockAxios.post).toHaveBeenCalledWith('/apps/openregister/api/objects/dossiq/case/case-1/unlock')
+	})
+
+	it.each([
+		['register', { register: () => '', schema: () => 'dossiq-case', id: () => 'case-1', slug: () => 'case' }],
+		['schema slug', { register: () => 'dossiq', schema: () => 'dossiq-case', id: () => 'case-1', slug: () => undefined }],
+		['object id', { register: () => 'dossiq', schema: () => 'dossiq-case', id: () => null, slug: () => 'case' }],
+	])('sends nothing while the %s is unknown', async (_label, targets) => {
+		await withGetterLock(storeWithLock('anna'), targets, async (lock) => {
+			await lock.acquire()
+			await lock.release()
+		})
+
+		expect(mockAxios.post).not.toHaveBeenCalled()
+	})
+})

package/src/composables/useObjectLock.js

@@ -5,7 +5,7 @@ import { getCurrentUser } from '@nextcloud/auth'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 import { tryOnScopeDispose } from '@vueuse/core'
-import { computed, onBeforeUnmount, onMounted, unref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, toValue } from 'vue'
 
 /**
  * Thrown when an `acquire()` POST returns 409 (Conflict) or 423
@@ -46,14 +46,14 @@ export class PermissionError extends Error {
  * other path that keeps `objectStore.objects[type][id]` fresh).
  *
  * @param {object} objectStore  Pinia store instance (`useObjectStore()` result).
- * @param {string|import('vue').Ref<string>}      register OR register slug.
- * @param {string|import('vue').Ref<string>}      schema   OR schema slug (also the GraphQL field name).
- * @param {string|import('vue').Ref<string>}      id       Object UUID.
+ * @param {string|import('vue').Ref<string>|function(): string}      register OR register slug.
+ * @param {string|import('vue').Ref<string>|function(): string}      schema   OR schema slug (also the GraphQL field name).
+ * @param {string|import('vue').Ref<string>|function(): string}      id       Object UUID.
  * @param {object}  [options]  Optional config.
  * @param {boolean} [options.autoRenew]      Renew the lock on a fixed interval while editing + visible.
  * @param {number}  [options.renewIntervalMs]  Renew every N ms (default 10 min).
  * @param {number}  [options.lockDurationSec]   Server-side TTL requested on acquire (default 30 min).
- * @param {string|import('vue').Ref<string>} [options.schemaSlug] The schema slug for the LOCK URL, when `schema` is the object-cache key rather than the slug (CnDetailPage passes `<register>-<schema>` as the key). Defaults to `schema`.
+ * @param {string|import('vue').Ref<string>|function(): string} [options.schemaSlug] The schema slug for the LOCK URL, when `schema` is the object-cache key rather than the slug (CnDetailPage passes `<register>-<schema>` as the key). Defaults to `schema`.
  * @return {{
  *   locked: import('vue').ComputedRef<boolean>,
  *   lockedByMe: import('vue').ComputedRef<boolean>,
@@ -62,6 +62,7 @@ export class PermissionError extends Error {
  *   acquire: () => Promise<void>,
  *   release: () => Promise<void>
  * }} Reactive lock state + actions.
+ * @spec openspec/changes/r4-object-lock-url-and-credentials-copy/specs/object-lock/spec.md
  */
 export function useObjectLock(objectStore, register, schema, id, options = {}) {
 	const autoRenew = options.autoRenew !== false
@@ -74,14 +75,23 @@ export function useObjectLock(objectStore, register, schema, id, options = {}) {
 	const isVisible = () => typeof document === 'undefined' || document.visibilityState !== 'hidden'
 	let renewTimer = null
 
+	/*
+	 * 🔴 `toValue`, NOT `unref`. CnDetailPage passes GETTER FUNCTIONS
+	 * (`() => props.objectId`) so the lock follows the route. `unref` returns a
+	 * function untouched, so the getter's SOURCE was interpolated into the URL:
+	 * every detail page sent `/api/objects/()=>pn/()=>Ct.schema||Bn/()=>Ct.objectId/lock`
+	 * and got a 404, and the cache lookup used the function as its key, so the
+	 * banner never saw a lock either. `toValue` reads a plain value, a ref and a
+	 * getter alike.
+	 */
 	function readType() {
-		return unref(schema)
+		return toValue(schema)
 	}
 	function readId() {
-		return unref(id)
+		return toValue(id)
 	}
 	function readRegister() {
-		return unref(register)
+		return toValue(register)
 	}
 
 	function readSelfLock() {
@@ -127,7 +137,22 @@ export function useObjectLock(objectStore, register, schema, id, options = {}) {
 	})
 
 	function readSchemaSlug() {
-		return unref(options.schemaSlug ?? schema)
+		return toValue(options.schemaSlug ?? schema)
+	}
+
+	/**
+	 * Whether register, schema slug and object id are all known.
+	 *
+	 * A detail page mounts before its route params or object have resolved.
+	 * Without this a lock call would go out with `undefined` in the path, a
+	 * request OpenRegister can only answer with a 404.
+	 *
+	 * @spec openspec/changes/r4-object-lock-url-and-credentials-copy/specs/object-lock/spec.md
+	 * @return {boolean} True when a lock URL can be built.
+	 */
+	function hasTarget() {
+		return [readRegister(), readSchemaSlug(), readId()]
+			.every((part) => typeof part === 'string' ? part !== '' : typeof part === 'number')
 	}
 
 	/**
@@ -176,6 +201,9 @@ export function useObjectLock(objectStore, register, schema, id, options = {}) {
 	}
 
 	async function acquire() {
+		if (!hasTarget()) {
+			return
+		}
 		try {
 			await axios.post(endpoint(), { duration: lockDurationSec })
 		} catch (e) {
@@ -208,6 +236,9 @@ export function useObjectLock(objectStore, register, schema, id, options = {}) {
 
 	async function release() {
 		stopRenewTimer()
+		if (!hasTarget()) {
+			return
+		}
 		try {
 			await axios.post(unlockEndpoint())
 		} catch (e) {
@@ -251,7 +282,7 @@ export function useObjectLock(objectStore, register, schema, id, options = {}) {
 	}
 
 	function beaconRelease() {
-		if (!lockedByMe.value) {
+		if (!lockedByMe.value || !hasTarget()) {
 			return
 		}
 		try {

package/src/css/look-board-index.css

@@ -343,7 +343,10 @@
 }
 
 .cn-look-board .cn-index-page__main.cn-index-page__main--table {
-	flex: 0 1 auto;
+	/* The body is a row: the card takes the width left beside a sidebar (the
+	   board's table card spans the content), and keeps the height of its rows. */
+	flex: 1 1 auto;
+	align-self: flex-start;
 	border: 1px solid var(--color-border);
 	border-radius: var(--cn-board-card-radius, 12px);
 	background: var(--color-main-background);
@@ -533,6 +536,37 @@
 	background: var(--color-primary-element-light);
 }
 
+/* The status accent outranks the board's border, also on hover and selection. */
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent {
+	border-inline-start-width: 4px;
+	padding-inline-start: 13px;
+}
+
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-success,
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-success:hover {
+	border-inline-start-color: var(--color-element-success);
+}
+
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-warning,
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-warning:hover {
+	border-inline-start-color: var(--color-element-warning);
+}
+
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-error,
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-error:hover {
+	border-inline-start-color: var(--color-element-error);
+}
+
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-info,
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-info:hover {
+	border-inline-start-color: var(--color-element-info);
+}
+
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-primary,
+.cn-look-board .cn-object-card.cn-object-card--board.cn-object-card--accent-primary:hover {
+	border-inline-start-color: var(--color-primary-element);
+}
+
 .cn-look-board .cn-object-card--board .cn-object-card__content {
 	display: flex;
 	flex: 1 1 auto;

package/src/index.js

@@ -542,6 +542,7 @@ export { cnFetch, cnFetchJson, CnHttpError, configureCnFetch } from './utils/cnF
 // CnLockIndicator, CnObjectCard and CnDataTable, and available to apps that
 // need the same answer without rendering a padlock.
 export { isLockedByCurrentUser, isObjectLocked, lockHolder, readLockPayload, resolveObjectLock } from './utils/objectLock.js'
+export { dispatchObjectsChanged } from './utils/objectSignals.js'
 export { columnsFromSchema, fieldsFromSchema, filtersFromSchema, findRepeatingWrite, formatValue, journeyItemTargets, validateValue } from './utils/index.js'
 export { DYNAMIC_KEY_PREFIX, EXTENDS_FORM_KEY, PREFILL_KEY, splitDynamicFormData, usesArrayValues, valueArrayFor, valueRecordsFor } from './utils/index.js'
 // The OpenRegister schema API contract — shared so Buildiq and OpenRegister cannot

package/src/store/useObjectStore.js

@@ -240,9 +240,10 @@ const baseActions = {
 	 * @param {object} [slugs] Optional slug hints for live-updates transport
 	 * @param {string|null} [slugs.registerSlug] Canonical register slug (e.g. 'zaken')
 	 * @param {string|null} [slugs.schemaSlug]   Canonical schema slug (e.g. 'meldingen')
+	 * @param {string} [slugs.collectionUrl] Endpoint `fetchCollection` lists from instead of `/register/schema`; every other call keeps the pair URL
 	 */
 	registerObjectType(slug, schemaId, registerId, slugs = {}) {
-		const { registerSlug = null, schemaSlug = null } = slugs
+		const { registerSlug = null, schemaSlug = null, collectionUrl = null } = slugs
 		// Replace entire objects so Vue 2 reactivity detects the change
 		// (Vue 2 cannot track new properties added to existing reactive objects)
 		this.objectTypeRegistry = {
@@ -252,6 +253,7 @@ const baseActions = {
 				register: registerId,
 				registerSlug,
 				schemaSlug,
+				...(collectionUrl ? { collectionUrl } : {}),
 			},
 		}
 		this.collections = { ...this.collections, [slug]: [] }
@@ -496,6 +498,31 @@ const baseActions = {
 		return url
 	},
 
+	/**
+	 * Build the list URL for a type registered with a `collectionUrl`. `_order`
+	 * goes in the bracket form (`_order[key]=dir`) every PHP endpoint parses.
+	 *
+	 * @param {object} config The type config
+	 * @param {object} [params] Query parameters
+	 * @return {string} Full URL including query string
+	 */
+	_buildCollectionUrl(config, params = {}) {
+		const { _order: order, ...rest } = params
+		const merged = { ...rest }
+		if (order && typeof order === 'object') {
+			for (const [key, dir] of Object.entries(order)) {
+				merged[`_order[${key}]`] = dir
+			}
+		}
+		const lang = this._resolveLanguage()
+		if (lang) {
+			merged._lang = lang
+		}
+		const url = prefixUrl(config.collectionUrl)
+		const query = buildQueryString(merged)
+		return query && url.includes('?') ? url + '&' + query.slice(1) : url + query
+	},
+
 	/**
 	 * Fetch for a type, retrying ONCE with its `schemaFallback` when the
 	 * schema path segment answers 404. A type without a fallback (every type
@@ -685,14 +712,15 @@ const baseActions = {
 				}
 			}
 
-			const response = await this._fetchWithSchemaFallback(
-				type,
-				(schema) => this._buildUrlWithParams(type, fetchParams, null, schema),
-				{
-					method: 'GET',
-					headers: this._buildHeaders(),
-				},
-			)
+			const config = this._getTypeConfig(type)
+			const init = { method: 'GET', headers: this._buildHeaders() }
+			const response = config.collectionUrl
+				? await trackedFetch(this._buildCollectionUrl(config, fetchParams), init)
+				: await this._fetchWithSchemaFallback(
+						type,
+						(schema) => this._buildUrlWithParams(type, fetchParams, null, schema),
+						init,
+					)
 
 			if (!response.ok) {
 				const failure = await parseResponseError(response, type)

package/src/utils/index.js

@@ -19,3 +19,4 @@ export { validateFieldValue } from './formValidation.js'
 export { computeObjectDiff } from './computeObjectDiff.js'
 export { foldAuditTrailEntries } from './auditTrailDiff.js'
 export { isLockedByCurrentUser, isObjectLocked, lockHolder, readLockPayload, resolveObjectLock } from './objectLock.js'
+export { dispatchObjectsChanged } from './objectSignals.js'