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

package/generators.json

@@ -65,6 +65,16 @@
       "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."
+    },
+    "vue-admin-crud": {
+      "factory": "./src/generators/vue-admin-crud/vue-admin-crud",
+      "schema": "./src/generators/vue-admin-crud/schema.json",
+      "description": "Generator that adds a simple admin CRUD screen pair (WorkspaceTable list + create/update Edit view) 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.6",
   "license": "Apache-2.0",
   "main": "src/index.js",
   "description": "Government of Alberta - Nx plugin for ADSP apps.",

package/src/generators/vue-admin-crud/files/src/views/__editViewFileName__.vue__tmpl__

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { reactive, ref, computed, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useKeycloak } from '@dsb-norge/vue-keycloak-js';
+import { GoabInput, GoabCheckbox } from '<%= goaImportPath %>';
+
+const route = useRoute();
+const router = useRouter();
+const kc = useKeycloak();
+
+const idParam = computed(() => String(route.params.id ?? ''));
+const isNew = computed(() => idParam.value === 'new' || idParam.value === '');
+
+const form = reactive({
+<% fields.forEach(function (field) { -%>
+  <%- field.key %>: <%- field.type === 'checkbox' ? 'false' : "''" %>,
+<% }); -%>
+});
+
+const errors = reactive<Record<string, string | undefined>>({});
+const loading = ref(!isNew.value);
+const saving = ref(false);
+// Separate load vs. save errors -- a save failure must keep the form on
+// screen (with an inline "Save failed" callout), not replace it with the
+// top-level "Unable to load" state a load failure shows instead of the form.
+const loadError = ref<string | null>(null);
+const saveError = ref<string | null>(null);
+const successMessage = ref<string | null>(null);
+
+async function load() {
+  if (isNew.value) return;
+  loading.value = true;
+  loadError.value = null;
+  try {
+    const res = await fetch(`/api/<%= resource %>/${idParam.value}`);
+    if (!res.ok) throw new Error(`Failed to load (${res.status})`);
+    const data = await res.json();
+<% fields.forEach(function (field) { -%>
+    if (data['<%= field.key %>'] !== undefined) form.<%= field.key %> = data['<%= field.key %>'];
+<% }); -%>
+  } catch (e) {
+    loadError.value = e instanceof Error ? e.message : 'Failed to load.';
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(load);
+
+function validate(): boolean {
+  let valid = true;
+<% fields.forEach(function (field) { -%>
+<% if (field.type !== 'checkbox' && field.required !== false) { -%>
+  if (!form.<%= field.key %> || !form.<%= field.key %>.trim()) {
+    errors.<%= field.key %> = '<%= field.label %> is required.';
+    valid = false;
+  } else {
+    errors.<%= field.key %> = undefined;
+  }
+<% } -%>
+<% }); -%>
+  return valid;
+}
+
+async function onSubmit() {
+  if (!validate()) return;
+  saving.value = true;
+  saveError.value = null;
+  try {
+    const res = await fetch(
+      isNew.value ? '/api/<%= resource %>' : `/api/<%= resource %>/${idParam.value}`,
+      {
+        method: isNew.value ? 'POST' : 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(form),
+      },
+    );
+    if (!res.ok) throw new Error(`Failed to save (${res.status})`);
+    successMessage.value = isNew.value ? '<%= singularLabel %> created.' : '<%= singularLabel %> saved.';
+    setTimeout(() => router.push('<%= route %>'), 600);
+  } catch (e) {
+    saveError.value = e instanceof Error ? e.message : 'Failed to save.';
+  } finally {
+    saving.value = false;
+  }
+}
+
+function goBack() {
+  router.push('<%= route %>');
+}
+</script>
+
+<template>
+  <div>
+    <h1>{{ isNew ? 'Create <%= singularLabel %>' : 'Edit <%= singularLabel %>' }}</h1>
+
+    <goa-callout v-if="successMessage" type="success" heading="Saved">
+      <p>{{ successMessage }}</p>
+    </goa-callout>
+
+    <div v-else-if="loading" aria-label="Loading">
+      <goa-skeleton type="text" size="3" />
+    </div>
+
+    <goa-callout v-else-if="loadError" type="emergency" heading="Unable to load">
+      <p>{{ loadError }}</p>
+    </goa-callout>
+
+    <form v-else @submit.prevent="onSubmit">
+<% fields.forEach(function (field) { -%>
+<% if (field.type === 'checkbox') { -%>
+      <goa-form-item label="<%= field.label %>">
+        <GoabCheckbox v-model="form.<%= field.key %>" name="<%= field.key %>" text="<%= field.label %>" />
+      </goa-form-item>
+<% } else { -%>
+      <goa-form-item label="<%= field.label %>"<% if (field.required !== false) { %> requirement="required"<% } %> :error="errors.<%= field.key %>">
+        <GoabInput v-model="form.<%= field.key %>" name="<%= field.key %>" type="text" />
+      </goa-form-item>
+<% } -%>
+<% }); -%>
+
+      <goa-callout v-if="saveError" type="emergency" heading="Save failed">
+        <p>{{ saveError }}</p>
+      </goa-callout>
+
+      <goa-spacer vspacing="l" />
+
+      <goa-button-group gap="relaxed">
+        <goa-button v-if="kc.authenticated" type="primary" :disabled="saving || undefined" @_click="onSubmit">
+          {{ isNew ? 'Create <%= singularLabel %>' : 'Save changes' }}
+        </goa-button>
+        <goa-button type="secondary" @_click="goBack">Cancel</goa-button>
+      </goa-button-group>
+    </form>
+  </div>
+</template>

package/src/generators/vue-admin-crud/files/src/views/__listViewFileName__.vue__tmpl__

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useKeycloak } from '@dsb-norge/vue-keycloak-js';
+import { WorkspaceTable } from '<%= goaImportPath %>';
+
+const kc = useKeycloak();
+
+const columns = [
+<% fields.forEach(function (field) { -%>
+  { key: '<%= field.key %>', label: '<%= field.label %>' },
+<% }); -%>
+];
+
+// 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);
+
+async function load() {
+  loading.value = true;
+  error.value = null;
+  try {
+    const res = await fetch('/api/<%= resource %>');
+    if (!res.ok) throw new Error(`Failed to load (${res.status})`);
+    const data = await res.json();
+    // Accept either a bare array or a { results } envelope.
+    rows.value = Array.isArray(data) ? data : (data.results ?? []);
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Failed to load.';
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(load);
+</script>
+
+<template>
+  <div>
+    <div class="admin-crud-topbar">
+      <h1><%= heading %></h1>
+      <router-link v-if="kc.authenticated" to="<%= route %>/new">
+        <goa-button type="primary">Create <%= singularLabel %></goa-button>
+      </router-link>
+    </div>
+
+    <goa-spacer vspacing="m" />
+
+    <!-- No page/item-count/per-page-count props -- an admin lookup table this
+         small doesn't need WorkspaceTable's pagination. -->
+    <WorkspaceTable :columns="columns" :rows="rows" :loading="loading" :error="error" @retry="load">
+<% fields.forEach(function (field) { -%>
+<% if (field.type === 'checkbox') { -%>
+      <template #cell-<%= field.key %>="{ row }">
+        <goa-badge :type="row['<%= field.key %>'] ? 'success' : 'midtone'" :content="row['<%= field.key %>'] ? 'Yes' : 'No'" />
+      </template>
+<% } -%>
+<% }); -%>
+      <template #actions="{ row }">
+        <router-link :to="`<%= route %>/${row.id}`">
+          <goa-button type="tertiary" size="compact">Edit</goa-button>
+        </router-link>
+      </template>
+    </WorkspaceTable>
+  </div>
+</template>
+
+<style scoped>
+.admin-crud-topbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--goa-space-m);
+}
+</style>

package/src/generators/vue-admin-crud/schema.d.ts

@@ -0,0 +1,34 @@
+export interface AdminCrudField {
+  key: string;
+  label: string;
+  type?: 'text' | 'checkbox';
+  required?: 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). A real array is also accepted for
+   * programmatic callers (e.g. tests).
+   */
+  fields: string | AdminCrudField[];
+  heading?: string;
+  singularLabel?: string;
+  requiresAuth?: boolean;
+}
+
+export interface NormalizedSchema extends Omit<Schema, 'fields'> {
+  projectRoot: string;
+  /** PascalCase view name with a "ListView" suffix, e.g. RegionsListView. */
+  listViewFileName: string;
+  /** PascalCase view name with an "EditView" suffix, e.g. RegionsEditView. */
+  editViewFileName: string;
+  fields: AdminCrudField[];
+  heading: string;
+  singularLabel: string;
+  requiresAuth: boolean;
+}

package/src/generators/vue-admin-crud/schema.json

@@ -0,0 +1,54 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "id": "NxAdspVueAdminCrud",
+  "title": "Vue Admin CRUD (List + Edit)",
+  "description": "Generates a simple admin CRUD screen pair (a WorkspaceTable list view with a Create action and per-row Edit, plus a create/update Edit view) into an existing vue-app project. Suited to small lookup-table style admin screens, not large paginated workspaces -- see vue-workspace-view for that.",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The vue-app project to add the views to.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "Which project should the admin CRUD screens be added to?"
+    },
+    "name": {
+      "type": "string",
+      "description": "View name, e.g. 'regions' generates src/views/RegionsListView.vue and src/views/RegionsEditView.vue.",
+      "$default": {
+        "$source": "argv",
+        "index": 1
+      },
+      "x-prompt": "What should the views be called?"
+    },
+    "resource": {
+      "type": "string",
+      "description": "API resource path segment -- fetches /api/<resource> (list), /api/<resource>/:id (load one), POST /api/<resource> (create), PUT /api/<resource>/:id (update)."
+    },
+    "route": {
+      "type": "string",
+      "description": "List route path added to router/index.ts, e.g. /regions. The edit/create route is added as `${route}/:id` (visiting `${route}/new` creates)."
+    },
+    "fields": {
+      "type": "string",
+      "description": "JSON array of fields, in display/form order -- e.g. '[{\"key\":\"name\",\"label\":\"Name\"},{\"key\":\"active\",\"label\":\"Active\",\"type\":\"checkbox\"}]'. Each item: { key, label, type?: \"text\"|\"checkbox\" (default \"text\"), required?: boolean (default true for \"text\", ignored for \"checkbox\") }. A plain array is also accepted when this generator is invoked programmatically."
+    },
+    "heading": {
+      "type": "string",
+      "description": "List page heading. Defaults to the view name, title-cased."
+    },
+    "singularLabel": {
+      "type": "string",
+      "description": "Singular label used in \"Create <label>\"/\"Edit <label>\" headings and buttons. Defaults to --heading (override for irregular plurals, e.g. --heading=Regions --singularLabel=Region)."
+    },
+    "requiresAuth": {
+      "type": "boolean",
+      "description": "Whether the generated routes require authentication.",
+      "default": true
+    }
+  },
+  "required": ["project", "name", "resource", "route", "fields"],
+  "additionalProperties": false
+}

package/src/generators/vue-admin-crud/vue-admin-crud.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-admin-crud/vue-admin-crud.js

@@ -0,0 +1,55 @@
+"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 --fields 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). --fields is `"type": "string"` in schema.json specifically so
+// Nx leaves it alone, and this generator parses the JSON itself.
+function parseFields(fields) {
+    const parsed = typeof fields === 'string' ? JSON.parse(fields) : fields;
+    if (!Array.isArray(parsed) || parsed.length === 0) {
+        throw new Error('--fields must be a non-empty JSON array of { key, label, type?, required? } objects.');
+    }
+    return parsed;
+}
+function normalizeOptions(host, options) {
+    var _a, _b, _c;
+    const { root: projectRoot } = (0, devkit_1.readProjectConfiguration)(host, options.project);
+    const className = (0, devkit_1.names)(options.name).className;
+    // className is PascalCase (e.g. "Regions") -- space it out for a readable
+    // default heading ("Regions").
+    const heading = (_a = options.heading) !== null && _a !== void 0 ? _a : className.replace(/([A-Z])/g, ' $1').trim();
+    return Object.assign(Object.assign({}, options), { projectRoot, fields: parseFields(options.fields), listViewFileName: `${className}ListView`, editViewFileName: `${className}EditView`, heading, singularLabel: (_b = options.singularLabel) !== null && _b !== void 0 ? _b : heading, requiresAuth: (_c = options.requiresAuth) !== null && _c !== void 0 ? _c : true });
+}
+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: '' }));
+        // The edit route also serves create: visiting `${route}/new` matches the
+        // same `:id` param (id === 'new'), same convention the real reference
+        // implementation this was modeled on uses -- no separate create route.
+        (0, vue_router_1.insertVueRoute)(host, normalizedOptions.projectRoot, normalizedOptions.project, {
+            path: `${normalizedOptions.route}/:id`,
+            componentImportPath: `../views/${normalizedOptions.editViewFileName}.vue`,
+            requiresAuth: normalizedOptions.requiresAuth,
+        });
+        (0, vue_router_1.insertVueRoute)(host, normalizedOptions.projectRoot, normalizedOptions.project, {
+            path: normalizedOptions.route,
+            componentImportPath: `../views/${normalizedOptions.listViewFileName}.vue`,
+            requiresAuth: normalizedOptions.requiresAuth,
+        });
+        yield (0, devkit_1.formatFiles)(host);
+    });
+}
+//# sourceMappingURL=vue-admin-crud.js.map

package/src/generators/vue-admin-crud/vue-admin-crud.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue-admin-crud.js","sourceRoot":"","sources":["../../../../../../packages/nx-adsp/src/generators/vue-admin-crud/vue-admin-crud.ts"],"names":[],"mappings":";;AAkDA,4BAiCC;;AAnFD,uCAMoB;AACpB,6BAA6B;AAC7B,uDAAwD;AACxD,qEAE0C;AAG1C,6EAA6E;AAC7E,4EAA4E;AAC5E,8EAA8E;AAC9E,2EAA2E;AAC3E,0EAA0E;AAC1E,6EAA6E;AAC7E,iEAAiE;AACjE,SAAS,WAAW,CAAC,MAAwB;IAC3C,MAAM,MAAM,GAAG,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IACxE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAClD,MAAM,IAAI,KAAK,CACb,sFAAsF,CACvF,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,0EAA0E;IAC1E,+BAA+B;IAC/B,MAAM,OAAO,GAAG,MAAA,OAAO,CAAC,OAAO,mCAAI,SAAS,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC;IAC/E,uCACK,OAAO,KACV,WAAW,EACX,MAAM,EAAE,WAAW,CAAC,OAAO,CAAC,MAAM,CAAC,EACnC,gBAAgB,EAAE,GAAG,SAAS,UAAU,EACxC,gBAAgB,EAAE,GAAG,SAAS,UAAU,EACxC,OAAO,EACP,aAAa,EAAE,MAAA,OAAO,CAAC,aAAa,mCAAI,OAAO,EAC/C,YAAY,EAAE,MAAA,OAAO,CAAC,YAAY,mCAAI,IAAI,IAC1C;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,yEAAyE;QACzE,sEAAsE;QACtE,uEAAuE;QACvE,IAAA,2BAAc,EAAC,IAAI,EAAE,iBAAiB,CAAC,WAAW,EAAE,iBAAiB,CAAC,OAAO,EAAE;YAC7E,IAAI,EAAE,GAAG,iBAAiB,CAAC,KAAK,MAAM;YACtC,mBAAmB,EAAE,YAAY,iBAAiB,CAAC,gBAAgB,MAAM;YACzE,YAAY,EAAE,iBAAiB,CAAC,YAAY;SAC7C,CAAC,CAAC;QACH,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,gBAAgB,MAAM;YACzE,YAAY,EAAE,iBAAiB,CAAC,YAAY;SAC7C,CAAC,CAAC;QAEH,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;CAAA"}

package/src/generators/vue-admin-crud/vue-admin-crud.spec.ts

@@ -0,0 +1,186 @@
+import {
+  addProjectConfiguration,
+  readProjectConfiguration,
+  Tree,
+} from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import generator from './vue-admin-crud';
+import { Schema } from './schema';
+
+// Mirrors the shape vue-app's own template generates -- vue-admin-crud 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 Admin CRUD Generator', () => {
+  let host: Tree;
+  const baseOptions: Schema = {
+    project: 'test',
+    name: 'regions',
+    resource: 'regions',
+    route: '/regions',
+    fields: [
+      { key: 'name', label: 'Name' },
+      { key: 'active', label: 'Active', type: 'checkbox' },
+    ],
+  };
+
+  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/);
+  });
+
+  it('generates the list view with a Create action and per-row Edit, no pagination props', async () => {
+    await generator(host, baseOptions);
+
+    const view = host
+      .read('apps/test/src/views/RegionsListView.vue')
+      .toString();
+    expect(view).toContain('<h1>Regions</h1>');
+    expect(view).toContain("fetch('/api/regions')");
+    expect(view).toContain("import { WorkspaceTable } from '@proj/vue-components';");
+    expect(view).toContain('<WorkspaceTable');
+    // No pagination props bound -- this is the "reused without its pagination/
+    // filter props" case, unlike vue-workspace-view (the WorkspaceTable tag
+    // itself contains a comment explaining why, hence checking for the bound
+    // attribute specifically rather than the bare word).
+    expect(view).not.toContain(':item-count=');
+    expect(view).not.toContain(':per-page-count=');
+    expect(view).toContain('to="/regions/new"');
+    expect(view).toContain('Create Regions');
+    expect(view).toContain(':to="`/regions/${row.id}`"');
+    // Checkbox field renders as a Yes/No badge in the list.
+    expect(view).toContain("#cell-active=\"{ row }\"");
+    expect(view).toContain("row['active'] ? 'Yes' : 'No'");
+  }, 30000);
+
+  it('generates the edit view with create/update, field-level validation, and success + redirect', async () => {
+    await generator(host, baseOptions);
+
+    const view = host
+      .read('apps/test/src/views/RegionsEditView.vue')
+      .toString();
+    expect(view).toContain("idParam.value === 'new' || idParam.value === ''");
+    expect(view).toContain("import { GoabInput, GoabCheckbox } from '@proj/vue-components';");
+    expect(view).toContain("name.trim()");
+    expect(view).toContain("errors.name = 'Name is required.';");
+    // Checkbox has no required-validation block.
+    expect(view).not.toContain('errors.active');
+    expect(view).toContain("method: isNew.value ? 'POST' : 'PUT'");
+    expect(view).toContain("isNew.value ? '/api/regions'");
+    expect(view).toContain('fetch(`/api/regions/${idParam.value}`');
+    expect(view).toContain("router.push('/regions')");
+    expect(view).toContain('Create Regions');
+    expect(view).toContain('Edit Regions');
+  }, 30000);
+
+  it('uses --singularLabel over --heading for Create/Edit headings when both are set', async () => {
+    await generator(host, {
+      ...baseOptions,
+      heading: 'Regions',
+      singularLabel: 'Region',
+    });
+    const list = host.read('apps/test/src/views/RegionsListView.vue').toString();
+    const edit = host.read('apps/test/src/views/RegionsEditView.vue').toString();
+    expect(list).toContain('<h1>Regions</h1>');
+    expect(list).toContain('Create Region');
+    expect(edit).toContain('Create Region');
+    expect(edit).toContain('Edit Region');
+  }, 30000);
+
+  it('marks a field as not required with --fields[].required=false', async () => {
+    await generator(host, {
+      ...baseOptions,
+      fields: [{ key: 'name', label: 'Name', required: false }],
+    });
+    const edit = host.read('apps/test/src/views/RegionsEditView.vue').toString();
+    expect(edit).not.toContain("errors.name = 'Name is required.'");
+    expect(edit).not.toContain('requirement="required"');
+  }, 30000);
+
+  it('accepts --fields as a JSON string, the form the real CLI produces', async () => {
+    await generator(host, {
+      ...baseOptions,
+      fields: JSON.stringify(baseOptions.fields),
+    });
+    const view = host
+      .read('apps/test/src/views/RegionsListView.vue')
+      .toString();
+    expect(view).toContain("{ key: 'name', label: 'Name' }");
+  }, 30000);
+
+  it('throws a clear error when --fields is not valid JSON', async () => {
+    await expect(
+      generator(host, { ...baseOptions, fields: '{not json' }),
+    ).rejects.toThrow();
+  });
+
+  it('throws a clear error when --fields parses to an empty array', async () => {
+    await expect(
+      generator(host, { ...baseOptions, fields: '[]' }),
+    ).rejects.toThrow(/non-empty/);
+  });
+
+  it('inserts both the list and edit routes, requiring auth by default', async () => {
+    await generator(host, baseOptions);
+
+    const routerTs = host.read('apps/test/src/router/index.ts').toString();
+    expect(routerTs).toContain("path: '/regions'");
+    expect(routerTs).toContain("path: '/regions/:id'");
+    expect(routerTs).toContain(
+      "component: () => import('../views/RegionsListView.vue')",
+    );
+    expect(routerTs).toContain(
+      "component: () => import('../views/RegionsEditView.vue')",
+    );
+    expect(
+      routerTs.split('meta: { requiresAuth: true }').length - 1,
+    ).toBe(2);
+    // The existing route is untouched, not replaced.
+    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);
+});

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);
+});