fix: new 03 ui & layout

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

@@ -81,6 +81,7 @@ const {
 const flowStore = useFlowStore();
 const employeeStore = useEmployeeStore();
 const optionStore = useOptionStore();
+const currentTab = ref('employer');
 const formData = ref<CustomerCreate>({
   status: 'CREATED',
   personName: '',
@@ -129,6 +130,10 @@ const fieldSelectedCustomer = ref<{ label: string; value: string }>({
   value: 'all',
 });
 
+const fieldSelected = ref();
+const fieldDisplay = ref();
+const splitterModel = ref(15);
+const modeView = ref(true);
 const currentEmployee = ref<Employee | undefined>();
 const currentEmployeeCode = ref('');
 const isEmployeeEdit = ref(false);
@@ -1216,6 +1221,7 @@ watch(locale, () => {
 
 watch(fieldSelectedCustomer, async () => {
   let resultList;
+  console.log('asd');
 
   if (fieldSelectedCustomer.value.value === 'all') {
     resultList = await fetchList({ includeBranch: true });
@@ -1278,6 +1284,12 @@ watch(genderSelector, async () => {
 
 watch(selectorLabel, async () => {
   if (inputSearch.value) inputSearch.value = undefined;
+  if (selectorLabel.value === 'EMPLOYEE') {
+    await fetchListEmployee();
+    await fetchListStatsEmployeeGender();
+  } else {
+    await fetchListCustomer();
+  }
 });
 
 watch([inputSearch, currentStatus], async () => {
@@ -1331,10 +1343,25 @@ watch([inputSearch, currentStatus], async () => {
 
   <div class="column full-height no-wrap">
     <div v-if="isMainPage" class="column full-height">
-      <div class="text-body-2 q-mb-xs flex items-center">
+      <div class="text-body-2 text-weight-medium q-mb-xs flex items-center">
         {{ $t('dataSum') }}
+        <q-badge
+          v-if="listCustomer"
+          rounded
+          class="q-ml-sm"
+          style="
+            background-color: hsla(var(--info-bg) / 0.15);
+            color: hsl(var(--info-bg));
+          "
+        >
+          {{
+            selectorLabel === 'EMPLOYER'
+              ? listCustomer?.length
+              : listEmployee.length
+          }}
+        </q-badge>
         <q-btn
-          class="q-ml-xs"
+          class="q-ml-lg"
           icon="mdi-pin"
           color="primary"
           size="sm"
@@ -1390,128 +1417,212 @@ watch([inputSearch, currentStatus], async () => {
       </div>
 
       <!-- main -->
-      <div class="surface-1 bordered rounded q-pa-md scroll col">
+      <div class="surface-1 bordered rounded col column">
-        <div class="row q-pb-md">
+        <!-- tabs -->
-          <div class="col">
+        <div class="column">
-            <q-select
-              id="select-userType"
-              for="select-userType"
-              v-if="selectorLabel === 'EMPLOYER'"
-              v-model="fieldSelectedCustomer"
-              style="width: 150px"
-              outlined
-              :options="fieldCustomer.map((v) => ({ label: $t(v), value: v }))"
-              :label="$t('customerCardUserType')"
-              dense
-            />
-            <q-btn-toggle
-              v-else
-              v-model="genderSelector"
-              id="btn-mode"
-              class="no-shadow"
-              padding="0px"
-              toggle-color="grey-3"
-              size="xs"
-              :options="[
-                { value: 'female', slot: 'female' },
-                { value: 'male', slot: 'male' },
-              ]"
-            >
-              <template v-slot:female>
           <div
-                  class="bordered-t bordered-l bordered-b q-px-md q-py-sm app-text-female text-weight-medium text-body2 row items-center"
+            class="row surface-3 bordered-b justify-between full-width items-center surface-1"
-                  @click="
+            style="z-index: 1"
-                    async () => {
-                      if (genderSelector === 'female') {
-                        await fetchListEmployee();
-                        genderSelector = '';
-                      }
-                    }
-                  "
           >
-                  <q-icon
+            <div class="row q-py-sm q-px-md justify-between full-width">
-                    name="mdi-gender-female"
-                    class="q-mr-sm"
-                    size="18px"
-                  />
-                  <div v-if="statsEmployeeGender">
-                    {{ statsEmployeeGender.female ?? 0 }} {{ $t('person') }}
-                  </div>
-                </div>
-              </template>
-
-              <template v-slot:male>
-                <div
-                  class="bordered q-px-md q-py-sm app-text-male text-weight-medium text-body2 row items-center"
-                  @click="
-                    async () => {
-                      if (genderSelector === 'male') {
-                        await fetchListEmployee();
-                        genderSelector = '';
-                      }
-                    }
-                  "
-                >
-                  <q-icon name="mdi-gender-male" class="q-mr-sm" size="18px" />
-                  <div v-if="statsEmployeeGender">
-                    {{ statsEmployeeGender.male ?? 0 }} {{ $t('person') }}
-                  </div>
-                </div>
-              </template>
-            </q-btn-toggle>
-          </div>
-
               <q-input
                 for="input-search"
                 outlined
                 dense
                 style="width: 250px"
                 :label="$t('search')"
-            class="q-mr-lg"
+                class="q-mr-md"
                 :bg-color="$q.dark.isActive ? 'dark' : 'white'"
                 v-model="inputSearch"
                 debounce="200"
+              >
+                <template #prepend>
+                  <q-icon name="mdi-magnify" />
+                </template>
+              </q-input>
+
+              <div class="row">
+                <q-select
+                  v-model="currentStatus"
+                  outlined
+                  dense
+                  option-value="value"
+                  option-label="label"
+                  class="q-pr-md"
+                  map-options
+                  emit-value
+                  :options="[
+                    { label: $t('all'), value: 'All' },
+                    { label: $t('statusACTIVE'), value: 'ACTIVE' },
+                    { label: $t('statusINACTIVE'), value: 'INACTIVE' },
+                  ]"
+                ></q-select>
+
+                <q-select
+                  id="select-field"
+                  for="select-field"
+                  :options="[
+                    { label: 'กันว่าง 1', value: 'กันว่าง 1' },
+                    { label: 'กันว่าง 2', value: 'กันว่าง 2' },
+                  ]"
+                  :display-value="$t('displayField')"
+                  v-model="fieldSelected"
+                  option-label="label"
+                  option-value="value"
+                  map-options
+                  emit-value
+                  outlined
+                  multiple
+                  dense
                 />
 
-          <q-btn
+                <q-btn-toggle
-            id="btn-status"
+                  id="btn-mode"
-            icon="mdi-tune-vertical-variant"
+                  v-model="modeView"
-            size="sm"
+                  dense
-            :color="$q.dark.isActive ? 'dark' : 'white'"
+                  class="no-shadow bordered rounded surface-1 q-ml-md"
-            :text-color="$q.dark.isActive ? 'white' : 'dark'"
+                  :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
-            class="bordered rounded"
+                  size="xs"
-            unelevated
+                  :options="[
+                    { value: true, slot: 'folder' },
+                    { value: false, slot: 'list' },
+                  ]"
                 >
-            <q-menu class="bordered">
+                  <template v-slot:folder>
-              <q-list v-close-popup dense>
+                    <q-icon
-                <q-item
+                      name="mdi-view-grid-outline"
-                  id="btn-status-all"
+                      size="16px"
-                  clickable
+                      class="q-px-sm q-py-xs rounded"
-                  class="flex items-center"
+                      :style="{
-                  @click="currentStatus = 'All'"
+                        color: $q.dark.isActive
-                >
+                          ? modeView
-                  {{ $t('all') }}
+                            ? '#C9D3DB '
-                </q-item>
+                            : '#787B7C'
-                <q-item
+                          : modeView
-                  id="btn-status-active"
+                            ? '#787B7C'
-                  clickable
+                            : '#C9D3DB',
-                  class="flex items-center"
+                      }"
-                  @click="currentStatus = 'ACTIVE'"
+                    />
-                >
+                  </template>
-                  {{ $t('statusACTIVE') }}
+                  <template v-slot:list>
-                </q-item>
+                    <q-icon
-                <q-item
+                      name="mdi-format-list-bulleted"
-                  id="btn-status-inactive"
+                      class="q-px-sm q-py-xs rounded"
-                  clickable
+                      size="16px"
-                  class="flex items-center"
+                      :style="{
-                  @click="currentStatus = 'INACTIVE'"
+                        color: $q.dark.isActive
-                >
+                          ? modeView === false
-                  {{ $t('statusINACTIVE') }}
+                            ? '#C9D3DB'
-                </q-item>
+                            : '#787B7C'
-              </q-list>
+                          : modeView === false
-            </q-menu>
+                            ? '#787B7C'
-          </q-btn>
+                            : '#C9D3DB',
+                      }"
+                    />
+                  </template>
+                </q-btn-toggle>
               </div>
+            </div>
+          </div>
+
+          <div class="surface-2 bordered-b q-px-md">
+            <q-tabs
+              dense
+              v-model="currentTab"
+              align="left"
+              class="full-height"
+              active-color="info"
+            >
+              <q-tab
+                name="employer"
+                @click="
+                  async () => {
+                    selectorLabel = 'EMPLOYER';
+                    currentPageCustomer = 1;
+                    inputSearch = '';
+                    currentStatus = 'All';
+                    flowStore.rotate();
+                  }
+                "
+              >
+                <div
+                  class="row"
+                  :class="
+                    currentTab === 'employer' ? 'text-bold' : 'app-text-muted'
+                  "
+                >
+                  {{ $t('EMPLOYER') }}
+                </div>
+              </q-tab>
+              <q-tab
+                name="employee"
+                @click="
+                  async () => {
+                    selectorLabel = 'EMPLOYEE';
+                    currentPageEmployee = 1;
+                    inputSearch = '';
+                    currentStatus = 'All';
+                    flowStore.rotate();
+                  }
+                "
+              >
+                <div
+                  class="row"
+                  :class="
+                    currentTab === 'employee' ? 'text-bold' : 'app-text-muted'
+                  "
+                >
+                  {{ $t('EMPLOYEE') }}
+                </div>
+              </q-tab>
+            </q-tabs>
+          </div>
+        </div>
+
+        <!-- body -->
+        <q-splitter
+          v-model="splitterModel"
+          :limits="[15, 80]"
+          style="width: 100%"
+          class="col"
+        >
+          <template v-slot:before>
+            <div class="column q-pa-md q-gutter-y-sm">
+              <div v-if="selectorLabel === 'EMPLOYER'">
+                <q-item
+                  v-for="v in fieldCustomer"
+                  :key="v"
+                  clickable
+                  dense
+                  class="no-padding flex items-center rounded"
+                  active-class="employer-active"
+                  :active="fieldSelectedCustomer.value === v"
+                  @click="fieldSelectedCustomer = { label: v, value: v }"
+                >
+                  <span class="q-px-md">
+                    {{ $t(v) }}
+                  </span>
+                </q-item>
+              </div>
+              <div v-else>
+                <q-item
+                  active
+                  dense
+                  clickable
+                  active-class="employer-active"
+                  class="no-padding flex items-center rounded"
+                >
+                  <span class="q-px-md">
+                    {{ $t('totalEmployee') }}
+                  </span>
+                </q-item>
+              </div>
+            </div>
+          </template>
+
+          <template v-slot:after>
+            <div class="column full-height surface-2">
+              <!-- employer -->
               <template
                 v-if="
                   listCustomer &&
@@ -1521,13 +1632,16 @@ watch([inputSearch, currentStatus], async () => {
               >
                 <div
                   v-if="listCustomer.length === 0"
-            class="row full-width items-center justify-center"
+                  class="row col full-width items-center justify-center"
                   style="min-height: 250px"
                 >
                   <NoData :not-found="!!inputSearch" />
                 </div>
                 <div
                   v-if="listCustomer.length !== 0"
+                  class="col q-pa-md scroll"
+                >
+                  <div
                     class="row full-width customer-row"
                     :style="`grid-template-columns: repeat(${$q.screen.lt.sm ? '2' : $q.screen.lt.md ? '3' : $q.screen.lt.lg ? '5' : '6'}, 1fr)`"
                     style="min-height: 250px"
@@ -1539,7 +1653,8 @@ watch([inputSearch, currentStatus], async () => {
                       :color="i.customerType === 'CORP' ? 'purple' : 'green'"
                       :metadata="{
                         id: i.id,
-                disabled: i.status === 'ACTIVE' || i.status === 'CREATED',
+                        disabled:
+                          i.status === 'ACTIVE' || i.status === 'CREATED',
                       }"
                       :badge="i.branch"
                       :list="{
@@ -1611,18 +1726,24 @@ watch([inputSearch, currentStatus], async () => {
                       "
                     />
                   </div>
+                </div>
 
                 <div
                   v-if="listCustomer.length !== 0"
-            class="row justify-between q-pt-md"
+                  class="row justify-between items-center q-px-md"
                 >
-            <div class="col-4">
+                  <div class="row col-4 items-center">
-              <div class="row items-center">
                     <div class="app-text-muted" style="width: 80px">
                       {{ $t('showing') }}
                     </div>
                     <div>
-                  <q-btn-dropdown dense unelevated :label="pageSize">
+                      <q-btn-dropdown
+                        dense
+                        unelevated
+                        class="bordered q-pl-md rounded"
+                        :label="pageSize"
+                        style="background-color: var(--surface-1)"
+                      >
                         <q-list>
                           <q-item
                             v-for="v in [10, 30, 50, 100, 500, 1000]"
@@ -1644,9 +1765,8 @@ watch([inputSearch, currentStatus], async () => {
                       </q-btn-dropdown>
                     </div>
                   </div>
-            </div>
 
-            <div class="col-4 row justify-center app-text-muted">
+                  <div class="col-4 flex justify-center app-text-muted">
                     {{
                       $t('recordsPage', {
                         resultcurrentPage: listCustomer.length,
@@ -1654,7 +1774,8 @@ watch([inputSearch, currentStatus], async () => {
                       })
                     }}
                   </div>
-            <div class="col-4 row justify-end">
+
+                  <div class="col-4 flex justify-end">
                     <PaginationComponent
                       v-model:current-page="currentPageCustomer"
                       v-model:max-page="maxPageCustomer"
@@ -1669,20 +1790,26 @@ watch([inputSearch, currentStatus], async () => {
                 </div>
               </template>
 
+              <!-- employee -->
               <template
                 v-if="
-            listEmployee && statsEmployee > 0 && selectorLabel === 'EMPLOYEE'
+                  listEmployee &&
+                  statsEmployee > 0 &&
+                  selectorLabel === 'EMPLOYEE'
                 "
               >
                 <div
                   v-if="listEmployee.length === 0"
-            class="row full-width items-center justify-center"
+                  class="row full-width items-center justify-center col"
                   style="min-height: 250px"
                 >
                   <NoData :not-found="!!inputSearch" />
                 </div>
 
-          <div v-if="listEmployee.length !== 0">
+                <div
+                  class="col column justify-between q-px-md q-pt-md scroll"
+                  v-if="listEmployee.length !== 0"
+                >
                   <PersonCard
                     history
                     :list="
@@ -1713,17 +1840,27 @@ watch([inputSearch, currentStatus], async () => {
                     @update-card="openDialogInputForm"
                     @enter-card="openDialogInputForm"
                     @delete-card="onDelete"
-              @toggle-status="(id, status) => toggleStatusEmployee(id, status)"
+                    @toggle-status="
+                      (id, status) => toggleStatusEmployee(id, status)
+                    "
                   />
-
+                </div>
-            <div class="col-4 row justify-center">
+                <div
-              <div class="col-4">
+                  v-if="listEmployee.length !== 0"
-                <div class="row items-center">
+                  class="row justify-between items-center q-px-md"
+                >
+                  <div class="row col-4 items-center">
                     <div class="app-text-muted" style="width: 80px">
                       {{ $t('showing') }}
                     </div>
                     <div>
-                    <q-btn-dropdown dense unelevated :label="pageSize">
+                      <q-btn-dropdown
+                        dense
+                        unelevated
+                        :label="pageSize"
+                        class="bordered q-pl-md"
+                        style="background-color: var(--surface-1)"
+                      >
                         <q-list>
                           <q-item
                             v-for="v in [10, 30, 50, 100, 500, 1000]"
@@ -1745,9 +1882,8 @@ watch([inputSearch, currentStatus], async () => {
                       </q-btn-dropdown>
                     </div>
                   </div>
-              </div>
 
-              <div class="col-4 row justify-center app-text-muted">
+                  <div class="col-4 flex justify-center app-text-muted">
                     {{
                       $t('recordsPage', {
                         resultcurrentPage: listEmployee.length,
@@ -1755,7 +1891,8 @@ watch([inputSearch, currentStatus], async () => {
                       })
                     }}
                   </div>
-              <div class="col-4 row justify-end">
+
+                  <div class="col-4 flex justify-end">
                     <PaginationComponent
                       v-model:current-page="currentPageEmployee"
                       v-model:max-page="maxPageEmployee"
@@ -1768,7 +1905,6 @@ watch([inputSearch, currentStatus], async () => {
                     />
                   </div>
                 </div>
-          </div>
               </template>
 
               <template
@@ -1793,7 +1929,10 @@ watch([inputSearch, currentStatus], async () => {
                   imgSrc="personnel-table-"
                 />
 
-          <div class="row items-center justify-center" style="flex-grow: 1">
+                <div
+                  class="row items-center justify-center"
+                  style="flex-grow: 1"
+                >
                   <AddButton
                     :label="
                       selectorLabel === 'EMPLOYER'
@@ -1805,6 +1944,9 @@ watch([inputSearch, currentStatus], async () => {
                 </div>
               </template>
             </div>
+          </template>
+        </q-splitter>
+      </div>
     </div>
     <div v-else>
       <CustomerInfoComponent
@@ -3093,4 +3235,9 @@ watch([inputSearch, currentStatus], async () => {
   transform: translateY(-20px);
   opacity: 0;
 }
+
+.employer-active {
+  background-color: hsla(var(--info-bg) / 0.1);
+  color: hsl(var(--info-bg));
+}
 </style>