@abgov/nx-adsp 13.24.0 → 13.26.0

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 }">

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

@@ -99,20 +99,67 @@ describe('Vue Workspace View Generator', () => {
     expect(view).toContain(
       "{ key: 'lastSaved', label: 'Last saved', sortable: true }",
     );
-    expect(view).toContain('apiFetch(`/api/applications?${params.toString()}`)');
+    // Goes through useApi's adapter in domain terms -- no query-param name and
+    // no response-envelope key appears in the view.
+    expect(view).toContain("await list('applications', {");
+    expect(view).toContain('pageSize: PAGE_SIZE');
+    expect(view).toContain('rows.value = result.rows');
+    expect(view).toContain('itemCount.value = result.total');
+    expect(view).not.toContain('apiFetch');
+    expect(view).not.toContain('URLSearchParams');
+    expect(view).not.toContain('data.results');
+
+    // Out-of-order responses: load() fires from page change, sort and the
+    // debounced search, so only the most recent call may apply its result.
+    expect(view).toContain('let loadSequence = 0');
+    expect(view).toContain('const sequence = ++loadSequence');
+    expect(view).toContain('if (sequence !== loadSequence) return;');
+    expect(view).toContain('if (sequence === loadSequence) loading.value = false;');
+
+    // The debounce timer must not outlive the component.
+    expect(view).toContain('onUnmounted(');
+    expect(view).toContain('clearTimeout(searchDebounce)');
+
+    // Dates come from the shared formatter, not a per-view copy.
+    expect(view).toContain('formatDateTime');
+    expect(view).not.toContain('function formatDate');
+    expect(view).not.toContain('toLocaleString');
+    expect(view).not.toContain('Intl.');
+    expect(view).not.toContain('function formatCurrency');
     expect(view).toContain(
       "<goa-badge type=\"information\" :content=\"String(row['status'] ?? '—')\" />",
     );
-    expect(view).toContain("formatDate(row['lastSaved'])");
+    expect(view).toContain("formatDateTime(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';");
+    // 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 ['WorkspaceTable', 'formatCurrency', 'formatDateTime']) {
+      expect(goaImport).toContain(name);
+    }
     expect(view).toContain('<WorkspaceTable');
     // Filterable by default: a debounced search input.
     expect(view).toContain('type="search"');
     expect(view).toContain('searchDebounce');
   }, 30000);
 
+  it('omits onUnmounted along with the debounce when --filterable=false', async () => {
+    // onUnmounted exists only to clear the search debounce, so importing it
+    // unconditionally would be an unused import and fail the generated lint.
+    await generator(host, { ...baseOptions, filterable: false });
+    const view = host
+      .read('apps/test/src/views/ApplicationsListView.vue')
+      .toString();
+    expect(view).not.toContain('onUnmounted');
+    expect(view).not.toContain('searchDebounce');
+    // The out-of-order guard is not search-specific -- page and sort still race.
+    expect(view).toContain('let loadSequence = 0');
+  });
+
   it('omits the search input and its wiring when --filterable=false', async () => {
     await generator(host, { ...baseOptions, filterable: false });
     const view = host