@abgov/nx-adsp 13.18.0-beta.4 → 13.18.0-beta.5

package/generators.json

@@ -65,6 +65,11 @@
       "schema": "./src/generators/vue-detail-view/schema.json",
       "description": "Generator that adds a record-detail view (RecordDetailShell + a --fields spec) to an existing vue-app project."
     },
+    "vue-workspace-view": {
+      "factory": "./src/generators/vue-workspace-view/vue-workspace-view",
+      "schema": "./src/generators/vue-workspace-view/schema.json",
+      "description": "Generator that adds a staff-facing, paginated list view (WorkspaceTable + a --columns spec) to an existing vue-app project."
+    },
     "mean": {
       "factory": "./src/generators/mean/mean",
       "schema": "./src/generators/mean/schema.json",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/nx-adsp",
-  "version": "13.18.0-beta.4",
+  "version": "13.18.0-beta.5",
   "license": "Apache-2.0",
   "main": "src/index.js",
   "description": "Government of Alberta - Nx plugin for ADSP apps.",

package/src/generators/vue-components/files/AGENTS.md__tmpl__

@@ -7,7 +7,7 @@ app in this workspace imports both instead of carrying its own copy. Generated b
 | Folder | Contains | Lifespan |
 |---|---|---|
 | `src/lib/primitives/` | Thin `v-model`/idiomatic-event wrappers over individual `goa-*` elements (`GoabInput`, `GoabButton`, …) | **Interim** — see below |
-| `src/lib/patterns/` | Composite, app-shell components (`AppLayout`, `AppHeader`, `AppFooter`, `AppSideMenu`, `SessionExpiredBanner`, `RecordDetailShell`) | **Permanent** |
+| `src/lib/patterns/` | Composite, app-shell components (`AppLayout`, `AppHeader`, `AppFooter`, `AppSideMenu`, `SessionExpiredBanner`, `RecordDetailShell`, `WorkspaceTable`) | **Permanent** |
 
 > **⚠️ `primitives/` is interim — do not invest in it as permanent.** It exists
 > only because GoA DS has not yet published an official Vue wrapper package. When
@@ -142,7 +142,7 @@ detail); just leave it to fall through from the caller.
 
 A pattern component is app-shell composition — layout, header/footer chrome,
 banners — not a single-element wrapper. Existing examples: `AppLayout`,
-`AppHeader`, `AppFooter`, `AppSideMenu`, `SessionExpiredBanner`, `RecordDetailShell`.
+`AppHeader`, `AppFooter`, `AppSideMenu`, `SessionExpiredBanner`, `RecordDetailShell`, `WorkspaceTable`.
 
 - It's fine to compose `primitives/` wrappers inside a pattern component (e.g.
   `SessionExpiredBanner` uses `GoabButton`) — import them with a relative path

package/src/generators/vue-components/files/src/index.ts__tmpl__

@@ -23,3 +23,4 @@ export { default as AppFooter } from './lib/patterns/AppFooter.vue';
 export { default as AppSideMenu } from './lib/patterns/AppSideMenu.vue';
 export { default as SessionExpiredBanner } from './lib/patterns/SessionExpiredBanner.vue';
 export { default as RecordDetailShell } from './lib/patterns/RecordDetailShell.vue';
+export { default as WorkspaceTable } from './lib/patterns/WorkspaceTable.vue';

package/src/generators/vue-components/files/src/lib/patterns/WorkspaceTable.vue__tmpl__

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+// Chrome for a staff-facing, paginated list: loading/error/empty states, the
+// goa-table itself, and goa-pagination wiring. NOT the filter bar (varies too
+// much per view) and NOT cell/action content -- those are scoped slots so the
+// consuming view can render badges, formatted values, or action buttons per
+// column without this component knowing anything about the domain.
+//
+// No native GoA sortable-header component exists (checked -- there isn't
+// one), so a sortable column header is hand-rolled here using the standard
+// WAI-ARIA "sortable table header" pattern (aria-sort + a real button), not
+// invented from scratch.
+import { useSlots } from 'vue';
+import GoabButton from '../primitives/GoabButton.vue';
+
+interface WorkspaceTableColumn {
+  key: string;
+  label: string;
+  sortable?: boolean;
+}
+
+withDefaults(
+  defineProps<{
+    columns: WorkspaceTableColumn[];
+    rows: Record<string, unknown>[];
+    rowKey?: string;
+    loading?: boolean;
+    error?: string | null;
+    emptyMessage?: string;
+    page?: number;
+    itemCount?: number;
+    perPageCount?: number;
+    sortBy?: string;
+    sortDir?: 'asc' | 'desc';
+  }>(),
+  {
+    rowKey: 'id',
+    loading: false,
+    error: null,
+    emptyMessage: 'No results found.',
+    perPageCount: 10,
+  },
+);
+
+const emit = defineEmits<{
+  retry: [];
+  pageChange: [page: number];
+  sort: [key: string];
+}>();
+
+const slots = useSlots();
+
+function ariaSort(
+  column: WorkspaceTableColumn,
+  sortBy?: string,
+  sortDir?: 'asc' | 'desc',
+): 'ascending' | 'descending' | 'none' | undefined {
+  if (!column.sortable) return undefined;
+  if (sortBy !== column.key) return 'none';
+  return sortDir === 'desc' ? 'descending' : 'ascending';
+}
+</script>
+
+<template>
+  <div class="workspace-table">
+    <div v-if="loading" aria-label="Loading">
+      <goa-skeleton type="text" size="4" />
+    </div>
+
+    <goa-callout v-else-if="error" type="emergency" heading="Unable to load">
+      <p>{{ error }}</p>
+      <goa-spacer vspacing="s" />
+      <GoabButton type="tertiary" @click="emit('retry')">Retry</GoabButton>
+    </goa-callout>
+
+    <goa-callout v-else-if="rows.length === 0" type="information" heading="No results">
+      <p>{{ emptyMessage }}</p>
+    </goa-callout>
+
+    <template v-else>
+      <goa-table width="100%">
+        <thead>
+          <tr>
+            <th
+              v-for="column in columns"
+              :key="column.key"
+              :aria-sort="ariaSort(column, sortBy, sortDir)"
+            >
+              <button
+                v-if="column.sortable"
+                type="button"
+                class="sort-button"
+                @click="emit('sort', column.key)"
+              >
+                {{ column.label }}
+                <span aria-hidden="true">{{
+                  sortBy === column.key ? (sortDir === 'desc' ? '▼' : '▲') : ''
+                }}</span>
+              </button>
+              <template v-else>{{ column.label }}</template>
+            </th>
+            <th v-if="slots.actions" />
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="row in rows" :key="String(row[rowKey])">
+            <td v-for="column in columns" :key="column.key">
+              <slot :name="`cell-${column.key}`" :row="row">{{ row[column.key] }}</slot>
+            </td>
+            <td v-if="slots.actions">
+              <slot name="actions" :row="row" />
+            </td>
+          </tr>
+        </tbody>
+      </goa-table>
+
+      <goa-spacer vspacing="l" />
+
+      <goa-pagination
+        v-if="page && itemCount && perPageCount && itemCount > perPageCount"
+        :page-number="page"
+        :item-count="itemCount"
+        :per-page-count="perPageCount"
+        @_change="(e) => emit('pageChange', (e as CustomEvent<{ page: number }>).detail?.page ?? 1)"
+      />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.sort-button {
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  font-weight: inherit;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--goa-space-2xs, 0.25rem);
+}
+</style>

package/src/generators/vue-components/files/src/vue-components.spec.ts__tmpl__

@@ -27,6 +27,7 @@ describe('vue-components', () => {
       'AppSideMenu',
       'SessionExpiredBanner',
       'RecordDetailShell',
+      'WorkspaceTable',
     ]) {
       expect(lib[name as keyof typeof lib]).toBeTruthy();
     }

package/src/generators/vue-components/vue-components.spec.ts

@@ -44,6 +44,7 @@ describe('Vue Components Generator', () => {
       'AppSideMenu',
       'SessionExpiredBanner',
       'RecordDetailShell',
+      'WorkspaceTable',
     ]) {
       expect(host.exists(`${patterns}/${name}.vue`)).toBeTruthy();
     }

package/src/generators/vue-workspace-view/files/src/views/__viewFileName__.vue__tmpl__

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { WorkspaceTable } from '<%= goaImportPath %>';
+
+const columns = [
+<% columns.forEach(function (column) { -%>
+  { key: '<%= column.key %>', label: '<%= column.label %>', sortable: <%= !!column.sortable %> },
+<% }); -%>
+];
+
+// The fetched rows' shape isn't known to this generator -- read fields
+// defensively rather than declaring (and likely getting wrong) a fake interface.
+const rows = ref<Record<string, unknown>[]>([]);
+const loading = ref(true);
+const error = ref<string | null>(null);
+const page = ref(1);
+const itemCount = ref(0);
+const sortBy = ref<string>();
+const sortDir = ref<'asc' | 'desc'>('asc');
+<% if (filterable) { -%>
+const search = ref('');
+let searchDebounce: ReturnType<typeof setTimeout> | undefined;
+<% } -%>
+
+const PAGE_SIZE = <%= pageSize %>;
+
+async function load() {
+  loading.value = true;
+  error.value = null;
+  try {
+    const params = new URLSearchParams({
+      page: String(page.value),
+      limit: String(PAGE_SIZE),
+    });
+<% if (filterable) { -%>
+    if (search.value) params.set('search', search.value);
+<% } -%>
+    if (sortBy.value) {
+      params.set('sortBy', sortBy.value);
+      params.set('sortDir', sortDir.value);
+    }
+    const res = await fetch(`/api/<%= resource %>?${params.toString()}`);
+    if (!res.ok) throw new Error(`Failed to load (${res.status})`);
+    const data = await res.json();
+    // Accept either a bare array or a { results, total } page envelope.
+    rows.value = Array.isArray(data) ? data : (data.results ?? []);
+    itemCount.value = Array.isArray(data) ? data.length : (data.total ?? rows.value.length);
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Failed to load.';
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(load);
+
+function onPageChange(newPage: number) {
+  page.value = newPage;
+  void load();
+}
+
+function onSort(key: string) {
+  if (sortBy.value === key) {
+    sortDir.value = sortDir.value === 'asc' ? 'desc' : 'asc';
+  } else {
+    sortBy.value = key;
+    sortDir.value = 'asc';
+  }
+  page.value = 1;
+  void load();
+}
+<% if (filterable) { -%>
+
+function onSearchInput(e: Event) {
+  search.value = String((e as CustomEvent<{ value?: string }>).detail?.value ?? '');
+  if (searchDebounce) clearTimeout(searchDebounce);
+  searchDebounce = setTimeout(() => {
+    page.value = 1;
+    void load();
+  }, 300);
+}
+<% } -%>
+
+function formatDate(value: unknown): string {
+  if (!value) return '—';
+  try {
+    return new Date(String(value)).toLocaleString('en-CA');
+  } catch {
+    return String(value);
+  }
+}
+
+function formatCurrency(value: unknown): string {
+  if (value === undefined || value === null || value === '') return '—';
+  const n = Number(value);
+  if (Number.isNaN(n)) return String(value);
+  return new Intl.NumberFormat('en-CA', { style: 'currency', currency: 'CAD' }).format(n);
+}
+</script>
+
+<template>
+  <div>
+    <h1><%= heading %></h1>
+
+    <goa-spacer vspacing="m" />
+<% if (filterable) { -%>
+
+    <goa-input
+      name="search"
+      type="search"
+      :value="search"
+      placeholder="Search..."
+      width="320px"
+      @_change="onSearchInput"
+    />
+
+    <goa-spacer vspacing="l" />
+<% } -%>
+
+    <WorkspaceTable
+      :columns="columns"
+      :rows="rows"
+      :loading="loading"
+      :error="error"
+      :page="page"
+      :item-count="itemCount"
+      :per-page-count="<%= pageSize %>"
+      :sort-by="sortBy"
+      :sort-dir="sortDir"
+      @retry="load"
+      @page-change="onPageChange"
+      @sort="onSort"
+    >
+<% columns.forEach(function (column) { -%>
+<% if (column.type === 'badge') { -%>
+      <template #cell-<%= column.key %>="{ row }">
+        <goa-badge type="information" :content="String(row['<%= column.key %>'] ?? '—')" />
+      </template>
+<% } else if (column.type === 'date') { -%>
+      <template #cell-<%= column.key %>="{ row }">
+        {{ formatDate(row['<%= column.key %>']) }}
+      </template>
+<% } else if (column.type === 'currency') { -%>
+      <template #cell-<%= column.key %>="{ row }">
+        {{ formatCurrency(row['<%= column.key %>']) }}
+      </template>
+<% } -%>
+<% }); -%>
+<% if (detailRoute) { -%>
+      <template #actions="{ row }">
+        <router-link :to="`<%= detailRoute %>/${row.id}`">
+          <goa-button type="tertiary" size="compact">View</goa-button>
+        </router-link>
+      </template>
+<% } -%>
+    </WorkspaceTable>
+  </div>
+</template>

package/src/generators/vue-workspace-view/schema.d.ts

@@ -0,0 +1,37 @@
+export interface WorkspaceViewColumn {
+  key: string;
+  label: string;
+  type?: 'text' | 'date' | 'currency' | 'badge';
+  sortable?: boolean;
+}
+
+export interface Schema {
+  project: string;
+  name: string;
+  resource: string;
+  route: string;
+  /**
+   * JSON string on the real CLI (Nx's array-typed CLI coercion only supports
+   * comma-separated primitives, not JSON -- see schema.json). A real array is
+   * also accepted for programmatic callers (e.g. tests).
+   */
+  columns: string | WorkspaceViewColumn[];
+  detailRoute?: string;
+  heading?: string;
+  pageSize?: number;
+  filterable?: boolean;
+  requiresAuth?: boolean;
+}
+
+export interface NormalizedSchema extends Omit<Schema, 'columns'> {
+  projectRoot: string;
+  /** PascalCase view name with a "ListView" suffix, e.g. ApplicationsListView. */
+  viewFileName: string;
+  columns: WorkspaceViewColumn[];
+  heading: string;
+  pageSize: number;
+  filterable: boolean;
+  requiresAuth: boolean;
+  /** Always present (null when not given) so the template's `with` binding can reference it. */
+  detailRoute: string | null;
+}

package/src/generators/vue-workspace-view/schema.json

@@ -0,0 +1,64 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "id": "NxAdspVueWorkspaceView",
+  "title": "Vue Workspace (List) View",
+  "description": "Generates a staff-facing, paginated list view (WorkspaceTable + a debounced search filter bar) into an existing vue-app project.",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The vue-app project to add the view to.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "Which project should the workspace view be added to?"
+    },
+    "name": {
+      "type": "string",
+      "description": "View name, e.g. 'applications' generates src/views/ApplicationsListView.vue.",
+      "$default": {
+        "$source": "argv",
+        "index": 1
+      },
+      "x-prompt": "What should the view be called?"
+    },
+    "resource": {
+      "type": "string",
+      "description": "API resource path segment -- the view fetches /api/<resource>?page=&limit=&search=&sortBy=&sortDir=."
+    },
+    "route": {
+      "type": "string",
+      "description": "Route path added to router/index.ts, e.g. /applications."
+    },
+    "columns": {
+      "type": "string",
+      "description": "JSON array of table columns, in display order -- e.g. '[{\"key\":\"status\",\"label\":\"Status\",\"type\":\"badge\",\"sortable\":true}]'. Each item: { key, label, type?: \"text\"|\"date\"|\"currency\"|\"badge\" (default \"text\"), sortable?: boolean }. A plain array is also accepted when this generator is invoked programmatically. Nx's CLI option coercion only supports comma-separated primitive lists for array-typed schema properties, not JSON -- a JSON string is the only CLI syntax that actually survives Nx's own arg parsing for a structured list like this."
+    },
+    "detailRoute": {
+      "type": "string",
+      "description": "If set, each row gets a \"View\" action linking to `${detailRoute}/${row.id}` -- typically a vue-detail-view's route with the :id segment dropped. Omit to leave the actions column for manual customization."
+    },
+    "heading": {
+      "type": "string",
+      "description": "Page heading. Defaults to the view name, title-cased."
+    },
+    "pageSize": {
+      "type": "number",
+      "description": "Rows per page.",
+      "default": 20
+    },
+    "filterable": {
+      "type": "boolean",
+      "description": "Whether to generate a debounced search input above the table.",
+      "default": true
+    },
+    "requiresAuth": {
+      "type": "boolean",
+      "description": "Whether the generated route requires authentication.",
+      "default": true
+    }
+  },
+  "required": ["project", "name", "resource", "route", "columns"],
+  "additionalProperties": false
+}

package/src/generators/vue-workspace-view/vue-workspace-view.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import { Schema } from './schema';
+export default function (host: Tree, options: Schema): Promise<void>;

package/src/generators/vue-workspace-view/vue-workspace-view.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = default_1;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const path = require("path");
+const vue_router_1 = require("../../utils/vue-router");
+const vue_components_1 = require("../vue-components/vue-components");
+// Nx's own CLI option coercion (coerceTypesInOptions in nx/src/utils/params)
+// only knows how to split an array-typed option on commas -- it has no JSON
+// support, so a real `"type": "array"` schema for --columns silently mangles
+// a JSON array into garbage fragments when invoked from the actual CLI (only
+// programmatic callers, like this generator's own unit tests, ever pass a
+// real array). --columns is `"type": "string"` in schema.json specifically so
+// Nx leaves it alone, and this generator parses the JSON itself.
+function parseColumns(columns) {
+    const parsed = typeof columns === 'string' ? JSON.parse(columns) : columns;
+    if (!Array.isArray(parsed) || parsed.length === 0) {
+        throw new Error('--columns must be a non-empty JSON array of { key, label, type?, sortable? } objects.');
+    }
+    return parsed;
+}
+function normalizeOptions(host, options) {
+    var _a, _b, _c, _d, _e;
+    const { root: projectRoot } = (0, devkit_1.readProjectConfiguration)(host, options.project);
+    const className = (0, devkit_1.names)(options.name).className;
+    return Object.assign(Object.assign({}, options), { projectRoot, columns: parseColumns(options.columns), viewFileName: `${className}ListView`, 
+        // className is PascalCase (e.g. "Applications") -- space it out for a
+        // readable default heading ("Applications").
+        heading: (_a = options.heading) !== null && _a !== void 0 ? _a : className.replace(/([A-Z])/g, ' $1').trim(), pageSize: (_b = options.pageSize) !== null && _b !== void 0 ? _b : 20, filterable: (_c = options.filterable) !== null && _c !== void 0 ? _c : true, requiresAuth: (_d = options.requiresAuth) !== null && _d !== void 0 ? _d : true, 
+        // EJS's `with` binding only exposes keys that exist on the options object --
+        // when --detailRoute is omitted, the key is absent (not undefined), so the
+        // template's `<% if (detailRoute) %>` throws a ReferenceError without this.
+        detailRoute: (_e = options.detailRoute) !== null && _e !== void 0 ? _e : null });
+}
+function default_1(host, options) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const normalizedOptions = normalizeOptions(host, options);
+        // Idempotent -- ensures WorkspaceTable exists even in a project scaffolded
+        // before vue-components carried it.
+        yield (0, vue_components_1.default)(host);
+        (0, devkit_1.generateFiles)(host, path.join(__dirname, 'files'), normalizedOptions.projectRoot, Object.assign(Object.assign({}, normalizedOptions), { goaImportPath: (0, vue_components_1.vueComponentsImportPath)(host), tmpl: '' }));
+        (0, vue_router_1.insertVueRoute)(host, normalizedOptions.projectRoot, normalizedOptions.project, {
+            path: normalizedOptions.route,
+            componentImportPath: `../views/${normalizedOptions.viewFileName}.vue`,
+            requiresAuth: normalizedOptions.requiresAuth,
+        });
+        yield (0, devkit_1.formatFiles)(host);
+    });
+}
+//# sourceMappingURL=vue-workspace-view.js.map

package/src/generators/vue-workspace-view/vue-workspace-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue-workspace-view.js","sourceRoot":"","sources":["../../../../../../packages/nx-adsp/src/generators/vue-workspace-view/vue-workspace-view.ts"],"names":[],"mappings":";;AAqDA,4BAyBC;;AA9ED,uCAMoB;AACpB,6BAA6B;AAC7B,uDAAwD;AACxD,qEAE0C;AAG1C,6EAA6E;AAC7E,4EAA4E;AAC5E,6EAA6E;AAC7E,6EAA6E;AAC7E,0EAA0E;AAC1E,8EAA8E;AAC9E,iEAAiE;AACjE,SAAS,YAAY,CAAC,OAA0B;IAC9C,MAAM,MAAM,GAAG,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAC3E,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAClD,MAAM,IAAI,KAAK,CACb,uFAAuF,CACxF,CAAC;IACJ,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,SAAS,gBAAgB,CAAC,IAAU,EAAE,OAAe;;IACnD,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,IAAA,iCAAwB,EAAC,IAAI,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;IAE9E,MAAM,SAAS,GAAG,IAAA,cAAK,EAAC,OAAO,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC;IAChD,uCACK,OAAO,KACV,WAAW,EACX,OAAO,EAAE,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,EACtC,YAAY,EAAE,GAAG,SAAS,UAAU;QACpC,sEAAsE;QACtE,6CAA6C;QAC7C,OAAO,EAAE,MAAA,OAAO,CAAC,OAAO,mCAAI,SAAS,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,IAAI,EAAE,EACvE,QAAQ,EAAE,MAAA,OAAO,CAAC,QAAQ,mCAAI,EAAE,EAChC,UAAU,EAAE,MAAA,OAAO,CAAC,UAAU,mCAAI,IAAI,EACtC,YAAY,EAAE,MAAA,OAAO,CAAC,YAAY,mCAAI,IAAI;QAC1C,6EAA6E;QAC7E,2EAA2E;QAC3E,4EAA4E;QAC5E,WAAW,EAAE,MAAA,OAAO,CAAC,WAAW,mCAAI,IAAI,IACxC;AACJ,CAAC;AAED,mBAA+B,IAAU,EAAE,OAAe;;QACxD,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAE1D,2EAA2E;QAC3E,oCAAoC;QACpC,MAAM,IAAA,wBAAsB,EAAC,IAAI,CAAC,CAAC;QAEnC,IAAA,sBAAa,EACX,IAAI,EACJ,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,EAC7B,iBAAiB,CAAC,WAAW,kCAExB,iBAAiB,KACpB,aAAa,EAAE,IAAA,wCAAuB,EAAC,IAAI,CAAC,EAC5C,IAAI,EAAE,EAAE,IAEX,CAAC;QAEF,IAAA,2BAAc,EAAC,IAAI,EAAE,iBAAiB,CAAC,WAAW,EAAE,iBAAiB,CAAC,OAAO,EAAE;YAC7E,IAAI,EAAE,iBAAiB,CAAC,KAAK;YAC7B,mBAAmB,EAAE,YAAY,iBAAiB,CAAC,YAAY,MAAM;YACrE,YAAY,EAAE,iBAAiB,CAAC,YAAY;SAC7C,CAAC,CAAC;QAEH,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;CAAA"}

package/src/generators/vue-workspace-view/vue-workspace-view.spec.ts

@@ -0,0 +1,183 @@
+import {
+  addProjectConfiguration,
+  readProjectConfiguration,
+  Tree,
+} from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import generator from './vue-workspace-view';
+import { Schema } from './schema';
+
+// Mirrors the shape vue-app's own template generates -- vue-workspace-view
+// retrofits into this file, so the fixture must match what it actually looks for.
+const ROUTER_FIXTURE = `import { createRouter, createWebHistory } from 'vue-router';
+import HomeView from '../views/HomeView.vue';
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    { path: '/', component: HomeView },
+  ],
+});
+
+export default router;
+`;
+
+describe('Vue Workspace View Generator', () => {
+  let host: Tree;
+  const baseOptions: Schema = {
+    project: 'test',
+    name: 'applications',
+    resource: 'applications',
+    route: '/applications',
+    columns: [
+      { key: 'status', label: 'Status', type: 'badge' },
+      { key: 'lastSaved', label: 'Last saved', type: 'date', sortable: true },
+      { key: 'requestTotal', label: 'Request total', type: 'currency' },
+      { key: 'serviceModel', label: 'Service Model' },
+    ],
+  };
+
+  beforeEach(() => {
+    host = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+    addProjectConfiguration(host, 'test', { root: 'apps/test' });
+    host.write('apps/test/src/router/index.ts', ROUTER_FIXTURE);
+  });
+
+  it('throws when --project does not exist', async () => {
+    await expect(
+      generator(host, { ...baseOptions, project: 'no-such-app' }),
+    ).rejects.toThrow();
+  });
+
+  it("throws a clear error when the project isn't a vue-app (no router/index.ts)", async () => {
+    addProjectConfiguration(host, 'not-vue', { root: 'apps/not-vue' });
+    await expect(
+      generator(host, { ...baseOptions, project: 'not-vue' }),
+    ).rejects.toThrow(/router\/index\.ts/);
+  });
+
+  // Regression guard: Nx's own CLI option coercion for `"type": "array"` splits
+  // on commas, not JSON -- --columns is `"type": "string"` in schema.json
+  // specifically so the real CLI's JSON string survives unmangled. Assert the
+  // string form the CLI actually produces, not just the array form direct
+  // (unit-test) callers use.
+  it('accepts --columns as a JSON string, the form the real CLI produces', async () => {
+    await generator(host, {
+      ...baseOptions,
+      columns: JSON.stringify(baseOptions.columns),
+    });
+    const view = host
+      .read('apps/test/src/views/ApplicationsListView.vue')
+      .toString();
+    expect(view).toContain(
+      "{ key: 'status', label: 'Status', sortable: false }",
+    );
+  }, 30000);
+
+  it('throws a clear error when --columns is not valid JSON', async () => {
+    await expect(
+      generator(host, { ...baseOptions, columns: '{not json' }),
+    ).rejects.toThrow();
+  });
+
+  it('throws a clear error when --columns parses to an empty array', async () => {
+    await expect(
+      generator(host, { ...baseOptions, columns: '[]' }),
+    ).rejects.toThrow(/non-empty/);
+  });
+
+  it('generates the view with columns, sort, and per-type cell slots', async () => {
+    await generator(host, baseOptions);
+
+    const view = host
+      .read('apps/test/src/views/ApplicationsListView.vue')
+      .toString();
+    expect(view).toContain('<h1>Applications</h1>');
+    expect(view).toContain(
+      "{ key: 'status', label: 'Status', sortable: false }",
+    );
+    expect(view).toContain(
+      "{ key: 'lastSaved', label: 'Last saved', sortable: true }",
+    );
+    expect(view).toContain('fetch(`/api/applications?${params.toString()}`)');
+    expect(view).toContain(
+      "<goa-badge type=\"information\" :content=\"String(row['status'] ?? '—')\" />",
+    );
+    expect(view).toContain("formatDate(row['lastSaved'])");
+    expect(view).toContain("formatCurrency(row['requestTotal'])");
+    // Uses the shared table shell, not hand-rolled loading/pagination markup.
+    expect(view).toContain("import { WorkspaceTable } from '@proj/vue-components';");
+    expect(view).toContain('<WorkspaceTable');
+    // Filterable by default: a debounced search input.
+    expect(view).toContain('type="search"');
+    expect(view).toContain('searchDebounce');
+  }, 30000);
+
+  it('omits the search input and its wiring when --filterable=false', async () => {
+    await generator(host, { ...baseOptions, filterable: false });
+    const view = host
+      .read('apps/test/src/views/ApplicationsListView.vue')
+      .toString();
+    expect(view).not.toContain('type="search"');
+    expect(view).not.toContain('searchDebounce');
+  }, 30000);
+
+  it('generates a View action linking to --detailRoute when set', async () => {
+    await generator(host, { ...baseOptions, detailRoute: '/applications' });
+    const view = host
+      .read('apps/test/src/views/ApplicationsListView.vue')
+      .toString();
+    expect(view).toContain('#actions="{ row }"');
+    expect(view).toContain(':to="`/applications/${row.id}`"');
+  }, 30000);
+
+  it('omits the actions slot entirely when --detailRoute is not set', async () => {
+    await generator(host, baseOptions);
+    const view = host
+      .read('apps/test/src/views/ApplicationsListView.vue')
+      .toString();
+    expect(view).not.toContain('#actions');
+  }, 30000);
+
+  it('respects an explicit --heading and --pageSize', async () => {
+    await generator(host, { ...baseOptions, heading: 'Grant Applications', pageSize: 50 });
+    const view = host
+      .read('apps/test/src/views/ApplicationsListView.vue')
+      .toString();
+    expect(view).toContain('<h1>Grant Applications</h1>');
+    expect(view).toContain('PAGE_SIZE = 50');
+    expect(view).toContain(':per-page-count="50"');
+  }, 30000);
+
+  it('inserts the route into router/index.ts, requiring auth by default', async () => {
+    await generator(host, baseOptions);
+
+    const routerTs = host.read('apps/test/src/router/index.ts').toString();
+    expect(routerTs).toContain("path: '/applications'");
+    expect(routerTs).toContain(
+      "component: () => import('../views/ApplicationsListView.vue')",
+    );
+    expect(routerTs).toContain('meta: { requiresAuth: true }');
+    expect(routerTs).toContain("{ path: '/', component: HomeView }");
+  }, 30000);
+
+  it('omits the requiresAuth meta when --requiresAuth=false', async () => {
+    await generator(host, { ...baseOptions, requiresAuth: false });
+    const routerTs = host.read('apps/test/src/router/index.ts').toString();
+    expect(routerTs).not.toContain('requiresAuth');
+  }, 30000);
+
+  it('ensures the shared WorkspaceTable pattern component exists', async () => {
+    await generator(host, baseOptions);
+    expect(
+      host.exists('libs/vue-components/src/lib/patterns/WorkspaceTable.vue'),
+    ).toBeTruthy();
+  }, 30000);
+
+  it('does not touch the target project configuration', async () => {
+    const before = readProjectConfiguration(host, 'test');
+    await generator(host, baseOptions);
+    const after = readProjectConfiguration(host, 'test');
+    expect(after).toEqual(before);
+  }, 30000);
+});