[web] [SIMS #254]Used symbols, updated components to use symbols

sources/packages/web/jest.config.js

@@ -4,7 +4,8 @@ module.exports = {
     "^.+\\.vue$": "vue-jest",
   },
   globals: {
-    "ts-jest": {
+    "ts-jest": {      
+      babelConfig: 'babel.config.js',
       diagnostics: {
         warnOnly: true,
       },

sources/packages/web/src/components/generic/FooterNavigator.vue

@@ -16,8 +16,8 @@ import { useRouter } from "vue-router";
 
 export default {
   props: {
-    previous: String,
-    next: String,
+    previous: Symbol,
+    next: Symbol,
   },
   setup(props: any) {
     const router = useRouter();

sources/packages/web/src/components/partial-view/student/NavBar.vue

@@ -13,7 +13,7 @@
         icon="pi pi-fw pi-user"
         class="p-button-text"
         style="color: white"
-        @click="$router.push({ name: 'Student-Profile-Edit' })"
+        @click="$router.push({ name: StudentRoutesConst.STUDENT_PROFILE_EDIT })"
       />
       <Button
         v-if="isAuthenticated"
@@ -30,6 +30,7 @@
 <script lang="ts">
 import { computed } from "vue";
 import { AppConfigService } from "../../../services/AppConfigService";
+import { StudentRoutesConst } from "../../../constants/routes/RouteConstants";
 export default {
   setup() {
     const menuItems: any = [];
@@ -41,7 +42,7 @@ export default {
       AppConfigService.shared.authService?.logout();
     };
 
-    return { menuItems, isAuthenticated, logoff };
+    return { menuItems, isAuthenticated, logoff, StudentRoutesConst };
   },
 };
 </script>

sources/packages/web/src/components/partial-view/student/financial-aid-application/ConfirmStudentAidBCProfileInfo.vue

@@ -27,7 +27,7 @@
     </div>
     <h4 class="p-mb-5">
       If the Information is incorrect, please
-      <router-link :to="{ name: 'Student-Profile-Edit' }"
+      <router-link :to="{ name: StudentRoutesConst.STUDENT_PROFILE_EDIT }"
         >click here</router-link
       >
     </h4>
@@ -68,7 +68,7 @@
 <script>
 import { onMounted, ref, reactive } from "vue";
 import { StudentService } from "../../../../services/StudentService";
-
+import { StudentRoutesConst } from "../../../../constants/routes/RouteConstants";
 export default {
   setup() {
     //Creating a reactive array
@@ -82,7 +82,12 @@ export default {
       studentInfo.value = studentInfoFrmService;
       studentContact.value = studentInfoFrmService.contact;
     });
-    return { studentInfo, studentContact, confirmState };
+    return {
+      studentInfo,
+      studentContact,
+      confirmState,
+      StudentRoutesConst,
+    };
   },
 };
 </script>

sources/packages/web/src/components/partial-view/student/financial-aid-application/WelcomePage.vue

@@ -50,12 +50,13 @@
 <script lang="ts">
 import { SetupContext } from "vue";
 import { useRouter } from "vue-router";
+import { StudentRoutesConst } from "../../../../constants/routes/RouteConstants";
 export default {
   setup(props: any, context: SetupContext) {
     const router = useRouter();
     const handleClick = () => {
       context.emit("user-ready");
-      router.push({ name: "personal-info" });
+      router.push({ name: StudentRoutesConst.PERSONAL_INFO });
     };
     return {
       handleClick,

sources/packages/web/src/constants/routes/RouteConstants.ts

@@ -0,0 +1,18 @@
+export const StudentRoutesConst = {
+  //Student
+  APP_STUDENT: Symbol(),
+  STUDENT_DASHBOARD: Symbol(),
+  LOGIN: Symbol(),
+  STUDENT_PROFILE: Symbol(),
+  STUDENT_PROFILE_EDIT: Symbol(),
+  FINANCIAL_AID_APPLICATION: Symbol(),
+  PERSONAL_INFO: Symbol(),
+  SELECT_PROGRAM: Symbol(),
+  FINANCIAL_INFO: Symbol(),
+  CONFIRM_SUBMISSION: Symbol(),
+};
+export const InstitutionRoutesConst = {
+  //Institution
+  APP_INSTITUTION: Symbol(),
+  INSTITUTION_DASHBOARD: Symbol(),
+};

sources/packages/web/src/router/InstitutionRoutes.ts

@@ -1,16 +1,17 @@
 import { RouteRecordRaw } from "vue-router";
 import InstitutionDashboard from "../views/institution/InstitutionDashboard.vue";
 import AppInstitution from "../views/institution/AppInstitution.vue";
+import { InstitutionRoutesConst } from "../constants/routes/RouteConstants";
 
 export const institutionRoutes: Array<RouteRecordRaw> = [
   {
     path: "/institution",
-    name: "AppInstitution",
+    name: InstitutionRoutesConst.APP_INSTITUTION,
     component: AppInstitution,
     children: [
       {
         path: "institution-dashboard",
-        name: "InstitutionDashboard",
+        name: InstitutionRoutesConst.INSTITUTION_DASHBOARD,
         component: InstitutionDashboard,
       },
     ],

sources/packages/web/src/router/StudentRoutes.ts

@@ -8,57 +8,58 @@ import PersonalInfoQuestionnaire from "../views/student/financial-aid-applicatio
 import SelectProgram from "../views/student/financial-aid-application/SelectProgram.vue";
 import FinancialInfo from "../views/student/financial-aid-application/FinancialInfo.vue";
 import ConfirmSubmission from "../views/student/financial-aid-application/ConfirmSubmission.vue";
+import { StudentRoutesConst } from "../constants/routes/RouteConstants";
 
 export const studentRoutes: Array<RouteRecordRaw> = [
   {
     path: "/student",
-    name: "AppStudent",
+    name: StudentRoutesConst.APP_STUDENT,
     component: AppStudent,
     children: [
       {
         path: "student-dashboard",
-        name: "StudentDashboard",
+        name: StudentRoutesConst.STUDENT_DASHBOARD,
         component: StudentDashboard,
       },
       {
         path: "login",
-        name: "Login",
+        name: StudentRoutesConst.LOGIN,
         component: Login,
       },
       {
         path: "student-profile",
-        name: "Student-Profile",
+        name: StudentRoutesConst.STUDENT_PROFILE,
         component: Student,
         props: { editMode: false },
       },
       {
         path: "student-profile/edit",
-        name: "Student-Profile-Edit",
+        name: StudentRoutesConst.STUDENT_PROFILE_EDIT,
         component: Student,
       },
       {
         path: "application",
-        name: "application",
+        name: StudentRoutesConst.FINANCIAL_AID_APPLICATION,
         component: FinancialAidApplication,
         children: [
           {
             path: "personal-info",
-            name: "personal-info",
+            name: StudentRoutesConst.PERSONAL_INFO,
             component: PersonalInfoQuestionnaire,
           },
           {
             path: "select-program",
-            name: "select-program",
+            name: StudentRoutesConst.SELECT_PROGRAM,
             component: SelectProgram,
           },
           {
             path: "financial-info",
-            name: "financial-info",
+            name: StudentRoutesConst.FINANCIAL_INFO,
             component: FinancialInfo,
           },
           {
             path: "confirm-submission",
-            name: "confirm-submission",
+            name: StudentRoutesConst.CONFIRM_SUBMISSION,
             component: ConfirmSubmission,
           },
         ], //Children under /Student/FinancialAidApplication

sources/packages/web/src/views/institution/AppInstitution.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <router-view :key="$route.fullPath" />
+    <router-view />
   </div>
 </template>
 

sources/packages/web/src/views/student/AppStudent.vue

@@ -11,6 +11,7 @@ import NavBar from "../../components/partial-view/student/NavBar.vue";
 import { AppConfigService } from "../../services/AppConfigService";
 import { UserService } from "../../services/UserService";
 import { StudentService } from "../../services/StudentService";
+import { StudentRoutesConst } from "../../constants/routes/RouteConstants";
 
 @Options({
   components: {
@@ -22,20 +23,20 @@ export default class AppStudent extends Vue {
     const router = this.$router;
     if (!AppConfigService.shared.authService?.authenticated) {
       router.push({
-        name: "Login",
+        name: StudentRoutesConst.LOGIN,
       });
     } else if (await UserService.shared.checkUser()) {
       /*After checking the user exists, information differences between BC Service card and SABC is synced
       And Redirect to Home page (Student's Dashboard)*/
       await StudentService.shared.synchronizeFromUserInfo();
       router.push({
-        name: "StudentDashboard",
+        name: StudentRoutesConst.STUDENT_DASHBOARD,
       });
     } else {
       /* User doesn't exist in SABC Database and so redirect the user to Student Profile page
        where they can provide information and create SABC account */
       router.push({
-        name: "Student-Profile",
+        name: StudentRoutesConst.STUDENT_PROFILE,
       });
     }
   }

sources/packages/web/src/views/student/StudentDashboard.vue

@@ -11,20 +11,26 @@
       <Button
         label="Start Application"
         class="p-button-raised"
-        @click="$router.push({ name: 'application' })"
+        @click="
+          $router.push({ name: StudentRoutesConst.FINANCIAL_AID_APPLICATION })
+        "
       />
     </template>
   </Card>
 </template>
 <script lang="ts">
 import { computed } from "vue";
 import { useStore } from "vuex";
+import { StudentRoutesConst } from "../../constants/routes/RouteConstants";
+
 export default {
   setup() {
     const store = useStore();
     const user = computed(() => store.state.student.profile);
+
     return {
       user,
+      StudentRoutesConst,
     };
   },
 };

sources/packages/web/src/views/student/financial-aid-application/ConfirmSubmission.vue

@@ -2,20 +2,26 @@
   <div class="p-component">
     <div class="p-card p-m-4">
       <Section title="Confirm Submission Page..." />
-      <FooterNavigator previous="financial-info" />
+      <FooterNavigator :previous="StudentRoutesConst.FINANCIAL_INFO" />
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import Section from "../../../components/generic/Section.vue";
 import FooterNavigator from "../../../components/generic/FooterNavigator.vue";
+import { StudentRoutesConst } from "../../../constants/routes/RouteConstants";
 
 export default {
   components: {
     Section,
     FooterNavigator,
   },
+  setup() {
+    return {
+      StudentRoutesConst,
+    };
+  },
 };
 </script>
 

sources/packages/web/src/views/student/financial-aid-application/FinancialInfo.vue

@@ -93,13 +93,17 @@
           </ContentGroup>
         </Section>
       </ContentGroup>
-      <FooterNavigator previous="select-program" next="confirm-submission" />
+      <FooterNavigator
+        :previous="StudentRoutesConst.SELECT_PROGRAM"
+        :next="StudentRoutesConst.CONFIRM_SUBMISSION"
+      />
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { reactive } from "vue";
+import { StudentRoutesConst } from "../../../constants/routes/RouteConstants";
 import Section from "../../../components/generic/Section.vue";
 import Question from "../../../components/generic/Question.vue";
 import ContentGroup from "../../../components/generic/ContentGroup.vue";
@@ -131,9 +135,11 @@ export default {
   },
   setup() {
     const financialInfoState = reactive({} as FinancialInfoState);
+
     return {
       questionsFin,
       financialInfoState,
+      StudentRoutesConst,
     };
   },
 };

sources/packages/web/src/views/student/financial-aid-application/PersonalInfoQuestionnaire.vue

@@ -136,12 +136,16 @@
       </Section>
       <HorizontalSeparator />
     </div>
-    <FooterNavigator previous="application" next="select-program" />
+    <FooterNavigator
+      :previous="StudentRoutesConst.FINANCIAL_AID_APPLICATION"
+      :next="StudentRoutesConst.SELECT_PROGRAM"
+    />
   </div>
 </template>
 
 <script lang="ts">
 import { reactive } from "vue";
+import { StudentRoutesConst } from "../../../constants/routes/RouteConstants";
 import Section from "../../../components/generic/Section.vue";
 import Question from "../../../components/generic/Question.vue";
 import RadioButtonList from "../../../components/generic/RadioButtonList.vue";
@@ -176,9 +180,11 @@ export default {
   },
   setup() {
     const personalInfoState = reactive({} as PersonalInfoState);
+
     return {
       questionsPI,
       personalInfoState,
+      StudentRoutesConst,
     };
   },
 };

sources/packages/web/src/views/student/financial-aid-application/SelectProgram.vue

@@ -70,14 +70,18 @@
       <!-- Education Program-->
       <!-- Body-->
       <!-- Footer-->
-      <FooterNavigator previous="personal-info" next="financial-info" />
+      <FooterNavigator
+        :previous="StudentRoutesConst.PERSONAL_INFO"
+        :next="StudentRoutesConst.FINANCIAL_INFO"
+      />
       <!-- Footer -->
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { reactive, ref } from "vue";
+import { StudentRoutesConst } from "../../../constants/routes/RouteConstants";
 import HorizontalSeparator from "../../../components/generic/HorizontalSeparator.vue";
 import Section from "../../../components/generic/Section.vue";
 import Question from "../../../components/generic/Question.vue";
@@ -109,13 +113,13 @@ export default {
       enableEducationProgram.value = true;
       selectedInstitute.value = event.value;
     };
-
     return {
       questionsSelectProgram,
       response,
       enableEducationProgram,
       onInstituteSelect,
       selectedInstitute,
+      StudentRoutesConst,
     };
   },
 };