@conduction/nextcloud-vue 2.64.0 → 2.66.0

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -47,9 +47,14 @@
 			v-if="breadcrumbCrumbs.length > 0 && !objectNotFound"
 			class="cn-detail-page__breadcrumbs"
 			:crumbs="breadcrumbCrumbs"
+			:rootText="breadcrumbCrumbs[0].icon === undefined"
 			data-testid="cn-detail-page-breadcrumbs" />
 		<!-- Header -->
-		<div v-if="!objectNotFound" class="cn-detail-page__header" data-testid="cn-detail-page-header">
+		<div
+			v-if="!objectNotFound"
+			class="cn-detail-page__header"
+			:class="{ 'cn-detail-page__header--card': headerCard, 'cn-detail-page__header--with-widget': headerWidgetDef !== null }"
+			data-testid="cn-detail-page-header">
 			<!-- Header (left block) — overridable via #header slot. Default
 			     renders the icon + title + description. The right-hand
 			     #actions slot remains separate so headerComponent and
@@ -140,6 +145,18 @@
 				</div>
 			</slot>
 			<div class="cn-detail-page__header-actions">
+				<!-- The page's view switch (`views`), unless a greeting header
+				     widget on the page draws it. Its options control the view
+				     region in the body. -->
+				<CnSegmentedControl
+					v-if="showsPageViewSwitch"
+					class="cn-page-view-switch"
+					:options="viewSwitchOptions"
+					:modelValue="activeViewId"
+					:ariaLabel="viewSwitchLabel"
+					:controls="viewRegionId"
+					data-testid="cn-detail-page-view-switch"
+					@update:modelValue="selectView" />
 				<!-- Next and previous inside the list this record was opened
 				     from. Rendered only when the address names that list: a
 				     record reached by a bare link offers neither, rather than
@@ -370,6 +387,50 @@
 					</template>
 				</CnActionsMenu>
 			</div>
+			<!-- A widget inside the header (manifest `config.headerWidget`), on
+			     a row of its own under the title and the actions: the stages
+			     bars of the board's case card. Drawn without a card of its own,
+			     and taken out of the body grid. Nothing renders without the
+			     key. -->
+			<div
+				v-if="headerWidgetDef !== null"
+				class="cn-detail-page__header-widget"
+				data-testid="cn-detail-page-header-widget">
+				<!--
+					@slot `widget-${headerWidgetDef.id}`
+					@description The same per-widget slot the body grid and the side
+					column offer, for the widget placed in the header
+					(`headerWidget`). Same name and same bindings.
+				-->
+				<slot
+					:name="`widget-${headerWidgetDef.id}`"
+					:item="{ id: headerWidgetDef.id, widgetId: headerWidgetDef.id }"
+					:widget="headerWidgetDef"
+					:objectId="objectId"
+					:object="resolvedObject"
+					:objectData="resolvedObject"
+					:objectType="resolvedObjectType"
+					:register="register"
+					:schema="schema">
+					<CnDetailWidgetHost
+						:widget="headerWidgetDef"
+						chrome="bare"
+						:objectId="objectId"
+						:object="currentObject"
+						:objectType="resolvedObjectType"
+						:schemaObject="currentSchema"
+						:register="register"
+						:schema="schema"
+						:store="effectiveObjectStore"
+						:surface="surface"
+						:integrationContext="effectiveIntegrationContext"
+						:hideEmpty="hideEmpty"
+						:cnRegistry="cnRegistry"
+						:availableWidgets="widgets"
+						@geoSaved="onGeoSaved"
+						@openIntegration="onAutoBodyOpenIntegration" />
+				</slot>
+			</div>
 		</div>
 
 		<!-- The locked card, under the title, for ANY active lock — not only a
@@ -560,15 +621,19 @@
 			     subscribed to the layout/widgets arrays — in-place pushes
 			     (Add widget) keep the same array identity and can't re-render
 			     it. One remount per edit flip re-subscribes it. -->
+			<!-- One grid per section: the body grid, then the chosen view
+			     (`views`) in a region the view switch controls. A view grid is
+			     keyed on its view, so switching mounts the other view's grid. -->
 			<CnDashboardGrid
-				v-if="hasBodyGrid"
-				:key="`cn-detail-grid-${editingBody ? 'editing' : 'live'}`"
-				:layout="bodyGridLayout"
+				v-for="section in bodyGridSections"
+				:key="`cn-detail-grid-${section.key}-${editingBody ? 'editing' : 'live'}`"
+				v-bind="section.attrs"
+				:layout="section.layout"
 				:editable="editingBody"
 				:columns="12"
 				:columnOpts="columnOpts"
 				class="cn-detail-page__grid"
-				@layoutChange="onBodyLayoutChange">
+				@layoutChange="section.view ? onViewLayoutChange($event) : onBodyLayoutChange($event)">
 				<template #widget="{ item }">
 					<div
 						class="cn-detail-page__grid-item"
@@ -678,6 +743,22 @@
 				</template>
 			</CnDashboardGrid>
 
+			<!-- The chosen view has nothing to draw: say so in the region,
+			     never leave a blank area under the switch. -->
+			<div
+				v-if="viewIsEmpty"
+				:id="viewRegionId"
+				role="region"
+				:aria-label="activeView ? activeView.label : null"
+				class="cn-page-view-region cn-page-view-region--empty"
+				data-testid="cn-detail-page-view-empty">
+				<NcEmptyContent :description="viewEmptyText">
+					<template #icon>
+						<ViewDashboardOutline :size="48" />
+					</template>
+				</NcEmptyContent>
+			</div>
+
 			<!-- Statistics table -->
 			<div v-if="hasStats" class="cn-detail-page__stats">
 				<!--
@@ -987,6 +1068,7 @@ import InformationOutline from 'vue-material-design-icons/InformationOutline.vue
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import Refresh from 'vue-material-design-icons/Refresh.vue'
+import ViewDashboardOutline from 'vue-material-design-icons/ViewDashboardOutline.vue'
 import CnRelationLinkModal from '../../dialogs/CnRelationLinkModal.vue'
 import CnWidgetStyleEditorModal from '../../dialogs/CnWidgetStyleEditorModal.vue'
 import CnActionsMenu from '../CnActionsMenu/CnActionsMenu.vue'
@@ -999,6 +1081,7 @@ import CnLifecycleActions from '../CnLifecycleActions/CnLifecycleActions.vue'
 import CnLockedBanner from '../CnLockedBanner/CnLockedBanner.vue'
 import CnNextStepCard from '../CnNextStepCard/CnNextStepCard.vue'
 import CnRelatedCollections from '../CnRelatedCollections/CnRelatedCollections.vue'
+import CnSegmentedControl from '../CnSegmentedControl/CnSegmentedControl.vue'
 import CnSummaryAggregates from '../CnSummaryAggregates/CnSummaryAggregates.vue'
 import CnTranslatedBadge from '../CnTranslatedBadge/CnTranslatedBadge.vue'
 import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry.js'
@@ -1006,6 +1089,7 @@ import { useObjectLock } from '../../composables/useObjectLock.js'
 import { useObjectPresence } from '../../composables/useObjectPresence.js'
 import { useObjectSubscription } from '../../composables/useObjectSubscription.js'
 import { gridLayout } from '../../mixins/gridLayout.js'
+import { pageViews } from '../../mixins/pageViews.js'
 import { useObjectStore } from '../../store/index.js'
 import { isAppInstalled } from '../../utils/appInstalled.js'
 import { compactLayoutRows } from '../../utils/dashboardPlacement.js'
@@ -1178,6 +1262,8 @@ export default {
 		CnDetailWidgetHost,
 		CnFormDialog,
 		CnDashboardGrid,
+		CnSegmentedControl,
+		ViewDashboardOutline,
 		CnLifecycleActions,
 		CnActionButtons,
 		CnBreadcrumbs,
@@ -1193,7 +1279,7 @@ export default {
 		Pencil,
 	},
 
-	mixins: [gridLayout],
+	mixins: [gridLayout, pageViews],
 
 	inject: {
 		/**
@@ -2104,11 +2190,14 @@ export default {
 		 * A breadcrumb line above the header (manifest `config.breadcrumb`):
 		 * `{ label, route?, params?, href? }` names the list the record
 		 * belongs to; the record's display name follows as the current
-		 * crumb. `label` goes through the host translate function. Null (the
-		 * default) draws no trail.
+		 * crumb. `label` goes through the host translate function and shows
+		 * as text; `icon` (an MDI name, e.g. `Home`) draws that icon instead,
+		 * with the label as its accessible name. Null (the default) draws no
+		 * trail.
 		 *
 		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-detail-page-drops-its-eyebrow-and-shows-a-breadcrumb
-		 * @type {{label: string, route?: string, params?: object, href?: string}|null}
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-declared-breadcrumb-label-shows-as-text
+		 * @type {{label: string, route?: string, params?: object, href?: string, icon?: string}|null}
 		 */
 		breadcrumb: {
 			type: Object,
@@ -2130,6 +2219,33 @@ export default {
 			default: () => [],
 		},
 
+		/**
+		 * Draw the header as a card (manifest `config.headerCard: true`): the
+		 * pills, the title and the actions on the page's surface colour inside
+		 * a bordered, rounded box, as the board's case header. Off by default,
+		 * which keeps the header on the page ground.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-detail-header-can-be-a-card-that-holds-a-widget
+		 */
+		headerCard: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * The id of a widget declared in `widgets` to render inside the header,
+		 * on its own row under the title and the actions (manifest
+		 * `config.headerWidget`), e.g. the stages bars. It renders without a
+		 * card of its own and leaves the body grid. Empty (the default), or an
+		 * id that names no widget, renders nothing extra.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-detail-header-can-be-a-card-that-holds-a-widget
+		 */
+		headerWidget: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * Whether the current user administers this instance. Shows the
 		 * `adminOnly` header actions. `null` (the default) reads it from
@@ -2669,6 +2785,21 @@ export default {
 				.filter(Boolean)
 		},
 
+		/**
+		 * The widget the header holds (`headerWidget`): the definition in
+		 * `widgets` with that id, or null without the key or a match.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-detail-header-can-be-a-card-that-holds-a-widget
+		 * @return {object|null} The widget definition, or null.
+		 */
+		headerWidgetDef() {
+			if (!this.headerWidget) {
+				return null
+			}
+			const declared = Array.isArray(this.widgets) ? this.widgets : []
+			return declared.find((widget) => widget && widget.id === this.headerWidget) || null
+		},
+
 		/**
 		 * The side column's widget definitions. A string names a widget
 		 * declared in `widgets`; an object is a definition of its own.
@@ -3241,10 +3372,12 @@ export default {
 		/**
 		 * The breadcrumb trail: the declared crumb (a router target from
 		 * `route` + `params`, or an `href`), then the record's display name
-		 * as the current crumb. Empty without a `breadcrumb` label.
+		 * as the current crumb. Empty without a `breadcrumb` label. The first
+		 * crumb carries `icon` only when the manifest declares one.
 		 *
 		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-detail-page-drops-its-eyebrow-and-shows-a-breadcrumb
-		 * @return {Array<{label: string, to?: object, href?: string}>}
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-declared-breadcrumb-label-shows-as-text
+		 * @return {Array<{label: string, to?: object, href?: string, icon?: string}>}
 		 */
 		breadcrumbCrumbs() {
 			const crumb = this.breadcrumb
@@ -3252,6 +3385,9 @@ export default {
 				return []
 			}
 			const first = { label: this.effectiveTranslate(crumb.label) }
+			if (typeof crumb.icon === 'string' && crumb.icon !== '') {
+				first.icon = crumb.icon
+			}
 			if (crumb.route) {
 				first.to = { name: crumb.route, ...(crumb.params ? { params: crumb.params } : {}) }
 			} else if (crumb.href) {
@@ -3363,6 +3499,7 @@ export default {
 				&& this.currentObject
 				&& !this.hasDefaultSlotContent
 				&& !this.hasGridLayout
+				&& !this.hasViews
 		},
 
 		/**
@@ -3442,6 +3579,55 @@ export default {
 			return this.bodyGridLayout.length > 0
 		},
 
+		/**
+		 * The chosen view's layout as the grid draws it: items that draw
+		 * nothing leave and their rows close, as for the body grid.
+		 *
+		 * @return {Array<object>}
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-a-view-with-nothing-to-draw-says-so
+		 */
+		viewDisplayLayout() {
+			// eslint-disable-next-line @typescript-eslint/no-unused-expressions -- reading the flag IS the effect, as in bodyGridLayout
+			this.editingBody
+			return this.activeView ? this.closeDroppedRows(this.activeView.layout) : []
+		},
+
+		/**
+		 * Whether the chosen view has nothing to draw.
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-a-view-with-nothing-to-draw-says-so
+		 */
+		viewIsEmpty() {
+			return this.hasViews && this.viewDisplayLayout.length === 0
+		},
+
+		/**
+		 * The grids the body draws: the body grid when it has items, then the
+		 * chosen view's grid in the region the view switch controls (left out
+		 * when the view is empty; the empty state takes the region then).
+		 *
+		 * @return {Array<{key: string, view: boolean, layout: Array<object>, attrs: object}>}
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-a-page-declares-views-that-each-hold-a-widget-grid
+		 */
+		bodyGridSections() {
+			const sections = this.hasBodyGrid ? [{ key: 'body', view: false, layout: this.bodyGridLayout, attrs: {} }] : []
+			if (this.hasViews && !this.viewIsEmpty) {
+				sections.push({
+					key: `view-${this.activeViewId}`,
+					view: true,
+					layout: this.viewDisplayLayout,
+					attrs: {
+						id: this.viewRegionId,
+						role: 'region',
+						'aria-label': this.activeView.label,
+						'data-testid': 'cn-detail-page-view-region',
+					},
+				})
+			}
+			return sections
+		},
+
 		/**
 		 * Whether the sidebar is rendered externally (via objectSidebarState inject)
 		 * rather than inline. When external, CnDetailPage only manages state —
@@ -4663,6 +4849,8 @@ export default {
 		 */
 		findWidget(item) {
 			return this.bodyGridWidgets.find((w) => w.id === item.widgetId)
+				|| this.findViewWidget(item.widgetId)
+				|| undefined
 		},
 
 		/**
@@ -4711,6 +4899,10 @@ export default {
 		 * it — CnPageRenderer's split pane forwards no slots, which is exactly
 		 * that fault and wants fixing, not concealing.
 		 *
+		 * The widget the header holds (`headerWidget`) draws nothing here
+		 * either: it is already drawn in the header.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-detail-header-can-be-a-card-that-holds-a-widget
 		 * @param {object} item A layout item.
 		 * @return {boolean} False only when the item provably draws nothing.
 		 */
@@ -4721,6 +4913,11 @@ export default {
 			if (this.editingBody) {
 				return true
 			}
+			// The widget the header holds (`headerWidget`) is drawn there, so
+			// its grid cell would be the same widget twice.
+			if (this.headerWidgetDef !== null && item.widgetId === this.headerWidgetDef.id) {
+				return false
+			}
 			const widget = this.findWidget(item)
 			if (!widget) {
 				return true

package/src/components/CnFkResolveCell/CnFkResolveCell.vue

@@ -135,7 +135,9 @@ export default {
 			if (!store) {
 				return
 			}
-			const type = resolveObjectOpType(store, { register: this.register, schema: this.schema })
+			// `schema` is a slug the manifest author wrote, not a `$ref` title:
+			// use it exactly as given (a camelCase slug must not be kebab-cased).
+			const type = resolveObjectOpType(store, { register: this.register, schema: this.schema }, { exactSchema: true })
 			await Promise.all(this.ids.map(async (id) => {
 				if (this.labels[id]) {
 					return

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') {