#3262 - Ministry Application Tracker UI (#3756)

# Ministry Application Tracker UI ## Component centralization and Refactoring - [x] The application status tracker component moved to `components/common` - [x] Stopped passing `applicationStatus` as property to the `ApplicationProgressBar` component. Only `applicationId` is passed and optionally `isApplicationActionsAllowed` to disable the actions from the application tracker. - [x] Removed the deprecated `MenuModel` from side bar component and replaced it with `MenuItemModel` ## Manual Testing - [x] Draft Application ![image](https://github.com/user-attachments/assets/e9763713-5807-4551-be14-8625b56af52f) - [x] Cancelled Application ![image](https://github.com/user-attachments/assets/5e302436-218c-468e-973a-5f08a812ec08) - [x] InProgress(Exception) ![image](https://github.com/user-attachments/assets/8f45af11-71ba-4e4a-b3b6-9b654f8b5ea2) - [x] InProgress(Waiting Partner Input) ![image](https://github.com/user-attachments/assets/30b76aa0-4e22-42e6-b8ed-ef3b367b244c) - [x] Completed Application With Original Assessment ![image](https://github.com/user-attachments/assets/d5e0212f-956d-475d-a6a0-36dde4e4c9ef) - [x] Completed Application with Application Offering Change requested ![image](https://github.com/user-attachments/assets/a905369d-14dd-4bbf-9a9b-7e5c371236be)
bcgov · Oct 3, 2024 · 96166f7 · 96166f7
1 parent b5352c5
commit 96166f7
Show file tree

Hide file tree

Showing 18 changed files with 191 additions and 64 deletions.
diff --git a/...icationTracker/ApplicationProgressBar.vue → ...icationTracker/ApplicationProgressBar.vue b/...icationTracker/ApplicationProgressBar.vue → ...icationTracker/ApplicationProgressBar.vue
@@ -1,6 +1,11 @@
 <template>
   <v-card class="p-4">
-    <template v-if="applicationStatus !== ApplicationStatus.Cancelled">
+    <template
+      v-if="
+        applicationProgressDetails.applicationStatus !==
+        ApplicationStatus.Cancelled
+      "
+    >
       <body-header title="Track your application" />
       <stepper-progress-bar
         :progressBarValue="trackerApplicationStatus"
@@ -12,29 +17,49 @@
         :progressLabelIconColor="statusIconDetails.statusType"
       />
       <draft
+        :are-application-actions-allowed="areApplicationActionsAllowed"
         @editApplication="$emit('editApplication')"
-        v-if="applicationStatus === ApplicationStatus.Draft"
+        v-if="
+          applicationProgressDetails.applicationStatus ===
+          ApplicationStatus.Draft
+        "
       />
       <!-- The below components are checked with applicationStatusTracker[trackerApplicationStatus], so that in future if we need to see the previous, it can be easily attained just by removing readonly param from the v-slider or by adding a simple logic. -->
       <submitted
-        v-else-if="applicationStatus === ApplicationStatus.Submitted"
+        v-else-if="
+          applicationProgressDetails.applicationStatus ===
+          ApplicationStatus.Submitted
+        "
       />
       <in-progress
-        v-else-if="applicationStatus === ApplicationStatus.InProgress"
+        v-else-if="
+          applicationProgressDetails.applicationStatus ===
+          ApplicationStatus.InProgress
+        "
         :application-id="applicationId"
       />
       <assessment
-        v-else-if="applicationStatus === ApplicationStatus.Assessment"
+        v-else-if="
+          applicationProgressDetails.applicationStatus ===
+          ApplicationStatus.Assessment
+        "
         :assessmentTriggerType="
           applicationProgressDetails.assessmentTriggerType!
         "
       />
       <enrolment
-        v-else-if="applicationStatus === ApplicationStatus.Enrolment"
+        v-else-if="
+          applicationProgressDetails.applicationStatus ===
+          ApplicationStatus.Enrolment
+        "
         :applicationId="applicationId"
       />
       <completed
-        v-else-if="applicationStatus === ApplicationStatus.Completed"
+        :are-application-actions-allowed="areApplicationActionsAllowed"
+        v-else-if="
+          applicationProgressDetails.applicationStatus ===
+          ApplicationStatus.Completed
+        "
         :applicationId="applicationId"
       />
     </template>
@@ -56,17 +81,17 @@ import {
   ApplicationOfferingChangeRequestStatus,
   AssessmentTriggerType,
 } from "@/types";
-import { PropType, ref, defineComponent, computed, onMounted } from "vue";
+import { ref, defineComponent, computed, onMounted } from "vue";
 import { ApplicationProgressDetailsAPIOutDTO } from "@/services/http/dto/Application.dto";
 import { ApplicationService } from "@/services/ApplicationService";
 import StepperProgressBar from "@/components/common/StepperProgressBar.vue";
-import Draft from "@/components/students/applicationTracker/Draft.vue";
-import Submitted from "@/components/students/applicationTracker/Submitted.vue";
-import InProgress from "@/components/students/applicationTracker/InProgress.vue";
-import Cancelled from "@/components/students/applicationTracker/Cancelled.vue";
-import Assessment from "@/components/students/applicationTracker/Assessment.vue";
-import Enrolment from "@/components/students/applicationTracker/Enrolment.vue";
-import Completed from "@/components/students/applicationTracker/Completed.vue";
+import Draft from "@/components/common/applicationTracker/Draft.vue";
+import Submitted from "@/components/common/applicationTracker/Submitted.vue";
+import InProgress from "@/components/common/applicationTracker/InProgress.vue";
+import Cancelled from "@/components/common/applicationTracker/Cancelled.vue";
+import Assessment from "@/components/common/applicationTracker/Assessment.vue";
+import Enrolment from "@/components/common/applicationTracker/Enrolment.vue";
+import Completed from "@/components/common/applicationTracker/Completed.vue";
 
 interface StatusIconDetails {
   statusType: "success" | "warning" | "error";
@@ -108,9 +133,10 @@ export default defineComponent({
       type: Number,
       required: true,
     },
-    applicationStatus: {
-      type: String as PropType<ApplicationStatus>,
-      required: true,
+    areApplicationActionsAllowed: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
   },
   setup(props) {
@@ -178,18 +204,21 @@ export default defineComponent({
 
     const trackerApplicationStatus = computed(() =>
       applicationTrackerLabels.findIndex(
-        (status) => status === props.applicationStatus,
+        (status) =>
+          status === applicationProgressDetails.value.applicationStatus,
       ),
     );
 
     const disabled = computed(
-      () => props.applicationStatus === ApplicationStatus.Draft,
+      () =>
+        applicationProgressDetails.value.applicationStatus ===
+        ApplicationStatus.Draft,
     );
 
     const thumbSize = computed(() =>
       // thumbSize is 0 for all the status except draft and submitted.
       [ApplicationStatus.Draft, ApplicationStatus.Submitted].includes(
-        props.applicationStatus,
+        applicationProgressDetails.value.applicationStatus,
       )
         ? INITIAL_THUMB_SIZE
         : DEFAULT_THUMB_SIZE,

diff --git a/...tudents/applicationTracker/Assessment.vue → .../common/applicationTracker/Assessment.vue b/...tudents/applicationTracker/Assessment.vue → .../common/applicationTracker/Assessment.vue
@@ -17,8 +17,8 @@
   </application-status-tracker-banner>
 </template>
 <script lang="ts">
-import ApplicationStatusTrackerBanner from "@/components/students/applicationTracker/generic/ApplicationStatusTrackerBanner.vue";
-import RelatedApplicationChanged from "@/components/students/applicationTracker/RelatedApplicationChanged.vue";
+import ApplicationStatusTrackerBanner from "@/components/common/applicationTracker/generic/ApplicationStatusTrackerBanner.vue";
+import RelatedApplicationChanged from "@/components/common/applicationTracker/RelatedApplicationChanged.vue";
 import { AssessmentTriggerType } from "@/types";
 import { defineComponent, PropType } from "vue";
 

diff --git a/...students/applicationTracker/Cancelled.vue → ...s/common/applicationTracker/Cancelled.vue b/...students/applicationTracker/Cancelled.vue → ...s/common/applicationTracker/Cancelled.vue
@@ -17,7 +17,7 @@
   </application-status-tracker-banner>
 </template>
 <script lang="ts">
-import ApplicationStatusTrackerBanner from "@/components/students/applicationTracker/generic/ApplicationStatusTrackerBanner.vue";
+import ApplicationStatusTrackerBanner from "@/components/common/applicationTracker/generic/ApplicationStatusTrackerBanner.vue";
 import { useFormatters } from "@/composables";
 import { defineComponent } from "vue";
 

diff --git a/...students/applicationTracker/Completed.vue → ...s/common/applicationTracker/Completed.vue b/...students/applicationTracker/Completed.vue → ...s/common/applicationTracker/Completed.vue
@@ -37,6 +37,7 @@
             assessmentDetails.applicationOfferingChangeRequestId,
           )
         "
+        :disabled="!areApplicationActionsAllowed"
         >Review changes</v-btn
       >
     </template>
@@ -220,10 +221,10 @@ import {
 import { onMounted, ref, defineComponent, computed } from "vue";
 import { ApplicationService } from "@/services/ApplicationService";
 import { CompletedApplicationDetailsAPIOutDTO } from "@/services/http/dto/Application.dto";
-import ApplicationStatusTrackerBanner from "@/components/students/applicationTracker/generic/ApplicationStatusTrackerBanner.vue";
-import DisbursementBanner from "@/components/students/applicationTracker/DisbursementBanner.vue";
-import MultipleDisbursementBanner from "@/components/students/applicationTracker/MultipleDisbursementBanner.vue";
-import RelatedApplicationChanged from "@/components/students/applicationTracker/RelatedApplicationChanged.vue";
+import ApplicationStatusTrackerBanner from "@/components/common/applicationTracker/generic/ApplicationStatusTrackerBanner.vue";
+import DisbursementBanner from "@/components/common/applicationTracker/DisbursementBanner.vue";
+import MultipleDisbursementBanner from "@/components/common/applicationTracker/MultipleDisbursementBanner.vue";
+import RelatedApplicationChanged from "@/components/common/applicationTracker/RelatedApplicationChanged.vue";
 import { StudentRoutesConst } from "@/constants/routes/RouteConstants";
 import { useRouter } from "vue-router";
 import {
@@ -243,6 +244,11 @@ export default defineComponent({
       type: Number,
       required: true,
     },
+    areApplicationActionsAllowed: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   setup(props) {
     const router = useRouter();

diff --git a/...applicationTracker/DisbursementBanner.vue → ...applicationTracker/DisbursementBanner.vue b/...applicationTracker/DisbursementBanner.vue → ...applicationTracker/DisbursementBanner.vue
@@ -61,7 +61,7 @@
   />
 </template>
 <script lang="ts">
-import ApplicationStatusTrackerBanner from "@/components/students/applicationTracker/generic/ApplicationStatusTrackerBanner.vue";
+import ApplicationStatusTrackerBanner from "@/components/common/applicationTracker/generic/ApplicationStatusTrackerBanner.vue";
 import { COEStatus, DisbursementScheduleStatus } from "@/types";
 import { defineComponent, PropType, computed } from "vue";
 

diff --git a/...nts/students/applicationTracker/Draft.vue → ...nents/common/applicationTracker/Draft.vue b/...nts/students/applicationTracker/Draft.vue → ...nents/common/applicationTracker/Draft.vue
@@ -4,19 +4,29 @@
     content="Your application has not been submitted to StudentAid BC yet. Please complete and submit your application when you are ready."
     icon="fa:fas fa-pencil-alt"
     ><template #actions>
-      <v-btn color="primary" @click="$emit('editApplication')"
+      <v-btn
+        color="primary"
+        @click="$emit('editApplication')"
+        :disabled="!areApplicationActionsAllowed"
         >Continue application
       </v-btn>
     </template>
   </application-status-tracker-banner>
 </template>
 <script lang="ts">
 import { defineComponent } from "vue";
-import ApplicationStatusTrackerBanner from "@/components/students/applicationTracker/generic/ApplicationStatusTrackerBanner.vue";
+import ApplicationStatusTrackerBanner from "@/components/common/applicationTracker/generic/ApplicationStatusTrackerBanner.vue";
 export default defineComponent({
   emits: ["editApplication"],
   components: {
     ApplicationStatusTrackerBanner,
   },
+  props: {
+    areApplicationActionsAllowed: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
 });
 </script>
diff --git a/...students/applicationTracker/Enrolment.vue → ...s/common/applicationTracker/Enrolment.vue b/...students/applicationTracker/Enrolment.vue → ...s/common/applicationTracker/Enrolment.vue
@@ -22,9 +22,9 @@ import { COEStatus, AssessmentTriggerType } from "@/types";
 import { onMounted, ref, defineComponent } from "vue";
 import { ApplicationService } from "@/services/ApplicationService";
 import { EnrolmentApplicationDetailsAPIOutDTO } from "@/services/http/dto/Application.dto";
-import DisbursementBanner from "@/components/students/applicationTracker/DisbursementBanner.vue";
-import MultipleDisbursementBanner from "@/components/students/applicationTracker/MultipleDisbursementBanner.vue";
-import RelatedApplicationChanged from "@/components/students/applicationTracker/RelatedApplicationChanged.vue";
+import DisbursementBanner from "@/components/common/applicationTracker/DisbursementBanner.vue";
+import MultipleDisbursementBanner from "@/components/common/applicationTracker/MultipleDisbursementBanner.vue";
+import RelatedApplicationChanged from "@/components/common/applicationTracker/RelatedApplicationChanged.vue";
 
 export default defineComponent({
   components: {

diff --git a/...tudents/applicationTracker/InProgress.vue → .../common/applicationTracker/InProgress.vue b/...tudents/applicationTracker/InProgress.vue → .../common/applicationTracker/InProgress.vue
@@ -240,7 +240,7 @@
   />
 </template>
 <script lang="ts">
-import ApplicationStatusTrackerBanner from "@/components/students/applicationTracker/generic/ApplicationStatusTrackerBanner.vue";
+import ApplicationStatusTrackerBanner from "@/components/common/applicationTracker/generic/ApplicationStatusTrackerBanner.vue";
 import { StudentRoutesConst } from "@/constants/routes/RouteConstants";
 import { useRouter } from "vue-router";
 import {

diff --git a/...ionTracker/MultipleDisbursementBanner.vue → ...ionTracker/MultipleDisbursementBanner.vue b/...ionTracker/MultipleDisbursementBanner.vue → ...ionTracker/MultipleDisbursementBanner.vue
@@ -128,7 +128,7 @@
   />
 </template>
 <script lang="ts">
-import ApplicationStatusTrackerBanner from "@/components/students/applicationTracker/generic/ApplicationStatusTrackerBanner.vue";
+import ApplicationStatusTrackerBanner from "@/components/common/applicationTracker/generic/ApplicationStatusTrackerBanner.vue";
 import { COEStatus, DisbursementScheduleStatus } from "@/types";
 import { defineComponent, PropType, computed } from "vue";
 

diff --git a/...tionTracker/RelatedApplicationChanged.vue → ...tionTracker/RelatedApplicationChanged.vue b/...tionTracker/RelatedApplicationChanged.vue → ...tionTracker/RelatedApplicationChanged.vue
@@ -13,7 +13,7 @@
   </application-status-tracker-banner>
 </template>
 <script lang="ts">
-import ApplicationStatusTrackerBanner from "@/components/students/applicationTracker/generic/ApplicationStatusTrackerBanner.vue";
+import ApplicationStatusTrackerBanner from "@/components/common/applicationTracker/generic/ApplicationStatusTrackerBanner.vue";
 import { defineComponent } from "vue";
 
 export default defineComponent({

diff --git a/...students/applicationTracker/Submitted.vue → ...s/common/applicationTracker/Submitted.vue b/...students/applicationTracker/Submitted.vue → ...s/common/applicationTracker/Submitted.vue
@@ -15,7 +15,7 @@
 </template>
 <script lang="ts">
 import { defineComponent } from "vue";
-import ApplicationStatusTrackerBanner from "@/components/students/applicationTracker/generic/ApplicationStatusTrackerBanner.vue";
+import ApplicationStatusTrackerBanner from "@/components/common/applicationTracker/generic/ApplicationStatusTrackerBanner.vue";
 export default defineComponent({
   components: {
     ApplicationStatusTrackerBanner,

diff --git a/...eneric/ApplicationStatusTrackerBanner.vue → ...eneric/ApplicationStatusTrackerBanner.vue b/...eneric/ApplicationStatusTrackerBanner.vue → ...eneric/ApplicationStatusTrackerBanner.vue