chore(fe): code reviews

frontend/components.d.ts

@@ -9,11 +9,11 @@ declare module 'vue' {
   export interface GlobalComponents {
     AddressGroupComponent: typeof import('./src/components/grouping/AddressGroupComponent.vue')['default']
     AutoCompleteInputComponent: typeof import('./src/components/forms/AutoCompleteInputComponent.vue')['default']
+    ComboBoxInputComponent: typeof import('./src/components/forms/ComboBoxInputComponent.vue')['default']
     ContactGroupComponent: typeof import('./src/components/grouping/ContactGroupComponent.vue')['default']
     DataFetcher: typeof import('./src/components/DataFetcher.vue')['default']
     DateInputComponent: typeof import('./src/components/forms/DateInputComponent/index.vue')['default']
     DateInputPart: typeof import('./src/components/forms/DateInputComponent/DateInputPart.vue')['default']
-    DropdownInputComponent: typeof import('./src/components/forms/DropdownInputComponent.vue')['default']
     ErrorNotificationGroupingComponent: typeof import('./src/components/grouping/ErrorNotificationGroupingComponent.vue')['default']
     FuzzyMatchNotificationGroupingComponent: typeof import('./src/components/grouping/FuzzyMatchNotificationGroupingComponent.vue')['default']
     LoadingOverlayComponent: typeof import('./src/components/LoadingOverlayComponent.vue')['default']

frontend/src/components/grouping/AddressGroupComponent.vue

@@ -320,7 +320,7 @@ const section = (index: number, purpose: string) => `section-address-${index} ${
       :params="{ method: 'GET' }"
       #="{ content }"
     >
-      <dropdown-input-component
+      <combo-box-input-component
         :id="'province_' + id"
         :label="provinceNaming"
         :autocomplete="section(id, 'address-level1')"
@@ -337,7 +337,7 @@ const section = (index: number, purpose: string) => `section-address-${index} ${
       />
     </data-fetcher>
 
-    <dropdown-input-component
+    <combo-box-input-component
       :id="'country_' + id"
       label="Country"
       :autocomplete="section(id, 'country-name')"

frontend/src/components/grouping/ContactGroupComponent.vue

@@ -232,7 +232,7 @@ const contactName = (contact: Contact, contactId: number) => {
       @error="validation.phoneNumber = !$event"
     />
 
-    <dropdown-input-component
+    <combo-box-input-component
       :id="'role_' + id"
       label="Primary role"
       tip="Choose the primary role for this contact"

frontend/src/components/grouping/StaffContactGroupComponent.vue

@@ -234,7 +234,7 @@ const updateContactType = (value: CodeNameType | undefined) => {
       />
     </div>
 
-    <dropdown-input-component
+    <combo-box-input-component
       :id="'role_' + id"
       label="Contact type"
       tip=""

frontend/src/components/grouping/StaffLocationGroupComponent.vue

@@ -378,7 +378,7 @@ const getLocationDescription = (address: Address, index: number): string =>
       :params="{ method: 'GET' }"
       #="{ content }"
     >
-      <dropdown-input-component
+      <combo-box-input-component
         :id="'province_' + id"
         :label="provinceNaming"
         autocomplete="off"
@@ -397,7 +397,7 @@ const getLocationDescription = (address: Address, index: number): string =>
       />
     </data-fetcher>
 
-    <dropdown-input-component
+    <combo-box-input-component
       :id="'country_' + id"
       label="Country"
       autocomplete="off"

frontend/src/helpers/ForestClientUserSession.ts

@@ -101,11 +101,14 @@ class ForestClientUserSession implements SessionProperties {
         }
       }
 
-      // get the token expiration time, minus 10% to refresh the token before it expires      
-      const timeDifference = ((idToken.payload.exp * 1000) - Date.now()) * 0.9;
+      // get the token expiration time, minus 10% to refresh the token before it expires
+      const timeDifference = (idToken.payload.exp * 1000 - Date.now()) * 0.9;
       // if the refresh interval is not set, set it
-      if (!this.sessionRefreshIntervalId){
-        this.sessionRefreshIntervalId = setInterval(() => this.loadUser(), timeDifference);
+      if (!this.sessionRefreshIntervalId) {
+        this.sessionRefreshIntervalId = setInterval(
+          () => this.loadUser(),
+          timeDifference
+        );
       }
     } else {
       this.user = undefined;
@@ -125,7 +128,7 @@ class ForestClientUserSession implements SessionProperties {
       additionalInfo.lastName = payload.family_name;
     }
 
-    if(payload["custom:idp_business_name"]){
+    if (payload["custom:idp_business_name"]) {
       additionalInfo.businessName = payload["custom:idp_business_name"];
     }
 
@@ -134,12 +137,18 @@ class ForestClientUserSession implements SessionProperties {
       (additionalInfo.firstName === "" && additionalInfo.lastName === "")
     ) {
       const name = payload["custom:idp_display_name"];
-      const nameParts: string[] = name.includes(",") ? name.split(",") : name.split(" ");
+      const nameParts: string[] = name.includes(",")
+        ? name.split(",")
+        : name.split(" ");
 
       if (provider === "idir" && nameParts.length >= 2) {
         // For IDIR, split by comma and then by space for the first name as the value will be Lastname, Firsname MIN:XX
         additionalInfo.lastName = nameParts[0].trim();
-        additionalInfo.firstName = nameParts[1].trim().split(" ").slice(0, -1).join(" ")
+        additionalInfo.firstName = nameParts[1]
+          .trim()
+          .split(" ")
+          .slice(0, -1)
+          .join(" ");
       } else if (nameParts.length >= 2) {
         // For others, assume space separates the first and last names
         additionalInfo.firstName = nameParts[0].trim();