@conduction/nextcloud-vue 2.106.0 → 2.107.0

package/src/components/CnActionDialog/index.js

@@ -0,0 +1,12 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * CnActionDialog — the generic "summary, checklist, reason, confirm" dialog
+ * for an act on a record, configured from the manifest.
+ */
+
+import CnActionDialog from './CnActionDialog.vue'
+
+export { CnActionDialog }
+export default CnActionDialog

package/src/components/CnAppNav/CnAppNav.vue

@@ -196,6 +196,15 @@
 						</NcActionLink>
 					</template>
 				</NcAppNavigationCaption>
+				<!-- `type: "hint"`: a muted line, no link, as the empty "My
+				     filters" group says how to add a filter. -->
+				<li
+					v-else-if="item.type === 'hint'"
+					:key="item.id"
+					class="cn-app-nav__hint"
+					:data-testid="`cn-nav-hint-${item.id}`">
+					{{ resolveLabel(item) }}
+				</li>
 				<NcAppNavigationItem
 					v-else
 					:key="item.id"
@@ -2474,6 +2483,14 @@ export default {
 </script>
 
 <style>
+.cn-app-nav__hint {
+	list-style: none;
+	padding: 4px 12px 8px 16px;
+	font-size: 13px;
+	line-height: 1.4;
+	color: var(--color-text-maxcontrast);
+}
+
 /* The emblem beside the app name (`nav.brand.emblem`). A theme sets
    --nldesign-emblem-url for `emblem: true`, and --cn-nav-emblem-size for both. */
 .cn-app-nav__brand-emblem {

package/src/components/CnAppRoot/CnAppRoot.vue

@@ -749,6 +749,7 @@ import { useObjectStore } from '../../store/index.js'
 import { isAppInstalled } from '../../utils/appInstalled.js'
 import { appShownName } from '../../utils/appShownName.js'
 import { BUILT_IN_FORMATTERS } from '../../utils/builtInFormatters.js'
+import { resolveModalEntry } from '../../utils/builtInModals.js'
 import { addDiagnosticsListener, clearReportedDiagnostics, reportDiagnostic } from '../../utils/diagnostics.js'
 import { DEFAULT_FORGE, resolveForge } from '../../utils/forge.js'
 import { BUILT_IN_KB_PROVIDERS } from '../../utils/kbSearchProviders.js'
@@ -757,6 +758,7 @@ import { installModalStack, uninstallModalStack } from '../../utils/modalStack.j
 import { OBJECTS_CHANGED_EVENT } from '../../utils/objectSignals.js'
 import { resolveBrand } from '../../utils/resolveBrand.js'
 import { resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
+import { normalizeSavedViewMenu, SAVED_VIEW_MENU_KEY, syncSavedViewMenu, toggleSavedViewMenuEntry, withSavedViewMenu } from '../../utils/savedViewMenu.js'
 import { passesContextPredicates } from '../../utils/visibleIfContext.js'
 
 /**
@@ -892,6 +894,10 @@ export default {
 				return self.userPreferences
 			},
 
+			// The saved views this user added to the menu, and the way to
+			// change them, for an index page's sidebar.
+			cnSavedViewMenu: self.savedViewMenu,
+
 			// The same manifest as a REF. The getter above is NOT enough on its
 			// own: Options-API `inject` resolves a provided value once, at the
 			// descendant's creation, so a renderer created before edit mode gets
@@ -968,7 +974,7 @@ export default {
 			 * @param {object} props Props forwarded to the modal component.
 			 */
 			cnOpenModal: (key, props = {}) => {
-				const entry = this.registry[key]
+				const entry = resolveModalEntry(this.registry, key)
 				if (!entry || entry.kind !== 'modal') {
 					// eslint-disable-next-line no-console
 					console.warn(`[CnAppRoot] cnOpenModal: "${key}" is not a registered modal (kind must be "modal").`)
@@ -1910,6 +1916,16 @@ export default {
 	data() {
 		const willCheck = Array.isArray(this.requiresApps) && this.requiresApps.length > 0
 		return {
+			// Saved views this user added to the menu (per-user preference).
+			// One object for the whole session, so the provide hands out a
+			// live reference: `entries` changes, the holder does not.
+			savedViewMenuLoaded: false,
+			savedViewMenu: {
+				entries: [],
+				toggle: (entry) => this.toggleSavedViewMenu(entry),
+				sync: (page, views) => this.syncSavedViewMenu(page, views),
+			},
+
 			// Nextcloud's own header, present on a server-rendered page; the
 			// brand block goes into it (CnBrandBar). Read once at creation so
 			// the navigation never draws a block that then moves.
@@ -2377,6 +2393,16 @@ export default {
 			return groups.some((g) => owners.includes(g))
 		},
 
+		/**
+		 * Whether any page of the manifest offers saved views.
+		 *
+		 * @return {boolean}
+		 */
+		offersSavedViews() {
+			const pages = this.manifest && Array.isArray(this.manifest.pages) ? this.manifest.pages : []
+			return pages.some((page) => page && page.config && page.config.allowSavedViews === true)
+		},
+
 		/**
 		 * The manifest the default `<CnAppNav>` renders — the editor's working
 		 * `source` while in-app editing, else the live `manifest` prop. Passed to
@@ -2408,6 +2434,12 @@ export default {
 			if (this.manifestEditor && this.manifestEditor.editing.value && m && typeof m === 'object') {
 				return { ...m }
 			}
+			// An app that offers saved views ends its menu with the "My views"
+			// group: the user's pinned views, or one line saying how to add one.
+			// Any other app gets its live manifest by identity.
+			if (m && typeof m === 'object' && Array.isArray(m.menu) && (this.savedViewMenu.entries.length > 0 || this.offersSavedViews)) {
+				return { ...m, menu: withSavedViewMenu(m.menu, this.savedViewMenu.entries, { showEmpty: this.offersSavedViews }) }
+			}
 			return m
 		},
 
@@ -3245,12 +3277,24 @@ export default {
 			if (!this.activeModalKey) {
 				return null
 			}
-			const entry = (this.registry || {})[this.activeModalKey]
+			const entry = resolveModalEntry(this.registry, this.activeModalKey)
 			return (entry && entry.component) ? entry.component : null
 		},
 	},
 
 	watch: {
+		// Only an app with a page that offers saved views reads the list,
+		// once, when such a page first appears in the manifest.
+		offersSavedViews: {
+			immediate: true,
+			handler(offers) {
+				if (offers && !this.savedViewMenuLoaded) {
+					this.savedViewMenuLoaded = true
+					this.loadSavedViewMenu()
+				}
+			},
+		},
+
 		/**
 		 * Close a registry modal when the route changes.
 		 *
@@ -3392,6 +3436,62 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Read the saved views this user added to the menu.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/saved-views-manage-and-defaults/tasks.md#task-7
+		 */
+		async loadSavedViewMenu() {
+			const read = this.userPreferences && this.userPreferences.read
+			if (typeof read !== 'function') {
+				return
+			}
+			try {
+				this.savedViewMenu.entries = normalizeSavedViewMenu(await read(SAVED_VIEW_MENU_KEY, []))
+			} catch {
+				// No menu entries; the views themselves are unaffected.
+			}
+		},
+
+		/**
+		 * Add a saved view to the menu, or remove it, and store the list.
+		 *
+		 * @param {{id: string, page: string, name: string}} entry The view.
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/saved-views-manage-and-defaults/tasks.md#task-7
+		 */
+		async toggleSavedViewMenu(entry) {
+			this.savedViewMenu.entries = toggleSavedViewMenuEntry(this.savedViewMenu.entries, entry)
+			await this.writeSavedViewMenu()
+		},
+
+		/**
+		 * Bring one page's menu entries in line with the views it lists, and
+		 * store the list only when that changed something.
+		 *
+		 * @param {string} page The page's route name.
+		 * @param {Array<object>} views The views the page lists.
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/saved-views-manage-and-defaults/tasks.md#task-7
+		 */
+		async syncSavedViewMenu(page, views) {
+			const next = syncSavedViewMenu(this.savedViewMenu.entries, page, views)
+			if (JSON.stringify(next) === JSON.stringify(this.savedViewMenu.entries)) {
+				return
+			}
+			this.savedViewMenu.entries = next
+			await this.writeSavedViewMenu()
+		},
+
+		/** @return {Promise<void>} Store the list in the user's preferences. */
+		async writeSavedViewMenu() {
+			const write = this.userPreferences && this.userPreferences.write
+			if (typeof write === 'function') {
+				await write(SAVED_VIEW_MENU_KEY, this.savedViewMenu.entries)
+			}
+		},
+
 		/** Listen for the host's `diagnostics` function while it is set; adds this root's page id. */
 		syncDiagnostics() {
 			if (this.removeDiagnostics) {

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -351,7 +351,9 @@
 					<NcSelect
 						:modelValue="selectedPageFilterOption(pf)"
 						:options="pageFilterSegments(pf)"
-						:clearable="false"
+						:clearable="pf.clearable === true"
+						:placeholder="pf.placeholder ? effectiveTranslate(pf.placeholder) : undefined"
+						:loading="pageFilterLoading[pf.key] === true"
 						:inputLabel="pf.label ? effectiveTranslate(pf.label) : pf.key"
 						label="label"
 						:data-testid="'cn-page-filter-' + pf.key"
@@ -1036,6 +1038,7 @@ import CnWidgetIcon from '../CnWidgetGrid/CnWidgetIcon.vue'
 import CnWidgetRefItem from '../CnWidgetRefItem/CnWidgetRefItem.vue'
 import CnWidgetRenderer from '../CnWidgetRenderer/CnWidgetRenderer.vue'
 import CnWidgetWrapper from '../CnWidgetWrapper/CnWidgetWrapper.vue'
+import { fetchEndpointSource } from '../../composables/useEndpointSource.js'
 import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry.js'
 import { normalizeLook } from '../../composables/useLook.js'
 import { pageViews } from '../../mixins/pageViews.js'
@@ -1043,6 +1046,7 @@ import { mergeUserLayout, resolveUserLayoutApi } from '../../store/plugins/dashb
 import { isAppInstalled } from '../../utils/appInstalled.js'
 import { contentHeaderLink } from '../../utils/contentHeaderLink.js'
 import { pickDeclaredProps } from '../../utils/declaredProps.js'
+import { readPath } from '../../utils/readPath.js'
 import { userLocale } from '../../utils/userLocale.js'
 import { compareVisibleWhen, evaluateWorkspaceCondition, isWorkspaceCondition, readVisibleWhenValue } from '../../utils/visibleWhen.js'
 import { canonicalWidgetType } from '../../utils/widgetTypeAliases.js'
@@ -1177,6 +1181,32 @@ const CHART_PROP_KEYS = [
  * }]
  * ```
  */
+
+/**
+ * One row of a page filter's `optionsFrom` as a `{ value, label }` option:
+ * `valueField` (default `id`, else the OpenRegister uuid) and `labelField`
+ * (default `title`, else `name`, else the value). Null for a row without a
+ * value.
+ *
+ * @param {unknown} row The row.
+ * @param {{valueField?: string, labelField?: string}} from The `optionsFrom` block.
+ * @return {{value: (string|number), label: string}|null}
+ */
+function pageFilterOptionOf(row, from) {
+	if (row === null || row === undefined) {
+		return null
+	}
+	if (typeof row !== 'object') {
+		return { value: row, label: String(row) }
+	}
+	const value = from.valueField ? readPath(row, from.valueField) : (row.id ?? row['@self']?.id ?? row.uuid)
+	if (value === null || value === undefined || value === '') {
+		return null
+	}
+	const label = from.labelField ? readPath(row, from.labelField) : (row.title || row.name)
+	return { value, label: label === null || label === undefined || label === '' ? String(value) : String(label) }
+}
+
 export default {
 	name: 'CnDashboardPage',
 
@@ -1715,10 +1745,16 @@ export default {
 		 * group on the header's description line, after the period group
 		 * (DqProcesanalyse "Gemiddeld | Mediaan"). An endpoint widget can read
 		 * the value in its `responsePath` too (`phaseDays.@workspace.measure`).
-		 * Empty (the default) renders no controls and leaves the context
-		 * untouched.
+		 * `optionsFrom` reads the options instead of listing them: `{ url,
+		 * params?, responsePath?, valueField?, labelField? }` from an app
+		 * endpoint, or `{ register, schema, filter?, valueField?, labelField? }`
+		 * from OpenRegister objects (value `id`, label `title` or `name` by
+		 * default; tokens resolve). `clearable: true` lets the reader clear the
+		 * select back to "all" (`placeholder`, e.g. "All case types"), which
+		 * writes null and seeds nothing. Empty (the default) renders no
+		 * controls and leaves the context untouched.
 		 *
-		 * @type {Array<{key: string, label?: string, type?: string, control?: ('select'|'segmented'), placement?: ('row'|'description'), options: Array<{value: (string|number), label: string}>, default?: (string|number)}>}
+		 * @type {Array<{key: string, label?: string, type?: string, control?: ('select'|'segmented'), placement?: ('row'|'description'), options?: Array<{value: (string|number), label: string}>, optionsFrom?: object, clearable?: boolean, placeholder?: string, default?: (string|number)}>}
 		 */
 		pageFilters: {
 			type: Array,
@@ -1981,6 +2017,10 @@ export default {
 
 	data() {
 		return {
+			/** Options read through a page filter's `optionsFrom`, by filter key. */
+			pageFilterFetched: {},
+			/** Whether a page filter's `optionsFrom` read is in flight, by filter key. */
+			pageFilterLoading: {},
 			isEditing: false,
 			/**
 			 * This user's arranged layout, when `userLayout` is on.
@@ -2840,6 +2880,7 @@ export default {
 		this.pushAiContext()
 		this.initDateRange()
 		this.initPageFilters()
+		this.loadPageFilterOptions()
 		this.evaluateWidgetConditions()
 		this.loadUserLayout()
 	},
@@ -2869,7 +2910,7 @@ export default {
 				if (this.workspaceContext[pf.key] !== undefined) {
 					continue
 				}
-				const fallback = (pf.options && pf.options.length) ? pf.options[0].value : undefined
+				const fallback = (pf.options && pf.options.length && pf.clearable !== true) ? pf.options[0].value : undefined
 				const value = pf.default !== undefined ? pf.default : fallback
 				if (value !== undefined) {
 					this.workspaceContext[pf.key] = value
@@ -2901,7 +2942,45 @@ export default {
 		 * @return {Array<{value: (string|number), label: string}>}
 		 */
 		pageFilterSegments(pf) {
-			return (pf.options || []).map((o) => ({ value: o.value, label: o.label ? this.effectiveTranslate(o.label) : String(o.value) }))
+			const options = Array.isArray(pf.options) ? pf.options : (this.pageFilterFetched[pf.key] || [])
+			return options.map((o) => ({ value: o.value, label: o.label ? this.effectiveTranslate(o.label) : String(o.value) }))
+		},
+
+		/**
+		 * Read the options of every page filter with `optionsFrom`, then seed
+		 * a filter that is not clearable with its first option when it has no
+		 * value yet.
+		 *
+		 * @spec openspec/changes/page-filter-options-from/specs/dashboard-page/spec.md#requirement-a-page-filter-can-read-its-options
+		 * @return {Promise<void>}
+		 */
+		async loadPageFilterOptions() {
+			const ctx = { workspace: this.workspaceContext || {} }
+			await Promise.all((this.pageFilters || [])
+				.filter((pf) => pf && pf.key && !Array.isArray(pf.options) && pf.optionsFrom && typeof pf.optionsFrom === 'object')
+				.map(async (pf) => {
+					const from = pf.optionsFrom
+					const source = from.register && from.schema
+						? { url: `/apps/openregister/api/objects/${from.register}/${from.schema}`, params: { _limit: 200, ...(from.filter || {}) }, responsePath: 'results' }
+						: { url: from.url, params: from.params, responsePath: from.responsePath }
+					if (!source.url) {
+						return
+					}
+					this.pageFilterLoading = { ...this.pageFilterLoading, [pf.key]: true }
+					let rows
+					try {
+						const data = await fetchEndpointSource(source, ctx, { fresh: true })
+						rows = Array.isArray(data) ? data : []
+					} catch {
+						rows = []
+					}
+					const options = rows.map((row) => pageFilterOptionOf(row, from)).filter(Boolean)
+					this.pageFilterFetched = { ...this.pageFilterFetched, [pf.key]: options }
+					this.pageFilterLoading = { ...this.pageFilterLoading, [pf.key]: false }
+					if (pf.clearable !== true && pf.default === undefined && this.workspaceContext[pf.key] === undefined && options.length > 0) {
+						this.workspaceContext[pf.key] = options[0].value
+					}
+				}))
 		},
 
 		/**
@@ -2916,7 +2995,7 @@ export default {
 			if (!pf || !pf.key) {
 				return
 			}
-			const value = option && typeof option === 'object' ? option.value : option
+			const value = option && typeof option === 'object' ? option.value : (option ?? null)
 			this.workspaceContext[pf.key] = value
 			/**
 			 * @event page-filter-change Emitted when a page-level filter selection changes.