@conduction/nextcloud-vue 2.83.0 → 2.84.0

package/dist/esm/components/CnReportsPage/CnReportsPage.vue3.js.map

@@ -1 +1 @@
-{"version":3,"file":"CnReportsPage.vue3.js","sources":["../../../../src/components/CnReportsPage/CnReportsPage.vue?vue&type=template&id=7629715a&lang.js"],"sourcesContent":["<!--\n  CnReportsPage — Manifest-driven Reports surface.\n\n  v2 manifest page primitive for `type: \"reports\"`. One page holding every\n  report an app offers, as cards, instead of a Reports SUBMENU with one entry\n  per report.\n\n  WHY THIS IS A PAGE AND NOT A MENU BRANCH. A submenu grows one entry per\n  report and never shrinks. shillinq reached 96 report types; as menu children\n  that is a scroll, not a navigation. Cards carry what a menu item cannot — a\n  description, a category, a count — and a category filter turns 96 into a\n  short list. shillinq proved the shape in `ReportingComplianceOverview`; this\n  is that shape with the app-specific parts taken out, so every app declares it\n  rather than copying 600 lines of Vue.\n\n  Declare it as:\n\n    { \"id\": \"Reports\", \"route\": \"/reports\", \"type\": \"reports\",\n      \"config\": {\n        \"categories\": { \"operational\": \"Operational\" },\n        \"cards\": [\n          { \"id\": \"Throughput\", \"label\": \"Processing time\",\n            \"description\": \"How long cases take, by type.\",\n            \"icon\": \"ChartLine\", \"category\": \"operational\",\n            \"route\": \"Doorlooptijd\" }\n        ]\n      } }\n\n  A card names a ROUTE by name, never a path: a path is editable per app and a\n  card pointing at a stale one is a dead end that still looks like a report.\n\n  Spec: hydra openspec/architecture/adr-112-reports-are-one-page.md (ConductionNL/hydra#640).\n-->\n<template>\n\t<div class=\"cn-reports-page\" :class=\"{ 'cn-reports-page--board': isBoard }\">\n\t\t<div class=\"cn-reports-page__header\">\n\t\t\t<h2 class=\"cn-reports-page__title\">\n\t\t\t\t{{ resolvedTitle }}\n\t\t\t</h2>\n\t\t\t<p v-if=\"resolvedDescription\" class=\"cn-reports-page__description\">\n\t\t\t\t{{ resolvedDescription }}\n\t\t\t</p>\n\t\t</div>\n\n\t\t<!-- The board look (board DcRapportages): one section per category,\n\t\t     headed by its label, instead of the category filter; each card\n\t\t     draws its icon in a tile. -->\n\t\t<template v-if=\"isBoard\">\n\t\t\t<p v-if=\"resolvedCards.length === 0\"\n\t\t\t\tclass=\"cn-reports-page__empty\"\n\t\t\t\tdata-testid=\"cn-reports-empty\">\n\t\t\t\t{{ resolvedEmptyLabel }}\n\t\t\t</p>\n\t\t\t<section v-for=\"section in boardSections\"\n\t\t\t\t:key=\"section.key\"\n\t\t\t\tclass=\"cn-reports-page__section\"\n\t\t\t\tdata-testid=\"cn-reports-section\">\n\t\t\t\t<h3 v-if=\"section.label\" class=\"cn-reports-page__section-title\">\n\t\t\t\t\t{{ section.label }}\n\t\t\t\t</h3>\n\t\t\t\t<ul class=\"cn-reports-page__grid\" data-testid=\"cn-reports-grid\">\n\t\t\t\t\t<li v-for=\"card in section.cards\" :key=\"card.id\" class=\"cn-reports-page__cell\">\n\t\t\t\t\t\t<a class=\"cn-reports-page__card\"\n\t\t\t\t\t\t\tdata-testid=\"cn-report-card\"\n\t\t\t\t\t\t\t:href=\"hrefFor(card)\"\n\t\t\t\t\t\t\t@click=\"open(card, $event)\">\n\t\t\t\t\t\t\t<span v-if=\"card.icon\" class=\"cn-reports-page__card-icon\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t<CnIcon :name=\"card.icon\" :size=\"22\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<span class=\"cn-reports-page__card-text\">\n\t\t\t\t\t\t\t\t<span class=\"cn-reports-page__card-title\">{{ card.label }}</span>\n\t\t\t\t\t\t\t\t<span v-if=\"card.description\" class=\"cn-reports-page__card-description\">\n\t\t\t\t\t\t\t\t\t{{ card.description }}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</section>\n\t\t</template>\n\n\t\t<div v-if=\"!isBoard && categoryOptions.length > 1\" class=\"cn-reports-page__filter\">\n\t\t\t<label class=\"cn-reports-page__filter-label\" :for=\"filterId\">\n\t\t\t\t{{ resolvedCategoryLabel }}\n\t\t\t</label>\n\t\t\t<select :id=\"filterId\"\n\t\t\t\tv-model=\"activeCategory\"\n\t\t\t\tclass=\"cn-reports-page__filter-select\"\n\t\t\t\tdata-testid=\"cn-reports-category\">\n\t\t\t\t<option v-for=\"option in categoryOptions\"\n\t\t\t\t\t:key=\"option.value\"\n\t\t\t\t\t:value=\"option.value\">\n\t\t\t\t\t{{ option.label }}\n\t\t\t\t</option>\n\t\t\t</select>\n\t\t</div>\n\n\t\t<p v-if=\"!isBoard && visibleCards.length === 0\"\n\t\t\tclass=\"cn-reports-page__empty\"\n\t\t\tdata-testid=\"cn-reports-empty\">\n\t\t\t{{ resolvedEmptyLabel }}\n\t\t</p>\n\n\t\t<ul v-else-if=\"!isBoard\" class=\"cn-reports-page__grid\" data-testid=\"cn-reports-grid\">\n\t\t\t<li v-for=\"card in visibleCards\" :key=\"card.id\" class=\"cn-reports-page__cell\">\n\t\t\t\t<a class=\"cn-reports-page__card\"\n\t\t\t\t\tdata-testid=\"cn-report-card\"\n\t\t\t\t\t:href=\"hrefFor(card)\"\n\t\t\t\t\t@click=\"open(card, $event)\">\n\t\t\t\t\t<span class=\"cn-reports-page__card-title\">{{ card.label }}</span>\n\t\t\t\t\t<span v-if=\"card.description\" class=\"cn-reports-page__card-description\">\n\t\t\t\t\t\t{{ card.description }}\n\t\t\t\t\t</span>\n\t\t\t\t\t<span v-if=\"categoryName(card)\" class=\"cn-reports-page__card-category\">\n\t\t\t\t\t\t{{ categoryName(card) }}\n\t\t\t\t\t</span>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t</ul>\n\n\t\t<!-- `widgets` + `layout`: a grid of dashboard widgets under the cards,\n\t\t     such as a highlighted report with stat tiles and a chart. -->\n\t\t<div v-if=\"sectionWidgets.length > 0\" class=\"cn-reports-page__widgets\" data-testid=\"cn-reports-widgets\">\n\t\t\t<CnDashboardPage\n\t\t\t\t:widgets=\"sectionWidgets\"\n\t\t\t\t:layout=\"sectionLayout\"\n\t\t\t\t:showHeader=\"false\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\n/**\n * The Reports page: one surface listing an app's reports as cards.\n */\nimport { translate as t } from '@nextcloud/l10n'\nimport { defineAsyncComponent } from 'vue'\nimport CnIcon from '../CnIcon/CnIcon.vue'\nimport { useLook } from '../../composables/useLook.js'\nimport { followLinkClick } from '../../utils/linkNavigation.js'\n\nexport default {\n\tname: 'CnReportsPage',\n\n\tcomponents: {\n\t\t// Loaded only for a page that declares widgets: a cards-only reports\n\t\t// page does not pull the dashboard in.\n\t\tCnDashboardPage: defineAsyncComponent(() => import('../CnDashboardPage/CnDashboardPage.vue').then((m) => m.default)),\n\t\tCnIcon,\n\t},\n\n\tinject: {\n\t\t/**\n\t\t * The consuming app's translate function, provided by CnAppRoot.\n\t\t * Defaults to identity so the page still renders outside one.\n\t\t */\n\t\tcnTranslate: { default: () => (key) => key },\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The manifest page.\n\t\t *\n\t\t * ⚠️ CnPageRenderer does NOT pass this. `resolvedProps()` returns\n\t\t * `{ ...topLevel, ...normalizedConfig, ...params }` and has no `page`\n\t\t * key, so a dispatched `type: \"reports\"` page arrived here with the\n\t\t * default `{}` — `config` resolved to `{}`, `cards` to `[]`, and every\n\t\t * reports page in the fleet rendered its empty state while its manifest\n\t\t * declared cards. Kept because a host that renders this component\n\t\t * directly can still hand it the whole page; the flattened props below\n\t\t * are what the renderer actually supplies, and they win.\n\t\t */\n\t\tpage: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\n\t\t/**\n\t\t * The report cards, as CnPageRenderer flattens them out of `config`.\n\t\t *\n\t\t * @type {Array<object>|null}\n\t\t */\n\t\tcards: {\n\t\t\ttype: Array,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Category key/label pairs, flattened out of `config`.\n\t\t *\n\t\t * @type {object|null}\n\t\t */\n\t\tcategories: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The lead paragraph, flattened out of `config` or lifted from the page.\n\t\t *\n\t\t * @type {string|null}\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The heading, lifted from the page by the renderer.\n\t\t *\n\t\t * @type {string|null}\n\t\t */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Label for the \"all categories\" filter option.\n\t\t *\n\t\t * @type {string|null}\n\t\t */\n\t\tallCategoriesLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Label for the category filter control.\n\t\t *\n\t\t * @type {string|null}\n\t\t */\n\t\tcategoryLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Text shown when the active filter admits no card.\n\t\t *\n\t\t * @type {string|null}\n\t\t */\n\t\temptyLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Dashboard widgets drawn under the report cards (`config.widgets`),\n\t\t * placed by `layout`, as on a `type: \"dashboard\"` page.\n\t\t *\n\t\t * @type {Array<object>|null}\n\t\t */\n\t\twidgets: {\n\t\t\ttype: Array,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Grid placement of `widgets` (`config.layout`): `{ id, widgetId,\n\t\t * gridX, gridY, gridWidth, gridHeight }` per widget. Without it each\n\t\t * widget takes a full row in the order declared.\n\t\t *\n\t\t * @type {Array<object>|null}\n\t\t */\n\t\tlayout: {\n\t\t\ttype: Array,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The look to draw in: `board` or `nextcloud`. Absent: the look\n\t\t * CnAppRoot provides (`cnLook`), else `nextcloud`.\n\t\t *\n\t\t * @type {string|null}\n\t\t */\n\t\tlook: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Translate function. Falls back to injected `cnTranslate`.\n\t\t *\n\t\t * @type {((key: string) => string)|null}\n\t\t */\n\t\ttranslate: {\n\t\t\ttype: Function,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tsetup(props) {\n\t\tconst { isBoard } = useLook(props)\n\t\treturn { isBoard }\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tactiveCategory: 'all',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * The translate function actually in force.\n\t\t *\n\t\t * @return {(key: string) => string} The translator.\n\t\t */\n\t\teffectiveTranslate() {\n\t\t\treturn this.translate ?? this.cnTranslate\n\t\t},\n\n\t\t/**\n\t\t * The declared config, always an object, from whichever direction it\n\t\t * arrived.\n\t\t *\n\t\t * TWO CALLERS, TWO SHAPES. CnPageRenderer flattens `page.config.*` into\n\t\t * individual props and passes NO `page`, so under the renderer the keys\n\t\t * arrive as props. A host that mounts this component itself hands it the\n\t\t * whole `page`. Reading only `page.config` is what made every dispatched\n\t\t * reports page render empty.\n\t\t *\n\t\t * Props win where both are present: they are the nearer declaration, and\n\t\t * the renderer has already resolved route sentinels in them.\n\t\t *\n\t\t * @return {object} The config.\n\t\t */\n\t\tconfig() {\n\t\t\tconst fromPage = (this.page && this.page.config) || {}\n\t\t\tconst fromProps = {}\n\t\t\tfor (const key of [\n\t\t\t\t'cards',\n\t\t\t\t'categories',\n\t\t\t\t'description',\n\t\t\t\t'title',\n\t\t\t\t'allCategoriesLabel',\n\t\t\t\t'categoryLabel',\n\t\t\t\t'emptyLabel',\n\t\t\t\t'widgets',\n\t\t\t\t'layout',\n\t\t\t]) {\n\t\t\t\tif (this[key] !== null && this[key] !== undefined) {\n\t\t\t\t\tfromProps[key] = this[key]\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn { ...fromPage, ...fromProps }\n\t\t},\n\n\t\t/**\n\t\t * The widgets under the cards.\n\t\t *\n\t\t * @return {Array<object>} The declared widgets, or none.\n\t\t * @spec openspec/changes/screens-reports-page-widgets/specs/reports-page/spec.md\n\t\t */\n\t\tsectionWidgets() {\n\t\t\tconst widgets = this.config.widgets\n\t\t\treturn Array.isArray(widgets) ? widgets.filter((w) => w && typeof w === 'object' && w.id) : []\n\t\t},\n\n\t\t/**\n\t\t * Where the widgets go: the declared `layout`, else one full row per\n\t\t * widget in the order declared.\n\t\t *\n\t\t * @return {Array<object>} The placements.\n\t\t * @spec openspec/changes/screens-reports-page-widgets/specs/reports-page/spec.md\n\t\t */\n\t\tsectionLayout() {\n\t\t\tif (Array.isArray(this.config.layout) && this.config.layout.length > 0) {\n\t\t\t\treturn this.config.layout\n\t\t\t}\n\t\t\tlet y = 0\n\t\t\treturn this.sectionWidgets.map((widget, index) => {\n\t\t\t\tconst placement = { id: String(index + 1), widgetId: widget.id, gridX: 0, gridY: y, gridWidth: 12, gridHeight: 4 }\n\t\t\t\ty += 4\n\t\t\t\treturn placement\n\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * The heading.\n\t\t *\n\t\t * @return {string} The title.\n\t\t */\n\t\tresolvedTitle() {\n\t\t\tconst declared = this.config.title || (this.page && this.page.title)\n\n\t\t\treturn declared ? this.tr(declared) : t('nextcloud-vue', 'Reports')\n\t\t},\n\n\t\t/**\n\t\t * The optional lead paragraph.\n\t\t *\n\t\t * @return {string} The description.\n\t\t */\n\t\tresolvedDescription() {\n\t\t\treturn this.tr(this.config.description || '')\n\t\t},\n\n\t\t/**\n\t\t * The declared cards, ignoring any that name no route.\n\t\t *\n\t\t * A card with no route is a card that cannot be opened. Rendering it\n\t\t * would put a report on the page that silently does nothing, which is\n\t\t * worse than leaving it off.\n\t\t *\n\t\t * @return {Array<object>} The usable cards.\n\t\t */\n\t\tresolvedCards() {\n\t\t\tconst declared = this.config.cards\n\t\t\tif (!Array.isArray(declared)) {\n\t\t\t\treturn []\n\t\t\t}\n\n\t\t\treturn declared\n\t\t\t\t.filter((card) => card && card.route && card.label)\n\t\t\t\t.map((card) => ({\n\t\t\t\t\t...card,\n\t\t\t\t\tlabel: this.tr(card.label),\n\t\t\t\t\tdescription: this.tr(card.description || ''),\n\t\t\t\t}))\n\t\t},\n\n\t\t/**\n\t\t * Category value/label pairs, offered only for categories that hold a\n\t\t * card. A filter listing empty categories teaches the reader that the\n\t\t * app has reports it does not have.\n\t\t *\n\t\t * @return {Array<object>} The options.\n\t\t */\n\t\tcategoryOptions() {\n\t\t\tconst declared = this.config.categories || {}\n\t\t\tconst used = new Set(this.resolvedCards.map((card) => card.category).filter(Boolean))\n\t\t\tconst options = [{ value: 'all', label: this.allLabel }]\n\n\t\t\tObject.keys(declared)\n\t\t\t\t.filter((key) => used.has(key))\n\t\t\t\t.forEach((key) => options.push({ value: key, label: this.tr(declared[key]) }))\n\n\t\t\treturn options\n\t\t},\n\n\t\t/**\n\t\t * The board look's sections: the cards without a category first, under\n\t\t * no heading, then one section per declared category that holds a\n\t\t * card, in the declared order, headed by its label.\n\t\t *\n\t\t * @spec openspec/changes/screens-reports-page-board-look/specs/reports-page/spec.md#requirement-the-reports-page-takes-the-board-look\n\t\t * @return {Array<{key: string, label: string, cards: Array<object>}>} The sections.\n\t\t */\n\t\tboardSections() {\n\t\t\tconst declared = this.config.categories || {}\n\t\t\tconst sections = []\n\t\t\tconst loose = this.resolvedCards.filter((card) => !card.category || !Object.hasOwn(declared, card.category))\n\t\t\tif (loose.length > 0) {\n\t\t\t\tsections.push({ key: '__none', label: '', cards: loose })\n\t\t\t}\n\t\t\tfor (const key of Object.keys(declared)) {\n\t\t\t\tconst cards = this.resolvedCards.filter((card) => card.category === key)\n\t\t\t\tif (cards.length > 0) {\n\t\t\t\t\tsections.push({ key, label: this.tr(declared[key]), cards })\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn sections\n\t\t},\n\n\t\t/**\n\t\t * The cards the active filter admits.\n\t\t *\n\t\t * @return {Array<object>} The visible cards.\n\t\t */\n\t\tvisibleCards() {\n\t\t\tif (this.activeCategory === 'all') {\n\t\t\t\treturn this.resolvedCards\n\t\t\t}\n\n\t\t\treturn this.resolvedCards.filter((card) => card.category === this.activeCategory)\n\t\t},\n\n\t\t/**\n\t\t * A stable id for the filter control's label association.\n\t\t *\n\t\t * @return {string} The id.\n\t\t */\n\t\tfilterId() {\n\t\t\treturn `cn-reports-category-${(this.page && this.page.id) || 'page'}`\n\t\t},\n\n\t\t/**\n\t\t * @return {string} The \"all categories\" option label.\n\t\t */\n\t\tallLabel() {\n\t\t\treturn this.config.allCategoriesLabel\n\t\t\t\t? this.tr(this.config.allCategoriesLabel)\n\t\t\t\t: t('nextcloud-vue', 'All categories')\n\t\t},\n\n\t\t/**\n\t\t * @return {string} The filter's label.\n\t\t */\n\t\tresolvedCategoryLabel() {\n\t\t\treturn this.config.categoryLabel\n\t\t\t\t? this.tr(this.config.categoryLabel)\n\t\t\t\t: t('nextcloud-vue', 'Category')\n\t\t},\n\n\t\t/**\n\t\t * @return {string} The empty-state text.\n\t\t */\n\t\tresolvedEmptyLabel() {\n\t\t\treturn this.config.emptyLabel\n\t\t\t\t? this.tr(this.config.emptyLabel)\n\t\t\t\t: t('nextcloud-vue', 'No reports in this category.')\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Translate a manifest-declared string through the app's own\n\t\t * translate function.\n\t\t *\n\t\t * The manifest is data the renderer walks, not source the extractor\n\t\t * reads, so every string it carries has to be handed to the app's\n\t\t * translator explicitly. A card rendered straight from the manifest\n\t\t * shows its source language whatever locale the reader is in.\n\t\t *\n\t\t * @param {string} value The declared string.\n\t\t * @return {string} The translated string, or the input unchanged.\n\t\t */\n\t\ttr(value) {\n\t\t\tif (typeof value !== 'string' || value === '') {\n\t\t\t\treturn value\n\t\t\t}\n\n\t\t\treturn this.effectiveTranslate(value)\n\t\t},\n\n\t\t/**\n\t\t * The human label for a card's category, if it has one.\n\t\t *\n\t\t * @param {object} card The card.\n\t\t * @return {string} The label, or an empty string.\n\t\t */\n\t\tcategoryName(card) {\n\t\t\tconst declared = this.config.categories || {}\n\n\t\t\treturn this.tr((card.category && declared[card.category]) || '')\n\t\t},\n\n\t\t/**\n\t\t * A real href for the card, so it is a link a reader can middle-click\n\t\t * or open in a new tab rather than a div that only answers to a click.\n\t\t *\n\t\t * @param {object} card The card.\n\t\t * @return {string} The href.\n\t\t */\n\t\threfFor(card) {\n\t\t\tif (!this.$router) {\n\t\t\t\treturn '#'\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\treturn this.$router.resolve({ name: card.route }).href\n\t\t\t} catch {\n\t\t\t\treturn '#'\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Navigate by route NAME on a plain click; a modified or middle click\n\t\t * is left to the browser so it can open the card's href elsewhere.\n\t\t *\n\t\t * @param {object} card The card.\n\t\t * @param {MouseEvent} event The click.\n\t\t * @return {void}\n\t\t */\n\t\topen(card, event) {\n\t\t\tfollowLinkClick(event, { name: card.route }, this.$router)\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-reports-page {\n\tpadding: 16px;\n}\n\n/* Clear the Nextcloud navigation toggle button (44px wide, absolutely\n   positioned at the left edge of .app-content) plus 12px breathing room, as\n   CnPageHeader does. Only the header shifts; the body keeps the full width. */\n.cn-reports-page__header {\n\tpadding-inline-start: 56px;\n}\n\n.cn-reports-page__title {\n\tmargin: 0 0 4px;\n}\n\n.cn-reports-page__description {\n\tmargin: 0 0 16px;\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.cn-reports-page__filter {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tmargin-bottom: 16px;\n}\n\n.cn-reports-page__filter-select {\n\tmin-width: 220px;\n}\n\n.cn-reports-page__grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n\tgap: 12px;\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\n\n.cn-reports-page__card {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n\theight: 100%;\n\tpadding: 12px;\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--border-radius-large);\n\tcolor: inherit;\n\ttext-decoration: none;\n}\n\n.cn-reports-page__card:hover,\n.cn-reports-page__card:focus {\n\tbackground-color: var(--color-background-hover);\n}\n\n.cn-reports-page__card-title {\n\tfont-weight: bold;\n}\n\n.cn-reports-page__card-description,\n.cn-reports-page__card-category {\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 0.9em;\n}\n\n.cn-reports-page__empty {\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.cn-reports-page__widgets {\n\tmargin-top: 20px;\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_toDisplayString","_Fragment","_renderList","_openBlock","_createVNode"],"mappings":"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"}
+{"version":3,"file":"CnReportsPage.vue3.js","sources":["../../../../src/components/CnReportsPage/CnReportsPage.vue?vue&type=template&id=327b60f8&lang.js"],"sourcesContent":["<!--\n  CnReportsPage — Manifest-driven Reports surface.\n\n  v2 manifest page primitive for `type: \"reports\"`. One page holding every\n  report an app offers, as cards, instead of a Reports SUBMENU with one entry\n  per report.\n\n  WHY THIS IS A PAGE AND NOT A MENU BRANCH. A submenu grows one entry per\n  report and never shrinks. shillinq reached 96 report types; as menu children\n  that is a scroll, not a navigation. Cards carry what a menu item cannot — a\n  description, a category, a count — and a category filter turns 96 into a\n  short list. shillinq proved the shape in `ReportingComplianceOverview`; this\n  is that shape with the app-specific parts taken out, so every app declares it\n  rather than copying 600 lines of Vue.\n\n  Declare it as:\n\n    { \"id\": \"Reports\", \"route\": \"/reports\", \"type\": \"reports\",\n      \"config\": {\n        \"categories\": { \"operational\": \"Operational\" },\n        \"cards\": [\n          { \"id\": \"Throughput\", \"label\": \"Processing time\",\n            \"description\": \"How long cases take, by type.\",\n            \"icon\": \"ChartLine\", \"category\": \"operational\",\n            \"route\": \"Doorlooptijd\" }\n        ]\n      } }\n\n  A card names a ROUTE by name, never a path: a path is editable per app and a\n  card pointing at a stale one is a dead end that still looks like a report.\n\n  Spec: hydra openspec/architecture/adr-112-reports-are-one-page.md (ConductionNL/hydra#640).\n-->\n<template>\n\t<div class=\"cn-reports-page\" :class=\"{ 'cn-reports-page--board': isBoard }\">\n\t\t<div class=\"cn-reports-page__header\">\n\t\t\t<!-- The header buttons (`headerButtons`) beside the title, as the\n\t\t\t     board's \"Downloaden\" and the buildiq square (board DcRapportages).\n\t\t\t     Without them, and outside the board look, the title stands alone\n\t\t\t     as before. -->\n\t\t\t<div v-if=\"headerButtonsRow.length > 0\" class=\"cn-reports-page__heading-row\">\n\t\t\t\t<h2 class=\"cn-reports-page__title\">\n\t\t\t\t\t{{ resolvedTitle }}\n\t\t\t\t</h2>\n\t\t\t\t<div class=\"cn-reports-page__header-buttons\" data-testid=\"cn-reports-header-buttons\">\n\t\t\t\t\t<template v-for=\"button in headerButtonsRow\" :key=\"button.key\">\n\t\t\t\t\t\t<CnBuildiqEditButton v-if=\"button.action === '__buildiq'\" />\n\t\t\t\t\t\t<NcButton\n\t\t\t\t\t\t\tv-else\n\t\t\t\t\t\t\t:variant=\"button.variant\"\n\t\t\t\t\t\t\t:data-testid=\"`cn-reports-header-button-${button.key}`\"\n\t\t\t\t\t\t\t@click=\"onHeaderButton(button)\">\n\t\t\t\t\t\t\t<template v-if=\"button.icon\" #icon>\n\t\t\t\t\t\t\t\t<CnIcon :name=\"button.icon\" :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t{{ button.label }}\n\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t</template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<h2 v-else class=\"cn-reports-page__title\">\n\t\t\t\t{{ resolvedTitle }}\n\t\t\t</h2>\n\t\t\t<p v-if=\"resolvedDescription\" class=\"cn-reports-page__description\">\n\t\t\t\t{{ resolvedDescription }}\n\t\t\t</p>\n\t\t</div>\n\n\t\t<!-- The board look (board DcRapportages): one section per category,\n\t\t     headed by its label, instead of the category filter; each card\n\t\t     draws its icon in a tile. -->\n\t\t<template v-if=\"isBoard\">\n\t\t\t<p v-if=\"resolvedCards.length === 0\"\n\t\t\t\tclass=\"cn-reports-page__empty\"\n\t\t\t\tdata-testid=\"cn-reports-empty\">\n\t\t\t\t{{ resolvedEmptyLabel }}\n\t\t\t</p>\n\t\t\t<section v-for=\"section in boardSections\"\n\t\t\t\t:key=\"section.key\"\n\t\t\t\tclass=\"cn-reports-page__section\"\n\t\t\t\tdata-testid=\"cn-reports-section\">\n\t\t\t\t<h3 v-if=\"section.label\" class=\"cn-reports-page__section-title\">\n\t\t\t\t\t{{ section.label }}\n\t\t\t\t</h3>\n\t\t\t\t<ul class=\"cn-reports-page__grid\" data-testid=\"cn-reports-grid\">\n\t\t\t\t\t<li v-for=\"card in section.cards\" :key=\"card.id\" class=\"cn-reports-page__cell\">\n\t\t\t\t\t\t<a class=\"cn-reports-page__card\"\n\t\t\t\t\t\t\tdata-testid=\"cn-report-card\"\n\t\t\t\t\t\t\t:href=\"hrefFor(card)\"\n\t\t\t\t\t\t\t@click=\"open(card, $event)\">\n\t\t\t\t\t\t\t<span v-if=\"card.icon\" class=\"cn-reports-page__card-icon\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t<CnIcon :name=\"card.icon\" :size=\"22\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<span class=\"cn-reports-page__card-text\">\n\t\t\t\t\t\t\t\t<span class=\"cn-reports-page__card-title\">{{ card.label }}</span>\n\t\t\t\t\t\t\t\t<span v-if=\"card.description\" class=\"cn-reports-page__card-description\">\n\t\t\t\t\t\t\t\t\t{{ card.description }}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</section>\n\t\t</template>\n\n\t\t<div v-if=\"!isBoard && categoryOptions.length > 1\" class=\"cn-reports-page__filter\">\n\t\t\t<label class=\"cn-reports-page__filter-label\" :for=\"filterId\">\n\t\t\t\t{{ resolvedCategoryLabel }}\n\t\t\t</label>\n\t\t\t<select :id=\"filterId\"\n\t\t\t\tv-model=\"activeCategory\"\n\t\t\t\tclass=\"cn-reports-page__filter-select\"\n\t\t\t\tdata-testid=\"cn-reports-category\">\n\t\t\t\t<option v-for=\"option in categoryOptions\"\n\t\t\t\t\t:key=\"option.value\"\n\t\t\t\t\t:value=\"option.value\">\n\t\t\t\t\t{{ option.label }}\n\t\t\t\t</option>\n\t\t\t</select>\n\t\t</div>\n\n\t\t<p v-if=\"!isBoard && visibleCards.length === 0\"\n\t\t\tclass=\"cn-reports-page__empty\"\n\t\t\tdata-testid=\"cn-reports-empty\">\n\t\t\t{{ resolvedEmptyLabel }}\n\t\t</p>\n\n\t\t<ul v-else-if=\"!isBoard\" class=\"cn-reports-page__grid\" data-testid=\"cn-reports-grid\">\n\t\t\t<li v-for=\"card in visibleCards\" :key=\"card.id\" class=\"cn-reports-page__cell\">\n\t\t\t\t<a class=\"cn-reports-page__card\"\n\t\t\t\t\tdata-testid=\"cn-report-card\"\n\t\t\t\t\t:href=\"hrefFor(card)\"\n\t\t\t\t\t@click=\"open(card, $event)\">\n\t\t\t\t\t<span class=\"cn-reports-page__card-title\">{{ card.label }}</span>\n\t\t\t\t\t<span v-if=\"card.description\" class=\"cn-reports-page__card-description\">\n\t\t\t\t\t\t{{ card.description }}\n\t\t\t\t\t</span>\n\t\t\t\t\t<span v-if=\"categoryName(card)\" class=\"cn-reports-page__card-category\">\n\t\t\t\t\t\t{{ categoryName(card) }}\n\t\t\t\t\t</span>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t</ul>\n\n\t\t<!-- `widgets` + `layout`: a grid of dashboard widgets under the cards,\n\t\t     such as a highlighted report with stat tiles and a chart. -->\n\t\t<div v-if=\"sectionWidgets.length > 0\" class=\"cn-reports-page__widgets\" data-testid=\"cn-reports-widgets\">\n\t\t\t<CnDashboardPage\n\t\t\t\t:widgets=\"sectionWidgets\"\n\t\t\t\t:layout=\"sectionLayout\"\n\t\t\t\t:showHeader=\"false\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\n/**\n * The Reports page: one surface listing an app's reports as cards.\n */\nimport { translate as t } from '@nextcloud/l10n'\nimport { NcButton } from '@nextcloud/vue'\nimport { defineAsyncComponent } from 'vue'\nimport CnBuildiqEditButton from '../CnBuildiqEditButton/CnBuildiqEditButton.vue'\nimport CnIcon from '../CnIcon/CnIcon.vue'\nimport { useLook } from '../../composables/useLook.js'\nimport { resolveRegisteredHandler } from '../../utils/actionsDispatcher.js'\nimport { followLinkClick } from '../../utils/linkNavigation.js'\n\nexport default {\n\tname: 'CnReportsPage',\n\n\tcomponents: {\n\t\t// Loaded only for a page that declares widgets: a cards-only reports\n\t\t// page does not pull the dashboard in.\n\t\tCnDashboardPage: defineAsyncComponent(() => import('../CnDashboardPage/CnDashboardPage.vue').then((m) => m.default)),\n\t\tCnBuildiqEditButton,\n\t\tCnIcon,\n\t\tNcButton,\n\t},\n\n\tinject: {\n\t\t/**\n\t\t * The v2 registry and the legacy customComponents map, provided by\n\t\t * CnAppRoot: a header action's named handler resolves against them.\n\t\t */\n\t\tcnRegistry: { default: () => ({}) },\n\t\tcnCustomComponents: { default: () => ({}) },\n\t\t/**\n\t\t * The consuming app's translate function, provided by CnAppRoot.\n\t\t * Defaults to identity so the page still renders outside one.\n\t\t */\n\t\tcnTranslate: { default: () => (key) => key },\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The manifest page.\n\t\t *\n\t\t * ⚠️ CnPageRenderer does NOT pass this. `resolvedProps()` returns\n\t\t * `{ ...topLevel, ...normalizedConfig, ...params }` and has no `page`\n\t\t * key, so a dispatched `type: \"reports\"` page arrived here with the\n\t\t * default `{}` — `config` resolved to `{}`, `cards` to `[]`, and every\n\t\t * reports page in the fleet rendered its empty state while its manifest\n\t\t * declared cards. Kept because a host that renders this component\n\t\t * directly can still hand it the whole page; the flattened props below\n\t\t * are what the renderer actually supplies, and they win.\n\t\t */\n\t\tpage: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({}),\n\t\t},\n\n\t\t/**\n\t\t * The report cards, as CnPageRenderer flattens them out of `config`.\n\t\t *\n\t\t * @type {Array<object>|null}\n\t\t */\n\t\tcards: {\n\t\t\ttype: Array,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Category key/label pairs, flattened out of `config`.\n\t\t *\n\t\t * @type {object|null}\n\t\t */\n\t\tcategories: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The lead paragraph, flattened out of `config` or lifted from the page.\n\t\t *\n\t\t * @type {string|null}\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The heading, lifted from the page by the renderer.\n\t\t *\n\t\t * @type {string|null}\n\t\t */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Label for the \"all categories\" filter option.\n\t\t *\n\t\t * @type {string|null}\n\t\t */\n\t\tallCategoriesLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Label for the category filter control.\n\t\t *\n\t\t * @type {string|null}\n\t\t */\n\t\tcategoryLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Text shown when the active filter admits no card.\n\t\t *\n\t\t * @type {string|null}\n\t\t */\n\t\temptyLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Dashboard widgets drawn under the report cards (`config.widgets`),\n\t\t * placed by `layout`, as on a `type: \"dashboard\"` page.\n\t\t *\n\t\t * @type {Array<object>|null}\n\t\t */\n\t\twidgets: {\n\t\t\ttype: Array,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Grid placement of `widgets` (`config.layout`): `{ id, widgetId,\n\t\t * gridX, gridY, gridWidth, gridHeight }` per widget. Without it each\n\t\t * widget takes a full row in the order declared.\n\t\t *\n\t\t * @type {Array<object>|null}\n\t\t */\n\t\tlayout: {\n\t\t\ttype: Array,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Buttons beside the title (`config.headerButtons`), as the board's\n\t\t * \"Downloaden\". Each is `{ label, action, variant?, icon?, id? }`:\n\t\t * `action` is the id of a `headerActions` entry, which says what the\n\t\t * click does. Under the board look the buildiq square sits between the\n\t\t * secondary buttons and the primary one. Empty (the default) changes\n\t\t * nothing.\n\t\t *\n\t\t * @spec openspec/changes/screens-reports-header-buttons/specs/reports-page/spec.md#requirement-a-reports-page-carries-header-buttons\n\t\t * @type {Array<{label: string, action: string, variant?: ('primary'|'secondary'), icon?: string, id?: string}>|null}\n\t\t */\n\t\theaderButtons: {\n\t\t\ttype: Array,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The page's header actions (`config.headerActions`), in the shape of\n\t\t * an index page's: a header button names one by id. `handler` is a\n\t\t * function, `navigate` (with `route`, and `params`), `emit`, `none`,\n\t\t * or a registry name; `type: \"navigate\"` with a `target` URL opens\n\t\t * that URL in a new tab. Every click also emits `header-action`\n\t\t * `{ action, id }`, except for `handler: \"none\"`.\n\t\t *\n\t\t * @spec openspec/changes/screens-reports-header-buttons/specs/reports-page/spec.md#requirement-a-reports-page-carries-header-buttons\n\t\t * @type {Array<object>|null}\n\t\t */\n\t\theaderActions: {\n\t\t\ttype: Array,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The look to draw in: `board` or `nextcloud`. Absent: the look\n\t\t * CnAppRoot provides (`cnLook`), else `nextcloud`.\n\t\t *\n\t\t * @type {string|null}\n\t\t */\n\t\tlook: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Translate function. Falls back to injected `cnTranslate`.\n\t\t *\n\t\t * @type {((key: string) => string)|null}\n\t\t */\n\t\ttranslate: {\n\t\t\ttype: Function,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: ['header-action'],\n\n\tsetup(props) {\n\t\tconst { isBoard } = useLook(props)\n\t\treturn { isBoard }\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tactiveCategory: 'all',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * The translate function actually in force.\n\t\t *\n\t\t * @return {(key: string) => string} The translator.\n\t\t */\n\t\teffectiveTranslate() {\n\t\t\treturn this.translate ?? this.cnTranslate\n\t\t},\n\n\t\t/**\n\t\t * The declared config, always an object, from whichever direction it\n\t\t * arrived.\n\t\t *\n\t\t * TWO CALLERS, TWO SHAPES. CnPageRenderer flattens `page.config.*` into\n\t\t * individual props and passes NO `page`, so under the renderer the keys\n\t\t * arrive as props. A host that mounts this component itself hands it the\n\t\t * whole `page`. Reading only `page.config` is what made every dispatched\n\t\t * reports page render empty.\n\t\t *\n\t\t * Props win where both are present: they are the nearer declaration, and\n\t\t * the renderer has already resolved route sentinels in them.\n\t\t *\n\t\t * @return {object} The config.\n\t\t */\n\t\tconfig() {\n\t\t\tconst fromPage = (this.page && this.page.config) || {}\n\t\t\tconst fromProps = {}\n\t\t\tfor (const key of [\n\t\t\t\t'cards',\n\t\t\t\t'categories',\n\t\t\t\t'description',\n\t\t\t\t'title',\n\t\t\t\t'allCategoriesLabel',\n\t\t\t\t'categoryLabel',\n\t\t\t\t'emptyLabel',\n\t\t\t\t'widgets',\n\t\t\t\t'layout',\n\t\t\t\t'headerButtons',\n\t\t\t\t'headerActions',\n\t\t\t]) {\n\t\t\t\tif (this[key] !== null && this[key] !== undefined) {\n\t\t\t\t\tfromProps[key] = this[key]\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn { ...fromPage, ...fromProps }\n\t\t},\n\n\t\t/**\n\t\t * The widgets under the cards.\n\t\t *\n\t\t * @return {Array<object>} The declared widgets, or none.\n\t\t * @spec openspec/changes/screens-reports-page-widgets/specs/reports-page/spec.md\n\t\t */\n\t\tsectionWidgets() {\n\t\t\tconst widgets = this.config.widgets\n\t\t\treturn Array.isArray(widgets) ? widgets.filter((w) => w && typeof w === 'object' && w.id) : []\n\t\t},\n\n\t\t/**\n\t\t * Where the widgets go: the declared `layout`, else one full row per\n\t\t * widget in the order declared.\n\t\t *\n\t\t * @return {Array<object>} The placements.\n\t\t * @spec openspec/changes/screens-reports-page-widgets/specs/reports-page/spec.md\n\t\t */\n\t\tsectionLayout() {\n\t\t\tif (Array.isArray(this.config.layout) && this.config.layout.length > 0) {\n\t\t\t\treturn this.config.layout\n\t\t\t}\n\t\t\tlet y = 0\n\t\t\treturn this.sectionWidgets.map((widget, index) => {\n\t\t\t\tconst placement = { id: String(index + 1), widgetId: widget.id, gridX: 0, gridY: y, gridWidth: 12, gridHeight: 4 }\n\t\t\t\ty += 4\n\t\t\t\treturn placement\n\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * The declared header buttons that have a label and an action,\n\t\t * translated, each with a stable key and a variant.\n\t\t *\n\t\t * @spec openspec/changes/screens-reports-header-buttons/specs/reports-page/spec.md#requirement-a-reports-page-carries-header-buttons\n\t\t * @return {Array<{key: string, label: string, action: string, variant: string, icon: string}>} The buttons.\n\t\t */\n\t\tresolvedHeaderButtons() {\n\t\t\tconst declared = Array.isArray(this.config.headerButtons) ? this.config.headerButtons : []\n\t\t\treturn declared\n\t\t\t\t.filter((button) => button && typeof button === 'object'\n\t\t\t\t\t&& typeof button.action === 'string' && button.action !== ''\n\t\t\t\t\t&& typeof button.label === 'string' && button.label !== '')\n\t\t\t\t.map((button) => ({\n\t\t\t\t\tkey: String(button.id || button.action),\n\t\t\t\t\tlabel: this.tr(button.label),\n\t\t\t\t\taction: button.action,\n\t\t\t\t\tvariant: button.variant === 'primary' ? 'primary' : 'secondary',\n\t\t\t\t\ticon: typeof button.icon === 'string' ? button.icon : '',\n\t\t\t\t}))\n\t\t},\n\n\t\t/**\n\t\t * The header row in the order it renders. Without the board look:\n\t\t * the declared buttons in the declared order. Under the board look:\n\t\t * the secondary buttons, the buildiq square, then the primary ones,\n\t\t * as the board draws \"Downloaden\" and the square. No declared button\n\t\t * leaves the header as it was, without the square.\n\t\t *\n\t\t * @spec openspec/changes/screens-reports-header-buttons/specs/reports-page/spec.md#requirement-a-reports-page-carries-header-buttons\n\t\t * @return {Array<object>} The buttons; the square is `{ key: '__buildiq', action: '__buildiq' }`.\n\t\t */\n\t\theaderButtonsRow() {\n\t\t\tconst buttons = this.resolvedHeaderButtons\n\t\t\tif (buttons.length === 0 || !this.isBoard) {\n\t\t\t\treturn buttons\n\t\t\t}\n\t\t\tconst square = { key: '__buildiq', action: '__buildiq', variant: 'secondary', label: '', icon: '' }\n\t\t\treturn [\n\t\t\t\t...buttons.filter((button) => button.variant !== 'primary'),\n\t\t\t\tsquare,\n\t\t\t\t...buttons.filter((button) => button.variant === 'primary'),\n\t\t\t]\n\t\t},\n\n\t\t/**\n\t\t * The heading.\n\t\t *\n\t\t * @return {string} The title.\n\t\t */\n\t\tresolvedTitle() {\n\t\t\tconst declared = this.config.title || (this.page && this.page.title)\n\n\t\t\treturn declared ? this.tr(declared) : t('nextcloud-vue', 'Reports')\n\t\t},\n\n\t\t/**\n\t\t * The optional lead paragraph.\n\t\t *\n\t\t * @return {string} The description.\n\t\t */\n\t\tresolvedDescription() {\n\t\t\treturn this.tr(this.config.description || '')\n\t\t},\n\n\t\t/**\n\t\t * The declared cards, ignoring any that name no route.\n\t\t *\n\t\t * A card with no route is a card that cannot be opened. Rendering it\n\t\t * would put a report on the page that silently does nothing, which is\n\t\t * worse than leaving it off.\n\t\t *\n\t\t * @return {Array<object>} The usable cards.\n\t\t */\n\t\tresolvedCards() {\n\t\t\tconst declared = this.config.cards\n\t\t\tif (!Array.isArray(declared)) {\n\t\t\t\treturn []\n\t\t\t}\n\n\t\t\treturn declared\n\t\t\t\t.filter((card) => card && card.route && card.label)\n\t\t\t\t.map((card) => ({\n\t\t\t\t\t...card,\n\t\t\t\t\tlabel: this.tr(card.label),\n\t\t\t\t\tdescription: this.tr(card.description || ''),\n\t\t\t\t}))\n\t\t},\n\n\t\t/**\n\t\t * Category value/label pairs, offered only for categories that hold a\n\t\t * card. A filter listing empty categories teaches the reader that the\n\t\t * app has reports it does not have.\n\t\t *\n\t\t * @return {Array<object>} The options.\n\t\t */\n\t\tcategoryOptions() {\n\t\t\tconst declared = this.config.categories || {}\n\t\t\tconst used = new Set(this.resolvedCards.map((card) => card.category).filter(Boolean))\n\t\t\tconst options = [{ value: 'all', label: this.allLabel }]\n\n\t\t\tObject.keys(declared)\n\t\t\t\t.filter((key) => used.has(key))\n\t\t\t\t.forEach((key) => options.push({ value: key, label: this.tr(declared[key]) }))\n\n\t\t\treturn options\n\t\t},\n\n\t\t/**\n\t\t * The board look's sections: the cards without a category first, under\n\t\t * no heading, then one section per declared category that holds a\n\t\t * card, in the declared order, headed by its label.\n\t\t *\n\t\t * @spec openspec/changes/screens-reports-page-board-look/specs/reports-page/spec.md#requirement-the-reports-page-takes-the-board-look\n\t\t * @return {Array<{key: string, label: string, cards: Array<object>}>} The sections.\n\t\t */\n\t\tboardSections() {\n\t\t\tconst declared = this.config.categories || {}\n\t\t\tconst sections = []\n\t\t\tconst loose = this.resolvedCards.filter((card) => !card.category || !Object.hasOwn(declared, card.category))\n\t\t\tif (loose.length > 0) {\n\t\t\t\tsections.push({ key: '__none', label: '', cards: loose })\n\t\t\t}\n\t\t\tfor (const key of Object.keys(declared)) {\n\t\t\t\tconst cards = this.resolvedCards.filter((card) => card.category === key)\n\t\t\t\tif (cards.length > 0) {\n\t\t\t\t\tsections.push({ key, label: this.tr(declared[key]), cards })\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn sections\n\t\t},\n\n\t\t/**\n\t\t * The cards the active filter admits.\n\t\t *\n\t\t * @return {Array<object>} The visible cards.\n\t\t */\n\t\tvisibleCards() {\n\t\t\tif (this.activeCategory === 'all') {\n\t\t\t\treturn this.resolvedCards\n\t\t\t}\n\n\t\t\treturn this.resolvedCards.filter((card) => card.category === this.activeCategory)\n\t\t},\n\n\t\t/**\n\t\t * A stable id for the filter control's label association.\n\t\t *\n\t\t * @return {string} The id.\n\t\t */\n\t\tfilterId() {\n\t\t\treturn `cn-reports-category-${(this.page && this.page.id) || 'page'}`\n\t\t},\n\n\t\t/**\n\t\t * @return {string} The \"all categories\" option label.\n\t\t */\n\t\tallLabel() {\n\t\t\treturn this.config.allCategoriesLabel\n\t\t\t\t? this.tr(this.config.allCategoriesLabel)\n\t\t\t\t: t('nextcloud-vue', 'All categories')\n\t\t},\n\n\t\t/**\n\t\t * @return {string} The filter's label.\n\t\t */\n\t\tresolvedCategoryLabel() {\n\t\t\treturn this.config.categoryLabel\n\t\t\t\t? this.tr(this.config.categoryLabel)\n\t\t\t\t: t('nextcloud-vue', 'Category')\n\t\t},\n\n\t\t/**\n\t\t * @return {string} The empty-state text.\n\t\t */\n\t\tresolvedEmptyLabel() {\n\t\t\treturn this.config.emptyLabel\n\t\t\t\t? this.tr(this.config.emptyLabel)\n\t\t\t\t: t('nextcloud-vue', 'No reports in this category.')\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Translate a manifest-declared string through the app's own\n\t\t * translate function.\n\t\t *\n\t\t * The manifest is data the renderer walks, not source the extractor\n\t\t * reads, so every string it carries has to be handed to the app's\n\t\t * translator explicitly. A card rendered straight from the manifest\n\t\t * shows its source language whatever locale the reader is in.\n\t\t *\n\t\t * @param {string} value The declared string.\n\t\t * @return {string} The translated string, or the input unchanged.\n\t\t */\n\t\ttr(value) {\n\t\t\tif (typeof value !== 'string' || value === '') {\n\t\t\t\treturn value\n\t\t\t}\n\n\t\t\treturn this.effectiveTranslate(value)\n\t\t},\n\n\t\t/**\n\t\t * The human label for a card's category, if it has one.\n\t\t *\n\t\t * @param {object} card The card.\n\t\t * @return {string} The label, or an empty string.\n\t\t */\n\t\tcategoryName(card) {\n\t\t\tconst declared = this.config.categories || {}\n\n\t\t\treturn this.tr((card.category && declared[card.category]) || '')\n\t\t},\n\n\t\t/**\n\t\t * A real href for the card, so it is a link a reader can middle-click\n\t\t * or open in a new tab rather than a div that only answers to a click.\n\t\t *\n\t\t * @param {object} card The card.\n\t\t * @return {string} The href.\n\t\t */\n\t\threfFor(card) {\n\t\t\tif (!this.$router) {\n\t\t\t\treturn '#'\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\treturn this.$router.resolve({ name: card.route }).href\n\t\t\t} catch {\n\t\t\t\treturn '#'\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * A header button was clicked: run the `headerActions` entry it names\n\t\t * and emit `header-action`, as an index page's header button does.\n\t\t *\n\t\t * @spec openspec/changes/screens-reports-header-buttons/specs/reports-page/spec.md#requirement-a-reports-page-carries-header-buttons\n\t\t * @param {{action: string}} button The resolved button.\n\t\t * @return {void}\n\t\t */\n\t\tonHeaderButton(button) {\n\t\t\tconst id = button.action\n\t\t\tconst actions = Array.isArray(this.config.headerActions) ? this.config.headerActions : []\n\t\t\tconst entry = actions.find((action) => action && action.id === id) || null\n\t\t\tconst handler = entry ? entry.handler : undefined\n\t\t\tif (handler === 'none') {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (typeof handler === 'function') {\n\t\t\t\thandler({ actionId: id })\n\t\t\t} else if (handler === 'navigate' && entry.route) {\n\t\t\t\tconst params = (entry.params && typeof entry.params === 'object') ? entry.params : null\n\t\t\t\tif (this.$router && typeof this.$router.push === 'function') {\n\t\t\t\t\tthis.$router.push(params ? { name: entry.route, params } : { name: entry.route })\n\t\t\t\t}\n\t\t\t} else if (entry && entry.type === 'navigate' && typeof entry.target === 'string' && entry.target !== '') {\n\t\t\t\twindow.open(entry.target, '_blank', 'noopener,noreferrer')\n\t\t\t} else if (typeof handler === 'string' && handler !== 'emit') {\n\t\t\t\tconst resolved = resolveRegisteredHandler(handler, this.cnRegistry, this.cnCustomComponents)\n\t\t\t\tif (typeof resolved === 'function') {\n\t\t\t\t\tresolved({ actionId: id })\n\t\t\t\t}\n\t\t\t}\n\t\t\t/**\n\t\t\t * A header button was clicked (`headerButtons`), after its\n\t\t\t * `headerActions` entry ran; not for `handler: \"none\"`.\n\t\t\t *\n\t\t\t * @event header-action\n\t\t\t * @property {{action: string, id: string}} payload The id of the `headerActions` entry the button names, as `action` and `id`.\n\t\t\t */\n\t\t\tthis.$emit('header-action', { action: id, id })\n\t\t},\n\n\t\t/**\n\t\t * Navigate by route NAME on a plain click; a modified or middle click\n\t\t * is left to the browser so it can open the card's href elsewhere.\n\t\t *\n\t\t * @param {object} card The card.\n\t\t * @param {MouseEvent} event The click.\n\t\t * @return {void}\n\t\t */\n\t\topen(card, event) {\n\t\t\tfollowLinkClick(event, { name: card.route }, this.$router)\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-reports-page {\n\tpadding: 16px;\n}\n\n/* Clear the Nextcloud navigation toggle button (44px wide, absolutely\n   positioned at the left edge of .app-content) plus 12px breathing room, as\n   CnPageHeader does. Only the header shifts; the body keeps the full width. */\n.cn-reports-page__header {\n\tpadding-inline-start: 56px;\n}\n\n.cn-reports-page__title {\n\tmargin: 0 0 4px;\n}\n\n.cn-reports-page__heading-row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\talign-items: flex-start;\n\tjustify-content: space-between;\n\tgap: 12px 24px;\n}\n\n.cn-reports-page__heading-row .cn-reports-page__title {\n\tflex: 1 1 320px;\n\tmin-width: 0;\n}\n\n.cn-reports-page__header-buttons {\n\tdisplay: flex;\n\tflex: none;\n\tflex-wrap: wrap;\n\talign-items: center;\n\tgap: 10px;\n}\n\n.cn-reports-page__description {\n\tmargin: 0 0 16px;\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.cn-reports-page__filter {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tmargin-bottom: 16px;\n}\n\n.cn-reports-page__filter-select {\n\tmin-width: 220px;\n}\n\n.cn-reports-page__grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n\tgap: 12px;\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\n\n.cn-reports-page__card {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n\theight: 100%;\n\tpadding: 12px;\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--border-radius-large);\n\tcolor: inherit;\n\ttext-decoration: none;\n}\n\n.cn-reports-page__card:hover,\n.cn-reports-page__card:focus {\n\tbackground-color: var(--color-background-hover);\n}\n\n.cn-reports-page__card-title {\n\tfont-weight: bold;\n}\n\n.cn-reports-page__card-description,\n.cn-reports-page__card-category {\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 0.9em;\n}\n\n.cn-reports-page__empty {\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.cn-reports-page__widgets {\n\tmargin-top: 20px;\n}\n</style>\n"],"names":["_createElementVNode","_toDisplayString","_createElementBlock","_Fragment","_renderList","_createBlock","_createVNode","_openBlock"],"mappings":"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"}

package/dist/esm/components/CnStagesWidget/CnStagesWidget.vue.js

@@ -2,7 +2,7 @@ import script from './CnStagesWidget.vue2.js';
 import { render } from './CnStagesWidget.vue3.js';
 
 script.render = render;
-script.__scopeId = "data-v-a394760a";
+script.__scopeId = "data-v-3946def5";
 const __sfc_main = script;
 
 export { __sfc_main as default };

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

@@ -5,7 +5,7 @@ import { inject, ref } from 'vue';
 import __sfc_main$1 from '../../dialogs/CnTransitionInputDialog.vue.js';
 import __sfc_main from '../CnTimelineStages/CnTimelineStages.vue.js';
 import { useEndpointSource, getByPath } from '../../composables/useEndpointSource.js';
-import { actionsByTarget, isBlockedAction, actionNote, declaresInputs, performTransition, transitionError, readAvailableActions } from '../../composables/useLifecycleTransitions.js';
+import { actionsByTarget, isBlockedAction, actionNote, declaresInputs, performTransition, transitionError, transitionFieldErrors, readAvailableActions } from '../../composables/useLifecycleTransitions.js';
 import { normalizeLook } from '../../composables/useLook.js';
 import { useObjectStore } from '../../store/useObjectStore.js';
 import { resolveObjectOpType } from '../../utils/actionsDispatcher.js';
@@ -353,6 +353,17 @@ var script = {
 			pendingAction: null,
 			/** @type {boolean} Whether a move is running. */
 			busy: false,
+			/**
+			 * @type {string} The stage a running move leads to, or ''. Drives
+			 * the loading indicator on that one stage.
+			 */
+			movingTo: '',
+			/** @type {string} A refusal shown inside the open input dialog. */
+			inputError: '',
+			/** @type {string[]} The input keys that refusal named. */
+			inputFieldErrors: [],
+			/** @type {string[]} The input keys the last refused move named. */
+			lastFieldErrors: [],
 			/** @type {string} Why the last move failed, or ''. */
 			moveError: '',
 			/**
@@ -585,6 +596,20 @@ var script = {
 			return this.interactive && !this.busy
 		},
 
+		/**
+		 * What the stage a move is running to says while it runs: the
+		 * loading indicator's name and the live region's sentence.
+		 *
+		 * @return {string} The sentence, or '' when nothing is moving.
+		 */
+		movingMessage() {
+			if (!this.movingTo) {
+				return ''
+			}
+			const stage = this.stages.find((s) => s.id === this.movingTo);
+			return this.tr('Moving to {stage}', { stage: stage ? stage.label : this.movingTo })
+		},
+
 		/**
 		 * The allowed moves by the stage they lead to, or null while they are
 		 * unknown.
@@ -1044,13 +1069,44 @@ var script = {
 		 * @param {object} data The collected input values.
 		 * @return {void}
 		 */
-		onInputConfirm(data) {
+		async onInputConfirm(data) {
 			const pending = this.pendingAction;
-			this.pendingAction = null;
 			if (!pending || !pending.__request) {
+				this.closeInputDialog();
+				return
+			}
+			this.inputError = '';
+			this.inputFieldErrors = [];
+			// THE DIALOG STAYS OPEN WHILE THE MOVE RUNS, with its confirm
+			// button busy. Closing it first left the person looking at an
+			// unchanged strip for as long as the transition took, which on a
+			// live case was long enough to reload the page thinking it had
+			// not been sent.
+			const moved = await this.performMove(pending.__request, data);
+			if (this.pendingAction !== pending) {
+				// Closed while the move ran; nothing left to update.
 				return
 			}
-			this.performMove(pending.__request, data);
+			if (moved) {
+				this.closeInputDialog();
+				return
+			}
+			// Refused. The sentence goes into the dialog the person is looking
+			// at, with what they typed still in it.
+			this.inputError = this.moveError;
+			this.inputFieldErrors = this.lastFieldErrors;
+			this.moveError = '';
+		},
+
+		/**
+		 * Close the input dialog and forget the refusal it was showing.
+		 *
+		 * @return {void}
+		 */
+		closeInputDialog() {
+			this.pendingAction = null;
+			this.inputError = '';
+			this.inputFieldErrors = [];
 		},
 
 		/**
@@ -1058,11 +1114,17 @@ var script = {
 		 *
 		 * @param {{stage: {id: string, label: string}, action: string}} request The move.
 		 * @param {object} [data] The collected transition inputs, when any.
-		 * @return {Promise<void>}
+		 * @return {Promise<boolean>} Whether the move was made.
 		 */
 		async performMove(request, data) {
 			this.busy = true;
+			this.movingTo = request.stage.id;
 			this.moveError = '';
+			this.lastFieldErrors = [];
+			// Said as the move starts, not only when it lands: a screen reader
+			// user otherwise hears nothing for as long as the server takes.
+			this.statusMessage = this.movingMessage;
+			let moved = false;
 			try {
 				if (this.lifecycleMode) {
 					await performTransition(this.recordId, request.action, data);
@@ -1089,11 +1151,16 @@ var script = {
 				if (this.lifecycleMode) {
 					await this.loadActions();
 				}
+				moved = true;
 			} catch (error) {
 				this.moveError = transitionError(error, this.tr('The move could not be made'));
+				this.lastFieldErrors = transitionFieldErrors(error);
+				this.statusMessage = this.moveError;
 			} finally {
 				this.busy = false;
+				this.movingTo = '';
 			}
+			return moved
 		},
 
 		/**