@conduction/nextcloud-vue 2.65.0 → 2.66.0

package/src/components/CnFormDialog/CnFormDialog.vue

@@ -513,6 +513,7 @@ import { draftKey, formDraftMixin, readDraft } from '../../composables/useFormDr
 import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry.js'
 import { TENANT_CONTEXT_KEY } from '../../composables/useTenantContext.js'
 import { useObjectStore } from '../../store/useObjectStore.js'
+import { resolveCreateOverrideHandler } from '../../utils/actionsDispatcher.js'
 import {
 	definitionQueryParams,
 	DYNAMIC_KEY_PREFIX,
@@ -757,6 +758,18 @@ export default {
 		 * identity when used standalone (no CnAppRoot ancestor).
 		 */
 		cnTranslate: { default: () => (key) => key },
+
+		/**
+		 * The app manifest, the v2 registry, the legacy customComponents map and
+		 * the registry-modal opener, all provided by CnAppRoot. A select-or-create
+		 * picker reads them to create an object the way the app's own index page
+		 * does (`config.createOverride` / `config.createModal`). Standalone (no
+		 * CnAppRoot) they are absent and the generic nested form is used.
+		 */
+		cnManifest: { default: null },
+		cnRegistry: { default: null },
+		cnCustomComponents: { default: null },
+		cnOpenModal: { default: null },
 	},
 
 	props: {
@@ -2649,6 +2662,16 @@ export default {
 				store.registerObjectType(slug, schemaRef, register)
 			}
 			const labelField = this.referenceLabelField(field)
+			// The app may own how this schema is created (pipelinq's client and
+			// contact need a contact-first endpoint; a plain save 400s). A
+			// create override keeps this form and saves through the app's
+			// handler; a create modal (only when no override exists) opens the
+			// app's own dialog instead of the generic form.
+			const appCreate = this.appCreateFor(register, schemaRef)
+			if (!appCreate.override && appCreate.modal) {
+				return this.openAppCreateModal(appCreate.modal, store, slug, labelField, term)
+			}
+			const override = appCreate.override
 			let schema = null
 			try {
 				schema = await store.fetchSchema(slug)
@@ -2656,14 +2679,113 @@ export default {
 				schema = null
 			}
 			if (!schema || !schema.properties) {
-				return store.saveObject(slug, { [labelField]: term })
+				const payload = { [labelField]: term }
+				return override
+					? override(payload, { register, schema: schemaRef, objectType: slug, effectiveSchema: null })
+					: store.saveObject(slug, payload)
 			}
 			const initialData = {}
 			if (term && schema.properties[labelField]) {
 				initialData[labelField] = term
 			}
 			return new Promise((resolve) => {
-				this.nestedCreate = { field, schema, register, slug, initialData, resolve }
+				this.nestedCreate = { field, schema, register, slug, schemaRef, initialData, override, resolve }
+			})
+		},
+
+		/**
+		 * How the app creates objects of a schema, read off the manifest page
+		 * that lists them: the index page whose `config.schema` (and, when it
+		 * names one, `config.register`) matches. Its `config.createOverride` is
+		 * resolved to the registered handler; its `config.createModal` is the
+		 * registry key of a `kind: 'modal'` dialog.
+		 *
+		 * @spec openspec/changes/review-round-two/specs/schema-utilities/spec.md
+		 * @param {string} register The reference's register.
+		 * @param {string} schemaRef The reference's schema slug or id.
+		 * @return {{override: (((formData: object, ctx: object) => Promise<object>)|null), modal: (string|null)}} What the app declared.
+		 */
+		appCreateFor(register, schemaRef) {
+			const none = { override: null, modal: null }
+			const pages = this.cnManifest && Array.isArray(this.cnManifest.pages) ? this.cnManifest.pages : []
+			const wanted = String(schemaRef).toLowerCase()
+			const page = pages.find((p) => {
+				const config = p && p.config
+				if (!config || config.schema === undefined || config.schema === null) {
+					return false
+				}
+				if (String(config.schema).toLowerCase() !== wanted) {
+					return false
+				}
+				return !config.register || String(config.register) === String(register)
+			})
+			if (!page) {
+				return none
+			}
+			const config = page.config
+			const override = typeof config.createOverride === 'function'
+				? config.createOverride
+				: resolveCreateOverrideHandler(config.createOverride, this.cnRegistry, this.cnCustomComponents)
+			const modalEntry = typeof config.createModal === 'string' && config.createModal !== ''
+				? (this.cnRegistry || {})[config.createModal]
+				: null
+			const modal = modalEntry && modalEntry.kind === 'modal' && typeof this.cnOpenModal === 'function'
+				? config.createModal
+				: null
+			return { override: override || null, modal }
+		},
+
+		/**
+		 * Open the app's own create dialog (a registry modal) for a picker and
+		 * wait for it. The dialog reports the new object (or its id) with a
+		 * `created` event; `close` without one resolves null so the field stays
+		 * as it was. A reported id is fetched so the picker can label it.
+		 *
+		 * @spec openspec/changes/review-round-two/specs/schema-utilities/spec.md
+		 * @param {string} key The registry key of the modal.
+		 * @param {object} store The object store.
+		 * @param {string} slug The object type slug.
+		 * @param {string} labelField The property the typed term belongs in.
+		 * @param {string} term The typed search term.
+		 * @return {Promise<object|null>} The created object, or null.
+		 */
+		openAppCreateModal(key, store, slug, labelField, term) {
+			return new Promise((resolve) => {
+				let settled = false
+				let reported = false
+				const settle = (value) => {
+					if (!settled) {
+						settled = true
+						resolve(value)
+					}
+				}
+				this.cnOpenModal(key, {
+					initialData: term ? { [labelField]: term } : {},
+					onCreated: async (created) => {
+						if (created && typeof created === 'object') {
+							settle(created)
+							return
+						}
+						if (typeof created !== 'string' && typeof created !== 'number') {
+							return
+						}
+						reported = true
+						let obj
+						try {
+							obj = await store.fetchObject(slug, String(created))
+						} catch {
+							obj = null
+						}
+						settle(obj || { id: String(created), [labelField]: term })
+					},
+					onClose: () => {
+						// A dialog often emits `close` right after `created`,
+						// while the id is still being fetched: that fetch settles.
+						if (!reported) {
+							settle(null)
+						}
+					},
+				})
 			})
 		},
 
@@ -2682,10 +2804,28 @@ export default {
 				return
 			}
 			const store = this.getObjectStore()
-			const created = store ? await store.saveObject(pending.slug, formData) : null
+			let created = null
+			let thrown = null
+			if (pending.override) {
+				// The app's create override owns persistence (same contract as
+				// CnIndexPage's `createOverride`).
+				try {
+					created = await pending.override(formData, {
+						register: pending.register,
+						schema: pending.schemaRef,
+						objectType: pending.slug,
+						effectiveSchema: pending.schema,
+					})
+				} catch (err) {
+					thrown = (err && err.response && err.response.data && err.response.data.error) || (err && err.message) || null
+				}
+			} else {
+				created = store ? await store.saveObject(pending.slug, formData) : null
+			}
 			if (!created) {
 				const error = store && store.errors ? store.errors[pending.slug] : null
-				const message = (error && error.message)
+				const message = thrown
+					|| (!pending.override && error && error.message)
 					|| t('nextcloud-vue', 'The item could not be created.')
 				const dialog = this.$refs.nestedCreateDialog
 				if (dialog && typeof dialog.setValidationErrors === 'function') {

package/src/components/CnHeaderWidget/CnHeaderWidget.vue

@@ -35,12 +35,15 @@
 			</a>
 		</div>
 		<!-- A view switch at the right of the heading (`content.views`): "My
-		     work / My team" as a segmented control whose options are routes. -->
+		     work / My team" as a segmented control whose options are routes,
+		     or views of the page the widget sits on (`option.view`); a view
+		     option controls the page's view region. -->
 		<div v-if="viewOptions.length > 0" class="cn-header-widget__views">
 			<CnSegmentedControl
 				:options="viewOptions"
 				:modelValue="activeView"
 				:ariaLabel="viewsLabel"
+				:controls="viewsRegionId"
 				data-testid="cn-header-widget-views"
 				@update:modelValue="onViewChange" />
 		</div>
@@ -66,6 +69,9 @@ const ALLOWED_TEXT_ALIGN = ['left', 'center', 'right']
 const ALLOWED_VERTICAL_ALIGN = ['top', 'middle', 'bottom']
 const ALLOWED_CTA_STYLES = ['primary', 'secondary', 'ghost']
 
+/** Marks a switch option that selects a page view rather than a route. */
+const VIEW_OPTION_PREFIX = 'view:'
+
 const HEIGHT_PIXELS = Object.freeze({
 	small: 120,
 	medium: 200,
@@ -121,6 +127,12 @@ export default {
 		 * untranslated key renders as itself.
 		 */
 		cnTranslate: { default: () => (key) => key },
+		/**
+		 * The views of the page this widget sits on, provided by
+		 * CnDashboardPage / CnDetailPage (`views`). An option with a `view`
+		 * selects one of them. Null outside such a page.
+		 */
+		cnPageViews: { default: null },
 	},
 
 	props: {
@@ -131,9 +143,12 @@ export default {
 		 * greeting, showDate, plain, ground, views}`. All fields are optional except
 		 * `title` (or `greeting`); unknown enum values collapse to documented
 		 * defaults and the renderer never throws. `views` is
-		 * `{ ariaLabel?, options: [{ label, route, params? }] }`: a segmented
-		 * control at the right of the heading whose checked option is the
-		 * current route; choosing another pushes its route. `ground: true`
+		 * `{ ariaLabel?, options: [{ label, route, params? } | { label, view }] }`:
+		 * a segmented control at the right of the heading whose checked option
+		 * is the current route; choosing another pushes its route. An option
+		 * with `view` selects that view of the page the widget sits on (the
+		 * page's `views`) instead, and the page then draws no switch of its
+		 * own. `ground: true`
 		 * draws the greeting on the page ground: the plain look with no
 		 * padding, a 32px heading and the date line 6px above it (a dashboard
 		 * also drops the widget's card for it).
@@ -229,12 +244,45 @@ export default {
 		 */
 		viewOptions() {
 			const raw = this.content && this.content.views && this.content.views.options
-			if (!Array.isArray(raw) || !this.$router) {
+			if (!Array.isArray(raw)) {
 				return []
 			}
+			const pageViewIds = this.pageViewIds
 			return raw
-				.filter((o) => o && typeof o.label === 'string' && o.label !== '' && typeof o.route === 'string' && o.route !== '')
-				.map((o) => ({ value: o.route, label: this.cnTranslate(o.label) }))
+				.filter((o) => o && typeof o.label === 'string' && o.label !== '')
+				.map((o) => {
+					if (typeof o.view === 'string' && o.view !== '') {
+						return pageViewIds.includes(o.view) ? { value: VIEW_OPTION_PREFIX + o.view, label: this.cnTranslate(o.label) } : null
+					}
+					if (typeof o.route === 'string' && o.route !== '' && this.$router) {
+						return { value: o.route, label: this.cnTranslate(o.label) }
+					}
+					return null
+				})
+				.filter(Boolean)
+		},
+
+		/**
+		 * The ids of the page's views, empty outside a page with views.
+		 *
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-a-greeting-header-can-switch-the-pages-views
+		 * @return {string[]}
+		 */
+		pageViewIds() {
+			const views = this.cnPageViews && Array.isArray(this.cnPageViews.views) ? this.cnPageViews.views : []
+			return views.map((view) => view.id)
+		},
+
+		/**
+		 * The id of the page's view region when an option selects a view,
+		 * for the options' `aria-controls`; '' otherwise.
+		 *
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-the-view-switch-is-accessible
+		 * @return {string}
+		 */
+		viewsRegionId() {
+			const hasViewOption = this.viewOptions.some((o) => o.value.startsWith(VIEW_OPTION_PREFIX))
+			return hasViewOption && this.cnPageViews ? (this.cnPageViews.regionId || '') : ''
 		},
 
 		/**
@@ -249,6 +297,11 @@ export default {
 			if (options.length === 0) {
 				return null
 			}
+			const activeView = this.cnPageViews ? this.cnPageViews.activeId : null
+			const viewMatch = activeView ? options.find((o) => o.value === VIEW_OPTION_PREFIX + activeView) : null
+			if (viewMatch) {
+				return viewMatch.value
+			}
 			const current = this.$route && this.$route.name
 			const match = options.find((o) => o.value === current)
 			return match ? match.value : options[0].value
@@ -263,7 +316,7 @@ export default {
 		 */
 		viewsLabel() {
 			const label = this.content && this.content.views && this.content.views.ariaLabel
-			return label ? this.cnTranslate(label) : t('nextcloud-vue', 'View')
+			return label ? this.cnTranslate(label) : t('nextcloud-vue', 'Views')
 		},
 
 		/**
@@ -697,6 +750,12 @@ export default {
 		 * @return {void}
 		 */
 		onViewChange(route) {
+			if (typeof route === 'string' && route.startsWith(VIEW_OPTION_PREFIX)) {
+				if (this.cnPageViews && typeof this.cnPageViews.select === 'function') {
+					this.cnPageViews.select(route.slice(VIEW_OPTION_PREFIX.length))
+				}
+				return
+			}
 			if (!this.$router || !route || route === (this.$route && this.$route.name)) {
 				return
 			}

package/src/components/CnSegmentedControl/CnSegmentedControl.md

@@ -43,4 +43,4 @@ export default {
 </script>
 ```
 
-Props: `options` lists the choices, `modelValue` is the chosen value (use `v-model`), `aria-label` names the group (or point `aria-labelledby` at a visible heading), and `stretch` fills the width.
+Props: `options` lists the choices, `modelValue` is the chosen value (use `v-model`), `aria-label` names the group (or point `aria-labelledby` at a visible heading), `controls` names the id of the element the options switch (set as `aria-controls` on every option), and `stretch` fills the width.

package/src/components/CnSegmentedControl/CnSegmentedControl.vue

@@ -20,6 +20,7 @@
 			:aria-checked="isChecked(option) ? 'true' : 'false'"
 			:tabindex="index === focusableIndex ? 0 : -1"
 			:disabled="option.disabled || null"
+			:aria-controls="controls || null"
 			:data-value="option.key"
 			@click="select(option)">
 			<!-- @slot option Replaces the content of one option. -->
@@ -95,6 +96,17 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Id of the element the options switch, such as the region holding a
+		 * page view's widgets. Set as `aria-controls` on every option.
+		 *
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-the-view-switch-is-accessible
+		 */
+		controls: {
+			type: String,
+			default: '',
+		},
+
 		/** Stretch the control to the full width, with options of equal width. */
 		stretch: {
 			type: Boolean,

package/src/css/detail-page.css

@@ -481,3 +481,8 @@
 	font-size: 0.9em;
 	white-space: nowrap;
 }
+
+/* A page view the switch shows with nothing to draw (view-switch-containers). */
+.cn-detail-page .cn-page-view-region--empty {
+	padding: 40px 20px;
+}