Dev/v1.2 (#4)

Co-authored-by: ISMAIL MASSERAN <topaz@Mac.dlinkrouter.local>
Reviewed-on: #4

fe/src/modules/profile/pages/EmploymentTab.vue

@@ -69,6 +69,33 @@ const EMPLOYMENT_TYPE_OPTIONS: SelectOption[] = [
   { label: 'Freelance', value: 'Freelance' },
 ]
 
+// TODO: replace with API lookup
+const EMPLOYERS = [
+  {
+    name: 'Infra Quest Sdn Bhd (IQSB)',
+    address: 'Lot 1045, Jalan Dato’ Lundang, 15200 Kota Bharu, Kelantan',
+  },
+  {
+    name: 'Permodalan Kelantan Berhad (PKB)',
+    address:
+      'Permodalan Kelantan Berhad, Tingkat 4, Wisma Permodalan Kelantan Berhad, Jalan Maju, 15000 Kota Bharu Kelantan',
+  },
+  {
+    name: 'Koperasi Permodalan Kelantan Berhad (KOPKB)',
+    address:
+      'Lot Pt 448, Tingkat 1,Jalan Kuala Krai, Batu 3, Wakaf Che Yeh, 15150 Kota Bharu, Kelantan.',
+  },
+  {
+    name: "An-Nisa'",
+    address: 'Jln Sultan Ibrahim, Bandar Kota Bharu, 15050 Kota Bharu, Kelantan.',
+  },
+] as const
+
+const COMPANY_OPTIONS: SelectOption[] = EMPLOYERS.map((employer) => ({
+  label: employer.name,
+  value: employer.name,
+}))
+
 function createSelectCollection(options: SelectOption[]) {
   return select.collection({
     items: options,
@@ -88,9 +115,12 @@ function apiValueToLabel(options: SelectOption[], value: string | null | undefin
 }
 
 const employmentTypeCollection = createSelectCollection(EMPLOYMENT_TYPE_OPTIONS)
+const companyNameCollection = createSelectCollection(COMPANY_OPTIONS)
 
 const employmentTypeValue = ref<string[]>([])
 const employmentTypeInitial = ref<string[]>([])
+const companyNameValue = ref<string[]>([])
+const companyNameInitial = ref<string[]>([])
 
 function clearEmploymentFieldError(field: EmploymentFieldKey) {
   delete employmentErrors[field]
@@ -140,6 +170,10 @@ const employmentTypeLabel = computed(() =>
 
 const isEditingEmployment = computed(() => editingEmploymentId.value !== null)
 
+const canAddEmployment = computed(() => !loadingEmployments.value && employments.value.length === 0)
+
+const showEmploymentForm = computed(() => isEditingEmployment.value || canAddEmployment.value)
+
 function setEmploymentTypeValue(details: { value: string[] }) {
   employmentTypeValue.value = details.value
   clearEmploymentFieldError('employment_type')
@@ -147,9 +181,17 @@ function setEmploymentTypeValue(details: { value: string[] }) {
     labelToApiValue(EMPLOYMENT_TYPE_OPTIONS, details.value[0]) ?? ''
 }
 
+function setCompanyNameValue(details: { value: string[] }) {
+  companyNameValue.value = details.value
+  clearEmploymentFieldError('company_name')
+  employmentForm.company_name = details.value[0] ?? ''
+}
+
 function syncEmploymentSelectValues() {
   employmentTypeValue.value = apiValueToLabel(EMPLOYMENT_TYPE_OPTIONS, employmentForm.employment_type)
   employmentTypeInitial.value = [...employmentTypeValue.value]
+  companyNameValue.value = apiValueToLabel(COMPANY_OPTIONS, employmentForm.company_name)
+  companyNameInitial.value = [...companyNameValue.value]
 }
 
 function resetEmploymentForm() {
@@ -194,7 +236,7 @@ function validateEmploymentForm(): boolean {
 
   let valid = true
 
-  if (!employmentForm.company_name.trim()) {
+  if (!companyNameValue.value[0]?.trim()) {
     employmentErrors.company_name = 'Nama syarikat diperlukan.'
     valid = false
   }
@@ -441,7 +483,8 @@ onMounted(async () => {
           Tiada pekerjaan direkodkan.
         </div>
 
-        <form class="space-y-6 border-t border-foreground/10 pt-6" @submit.prevent="onSaveEmployment">
+        <form v-if="showEmploymentForm" class="space-y-6 border-t border-foreground/10 pt-6"
+          @submit.prevent="onSaveEmployment">
           <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
             <div>
               <h4 class="text-base font-semibold text-slate-900">
@@ -470,10 +513,24 @@ onMounted(async () => {
           <FieldGroup>
             <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
               <Field>
-                <FieldLabel for="employment-company">Nama Syarikat</FieldLabel>
-                <Input id="employment-company" v-model="employmentForm.company_name" type="text"
-                  placeholder="Nama syarikat" :aria-invalid="!!employmentErrors.company_name"
-                  @input="clearEmploymentFieldError('company_name')" />
+                <FieldLabel>Nama Syarikat</FieldLabel>
+                <SelectRoot :key="`company-name-${editingEmploymentId ?? 'new'}`" class="w-full"
+                  :collection="companyNameCollection" :default-value="companyNameInitial" :disabled="savingEmployment"
+                  @value-change="setCompanyNameValue">
+                  <SelectControl>
+                    <SelectTrigger :aria-invalid="!!employmentErrors.company_name">
+                      <SelectValueText placeholder="Pilih syarikat" />
+                    </SelectTrigger>
+                  </SelectControl>
+                  <SelectContent>
+                    <SelectItemGroup>
+                      <SelectItemGroupLabel>Nama Syarikat</SelectItemGroupLabel>
+                      <SelectItem v-for="item in companyNameCollection.items" :key="item.label" :item="item">
+                        <SelectItemText>{{ item.label }}</SelectItemText>
+                      </SelectItem>
+                    </SelectItemGroup>
+                  </SelectContent>
+                </SelectRoot>
                 <FieldError v-if="employmentErrors.company_name">{{ employmentErrors.company_name }}</FieldError>
               </Field>
               <Field>