@conduction/nextcloud-vue 2.78.0 → 2.80.0

package/src/components/CnBannerWidget/CnBannerWidget.vue

@@ -64,6 +64,7 @@
 <script>
 import { translate as t } from '@nextcloud/l10n'
 import { NcNoteCard } from '@nextcloud/vue'
+import { normalizeLook } from '../../composables/useLook.js'
 import { followLinkClick, resolveHref } from '../../utils/linkNavigation.js'
 import { safeHref } from '../../utils/safeHref.js'
 import { nextUid } from '../../utils/uid.js'
@@ -78,6 +79,12 @@ const LAYOUTS = ['banner', 'attention']
 /** An attention card offers a primary and a secondary action, no more. */
 const MAX_ACTIONS = 2
 
+/**
+ * Under the board look the card takes what the boards draw: DqMijnWerk's
+ * "Vandaag eerst" has three secondary actions and the primary one.
+ */
+const MAX_ACTIONS_BOARD = 4
+
 /**
  * CnBannerWidget — declarative notice banner for dashboards and v2 pages
  * (`banner` widget type, Wave 1 of nextcloud-vue#91).
@@ -148,6 +155,8 @@ export default {
 		 * label that is not a key renders as written.
 		 */
 		cnTranslate: { default: () => (key) => key },
+		/** The app's look, provided by CnAppRoot or CnPageRenderer (`nextcloud` or `board`). */
+		cnLook: { default: 'nextcloud' },
 	},
 
 	props: {
@@ -232,7 +241,8 @@ export default {
 		},
 
 		/**
-		 * Attention card: at most two actions. Each is `{ label, route?,
+		 * Attention card: its actions, two at most (four under the board look,
+		 * or `maxActions`). Each is `{ label, route?,
 		 * href?, primary?, id? }`: `route` is a route name or location,
 		 * `href` an URL. An action with neither renders a button that emits
 		 * `action`. The first action is the primary one unless one sets
@@ -245,6 +255,17 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * Attention card: how many actions it shows at most. Null takes the
+		 * default: two, four under the board look.
+		 *
+		 * @spec openspec/changes/screens-banner-actions-parity/specs/banner-actions/spec.md#requirement-the-board-attention-card-shows-the-boards-actions
+		 */
+		maxActions: {
+			type: Number,
+			default: null,
+		},
+
 		/**
 		 * Stored content blob (CnDashboardPage registry branch) carrying the
 		 * same keys as the flat props: `{ variant, text, visibleWhen, route,
@@ -403,12 +424,27 @@ export default {
 		},
 
 		/**
-		 * The attention card's actions: the first two that have a label, each
+		 * The attention card's actions: the first `actionCap` that have a label, each
 		 * with its href and whether it is the primary one.
 		 *
 		 * @return {Array<{key: string, id: (string|undefined), label: string, href: string, target: (object|null), primary: boolean, index: number}>}
 		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-attention-card
 		 */
+		/**
+		 * How many actions the attention card shows: `maxActions` (prop, then
+		 * content), else four under the board look and two without it.
+		 *
+		 * @return {number} The cap.
+		 * @spec openspec/changes/screens-banner-actions-parity/specs/banner-actions/spec.md#requirement-the-board-attention-card-shows-the-boards-actions
+		 */
+		actionCap() {
+			const explicit = this.maxActions ?? (this.content ? this.content.maxActions : undefined)
+			if (Number.isInteger(explicit) && explicit > 0) {
+				return explicit
+			}
+			return normalizeLook(this.cnLook) === 'board' ? MAX_ACTIONS_BOARD : MAX_ACTIONS
+		},
+
 		resolvedActions() {
 			const raw = this.actions || (this.content && this.content.actions) || []
 			if (!Array.isArray(raw)) {
@@ -416,7 +452,7 @@ export default {
 			}
 			const usable = raw
 				.filter((action) => action && typeof action === 'object' && typeof action.label === 'string' && action.label !== '')
-				.slice(0, MAX_ACTIONS)
+				.slice(0, this.actionCap)
 			const declaredPrimary = usable.findIndex((action) => action.primary === true)
 			const primaryIndex = declaredPrimary === -1 ? 0 : declaredPrimary
 			return usable.map((action, index) => {

package/src/components/CnCellRenderer/CnCellRenderer.vue

@@ -118,6 +118,19 @@
 			<span v-else class="cn-cell-renderer__dash">—</span>
 		</template>
 
+		<!-- Built-in "age" widget: how long something has waited ("4 uur",
+		     "3 dagen"), coloured by widgetProps.variantWhen rules on the days
+		     the cell shows. The full date is the tooltip. -->
+		<template v-else-if="widget === 'age'">
+			<time
+				v-if="dateTimestamp"
+				class="cn-cell-renderer__age"
+				:class="ageVariant ? 'cn-cell-renderer__age--' + ageVariant : null"
+				:datetime="dateTimestamp.toISOString()"
+				:title="absoluteDateLabel">{{ ageLabel }}</time>
+			<span v-else class="cn-cell-renderer__dash">—</span>
+		</template>
+
 		<!-- Built-in "date" widget: a date whose colour follows
 		     widgetProps.variantWhen, rules on the number of days until it
 		     (0 = today, negative = overdue). -->
@@ -131,6 +144,30 @@
 			<span v-else class="cn-cell-renderer__dash">—</span>
 		</template>
 
+		<!-- Built-in "progress" widget: a bar with the percentage beside it,
+		     toned by widgetProps.thresholds, and an optional age badge
+		     ("Out of date 12 days") from widgetProps.badge. -->
+		<template v-else-if="widget === 'progress'">
+			<span v-if="progressPercent === null" class="cn-cell-renderer__dash">—</span>
+			<span v-else class="cn-cell-renderer__progress">
+				<span class="cn-cell-renderer__progress-line">
+					<span class="cn-cell-renderer__progress-bar" aria-hidden="true">
+						<span
+							class="cn-cell-renderer__progress-fill"
+							:class="'cn-cell-renderer__progress-fill--' + progressTone"
+							:style="{ width: progressPercent + '%' }" />
+					</span>
+					<strong
+						class="cn-cell-renderer__progress-value"
+						:class="'cn-cell-renderer__progress-value--' + progressTone">{{ progressPercent }}%</strong>
+				</span>
+				<span
+					v-if="progressBadge"
+					class="cn-cell-renderer__progress-badge"
+					:class="'cn-cell-renderer__progress-badge--' + progressBadge.tone">{{ progressBadge.label }}</span>
+			</span>
+		</template>
+
 		<!-- Explicit column formatter — overrides the type-aware paths below -->
 		<template v-else-if="hasFormatter">
 			<span :title="rawTitle">{{ formattedValue }}</span>
@@ -156,7 +193,12 @@
 
 		<!-- Date / date-time: dynamic NcDateTime (relative time, absolute on hover) -->
 		<template v-else-if="isDate">
-			<NcDateTime v-if="dateTimestamp" :timestamp="dateTimestamp" />
+			<time
+				v-if="dateTimestamp && isBoardLook"
+				class="cn-cell-renderer__date"
+				:datetime="dateTimestamp.toISOString()"
+				:title="absoluteDateLabel">{{ boardDateLabel }}</time>
+			<NcDateTime v-else-if="dateTimestamp" :timestamp="dateTimestamp" />
 			<span v-else class="cn-cell-renderer__dash">—</span>
 		</template>
 
@@ -210,9 +252,12 @@ import { NcAvatar, NcDateTime } from '@nextcloud/vue'
 import CheckBold from 'vue-material-design-icons/CheckBold.vue'
 import CnFkResolveCell from '../CnFkResolveCell/CnFkResolveCell.vue'
 import CnGroupNameCell from './CnGroupNameCell.vue'
+import { normalizeLook } from '../../composables/useLook.js'
+import { ageInDays, formatAge, formatBoardDate, resolveAgeVariant } from '../../utils/boardDate.js'
 import { parseDateValue, resolveDateVariant } from '../../utils/dateVariant.js'
 import { safeCurrencyCode } from '../../utils/formatMetric.js'
 import { objectFieldValue } from '../../utils/objectName.js'
+import { readPath } from '../../utils/readPath.js'
 import { safeHref } from '../../utils/safeHref.js'
 import { formatValue, isGroupProp } from '../../utils/schema.js'
 import { CnStatusBadge } from '../CnStatusBadge/index.js'
@@ -272,6 +317,12 @@ export default {
 		 * Defaults to identity so standalone use is unaffected.
 		 */
 		cnTranslate: { default: () => (key) => key },
+		/**
+		 * The look the app is drawn in, provided by CnAppRoot (or a page with
+		 * `config.look`). Under `board` a date cell reads the board's short
+		 * form ("5 okt"). Defaults to `nextcloud`, which renders as before.
+		 */
+		cnLook: { default: 'nextcloud' },
 	},
 
 	props: {
@@ -326,6 +377,10 @@ export default {
 		 * a date whose colour follows `widgetProps.variantWhen`, rules on the
 		 * number of days until the date (`[{ op: "lt", value: 0, variant:
 		 * "error" }, { op: "lte", value: 5, variant: "warning" }]`).
+		 * The built-in id `"age"` renders how long the row has waited since
+		 * the date ("4 hours", "3 days"), coloured by `widgetProps.variantWhen`
+		 * rules on the days it shows (`[{ op: "gte", value: 3, variant:
+		 * "error" }]`).
 		 * The built-in id `"group"` shows a Nextcloud group id (or a list of
 		 * them) as the group's display name; a column whose property is
 		 * marked `referenceType: "nextcloud-group"` gets it without asking.
@@ -528,6 +583,146 @@ export default {
 			return variant === 'default' ? '' : variant
 		},
 
+		/**
+		 * Whether the app takes the board look (`cnLook` is `board`).
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/screens-cell-date-parity/specs/cell-date-age/spec.md#requirement-a-board-date-cell-reads-day-and-short-month-in-the-user-language
+		 */
+		isBoardLook() {
+			return normalizeLook(this.cnLook) === 'board'
+		},
+
+		/**
+		 * The board's short date ("5 okt", "14 feb 2024" outside this year).
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/screens-cell-date-parity/specs/cell-date-age/spec.md#requirement-a-board-date-cell-reads-day-and-short-month-in-the-user-language
+		 */
+		boardDateLabel() {
+			return formatBoardDate(this.value)
+		},
+
+		/**
+		 * The full date for a tooltip: day, month and year in the user's
+		 * locale, with the time for a date-time value.
+		 *
+		 * @return {string|undefined}
+		 * @spec openspec/changes/screens-cell-date-parity/specs/cell-date-age/spec.md#requirement-an-age-cell-says-how-long-something-has-waited
+		 */
+		absoluteDateLabel() {
+			const date = parseDateValue(this.value)
+			if (date === null) {
+				return undefined
+			}
+			const withTime = this.property?.format === 'date-time' || this.widget === 'age'
+			const options = { day: 'numeric', month: 'long', year: 'numeric', ...(withTime ? { hour: '2-digit', minute: '2-digit' } : {}) }
+			try {
+				return new Intl.DateTimeFormat(getCanonicalLocale() || undefined, options).format(date)
+			} catch {
+				return new Intl.DateTimeFormat(undefined, options).format(date)
+			}
+		},
+
+		/**
+		 * `age` widget: how long the row has waited ("4 uur", "3 dagen").
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/screens-cell-date-parity/specs/cell-date-age/spec.md#requirement-an-age-cell-says-how-long-something-has-waited
+		 */
+		ageLabel() {
+			return formatAge(this.value)
+		},
+
+		/**
+		 * `progress` widget: the value as a whole percentage of
+		 * `widgetProps.max` (default 100), clamped to 0..100. An empty value
+		 * falls back to the first `widgetProps.fallbackFields` row field that
+		 * holds a number. Null when nothing holds one.
+		 *
+		 * @return {number|null}
+		 * @spec openspec/changes/abstract-progress-cell/specs/progress-cell/spec.md#requirement-a-progress-cell-draws-a-toned-bar-with-its-percentage
+		 */
+		progressPercent() {
+			const props = this.widgetProps || {}
+			const fallbacks = Array.isArray(props.fallbackFields) ? props.fallbackFields : []
+			const candidates = [this.value, ...fallbacks.map((field) => readPath(this.row || {}, field))]
+			const raw = candidates.find((v) => v !== null && v !== undefined && v !== '' && !Number.isNaN(Number(v)))
+			if (raw === undefined) {
+				return null
+			}
+			const max = Number(props.max) > 0 ? Number(props.max) : 100
+			return Math.max(0, Math.min(100, Math.round((Number(raw) / max) * 100)))
+		},
+
+		/**
+		 * `progress` widget: the tone. `widgetProps.thresholds`
+		 * `{ good: 60, warn: 30 }` (the defaults): at or above `good` is
+		 * success, at or above `warn` is warning, below is error. With
+		 * `widgetProps.lowerIsBetter` the scale turns around.
+		 *
+		 * @return {'success'|'warning'|'error'}
+		 * @spec openspec/changes/abstract-progress-cell/specs/progress-cell/spec.md#requirement-a-progress-cell-draws-a-toned-bar-with-its-percentage
+		 */
+		progressTone() {
+			const props = this.widgetProps || {}
+			const thresholds = props.thresholds || {}
+			const good = Number.isFinite(Number(thresholds.good)) ? Number(thresholds.good) : 60
+			const warn = Number.isFinite(Number(thresholds.warn)) ? Number(thresholds.warn) : 30
+			const value = props.lowerIsBetter === true ? 100 - this.progressPercent : this.progressPercent
+			if (value >= good) {
+				return 'success'
+			}
+			return value >= warn ? 'warning' : 'error'
+		},
+
+		/**
+		 * `progress` widget: the age badge, or null. `widgetProps.badge`
+		 * `{ label, dateField, afterDays, when?, tone? }`: shown when the row's
+		 * `dateField` (default `@self.updated`) lies `afterDays` or more days
+		 * back and every `when` field equals its value. `label` is translated
+		 * and takes `{days}`.
+		 *
+		 * @return {{label: string, tone: string}|null}
+		 * @spec openspec/changes/abstract-progress-cell/specs/progress-cell/spec.md#requirement-a-progress-cell-can-carry-an-age-badge
+		 */
+		progressBadge() {
+			const badge = this.widgetProps && this.widgetProps.badge
+			if (!badge || typeof badge !== 'object' || !badge.label) {
+				return null
+			}
+			const row = this.row || {}
+			const when = badge.when && typeof badge.when === 'object' ? badge.when : {}
+			for (const [field, expected] of Object.entries(when)) {
+				const actual = readPath(row, field)
+				if (actual !== undefined && actual !== null && actual !== '' && String(actual) !== String(expected)) {
+					return null
+				}
+			}
+			const days = ageInDays(readPath(row, badge.dateField || '@self.updated'))
+			const after = Number(badge.afterDays)
+			if (days === null || !Number.isFinite(after) || days < after) {
+				return null
+			}
+			const label = this.cnTranslate(badge.label)
+			return {
+				label: String(label).replace(/\{days\}/g, String(days)),
+				tone: ['error', 'warning', 'success'].includes(badge.tone) ? badge.tone : 'error',
+			}
+		},
+
+		/**
+		 * `age` widget: the variant of the first `widgetProps.variantWhen`
+		 * rule the shown days match, or '' for none.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/screens-cell-date-parity/specs/cell-date-age/spec.md#requirement-an-age-cell-turns-red-past-its-threshold
+		 */
+		ageVariant() {
+			const variant = resolveAgeVariant(this.value, this.widgetProps && this.widgetProps.variantWhen)
+			return variant === 'default' ? '' : variant
+		},
+
 		/**
 		 * `date` widget: the date written out in the user's locale.
 		 *
@@ -544,6 +739,11 @@ export default {
 			// 08:30"); `widgetProps.timeOnly: true` shows just the time
 			// ("08:30"), for a timetable row. Default: the date alone.
 			const props = this.widgetProps || {}
+			// The board look writes a plain date in its short form ("5 okt");
+			// a time of day keeps the full form below.
+			if (this.isBoardLook && props.timeOnly !== true && props.showTime !== true) {
+				return formatBoardDate(date)
+			}
 			const options = props.timeOnly === true
 				? { hour: '2-digit', minute: '2-digit' }
 				: { day: 'numeric', month: 'short', year: 'numeric', ...(props.showTime === true ? { hour: '2-digit', minute: '2-digit' } : {}) }
@@ -1127,10 +1327,114 @@ export default {
    does not rest on colour alone. */
 .cn-cell-renderer__date--success,
 .cn-cell-renderer__date--warning,
-.cn-cell-renderer__date--error {
+.cn-cell-renderer__date--error,
+.cn-cell-renderer__age--success,
+.cn-cell-renderer__age--warning,
+.cn-cell-renderer__age--error {
 	font-weight: 600;
 }
 
+.cn-cell-renderer__age {
+	white-space: nowrap;
+}
+
+/* The progress cell (abstract-progress-cell): a 56 x 8 bar, the percentage
+   8px beside it in the bar's tone, and an optional age badge after them, as
+   PqLeads' Winkans column. The value is bold, so the tone is not the only signal. */
+.cn-cell-renderer__progress {
+	display: inline-flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 4px 8px;
+}
+
+.cn-cell-renderer__progress-line {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	white-space: nowrap;
+}
+
+.cn-cell-renderer__progress-bar {
+	display: inline-block;
+	width: 56px;
+	height: 8px;
+	border-radius: 4px;
+	background: var(--color-background-dark);
+	overflow: hidden;
+}
+
+.cn-cell-renderer__progress-fill {
+	display: block;
+	height: 100%;
+}
+
+.cn-cell-renderer__progress-fill--success {
+	background: var(--color-element-success, var(--color-success));
+}
+
+.cn-cell-renderer__progress-fill--warning {
+	background: var(--color-element-warning, var(--color-warning));
+}
+
+.cn-cell-renderer__progress-fill--error {
+	background: var(--color-element-error, var(--color-error));
+}
+
+.cn-cell-renderer__progress-value {
+	font-size: 14px;
+	font-weight: 700;
+}
+
+.cn-cell-renderer__progress-value--success {
+	color: var(--color-text-success, var(--color-success-text));
+}
+
+.cn-cell-renderer__progress-value--warning {
+	color: var(--color-text-warning, var(--color-warning-text));
+}
+
+.cn-cell-renderer__progress-value--error {
+	color: var(--color-text-error, var(--color-error-text));
+}
+
+.cn-cell-renderer__progress-badge {
+	display: inline-block;
+	padding: 3px 10px;
+	border-radius: 12px;
+	font-size: 13px;
+	font-weight: 600;
+	white-space: nowrap;
+}
+
+.cn-cell-renderer__progress-badge--error {
+	color: var(--color-text-error, var(--color-error-text));
+	background: var(--color-error-hover, var(--color-background-dark));
+	background: color-mix(in srgb, var(--color-error) 12%, transparent);
+}
+
+.cn-cell-renderer__progress-badge--warning {
+	color: var(--color-text-warning, var(--color-warning-text));
+	background: color-mix(in srgb, var(--color-warning) 14%, transparent);
+}
+
+.cn-cell-renderer__progress-badge--success {
+	color: var(--color-text-success, var(--color-success-text));
+	background: color-mix(in srgb, var(--color-success) 12%, transparent);
+}
+
+.cn-cell-renderer__age--success {
+	color: var(--color-text-success, var(--color-success-text));
+}
+
+.cn-cell-renderer__age--warning {
+	color: var(--color-text-warning, var(--color-warning-text));
+}
+
+.cn-cell-renderer__age--error {
+	color: var(--color-text-error, var(--color-error-text));
+}
+
 .cn-cell-renderer__date--success {
 	color: var(--color-text-success, var(--color-success-text));
 }