@abgov/nx-adsp 13.23.1 → 13.25.0

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

@@ -0,0 +1,78 @@
+import { describe, it, expect } from 'vitest';
+import {
+  formatCurrency,
+  formatDate,
+  formatDateTime,
+  formatNumber,
+  formatPercent,
+} from './formatters';
+
+describe('formatters', () => {
+  it('formats a date and a date-time from an ISO string', () => {
+    expect(formatDate('2026-08-28T14:05:00.000Z')).toContain('2026');
+    expect(formatDateTime('2026-08-28T14:05:00.000Z')).toMatch(/\d{1,2}:\d{2}/);
+  });
+
+  it('accepts a Date, an epoch number, and an ISO string alike', () => {
+    const iso = '2026-08-28T00:00:00.000Z';
+    const expected = formatDate(iso);
+    expect(formatDate(new Date(iso))).toBe(expected);
+    expect(formatDate(new Date(iso).getTime())).toBe(expected);
+  });
+
+  // `unknown` input: views read fields off a record of unknown shape, so a
+  // non-date value must degrade rather than throw or need a cast.
+  it.each([null, undefined, '', 'not-a-date', {}, [], true, NaN])(
+    'returns the em dash for %p rather than throwing',
+    (value) => {
+      expect(formatDate(value)).toBe('—');
+      expect(formatDateTime(value)).toBe('—');
+    },
+  );
+
+  it('returns the em dash for an Invalid Date instance', () => {
+    expect(formatDate(new Date('nope'))).toBe('—');
+  });
+
+  it('separates thousands', () => {
+    expect(formatNumber(12345)).toBe('12,345');
+    expect(formatNumber(0)).toBe('0');
+  });
+
+  it.each([null, undefined, NaN, Infinity])(
+    'returns the em dash for a non-finite number (%p)',
+    (value) => {
+      expect(formatNumber(value as number | null | undefined)).toBe('—');
+      expect(formatPercent(value as number | null | undefined)).toBe('—');
+    },
+  );
+
+  it('treats a percent value as already scaled 0-100, not a fraction', () => {
+    expect(formatPercent(99.5)).toBe('99.5%');
+    expect(formatPercent(100)).toBe('100%');
+    // 0.95 is nine-tenths of one percent here, NOT 95% -- the scaling contract
+    // is the whole reason this helper exists rather than a bare toFixed call.
+    expect(formatPercent(0.95)).toBe('1%');
+  });
+
+  it('formats CAD currency', () => {
+    expect(formatCurrency(1234.5)).toContain('1,234.50');
+    expect(formatCurrency('1234.5')).toBe(formatCurrency(1234.5));
+  });
+
+  it.each([null, undefined, ''])(
+    'returns the em dash for an absent currency value (%p)',
+    (value) => {
+      expect(formatCurrency(value)).toBe('—');
+    },
+  );
+
+  it('echoes an unparseable currency value rather than hiding it behind a dash', () => {
+    expect(formatCurrency('n/a')).toBe('n/a');
+  });
+
+  it('honours the fractionDigits argument', () => {
+    expect(formatPercent(66.666, 2)).toBe('66.67%');
+    expect(formatPercent(66.666, 0)).toBe('67%');
+  });
+});

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

@@ -0,0 +1,88 @@
+// Shared value formatting for views across every Vue app in this workspace.
+//
+// Plain functions, not a `use*` composable: there is no reactive state and no
+// lifecycle here, and in Vue `use*` signals both. Import them directly in an
+// SFC's <script setup> and call them from the template.
+//
+// Every formatter returns an em dash for a null/undefined/unparseable value, so
+// a view can render a partially-populated record without a guard per field.
+
+const LOCALE = 'en-CA';
+const EMPTY = '—';
+
+const dateOnly = new Intl.DateTimeFormat(LOCALE, { dateStyle: 'short' });
+const dateAndTime = new Intl.DateTimeFormat(LOCALE, {
+  dateStyle: 'short',
+  timeStyle: 'short',
+});
+const decimal = new Intl.NumberFormat(LOCALE);
+const currency = new Intl.NumberFormat(LOCALE, {
+  style: 'currency',
+  currency: 'CAD',
+});
+
+// `unknown` rather than a date union: views read fields off a record whose shape
+// the generator doesn't know, so every call site would otherwise need a cast.
+// Anything that isn't a usable date becomes the em dash, same as null.
+//
+// Invalid dates are caught via getTime() rather than a try/catch: `new Date()`
+// doesn't throw on unparseable input, it yields an Invalid Date whose getTime()
+// is NaN, and Intl.format() on that would throw a RangeError.
+function toValidDate(value: unknown): Date | null {
+  if (value === null || value === undefined || value === '') return null;
+  if (value instanceof Date) {
+    return Number.isNaN(value.getTime()) ? null : value;
+  }
+  if (typeof value !== 'string' && typeof value !== 'number') return null;
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+/** Date without a time component, e.g. `2026-08-28` → `2026-08-28`. */
+export function formatDate(value: unknown): string {
+  const date = toValidDate(value);
+  return date ? dateOnly.format(date) : EMPTY;
+}
+
+/** Date with a short time, for audit/activity timestamps. */
+export function formatDateTime(value: unknown): string {
+  const date = toValidDate(value);
+  return date ? dateAndTime.format(date) : EMPTY;
+}
+
+/**
+ * CAD currency. Takes `unknown` for the same reason the date helpers do, and
+ * falls back to the raw value's string form rather than the em dash when it is
+ * present but unparseable — a visibly wrong amount is safer to notice than a
+ * dash that reads as "no data".
+ */
+export function formatCurrency(value: unknown): string {
+  if (value === undefined || value === null || value === '') return EMPTY;
+  const amount = Number(value);
+  if (Number.isNaN(amount)) return String(value);
+  return currency.format(amount);
+}
+
+/** Thousands-separated integer/decimal, e.g. `12345` → `12,345`. */
+export function formatNumber(value: number | null | undefined): string {
+  return typeof value === 'number' && Number.isFinite(value)
+    ? decimal.format(value)
+    : EMPTY;
+}
+
+/**
+ * Percentage from a value already scaled 0–100 — the form rate/percentage
+ * fields come back in from an ADSP service, not the 0–1 fraction
+ * `Intl.NumberFormat({ style: 'percent' })` expects. Pass 99.5, not 0.995.
+ */
+export function formatPercent(
+  value: number | null | undefined,
+  fractionDigits = 1,
+): string {
+  if (typeof value !== 'number' || !Number.isFinite(value)) return EMPTY;
+  const rounded = new Intl.NumberFormat(LOCALE, {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: fractionDigits,
+  }).format(value);
+  return `${rounded}%`;
+}

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

@@ -19,6 +19,17 @@ describe('vue-components', () => {
     }
   });
 
+  it('exports the shared value formatters', () => {
+    for (const name of [
+      'formatDate',
+      'formatDateTime',
+      'formatNumber',
+      'formatPercent',
+    ]) {
+      expect(typeof lib[name as keyof typeof lib]).toBe('function');
+    }
+  });
+
   it('exports every app-shell pattern component', () => {
     for (const name of [
       'AppLayout',

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

@@ -57,6 +57,26 @@ describe('Vue Components Generator', () => {
     expect(index).toContain('export { default as GoabInput }');
     expect(index).toContain('export { default as AppLayout }');
     expect(index).toContain('@abgov/vue-components'); // interim marker
+    expect(index).toContain("from './lib/formatters'");
+
+    // Shared value formatters: every view renders a date/count the same way
+    // instead of inlining its own toLocaleString (which is what a real app did
+    // in three separate views before this existed).
+    expect(host.exists('libs/vue-components/src/lib/formatters.ts')).toBeTruthy();
+    expect(
+      host.exists('libs/vue-components/src/lib/formatters.spec.ts'),
+    ).toBeTruthy();
+    const formatters = host
+      .read('libs/vue-components/src/lib/formatters.ts')
+      .toString();
+    for (const fn of [
+      'formatDate',
+      'formatDateTime',
+      'formatNumber',
+      'formatPercent',
+    ]) {
+      expect(formatters).toContain(`export function ${fn}`);
+    }
 
     // Ships a spec so the vitest test target isn't empty (vitest exits non-zero
     // on "no test files found").
@@ -77,6 +97,22 @@ describe('Vue Components Generator', () => {
     expect(agents).toContain('detail.value');
     expect(agents).toContain('Wrapping a new component');
     expect(agents).toContain('defineModel<boolean>');
+
+    // Catalogues the presentational goa-* elements that need no wrapper. Its
+    // absence is what drove a real app to hand-roll 254 inline styles on raw
+    // HTML standing in for elements that already shipped.
+    expect(agents).toContain('most need no wrapper');
+    for (const element of [
+      'goa-container',
+      'goa-block',
+      'goa-grid',
+      'goa-text',
+      'goa-table',
+      'goa-tabs',
+    ]) {
+      expect(agents).toContain(element);
+    }
+    expect(agents).toContain("Don't wrap a presentational element");
   }, 30000);
 
   it('AppSideMenu exposes an optional #topbar slot for header-action-style content', async () => {

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { RecordDetailShell } from '<%= goaImportPath %>';
+import { RecordDetailShell, formatCurrency, formatDateTime } from '<%= goaImportPath %>';
 import { useApi } from '../composables/useApi';
 
 // The fetched record's shape isn't known to this generator -- read fields
@@ -12,15 +12,13 @@ const error = ref<string | null>(null);
 
 const route = useRoute();
 const router = useRouter();
-const { apiFetch } = useApi();
+const { get } = useApi();
 
 async function load() {
   loading.value = true;
   error.value = null;
   try {
-    const res = await apiFetch(`/api/<%= resource %>/${route.params.id}`);
-    if (!res.ok) throw new Error(`Failed to load (${res.status})`);
-    record.value = await res.json();
+    record.value = await get('<%= resource %>', String(route.params.id));
   } catch (e) {
     error.value = e instanceof Error ? e.message : 'Failed to load.';
   } finally {
@@ -28,27 +26,16 @@ async function load() {
   }
 }
 
-onMounted(load);
+// Vue Router reuses this component when only the id param changes, so onMounted
+// would never fire again and the previous record would stay on screen. An
+// immediate watch covers first load and every later param change in one place.
+watch(() => route.params.id, load, { immediate: true });
 
 function goBack() {
   router.back();
 }
 
-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>
@@ -67,7 +54,7 @@ function formatCurrency(value: unknown): string {
 <% if (field.type === 'badge') { -%>
         <goa-badge type="information" :content="String(record['<%= field.key %>'] ?? '—')" />
 <% } else if (field.type === 'date') { -%>
-        {{ formatDate(record['<%= field.key %>']) }}
+        {{ formatDateTime(record['<%= field.key %>']) }}
 <% } else if (field.type === 'currency') { -%>
         {{ formatCurrency(record['<%= field.key %>']) }}
 <% } else { -%>

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

@@ -102,17 +102,35 @@ describe('Vue Detail View Generator', () => {
       .read('apps/test/src/views/ApplicationDetailView.vue')
       .toString();
     expect(view).toContain('heading="Application Detail"');
-    expect(view).toContain("apiFetch(`/api/applications/${route.params.id}`)");
+    expect(view).toContain("await get('applications', String(route.params.id))");
+    expect(view).not.toContain('apiFetch');
+
+    // Vue Router reuses this component across an id-only change, so the fetch
+    // is driven by a watch rather than onMounted.
+    expect(view).toContain("watch(() => route.params.id, load, { immediate: true })");
+    expect(view).not.toContain('onMounted(');
+    expect(view).not.toContain('function formatCurrency');
+
+    expect(view).toContain('formatDateTime');
+    expect(view).not.toContain('function formatDate');
     expect(view).toContain(
       "<goa-badge type=\"information\" :content=\"String(record['status'] ?? '—')\" />",
     );
-    expect(view).toContain("formatDate(record['lastSaved'])");
+    expect(view).toContain("formatDateTime(record['lastSaved'])");
     expect(view).toContain("formatCurrency(record['requestTotal'])");
     expect(view).toContain("record['serviceModel'] ?? '—'");
     expect(view).toContain('<dt>Status</dt>');
     expect(view).toContain('<dt>Service Model</dt>');
     // Uses the shared shell, not hand-rolled loading/error markup.
-    expect(view).toContain("import { RecordDetailShell } from '@proj/vue-components';");
+    // Read the import's contents rather than an exact line: formatFiles wraps a
+    // long import list and adds a trailing comma.
+    const goaImport =
+      view
+        .replace(/\s+/g, ' ')
+        .match(/import \{[^}]*\} from '@proj\/vue-components';/)?.[0] ?? '';
+    for (const name of ['RecordDetailShell', 'formatCurrency', 'formatDateTime']) {
+      expect(goaImport).toContain(name);
+    }
     expect(view).toContain('<RecordDetailShell');
   }, 30000);
 

package/src/generators/vue-intake-view/files/shared/src/views/__reviewViewFileName__.vue__tmpl__

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { GoabCheckbox } from '<%= goaImportPath %>';
 import { useApi } from '../composables/useApi';
 
 const route = useRoute();
 const router = useRouter();
-const { apiFetch } = useApi();
+const { get, action } = useApi();
 
 const idParam = computed(() => String(route.params.id ?? ''));
 
@@ -23,9 +23,7 @@ async function load() {
   loading.value = true;
   loadError.value = null;
   try {
-    const res = await apiFetch(`/api/<%= resource %>/${idParam.value}`);
-    if (!res.ok) throw new Error(`Failed to load (${res.status})`);
-    record.value = await res.json();
+    record.value = await get('<%= resource %>', idParam.value);
   } catch (e) {
     loadError.value = e instanceof Error ? e.message : 'Failed to load.';
   } finally {
@@ -33,7 +31,10 @@ async function load() {
   }
 }
 
-onMounted(load);
+// Vue Router reuses this component when only the id param changes, so onMounted
+// would never fire again and the previous record would stay on screen. An
+// immediate watch covers first load and every later param change in one place.
+watch(idParam, load, { immediate: true });
 
 function editStep(key: string) {
   router.push(`<%= route %>/${idParam.value}/${key}`);
@@ -44,10 +45,7 @@ async function onSubmit() {
   submitting.value = true;
   submitError.value = null;
   try {
-    const res = await apiFetch(`/api/<%= resource %>/${idParam.value}/submit`, {
-      method: 'POST',
-    });
-    if (!res.ok) throw new Error(`Failed to submit (${res.status})`);
+    await action('<%= resource %>', idParam.value, 'submit');
     router.push(`<%= route %>/${idParam.value}/confirmation`);
   } catch (e) {
     submitError.value = e instanceof Error ? e.message : 'Failed to submit.';

package/src/generators/vue-intake-view/files/steps/src/views/__stepViewFileName__.vue__tmpl__

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref, computed, onMounted } from 'vue';
+import { reactive, ref, computed, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { Stepper, StepErrorSummary, GoabInput } from '<%= goaImportPath %>';
 import { useApi } from '../composables/useApi';
@@ -12,7 +12,7 @@ const STEPS = [
 
 const route = useRoute();
 const router = useRouter();
-const { apiFetch } = useApi();
+const { get, save } = useApi();
 
 const idParam = computed(() => String(route.params.id ?? ''));
 const isNew = computed(() => idParam.value === 'new' || idParam.value === '');
@@ -50,9 +50,7 @@ async function load() {
   loading.value = true;
   loadError.value = null;
   try {
-    const res = await apiFetch(`/api/<%= resource %>/${idParam.value}`);
-    if (!res.ok) throw new Error(`Failed to load (${res.status})`);
-    const data = await res.json();
+    const data = await get('<%= resource %>', idParam.value);
     completedSteps.value = Array.isArray(data.completedSteps) ? data.completedSteps : [];
 <% stepFields.forEach(function (field) { -%>
     if (data['<%- field.key %>'] !== undefined) form.<%- field.key %> = data['<%- field.key %>'];
@@ -64,7 +62,33 @@ async function load() {
   }
 }
 
-onMounted(load);
+// Field defaults come from the same EJS loop that seeds `form` above, so there
+// is one source of truth for them. `form` is reactive, so it is reset per key
+// rather than reassigned.
+function resetForm() {
+<% stepFields.forEach(function (field) { -%>
+  form.<%- field.key %> = '';
+<% }); -%>
+  errors.value = [];
+  completedSteps.value = [];
+}
+
+// Vue Router reuses this component when only the id param changes, so onMounted
+// would never fire again. The reset branch matters as much as the reload one: on
+// an edit/<id> -> edit/new change load() returns early on isNew, which would
+// leave the previous record's values sitting in a "create" form.
+watch(
+  idParam,
+  () => {
+    if (isNew.value) {
+      resetForm();
+      loadError.value = null;
+      return;
+    }
+    void load();
+  },
+  { immediate: true },
+);
 
 function validate(): boolean {
   const found: { message: string; anchor?: string }[] = [];
@@ -98,17 +122,14 @@ async function onSaveAndContinue() {
       ...form,
       completedSteps: [...new Set([...completedSteps.value, '<%- stepKey %>'])],
     };
-    const res = await apiFetch(
-      isNew.value ? '/api/<%= resource %>' : `/api/<%= resource %>/${idParam.value}`,
-      {
-        method: isNew.value ? 'POST' : 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(body),
-      },
+    // A create has to answer with the new record's id for the wizard to advance
+    // to the next step, so this one call site states the shape it needs.
+    const saved = await save<{ id: string | number }>(
+      '<%= resource %>',
+      isNew.value ? null : idParam.value,
+      body,
     );
-    if (!res.ok) throw new Error(`Failed to save (${res.status})`);
-    const saved = await res.json();
-    const nextId = isNew.value ? saved.id : idParam.value;
+    const nextId = isNew.value ? String(saved.id) : idParam.value;
     router.push(`<%= route %>/${nextId}/<%- nextStepKey %>`);
   } catch (e) {
     saveError.value = e instanceof Error ? e.message : 'Failed to save.';

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

@@ -123,7 +123,10 @@ describe('Vue Intake View Generator', () => {
     expect(review).toContain("record['fullName'] ?? '—'");
     expect(review).toContain("record['email'] ?? '—'");
     expect(review).toContain(':disabled="!declared || submitting || undefined"');
-    expect(review).toContain("apiFetch(`/api/applications/${idParam.value}/submit`");
+    expect(review).toContain("await action('applications', idParam.value, 'submit')");
+    expect(review).not.toContain('apiFetch');
+    expect(review).toContain('watch(idParam, load, { immediate: true })');
+    expect(review).not.toContain('onMounted(');
     expect(review).toContain('/applications/${idParam.value}/confirmation');
   }, 30000);
 

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { WorkspaceTable } from '<%= goaImportPath %>';
+import { ref, onMounted<% if (filterable) { %>, onUnmounted<% } %> } from 'vue';
+import { WorkspaceTable, formatCurrency, formatDateTime } from '<%= goaImportPath %>';
 import { useApi } from '../composables/useApi';
 
-const { apiFetch } = useApi();
+const { list } = useApi();
 
 const columns = [
 <% columns.forEach(function (column) { -%>
@@ -27,31 +27,38 @@ let searchDebounce: ReturnType<typeof setTimeout> | undefined;
 
 const PAGE_SIZE = <%= pageSize %>;
 
+// load() fires from page change, sort<% if (filterable) { %>, and the debounced search<% } %>, so two requests can
+// overlap and resolve out of order — a slower earlier one would otherwise land
+// last and overwrite the newer rows while the pagination control still showed
+// the newer page. Only the most recent call is allowed to apply its result.
+let loadSequence = 0;
+
 async function load() {
+  const sequence = ++loadSequence;
   loading.value = true;
   error.value = null;
   try {
-    const params = new URLSearchParams({
-      page: String(page.value),
-      limit: String(PAGE_SIZE),
-    });
+    // Paging/sorting/filtering are stated in domain terms; useApi's adapter maps
+    // them onto whatever this backend actually expects (see its glue-layer block).
+    const result = await list('<%= resource %>', {
+      page: page.value,
+      pageSize: PAGE_SIZE,
 <% if (filterable) { -%>
-    if (search.value) params.set('search', search.value);
+      search: search.value || undefined,
 <% } -%>
-    if (sortBy.value) {
-      params.set('sortBy', sortBy.value);
-      params.set('sortDir', sortDir.value);
-    }
-    const res = await apiFetch(`/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);
+      sortBy: sortBy.value,
+      sortDir: sortDir.value,
+    });
+    if (sequence !== loadSequence) return;
+    rows.value = result.rows;
+    itemCount.value = result.total;
   } catch (e) {
+    if (sequence !== loadSequence) return;
     error.value = e instanceof Error ? e.message : 'Failed to load.';
   } finally {
-    loading.value = false;
+    // A superseded request must not clear the flag — the newer one is still in
+    // flight, and the table would flash out of its loading state and back.
+    if (sequence === loadSequence) loading.value = false;
   }
 }
 
@@ -82,23 +89,15 @@ function onSearchInput(e: Event) {
     void load();
   }, 300);
 }
+
+// Without this, navigating away mid-keystroke lets the timer fire load() against
+// a torn-down component.
+onUnmounted(() => {
+  if (searchDebounce) clearTimeout(searchDebounce);
+});
 <% } -%>
 
-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>
@@ -141,7 +140,7 @@ function formatCurrency(value: unknown): string {
       </template>
 <% } else if (column.type === 'date') { -%>
       <template #cell-<%= column.key %>="{ row }">
-        {{ formatDate(row['<%= column.key %>']) }}
+        {{ formatDateTime(row['<%= column.key %>']) }}
       </template>
 <% } else if (column.type === 'currency') { -%>
       <template #cell-<%= column.key %>="{ row }">