refactor(04): service code and tab

src/components/04_product-service/BasicInformation.vue

@@ -36,6 +36,14 @@ const branchFilter = selectFilterOptionRefMod(
   branchOptions,
   'name',
 );
+
+const serviceCodeOpts = ref([{ label: 'mou', value: 'mou' }]);
+const serviceCodeOptions = ref<Record<string, unknown>[]>([]);
+const serviceCodeFilter = selectFilterOptionRefMod(
+  serviceCodeOpts,
+  serviceCodeOptions,
+  'label',
+);
 </script>
 
 <template>
@@ -109,7 +117,40 @@ const branchFilter = selectFilterOptionRefMod(
     </div>
 
     <div v-if="service" class="col-12 row q-col-gutter-sm">
-      <q-input
+      <q-select
+        outlined
+        clearable
+        use-input
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        input-debounce="0"
+        :disable="!readonly && disableCode"
+        class="col-3"
+        v-model="serviceCode"
+        id="select-br-id"
+        option-label="label"
+        option-value="value"
+        lazy-rules="ondemand"
+        :dense="dense"
+        :readonly="readonly"
+        :options="serviceCodeOptions"
+        :label="$t('serviceCode')"
+        :hide-dropdown-icon="readonly || disableCode"
+        :rules="[(val: string) => !!val]"
+        @filter="serviceCodeFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('noResults') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+      <!-- <q-input
         lazy-rules="ondemand"
         id="input-service-code"
         for="input-service-code"
@@ -122,7 +163,7 @@ const branchFilter = selectFilterOptionRefMod(
         :label="$t('serviceCode')"
         v-model="serviceCode"
         :rules="[(val: string) => !!val || $t('pleaseInformation')]"
-      />
+      /> -->
 
       <q-select
         outlined

src/pages/04_product-service/MainPage.vue

@@ -893,6 +893,7 @@ async function assignFormDataProductService(id: string) {
   const res = await fetchListServiceById(id);
 
   if (res) {
+    currentServiceTab.value = 1;
     statusToggle.value = res.status === 'INACTIVE' ? false : true;
     profileUrl.value = res.imageUrl;
     profileSubmit.value = true;