@conduction/nextcloud-vue 2.56.0-beta.36 → 2.56.0-beta.38

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

@@ -2,13 +2,14 @@ import { translate } from '@nextcloud/l10n';
 import __sfc_main from '../CnStatusBadge/CnStatusBadge.vue.js';
 import { normalizeLook } from '../../composables/useLook.js';
 import { isBadgeVariant } from '../../utils/badgeVariants.js';
-import { buildBoardColumns, resolveStageColor } from '../../utils/boardColumns.js';
+import { buildBoardColumns, normalizeAllowed, resolveStageColor } from '../../utils/boardColumns.js';
 import { buildSwimlanes } from '../../utils/boardSwimlanes.js';
 import { runBoardDrop, DROP_OUTCOMES } from '../../utils/boardTransition.js';
 import { dueStateForRow } from '../../utils/dueRule.js';
 import { formatMetricValue } from '../../utils/formatMetric.js';
 import { readPath } from '../../utils/readPath.js';
 import { preventMiddleClickAutoscroll, isRowMiddleClick } from '../../utils/rowAuxClick.js';
+import { userLocale } from '../../utils/userLocale.js';
 import { daysUntil } from '../../utils/dateVariant.js';
 
 /**
@@ -46,6 +47,12 @@ var script = {
 		 * draws the screens' board anatomy (screens-kanban-parity).
 		 */
 		cnLook: { default: 'nextcloud' },
+		/**
+		 * The app's cell-formatter registry, provided by CnAppRoot. A card
+		 * role named in `cardRoles.formatters` shows its value through it, as
+		 * the table's cells do (screens-board-reference-columns).
+		 */
+		cnFormatters: { default: () => ({}) },
 	},
 
 	props: {
@@ -186,9 +193,78 @@ var script = {
 			type: Number,
 			default: 0,
 		},
+
+		/**
+		 * The column a row belongs in, for a status whose raw value is not
+		 * the column key: a reference whose rows are merged by name
+		 * (screens-board-reference-columns). Absent, the row's `statusField`
+		 * value is the key.
+		 *
+		 * @type {((row: object) => string)|null}
+		 * @spec openspec/changes/screens-board-reference-columns/specs/board-view/spec.md#requirement-columns-can-be-the-rows-a-field-references
+		 */
+		columnKeyOf: {
+			type: Function,
+			default: null,
+		},
+
+		/**
+		 * Wrap the columns onto more rows, as many to a row as fit at 240px,
+		 * instead of one row that scrolls sideways (manifest
+		 * `config.board.wrap`). For a board with more stages than fit.
+		 *
+		 * @spec openspec/changes/screens-board-reference-columns/specs/board-view/spec.md#requirement-a-wide-board-can-wrap-its-columns
+		 */
+		wrapColumns: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * Offer a checkbox on every card, so cards can be selected for the
+		 * list's bulk actions (the same selection the table holds).
+		 *
+		 * @spec openspec/changes/screens-board-reference-columns/specs/board-view/spec.md#requirement-cards-can-be-selected-for-bulk-actions
+		 */
+		selectable: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * The selected cards, by row key.
+		 *
+		 * @type {Array<string|number>}
+		 */
+		selectedIds: {
+			type: Array,
+			default: () => [],
+		},
+
+		/**
+		 * The columns one card may move to, asked when its menu opens or its
+		 * drag starts: `(card) => Promise<Array<string>|null>`, column keys,
+		 * `null` for every column. A column the card cannot reach is greyed
+		 * during the drag and marked "not allowed" in the menu, and a drop on
+		 * it is refused without asking the host. Absent, every column is
+		 * offered and the host's move decides.
+		 *
+		 * An entry may also be `{ key, allowed, reason }`. With `allowed:
+		 * false` the column is blocked: the menu shows the reason under its
+		 * name, the column shows it under its header during a drag, and a
+		 * drop there is refused with it.
+		 *
+		 * @type {((card: object) => Promise<Array<string|{key: string, allowed?: boolean, reason?: string}>|null>)|null}
+		 * @spec openspec/changes/board-move-block-reasons/specs/board-view/spec.md#requirement-a-move-target-can-be-blocked-with-a-reason
+		 * @spec openspec/changes/screens-board-reference-columns/specs/board-view/spec.md#requirement-the-board-shows-where-a-card-can-go
+		 */
+		allowedMoves: {
+			type: Function,
+			default: null,
+		},
 	},
 
-	emits: ['card-click', 'card-aux-click', 'moved', 'refused', 'stale', 'load-more'],
+	emits: ['card-click', 'card-aux-click', 'moved', 'refused', 'stale', 'load-more', 'select'],
 
 	data() {
 		return {
@@ -204,6 +280,10 @@ var script = {
 			expanded: [],
 			/** The card whose menu is open (board look), by card key. */
 			openMenuKey: null,
+			/** Where each card may move (`allowedMoves`), as `{ keys, reasons }` by card key; null = everywhere, absent = not asked yet. */
+			allowedByCard: {},
+			/** Where the dragged card may move, as `{ keys, reasons }`, or null for everywhere. */
+			dragAllowed: null,
 		}
 	},
 
@@ -221,6 +301,7 @@ var script = {
 				statusField: this.statusField,
 				offBoardLabel: translate('nextcloud-vue', 'Elsewhere'),
 				colorField: this.colorField,
+				keyOf: this.columnKeyOf,
 			})
 		},
 
@@ -248,9 +329,35 @@ var script = {
 				due: (given && given.due) || '',
 				owner: (given && given.owner) || '',
 				pillColors: (given && given.pillColors) || {},
+				formatters: (given && given.formatters && typeof given.formatters === 'object') ? given.formatters : {},
 			}
 		},
 
+		/** @return {string} The note on a menu target the card cannot reach. */
+		notAllowedLabel() {
+			return translate('nextcloud-vue', 'not allowed')
+		},
+
+		/** @return {string} The note on a menu target that is full. */
+		fullLabel() {
+			return translate('nextcloud-vue', 'full')
+		},
+
+		/**
+		 * Every column's total over all lanes, by key: what a limit is
+		 * measured against, since a swimlane holds only part of a column.
+		 *
+		 * @return {Map<string, number>} The totals.
+		 */
+		columnTotals() {
+			return new Map(this.board.columns.map((column) => [String(column.key), column.count]))
+		},
+
+		/** @return {Array<string>} The selected row keys as strings. */
+		selectedKeys() {
+			return (Array.isArray(this.selectedIds) ? this.selectedIds : []).map(String)
+		},
+
 		/** @return {string} The Open in new tab menu item. */
 		openInNewTabLabel() {
 			return translate('nextcloud-vue', 'Open in new tab')
@@ -309,6 +416,206 @@ var script = {
 
 		preventMiddleClickAutoscroll,
 
+		/**
+		 * Whether a card is selected.
+		 *
+		 * @param {object} card The card.
+		 * @return {boolean} True when selected.
+		 */
+		isSelected(card) {
+			return this.selectedKeys.includes(this.cardKey(card))
+		},
+
+		/**
+		 * The checkbox's accessible name.
+		 *
+		 * @param {object} card The card.
+		 * @return {string} "Select <name>".
+		 */
+		selectLabel(card) {
+			const name = this.roleText(card, this.roles.title) || this.cardKey(card);
+			return translate('nextcloud-vue', 'Select {name}', { name })
+		},
+
+		/**
+		 * Select a card, or unselect it.
+		 *
+		 * @param {object} card The card.
+		 * @return {void}
+		 * @spec openspec/changes/screens-board-reference-columns/specs/board-view/spec.md#requirement-cards-can-be-selected-for-bulk-actions
+		 */
+		toggleSelected(card) {
+			const key = this.cardKey(card);
+			const next = this.isSelected(card)
+				? this.selectedIds.filter((id) => String(id) !== key)
+				: [...this.selectedIds, card?.[this.rowKey]];
+			/**
+			 * @event select Emitted when a card's checkbox changes. Payload: the selected row keys.
+			 */
+			this.$emit('select', next);
+		},
+
+		/**
+		 * Ask the host where one card may go (`allowedMoves`), once per card.
+		 *
+		 * @param {object} card The card.
+		 * @return {Promise<{keys: Array<string>, reasons: object}|null>} Where it may go, or null for everywhere.
+		 * @spec openspec/changes/screens-board-reference-columns/specs/board-view/spec.md#requirement-the-board-shows-where-a-card-can-go
+		 */
+		async loadAllowed(card) {
+			if (typeof this.allowedMoves !== 'function') {
+				return null
+			}
+			const key = this.cardKey(card);
+			if (Object.hasOwn(this.allowedByCard, key)) {
+				return this.allowedByCard[key]
+			}
+			let allowed;
+			try {
+				allowed = normalizeAllowed(await this.allowedMoves(card));
+			} catch {
+				// Unknown is not "nowhere": the host's move stays the authority.
+				allowed = null;
+			}
+			this.allowedByCard = { ...this.allowedByCard, [key]: allowed };
+			return allowed
+		},
+
+		/**
+		 * Whether a card may move to a column, as far as the board knows.
+		 *
+		 * @param {object} card The card.
+		 * @param {object} target The column.
+		 * @return {boolean} False only when the host said it cannot.
+		 */
+		isMoveAllowed(card, target) {
+			const allowed = this.allowedByCard[this.cardKey(card)];
+			return !allowed || allowed.keys.includes(String(target.key))
+		},
+
+		/**
+		 * Why the host blocked a card's move to a column, when it said.
+		 *
+		 * @param {object} card The card.
+		 * @param {object} target The column.
+		 * @return {string} The reason, '' when the move is allowed or no reason was given.
+		 * @spec openspec/changes/board-move-block-reasons/specs/board-view/spec.md#requirement-a-move-target-can-be-blocked-with-a-reason
+		 */
+		blockReason(card, target) {
+			const allowed = this.allowedByCard[this.cardKey(card)];
+			if (!allowed || this.isMoveAllowed(card, target)) {
+				return ''
+			}
+			return allowed.reasons[String(target.key)] || ''
+		},
+
+		/**
+		 * The note beside a menu target the card cannot move to.
+		 *
+		 * @param {object} card The card.
+		 * @param {object} target The column.
+		 * @return {string} "full" or "not allowed"; '' when a reason is shown instead.
+		 */
+		blockedNote(card, target) {
+			if (this.blockReason(card, target) !== '') {
+				return ''
+			}
+			return this.isMoveAllowed(card, target) && this.isFull(target) ? this.fullLabel : this.notAllowedLabel
+		},
+
+		/**
+		 * Why the dragged card cannot land on a column, shown under its header.
+		 *
+		 * @param {object} column The column.
+		 * @return {string} The host's reason while a drag is on, else ''.
+		 * @spec openspec/changes/board-move-block-reasons/specs/board-view/spec.md#requirement-a-move-target-can-be-blocked-with-a-reason
+		 */
+		dragReason(column) {
+			if (this.dragging === null || !this.dragAllowed || column.key === this.dragging.fromKey) {
+				return ''
+			}
+			const key = String(column.key);
+			return this.dragAllowed.keys.includes(key) ? '' : (this.dragAllowed.reasons[key] || '')
+		},
+
+		/**
+		 * A column's limit.
+		 *
+		 * @param {object} column The column.
+		 * @return {number|null} The limit, or null when it has none.
+		 * @spec openspec/changes/board-column-capacity/specs/board-view/spec.md#requirement-a-column-can-carry-a-capacity
+		 */
+		capacityOf(column) {
+			const capacity = Number(column?.capacity);
+			return Number.isFinite(capacity) && capacity > 0 ? capacity : null
+		},
+
+		/**
+		 * Whether a column holds as many cards as its limit, or more.
+		 *
+		 * @param {object} column The column.
+		 * @return {boolean} True when full; false without a limit.
+		 * @spec openspec/changes/board-column-capacity/specs/board-view/spec.md#requirement-a-column-can-carry-a-capacity
+		 */
+		isFull(column) {
+			const capacity = this.capacityOf(column);
+			return capacity !== null && (this.columnTotals.get(String(column.key)) ?? column.count) >= capacity
+		},
+
+		/**
+		 * "count / capacity" for a column with a limit.
+		 *
+		 * @param {object} column The column.
+		 * @return {string} The text.
+		 */
+		capacityText(column) {
+			return translate('nextcloud-vue', '{count} / {capacity}', {
+				count: this.columnTotals.get(String(column.key)) ?? column.count,
+				capacity: this.capacityOf(column),
+			})
+		},
+
+		/**
+		 * Whether a card may move to a column: the host allows it and the
+		 * column is not full.
+		 *
+		 * @param {object} card The card.
+		 * @param {object} target The column.
+		 * @return {boolean} True when the move may be asked for.
+		 * @spec openspec/changes/board-column-capacity/specs/board-view/spec.md#requirement-a-drop-into-a-full-column-is-refused
+		 */
+		canMoveTo(card, target) {
+			return this.isMoveAllowed(card, target) && !this.isFull(target)
+		},
+
+		/**
+		 * The sentence a drop into a full column is refused with.
+		 *
+		 * @param {object} column The column.
+		 * @return {string} The sentence.
+		 */
+		fullRefusal(column) {
+			return translate('nextcloud-vue', '{column} is full: {count} of {capacity}.', {
+				column: column.label,
+				count: this.columnTotals.get(String(column.key)) ?? column.count,
+				capacity: this.capacityOf(column),
+			})
+		},
+
+		/**
+		 * Whether a column is out of reach for the card being dragged.
+		 *
+		 * @param {object} column The column.
+		 * @return {boolean} True while a drag is on and the card cannot go there.
+		 */
+		isUnreachable(column) {
+			if (this.dragging === null || column.key === this.dragging.fromKey) {
+				return false
+			}
+			return this.isFull(column)
+				|| (this.dragAllowed !== null && !this.dragAllowed.keys.includes(String(column.key)))
+		},
+
 		/**
 		 * A card's due state under `dueRule`.
 		 *
@@ -350,11 +657,35 @@ var script = {
 			const fields = Array.isArray(role) ? role : [role];
 			return fields
 				.filter((field) => typeof field === 'string' && field !== '')
-				.map((field) => this.textOf(readPath(card, field)))
+				.map((field) => this.fieldText(card, field))
 				.filter((value) => value !== '')
 				.join(' \u00b7 ')
 		},
 
+		/**
+		 * One card field as text: through the formatter `cardRoles.formatters`
+		 * names for it, else the value itself.
+		 *
+		 * @param {object} card The card's row.
+		 * @param {string} field The dot-path.
+		 * @return {string} The text.
+		 * @spec openspec/changes/screens-board-reference-columns/specs/board-view/spec.md#requirement-a-card-field-can-show-through-a-formatter
+		 */
+		fieldText(card, field) {
+			const raw = readPath(card, field);
+			const id = this.roles.formatters[field];
+			const fn = id && this.cnFormatters ? this.cnFormatters[id] : null;
+			if (typeof fn === 'function') {
+				try {
+					const out = fn(raw, card, null);
+					return out === null || out === undefined ? '' : String(out).trim()
+				} catch {
+					return this.textOf(raw)
+				}
+			}
+			return this.textOf(raw)
+		},
+
 		/**
 		 * A value as text: a string or number as is, an object by its label.
 		 *
@@ -379,7 +710,7 @@ var script = {
 		 * @return {string} A CnStatusBadge variant.
 		 */
 		pillVariant(card) {
-			const raw = this.textOf(readPath(card, this.roles.pill));
+			const raw = this.fieldText(card, this.roles.pill);
 			const variant = this.roles.pillColors[raw] ?? this.roles.pillColors[raw.toLowerCase()];
 			return isBadgeVariant(variant) ? variant : 'default'
 		},
@@ -406,7 +737,7 @@ var script = {
 			const date = new Date(value);
 			const shown = Number.isNaN(date.getTime())
 				? String(value)
-				: date.toLocaleDateString(undefined, { day: 'numeric', month: 'short' });
+				: date.toLocaleDateString(userLocale(), { day: 'numeric', month: 'short' });
 			return days < 0
 				? translate('nextcloud-vue', 'Overdue {date}', { date: shown })
 				: translate('nextcloud-vue', 'Due {date}', { date: shown })
@@ -419,7 +750,7 @@ var script = {
 		 * @return {string} The name, '' when there is none.
 		 */
 		ownerName(card) {
-			return this.roles.owner === '' ? '' : this.textOf(readPath(card, this.roles.owner))
+			return this.roles.owner === '' ? '' : this.fieldText(card, this.roles.owner)
 		},
 
 		/**
@@ -571,6 +902,7 @@ var script = {
 			const key = this.cardKey(card);
 			this.openMenuKey = this.openMenuKey === key ? null : key;
 			if (this.openMenuKey !== null) {
+				this.loadAllowed(card);
 				this.focusMenuItem(card, 0);
 			}
 		},
@@ -659,6 +991,7 @@ var script = {
 				event.preventDefault();
 				if (!this.isMenuOpen(card)) {
 					this.openMenuKey = this.cardKey(card);
+					this.loadAllowed(card);
 					this.focusMenuItem(card, 0);
 				}
 			}
@@ -754,6 +1087,9 @@ var script = {
 		 * @return {string} The count.
 		 */
 		countLabel(column) {
+			if (this.capacityOf(column) !== null) {
+				return this.capacityText(column)
+			}
 			return this.paged
 				? translate('nextcloud-vue', '{count} on this page', { count: column.count })
 				: String(column.count)
@@ -805,8 +1141,27 @@ var script = {
 		 */
 		onDragStart(card, column, event) {
 			this.dragging = { card, fromKey: column.key };
+			this.dragAllowed = null;
 			// Firefox drops a drag that carries no data.
 			event?.dataTransfer?.setData?.('text/plain', this.cardKey(card));
+			if (typeof this.allowedMoves === 'function') {
+				this.loadAllowed(card).then((allowed) => {
+					if (this.dragging && this.dragging.card === card) {
+						this.dragAllowed = allowed;
+					}
+				});
+			}
+		},
+
+		/**
+		 * The drag ended (dropped anywhere, or cancelled): no column stays
+		 * greyed. A drop on a column has already run by now.
+		 *
+		 * @return {void}
+		 */
+		onDragEnd() {
+			this.dragging = null;
+			this.dragAllowed = null;
 		},
 
 		/**
@@ -821,6 +1176,14 @@ var script = {
 			}
 			const { card, fromKey } = this.dragging;
 			this.dragging = null;
+			this.dragAllowed = null;
+			if (column.key !== fromKey && !this.isMoveAllowed(card, column)) {
+				const name = this.roleText(card, this.roles.title) || this.cardKey(card);
+				this.refusal = this.blockReason(card, column)
+					|| translate('nextcloud-vue', '{name} cannot move to {column}.', { name, column: column.label });
+				this.$emit('refused', { card, message: this.refusal });
+				return
+			}
 			await this.move(card, fromKey, column.key);
 		},
 
@@ -847,6 +1210,13 @@ var script = {
 		async move(card, fromKey, toKey) {
 			this.refusal = '';
 
+			const target = this.board.columns.find((column) => String(column.key) === String(toKey));
+			if (target && String(toKey) !== String(fromKey) && this.isFull(target)) {
+				this.refusal = this.fullRefusal(target);
+				this.$emit('refused', { card, message: this.refusal });
+				return
+			}
+
 			const result = await runBoardDrop({
 				card,
 				fromKey,