refactor: chech role

src/components/shared/select/SelectBranch.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
+import { getRole } from 'src/services/keycloak';
 
 import { createSelect, SelectProps } from './select';
 import SelectInput from '../SelectInput.vue';
@@ -29,6 +30,7 @@ type ExclusiveProps = {
   codeOnly?: boolean;
   selectFirstValue?: boolean;
   branchVirtual?: boolean;
+  checkRole?: string[];
 };
 
 const props = defineProps<SelectProps<typeof getList> & ExclusiveProps>();
@@ -98,7 +100,12 @@ function setDefaultValue() {
     "
     :hide-selected="false"
     :fill-input="false"
-    :rules="[(v: string) => !!v || $t('form.error.required')]"
+    :rules="[
+      (v: string) =>
+        checkRole?.some((v) => getRole()?.includes(v)) ||
+        !!v ||
+        $t('form.error.required'),
+    ]"
     @filter="filter"
   >
     <template #append v-if="clearable">

src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue

@@ -1,17 +1,6 @@
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
-import { QSelect } from 'quasar';
-import { selectFilterOptionRefMod } from 'stores/utils';
-import { getRole } from 'src/services/keycloak';
 import useOptionStore from 'stores/options';
-import { onMounted } from 'vue';
+import SelectBranch from 'src/components/shared/select/SelectBranch.vue';
-
-import {
-  SaveButton,
-  EditButton,
-  DeleteButton,
-  UndoButton,
-} from 'components/button';
 
 withDefaults(
   defineProps<{
@@ -48,36 +37,6 @@ const legalPersonNo = defineModel<string>('legalPersonNo', { default: '' });
 const businessType = defineModel<string>('businessType');
 const jobPosition = defineModel<string>('jobPosition');
 const telephoneNo = defineModel<string>('telephoneNo', { default: '' });
-
-const branchOptions = defineModel<{ id: string; name: string }[]>(
-  'branchOptions',
-  { default: [] },
-);
-const filteredBranchOptions = ref<Record<string, unknown>[]>([]);
-
-let branchFilter: (
-  value: string,
-  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
-) => void;
-
-onMounted(() => {
-  branchFilter = selectFilterOptionRefMod(
-    branchOptions,
-    filteredBranchOptions,
-    'name',
-  );
-});
-
-watch(
-  () => branchOptions.value,
-  () => {
-    branchFilter = selectFilterOptionRefMod(
-      branchOptions,
-      filteredBranchOptions,
-      'name',
-    );
-  },
-);
 </script>
 
 <template>
@@ -137,47 +96,16 @@ watch(
 
     <div class="col-12 row q-col-gutter-sm">
       <div class="col-12 row q-col-gutter-sm">
-        <q-select
+        <SelectBranch
-          outlined
+          :for="`${prefixId}-input-source-registered-branch`"
-          use-input
+          v-model:value="registeredBranchId"
-          fill-input
-          emit-value
-          map-options
-          hide-selected
-          hide-bottom-space
-          dense
-          class="col-6"
-          option-value="id"
-          input-debounce="0"
-          option-label="name"
-          v-model="registeredBranchId"
-          :readonly="readonly"
-          :options="filteredBranchOptions"
-          :hide-dropdown-icon="readonly"
           :label="$t('customer.form.registeredBranch')"
-          :for="`${prefixId}-input-source-nationality`"
+          class="col-md-6"
-          :rules="[
+          simple
-            (val) => {
+          required
-              const roles = getRole() || [];
+          :readonly
-              return (
+          :check-role="['admin', 'system', 'head_of_admin']"
-                ['admin', 'system', 'head_of_admin'].some((v) =>
+        />
-                  roles.includes(v),
-                ) ||
-                !!val ||
-                $t('form.error.required')
-              );
-            },
-          ]"
-          @filter="branchFilter"
-        >
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey">
-                {{ $t('general.noData') }}
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
       </div>
 
       <div