@conduction/nextcloud-vue 2.79.0 → 2.81.0

package/dist/esm/components/CnDetailPage/CnDetailPage.vue2.js

@@ -9,6 +9,7 @@ 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';
+import DockRight from 'vue-material-design-icons/DockRight.vue';
 import EyeOffOutlineIcon from 'vue-material-design-icons/EyeOffOutline.vue';
 import FileQuestionOutline from 'vue-material-design-icons/FileQuestionOutline.vue';
 import InformationOutline from 'vue-material-design-icons/InformationOutline.vue';
@@ -44,8 +45,9 @@ import { pageViews } from '../../mixins/pageViews.js';
 import { isAppInstalled } from '../../utils/appInstalled.js';
 import { compactLayoutRows } from '../../utils/dashboardPlacement.js';
 import { defaultDetailGrid } from '../../utils/defaultDetailGrid.js';
-import { stageOf, normalisePinnedAction, stageEntry, MAX_QUICK_ACTIONS, groupMenuEntries, resolveNextStep, resolvePill } from '../../utils/detailActionModel.js';
+import { stageOf, normalisePinnedAction, stageEntry, MAX_QUICK_ACTIONS, groupMenuEntries, resolveNextStep, pillCountSource, resolveCountPill, resolvePill } from '../../utils/detailActionModel.js';
 import { reportBindingProblems } from '../../utils/diagnostics.js';
+import { fetchListTotal } from '../../utils/fetchFilterCounts.js';
 import { cnGridCellStyle, hasGridRow } from '../../utils/grid.js';
 import { resolveHeaderMeta, isActivityWidget } from '../../utils/headerMeta.js';
 import { patchStoredSelf } from '../../utils/patchStoredSelf.js';
@@ -92,6 +94,35 @@ const DEFAULT_DETAIL_COLUMN_OPTS = Object.freeze({
 	breakpointForWindow: false,
 });
 
+/**
+ * Where the default table stacks when a side column sits beside the body grid.
+ *
+ * The side column takes about 320px, so the grid it leaves is far narrower than
+ * the page: 790px at a 1100px window. Stacking that at 1000px made a row of
+ * small tiles (a KPI row of 5 or 6 stat tiles) impossible beside a side column.
+ * 1000px exists to keep a `gridWidth: 3` side PANEL inside the grid readable; a
+ * page with a real side column has no such panel, and 12 columns at 600px is
+ * still 50px a column, enough for a tile. Below 600px it stacks as before.
+ */
+const SIDE_COLUMN_STACK_WIDTH = 600;
+
+/**
+ * Whether `opts` is the untouched default table, so a page that passed its own
+ * `columnOpts` keeps exactly what it asked for.
+ *
+ * @param {object|null} opts The `columnOpts` value.
+ * @return {boolean}
+ */
+function isDefaultColumnOpts(opts) {
+	const breakpoints = opts && opts.breakpoints;
+	return !!opts
+		&& opts.columnMax === DEFAULT_DETAIL_COLUMN_OPTS.columnMax
+		&& Array.isArray(breakpoints)
+		&& breakpoints.length === 1
+		&& breakpoints[0].w === DEFAULT_DETAIL_COLUMN_OPTS.breakpoints[0].w
+		&& breakpoints[0].c === 1
+}
+
 /**
  * Event-bus channel a page-level refresh is announced on. The page's own
  * Actions menu emits it, the manifest `refresh` / `api-call` actions bump it,
@@ -208,6 +239,7 @@ var script = {
 		CnSummaryAggregates: __sfc_main$d,
 		CnDetailHeaderChips: __sfc_main$e,
 		CnFollowToggle: __sfc_main$f,
+		DockRight,
 		EyeOffOutline: EyeOffOutlineIcon,
 		CnRelatedCollections: __sfc_main$g,
 		CnBodySections: __sfc_main$h,
@@ -1193,9 +1225,13 @@ var script = {
 		 * A pill above the title saying what kind of record this is
 		 * (manifest `config.typePill`): `{ field, colorMap?, labels?, variant? }`.
 		 * Rendered through `CnStatusBadge`; `colorMap` is keyed on the field's
-		 * raw value, `labels` maps a raw value to the text to show.
+		 * raw value, `labels` maps a raw value to the text to show. Instead of
+		 * `field`: `text`, a constant ("Inwoner"), or `countFrom`
+		 * (`{ register, schema, filter? }`) with `countLabel` (`{ one, other }`
+		 * with `{count}`), a count of a related list ("1 lopende zaak") that
+		 * shows nothing at 0.
 		 *
-		 * @type {{field: string, colorMap?: object, labels?: object, variant?: string}|null}
+		 * @type {{field?: string, text?: string, countFrom?: object, countLabel?: object, colorMap?: object, labels?: object, variant?: string}|null}
 		 */
 		typePill: {
 			type: Object,
@@ -1547,6 +1583,10 @@ var script = {
 
 	data() {
 		return {
+			/** The counts of the header's count pills (`countFrom`), by pill key (`type`, `status`). */
+			pillCounts: {},
+			/** Sequence of the last pill count round, so a late answer does not overwrite a newer one. */
+			pillCountSeq: 0,
 			/** `register/schema/id` the read-state call was last made for, so it is sent once per load. */
 			readStateSentFor: '',
 			/** Whether the user is arranging the chosen view (`userLayout`). */
@@ -2059,12 +2099,25 @@ var script = {
 		headerPills() {
 			return [['type', this.typePill], ['status', this.statusPill]]
 				.map(([key, config]) => {
-					const pill = resolvePill(config, this.resolvedObject);
+					const pill = pillCountSource(config)
+						? resolveCountPill(config, this.pillCounts[key], (text) => this.effectiveTranslate(text))
+						: resolvePill(config, this.resolvedObject);
 					return pill ? { ...pill, key, label: this.effectiveTranslate(pill.label) } : null
 				})
 				.filter(Boolean)
 		},
 
+		/**
+		 * What the count pills depend on: the record id and the lists they
+		 * count. A change counts again.
+		 *
+		 * @return {string} The key.
+		 * @spec openspec/changes/screens-relation-pages/specs/relation-pages/spec.md#requirement-a-header-pill-can-be-a-constant-or-a-count
+		 */
+		pillCountKey() {
+			return JSON.stringify([this.objectId, pillCountSource(this.typePill), pillCountSource(this.statusPill)])
+		},
+
 		/**
 		 * The widget the header holds (`headerWidget`): the definition in
 		 * `widgets` with that id, or null without the key or a match.
@@ -2111,6 +2164,20 @@ var script = {
 				.map(({ widget }) => widget)
 		},
 
+		/**
+		 * The `columnOpts` the body grid gets: the default table stacks at 1000px
+		 * of grid width, or at 600px when a side column narrows the grid. An
+		 * explicit `columnOpts` prop is passed through untouched.
+		 *
+		 * @return {object|null} The column options.
+		 */
+		bodyColumnOpts() {
+			if (!this.showsSideColumn || !isDefaultColumnOpts(this.columnOpts)) {
+				return this.columnOpts
+			}
+			return { ...this.columnOpts, breakpoints: [{ w: SIDE_COLUMN_STACK_WIDTH, c: 1 }] }
+		},
+
 		/**
 		 * Whether the side column renders.
 		 *
@@ -2642,6 +2709,22 @@ var script = {
 				&& this.register !== '' && this.schema !== '' && this.objectId !== ''
 		},
 
+		/**
+		 * Whether the header menu offers "Open sidebar": the board look, where the
+		 * sidebar's own toggle is hidden, on a page whose sidebar is active and
+		 * closed.
+		 *
+		 * @return {boolean}
+		 */
+		showOpenSidebar() {
+			return this.isBoard && this.hasExternalSidebar && this.sidebarActive && this.objectSidebarState.open !== true
+		},
+
+		/** @return {string} Label of the Open sidebar entry. */
+		openSidebarLabel() {
+			return translate('nextcloud-vue', 'Open sidebar')
+		},
+
 		/** @return {string} Label of the Mark as unread entry. */
 		markUnreadLabel() {
 			return translate('nextcloud-vue', 'Mark as unread')
@@ -3137,6 +3220,14 @@ var script = {
 	},
 
 	watch: {
+		// The header's count pills count again for another record or other lists.
+		pillCountKey: {
+			immediate: true,
+			handler() {
+				this.refreshPillCounts();
+			},
+		},
+
 		// Opening a record marks it read, once, after its data has rendered.
 		readStateDue: {
 			immediate: true,
@@ -3344,6 +3435,17 @@ var script = {
 	},
 
 	methods: {
+		/**
+		 * Open the object sidebar through the shared channel.
+		 *
+		 * @return {void}
+		 */
+		openSidebar() {
+			if (this.objectSidebarState) {
+				this.objectSidebarState.open = true;
+			}
+		},
+
 		/**
 		 * Start or finish arranging the chosen view. Finishing stores the
 		 * arrangement of every view the user moved, once.
@@ -3554,6 +3656,33 @@ var script = {
 			}
 		},
 
+		/**
+		 * Count the lists behind the header's count pills (`countFrom`): one
+		 * list request each (`_limit=1`, the `total`). A failed count, or a
+		 * record without an id yet, shows no pill.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/screens-relation-pages/specs/relation-pages/spec.md#requirement-a-header-pill-can-be-a-constant-or-a-count
+		 */
+		async refreshPillCounts() {
+			const pills = [['type', this.typePill], ['status', this.statusPill]]
+				.map(([key, config]) => [key, pillCountSource(config)])
+				.filter(([, source]) => source);
+			const seq = ++this.pillCountSeq;
+			if (pills.length === 0 || this.objectId === null || this.objectId === undefined || this.objectId === '') {
+				this.pillCounts = {};
+				return
+			}
+			const ctx = { objectId: this.objectId, object: this.resolvedObject || undefined };
+			const counts = {};
+			await Promise.all(pills.map(async ([key, source]) => {
+				counts[key] = await fetchListTotal(source.register, source.schema, source.filter, ctx).catch(() => null);
+			}));
+			if (seq === this.pillCountSeq) {
+				this.pillCounts = counts;
+			}
+		},
+
 		/**
 		 * A `cn:page:refresh` reached the page — re-read the object so every
 		 * object-bound widget re-renders from what the backend now holds.
@@ -3568,6 +3697,7 @@ var script = {
 		 * @return {void}
 		 */
 		onPageRefreshBus(payload) {
+			this.refreshPillCounts();
 			if (!this.hasSchemaDrivenFetch) {
 				return
 			}