Merge pull request #215 from bcgov/feature/proponent-home

Update proponent housing view

.github/environments/values.pr.yaml

@@ -3,9 +3,9 @@ patroni:
   enabled: true
   replicaCount: 2
   resources:
-    limits:
-      cpu: 250m
-      memory: 384Mi
+    # limits:
+    #   cpu: 250m
+    #   memory: 384Mi
     requests:
       cpu: 20m
       memory: 192Mi

charts/pcns/values.yaml

@@ -104,11 +104,11 @@ resources:
   # choice for the user. This also increases chances charts run on environments with little
   # resources, such as Minikube. If you do want to specify resources, uncomment the following
   # lines, adjust them as necessary, and remove the curly braces after 'resources:'.
-  limits:
+  # limits:
     # -- Limit Peak CPU (in millicores ex. 1000m)
-    cpu: 200m
+    # cpu: 200m
     # -- Limit Peak Memory (in gigabytes Gi or megabytes Mi ex. 2Gi)
-    memory: 256Mi
+    # memory: 256Mi
   requests:
     # -- Requested CPU (in millicores ex. 500m)
     cpu: 10m

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import { Spinner } from '@/components/layout';
-import { Button, Column, DataTable, useConfirm, useToast } from '@/lib/primevue';
-import { enquiryService } from '@/services';
+import { Column, DataTable } from '@/lib/primevue';
 import { RouteName } from '@/utils/enums/application';
 import { IntakeStatus } from '@/utils/enums/housing';
 import { formatDate } from '@/utils/formatters';
@@ -17,34 +17,11 @@ const { loading, enquiries } = defineProps<{
   enquiries: Array<Enquiry> | undefined;
 }>();
 
-// Emit
-const emit = defineEmits(['enquiry:delete']);
-
 // State
 const selection: Ref<Enquiry | undefined> = ref(undefined);
 
 // Actions
-const confirm = useConfirm();
-const toast = useToast();
-
-function onDelete(enquiryId: string) {
-  confirm.require({
-    message: 'Please confirm that you want to delete this draft',
-    header: 'Delete draft?',
-    acceptLabel: 'Confirm',
-    acceptClass: 'p-button-danger',
-    rejectLabel: 'Cancel',
-    accept: () => {
-      enquiryService
-        .deleteEnquiry(enquiryId)
-        .then(() => {
-          emit('enquiry:delete', enquiryId);
-          toast.success('Draft deleted');
-        })
-        .catch((e: any) => toast.error('Failed to delete draft', e.message));
-    }
-  });
-}
+const { t } = useI18n();
 </script>
 
 <template>
@@ -59,23 +36,26 @@ function onDelete(enquiryId: string) {
     :rows="10"
     sort-field="submittedAt"
     :sort-order="-1"
-    paginator-template="RowsPerPageDropdown CurrentPageReport PrevPageLink NextPageLink "
-    current-page-report-template="{first}-{last} of {totalRecords}"
+    paginator-template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+    :current-page-report-template="`({currentPage} ${t('enquiryListProponent.of')} {totalPages})`"
     :rows-per-page-options="[10, 20, 50]"
     selection-mode="single"
   >
     <template #empty>
       <div class="flex justify-content-center">
-        <h3>No items found.</h3>
+        <p class="font-bold text-xl">
+          {{ t('enquiryListProponent.listEmpty') }}
+        </p>
       </div>
     </template>
     <template #loading>
       <Spinner />
     </template>
     <Column
       field="activity.activityId"
-      header="Confirmation ID"
+      :header="t('enquiryListProponent.confirmationId')"
       :sortable="true"
+      style="width: 45%"
       frozen
     >
       <template #body="{ data }">
@@ -93,46 +73,20 @@ function onDelete(enquiryId: string) {
     </Column>
     <Column
       field="intakeStatus"
-      header="Status"
+      :header="t('enquiryListProponent.state')"
       :sortable="true"
-      style="min-width: 150px"
     />
-    <Column
-      field="updatedAt"
-      header="Last edited"
-      :sortable="true"
-      style="min-width: 150px"
-    >
-      <template #body="{ data }">
-        {{ formatDate(data?.updatedAt) }}
-      </template>
-    </Column>
+
     <Column
       field="submittedAt"
-      header="Submitted date"
+      :header="t('enquiryListProponent.submittedDate')"
       :sortable="true"
-      style="min-width: 200px"
-    >
-      <template #body="{ data }">
-        {{ data.intakeStatus !== IntakeStatus.DRAFT ? formatDate(data?.submittedAt) : undefined }}
-      </template>
-    </Column>
-    <Column
-      field="action"
-      header="Action"
       header-class="header-right"
       class="text-right"
-      style="min-width: 150px"
+      style="width: 10%"
     >
       <template #body="{ data }">
-        <Button
-          class="p-button-lg p-button-text p-button-danger p-0 pr-3"
-          aria-label="Delete draft"
-          :disabled="data.intakeStatus !== IntakeStatus.DRAFT"
-          @click="onDelete(data.enquiryId)"
-        >
-          <font-awesome-icon icon="fa-solid fa-trash" />
-        </Button>
+        {{ data.intakeStatus !== IntakeStatus.DRAFT ? formatDate(data?.submittedAt) : undefined }}
       </template>
     </Column>
   </DataTable>

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

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import { Spinner } from '@/components/layout';
 import { Button, Column, DataTable, useConfirm, useToast } from '@/lib/primevue';
 import { submissionService } from '@/services';
 import { RouteName } from '@/utils/enums/application';
-import { IntakeStatus } from '@/utils/enums/housing';
 import { formatDate } from '@/utils/formatters';
 
 import type { Ref } from 'vue';
@@ -25,23 +25,24 @@ const selection: Ref<Submission | undefined> = ref(undefined);
 
 // Actions
 const confirm = useConfirm();
+const { t } = useI18n();
 const toast = useToast();
 
 function onDelete(draftId: string) {
   confirm.require({
-    message: 'Please confirm that you want to delete this draft',
-    header: 'Delete draft?',
-    acceptLabel: 'Confirm',
+    message: t('submissionDraftListProponent.deleteMsg'),
+    header: t('submissionDraftListProponent.deleteHeader'),
+    acceptLabel: t('submissionDraftListProponent.confirm'),
     acceptClass: 'p-button-danger',
-    rejectLabel: 'Cancel',
+    rejectLabel: t('submissionDraftListProponent.cancel'),
     accept: () => {
       submissionService
         .deleteDraft(draftId)
         .then(() => {
           emit('submissionDraft:delete', draftId);
-          toast.success('Draft deleted');
+          toast.success(t('submissionDraftListProponent.deleteSuccess'));
         })
-        .catch((e: any) => toast.error('Failed to delete draft', e.message));
+        .catch((e: any) => toast.error(t('submissionDraftListProponent.deleteFailed'), e.message));
     }
   });
 }
@@ -59,23 +60,24 @@ function onDelete(draftId: string) {
     :rows="10"
     sort-field="submittedAt"
     :sort-order="-1"
-    paginator-template="RowsPerPageDropdown CurrentPageReport PrevPageLink NextPageLink "
-    current-page-report-template="{first}-{last} of {totalRecords}"
+    paginator-template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+    :current-page-report-template="`({currentPage} ${t('submissionDraftListProponent.of')} {totalPages})`"
     :rows-per-page-options="[10, 20, 50]"
     selection-mode="single"
   >
     <template #empty>
       <div class="flex justify-content-center">
-        <h3>No items found.</h3>
+        <p class="font-bold text-xl">{{ t('submissionDraftListProponent.listEmpty') }}</p>
       </div>
     </template>
     <template #loading>
       <Spinner />
     </template>
     <Column
       field="index"
-      header="Draft ID"
+      :header="t('submissionDraftListProponent.draftId')"
       :sortable="true"
+      style="width: 45%"
       frozen
     >
       <template #body="{ data }">
@@ -91,36 +93,26 @@ function onDelete(draftId: string) {
         </div>
       </template>
     </Column>
-    <Column
-      header="Status"
-      :sortable="true"
-      style="min-width: 150px"
-    >
-      <template #body="{}">
-        {{ IntakeStatus.DRAFT }}
-      </template>
-    </Column>
     <Column
       field="updatedAt"
-      header="Last edited"
+      :header="t('submissionDraftListProponent.lastEdited')"
       :sortable="true"
-      style="min-width: 150px"
     >
       <template #body="{ data }">
         {{ formatDate(data?.updatedAt) }}
       </template>
     </Column>
     <Column
       field="action"
-      header="Action"
+      :header="t('submissionDraftListProponent.action')"
       header-class="header-right"
       class="text-right"
-      style="min-width: 150px"
+      style="width: 10%"
     >
       <template #body="{ data }">
         <Button
           class="p-button-lg p-button-text p-button-danger p-0 pr-3"
-          aria-label="Delete draft"
+          :aria-label="t('submissionDraftListProponent.ariaDeleteDraft')"
           @click="onDelete(data.draftId)"
         >
           <font-awesome-icon icon="fa-solid fa-trash" />

frontend/src/components/layout/Header.vue

@@ -37,13 +37,8 @@ const { t } = useI18n();
   background-color: white;
   color: $app-primary;
   white-space: nowrap;
-  box-shadow: 0 6px 8px -4px #b3b1b3;
-  -webkit-box-shadow: 0 6px 8px -4px #b3b1b3;
-  -moz-box-shadow: 0 6px 8px -4px #b3b1b3;
-
-  @media not print {
-    border-bottom: 2px solid #fcba19;
-  }
+  // TODO: Reference a surface colour once PrimeVue 4 changes come in
+  border-bottom: 1px solid #d8d8d8;
 }
 
 .bc-logo {
@@ -52,6 +47,7 @@ const { t } = useI18n();
 }
 
 .bcds-header-line {
+  // TODO: Reference a surface colour once PrimeVue 4 changes come in
   background-color: #d8d8d8;
   width: 1px;
   height: 32px;

frontend/src/components/layout/Navbar.vue

@@ -37,24 +37,14 @@ onMounted(() => {
       label: 'Housing',
       items: [
         {
-          label: 'Start a new project investigation',
+          label: 'Submit a housing project to the Navigator Service',
           route: RouteName.HOUSING_SUBMISSION_INTAKE,
           access: NavigationPermission.HOUSING_SUBMISSION_INTAKE
         },
         {
-          label: 'Submit an enquiry',
+          label: 'Submit general enquiries',
           route: RouteName.HOUSING_ENQUIRY_INTAKE,
           access: NavigationPermission.HOUSING_ENQUIRY_INTAKE
-        },
-        {
-          label: 'View my drafts and previous entries',
-          route: RouteName.HOUSING_SUBMISSIONS,
-          access: NavigationPermission.HOUSING_SUBMISSIONS_SUB
-        },
-        {
-          label: 'Check the status of your applications/permits',
-          route: RouteName.HOUSING_PROJECTS_LIST,
-          access: NavigationPermission.HOUSING_STATUS_TRACKER
         }
       ],
       access: NavigationPermission.HOUSING_DROPDOWN
@@ -78,19 +68,19 @@ onMounted(() => {
       label: 'Help',
       items: [
         {
-          label: 'Contact a Navigator',
-          mailTo: `mailto:${HOUSING_CONTACT.email}?subject=${HOUSING_CONTACT.subject}`,
-          access: [NavigationPermission.HOUSING_SUBMISSION_INTAKE, NavigationPermission.HOUSING_ENQUIRY_INTAKE]
+          label: 'User Guide',
+          route: RouteName.HOUSING_GUIDE,
+          access: NavigationPermission.HOUSING_USER_GUIDE
         },
         {
           label: 'Report a problem',
           mailTo: `mailto:${PCNS_CONTACT.email}?subject=${PCNS_CONTACT.subject}`,
           public: true
         },
         {
-          label: 'User Guide',
-          route: RouteName.HOUSING_GUIDE,
-          access: NavigationPermission.HOUSING_USER_GUIDE
+          label: 'Contact a Navigator',
+          mailTo: `mailto:${HOUSING_CONTACT.email}?subject=${HOUSING_CONTACT.subject}`,
+          access: [NavigationPermission.HOUSING_SUBMISSION_INTAKE, NavigationPermission.HOUSING_ENQUIRY_INTAKE]
         }
       ],
       public: true
@@ -163,9 +153,6 @@ onMounted(() => {
   color: #fcba19;
   display: flex;
   width: 100%;
-  box-shadow: 0 6px 8px -4px #b3b1b3;
-  -webkit-box-shadow: 0 6px 8px -4px #b3b1b3;
-  -moz-box-shadow: 0 6px 8px -4px #b3b1b3;
 
   .p-menubar {
     border: none;

frontend/src/lib/primevue/index.ts

@@ -27,6 +27,7 @@ export { default as Menu } from 'primevue/menu';
 export { default as Menubar } from 'primevue/menubar';
 export { default as Message } from 'primevue/message';
 export { default as Panel } from 'primevue/panel';
+export { default as Paginator } from 'primevue/paginator';
 export { default as Password } from 'primevue/password';
 export { default as ProgressBar } from 'primevue/progressbar';
 export { default as ProgressSpinner } from 'primevue/progressspinner';