@conduction/nextcloud-vue 2.62.0 → 2.64.0

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -13,12 +13,12 @@
 		<slot
 			name="header"
 			:title="title"
-			:description="description"
+			:description="headerDescription"
 			:icon="resolvedIcon"
 			:showTitle="showTitle">
 			<CnPageHeader
 				:title="title"
-				:description="description"
+				:description="headerDescription"
 				:icon="resolvedIcon"
 				:visuallyHidden="!showTitle" />
 		</slot>
@@ -450,6 +450,10 @@
 					:includeColumns="includeColumns"
 					:columnOverrides="columnOverrides"
 					:rowClass="rowClass"
+					:filterable="headerFilters && !!effectiveSchema"
+					:activeFilters="effectiveActiveFilters"
+					:filterRegister="typeof register === 'string' ? register : ''"
+					@columnFilter="onColumnFilterEvent"
 					@sort="onSortEvent"
 					@select="onSelect"
 					@rowClick="onRowClick"
@@ -798,6 +802,7 @@ import { DEFAULT_ROW_INDICATOR_CAP } from '../../utils/rowIndicators.js'
 import { buildRouteQueryFromViewState, buildViewCreatePayload, extractViewState, extractViewStateFromRouteQuery, savedViewScope, viewMatchesScope } from '../../utils/savedViewHelpers.js'
 import { columnsFromSchema } from '../../utils/schema.js'
 import { resolveScopeLayout } from '../../utils/scopeListLayout.js'
+import { dispatchObjectCreated } from '../../utils/walkthroughSignals.js'
 import { CnActionsBar } from '../CnActionsBar/index.js'
 import { CnAdvancedFormDialog } from '../CnAdvancedFormDialog/index.js'
 import { CnBoardView } from '../CnBoardView/index.js'
@@ -1172,6 +1177,21 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * A description that carries the collection's total: `{total}` in
+		 * the text is replaced by the current pagination total ("{total}
+		 * open cases" reads "48 open cases"). Rendered in place of
+		 * `description` once a total is known; before that, `description`
+		 * shows. Manifest key `config.countSubtitle`. Goes through the host
+		 * translate function.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-an-index-page-title-is-a-manifest-key
+		 */
+		countSubtitle: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * Whether to show the page header (icon, title, description) inline.
 		 * When false (default), only the sidebar header shows the title
@@ -2285,6 +2305,22 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * Per-column filters in the table header: a filter button on every
+		 * column that can filter, opening a small panel that fits the column
+		 * (checkboxes, yes/no/any, from and to, a searchable reference list).
+		 * On by default; a column opts out with `filterable: false`, a page
+		 * with `pages[].config.headerFilters: false`. Filters write into the
+		 * same active-filter map as the facet sidebar, so they persist in the
+		 * route query and reach the same OpenRegister query parameters.
+		 *
+		 * @spec openspec/changes/table-header-sort-and-filter/specs/cn-data-table/spec.md#requirement-every-backed-column-filters-from-its-header
+		 */
+		headerFilters: {
+			type: Boolean,
+			default: true,
+		},
+
 		/**
 		 * Show a filter menu (funnel button) in the table header, above the
 		 * row-actions column. Its menu lists every enum/badge column's values as
@@ -4210,6 +4246,21 @@ export default {
 			return resolveDeepTokens(seed, {})
 		},
 
+		/**
+		 * The header's description line: `countSubtitle` with the total
+		 * filled in when one is known, else `description`.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-an-index-page-title-is-a-manifest-key
+		 * @return {string}
+		 */
+		headerDescription() {
+			const total = this.effectivePagination?.total
+			if (this.countSubtitle && typeof total === 'number' && total >= 0) {
+				return this.cnTranslate(this.countSubtitle).replace('{total}', String(total))
+			}
+			return this.description
+		},
+
 		/** Add button label — derived from schema.title if not explicitly set */
 		resolvedAddLabel() {
 			if (this.addLabel) {
@@ -5225,6 +5276,39 @@ export default {
 			this.$emit('filter-change', payload)
 		},
 
+		/**
+		 * A header filter was applied or cleared. One column can own several
+		 * query parameters (a range is `key[gte]` and `key[lte]`), so they are
+		 * applied together: one fetch, one route update.
+		 *
+		 * @param {{key: string, params: object}} payload From CnDataTable's `column-filter`.
+		 * @return {void}
+		 * @spec openspec/changes/table-header-sort-and-filter/specs/cn-data-table/spec.md#requirement-a-header-filter-speaks-the-sidebars-query-language
+		 */
+		onColumnFilterEvent(payload) {
+			const params = (payload && payload.params) || {}
+			const entries = Object.entries(params).map(([key, values]) => [key, Array.isArray(values) ? values : []])
+			if (this.isSelfFetchMode) {
+				const next = { ...this.list.activeFilters.value }
+				for (const [key, values] of entries) {
+					if (values.length === 0) {
+						delete next[key]
+					} else {
+						next[key] = values
+					}
+				}
+				this.list.activeFilters.value = next
+				this.list.refresh(1)
+				this.persistViewStateToRoute(this.currentViewState())
+			}
+			for (const [key, values] of entries) {
+				if (this.isNamedSource) {
+					this.setNamedFilter(key, values)
+				}
+				this.$emit('filter-change', { key, values })
+			}
+		},
+
 		/**
 		 * Record one sidebar choice on a named-source page and mirror it into
 		 * the URL.
@@ -6460,8 +6544,7 @@ export default {
 			if (typeof window === 'undefined' || !created) {
 				return
 			}
-			const detail = { ...created, register: this.register, schema: this.exportSchemaSlug }
-			window.dispatchEvent(new CustomEvent('cn-walkthrough:object-created', { detail }))
+			dispatchObjectCreated({ register: this.register, schema: this.exportSchemaSlug, object: created })
 		},
 
 		/**

package/src/components/CnIndexPage/selfModeActions.js

@@ -1,3 +1,4 @@
+import { dispatchObjectCreated } from '../../utils/walkthroughSignals.js'
 import {
 	cloneObjectForCopy,
 	runSelfExportRequest,
@@ -196,9 +197,8 @@ export function createSelfModeActions(ctx) {
 				// @self.register/@self.schema are numeric DB ids, not slugs, so
 				// override with this page's own slug props (self-fetch mode
 				// guarantees ctx.schema() is already a string).
-				if (isCreate && typeof window !== 'undefined') {
-					const detail = { ...saved, register: ctx.register(), schema: ctx.schema() }
-					window.dispatchEvent(new CustomEvent('cn-walkthrough:object-created', { detail }))
+				if (isCreate) {
+					dispatchObjectCreated({ register: ctx.register(), schema: ctx.schema(), object: saved })
 				}
 				refreshList(ctx)
 				if (isCreate && typeof ctx.afterCreateSuccess === 'function') {

package/src/components/CnObjectListWidget/CnObjectListWidget.vue

@@ -151,6 +151,7 @@
 						:sortKey="localSort.field || null"
 						:sortOrder="localSort.dir || 'asc'"
 						borderless
+						:hideHeader="content.hideHeader === true"
 						@rowClick="onRowClick"
 						@rowAuxClick="onRowAuxClick"
 						@select="onSelect"
@@ -172,6 +173,7 @@
 					:sortKey="localSort.field || null"
 					:sortOrder="localSort.dir || 'asc'"
 					borderless
+					:hideHeader="content.hideHeader === true"
 					@rowClick="onRowClick"
 					@rowAuxClick="onRowAuxClick"
 					@select="onSelect"
@@ -268,6 +270,9 @@
 			ref="createDialog"
 			:schema="createSchema"
 			:item="null"
+			:register="content.register || ''"
+			:initialData="createInitialData"
+			:lockedFields="createLockedFields"
 			:size="formSize"
 			:columns="formColumns"
 			:includeFields="formIncludeFields"
@@ -293,6 +298,7 @@ import { followLinkClick, openRowTarget, resolveHref } from '../../utils/linkNav
 import { objectFieldValue } from '../../utils/objectName.js'
 import { dropOptionalUnresolved, hasUnresolvedTokens, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 import { markNewTabHandled } from '../../utils/rowAuxClick.js'
+import { dispatchObjectCreated } from '../../utils/walkthroughSignals.js'
 import { CnRowActions } from '../CnRowActions/index.js'
 
 /**
@@ -415,7 +421,11 @@ export default {
 		 * those carrying a selected value. Client-side over the fetched page,
 		 * like the rest of this widget's row set.
 		 *
-		 * @type {{register?: string, schema?: string, filter?: object, sort?: {field?: string, dir?: string}, limit?: number, extend?: Array<string>, columns?: Array, rowActions?: Array<object>, dropZone?: object, upload?: boolean, groupBy?: string, groupLabel?: string, groupLabelResolve?: {register: string, schema: string, labelField?: string}, selectable?: boolean, bulkActions?: Array<object>, sortable?: boolean, facet?: {field: string, label?: string}, rowRoute?: string, prompt?: string, emptyText?: string, viewAllRoute?: string, viewAllQuery?: object}}
+		 * `hideHeader: true` drops the table's column header row (CnDataTable's
+		 * `hideHeader`), for a short list that reads as rows, not as a table.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-small-opt-ins-from-the-decidiq-and-learniq-lanes
+		 * @type {{register?: string, schema?: string, filter?: object, sort?: {field?: string, dir?: string}, limit?: number, extend?: Array<string>, columns?: Array, rowActions?: Array<object>, dropZone?: object, upload?: boolean, groupBy?: string, groupLabel?: string, groupLabelResolve?: {register: string, schema: string, labelField?: string}, selectable?: boolean, bulkActions?: Array<object>, sortable?: boolean, facet?: {field: string, label?: string}, rowRoute?: string, prompt?: string, emptyText?: string, viewAllRoute?: string, viewAllQuery?: object, hideHeader?: boolean}}
 		 */
 		content: {
 			type: Object,
@@ -1010,6 +1020,39 @@ export default {
 			return Array.isArray(c.formExcludeFields) ? c.formExcludeFields : []
 		},
 
+		/**
+		 * Create-form seed values: the list's scalar filter values (the parent
+		 * this list is scoped to, e.g. `{ lead: '<uuid>' }`), limited to keys
+		 * the schema declares, so the new row shows its parent already chosen.
+		 *
+		 * @spec openspec/changes/form-pickers-from-schema/specs/schema-utilities/spec.md
+		 * @return {object}
+		 */
+		createInitialData() {
+			const props = (this.createSchema && this.createSchema.properties) || {}
+			const out = {}
+			for (const [key, value] of Object.entries(this.resolvedFilter || {})) {
+				if (!(key in props) || value === null || value === undefined || value === '' || typeof value === 'object') {
+					continue
+				}
+				if (typeof value === 'string' && value.charAt(0) === '@') {
+					continue
+				}
+				out[key] = value
+			}
+			return out
+		},
+
+		/**
+		 * The seeded parent keys are locked: a row added to this list belongs
+		 * to the record the list is scoped to.
+		 *
+		 * @return {string[]}
+		 */
+		createLockedFields() {
+			return Object.keys(this.createInitialData)
+		},
+
 		/** Per-field overrides for the create dialog (`content.formFieldOverrides`). */
 		formFieldOverrides() {
 			const c = this.content || {}
@@ -1358,7 +1401,8 @@ export default {
 					}
 				}
 				const url = generateUrl('/apps/openregister/api/objects/{register}/{schema}', { register: c.register, schema: c.schema })
-				await axios.post(url, payload)
+				const response = await axios.post(url, payload)
+				dispatchObjectCreated({ register: c.register, schema: c.schema, object: (response && response.data) || payload })
 				if (this.$refs.createDialog) {
 					this.$refs.createDialog.setResult({ success: true })
 				}

package/src/components/CnResourceSelect/CnResourceSelect.vue

@@ -13,6 +13,8 @@
 		:disabled="disabled"
 		:placeholder="placeholder"
 		:filterable="false"
+		:multiple="multiple"
+		:keepOpen="multiple"
 		label="label"
 		@search="onSearch"
 		@update:modelValue="onInput">
@@ -93,12 +95,21 @@ export default {
 			required: true,
 		},
 
-		/** Currently-selected object id (v-model). */
+		/** Currently-selected object id (v-model), or an array of ids when `multiple`. */
 		modelValue: {
-			type: [String, Number],
+			type: [String, Number, Array],
 			default: '',
 		},
 
+		/**
+		 * Pick several objects. `modelValue` is then an array of ids, and a
+		 * create adds the new object to the selection.
+		 */
+		multiple: {
+			type: Boolean,
+			default: false,
+		},
+
 		/** Object field used as the option label AND written on create. */
 		labelField: {
 			type: String,
@@ -219,6 +230,9 @@ export default {
 			// The selected option object kept locally so the label shows even
 			// before/without a matching search result (e.g. a pre-set modelValue).
 			localSelected: null,
+			// Options seen so far, keyed by value, so a multiple selection
+			// keeps its labels when the search results move on.
+			known: {},
 		}
 	},
 
@@ -232,6 +246,19 @@ export default {
 			}
 		},
 
+		/**
+		 * The selected ids as strings (multiple mode).
+		 *
+		 * @return {string[]}
+		 */
+		selectedIds() {
+			const value = this.modelValue
+			if (Array.isArray(value)) {
+				return value.filter((v) => v !== null && v !== undefined && v !== '').map((v) => String(v))
+			}
+			return value ? [String(value)] : []
+		},
+
 		/** The `${register}-${schema}` object-type slug used by the store. */
 		typeSlug() {
 			return `${this.register}-${this.schema}`
@@ -239,6 +266,11 @@ export default {
 
 		/** The currently-selected option, for NcSelect's model-value. */
 		selectedOption() {
+			if (this.multiple) {
+				return this.selectedIds.map((id) => this.known[id]
+					|| this.options.find((o) => o.value === id)
+					|| { value: id, label: id })
+			}
 			if (this.localSelected && this.localSelected.value === this.modelValue) {
 				return this.localSelected
 			}
@@ -310,9 +342,9 @@ export default {
 			// The scope moved, so anything already selected may no longer be
 			// in it. Drop the stale options + selection, then re-seed.
 			this.options = []
-			if (this.modelValue) {
+			if (this.selectedIds.length > 0) {
 				this.localSelected = null
-				this.$emit('update:modelValue', '')
+				this.$emit('update:modelValue', this.multiple ? [] : '')
 			}
 			if (this.search.trim().length >= this.minChars) {
 				this.onSearch(this.search)
@@ -347,7 +379,7 @@ export default {
 				const items = Array.isArray(collection)
 					? collection
 					: (this.objectStore.collections[this.typeSlug] || [])
-				this.options = items.map((o) => this.toOption(o))
+				this.options = this.remember(items.map((o) => this.toOption(o)))
 			} catch {
 				this.options = []
 			} finally {
@@ -392,7 +424,7 @@ export default {
 				const items = Array.isArray(collection)
 					? collection
 					: (this.objectStore.collections[this.typeSlug] || [])
-				this.options = items.map((o) => this.toOption(o))
+				this.options = this.remember(items.map((o) => this.toOption(o)))
 			} catch {
 				this.options = []
 			} finally {
@@ -408,6 +440,10 @@ export default {
 		 * @return {Promise<void>}
 		 */
 		async onInput(option) {
+			if (this.multiple) {
+				await this.onMultipleInput(Array.isArray(option) ? option : (option ? [option] : []))
+				return
+			}
 			if (!option) {
 				this.localSelected = null
 				/**
@@ -425,19 +461,58 @@ export default {
 			this.$emit('update:modelValue', option.value)
 		},
 
+		/**
+		 * Handle a change of a multiple selection. A synthetic create option
+		 * creates the object and adds it; the rest emit their ids.
+		 *
+		 * @param {Array<object>} chosen The selected options.
+		 * @return {Promise<void>}
+		 */
+		async onMultipleInput(chosen) {
+			const createOption = chosen.find((o) => o && o.__create)
+			const ids = chosen.filter((o) => o && !o.__create).map((o) => String(o.value))
+			this.remember(chosen.filter((o) => o && !o.__create))
+			if (!createOption) {
+				this.$emit('update:modelValue', ids)
+				return
+			}
+			const created = await this.createFromTerm(createOption.label, ids)
+			if (!created) {
+				this.$emit('update:modelValue', ids)
+			}
+		},
+
+		/**
+		 * Cache options by value so their labels survive a new search.
+		 *
+		 * @param {Array<object>} options Options to remember.
+		 * @return {Array<object>} The same options.
+		 */
+		remember(options) {
+			const next = { ...this.known }
+			for (const o of options) {
+				if (o && o.value) {
+					next[o.value] = o
+				}
+			}
+			this.known = next
+			return options
+		},
+
 		/**
 		 * Create a new object from the typed term and select it.
 		 *
 		 * @param {string} term The term to write to `labelField`.
-		 * @return {Promise<void>}
+		 * @param {string[]} [keep] Multiple mode: the ids already selected, which the new id joins.
+		 * @return {Promise<object|null>} The created object, or null.
 		 */
-		async createFromTerm(term) {
+		async createFromTerm(term, keep = []) {
 			if (!this.objectStore && !this.createHandler) {
-				return
+				return null
 			}
 			const name = (term || '').trim()
 			if (!name) {
-				return
+				return null
 			}
 			this.loading = true
 			try {
@@ -456,20 +531,26 @@ export default {
 					created = await this.objectStore.saveObject(this.typeSlug, payload)
 				}
 				if (!created) {
-					return
+					return null
 				}
 				const option = this.toOption(created)
+				this.remember([option])
 				this.options = [option, ...this.options.filter((o) => o.value !== option.value)]
 				this.localSelected = option
-				this.$emit('update:modelValue', option.value)
+				this.search = ''
+				this.$emit('update:modelValue', this.multiple
+					? [...keep.filter((id) => id !== option.value), option.value]
+					: option.value)
 				/**
 				 * @event create A new object was created from the search term.
 				 * @type {object} The created OpenRegister object.
 				 */
 				this.$emit('create', created)
+				return created
 			} catch (e) {
 				// eslint-disable-next-line no-console
 				console.warn('[CnResourceSelect] create failed', e)
+				return null
 			} finally {
 				this.loading = false
 			}
@@ -508,6 +589,10 @@ export default {
 		 * @return {Promise<void>}
 		 */
 		async ensureSelectedLoaded() {
+			if (this.multiple) {
+				await this.ensureManyLoaded()
+				return
+			}
 			if (!this.modelValue || this.selectedOption || !this.objectStore) {
 				return
 			}
@@ -524,6 +609,32 @@ export default {
 				// Leave the id un-labelled rather than crash.
 			}
 		},
+
+		/**
+		 * Multiple mode: fetch each selected id whose label is not known yet.
+		 *
+		 * @return {Promise<void>}
+		 */
+		async ensureManyLoaded() {
+			if (!this.objectStore || typeof this.objectStore.fetchObject !== 'function') {
+				return
+			}
+			const missing = this.selectedIds.filter((id) => !this.known[id] && !this.options.some((o) => o.value === id))
+			if (missing.length === 0) {
+				return
+			}
+			this.ensureRegistered()
+			for (const id of missing) {
+				try {
+					const obj = await this.objectStore.fetchObject(this.typeSlug, id)
+					if (obj) {
+						this.remember([this.toOption(obj)])
+					}
+				} catch {
+					// Leave the id un-labelled rather than crash.
+				}
+			}
+		},
 	},
 }
 </script>