@conduction/nextcloud-vue 2.56.0-beta.46 → 2.56.0-beta.47

package/src/utils/featureCatalog.js

@@ -0,0 +1,132 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * featureCatalog: the feature list of the Features and roadmap page, read the
+ * way the board look draws it. A feature carries a status (available, beta,
+ * in progress or planned), an optional category and optional per-language
+ * titles (`title_nl`, `summary_nl`) next to the English ones.
+ *
+ * @module utils/featureCatalog
+ * @spec openspec/changes/screens-roadmap-board-look/specs/features-roadmap-board-look/spec.md
+ */
+
+/** The statuses, in the order the filter and the captions list them. */
+export const FEATURE_STATUSES = Object.freeze(['available', 'beta', 'in_progress', 'planned'])
+
+/** The badge variant of each status. */
+export const FEATURE_STATUS_VARIANTS = Object.freeze({
+	available: 'success',
+	beta: 'warning',
+	in_progress: 'primary',
+	planned: 'purple',
+})
+
+const STATUS_ALIASES = Object.freeze({
+	available: 'available',
+	stable: 'available',
+	done: 'available',
+	released: 'available',
+	shipped: 'available',
+	beta: 'beta',
+	preview: 'beta',
+	in_progress: 'in_progress',
+	'in-progress': 'in_progress',
+	inprogress: 'in_progress',
+	building: 'in_progress',
+	development: 'in_progress',
+	planned: 'planned',
+	roadmap: 'planned',
+	proposed: 'planned',
+	soon: 'planned',
+})
+
+/**
+ * The status key of a feature. A feature without a status is one the app
+ * ships, as every entry of the list was before statuses existed.
+ *
+ * @param {unknown} raw The feature's `status`.
+ * @return {string} One of FEATURE_STATUSES.
+ * @spec openspec/changes/screens-roadmap-board-look/specs/features-roadmap-board-look/spec.md#requirement-a-feature-has-one-of-four-statuses
+ */
+export function featureStatus(raw) {
+	if (typeof raw !== 'string' || raw.trim() === '') {
+		return 'available'
+	}
+	return STATUS_ALIASES[raw.trim().toLowerCase()] || 'available'
+}
+
+/**
+ * A text field of a feature in the reader's language: `title_nl` for a Dutch
+ * reader when the feature has one, else `title`.
+ *
+ * @param {object} feature The feature.
+ * @param {string} field `title` or `summary`.
+ * @param {string} [language] The reader's language tag (`nl`, `nl_NL`, `de-DE`).
+ * @return {string} The text, or ''.
+ * @spec openspec/changes/screens-roadmap-board-look/specs/features-roadmap-board-look/spec.md#requirement-a-feature-reads-in-the-readers-language
+ */
+export function featureText(feature, field, language = '') {
+	if (!feature || typeof feature !== 'object') {
+		return ''
+	}
+	const base = String(language || '').split(/[-_]/)[0].toLowerCase()
+	const own = base ? feature[`${field}_${base}`] : undefined
+	if (typeof own === 'string' && own.trim() !== '') {
+		return own
+	}
+	return typeof feature[field] === 'string' ? feature[field] : ''
+}
+
+/**
+ * How many features carry each status.
+ *
+ * @param {Array<{status: string}>} features Features with a normalised status.
+ * @return {{all: number, available: number, beta: number, in_progress: number, planned: number}} The counts.
+ * @spec openspec/changes/screens-roadmap-board-look/specs/features-roadmap-board-look/spec.md#requirement-the-status-filter-shows-a-count-per-status
+ */
+export function countByStatus(features) {
+	const counts = { all: features.length, available: 0, beta: 0, in_progress: 0, planned: 0 }
+	for (const feature of features) {
+		counts[feature.status] += 1
+	}
+	return counts
+}
+
+/**
+ * The features in the reader's language, grouped by category. Groups follow
+ * the order of `categories`; features without a known category come first,
+ * under no caption. Inside a group the features keep their given order.
+ *
+ * @param {Array<object>} features The raw features.
+ * @param {object} [categories] Category key to caption.
+ * @param {string} [language] The reader's language tag.
+ * @return {Array<{key: string, label: string, features: Array<object>}>} The groups; a group without features is left out.
+ * @spec openspec/changes/screens-roadmap-board-look/specs/features-roadmap-board-look/spec.md#requirement-features-are-grouped-by-category
+ */
+export function groupFeatures(features, categories = {}, language = '') {
+	const captions = categories && typeof categories === 'object' && !Array.isArray(categories) ? categories : {}
+	const groups = [{ key: '', label: '', features: [] }]
+	const byKey = { '': groups[0] }
+	for (const [key, label] of Object.entries(captions)) {
+		const group = { key, label: String(label), features: [] }
+		groups.push(group)
+		byKey[key] = group
+	}
+	for (const raw of Array.isArray(features) ? features : []) {
+		if (!raw || typeof raw !== 'object') {
+			continue
+		}
+		const feature = {
+			slug: String(raw.slug || raw.id || ''),
+			title: featureText(raw, 'title', language) || String(raw.slug || ''),
+			summary: featureText(raw, 'summary', language),
+			status: featureStatus(raw.status),
+			expected: typeof raw.expected === 'string' ? raw.expected : '',
+			docsUrl: typeof raw.docsUrl === 'string' ? raw.docsUrl : '',
+		}
+		const group = byKey[typeof raw.category === 'string' ? raw.category : ''] || byKey['']
+		group.features.push(feature)
+	}
+	return groups.filter((group) => group.features.length > 0)
+}

package/src/utils/fillTemplate.js

@@ -5,6 +5,7 @@ import { boardDateLocale, formatBoardDate, formatBoardWeekday, formatRelativeDat
 import { parseDateValue } from './dateVariant.js'
 import { formatMoney } from './formatMetric.js'
 import { readPath } from './readPath.js'
+import { userDisplayName } from './userDisplayName.js'
 
 const TOKEN = /\{([^{}\s|]+)(?:\|([a-z]+)(?::([^{}\s]+))?)?\}/g
 
@@ -32,11 +33,37 @@ export function formatBoardDateTime(value, now = new Date()) {
 	return `${day}, ${time}`
 }
 
+/**
+ * A date with the month written out: "7 oktober", or "6 oktober 2026"
+ * outside the current year or when `withYear` asks for it.
+ *
+ * @param {unknown} value A Date, a timestamp or an ISO string.
+ * @param {Date} now The reference moment.
+ * @param {boolean} [withYear] Always write the year.
+ * @return {string} The text, or '' when the value is not a date.
+ * @spec openspec/changes/screens-header-meta-tokens/specs/detail-page-board-look/spec.md#requirement-the-header-meta-line-formats-users-long-dates-and-enum-labels
+ */
+export function formatLongDate(value, now = new Date(), withYear = false) {
+	const date = parseDateValue(value)
+	if (date === null) {
+		return ''
+	}
+	const options = { day: 'numeric', month: 'long' }
+	if (withYear || date.getFullYear() !== now.getFullYear()) {
+		options.year = 'numeric'
+	}
+	try {
+		return new Intl.DateTimeFormat(boardDateLocale(), options).format(date)
+	} catch {
+		return new Intl.DateTimeFormat(undefined, options).format(date)
+	}
+}
+
 /**
  * Format one token value.
  *
  * @param {unknown} value The raw value.
- * @param {string} format `date`, `datetime`, `weekday`, `time`, `relative`, `relativetime`, `days` or '' (as is).
+ * @param {string} format `date`, `datetime`, `weekday`, `longdate`, `time`, `user`, `currency`, `relative`, `relativetime`, `days` or '' (as is).
  * @param {Date} now The reference moment.
  * @param {string} [arg] The format's argument (`currency:EUR`, or a row path holding the code).
  * @param {object|null} [object] The row, for a currency read from a field.
@@ -56,6 +83,12 @@ function formatValue(value, format, now, arg = '', object = null, config = null)
 	if (format === 'weekday') {
 		return formatBoardWeekday(value, now, { today: arg === 'today' })
 	}
+	if (format === 'longdate') {
+		return formatLongDate(value, now, arg === 'year')
+	}
+	if (format === 'user') {
+		return userDisplayName(value)
+	}
 	if (format === 'time') {
 		const date = parseDateValue(value)
 		return date === null ? '' : formatTimeOfDay(date)
@@ -88,7 +121,10 @@ function formatValue(value, format, now, arg = '', object = null, config = null)
  * Every `{path}` token is a dot path into the object; `{path|date}` and
  * `{path|datetime}` format it as the boards write dates, `{path|weekday}` adds
  * the short weekday ("wo 7 okt"; `{path|weekday:today}` reads "Vandaag, wo 7 okt"
- * for today), `{path|time}` is the time of day ("08:45"), `{path|currency}`,
+ * for today), `{path|longdate}` writes the month out ("7 oktober";
+ * `{path|longdate:year}` always adds the year), `{path|time}` is the time
+ * of day ("08:45"), `{path|user}` is a user id's display name (looked up
+ * once, '' until it arrives), `{path|currency}`,
  * `{path|currency:EUR}` and `{path|currency:field}` write an amount in a
  * currency (a code, or the row field that holds it; without either, or when
  * the row field is empty, the app's reporting currency), `{path|relative}` and
@@ -147,3 +183,38 @@ export function firstFilled(templates, object, translate = (key) => key, now = n
 	}
 	return ''
 }
+
+/**
+ * Fill a template such as `"{identifier} · {requester}"` field by field
+ * (a table column's `secondary` line, a detail page's meta line).
+ *
+ * A field without a value takes its separator with it: the text between two
+ * fields belongs to the field after it, so an empty requester leaves
+ * "2026-0002", not "2026-0002 ·", and an empty first field does not leave a
+ * leading separator either. Text before the first field and after the last
+ * one is kept as written. A template whose fields all have values fills
+ * exactly as before.
+ *
+ * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-empty-field-takes-its-separator-with-it
+ * @param {string} template The template, with `{field}` placeholders.
+ * @param {(key: string) => string} valueOf The text of a field ('' when empty).
+ * @return {string} The filled template.
+ */
+export function joinTemplateParts(template, valueOf) {
+	// split() with a capture group alternates literal, field, literal, …
+	const parts = template.split(/\{([^}]+)\}/)
+	const lead = parts[0]
+	const tail = parts[parts.length - 1]
+	let body = ''
+	for (let i = 1; i < parts.length; i += 2) {
+		const value = valueOf(parts[i].trim())
+		if (value === '') {
+			continue
+		}
+		// The literal before this field: the separator, unless nothing has
+		// been written yet (then there is nothing to separate from).
+		const separator = i === 1 ? '' : parts[i - 1]
+		body += (body === '' ? '' : separator) + value
+	}
+	return lead + body + tail
+}

package/src/utils/headerMeta.js

@@ -1,27 +1,77 @@
 // SPDX-FileCopyrightText: 2026 Conduction B.V.
 // SPDX-License-Identifier: EUPL-1.2
 
-import { fillTemplate } from './fillTemplate.js'
+import { fillTemplate, joinTemplateParts } from './fillTemplate.js'
+import { readPath } from './readPath.js'
+
+/**
+ * The text of one plain `{path}` token: an enum field reads as its label
+ * (`x-enum-labels` / `enumLabels` on the schema property, through the
+ * translate function), anything else as the stored value.
+ *
+ * @param {object} object The record.
+ * @param {string} path The dotted path.
+ * @param {object|null} schema The record's schema.
+ * @param {(text: string) => string} translate The translate function.
+ * @return {string} The text, or '' when the field is empty.
+ */
+function plainTokenText(object, path, schema, translate) {
+	const value = readPath(object, path)
+	if (value === null || value === undefined || value === '' || typeof value === 'object') {
+		return ''
+	}
+	const property = schema && schema.properties && !path.includes('.') ? schema.properties[path] : null
+	const labels = property && (property.enumLabels || property['x-enum-labels'])
+	if (labels && typeof labels === 'object' && typeof labels[String(value)] === 'string') {
+		return translate(labels[String(value)])
+	}
+	return String(value)
+}
 
 /**
  * Fill a header meta template such as `"via {channel}"` or
- * `"received {createdAt|relative}"` from a record.
+ * `"{amount|currency:EUR} · {cashier|user} · {at|longdate} {at|time}"` from
+ * a record.
  *
  * Every `{path}` token (a dotted path into the record) is replaced by its
- * value; `{path|date}`, `{path|datetime}`, `{path|relative}`,
- * `{path|relativetime}` and `{path|days}` format a date as a record-list
- * row does (the shared `fillTemplate`). A token with no value drops the
- * WHOLE line, because "via " is worse than nothing. A template without
- * tokens is returned as written.
+ * value, an enum field by its label. `{path|format}` tokens format as a
+ * record-list row does (the shared `fillTemplate`: date, datetime, weekday,
+ * longdate, time, user, currency, relative, relativetime, days). A token
+ * without a value drops itself and the separator before it, so a missing
+ * cashier leaves "€ 96,41 · 7 oktober"; a line whose every token is empty
+ * is '' ("via " is worse than nothing). A template without tokens is
+ * returned as written.
  *
  * @param {string} template The template, already translated.
  * @param {object|null} object The record.
- * @param {Date} [now] The reference moment for dates.
- * @return {string} The line, or '' when it cannot be filled.
- * @spec openspec/changes/screens-detail-page-parity/specs/detail-page-board-look/spec.md#requirement-the-detail-header-is-two-rows-on-the-ground
+ * @param {Date|{now?: Date, schema?: object, translate?: Function, config?: object}} [options] The reference moment, or options: `schema` for enum labels, `translate` for those labels, `config` for the reporting currency.
+ * @return {string} The line, or '' when nothing can be filled.
+ * @spec openspec/changes/screens-header-meta-tokens/specs/detail-page-board-look/spec.md#requirement-the-header-meta-line-formats-users-long-dates-and-enum-labels
  */
-export function resolveHeaderMeta(template, object, now = new Date()) {
-	return fillTemplate(template, object, now)
+export function resolveHeaderMeta(template, object, options = {}) {
+	const settings = options instanceof Date ? { now: options } : (options || {})
+	const now = settings.now || new Date()
+	const translate = typeof settings.translate === 'function' ? settings.translate : (text) => text
+	if (typeof template !== 'string' || template.trim() === '') {
+		return ''
+	}
+	if (!/\{[^}]+\}/.test(template)) {
+		return template.trim()
+	}
+	if (!object || typeof object !== 'object') {
+		return ''
+	}
+	let filled = 0
+	const line = joinTemplateParts(template, (token) => {
+		const text = token.includes('|')
+			? fillTemplate(`{${token}}`, object, now, settings.config ? { config: settings.config } : null)
+			: plainTokenText(object, token, settings.schema || null, translate)
+		if (text !== '') {
+			filled += 1
+		}
+		return text
+	})
+	return filled === 0 ? '' : line.trim()
 }
 
 /**

package/src/utils/roadmapIssues.js

@@ -0,0 +1,82 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * roadmapIssues: the forge issues a roadmap shows, fetched through
+ * OpenRegister's `github-issue-proxy` with the curated label filter
+ * (`enhancement,feature`, per openregister design D23), most-reacted first.
+ *
+ * @module utils/roadmapIssues
+ * @spec openspec/changes/screens-roadmap-board-look/specs/features-roadmap-board-look/spec.md#requirement-the-next-card-lists-the-most-requested-issues
+ */
+
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+
+/**
+ * Fetch the roadmap issues of a repository.
+ *
+ * `degraded` names why there are none: `pat_not_configured` (OpenRegister has
+ * no GitHub token), `rate_limited` (HTTP 429), `error` (anything else), or
+ * null when the fetch worked.
+ *
+ * @param {string} repo `<owner>/<repo>` on the forge.
+ * @return {Promise<{items: Array<object>, degraded: (string|null)}>} The issues, most-reacted first.
+ * @spec openspec/changes/screens-roadmap-board-look/specs/features-roadmap-board-look/spec.md#requirement-the-next-card-lists-the-most-requested-issues
+ */
+export async function fetchRoadmapIssues(repo) {
+	try {
+		const response = await axios.get(generateUrl('/apps/openregister/api/github/issues'), {
+			params: { repo, labels: 'enhancement,feature' },
+		})
+		const data = response.data || {}
+		if (data.hint === 'github_pat_not_configured') {
+			return { items: [], degraded: 'pat_not_configured' }
+		}
+		return { items: sortByReactions(Array.isArray(data.items) ? data.items : []), degraded: null }
+	} catch (e) {
+		const status = e?.response?.status
+		const code = e?.response?.data?.error
+		if (status === 429 || code === 'github_rate_limited' || code === 'rate_limited') {
+			return { items: [], degraded: 'rate_limited' }
+		}
+		return { items: [], degraded: 'error' }
+	}
+}
+
+/**
+ * Issues ordered by their reaction count, most first.
+ *
+ * @param {Array<object>} items The issues.
+ * @return {Array<object>} A sorted copy.
+ * @spec openspec/changes/screens-roadmap-board-look/specs/features-roadmap-board-look/spec.md#requirement-the-next-card-lists-the-most-requested-issues
+ */
+export function sortByReactions(items) {
+	return [...items].sort((a, b) => (b.reactions?.total_count || 0) - (a.reactions?.total_count || 0))
+}
+
+/**
+ * The roadmap status of an issue from its labels: the first label that
+ * `labelStatuses` maps (case-insensitive) decides, else ''.
+ *
+ * @param {object} issue The issue, with `labels: [{name}]` or `labels: ['name']`.
+ * @param {object} labelStatuses Label name to status (`in_progress`, `planned`).
+ * @return {string} The status, or '' for no badge.
+ * @spec openspec/changes/screens-roadmap-board-look/specs/features-roadmap-board-look/spec.md#requirement-the-next-card-lists-the-most-requested-issues
+ */
+export function issueStatus(issue, labelStatuses) {
+	if (!labelStatuses || typeof labelStatuses !== 'object') {
+		return ''
+	}
+	const map = {}
+	for (const [label, status] of Object.entries(labelStatuses)) {
+		map[label.toLowerCase()] = status
+	}
+	for (const label of Array.isArray(issue?.labels) ? issue.labels : []) {
+		const name = String(typeof label === 'string' ? label : label?.name || '').toLowerCase()
+		if (map[name]) {
+			return map[name]
+		}
+	}
+	return ''
+}

package/src/utils/userDisplayName.js

@@ -0,0 +1,54 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * userDisplayName: a user id's display name for synchronous text (a template
+ * token), looked up once through `resolveNextcloudUser` and kept in a
+ * reactive cache, so a computed that read it renders again when the name
+ * arrives.
+ *
+ * @module utils/userDisplayName
+ * @spec openspec/changes/screens-header-meta-tokens/specs/detail-page-board-look/spec.md#requirement-the-header-meta-line-formats-users-long-dates-and-enum-labels
+ */
+
+import { reactive } from 'vue'
+import { resolveNextcloudUser } from './userAutocomplete.js'
+
+const names = reactive({})
+
+/**
+ * The display name of a user id: the cached name, or '' while it is being
+ * looked up (the first call starts the lookup). A user that cannot be
+ * resolved reads as its id.
+ *
+ * @param {unknown} uid The user id.
+ * @return {string} The display name, or '' while loading.
+ * @spec openspec/changes/screens-header-meta-tokens/specs/detail-page-board-look/spec.md#requirement-the-header-meta-line-formats-users-long-dates-and-enum-labels
+ */
+export function userDisplayName(uid) {
+	if (uid === null || uid === undefined || uid === '' || typeof uid === 'object') {
+		return ''
+	}
+	const id = String(uid)
+	if (typeof names[id] === 'string') {
+		return names[id]
+	}
+	if (names[id] === undefined) {
+		names[id] = null
+		resolveNextcloudUser(id)
+			.then((option) => { names[id] = option && option.label ? String(option.label) : id })
+			.catch(() => { names[id] = id })
+	}
+	return ''
+}
+
+/**
+ * Forget every cached name (tests).
+ *
+ * @return {void}
+ */
+export function clearUserDisplayNames() {
+	for (const key of Object.keys(names)) {
+		delete names[key]
+	}
+}