feat: เพิ่ม การแบ่ง นายจ้าง

src/pages/03_customer-management/MainPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 
 import { Pagination } from 'src/stores/types';
@@ -37,7 +37,9 @@ import FormPerson from 'src/components/02_personnel-management/FormPerson.vue';
 import FormEmployeeHealthCheck from 'src/components/03_customer-management/FormEmployeeHealthCheck.vue';
 
 import { dialog } from 'src/stores/utils';
+import { useI18n } from 'vue-i18n';
 
+const { t, locale } = useI18n();
 const userCustomer = useCustomerStore();
 const {
   create,
@@ -83,7 +85,11 @@ const formData = ref<CustomerCreate>({
       wageRate: 0,
     },
   ],
-  image: new File([''], 'dummy.jpg'),
+
+const inputSearch = ref<string>('');
+const fieldSelectedCustomer = ref<{ label: string; value: string }>({
+  label: t('all'),
+  value: 'all',
 });
 
 const formDataEmployeeSameAddr = ref(false);
@@ -201,6 +207,12 @@ const employeeTab = [
   },
 ];
 
+const fieldCustomer = ref([
+  'all',
+  'customerLegalEntity',
+  'customerNaturalPerson',
+]);
+
 const dialogCustomerType = ref<boolean>(false);
 const dialogInputForm = ref<boolean>(false);
 const dialogEmployee = ref<boolean>(false);
@@ -408,6 +420,13 @@ onMounted(async () => {
 
   if (resultList) listCustomer.value = resultList.result;
 });
+
+watch(locale, () => {
+  fieldSelectedCustomer.value = {
+    label: t(`${fieldSelectedCustomer.value.label}`),
+    value: fieldSelectedCustomer.value?.value,
+  };
+});
 </script>
 
 <template>
@@ -473,13 +492,88 @@ onMounted(async () => {
 
       <!-- main -->
       <AppBox bordered class="column" style="width: 100%; min-height: 70vh">
+        <div class="row q-py-md">
+          <div class="col">
+            <q-select
+              v-model="fieldSelectedCustomer"
+              style="width: 150px"
+              outlined
+              :options="fieldCustomer.map((v) => ({ label: $t(v), value: v }))"
+              :label="$t('customerCardUserType')"
+              dense
+            />
+          </div>
+
+          <q-input
+            outlined
+            dense
+            style="width: 250px"
+            :label="$t('search')"
+            class="q-mr-lg"
+            :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+            v-model="inputSearch"
+            debounce="500"
+            @update:model-value="searchCustomer()"
+          />
+
+          <q-btn
+            icon="mdi-tune-vertical-variant"
+            size="sm"
+            :color="$q.dark.isActive ? 'dark' : 'white'"
+            :text-color="$q.dark.isActive ? 'white' : 'dark'"
+            class="bordered rounded"
+            unelevated
+          >
+            <q-menu class="bordered">
+              <q-list v-close-popup dense>
+                <q-item
+                  clickable
+                  class="flex items-center"
+                  @click="console.log('test')"
+                >
+                  {{ $t('all') }}
+                </q-item>
+                <q-item
+                  clickable
+                  class="flex items-center"
+                  @click="console.log('test')"
+                >
+                  {{ $t('statusACTIVE') }}
+                </q-item>
+                <q-item
+                  clickable
+                  class="flex items-center"
+                  @click="console.log('test')"
+                >
+                  {{ $t('statusINACTIVE') }}
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </div>
+
         <template v-if="listCustomer && selectorLabel === 'EMPLOYER'">
           <div
             class="row full-width customer-row"
             :style="`grid-template-columns: repeat(${$q.screen.lt.sm ? '1' : $q.screen.lt.md ? '2 ' : '4'}, 1fr)`"
           >
             <UsersDetailCardComponent
-              v-for="i in listCustomer"
+              v-for="i in inputSearch
+                ? resultSearch
+                : listCustomer.filter((v) => {
+                    if (fieldSelectedCustomer.value === 'all') return true;
+
+                    if (
+                      fieldSelectedCustomer.value === 'customerLegalEntity' &&
+                      v.customerType === 'CORP'
+                    )
+                      return true;
+                    if (
+                      fieldSelectedCustomer.value === 'customerNaturalPerson' &&
+                      v.customerType === 'PERS'
+                    )
+                      return true;
+                  })"
               :key="i.id"
               class="hover-card"
               :color="i.customerType === 'CORP' ? 'purple' : 'green'"