@conduction/nextcloud-vue 2.68.0 → 2.69.0

package/dist/nextcloud-vue.cjs.js.map

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/dist/nextcloud-vue.cjs.js.map
-size: 35437389 bytes
-sha256: a49cebe981b616ba6555ce135455260b6b111ebcea9afc9c34da210cbc38f32b
+size: 35499103 bytes
+sha256: fe1cf925335eec45a51c59903eb32d313c16bdcbdaf047c4b80fad05712db22a

package/l10n/en.json

@@ -1092,6 +1092,9 @@
     "An attention card needs a title": "An attention card needs a title",
     "Good morning, {name}": "Good morning, {name}",
     "This view has no widgets yet.": "This view has no widgets yet.",
+    "Arrange view": "Arrange view",
+    "Reset view": "Reset view",
+    "Reset layout": "Reset layout",
     "Good morning": "Good morning",
     "Good afternoon, {name}": "Good afternoon, {name}",
     "Good afternoon": "Good afternoon",

package/l10n/nl.json

@@ -1136,6 +1136,9 @@
     "An attention card needs a title": "Een aandachtskaart heeft een titel nodig",
     "Good morning, {name}": "Goedemorgen, {name}",
     "This view has no widgets yet.": "Deze weergave heeft nog geen widgets.",
+    "Arrange view": "Weergave indelen",
+    "Reset view": "Weergave herstellen",
+    "Reset layout": "Indeling herstellen",
     "Good morning": "Goedemorgen",
     "Good afternoon, {name}": "Goedemiddag, {name}",
     "Good afternoon": "Goedemiddag",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.68.0",
+  "version": "2.69.0",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/src/components/CnDashboardPage/CnDashboardPage.md

@@ -153,6 +153,8 @@ Three behaviours are worth knowing because each is load-bearing:
 
 Call `resetUserLayout()` to drop the arrangement; the page emits `user-layout-reset` and returns to the manifest.
 
+The same `userLayout` covers the page's [views](../../../docs/components/cn-dashboard-page.md#each-view-arranged-per-user-userlayout): each view's grid is draggable in edit mode and is stored per view, under the page id with `.view.<view id>` appended. Edit mode shows **Reset layout**, which returns the page's own grid and the chosen view to the manifest (`user-layout-reset`, `view-layout-reset`). `resetViewUserLayout(viewId)` resets one view.
+
 ## Slots
 
 | Slot | Scope | Description |

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -67,6 +67,19 @@
 					</template>
 					{{ isEditing ? doneLabel : editLabel }}
 				</NcButton>
+				<!-- With `userLayout`, edit mode offers a way back to the
+				     manifest: the page's own grid and the chosen view return
+				     to the layout the app ships. Other views keep theirs. -->
+				<NcButton
+					v-if="userLayout && isEditing"
+					variant="tertiary"
+					data-testid="cn-dashboard-page-reset-layout"
+					@click="resetLayout">
+					<template #icon>
+						<Restore :size="20" />
+					</template>
+					{{ t('nextcloud-vue', 'Reset layout') }}
+				</NcButton>
 				<!-- In-app edit button (ADR-041). Renders only when Buildiq is
 				     reachable; self-wires from the cnManifestEditor / cnOpenBuildAvailable
 				     provided by CnAppRoot. Sits inline with the page's action buttons. -->
@@ -754,6 +767,7 @@ import Check from 'vue-material-design-icons/Check.vue'
 import Cog from 'vue-material-design-icons/Cog.vue'
 import Download from 'vue-material-design-icons/Download.vue'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
+import Restore from 'vue-material-design-icons/Restore.vue'
 import ViewDashboardOutline from 'vue-material-design-icons/ViewDashboardOutline.vue'
 import CnWidgetStyleEditorModal from '../../dialogs/CnWidgetStyleEditorModal.vue'
 import CnBodySections from '../CnBodySections/CnBodySections.vue'
@@ -768,9 +782,8 @@ import CnWidgetRefItem from '../CnWidgetRefItem/CnWidgetRefItem.vue'
 import CnWidgetRenderer from '../CnWidgetRenderer/CnWidgetRenderer.vue'
 import CnWidgetWrapper from '../CnWidgetWrapper/CnWidgetWrapper.vue'
 import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry.js'
-import { readUserPreference, writeUserPreference } from '../../composables/useUserPreferences.js'
 import { pageViews } from '../../mixins/pageViews.js'
-import { dashboardLayoutKey, mergeUserLayout } from '../../store/plugins/dashboardLayouts.js'
+import { mergeUserLayout, resolveUserLayoutApi } from '../../store/plugins/dashboardLayouts.js'
 import { isAppInstalled } from '../../utils/appInstalled.js'
 import { compareVisibleWhen, readVisibleWhenValue } from '../../utils/visibleWhen.js'
 import { canonicalWidgetType } from '../../utils/widgetTypeAliases.js'
@@ -905,6 +918,7 @@ export default {
 		NcLoadingIcon,
 		NcSelect,
 		Pencil,
+		Restore,
 		Check,
 		Cog,
 		CalendarRange,
@@ -1958,7 +1972,7 @@ export default {
 		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-a-view-with-nothing-to-draw-says-so
 		 */
 		viewDisplayLayout() {
-			const items = this.activeView ? this.activeView.layout : []
+			const items = this.activeViewLayout
 			if (this.gridEditable) {
 				return items
 			}
@@ -2000,8 +2014,9 @@ export default {
 					key: `view-${this.activeViewId}`,
 					view: true,
 					layout: this.viewDisplayLayout,
-					// A user arrangement covers the page's own layout only.
-					editable: this.gridEditable && !this.userLayout,
+					// With `userLayout` the user arranges the view too; the
+					// arrangement is kept per view (pageViews mixin).
+					editable: this.gridEditable,
 					attrs: {
 						id: this.viewRegionId,
 						role: 'region',
@@ -2721,6 +2736,7 @@ export default {
 			// the user's arrangement is finished when they say it is.
 			if (leaving) {
 				this.saveUserLayout()
+				this.saveViewUserLayouts()
 			}
 
 			/**
@@ -2780,6 +2796,17 @@ export default {
 			}
 		},
 
+		/**
+		 * The edit-mode reset: the page's own grid and the chosen view return
+		 * to the manifest layout. Other views keep this user's arrangement.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/page-view-user-layouts/specs/view-switch-containers/spec.md#requirement-resetting-a-view-restores-its-manifest-layout
+		 */
+		async resetLayout() {
+			await Promise.all([this.resetUserLayout(), this.resetViewUserLayout()])
+		},
+
 		/**
 		 * Drop this user's arrangement and return to the manifest.
 		 *
@@ -2832,35 +2859,7 @@ export default {
 		 * @return {{ load: (appId: string, pageId: string) => Promise<object|null>, save: (appId: string, pageId: string, layout: Array<object>) => Promise<boolean>, reset: (appId: string, pageId: string) => Promise<boolean> }} The api.
 		 */
 		userLayoutApi() {
-			const store = this.userLayoutStore
-			if (store && typeof store.loadDashboardLayout === 'function') {
-				return {
-					load: (...a) => store.loadDashboardLayout(...a),
-					save: (...a) => store.saveDashboardLayout(...a),
-					reset: (...a) => store.resetDashboardLayout(...a),
-				}
-			}
-
-			return {
-				load: (appId, pageId) => readUserPreference(appId, dashboardLayoutKey(pageId), null),
-				save: (appId, pageId, layout) => writeUserPreference(
-					appId,
-					dashboardLayoutKey(pageId),
-					{ items: (layout || []).map((i) => ({
-						widgetId: i.widgetId,
-						gridX: i.gridX,
-						gridY: i.gridY,
-						gridWidth: i.gridWidth,
-						gridHeight: i.gridHeight,
-					})) },
-				),
-
-				reset: (appId, pageId) => writeUserPreference(
-					appId,
-					dashboardLayoutKey(pageId),
-					{ items: [] },
-				),
-			}
+			return resolveUserLayoutApi(this.userLayoutStore)
 		},
 
 		onLayoutChange(updated) {
@@ -3906,7 +3905,7 @@ export default {
 			// library's own defaults, so a manifest need not set them — but a
 			// manifest that DOES set them must reach the component, or the
 			// declaration is a silent no-op that reads like configuration.
-			for (const key of ['countLabel', 'variant', 'showZeroCount', 'horizontal', 'vertical', 'filled', 'route', 'iconClass']) {
+			for (const key of ['countLabel', 'variant', 'showZeroCount', 'horizontal', 'vertical', 'filled', 'route', 'iconClass', 'format']) {
 				if (props[key] !== undefined) {
 					out[key] = props[key]
 				}

package/src/components/CnDetailPage/CnDetailPage.md

@@ -211,6 +211,12 @@ export default {
 | `excludeFields` (`exclude-fields`) | Array | `[]` | Fields the create and edit forms never ask for. Applied after `includeFields`. |
 | `fieldOverrides` (`field-overrides`) | Object | `{}` | Per-field widget / label overrides for the create and edit forms, keyed by field name. Forwarded to `CnFormDialog`. |
 
+## Each view arranged per user
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `userLayout` | Boolean | `false` | Let the user arrange each of the page's `views` for themselves. The header shows **Arrange view** next to the view switch; **Done** stores the arrangement per view and user (a user preference, mirrored in the browser), **Reset view** returns the chosen view to its manifest layout. The manifest `layout` is never changed. See [the guide](../../../docs/components/cn-detail-page.md#each-view-arranged-per-user-userlayout). |
+
 ## Slots
 
 | Slot | Description |

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -157,6 +157,31 @@
 					:controls="viewRegionId"
 					data-testid="cn-detail-page-view-switch"
 					@update:modelValue="selectView" />
+				<!-- With `userLayout`, the user arranges the chosen view for
+				     themselves: Arrange view makes its grid draggable, Done
+				     stores the arrangement, Reset view returns the view to the
+				     layout the app ships. -->
+				<NcButton
+					v-if="userLayout && viewUserLayoutOn && !viewIsEmpty"
+					:variant="arrangingView ? 'primary' : 'secondary'"
+					data-testid="cn-detail-page-arrange-view"
+					@click="toggleArrangeView">
+					<template #icon>
+						<Check v-if="arrangingView" :size="20" />
+						<Pencil v-else :size="20" />
+					</template>
+					{{ arrangingView ? t('nextcloud-vue', 'Done') : t('nextcloud-vue', 'Arrange view') }}
+				</NcButton>
+				<NcButton
+					v-if="viewUserLayoutOn && arrangingView"
+					variant="tertiary"
+					data-testid="cn-detail-page-reset-view"
+					@click="resetViewUserLayout()">
+					<template #icon>
+						<Restore :size="20" />
+					</template>
+					{{ t('nextcloud-vue', 'Reset view') }}
+				</NcButton>
 				<!-- 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
@@ -626,10 +651,10 @@
 			     keyed on its view, so switching mounts the other view's grid. -->
 			<CnDashboardGrid
 				v-for="section in bodyGridSections"
-				:key="`cn-detail-grid-${section.key}-${editingBody ? 'editing' : 'live'}`"
+				:key="`cn-detail-grid-${section.key}-${section.editable ? 'editing' : 'live'}`"
 				v-bind="section.attrs"
 				:layout="section.layout"
-				:editable="editingBody"
+				:editable="section.editable"
 				:columns="12"
 				:columnOpts="columnOpts"
 				class="cn-detail-page__grid"
@@ -1060,6 +1085,7 @@ import { NcActionButton, NcActionCaption, NcActionLink, NcActionSeparator, NcBut
 import { provide, ref, watch } from 'vue'
 import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
 import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
+import Check from 'vue-material-design-icons/Check.vue'
 import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
 import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
 import Cog from 'vue-material-design-icons/Cog.vue'
@@ -1068,6 +1094,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 Restore from 'vue-material-design-icons/Restore.vue'
 import ViewDashboardOutline from 'vue-material-design-icons/ViewDashboardOutline.vue'
 import CnRelationLinkModal from '../../dialogs/CnRelationLinkModal.vue'
 import CnWidgetStyleEditorModal from '../../dialogs/CnWidgetStyleEditorModal.vue'
@@ -1274,9 +1301,11 @@ export default {
 		CnTranslatedBadge,
 		CnWidgetStyleEditorModal,
 		CnRelationLinkModal,
+		Check,
 		Cog,
 		Plus,
 		Pencil,
+		Restore,
 	},
 
 	mixins: [gridLayout, pageViews],
@@ -1769,6 +1798,20 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Whether the user arranges each view (`views`) for themselves. On,
+		 * the header offers Arrange view next to the view switch; the
+		 * arrangement is stored per view and per user (the server, mirrored
+		 * in the browser) and a reset returns the view to its manifest
+		 * layout. Off (the default), a view renders as the manifest says.
+		 *
+		 * @type {boolean}
+		 */
+		userLayout: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Whether the Refresh entry renders in the page-header menu.
 		 * Tri-state:
@@ -2419,6 +2462,8 @@ export default {
 
 	data() {
 		return {
+			/** Whether the user is arranging the chosen view (`userLayout`). */
+			arrangingView: false,
 			/** Whether the record edit form is open. */
 			editFormOpen: false,
 			/**
@@ -3589,7 +3634,7 @@ export default {
 		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) : []
+			return this.activeView ? this.closeDroppedRows(this.activeViewLayout) : []
 		},
 
 		/**
@@ -3607,16 +3652,18 @@ export default {
 		 * 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}>}
+		 * @return {Array<{key: string, view: boolean, layout: Array<object>, editable: boolean, 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: {} }] : []
+			const sections = this.hasBodyGrid ? [{ key: 'body', view: false, layout: this.bodyGridLayout, editable: this.editingBody, attrs: {} }] : []
 			if (this.hasViews && !this.viewIsEmpty) {
 				sections.push({
 					key: `view-${this.activeViewId}`,
 					view: true,
 					layout: this.viewDisplayLayout,
+					// The user arranges the view while Arrange view is on.
+					editable: this.editingBody || this.arrangingView,
 					attrs: {
 						id: this.viewRegionId,
 						role: 'region',
@@ -3941,6 +3988,21 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Start or finish arranging the chosen view. Finishing stores the
+		 * arrangement of every view the user moved, once.
+		 *
+		 * @return {void}
+		 * @spec openspec/changes/page-view-user-layouts/specs/view-switch-containers/spec.md#requirement-a-user-arranges-each-view-for-themselves
+		 */
+		toggleArrangeView() {
+			const leaving = this.arrangingView
+			this.arrangingView = !this.arrangingView
+			if (leaving) {
+				this.saveViewUserLayouts()
+			}
+		},
+
 		// Expose the shared grid helpers to the template (grid mode + auto-body).
 		cnGridCellStyle,
 		hasGridRow,

package/src/components/CnStatWidget/CnStatWidget.vue

@@ -1312,7 +1312,7 @@ export default {
 		 * @return {string}
 		 */
 		formattedValue() {
-			return formatMetricValue(this.displayValue, this.content.format, this.configCtx)
+			return formatMetricValue(this.displayValue, this.content.format, this.configCtx, this.objectCtx?.object || null)
 		},
 
 		/**
@@ -1346,7 +1346,7 @@ export default {
 				return ''
 			}
 			const { prefix, suffix, ...rest } = (this.content.format || {})
-			return formatMetricValue(this.limitValue, rest, this.configCtx)
+			return formatMetricValue(this.limitValue, rest, this.configCtx, this.objectCtx?.object || null)
 		},
 
 		/**

package/src/components/CnStatsBlockWidget/CnStatsBlockWidget.vue

@@ -34,7 +34,13 @@
 				:vertical="vertical"
 				:filled="filled"
 				:clickable="!!view.route"
-				:route="view.route || null" />
+				:route="view.route || null">
+				<!-- An entry with a `format` (or `currency` / `currencyField`)
+				     shows its value formatted, money in its own currency. -->
+				<template v-if="view.formatted !== null" #value>
+					{{ view.formatted }}
+				</template>
+			</CnStatsBlock>
 		</template>
 
 		<!-- Single-source mode (pre-existing interface, unchanged). -->
@@ -50,7 +56,11 @@
 			:vertical="vertical"
 			:filled="filled"
 			:clickable="!!route"
-			:route="route" />
+			:route="route">
+			<template v-if="formattedSingle !== null" #value>
+				{{ formattedSingle }}
+			</template>
+		</CnStatsBlock>
 	</div>
 </template>
 
@@ -58,6 +68,7 @@
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import CnStatsBlock from '../CnStatsBlock/CnStatsBlock.vue'
 import { useDataSource } from '../../composables/useDataSource.js'
+import { formatMetricValue, normalizeMetricFormat, unwrapAppConfig } from '../../utils/formatMetric.js'
 import { dropOptionalUnresolved, hasUnresolvedTokens, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 
 // The canonical KPI scale (`--cn-kpi-*`) lives in one stylesheet. Imported
@@ -85,6 +96,15 @@ const PAGE_REFRESH_BUS_CHANNEL = 'cn:page:refresh'
  * `field`, token-resolved `filter`) plus per-entry presentation
  * (`title`, `variant`, `countLabel`), an optional `route` deep link, and
  * `hideWhenZero` (the entry is omitted when its resolved count is 0).
+ *
+ * An entry formats its value with `format` (a style name such as
+ * `"currency"`, or `{ style, currency, currencyField, decimals, prefix,
+ * suffix }`), as a `type:"stat"` widget's `content.format` does. A money
+ * value takes the currency from `currencyField` (a field of the detail
+ * page's object, e.g. a contract's own `currency`), then `currency` (a code
+ * or `@config.currency`), then the app's reporting currency, then EUR, and
+ * is formatted in the user's locale. `currency` / `currencyField` may sit on
+ * the entry itself and imply `format: "currency"`.
  * Exactly one of `dataSource` / `entries` must be provided — when
  * `entries` is absent, the single-`dataSource` path renders exactly as
  * before.
@@ -140,6 +160,11 @@ export default {
 		 * `filter`. Null on pages that don't provide it.
 		 */
 		cnWorkspaceContext: { default: null },
+		/**
+		 * Page-level app config provided by the page — the reporting
+		 * currency (`currency`) and `@config.<key>` tokens in `format`.
+		 */
+		cnAppConfig: { default: () => ({}) },
 	},
 
 	props: {
@@ -179,6 +204,20 @@ export default {
 			default: () => [],
 		},
 
+		/**
+		 * How the single-source value is shown: a style name (`'currency'`,
+		 * `'number'`, `'percent'`, `'decimal'`, `'duration-hours'`) or
+		 * `{ style, currency, currencyField, decimals, prefix, suffix }`.
+		 * Empty (the default) shows the plain localized count. Entries carry
+		 * their own `format`.
+		 *
+		 * @type {string|object|null}
+		 */
+		format: {
+			type: [String, Object],
+			default: null,
+		},
+
 		/** Block title (manifest `widgetDef.title`). */
 		title: {
 			type: String,
@@ -329,6 +368,41 @@ export default {
 			return (typeof c === 'object' && 'value' in c) ? c.value : c
 		},
 
+		/**
+		 * The page-level app config map (reporting currency, `@config` keys).
+		 *
+		 * @return {object}
+		 */
+		configCtx() {
+			return unwrapAppConfig(this.cnAppConfig)
+		},
+
+		/**
+		 * The detail page's object, or null on a dashboard. Its fields feed
+		 * an entry's `currencyField`.
+		 *
+		 * @return {object|null}
+		 */
+		pageObject() {
+			const object = this.objectCtx && this.objectCtx.object
+			return object && typeof object === 'object' ? object : null
+		},
+
+		/**
+		 * The single-source value formatted per `format`, or null to keep
+		 * the plain count.
+		 *
+		 * @return {string|null}
+		 * @spec openspec/changes/stat-currency-from-object/specs/dashboard-page/spec.md#requirement-a-stats-block-entry-formats-its-value
+		 */
+		formattedSingle() {
+			const fmt = normalizeMetricFormat({ format: this.format })
+			if (!fmt || this.loading) {
+				return null
+			}
+			return formatMetricValue(this.resolvedCount, fmt, this.configCtx, this.pageObject)
+		},
+
 		/**
 		 * Token-resolution context for entry filters, merged from the
 		 * detail-page object context and the page-level workspace bag.
@@ -346,14 +420,19 @@ export default {
 		 * its fetched count and loading flag, with `hideWhenZero` entries
 		 * whose resolved count is 0 omitted.
 		 *
-		 * @return {Array<{entry: object, key: string, count: number, loading: boolean}>}
+		 * @return {Array<{entry: object, key: string, count: number, loading: boolean, formatted: (string|null)}>}
+		 * @spec openspec/changes/stat-currency-from-object/specs/dashboard-page/spec.md#requirement-a-stats-block-entry-formats-its-value
 		 */
 		entryViews() {
 			return (this.entries || [])
 				.map((entry, i) => {
 					const raw = this.entryCounts[i]
 					const resolved = typeof raw === 'number'
+					const fmt = normalizeMetricFormat(entry)
 					return {
+						// The value as the entry's `format` says, money in the
+						// currency the entry names; null keeps the plain count.
+						formatted: fmt && resolved ? formatMetricValue(raw, fmt, this.configCtx, this.pageObject) : null,
 						entry: entry || {},
 						key: `${(entry && entry.register) || ''}/${(entry && entry.schema) || ''}/${i}`,
 						count: resolved ? raw : 0,