From a170cc2629493e7823019319372b6bb654f9ad80 Mon Sep 17 00:00:00 2001
From: Wilson Wong <wilwong89@gmail.com>
Date: Tue, 23 Jul 2024 03:43:39 -0700
Subject: [PATCH] Implement Project List View

---
 app/src/controllers/submission.ts             |  3 +-
 app/src/routes/v1/submission.ts               |  1 +
 app/src/services/submission.ts                |  8 +-
 app/src/types/SubmissionSearchParameters.ts   |  3 +-
 app/src/utils/constants/housing.ts            |  8 +-
 app/src/validators/submission.ts              |  5 +-
 .../housing/projects/ProjectsList.vue         | 98 +++++++++++++++++++
 frontend/src/components/layout/Navbar.vue     |  2 +-
 frontend/src/router/index.ts                  |  8 ++
 frontend/src/utils/enums/application.ts       |  1 +
 frontend/src/views/housing/HousingView.vue    |  2 +-
 frontend/src/views/housing/ProjectsView.vue   | 94 ++++++++++++++++++
 12 files changed, 224 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/components/housing/projects/ProjectsList.vue
 create mode 100644 frontend/src/views/housing/ProjectsView.vue

diff --git a/app/src/controllers/submission.ts b/app/src/controllers/submission.ts
index 809f31b8d..bfcb262ca 100644
--- a/app/src/controllers/submission.ts
+++ b/app/src/controllers/submission.ts
@@ -390,9 +390,10 @@ const controller = {
       never,
       {
         activityId?: Array<string>;
-        submissionId?: Array<string>;
         intakeStatus?: Array<string>;
         includeUser?: string;
+        submissionId?: Array<string>;
+        submissionType?: Array<string>;
       }
     >,
     res: Response,
diff --git a/app/src/routes/v1/submission.ts b/app/src/routes/v1/submission.ts
index b20a8089a..be2477aa2 100644
--- a/app/src/routes/v1/submission.ts
+++ b/app/src/routes/v1/submission.ts
@@ -68,6 +68,7 @@ router.delete(
 router.get('/search', (req: Request, res: Response, next: NextFunction): void => {
   submissionController.searchSubmissions(req, res, next);
 });
+
 router.get(
   '/:submissionId',
   submissionValidator.getSubmission,
diff --git a/app/src/services/submission.ts b/app/src/services/submission.ts
index ae9637ca3..d4a78c8a4 100644
--- a/app/src/services/submission.ts
+++ b/app/src/services/submission.ts
@@ -215,9 +215,10 @@ const service = {
    * @function searchSubmissions
    * Search and filter for specific submission
    * @param {string[]} [params.activityId] Optional array of uuids representing the activity ID
-   * @param {string[]} [params.submissionId] Optional array of uuids representing the submission ID
    * @param {string[]} [params.intakeStatus] Optional array of strings representing the intake status
    * @param {boolean}  [params.includeUser] Optional boolean representing whether the linked user should be included
+   * @param {string[]} [params.submissionId] Optional array of uuids representing the submission ID
+   * @param {string[]} [params.submissionType] Optional array of strings representing the submission type
    * @returns {Promise<(Submission | null)[]>} The result of running the findMany operation
    */
   searchSubmissions: async (params: SubmissionSearchParameters) => {
@@ -228,11 +229,14 @@ const service = {
           {
             activity_id: { in: params.activityId }
           },
+          {
+            intake_status: { in: params.intakeStatus }
+          },
           {
             submission_id: { in: params.submissionId }
           },
           {
-            intake_status: { in: params.intakeStatus }
+            submission_type: { in: params.submissionType }
           }
         ]
       }
diff --git a/app/src/types/SubmissionSearchParameters.ts b/app/src/types/SubmissionSearchParameters.ts
index d34212ebb..eff7ba940 100644
--- a/app/src/types/SubmissionSearchParameters.ts
+++ b/app/src/types/SubmissionSearchParameters.ts
@@ -1,7 +1,8 @@
 export type SubmissionSearchParameters = {
   activityId?: Array<string>;
-  submissionId?: Array<string>;
   intakeStatus?: Array<string>;
   includeUser?: boolean;
+  submissionId?: Array<string>;
+  submissionType?: Array<string>;
   includeDeleted?: boolean;
 };
diff --git a/app/src/utils/constants/housing.ts b/app/src/utils/constants/housing.ts
index 4fd7b28cd..2a3d2edd0 100644
--- a/app/src/utils/constants/housing.ts
+++ b/app/src/utils/constants/housing.ts
@@ -94,4 +94,10 @@ export const PROJECT_LOCATION_LIST = [ProjectLocation.LOCATION_COORDINATES, Proj
 
 export const QUEUE_PRIORITY = [1, 2, 3];
 
-export const SUBMISSION_TYPE_LIST = [SubmissionType.GUIDANCE, SubmissionType.INAPPLICABLE];
+export const SUBMISSION_TYPE_LIST = [
+  SubmissionType.ESCALATION,
+  SubmissionType.GENERAL_ENQUIRY,
+  SubmissionType.GUIDANCE,
+  SubmissionType.INAPPLICABLE,
+  SubmissionType.STATUS_REQUEST
+];
diff --git a/app/src/validators/submission.ts b/app/src/validators/submission.ts
index 93b97ed36..d09863fd2 100644
--- a/app/src/validators/submission.ts
+++ b/app/src/validators/submission.ts
@@ -70,9 +70,10 @@ const schema = {
   searchSubmissions: {
     query: Joi.object({
       activityId: Joi.array().items(Joi.string()),
-      submissionId: Joi.array().items(uuidv4),
       intakeStatus: Joi.array().items(...INTAKE_STATUS_LIST),
-      includeUser: Joi.boolean()
+      includeUser: Joi.boolean(),
+      submissionId: Joi.array().items(uuidv4),
+      submissionType: Joi.array().items(...SUBMISSION_TYPE_LIST)
     })
   },
   updateIsDeletedFlag: {
diff --git a/frontend/src/components/housing/projects/ProjectsList.vue b/frontend/src/components/housing/projects/ProjectsList.vue
new file mode 100644
index 000000000..0152c78f2
--- /dev/null
+++ b/frontend/src/components/housing/projects/ProjectsList.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+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';
+import type { Submission } from '@/types';
+
+// Props
+type Props = {
+  loading: boolean;
+  submissions: Array<Submission> | undefined;
+};
+
+const props = withDefaults(defineProps<Props>(), {});
+
+// State
+const selection: Ref<Submission | undefined> = ref(undefined);
+
+// Actions
+// const confirm = useConfirm();
+// const toast = useToast();
+
+const sortTest = (e = 'meh') => {
+  console.log('sorttest', e);
+  return -1;
+};
+</script>
+
+<template>
+  <DataTable
+    v-model:selection="selection"
+    :loading="loading"
+    :value="props.submissions"
+    data-key="submissionId"
+    scrollable
+    responsive-layout="scroll"
+    :paginator="true"
+    :rows="10"
+  >
+    <template #empty>
+      <div class="flex justify-content-center">
+        <h3>No active projects</h3>
+      </div>
+    </template>
+    <template #loading>
+      <Spinner />
+    </template>
+    <Column
+      field="projectName"
+      header="Project Name"
+      :sortable="true"
+      style="min-width: 200px"
+    >
+      <template #body="{ data }">
+        <div :data-activityId="data.activityId">
+          <router-link
+            :to="{
+              name: RouteName.HOUSING_SUBMISSION_INTAKE,
+              query: { activityId: data.activityId, submissionId: data.submissionId }
+            }"
+          >
+            {{ data.projectName }}
+          </router-link>
+        </div>
+      </template>
+    </Column>
+    <Column
+      field="activityId"
+      header="Confirmation ID"
+    />
+    <Column
+      field="applicationStatus"
+      header="Status"
+      :sortable="true"
+      style="min-width: 150px"
+    />
+    <Column
+      field="user"
+      header="Navigator"
+    >
+      <template #body="{ data }">
+        <div>{{ data?.user?.firstName }} {{ data?.user?.lastName }}</div>
+      </template>
+    </Column>
+    <Column
+      field="submittedAt"
+      header="date"
+      :sortable="true"
+      style="min-width: 150px"
+    />
+  </DataTable>
+</template>
diff --git a/frontend/src/components/layout/Navbar.vue b/frontend/src/components/layout/Navbar.vue
index 87ac3d616..991bb0e29 100644
--- a/frontend/src/components/layout/Navbar.vue
+++ b/frontend/src/components/layout/Navbar.vue
@@ -51,7 +51,7 @@ onMounted(() => {
         },
         {
           label: 'Status of application/permit',
-          route: RouteName.COMING_SOON,
+          route: RouteName.HOUSING_PROJECTS,
           access: Permissions.NAVIGATION_HOUSING_STATUS_TRACKER
         }
       ],
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index d2594fee8..a1d5c6197 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -98,6 +98,14 @@ const routes: Array<RouteRecordRaw> = [
           }
         ]
       },
+      {
+        path: 'projects',
+        name: RouteName.HOUSING_PROJECTS,
+        component: () => import('@/views/housing/ProjectsView.vue'),
+        meta: {
+          access: [Permissions.NAVIGATION_HOUSING]
+        }
+      },
       {
         path: 'submissions',
         name: RouteName.HOUSING_SUBMISSIONS,
diff --git a/frontend/src/utils/enums/application.ts b/frontend/src/utils/enums/application.ts
index 8f01cca91..031282cd0 100644
--- a/frontend/src/utils/enums/application.ts
+++ b/frontend/src/utils/enums/application.ts
@@ -44,6 +44,7 @@ export enum RouteName {
   HOUSING_ENQUIRY = 'housing_enquiry',
   HOUSING_ENQUIRY_INTAKE = 'housing_enquiry_intake',
   HOUSING_GUIDE = 'housing_guide',
+  HOUSING_PROJECTS = 'housing_projects',
   HOUSING_SUBMISSION = 'housing_submission',
   HOUSING_SUBMISSION_INTAKE = 'housing_submission_intake',
   HOUSING_SUBMISSIONS = 'housing_submissions',
diff --git a/frontend/src/views/housing/HousingView.vue b/frontend/src/views/housing/HousingView.vue
index 507e8c07d..968a75d85 100644
--- a/frontend/src/views/housing/HousingView.vue
+++ b/frontend/src/views/housing/HousingView.vue
@@ -28,7 +28,7 @@ const items = ref([
   {
     top: 'Check the status of your applications and/or permits',
     icon: 'fa-bars-progress',
-    route: RouteName.COMING_SOON,
+    route: RouteName.HOUSING_PROJECTS,
     access: Permissions.NAVIGATION_HOUSING_STATUS_TRACKER
   }
 ]);
diff --git a/frontend/src/views/housing/ProjectsView.vue b/frontend/src/views/housing/ProjectsView.vue
new file mode 100644
index 000000000..a2b3268d3
--- /dev/null
+++ b/frontend/src/views/housing/ProjectsView.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { Button } from '@/lib/primevue';
+import { RouteName } from '@/utils/enums/application';
+import { ApplicationStatus, IntakeStatus, SubmissionType } from '@/utils/enums/housing';
+import ProjectsList from '@/components/housing/projects/ProjectsList.vue';
+import { submissionService } from '@/services';
+
+import type { Ref } from 'vue';
+import type { Submission } from '@/types';
+
+const router = useRouter();
+
+// Enums
+const IntakeSearchParams: String[] = [IntakeStatus.ASSIGNED, IntakeStatus.COMPLETED];
+const SubmissionSearchParams: String[] = [SubmissionType.GUIDANCE];
+
+// State
+const loading: Ref<boolean> = ref(true);
+const submissions: Ref<Array<Submission>> = ref([]);
+
+// Actions
+
+// Sort ApplicationStatus "completed" to the bottom of list, then sort by submission date
+function customSort(a: Submission, b: Submission): number {
+  if (a.applicationStatus == ApplicationStatus.COMPLETED) {
+    if (b.applicationStatus == ApplicationStatus.COMPLETED) {
+      return a.submittedAt > b.submittedAt ? -1 : 1;
+    } else {
+      return 1;
+    }
+  }
+
+  if (b.applicationStatus == ApplicationStatus.COMPLETED) {
+    return -1;
+  }
+
+  return a.submittedAt > b.submittedAt ? -1 : 1;
+}
+
+onMounted(async () => {
+  const [unsorted] = (
+    await Promise.all([
+      submissionService.searchSubmissions({
+        includeUser: true,
+        intakeStatus: IntakeSearchParams,
+        submissionType: SubmissionSearchParams
+      })
+    ])
+  ).map((r) => r.data);
+
+  submissions.value = unsorted.sort(customSort);
+
+  loading.value = false;
+});
+</script>
+
+<template>
+  <div>
+    <Button
+      class="p-0"
+      text
+    >
+      <router-link :to="{ name: RouteName.HOUSING }">
+        <span class="app-primary-color">Housing</span>
+      </router-link>
+    </Button>
+    /
+    <span class="font-bold">Applications and Permits</span>
+  </div>
+  <h1>Application and Permits</h1>
+  <div class="mt-1 mb-3 flex justify-content-between">
+    <h3 class="mb-0">My Projects</h3>
+    <Button
+      class="p-button-sm"
+      outlined
+      label="+ New project investigation"
+      @click="router.push({ name: RouteName.HOUSING_SUBMISSION_INTAKE })"
+    />
+  </div>
+  <ProjectsList
+    :loading="loading"
+    :submissions="submissions"
+  />
+  <div>{{ submissions.map((x) => x.submittedAt) }}</div>
+</template>
+
+<style scoped lang="scss">
+a {
+  text-decoration: none;
+}
+</style>