@abgov/nx-adsp 13.28.1 → 13.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/nx-adsp",
-  "version": "13.28.1",
+  "version": "13.30.0",
   "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__

@@ -2,7 +2,27 @@
 import { reactive, ref, computed, watch, onUnmounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useKeycloak } from '@dsb-norge/vue-keycloak-js';
-import { GoabInput, GoabCheckbox } from '<%= goaImportPath %>';
+import {
+<% if (fields.some((f) => !f.type || f.type === 'text' || f.type === 'number')) { -%>
+  GoabInput,
+<% } -%>
+<% if (fields.some((f) => f.type === 'textarea')) { -%>
+  GoabTextarea,
+<% } -%>
+<% if (fields.some((f) => f.type === 'date')) { -%>
+  GoabDatePicker,
+<% } -%>
+<% if (fields.some((f) => f.type === 'select')) { -%>
+  GoabDropdown,
+<% } -%>
+<% if (fields.some((f) => f.type === 'checkbox')) { -%>
+  GoabCheckbox,
+<% } -%>
+<% if (fields.some((f) => f.type === 'date')) { -%>
+  fromIsoDateString,
+  toIsoDateString,
+<% } -%>
+} from '<%= goaImportPath %>';
 import { useApi } from '../composables/useApi';
 
 const route = useRoute();
@@ -15,7 +35,7 @@ const isNew = computed(() => idParam.value === 'new' || idParam.value === '');
 
 const form = reactive({
 <% fields.forEach(function (field) { -%>
-  <%- field.key %>: <%- field.type === 'checkbox' ? 'false' : "''" %>,
+  <%- field.key %>: <%- field.type === 'checkbox' ? 'false' : field.type === 'date' ? 'undefined as Date | undefined' : "''" %>,
 <% }); -%>
 });
 
@@ -37,7 +57,15 @@ async function load() {
   try {
     const data = await get('<%= resource %>', idParam.value);
 <% fields.forEach(function (field) { -%>
+<% if (field.type === 'date') { -%>
+    if (data['<%= field.key %>'] !== undefined)
+      form.<%= field.key %> = fromIsoDateString(data['<%= field.key %>']);
+<% } else if (field.type === 'number') { -%>
+    if (data['<%= field.key %>'] !== undefined)
+      form.<%= field.key %> = String(data['<%= field.key %>']);
+<% } else { -%>
     if (data['<%= field.key %>'] !== undefined) form.<%= field.key %> = data['<%= field.key %>'];
+<% } -%>
 <% }); -%>
   } catch (e) {
     loadError.value = e instanceof Error ? e.message : 'Failed to load.';
@@ -77,6 +105,24 @@ function validate(): boolean {
   let valid = true;
 <% fields.forEach(function (field) { -%>
 <% if (field.type !== 'checkbox' && field.required !== false) { -%>
+<% if (field.type === 'date') { -%>
+  if (!form.<%= field.key %>) {
+    errors.<%= field.key %> = '<%= field.label %> is required.';
+    valid = false;
+  } else {
+    errors.<%= field.key %> = undefined;
+  }
+<% } else if (field.type === 'number') { -%>
+  if (form.<%= field.key %> === '') {
+    errors.<%= field.key %> = '<%= field.label %> is required.';
+    valid = false;
+  } else if (!Number.isFinite(Number(form.<%= field.key %>))) {
+    errors.<%= field.key %> = '<%= field.label %> must be a number.';
+    valid = false;
+  } else {
+    errors.<%= field.key %> = undefined;
+  }
+<% } else { -%>
   if (!form.<%= field.key %> || !form.<%= field.key %>.trim()) {
     errors.<%= field.key %> = '<%= field.label %> is required.';
     valid = false;
@@ -84,17 +130,41 @@ function validate(): boolean {
     errors.<%= field.key %> = undefined;
   }
 <% } -%>
+<% } else if (field.type === 'number') { -%>
+  if (form.<%= field.key %> !== '' && !Number.isFinite(Number(form.<%= field.key %>))) {
+    errors.<%= field.key %> = '<%= field.label %> must be a number.';
+    valid = false;
+  } else {
+    errors.<%= field.key %> = undefined;
+  }
+<% } -%>
 <% }); -%>
   return valid;
 }
 
+// The form model holds what each CONTROL needs (a Date for a picker, a string
+// for a number input); the API wants wire types. Converting here keeps that
+// difference in one place instead of at every call site.
+function payload() {
+  return {
+    ...form,
+<% fields.forEach(function (field) { -%>
+<% if (field.type === 'number') { -%>
+    <%- field.key %>: form.<%- field.key %> === '' ? null : Number(form.<%- field.key %>),
+<% } else if (field.type === 'date') { -%>
+    <%- field.key %>: toIsoDateString(form.<%- field.key %>) || null,
+<% } -%>
+<% }); -%>
+  };
+}
+
 async function onSubmit() {
   if (!validate()) return;
   saving.value = true;
   saveError.value = null;
   try {
     // Create vs. update — which verb and path that means is the adapter's call.
-    await save('<%= resource %>', isNew.value ? null : idParam.value, form);
+    await save('<%= resource %>', isNew.value ? null : idParam.value, payload());
     successMessage.value = isNew.value ? '<%= singularLabel %> created.' : '<%= singularLabel %> saved.';
     redirectTimer = setTimeout(() => router.push('<%= route %>'), 600);
   } catch (e) {
@@ -135,12 +205,28 @@ onUnmounted(() => {
     <form v-else @submit.prevent="onSubmit">
 <% fields.forEach(function (field) { -%>
 <% if (field.type === 'checkbox') { -%>
-      <goa-form-item label="<%= field.label %>">
+      <!-- The checkbox carries its own label via `text`; goa-form-item must not
+           repeat it, or it renders twice. -->
+      <goa-form-item>
         <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 %>">
+<% if (field.type === 'textarea') { -%>
+        <GoabTextarea v-model="form.<%= field.key %>" name="<%= field.key %>" />
+<% } else if (field.type === 'number') { -%>
+        <GoabInput v-model="form.<%= field.key %>" name="<%= field.key %>" type="number" />
+<% } else if (field.type === 'date') { -%>
+        <GoabDatePicker v-model="form.<%= field.key %>" name="<%= field.key %>" />
+<% } else if (field.type === 'select') { -%>
+        <GoabDropdown v-model="form.<%= field.key %>" name="<%= field.key %>">
+<% (field.options || []).forEach(function (option) { -%>
+          <goa-dropdown-item value="<%- option.value %>" label="<%- option.label %>" />
+<% }); -%>
+        </GoabDropdown>
+<% } else { -%>
         <GoabInput v-model="form.<%= field.key %>" name="<%= field.key %>" type="text" />
+<% } -%>
       </goa-form-item>
 <% } -%>
 <% }); -%>

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

@@ -1,7 +1,9 @@
 export interface AdminCrudField {
   key: string;
   label: string;
-  type?: 'text' | 'checkbox';
+  type?: 'text' | 'textarea' | 'number' | 'date' | 'select' | 'checkbox';
+  /** `select` only. Rendered as goa-dropdown-item children. */
+  options?: { value: string; label: string }[];
   required?: boolean;
 }
 

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

@@ -33,7 +33,7 @@
     },
     "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."
+      "description": "JSON array of fields, in display/form order -- e.g. '[{\"key\":\"name\",\"label\":\"Name\"},{\"key\":\"quota\",\"label\":\"Quota\",\"type\":\"number\"},{\"key\":\"region\",\"label\":\"Region\",\"type\":\"select\",\"options\":[{\"value\":\"north\",\"label\":\"North\"}]}]'. Each item: { key, label, type?: \"text\"|\"textarea\"|\"number\"|\"date\"|\"select\"|\"checkbox\" (default \"text\"), options?: [{value,label}] (select only), required?: boolean }. A number field is submitted as a number and a date as YYYY-MM-DD built from local calendar parts. A plain array is also accepted when 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 survives Nx's own arg parsing."
     },
     "heading": {
       "type": "string",
@@ -49,6 +49,12 @@
       "default": true
     }
   },
-  "required": ["project", "name", "resource", "route", "fields"],
+  "required": [
+    "project",
+    "name",
+    "resource",
+    "route",
+    "fields"
+  ],
   "additionalProperties": false
 }

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

@@ -5,6 +5,7 @@ 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_side_menu_1 = require("../../utils/vue-side-menu");
 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
@@ -20,6 +21,24 @@ function parseFields(fields) {
     }
     return parsed;
 }
+const FIELD_TYPES = [
+    'text',
+    'textarea',
+    'number',
+    'date',
+    'select',
+    'checkbox',
+];
+function assertFieldTypes(fields) {
+    for (const field of fields) {
+        if (field.type && !FIELD_TYPES.includes(field.type)) {
+            throw new Error(`--fields[].type must be one of ${FIELD_TYPES.join(', ')}; got "${field.type}" for "${field.key}".`);
+        }
+        if (field.type === 'select' && !Array.isArray(field.options)) {
+            throw new Error(`--fields[].options is required for the select field "${field.key}" -- the generator cannot know its choices.`);
+        }
+    }
+}
 function normalizeOptions(host, options) {
     var _a, _b, _c;
     const { root: projectRoot } = (0, devkit_1.readProjectConfiguration)(host, options.project);
@@ -27,7 +46,11 @@ function normalizeOptions(host, options) {
     // 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 });
+    return Object.assign(Object.assign({}, options), { projectRoot, fields: (() => {
+            const fields = parseFields(options.fields);
+            assertFieldTypes(fields);
+            return 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* () {
@@ -51,6 +74,11 @@ function default_1(host, options) {
             requiresAuth: normalizedOptions.requiresAuth,
             layout: 'wide',
         });
+        // The list is the nav destination; the edit form is reached from it.
+        (0, vue_side_menu_1.insertSideMenuItem)(host, normalizedOptions.projectRoot, {
+            label: normalizedOptions.heading,
+            to: normalizedOptions.route,
+        });
         yield (0, devkit_1.formatFiles)(host);
     });
 }

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

@@ -1 +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,4BAmCC;;AArFD,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;YAC5C,MAAM,EAAE,MAAM;SACf,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;YAC5C,MAAM,EAAE,MAAM;SACf,CAAC,CAAC;QAEH,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;CAAA"}
+{"version":3,"file":"vue-admin-crud.js","sourceRoot":"","sources":["../../../../../../packages/nx-adsp/src/generators/vue-admin-crud/vue-admin-crud.ts"],"names":[],"mappings":"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"}

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

@@ -94,7 +94,11 @@ describe('Vue Admin CRUD Generator', () => {
     expect(view).not.toContain('errors.active');
     // Create vs. update is expressed as a null id; which verb and path that
     // becomes is decided by useApi's adapter.
-    expect(view).toContain("await save('regions', isNew.value ? null : idParam.value, form)");
+    // payload(), not the raw form: the model holds what the controls need, the
+    // API wants wire types.
+    expect(view).toContain(
+      "await save('regions', isNew.value ? null : idParam.value, payload())",
+    );
     expect(view).toContain("await get('regions', idParam.value)");
     expect(view).not.toContain('apiFetch');
     expect(view).not.toContain("'PUT'");
@@ -117,6 +121,104 @@ describe('Vue Admin CRUD Generator', () => {
     expect(view).toContain('Edit Regions');
   }, 30000);
 
+  describe('field types', () => {
+    const allTypes = JSON.stringify([
+      { key: 'name', label: 'Name' },
+      { key: 'notes', label: 'Notes', type: 'textarea', required: false },
+      { key: 'quota', label: 'Quota', type: 'number' },
+      { key: 'effective', label: 'Effective', type: 'date' },
+      {
+        key: 'region',
+        label: 'Region',
+        type: 'select',
+        options: [
+          { value: 'north', label: 'North' },
+          { value: 'south', label: 'South' },
+        ],
+      },
+      { key: 'active', label: 'Active', type: 'checkbox' },
+    ]);
+
+    it('renders the right control for each type', async () => {
+      await generator(host, { ...baseOptions, fields: allTypes });
+      const view = host
+        .read('apps/test/src/views/RegionsEditView.vue')
+        .toString();
+      expect(view).toContain('<GoabInput v-model="form.name"');
+      expect(view).toContain('<GoabTextarea v-model="form.notes"');
+      expect(view).toContain('type="number"');
+      expect(view).toContain('<GoabDatePicker v-model="form.effective"');
+      expect(view).toContain('<GoabDropdown v-model="form.region"');
+      expect(view).toContain('<goa-dropdown-item value="north" label="North" />');
+      expect(view).toContain('<GoabCheckbox v-model="form.active"');
+    });
+
+    it('imports only the wrappers the field set actually uses', async () => {
+      await generator(host, {
+        ...baseOptions,
+        fields: JSON.stringify([{ key: 'name', label: 'Name' }]),
+      });
+      const view = host
+        .read('apps/test/src/views/RegionsEditView.vue')
+        .toString();
+      expect(view).toContain('GoabInput');
+      for (const unused of ['GoabTextarea', 'GoabDatePicker', 'GoabDropdown']) {
+        expect(view).not.toContain(unused);
+      }
+    });
+
+    it('submits a number as a number and a date as a local-calendar string', async () => {
+      await generator(host, { ...baseOptions, fields: allTypes });
+      const view = host
+        .read('apps/test/src/views/RegionsEditView.vue')
+        .toString();
+      expect(view).toContain("quota: form.quota === '' ? null : Number(form.quota)");
+      expect(view).toContain('effective: toIsoDateString(form.effective) || null');
+      // A stored YYYY-MM-DD comes back as a Date the picker can redisplay.
+      expect(view).toContain("fromIsoDateString(data['effective'])");
+    });
+
+    it('validates by type, not by assuming every value is a string', async () => {
+      await generator(host, { ...baseOptions, fields: allTypes });
+      const view = host
+        .read('apps/test/src/views/RegionsEditView.vue')
+        .toString();
+      // A number field's required check cannot be !value.trim().
+      expect(view).toContain("if (form.quota === '')");
+      expect(view).toContain('Quota must be a number.');
+      // A date field holds a Date, so truthiness is the check.
+      expect(view).toContain('if (!form.effective)');
+    });
+
+    it('does not label a checkbox twice', async () => {
+      await generator(host, { ...baseOptions, fields: allTypes });
+      const view = host
+        .read('apps/test/src/views/RegionsEditView.vue')
+        .toString();
+      // goa-form-item must not repeat the label the checkbox already carries.
+      expect(view).not.toContain('<goa-form-item label="Active"');
+      expect(view).toContain('text="Active"');
+    });
+
+    it('rejects a type it cannot render', async () => {
+      await expect(
+        generator(host, {
+          ...baseOptions,
+          fields: JSON.stringify([{ key: 'x', label: 'X', type: 'colour' }]),
+        }),
+      ).rejects.toThrow('got "colour" for "x"');
+    });
+
+    it('requires options for a select, since it cannot know the choices', async () => {
+      await expect(
+        generator(host, {
+          ...baseOptions,
+          fields: JSON.stringify([{ key: 'r', label: 'R', type: 'select' }]),
+        }),
+      ).rejects.toThrow(/options is required for the select field "r"/);
+    });
+  });
+
   it('uses --singularLabel over --heading for Create/Edit headings when both are set', async () => {
     await generator(host, {
       ...baseOptions,

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

@@ -234,34 +234,31 @@ mark what's meant to be edited.
    { path: '/queue', component: () => import('../views/QueueView.vue'), meta: { layout: 'wide' } }
    { path: '/apply', component: () => import('../views/ApplyView.vue'), meta: { layout: 'form' } }
    ```
-3. **For the `internal` layout: add a nav link to `src/App.vue`.** The generated shell only
-   populates `accountItems`; primary navigation lives in `primaryItems` (or `secondaryItems`).
-   `AppSideMenu` emits one `itemClick` for all slots — the generated `onItemClick` already
-   dispatches by `item.to`: items with a `to` route, items without sign in/out. Add only
-   `primaryItems`:
+3. **For the `internal` layout: check the side-menu nav.** `src/App.vue` has a plain
+   `primaryItems` array — the app's own navigation list, seeded with Home. Each `vue-*-view`
+   generator that adds a staff screen appends its entry automatically, so a generated route is
+   navigable without you doing anything.
+
+   It is a literal array, not derived from the router, on purpose: nav order, grouping and
+   labels are decisions this app owns. Reorder, relabel, group into `secondaryItems`, or prune
+   freely — the generators only ever append, and never touch an entry that already exists for
+   that route.
 
    ```typescript
-   // In <script setup> — route, router, and onItemClick are already in the generated App.vue:
-   // Icon names from the GoA icon set: design.alberta.ca/components/icons
-   const primaryItems = computed(() => [
-     { label: 'Home',       to: '/',           icon: 'home', current: route.path === '/' },
-     { label: 'My Feature', to: '/my-feature', icon: 'list', current: route.path.startsWith('/my-feature') },
-   ])
+   const primaryItems = [
+     { label: 'Home', to: '/', icon: 'home' },
+     { label: 'Review queue', to: '/queue' },   // added by vue-workspace-view
+   ];
    ```
 
-   ```html
-   <!-- In <template>, add :primary-items to <AppSideMenu>
-        (@item-click="onItemClick" is already wired in the generated shell): -->
-   <AppSideMenu
-     heading="..."
-     :primary-items="primaryItems"
-     :account-items="accountItems"
-     @item-click="onItemClick"
-   >
-   ```
+   Two things worth adding by hand: **`icon`** is effectively required —
+   `goa-work-side-menu-item` renders a blank item without one, and the generators can't guess it
+   (icon names: [design.alberta.ca/components/icons](https://design.alberta.ca/components/icons)).
+   And **`current`** for active highlighting, e.g. `current: route.path.startsWith('/queue')`,
+   which needs the `route` already in scope.
 
-   The `header` layout has no side menu — add route-level breadcrumbs or a secondary nav
-   directly inside the view component instead.
+   The `header` layout has no side menu, so it has no `primaryItems` array and the generators
+   skip the step silently — use route-level breadcrumbs or a nav inside the view instead.
 
 ## Backend API calls (proxy setup)
 

package/src/generators/vue-app/files/src/App.vue__tmpl__

@@ -32,6 +32,14 @@ function signInAgain() {
 }
 <% if (layout === 'internal') { %>
 
+// The app's main navigation. Every `vue-*-view` generator that adds a staff
+// screen appends an entry here, and it is yours to reorder, relabel, group or
+// prune -- a generated app is a starting point, not a fixed shell. Items are
+// `{ label, to }`; add `icon` for a leading icon or `badge` for a count.
+const primaryItems = [
+  { label: 'Home', to: '/' },
+];
+
 // AppSideMenu's items are presentational — it doesn't know about Keycloak or
 // routing; it just renders whatever's passed and emits itemClick on click.
 const accountItems = computed(() => [
@@ -56,6 +64,7 @@ function onItemClick(item: { to?: string }) {
 <% if (layout === 'internal') { %>
   <AppSideMenu
     heading="<%= projectName %>"
+    :primary-items="primaryItems"
     :account-items="accountItems"
     @item-click="onItemClick"
   >

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

@@ -193,6 +193,12 @@ describe('Vue App Generator', () => {
     expect(app).toContain('<AppFooter />');
   }, 30000);
 
+  it('the header layout has no side-menu nav array (there is no side menu)', async () => {
+    await generator(host, options);
+    const app = host.read('apps/test/src/App.vue').toString();
+    expect(app).not.toContain('primaryItems');
+  });
+
   it('--layout=internal generates an AppSideMenu shell instead of AppHeader/AppFooter', async () => {
     await generator(host, { ...options, layout: 'internal' });
 
@@ -206,6 +212,12 @@ describe('Vue App Generator', () => {
     expect(app).toContain('<AppSideMenu');
     expect(app).toContain('heading="test"');
     expect(app).toContain(':account-items="accountItems"');
+    // A plain, editable nav array -- the app's own list, seeded with Home and
+    // appended to by each staff view generator. Not derived from the router:
+    // nav order, grouping and labels are the owning team's decisions.
+    expect(app).toContain(':primary-items="primaryItems"');
+    expect(app).toContain('const primaryItems = [');
+    expect(app).toContain("{ label: 'Home', to: '/' },");
     expect(app).toContain('@item-click="onItemClick"');
     // The content gutter is shared regardless of shell choice.
     expect(app).toContain('<AppLayout');

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

@@ -34,6 +34,8 @@ export { default as StepErrorSummary } from './lib/patterns/StepErrorSummary.vue
 export { default as FilterBar } from './lib/patterns/FilterBar.vue';
 
 export {
+  fromIsoDateString,
+  toIsoDateString,
   formatCurrency,
   formatDate,
   formatDateTime,

package/src/generators/vue-components/files/src/lib/formatters.ts__tmpl__

@@ -62,6 +62,29 @@ function toValidDate(value: unknown): Date | null {
   return Number.isNaN(date.getTime()) ? null : date;
 }
 
+/**
+ * A Date as local-calendar YYYY-MM-DD, for the wire -- a query parameter, a JSON
+ * body. NOT display: use formatDate for that.
+ *
+ * Built from local parts, never toISOString(): that routes through UTC, and the
+ * UTC day of a local-midnight Date is the previous day anywhere west of
+ * Greenwich. In Alberta (UTC-6/-7) it files every date one day early.
+ */
+export function toIsoDateString(value: unknown): string {
+  const date = toValidDate(value);
+  if (!date) return '';
+  const pad = (part: number) => String(part).padStart(2, '0');
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+
+/**
+ * The inverse: a stored YYYY-MM-DD back to a Date at local midnight, so the
+ * calendar date a user picked is the calendar date a picker redisplays.
+ */
+export function fromIsoDateString(value: unknown): Date | undefined {
+  return toValidDate(value) ?? undefined;
+}
+
 /** Date without a time component, e.g. `2026-08-28` → `2026-08-28`. */
 export function formatDate(value: unknown): string {
   const date = toValidDate(value);

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

@@ -21,6 +21,7 @@ import { computed } from 'vue';
 import GoabDropdown from '../primitives/GoabDropdown.vue';
 import GoabDatePicker from '../primitives/GoabDatePicker.vue';
 import GoabButton from '../primitives/GoabButton.vue';
+import { fromIsoDateString, toIsoDateString } from '../formatters';
 
 export interface FilterOption {
   value: string;
@@ -71,29 +72,18 @@ const dateValues = computed(() =>
       .map((filter) => [
         filter.key,
         model.value[filter.key]
-          ? fromIsoDate(model.value[filter.key])
+          ? fromIsoDateString(model.value[filter.key])
           : undefined,
       ]),
   ),
 );
 
-// Local-calendar YYYY-MM-DD -- see the header note on why not toISOString().
-function toIsoDate(date: Date): string {
-  const pad = (part: number) => String(part).padStart(2, '0');
-  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
-}
-
-function fromIsoDate(value: string): Date | undefined {
-  const [year, month, day] = value.split('-').map(Number);
-  return year && month && day ? new Date(year, month - 1, day) : undefined;
-}
-
 function set(key: string, value: string) {
   model.value = { ...model.value, [key]: value };
 }
 
 function setDate(key: string, date: Date | undefined) {
-  set(key, date ? toIsoDate(date) : '');
+  set(key, toIsoDateString(date));
 }
 
 function clearAll() {

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

@@ -31,3 +31,50 @@ describe('WorkspaceTable pagination wiring', () => {
     }
   });
 });
+
+const sortProps = {
+  columns: [
+    { key: 'name', label: 'Name', sortable: true },
+    { key: 'plain', label: 'Plain' },
+  ],
+  rows: [{ name: 'a', plain: 'b' }],
+  loading: false,
+  error: null,
+  sortBy: 'name',
+  sortDir: 'desc' as const,
+};
+
+describe('WorkspaceTable native sorting', () => {
+  it('renders goa-table-sort-header only for sortable columns', () => {
+    const w = mount(WorkspaceTable, { props: sortProps });
+    expect(w.findAll('goa-table-sort-header')).toHaveLength(1);
+    expect(w.find('goa-table-sort-header').attributes('name')).toBe('name');
+  });
+
+  it('tells the header the current direction, and none for other columns', () => {
+    const w = mount(WorkspaceTable, { props: sortProps });
+    expect(w.find('goa-table-sort-header').attributes('direction')).toBe('desc');
+    const other = mount(WorkspaceTable, { props: { ...sortProps, sortBy: 'plain' } });
+    expect(other.find('goa-table-sort-header').attributes('direction')).toBe('none');
+  });
+
+  it('enables single sort mode on the table', () => {
+    expect(mount(WorkspaceTable, { props: sortProps }).find('goa-table').attributes('sort-mode')).toBe('single');
+  });
+
+  it("translates goa-table's numeric sortDir to asc/desc", async () => {
+    const w = mount(WorkspaceTable, { props: sortProps });
+    const table = w.find('goa-table').element;
+    table.dispatchEvent(new CustomEvent('_sort', { detail: { sortBy: 'name', sortDir: -1 } }));
+    table.dispatchEvent(new CustomEvent('_sort', { detail: { sortBy: 'name', sortDir: 1 } }));
+    expect(w.emitted('sort')).toEqual([['name', 'desc'], ['name', 'asc']]);
+  });
+
+  it('ignores an unsorted (0) event with no column', async () => {
+    const w = mount(WorkspaceTable, { props: sortProps });
+    w.find('goa-table').element.dispatchEvent(
+      new CustomEvent('_sort', { detail: { sortBy: '', sortDir: 0 } }),
+    );
+    expect(w.emitted('sort')).toBeUndefined();
+  });
+});