@conduction/nextcloud-vue 2.100.0 → 2.102.0

package/src/components/CnSavedViewAlertWidget/CnSavedViewAlertWidget.vue

@@ -0,0 +1,272 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Conduction B.V.
+  - SPDX-License-Identifier: EUPL-1.2
+-->
+<template>
+	<div class="cn-saved-view-alert" data-testid="cn-saved-view-alert">
+		<p v-if="!view" class="cn-saved-view-alert__empty" data-testid="cn-saved-view-alert-empty">
+			{{ emptyText }}
+		</p>
+		<template v-else>
+			<dl class="cn-saved-view-alert__facts">
+				<dt>{{ t('nextcloud-vue', 'Name') }}</dt>
+				<dd data-testid="cn-saved-view-alert-name">
+					{{ view.name }}
+				</dd>
+				<template v-if="countText">
+					<dt>{{ t('nextcloud-vue', 'Now') }}</dt>
+					<dd data-testid="cn-saved-view-alert-count">
+						{{ countText }}
+					</dd>
+				</template>
+			</dl>
+			<NcCheckboxRadioSwitch
+				type="switch"
+				:modelValue="enabled"
+				:disabled="saving || !canEdit"
+				data-testid="cn-saved-view-alert-switch"
+				@update:modelValue="onToggle">
+				<span class="cn-saved-view-alert__switch-text">
+					<span>{{ t('nextcloud-vue', 'Tell me above a number') }}</span>
+					<span class="cn-saved-view-alert__hint">{{ hintText }}</span>
+				</span>
+			</NcCheckboxRadioSwitch>
+			<NcTextField v-if="enabled"
+				:modelValue="String(threshold)"
+				type="number"
+				min="0"
+				:label="t('nextcloud-vue', 'Threshold')"
+				:disabled="saving || !canEdit"
+				data-testid="cn-saved-view-alert-threshold"
+				@update:modelValue="onThreshold" />
+			<p v-if="error"
+				class="cn-saved-view-alert__error"
+				role="alert"
+				data-testid="cn-saved-view-alert-error">
+				{{ error }}
+			</p>
+		</template>
+	</div>
+</template>
+
+<script>
+import { getCurrentUser } from '@nextcloud/auth'
+import { translatePlural as n, translate as t } from '@nextcloud/l10n'
+import { NcCheckboxRadioSwitch, NcTextField } from '@nextcloud/vue'
+import { useSavedViewsApi } from '../../composables/useSavedViewsApi.js'
+
+/**
+ * CnSavedViewAlertWidget — the saved view an index page has applied, with its
+ * count alert (DqZoekresultaten "Opgeslagen zoekopdracht"): its name, how many
+ * rows it holds now, and a switch that asks OpenRegister to tell the reader
+ * when the count reaches a threshold.
+ *
+ * The alert is the view's own `alert` (`{ operator: 'gte', threshold,
+ * recipients }`), saved with a PATCH on the view; OpenRegister evaluates it on
+ * its sweep and fires on the crossing, not on the state. Switching it off
+ * clears it. The widget reads the page through the `cnIndexList` CnIndexPage
+ * provides, so it belongs in an index page's `sidePanel`
+ * (`type: "saved-view-alert"`).
+ *
+ * Example (manifest):
+ * ```json
+ * { "id": "alert", "type": "saved-view-alert", "title": "Saved search", "content": { "noun": { "one": "case", "other": "cases" } } }
+ * ```
+ */
+export default {
+	name: 'CnSavedViewAlertWidget',
+
+	components: { NcCheckboxRadioSwitch, NcTextField },
+
+	inject: {
+		/** The index page's list: its applied saved view and its total. */
+		cnIndexList: { default: null },
+		/** Host translate function provided by CnAppRoot. */
+		cnTranslate: { default: () => (key) => key },
+	},
+
+	props: {
+		/**
+		 * The widget content: `{ noun?: { one, other }, emptyText? }`. `noun`
+		 * names what is counted ("9 zaken"); `emptyText` shows while no saved
+		 * view is applied. Both are translated with the app's catalogue.
+		 */
+		content: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+
+	data() {
+		return { saving: false, error: '', draft: null }
+	},
+
+	computed: {
+		/** @return {object|null} The applied saved view, or null. */
+		view() {
+			return (this.cnIndexList && this.cnIndexList.appliedView) || null
+		},
+
+		/** @return {boolean} Whether the view carries an alert. */
+		enabled() {
+			const alert = this.view && this.view.alert
+			return Boolean(alert && typeof alert === 'object' && Number.isFinite(Number(alert.threshold)))
+		},
+
+		/** @return {number} The threshold being edited, else the view's, else 10. */
+		threshold() {
+			if (this.draft !== null) {
+				return this.draft
+			}
+			const value = this.enabled ? Number(this.view.alert.threshold) : 10
+			return Number.isFinite(value) ? value : 10
+		},
+
+		/** @return {boolean} Whether the reader may change the view: its owner, or when the view says nothing. */
+		canEdit() {
+			const owner = this.view && this.view.owner
+			if (!owner) {
+				return true
+			}
+			const user = getCurrentUser()
+			return Boolean(user && user.uid === owner)
+		},
+
+		/** @return {string} "9 zaken", or '' while the total is unknown. */
+		countText() {
+			const total = this.cnIndexList ? this.cnIndexList.total : undefined
+			if (typeof total !== 'number') {
+				return ''
+			}
+			const noun = this.content && this.content.noun
+			if (noun && typeof noun === 'object' && noun.one && noun.other) {
+				return `${total} ${this.cnTranslate(total === 1 ? noun.one : noun.other)}`
+			}
+			return n('nextcloud-vue', '%n result', '%n results', total)
+		},
+
+		/** @return {string} The line under the switch. */
+		hintText() {
+			return t('nextcloud-vue', 'A message to you when there are {threshold} or more', { threshold: this.threshold })
+		},
+
+		/** @return {string} What shows while no saved view is applied. */
+		emptyText() {
+			const own = this.content && this.content.emptyText
+			return own ? this.cnTranslate(own) : t('nextcloud-vue', 'Save this search or open a saved one to set an alert on it.')
+		},
+	},
+
+	methods: {
+		t,
+
+		/**
+		 * Switch the alert on (at the shown threshold) or off.
+		 *
+		 * @param {boolean} on The new state.
+		 * @return {Promise<void>}
+		 */
+		async onToggle(on) {
+			await this.save(on ? this.alertFor(this.threshold) : null)
+		},
+
+		/**
+		 * Save a new threshold, when the alert is on.
+		 *
+		 * @param {string} value The typed value.
+		 * @return {Promise<void>}
+		 */
+		async onThreshold(value) {
+			const number = Math.max(0, Math.floor(Number(value)))
+			if (!Number.isFinite(number)) {
+				return
+			}
+			this.draft = number
+			await this.save(this.alertFor(number))
+			this.draft = null
+		},
+
+		/**
+		 * The alert the view stores: reaching the threshold tells the reader.
+		 *
+		 * @param {number} threshold The threshold.
+		 * @return {{operator: string, threshold: number, recipients: Array<string>}}
+		 */
+		alertFor(threshold) {
+			const user = getCurrentUser()
+			return { operator: 'gte', threshold, recipients: user && user.uid ? [user.uid] : [] }
+		},
+
+		/**
+		 * PATCH the view's alert and hand the saved view back to the page.
+		 *
+		 * @param {object|null} alert The alert, or null to clear it.
+		 * @return {Promise<void>}
+		 */
+		async save(alert) {
+			if (!this.view) {
+				return
+			}
+			this.saving = true
+			this.error = ''
+			try {
+				const saved = await useSavedViewsApi().patchView(this.view.uuid || this.view.id, { alert })
+				if (saved && this.cnIndexList && typeof this.cnIndexList.replaceSavedView === 'function') {
+					this.cnIndexList.replaceSavedView(saved)
+				}
+			} catch (error) {
+				this.error = (error && error.response && error.response.data && error.response.data.error) || t('nextcloud-vue', 'The alert could not be saved.')
+			} finally {
+				this.saving = false
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-saved-view-alert {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	font-size: 14px;
+}
+
+.cn-saved-view-alert__facts {
+	display: grid;
+	grid-template-columns: max-content 1fr;
+	gap: 6px 16px;
+	margin: 0;
+}
+
+.cn-saved-view-alert__facts dt {
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-saved-view-alert__facts dd {
+	margin: 0;
+	font-weight: 500;
+}
+
+.cn-saved-view-alert__switch-text {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
+.cn-saved-view-alert__hint,
+.cn-saved-view-alert__empty {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
+.cn-saved-view-alert__empty,
+.cn-saved-view-alert__error {
+	margin: 0;
+}
+
+.cn-saved-view-alert__error {
+	color: var(--color-error-text, var(--color-error));
+	font-size: 13px;
+}
+</style>

package/src/components/CnSavedViewAlertWidget/index.js

@@ -0,0 +1,7 @@
+// SPDX-FileCopyrightText: 2026 Conduction B.V.
+// SPDX-License-Identifier: EUPL-1.2
+
+import CnSavedViewAlertWidget from './CnSavedViewAlertWidget.vue'
+
+export default CnSavedViewAlertWidget
+export { CnSavedViewAlertWidget }

package/src/components/CnSetupWizard/CnSetupWizard.vue

@@ -438,7 +438,7 @@ export default {
 	 */
 	setup(props) {
 		const { isBoard } = useLook()
-		const wantsSource = (props.steps || []).some((s) => s && s.optionsSource)
+		const wantsSource = (props.steps || []).some((s) => s && (s.optionsSource || s.visibleWhen))
 		if (!wantsSource) {
 			return { isBoard }
 		}
@@ -506,7 +506,7 @@ export default {
 
 		setupSteps() {
 			const skipped = new Set(this.skippedSteps.map((entry) => entry.step.id))
-			return this.declaredSteps.filter((s) => !skipped.has(s.id))
+			return this.declaredSteps.filter((s) => !skipped.has(s.id) && this.stepConditionHolds(s))
 		},
 
 		/**
@@ -869,6 +869,39 @@ export default {
 			})
 		},
 
+		/**
+		 * Whether a step's `visibleWhen` holds: the value at that path in the
+		 * setup status (`"flags.hasPayouts"`, dots walk into objects) is truthy,
+		 * or equals `equals` when the step gives `{ path, equals }`. A step
+		 * without `visibleWhen` always shows; one with it stays hidden until the
+		 * status says so, also while the status loads (DqInstellen: the dwangsom
+		 * step only when the app pays penalties).
+		 *
+		 * @param {object} step The step declaration.
+		 * @return {boolean}
+		 */
+		stepConditionHolds(step) {
+			const when = step && step.visibleWhen
+			if (when === undefined || when === null || when === '') {
+				return true
+			}
+			const path = typeof when === 'string' ? when : when.path
+			if (typeof path !== 'string' || path === '') {
+				return true
+			}
+			let node = this.setupStatus
+			for (const key of path.split('.')) {
+				if (node === null || node === undefined || typeof node !== 'object') {
+					return false
+				}
+				node = node[key]
+			}
+			if (typeof when === 'object' && Object.hasOwn(when, 'equals')) {
+				return node === when.equals
+			}
+			return Boolean(node)
+		},
+
 		/**
 		 * The option list a `choice` step declares `optionsSource` for, read
 		 * from the setup status document the app already serves.

package/src/components/CnWidgetGrid/builtInWidgets.js

@@ -17,6 +17,7 @@
 import CnAuditTrailWidget from '../CnAuditTrailWidget/CnAuditTrailWidget.vue'
 import CnBannerWidget from '../CnBannerWidget/CnBannerWidget.vue'
 import CnDividerWidget from '../CnDividerWidget/CnDividerWidget.vue'
+import CnExportsWidget from '../CnExportsWidget/CnExportsWidget.vue'
 import CnHeaderWidget from '../CnHeaderWidget/CnHeaderWidget.vue'
 import CnIntegrationWidget from '../CnIntegrationWidget/CnIntegrationWidget.vue'
 import CnNavCardGrid from '../CnNavCardGrid/CnNavCardGrid.vue'
@@ -24,6 +25,7 @@ import CnObjectDataWidget from '../CnObjectDataWidget/CnObjectDataWidget.vue'
 import CnObjectGeoWidget from '../CnObjectGeoWidget/CnObjectGeoWidget.vue'
 import CnObjectMetadataWidget from '../CnObjectMetadataWidget/CnObjectMetadataWidget.vue'
 import CnRelatedObjectsWidget from '../CnRelatedObjectsWidget/CnRelatedObjectsWidget.vue'
+import CnSavedViewAlertWidget from '../CnSavedViewAlertWidget/CnSavedViewAlertWidget.vue'
 import CnTextWidget from '../CnTextWidget/CnTextWidget.vue'
 import CnTimelineWidget from '../CnTimelineWidget/CnTimelineWidget.vue'
 import CnWidgetCardGrid from '../CnWidgetCardGrid/CnWidgetCardGrid.vue'
@@ -89,4 +91,6 @@ export const BUILT_IN_WIDGETS = {
 	header: CnHeaderWidget,
 	text: CnTextWidget,
 	divider: CnDividerWidget,
+	'saved-view-alert': CnSavedViewAlertWidget,
+	exports: CnExportsWidget,
 }

package/src/components/CnWidgetGrid/registerDashboardWidgets.js

@@ -75,6 +75,7 @@ import '../CnTasksWidget/index.js'
 import '../CnSectionsWidget/index.js'
 import '../CnFactsWidget/index.js'
 import '../CnDeviceFramesWidget/index.js'
+import '../CnGroupedCardsWidget/index.js'
 import '../CnChecklistRunWidget/index.js'
 import '../CnWorkingCalendarWidget/index.js'
 import '../CnPartyActionsWidget/index.js'

package/src/components/CnWidgetObjectTable/CnWidgetObjectTable.vue

@@ -88,8 +88,8 @@ import { dispatchAction, resolveObjectOpType } from '../../utils/actionsDispatch
 import { resolveObjectTokenContext } from '../../utils/detailObjectContext.js'
 import { pageFilter, pageSort } from '../../utils/pageControls.js'
 import { dropOptionalUnresolved, hasUnresolvedTokens, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
+import { compileRowClass } from '../../utils/rowClassRules.js'
 import { fieldsFromSchema } from '../../utils/schema.js'
-import { compareVisibleWhen, readVisibleWhenPath } from '../../utils/visibleWhen.js'
 import { CnIcon } from '../CnIcon/index.js'
 import { CnRowActions } from '../CnRowActions/index.js'
 import { CnWidgetWrapper } from '../CnWidgetWrapper/index.js'
@@ -762,28 +762,7 @@ export default {
 		 * @return {?(row: object) => string} The row-class function, or null.
 		 */
 		compiledRowClass() {
-			const rc = this.rowClass
-			if (typeof rc === 'function') {
-				return rc
-			}
-			if (!Array.isArray(rc) || rc.length === 0) {
-				return null
-			}
-			const rules = rc
-			return (row) => {
-				const classes = []
-				for (const rule of rules) {
-					if (!rule || !rule.class) {
-						continue
-					}
-					const when = rule.when || {}
-					const actual = readVisibleWhenPath(row, when.field)
-					if (compareVisibleWhen(actual, when.op || 'eq', when.value)) {
-						classes.push(rule.class)
-					}
-				}
-				return classes.join(' ')
-			}
+			return compileRowClass(this.rowClass)
 		},
 
 		/**

package/src/components/index.js

@@ -30,6 +30,8 @@ export { CnDateAxisView } from './CnDateAxisView/index.js'
 export { CnObjectRow } from './CnObjectRow/index.js'
 export { CnObjectList } from './CnObjectList/index.js'
 export { CnOrderedListField } from './CnOrderedListField/index.js'
+export { CnExportsWidget } from './CnExportsWidget/index.js'
+export { CnSavedViewAlertWidget } from './CnSavedViewAlertWidget/index.js'
 export { CnObjectKanban } from './CnObjectKanban/index.js'
 export { CnObjectCalendar } from './CnObjectCalendar/index.js'
 export { CnFolderTree } from './CnFolderTree/index.js'
@@ -224,6 +226,7 @@ export { CnTasksWidgetForm } from './CnTasksWidgetForm/index.js'
 export { CnSectionsWidget } from './CnSectionsWidget/index.js'
 export { CnFactsWidget } from './CnFactsWidget/index.js'
 export { CnDeviceFramesWidget } from './CnDeviceFramesWidget/index.js'
+export { CnGroupedCardsWidget } from './CnGroupedCardsWidget/index.js'
 export { CnChecklistRunWidget } from './CnChecklistRunWidget/index.js'
 export { CnWorkingCalendarWidget } from './CnWorkingCalendarWidget/index.js'
 export { CnPartyActionsWidget } from './CnPartyActionsWidget/index.js'