From 57c304da23bb5f94e242316ebc0a1485b47b7346 Mon Sep 17 00:00:00 2001
From: Sanjay Babu <sanjaytkbabu@gmail.com>
Date: Thu, 19 Dec 2024 08:32:59 -0800
Subject: [PATCH] ProjectView updates

---
 app/src/controllers/enquiry.ts                |   2 +-
 frontend/src/assets/variables.scss            |   4 +-
 frontend/src/locales/en-CA.json               |  10 ++
 .../src/views/housing/project/ProjectView.vue | 118 ++++++++++++++++--
 .../views/housing/project/ProjectView.spec.ts |   6 +
 5 files changed, 131 insertions(+), 9 deletions(-)

diff --git a/app/src/controllers/enquiry.ts b/app/src/controllers/enquiry.ts
index c457c682..a9fb4105 100644
--- a/app/src/controllers/enquiry.ts
+++ b/app/src/controllers/enquiry.ts
@@ -78,7 +78,7 @@ const controller = {
         ...generateCreateStamps(req.currentContext)
       });
 
-      res.status(201).json({ activityId: result.activityId, enquiryId: result.enquiryId });
+      res.status(201).json(result);
     } catch (e: unknown) {
       next(e);
     }
diff --git a/frontend/src/assets/variables.scss b/frontend/src/assets/variables.scss
index b5408f97..369d3903 100644
--- a/frontend/src/assets/variables.scss
+++ b/frontend/src/assets/variables.scss
@@ -43,6 +43,8 @@ $app-pill-lightyellow: #fef1d8;
 
 $app-pill-text: #2d2d2d;
 
-
+$app-red-border: #A12622; // TODO: Check color with PrimeVue 4 style
+$app-red-background: #F2DEDE; // TODO: Check color with PrimeVue 4 style
+$app-red-text: #A12622; // TODO: Check color with PrimeVue 4 style
 
 
diff --git a/frontend/src/locales/en-CA.json b/frontend/src/locales/en-CA.json
index 4685b903..885d3ce5 100644
--- a/frontend/src/locales/en-CA.json
+++ b/frontend/src/locales/en-CA.json
@@ -33,6 +33,16 @@
     "supervisor": "SUPERVISOR",
     "admin": "ADMIN"
   },
+  "projectView": {
+    "createdBy": "Created by",
+    "enquiryID": "Enquiry ID",
+    "inapplicableSubmissionType": "A Navigator has reviewed your submission and found it inapplicable to Housing. For questions, please submit a general enquiry.",
+    "listEmpty": "Your project related enquiries will be displayed here",
+    "of": "of",
+    "relatedEnquiries": "Related enquiries",
+    "status": "Status",
+    "submittedDate": "Submitted date"
+  },
   "header": {
     "name": "Permit Connect Services"
   },
diff --git a/frontend/src/views/housing/project/ProjectView.vue b/frontend/src/views/housing/project/ProjectView.vue
index bfbda159..8502d5fa 100644
--- a/frontend/src/views/housing/project/ProjectView.vue
+++ b/frontend/src/views/housing/project/ProjectView.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
 import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
 import Breadcrumb from '@/components/common/Breadcrumb.vue';
 import CreateEnquiryDialog from '@/components/housing/projects/CreateEnquiryDialog.vue';
 import StatusPill from '@/components/common/StatusPill.vue';
-import { Accordion, AccordionTab, Button, Card, Divider, useToast } from '@/lib/primevue';
+import { Accordion, AccordionTab, Button, Card, Column, DataTable, Divider, useToast } from '@/lib/primevue';
 import { useAuthNStore, useConfigStore } from '@/store';
 import { BasicResponse, RouteName } from '@/utils/enums/application';
-import { PermitAuthorizationStatus, PermitNeeded, PermitStatus } from '@/utils/enums/housing';
+import { PermitAuthorizationStatus, PermitNeeded, PermitStatus, SubmissionType } from '@/utils/enums/housing';
 import { formatDate } from '@/utils/formatters';
 import { confirmationTemplateEnquiry } from '@/utils/templates';
 
@@ -38,12 +39,14 @@ const { submissionId } = defineProps<{
 
 // Constants
 const breadcrumbHome: MenuItem = { label: 'Housing', route: RouteName.HOUSING };
+const DEFAULT_SORT_ORDER = -1;
+const DEFAULT_SORT_FIELD = 'submittedAt';
 
 // Store
 const submissionStore = useSubmissionStore();
 const { getConfig } = storeToRefs(useConfigStore());
 const { getProfile } = storeToRefs(useAuthNStore());
-const { getPermits, getSubmission } = storeToRefs(submissionStore);
+const { getPermits, getRelatedEnquiries, getSubmission } = storeToRefs(submissionStore);
 
 const typeStore = useTypeStore();
 const { getPermitTypes } = storeToRefs(typeStore);
@@ -54,6 +57,7 @@ const breadcrumbItems: ComputedRef<Array<MenuItem>> = computed(() => [
   { label: 'Applications and Permits', route: RouteName.HOUSING_PROJECTS_LIST },
   { label: getSubmission?.value?.projectName ?? '', class: 'font-bold' }
 ]);
+const createdBy: Ref<User | undefined> = ref(undefined);
 const enquiryConfirmationId: Ref<string | undefined> = ref(undefined);
 const enquiryModalVisible: Ref<boolean> = ref(false);
 const loading: Ref<boolean> = ref(true);
@@ -88,6 +92,7 @@ const permitsSubmitted: ComputedRef<Array<CombinedPermit>> = computed(() => {
 
 // Actions
 const router = useRouter();
+const { t } = useI18n();
 const toast = useToast();
 
 async function emailConfirmation(activityId: string, enquiryId: string, enquiryDescription: string) {
@@ -181,6 +186,7 @@ async function handleEnquirySubmit(enquiryDescription: string = '') {
 
   try {
     const response = await enquiryService.createEnquiry(enquiryData);
+    submissionStore.addRelatedEnquiry(response.data);
     enquiryConfirmationId.value = response?.data?.activityId ? response.data.activityId : '';
 
     // Send confirmation email
@@ -193,12 +199,13 @@ async function handleEnquirySubmit(enquiryDescription: string = '') {
 }
 
 onMounted(async () => {
-  let submissionValue;
-  let permitTypesValue;
+  let enquiriesValue, permitTypesValue, submissionValue;
+
   try {
     [submissionValue, permitTypesValue] = (
       await Promise.all([submissionService.getSubmission(submissionId), permitService.getPermitTypes()])
     ).map((r) => r.data);
+    if (submissionValue) enquiriesValue = (await enquiryService.listRelatedEnquiries(submissionValue.activityId)).data;
   } catch {
     toast.error('Unable to load project, please try again later');
     router.replace({ name: RouteName.HOUSING_PROJECTS_LIST });
@@ -212,11 +219,16 @@ onMounted(async () => {
     toast.error('Unable to load permits for this project, please try again later');
   }
   submissionStore.setSubmission(submissionValue);
+  submissionStore.setRelatedEnquiries(enquiriesValue);
   typeStore.setPermitTypes(permitTypesValue);
 
   if (submissionValue?.assignedUserId) {
     assignee.value = (await userService.searchUsers({ userId: [submissionValue.assignedUserId] })).data[0];
   }
+
+  if (submissionValue?.createdBy) {
+    createdBy.value = (await userService.searchUsers({ userId: [submissionValue.createdBy] })).data[0];
+  }
   loading.value = false;
 });
 </script>
@@ -252,24 +264,35 @@ onMounted(async () => {
         />
       </h1>
       <Button
+        v-if="getSubmission?.submissionType !== SubmissionType.INAPPLICABLE"
         class="p-button-sm header-btn"
         label="Ask my Navigator"
         outlined
         @click="enquiryModalVisible = !enquiryModalVisible"
       />
     </div>
-    <div class="mb-8">
+    <div class="mb-2">
       <span class="mr-3">
         Project ID:
         <span class="font-bold">{{ getSubmission.activityId }}</span>
       </span>
+      <span class="mr-3">
+        {{ t('projectView.createdBy') }}:
+        <span class="font-bold">{{ createdBy?.firstName }} {{ createdBy?.lastName }}</span>
+      </span>
       <span v-if="assignee">
         Navigator:
         <span class="font-bold">{{ assignee?.firstName }} {{ assignee?.lastName }}</span>
       </span>
       <span v-else>Navigator: -</span>
     </div>
-    <div><h3 class="mb-5">Recommended permits</h3></div>
+    <div
+      v-if="getSubmission?.submissionType === SubmissionType.INAPPLICABLE"
+      class="inapplicable-block p-3 mt-6"
+    >
+      {{ t('projectView.inapplicableSubmissionType') }}
+    </div>
+    <div><h3 class="mb-5 mt-7">Recommended permits</h3></div>
     <div
       v-if="!permitsNeeded?.length"
       class="empty-block p-5 mb-2"
@@ -373,6 +396,78 @@ onMounted(async () => {
       @on-hide="handleDialogClose"
       @on-sumbit-enquiry="handleEnquirySubmit"
     />
+    <div>
+      <div>
+        <h3 class="mb-5 mt-7">{{ t('projectView.relatedEnquiries') }}</h3>
+      </div>
+
+      <div
+        v-if="!getRelatedEnquiries?.length"
+        class="empty-block p-5 mb-2"
+      >
+        {{ t('projectView.listEmpty') }}
+      </div>
+
+      <DataTable
+        v-else
+        :loading="loading"
+        :value="getRelatedEnquiries"
+        :row-hover="true"
+        :rows="10"
+        :sort-field="DEFAULT_SORT_FIELD"
+        :sort-order="DEFAULT_SORT_ORDER"
+        scrollable
+        responsive-layout="scroll"
+        :paginator="true"
+        paginator-template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+        :current-page-report-template="`({currentPage} ${t('projectView.of')} {totalPages})`"
+        :rows-per-page-options="[10, 20, 50]"
+      >
+        <template #empty>
+          <div class="flex justify-content-center">
+            <p class="font-bold text-xl">{{ t('projectView.listEmpty') }}</p>
+          </div>
+        </template>
+        <template #loading>
+          <Spinner />
+        </template>
+
+        <Column
+          field="activityId"
+          :header="t('projectView.enquiryID')"
+          style="width: 45%"
+        >
+          <template #body="{ data }">
+            <div :data-activityId="data.activityId">
+              <router-link
+                :to="{
+                  name: RouteName.HOUSING_ENQUIRY_INTAKE,
+                  query: { activityId: data.activityId, enquiryId: data.enquiryId }
+                }"
+              >
+                {{ data.activityId }}
+              </router-link>
+            </div>
+          </template>
+        </Column>
+        <Column
+          field="enquiryStatus"
+          :header="t('projectView.status')"
+          :sortable="true"
+          style="width: 42%"
+        />
+        <Column
+          field="submittedAt"
+          :header="t('projectView.submittedDate')"
+          :sortable="true"
+          style="width: 15%"
+        >
+          <template #body="{ data }">
+            {{ formatDate(data?.submittedAt) }}
+          </template>
+        </Column>
+      </DataTable>
+    </div>
   </div>
 </template>
 
@@ -409,6 +504,15 @@ a {
   max-height: 2rem;
 }
 
+.inapplicable-block {
+  background-color: $app-red-background;
+  border-radius: 0.5rem;
+  border-width: 1px;
+  border-style: solid;
+  border-color: $app-red-border;
+  color: $app-red-text;
+}
+
 .permit-card {
   border-color: $app-proj-white-one;
   border-style: solid;
diff --git a/frontend/tests/unit/views/housing/project/ProjectView.spec.ts b/frontend/tests/unit/views/housing/project/ProjectView.spec.ts
index 88771424..90adbe1b 100644
--- a/frontend/tests/unit/views/housing/project/ProjectView.spec.ts
+++ b/frontend/tests/unit/views/housing/project/ProjectView.spec.ts
@@ -8,6 +8,12 @@ import { StorageKey } from '@/utils/enums/application';
 import { shallowMount } from '@vue/test-utils';
 import type { AxiosResponse } from 'axios';
 
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: vi.fn()
+  })
+}));
+
 vi.mock('vue-router', () => ({
   useRoute: vi.fn(() => ({
     query: {}