Sprint Mayne release

.vscode/extensions.json

@@ -9,6 +9,6 @@
     "redhat.vscode-yaml",
     "ryanluker.vscode-coverage-gutters",
     "vue.volar",
-    "vue.vscode-typescript-vue-plugin"
+    "42crunch.vscode-openapi"
   ]
 }

frontend/src/components/housing/enquiry/EnquiryIntakeForm.vue

@@ -9,6 +9,7 @@ import BackButton from '@/components/common/BackButton.vue';
 import {
   EditableDropdown,
   Dropdown,
+  FormNavigationGuard,
   InputMask,
   InputText,
   RadioList,
@@ -293,9 +294,6 @@ async function emailConfirmation(activityId: string, enquiryId: string) {
   <div v-if="!assignedActivityId">
     <div class="mb-2 p-0">
       <BackButton
-        :confirm-leave="editable && !!formUpdated"
-        confirm-message="Are you sure you want to leave this page?
-      Any unsaved changes will be lost. Please save as draft first."
         :route-name="getBackButtonConfig.routeName"
         :text="getBackButtonConfig.text"
       />
@@ -317,6 +315,8 @@ async function emailConfirmation(activityId: string, enquiryId: string) {
       @submit="confirmSubmit"
       @change="formUpdated = true"
     >
+      <FormNavigationGuard v-if="editable && !!formUpdated" />
+
       <input
         type="hidden"
         name="activityId"

frontend/src/components/housing/enquiry/EnquiryListNavigator.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 
 import { Spinner } from '@/components/layout';
 import {
@@ -17,10 +18,19 @@ import { enquiryService } from '@/services';
 import { RouteName } from '@/utils/enums/application';
 import { IntakeStatus } from '@/utils/enums/housing';
 import { formatDate } from '@/utils/formatters';
+import { toNumber } from '@/utils/utils';
 
 import type { Ref } from 'vue';
 import type { Enquiry } from '@/types';
 
+// Types
+type Pagination = {
+  rows?: number;
+  order?: number;
+  field?: string;
+  page?: number;
+};
+
 // Props
 const { loading, enquiries } = defineProps<{
   loading: boolean;
@@ -31,11 +41,27 @@ const { loading, enquiries } = defineProps<{
 const emit = defineEmits(['enquiry:delete']);
 
 // State
+const route = useRoute();
 const selection: Ref<Enquiry | undefined> = ref(undefined);
+const pagination: Ref<Pagination> = ref({
+  rows: 10,
+  order: -1,
+  field: 'submittedAt',
+  page: 0
+});
+
+// read from query params if tab is set to enquiry otherwise use default values
+if (route.query.tab === '1') {
+  pagination.value.rows = toNumber(route.query.rows as string) ?? 10;
+  pagination.value.order = toNumber(route.query.order as string) ?? -1;
+  pagination.value.field = (route.query.field as string) ?? 'submittedAt';
+  pagination.value.page = toNumber(route.query.page as string) ?? 0;
+}
 
 // Actions
 const confirm = useConfirm();
 const toast = useToast();
+const router = useRouter();
 
 function onDelete(enquiryId: string, activityId: string) {
   confirm.require({
@@ -61,6 +87,20 @@ function onDelete(enquiryId: string, activityId: string) {
 const filters = ref({
   global: { value: null, matchMode: FilterMatchMode.CONTAINS }
 });
+
+// Actions
+function updateQueryParams() {
+  router.replace({
+    name: RouteName.HOUSING_SUBMISSIONS,
+    query: {
+      rows: pagination.value.rows ?? undefined,
+      order: pagination.value.order ?? undefined,
+      field: pagination.value.field ?? undefined,
+      page: pagination.value.page ?? undefined,
+      tab: route.query.tab ?? 1
+    }
+  });
+}
 </script>
 
 <template>
@@ -73,13 +113,35 @@ const filters = ref({
     scrollable
     responsive-layout="scroll"
     :paginator="true"
-    :rows="10"
-    sort-field="submittedAt"
-    :sort-order="-1"
+    :rows="pagination.rows"
+    :sort-field="pagination.field"
+    :sort-order="pagination.order"
     paginator-template="RowsPerPageDropdown CurrentPageReport PrevPageLink NextPageLink "
     current-page-report-template="{first}-{last} of {totalRecords}"
     :rows-per-page-options="[10, 20, 50]"
     selection-mode="single"
+    :first="pagination.page && pagination.rows ? pagination.page * pagination.rows : 0"
+    @update:sort-field="
+      (e) => {
+        pagination.field = e;
+        pagination.page = 0;
+        updateQueryParams();
+      }
+    "
+    @update:sort-order="
+      (e) => {
+        pagination.order = e ?? -1;
+        pagination.page = 0;
+        updateQueryParams();
+      }
+    "
+    @page="
+      (e) => {
+        pagination.page = e.page;
+        pagination.rows = e.rows;
+        updateQueryParams();
+      }
+    "
   >
     <template #empty>
       <div class="flex justify-content-center">

frontend/src/components/housing/submission/SubmissionIntakeForm.vue

@@ -13,6 +13,7 @@ import {
   Calendar,
   Checkbox,
   Dropdown,
+  FormNavigationGuard,
   InputMask,
   InputNumber,
   RadioList,
@@ -490,12 +491,10 @@ onBeforeMount(async () => {
 <template>
   <div v-if="!assignedActivityId && !assistanceAssignedActivityId">
     <BackButton
-      :confirm-leave="editable && !!formUpdated"
-      confirm-message="Are you sure you want to leave this page?
-      Any unsaved changes will be lost. Please save as draft first."
       :route-name="getBackButtonConfig.routeName"
       :text="getBackButtonConfig.text"
     />
+
     <div class="flex justify-content-center app-primary-color mt-3">
       <h3>Project Investigation Form</h3>
     </div>
@@ -511,6 +510,8 @@ onBeforeMount(async () => {
       @submit="confirmSubmit"
       @change="() => (formUpdated = true)"
     >
+      <FormNavigationGuard v-if="editable && !!formUpdated" />
+
       <SubmissionAssistance
         v-if="editable && values?.applicant"
         :form-errors="errors"

frontend/src/components/housing/submission/SubmissionListNavigator.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 import { Spinner } from '@/components/layout';
 import {
@@ -18,10 +18,19 @@ import { submissionService } from '@/services';
 import { useAuthZStore } from '@/store';
 import { Action, BasicResponse, Initiative, Resource, RouteName } from '@/utils/enums/application';
 import { formatDate } from '@/utils/formatters';
+import { toNumber } from '@/utils/utils';
 
 import type { Ref } from 'vue';
 import type { Submission } from '@/types';
 
+// Types
+type Pagination = {
+  rows?: number;
+  order?: number;
+  field?: string;
+  page?: number;
+};
+
 // Props
 const { loading, submissions } = defineProps<{
   loading: boolean;
@@ -35,7 +44,23 @@ const emit = defineEmits(['submission:delete']);
 const authzStore = useAuthZStore();
 
 // State
+const route = useRoute();
 const selection: Ref<Submission | undefined> = ref(undefined);
+const dataTable = ref(null);
+const pagination: Ref<Pagination> = ref({
+  rows: 10,
+  order: -1,
+  field: 'submittedAt',
+  page: 0
+});
+
+// read from query params if tab is set to enquiry otherwise use default values
+if (!route.query.tab || route.query.tab === '0') {
+  pagination.value.rows = toNumber(route.query.rows as string) ?? 10;
+  pagination.value.order = toNumber(route.query.order as string) ?? -1;
+  pagination.value.field = (route.query.field as string) ?? 'submittedAt';
+  pagination.value.page = toNumber(route.query.page as string) ?? 0;
+}
 
 // Actions
 const confirmDialog = useConfirm();
@@ -101,10 +126,25 @@ function isFinanciallySupported(data: Submission) {
     return BasicResponse.NO;
   }
 }
+
+// Actions
+function updateQueryParams() {
+  router.replace({
+    name: RouteName.HOUSING_SUBMISSIONS,
+    query: {
+      rows: pagination.value.rows ?? undefined,
+      order: pagination.value.order ?? undefined,
+      field: pagination.value.field ?? undefined,
+      page: pagination.value.page ?? undefined,
+      tab: route.query.tab ?? 0
+    }
+  });
+}
 </script>
 
 <template>
   <DataTable
+    ref="dataTable"
     v-model:filters="filters"
     v-model:selection="selection"
     :loading="loading"
@@ -113,13 +153,35 @@ function isFinanciallySupported(data: Submission) {
     scrollable
     responsive-layout="scroll"
     :paginator="true"
-    :rows="10"
-    sort-field="submittedAt"
-    :sort-order="-1"
+    :rows="pagination.rows"
+    :sort-field="pagination.field"
+    :sort-order="pagination.order"
     paginator-template="RowsPerPageDropdown CurrentPageReport PrevPageLink NextPageLink "
     current-page-report-template="{first}-{last} of {totalRecords}"
     :rows-per-page-options="[10, 20, 50]"
     selection-mode="single"
+    :first="pagination.page && pagination.rows ? pagination.page * pagination.rows : 0"
+    @update:sort-field="
+      (e) => {
+        pagination.field = e;
+        pagination.page = 0;
+        updateQueryParams();
+      }
+    "
+    @update:sort-order="
+      (e) => {
+        pagination.order = e ?? -1;
+        pagination.page = 0;
+        updateQueryParams();
+      }
+    "
+    @page="
+      (e) => {
+        pagination.page = e.page;
+        pagination.rows = e.rows;
+        updateQueryParams();
+      }
+    "
   >
     <template #empty>
       <div class="flex justify-content-center">