@conduction/nextcloud-vue 2.106.0 → 2.107.0

package/src/components/CnIndexPage/useSelfFetchList.js

@@ -36,6 +36,24 @@ export function resolveInitialQuickFilterIndex(quickFilters) {
  */
 export const BOARD_PAGE_SIZE = 500
 
+/** How many rows `mapConfig.plotAll: true` plots at most. */
+export const MAP_PLOT_ALL_LIMIT = 500
+
+/**
+ * How many rows a map that plots every matching row loads (`mapConfig.plotAll`:
+ * `true` for {@link MAP_PLOT_ALL_LIMIT}, or a number), 0 when it plots the page.
+ *
+ * @param {object} [mapConfig] The page's map config.
+ * @return {number} The limit.
+ */
+export function mapPlotAllLimitOf(mapConfig) {
+	const plotAll = mapConfig && mapConfig.plotAll
+	if (plotAll === true) {
+		return MAP_PLOT_ALL_LIMIT
+	}
+	return typeof plotAll === 'number' && Number.isFinite(plotAll) && plotAll > 0 ? Math.floor(plotAll) : 0
+}
+
 /**
  * The sort a quick filter sets while it is active (`sort: { key, order }`, or a
  * list of those for a multi-column order), as sort keys, or null when it sets
@@ -267,7 +285,9 @@ export function useSelfFetchList(props, instance, inject, extras = {}) {
 		defaultSortKeys: initialSortKeys,
 		defaultActiveFilters: initialActiveFilters,
 		defaultSearchTerm: initialSearchTerm,
-		defaultPageSize: props.viewMode === 'board' ? BOARD_PAGE_SIZE : ((props.pagination && props.pagination.limit) || undefined),
+		defaultPageSize: props.viewMode === 'board'
+			? BOARD_PAGE_SIZE
+			: ((props.viewMode === 'map' && mapPlotAllLimitOf(props.mapConfig)) || (props.pagination && props.pagination.limit) || undefined),
 		defaultVisibleColumns: configuredColumnKeys.length ? configuredColumnKeys : null,
 		// `pages[].config.extend` → OpenRegister's repeated `_extend[]`. A
 		// getter so a reactive change re-scopes the next fetch, matching how

package/src/components/CnIndexSidebar/CnIndexSidebar.md

@@ -214,6 +214,8 @@ With admin-only filter control:
 | `columnsDescription` | String | `'Select which columns to display in the table'` | Description below the column visibility heading |
 | `propertiesGroupLabel` | String | `''` | Override label for the schema properties group. Falls back to `schema.title` |
 | `defaultTab` | String | `'search-tab'` | Tab id that is active when the sidebar opens. Built-in ids: `'search-tab'`, `'columns-tab'` |
+| `activeTab` | String | `''` | Switch to a tab while mounted, e.g. `'filters-tab'` |
+| `savedViews` | Object | `null` | The page's saved views, shown in a third tab, Filters (CnSavedViewsPanel); every intent comes back as one `saved-view` event `{ action, view }` |
 | `userIsAdmin` | Boolean | `true` | When `false`, schema properties with `adminOnly: true` are hidden from filters |
 | `filterFields` | Object | `null` | Filter declarations for a page with no schema of its own. Wins over `schema`, and feeds the Search tab only |
 

package/src/components/CnIndexSidebar/CnIndexSidebar.vue

@@ -287,6 +287,32 @@
 			</div>
 		</NcAppSidebarTab>
 
+		<!-- Filters Tab: the page's saved views (save, list, manage, add to menu). -->
+		<NcAppSidebarTab
+			v-if="savedViews"
+			id="filters-tab"
+			:name="t('nextcloud-vue', 'Filters')"
+			:order="3">
+			<template #icon>
+				<BookmarkOutline :size="20" />
+			</template>
+
+			<div class="cn-index-sidebar__tab-content">
+				<div class="cn-index-sidebar__section">
+					<CnSavedViewsPanel
+						v-bind="savedViewsPanelProps"
+						@apply="onSavedView('apply', $event)"
+						@saveRequest="onSavedView('save', null)"
+						@editRequest="onSavedView('edit', $event)"
+						@shareRequest="onSavedView('share', $event)"
+						@updateRequest="onSavedView('update', $event)"
+						@copyRequest="onSavedView('copy', $event)"
+						@menuToggle="onSavedView('menu', $event)"
+						@deleteRequest="onSavedView('delete', $event)" />
+				</div>
+			</div>
+		</NcAppSidebarTab>
+
 		<!-- Extra tabs injected by the consumer -->
 		<slot name="tabs" />
 	</NcAppSidebar>
@@ -295,6 +321,7 @@
 <script>
 import { translate as t } from '@nextcloud/l10n'
 import { NcAppSidebar, NcAppSidebarTab, NcButton, NcCheckboxRadioSwitch, NcPopover, NcSelect, NcTextField } from '@nextcloud/vue'
+import BookmarkOutline from 'vue-material-design-icons/BookmarkOutline.vue'
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
 import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
@@ -305,6 +332,7 @@ import InformationOutline from 'vue-material-design-icons/InformationOutline.vue
 import Pin from 'vue-material-design-icons/Pin.vue'
 import PinOutline from 'vue-material-design-icons/PinOutline.vue'
 import ViewColumnOutline from 'vue-material-design-icons/ViewColumnOutline.vue'
+import CnSavedViewsPanel from '../CnSavedViewsPanel/CnSavedViewsPanel.vue'
 import { METADATA_COLUMNS } from '../../constants/metadata.js'
 import { facetOptions } from '../../utils/facets.js'
 import { labelLang } from '../../utils/manifestTranslate.js'
@@ -332,6 +360,8 @@ export default {
 	components: {
 		NcAppSidebar,
 		NcAppSidebarTab,
+		CnSavedViewsPanel,
+		BookmarkOutline,
 		NcTextField,
 		NcSelect,
 		CnDateRangePicker,
@@ -551,6 +581,26 @@ export default {
 			default: 'search-tab',
 		},
 
+		/**
+		 * Switch to a tab while the sidebar is mounted, e.g. `'filters-tab'`
+		 * after a view was saved from the toolbar. Empty leaves the tab alone.
+		 */
+		activeTab: {
+			type: String,
+			default: '',
+		},
+
+		/**
+		 * The page's saved views, shown in the Filters tab:
+		 * `{ views, loading, currentUserId, counts, selectedViewId, maxDepth, menuIds }`
+		 * as `CnSavedViewsPanel` takes them. `null` shows no saved views.
+		 * Every intent comes back as one `saved-view` event.
+		 */
+		savedViews: {
+			type: Object,
+			default: null,
+		},
+
 		/**
 		 * Whether the current user is an admin.
 		 * When false, schema properties with `adminOnly: true` are hidden from filters.
@@ -561,7 +611,7 @@ export default {
 		},
 	},
 
-	emits: ['clear-filters', 'columns-change', 'columns-reorder', 'columns-reset', 'pin-change', 'filter-change', 'search', 'sort-change', 'tab-change', 'update:open'],
+	emits: ['clear-filters', 'columns-change', 'columns-reorder', 'columns-reset', 'pin-change', 'filter-change', 'saved-view', 'search', 'sort-change', 'tab-change', 'update:open'],
 
 	data() {
 		return {
@@ -638,6 +688,25 @@ export default {
 			return t('nextcloud-vue', 'Current order: {order}', { order })
 		},
 
+		/**
+		 * The panel's props, from `savedViews`.
+		 *
+		 * @return {object}
+		 * @spec openspec/changes/saved-views-manage-and-defaults/tasks.md#task-6
+		 */
+		savedViewsPanelProps() {
+			const f = this.savedViews || {}
+			return {
+				views: Array.isArray(f.views) ? f.views : [],
+				loading: f.loading === true,
+				currentUserId: f.currentUserId || '',
+				counts: f.counts || null,
+				selectedViewId: f.selectedViewId || '',
+				maxDepth: typeof f.maxDepth === 'number' ? f.maxDepth : 3,
+				menuIds: Array.isArray(f.menuIds) ? f.menuIds : null,
+			}
+		},
+
 		/** Resolved icon — explicit prop overrides schema.icon */
 		resolvedIcon() {
 			return this.icon || this.schema?.icon || ''
@@ -760,6 +829,12 @@ export default {
 	},
 
 	watch: {
+		activeTab(tab) {
+			if (tab) {
+				this.internalActiveTab = tab
+			}
+		},
+
 		open(val) {
 			this.internalOpen = val
 		},
@@ -840,6 +915,21 @@ export default {
 			this.$emit('sort-change', direction === 'desc' ? reverseSortKeys(keys) : keys.map((k) => ({ key: k.key, order: k.order || 'asc' })))
 		},
 
+		/**
+		 * Hand a saved-view intent to the page.
+		 *
+		 * @param {'apply'|'save'|'edit'|'share'|'presentation'|'update'|'copy'|'menu'|'delete'} action The intent.
+		 * @param {object|null} view The view, or null for save.
+		 * @spec openspec/changes/saved-views-manage-and-defaults/tasks.md#task-6
+		 */
+		onSavedView(action, view) {
+			/**
+			 * @event saved-view A saved-view intent from the Filters tab. Payload: `{ action, view }`.
+			 * @type {{action: string, view: (object|null)}}
+			 */
+			this.$emit('saved-view', { action, view })
+		},
+
 		/**
 		 * A manifest label through the injected lookup, or as written.
 		 *

package/src/components/CnMapWidget/CnMapWidget.vue

@@ -871,10 +871,16 @@ export default {
 					const number = feature.properties && Number(feature.properties.markerNumber)
 					if (Number.isInteger(number) && number > 0) {
 						const active = feature.properties.markerActive === true
+						// A colour of the row's own (`markerColor`) fills the pin, except
+						// the active one, which keeps the active colour.
+						const fill = feature.properties.markerColor
+						const style = !active && typeof fill === 'string' && /^[#a-zA-Z0-9(),.%\s_-]+$/.test(fill)
+							? ` class="cn-map-widget__pin-fill" style="background:${fill}"`
+							: ''
 						return L.marker(latlng, {
 							icon: L.divIcon({
 								className: active ? 'cn-map-widget__pin cn-map-widget__pin--active' : 'cn-map-widget__pin',
-								html: `<span>${number}</span>`,
+								html: `<span${style}>${number}</span>`,
 								iconSize: [26, 26],
 								iconAnchor: [13, 13],
 							}),
@@ -1512,6 +1518,15 @@ export default {
 	box-sizing: border-box;
 }
 
+.cn-map-widget__pin-fill {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+	border-radius: 50%;
+}
+
 .cn-map-widget__pin--active {
 	background: var(--color-primary-element-light-text);
 }

package/src/components/CnPartyPicker/CnPartyPicker.vue

@@ -0,0 +1,317 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Conduction B.V.
+  - SPDX-License-Identifier: EUPL-1.2
+-->
+<template>
+	<CnSearchSelect
+		class="cn-party-picker"
+		:modelValue="selectedOption"
+		:options="options"
+		:inputLabel="inputLabel"
+		:labelOutside="labelOutside"
+		:placeholder="placeholder ? cnTranslate(placeholder) : ''"
+		:loading="searching"
+		:filterable="false"
+		:clearable="clearable"
+		:disabled="disabled"
+		data-testid="cn-party-picker"
+		@search="onSearch"
+		@update:modelValue="onPick" />
+</template>
+
+<script>
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+import { fillTemplate } from '../../utils/fillTemplate.js'
+import { CnSearchSelect } from '../CnSearchSelect/index.js'
+
+/** How long typing rests before a search runs, in ms. */
+const SEARCH_DELAY = 250
+
+/**
+ * CnPartyPicker — one search field over several kinds of party: people and
+ * organisations from OpenRegister register sets (BRP persons, KvK companies,
+ * an app's own clients) and the reader's Nextcloud contacts, as rows with
+ * initials, the name and a second line, in one list (board DqNieuweZaak
+ * "Aanvrager": "Henk Visser · Inwoner · Beukenlaan 3", "Visser Bouw B.V. ·
+ * Organisatie · KvK …"). Built on CnSearchSelect.
+ *
+ * `sources`: each `{ id, register, schema, label?, title?, secondary?,
+ * limit?, icon? }` searches OpenRegister with `_search`; `title` and
+ * `secondary` are templates filled from the row (default `{name}` / none),
+ * `label` names the kind ("Resident") and starts the second line. A source
+ * `{ id, type: "contacts", label? }` searches the reader's Nextcloud contacts.
+ *
+ * `update:modelValue` emits the chosen row's id (a contact has none and
+ * emits its contact id); `select` emits the whole choice: `{ source, id,
+ * label, secondary, row }`, so a host can store more than the id (a case's
+ * initiator type, source id and display name). A `modelValue` the list does
+ * not hold is shown by its `selectedLabel`, else looked up by id in the
+ * OpenRegister sources.
+ *
+ * ```vue
+ * <CnPartyPicker
+ *   v-model="case.requester"
+ *   input-label="Requester"
+ *   :sources="[
+ *     { id: 'person', register: 'dossiq', schema: 'brpPerson', label: 'Resident', title: '{firstName} {lastName}', secondary: '{residence.street} {residence.houseNumber}' },
+ *     { id: 'company', register: 'dossiq', schema: 'kvkCompany', label: 'Organisation', title: '{tradeName}', secondary: 'KvK {sourceId}' },
+ *     { id: 'contact', type: 'contacts', label: 'Contact' },
+ *   ]"
+ *   @select="onRequester" />
+ * ```
+ */
+export default {
+	name: 'CnPartyPicker',
+
+	components: { CnSearchSelect },
+
+	inject: {
+		/** The host app's translate (CnAppRoot `cnTranslate`). */
+		cnTranslate: { default: () => (key) => key },
+	},
+
+	props: {
+		/** The chosen party's id. */
+		modelValue: {
+			type: [String, Number],
+			default: null,
+		},
+
+		/**
+		 * Where to search: OpenRegister sets `{ id, register, schema, label?,
+		 * title?, secondary?, limit?, icon? }`, or `{ id, type: "contacts",
+		 * label? }` for the reader's Nextcloud contacts.
+		 *
+		 * @type {Array<object>}
+		 */
+		sources: {
+			type: Array,
+			default: () => [],
+		},
+
+		/** The field's label. */
+		inputLabel: {
+			type: String,
+			default: '',
+		},
+
+		/** Draw the label above the field. */
+		labelOutside: {
+			type: Boolean,
+			default: false,
+		},
+
+		/** Placeholder ("Name, BSN, trade name or KvK number"), through the host translate. */
+		placeholder: {
+			type: String,
+			default: '',
+		},
+
+		/** The chosen party's name, shown before the list holds it. */
+		selectedLabel: {
+			type: String,
+			default: '',
+		},
+
+		/** Offer a clear button. */
+		clearable: {
+			type: Boolean,
+			default: true,
+		},
+
+		/** Disable the field. */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+
+		/** The fewest characters a search needs. */
+		minLength: {
+			type: Number,
+			default: 2,
+		},
+	},
+
+	emits: ['update:modelValue', 'select'],
+
+	data() {
+		return {
+			options: [],
+			searching: false,
+			known: null,
+			timer: null,
+			searchSeq: 0,
+		}
+	},
+
+	computed: {
+		/**
+		 * The option for `modelValue`: in the list, else the known choice,
+		 * else one named by `selectedLabel`.
+		 *
+		 * @spec openspec/changes/party-picker/specs/party-picker/spec.md#requirement-one-search-field-over-several-kinds-of-party
+		 * @return {object|null}
+		 */
+		selectedOption() {
+			const value = this.modelValue
+			if (value === null || value === undefined || value === '') {
+				return null
+			}
+			const found = this.options.find((o) => String(o.id) === String(value))
+			if (found) {
+				return found
+			}
+			if (this.known && String(this.known.id) === String(value)) {
+				return this.known
+			}
+			return { id: value, label: this.selectedLabel || String(value), avatar: true }
+		},
+	},
+
+	watch: {
+		modelValue: {
+			immediate: true,
+			handler(value) {
+				if (value && !this.selectedLabel && !this.options.some((o) => String(o.id) === String(value))) {
+					this.lookUp(value)
+				}
+			},
+		},
+	},
+
+	beforeUnmount() {
+		clearTimeout(this.timer)
+	},
+
+	methods: {
+		/**
+		 * A source's row as a picker option.
+		 *
+		 * @param {object} source The source.
+		 * @param {object} row The row.
+		 * @return {object|null} The option, or null without an id.
+		 */
+		optionOf(source, row) {
+			const id = row && (row.id ?? row['@self']?.id ?? row.uuid)
+			if (id === undefined || id === null || id === '') {
+				return null
+			}
+			const title = (source.title ? fillTemplate(source.title, row) : (row.name || row.title || row.displayName || '')).trim() || String(id)
+			const detail = source.secondary ? fillTemplate(source.secondary, row).trim() : ''
+			const kind = source.label ? this.cnTranslate(source.label) : ''
+			return {
+				id,
+				label: title,
+				secondary: [kind, detail].filter(Boolean).join(' · '),
+				avatar: !source.icon,
+				icon: source.icon || '',
+				source: source.id,
+				row,
+			}
+		},
+
+		/**
+		 * A Nextcloud contact as a picker option.
+		 *
+		 * @param {object} source The contacts source.
+		 * @param {object} contact The contactsmenu entry.
+		 * @return {object|null}
+		 */
+		contactOptionOf(source, contact) {
+			const id = contact && (contact.id || contact.uid)
+			if (!id) {
+				return null
+			}
+			const mail = Array.isArray(contact.emailAddresses) ? contact.emailAddresses[0] : ''
+			const kind = source.label ? this.cnTranslate(source.label) : ''
+			return { id, label: contact.fullName || String(id), secondary: [kind, mail].filter(Boolean).join(' · '), avatar: true, source: source.id, row: contact }
+		},
+
+		/**
+		 * Search after typing rests.
+		 *
+		 * @param {string} query The typed text.
+		 */
+		onSearch(query) {
+			clearTimeout(this.timer)
+			const term = String(query || '').trim()
+			if (term.length < this.minLength) {
+				this.options = this.selectedOption ? [this.selectedOption] : []
+				return
+			}
+			this.timer = setTimeout(() => this.search(term), SEARCH_DELAY)
+		},
+
+		/**
+		 * Search every source at once; a source that fails adds nothing.
+		 *
+		 * @spec openspec/changes/party-picker/specs/party-picker/spec.md#requirement-one-search-field-over-several-kinds-of-party
+		 * @param {string} term The search term.
+		 * @return {Promise<void>}
+		 */
+		async search(term) {
+			const seq = ++this.searchSeq
+			this.searching = true
+			const sets = await Promise.all((this.sources || []).map(async (source) => {
+				try {
+					if (source.type === 'contacts') {
+						const { data } = await axios.post(generateUrl('/contactsmenu/contacts'), { filter: term })
+						return (data && Array.isArray(data.contacts) ? data.contacts : []).map((c) => this.contactOptionOf(source, c))
+					}
+					if (!source.register || !source.schema) {
+						return []
+					}
+					const { data } = await axios.get(generateUrl(`/apps/openregister/api/objects/${source.register}/${source.schema}`), { params: { _search: term, _limit: source.limit || 8 } })
+					return (data && Array.isArray(data.results) ? data.results : []).map((row) => this.optionOf(source, row))
+				} catch {
+					return []
+				}
+			}))
+			if (seq !== this.searchSeq) {
+				return
+			}
+			this.options = sets.flat().filter(Boolean)
+			this.searching = false
+		},
+
+		/**
+		 * Name a value the list does not hold: the first OpenRegister source
+		 * that has an object with that id.
+		 *
+		 * @param {string|number} id The id.
+		 * @return {Promise<void>}
+		 */
+		async lookUp(id) {
+			for (const source of (this.sources || []).filter((s) => s.register && s.schema && s.type !== 'contacts')) {
+				try {
+					const { data } = await axios.get(generateUrl(`/apps/openregister/api/objects/${source.register}/${source.schema}/${encodeURIComponent(id)}`))
+					const option = data ? this.optionOf(source, data) : null
+					if (option && String(this.modelValue) === String(id)) {
+						this.known = option
+						return
+					}
+				} catch {
+					// Not in this source; try the next.
+				}
+			}
+		},
+
+		/**
+		 * Take the picked option: emit its id and the whole choice.
+		 *
+		 * @param {string|number|null} id The picked id.
+		 */
+		onPick(id) {
+			const option = id === null ? null : this.options.find((o) => String(o.id) === String(id)) || null
+			if (option) {
+				this.known = option
+			}
+			/** @event update:modelValue The chosen party's id, or null when cleared. */
+			this.$emit('update:modelValue', id)
+			/** @event select The whole choice: `{ source, id, label, secondary, row }`, or null when cleared. */
+			this.$emit('select', option ? { source: option.source, id: option.id, label: option.label, secondary: option.secondary, row: option.row } : null)
+		},
+	},
+}
+</script>

package/src/components/CnPartyPicker/index.js

@@ -0,0 +1,11 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * CnPartyPicker — one search field over people, organisations and contacts.
+ */
+
+import CnPartyPicker from './CnPartyPicker.vue'
+
+export { CnPartyPicker }
+export default CnPartyPicker