fix: fixing autocomplete and dropdown

frontend/src/components/forms/AutoCompleteInputComponent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, computed, watch } from 'vue'
 // Carbon
 import '@carbon/web-components/es/components/combo-box/index';
 // Composables
@@ -44,6 +44,11 @@ watch(
 //We set the value prop as a reference for update reason
 const inputValue = ref(props.modelValue)
 
+// This is to make the input list contains the selected value to show when component render
+const inputList = computed<Array<BusinessSearchResult>>(() =>
+  ((!props.contents || props.contents.length === 0) ? [{name: props.modelValue, code: '',status:'',legalType:''}] : props.contents)
+)
+
 let selectedValue: BusinessSearchResult | undefined = undefined
 
 //This function emits the events on update
@@ -82,7 +87,7 @@ const validateInput = (newValue: string) => {
 }
 
 const selectAutocompleteItem = (event: any) => {
-  emitValueChange(event.target.value)
+  emitValueChange(event.detail.item.getAttribute('data-id'))
 }
 
 const onTyping = (event: any) => {
@@ -101,7 +106,6 @@ revalidateBus.on(() => validateInput(inputValue.value))
       :helper-text="tip"
       :title-text="label"
       :value="inputValue"
-      :label="modelValue"
       filterable
       :invalid="error ? true : false"
       :invalid-text="error"
@@ -113,11 +117,11 @@ revalidateBus.on(() => validateInput(inputValue.value))
       >
 
       <cds-combo-box-item
-        v-for="item in contents"
+        v-for="item in inputList"
         :key="item.code"
         :data-id="item.code"
         :data-value="item.name" 
-        :value="item.code">
+        :value="item.name">
         {{ item.name }}
       </cds-combo-box-item>
 

frontend/src/components/forms/DropdownInputComponent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, computed, watch } from 'vue'
 // Carbon
 import '@carbon/web-components/es/components/combo-box/index';
 // Composables
@@ -41,6 +41,11 @@ watch(
 
 //We set it as a separated ref due to props not being updatable
 const selectedValue = ref(props.initialValue)
+// This is to make the input list contains the selected value to show when component render
+const inputList = computed<Array<CodeNameType>>(() =>
+  ((!props.modelValue || props.modelValue.length === 0) ? [{name: props.initialValue, code: '',status:'',legalType:''}] : props.modelValue)
+)
+
 //We set the value prop as a reference for update reason
 emit('empty', isEmpty(props.initialValue))
 //This function emits the events on update
@@ -98,38 +103,21 @@ revalidateBus.on(() => validateInput(selectedValue.value))
       filterable
       :helper-text="tip"
       :title-text="label"
-      :label="selectedValue"
+      :value="selectedValue"
       :invalid="error ? true : false"
       :invalid-text="error"
-      @cds-combo-box-selected="(event:any) => selectedValue = event.target.value"
+      @cds-combo-box-selected="(event:any) => selectedValue = event.detail.item.getAttribute('data-id')"
       :data-focus="id"
       :data-scroll="id">
       <cds-combo-box-item 
-        v-for="option in modelValue"
+        v-for="option in inputList"
         :key="option.code"
-        :value="option.code"
-        :data-item="option.code">
+        :value="option.name"
+        :data-id="option.code"
+        :data-value="option.name">
         {{ option.name }}
       </cds-combo-box-item>
     </cds-combo-box>
-  <bx-dropdown
-
-
-    :value="selectedValue"
-    :label-text="label"
-    :helper-text="tip"
-    :invalid="error ? true : false"
-    :validityMessage="error"
-    @bx-dropdown-beingselected="(target:any) => selectedValue = target.detail.item.__value"
-  >
-    <bx-dropdown-item
-      v-for="option in modelValue"
-      :key="option.code"
-      :value="option.code"
-      :data-item="option.code"
-      >{{ option.name }}</bx-dropdown-item
-    >
-  </bx-dropdown>
 </div>
 </template>
 

frontend/src/helpers/DataConversors.ts

@@ -1,32 +1,36 @@
 import { type Address, emptyAddress } from '@/dto/ApplyClientNumberDto'
 
 export const retrieveClientType = (legalType: string): string => {
-  switch (legalType) {
-    case 'A':
-    case 'B':
-    case 'BC':
-    case 'C':
-    case 'CP':
-    case 'EPR':
-    case 'FOR':
-    case 'LIC':
-    case 'REG':
-      return 'C'
-    case 'S':
-    case 'XS':
-      return 'S'
-    case 'XCP':
-      return 'A'
-    case 'SP':
-      return 'I'
-    case 'GP':
-      return 'P'
-    case 'LP':
-    case 'XL':
-    case 'XP':
-      return 'L'
-    default:
-      throw new Error('Unknown Legal Type.')
+  if (legalType) {
+    switch (legalType) {
+      case 'A':
+      case 'B':
+      case 'BC':
+      case 'C':
+      case 'CP':
+      case 'EPR':
+      case 'FOR':
+      case 'LIC':
+      case 'REG':
+        return 'C'
+      case 'S':
+      case 'XS':
+        return 'S'
+      case 'XCP':
+        return 'A'
+      case 'SP':
+        return 'I'
+      case 'GP':
+        return 'P'
+      case 'LP':
+      case 'XL':
+      case 'XP':
+        return 'L'
+      default:
+        throw new Error('Unknown Legal Type ' + legalType)
+    }
+  } else {
+    return ''
   }
 }
 

frontend/src/helpers/validators/ExternalFormValidations.ts

@@ -108,7 +108,6 @@ globalValidations['location.contacts.*.phoneNumber'] = [
 export const getField = (path: string, value: FormDataDto): string | string[] => {
   // First we set is in a temporary variable
   let temporaryValue: any = value
-  console.log(path, value)
   // We split the path by dots and iterate over it
   path.split('.').forEach((key: string) => {
     const fieldKey = key.includes('(') ? key.replace(')', '').split('(')[0] : key