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

package/generators.json

@@ -70,6 +70,11 @@
       "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.5",
+  "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);
+});