refactor: use TableEmpoloyee

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

@@ -1,25 +1,29 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
+import { QTableProps } from 'quasar';
 
 import useCustomerStore from 'stores/customer';
 import useFlowStore from 'stores/flow';
 import useOptionStore from 'stores/options';
+import { dialog } from 'stores/utils';
 
 import { Status } from 'stores/types';
+import { Employee, EmployeeHistory } from 'stores/employee/types';
 import { CustomerBranch, CustomerType } from 'stores/customer/types';
-import { useI18n } from 'vue-i18n';
 
-import { dialog } from 'stores/utils';
+import { columnsEmployee } from './constant';
+import { useCustomerBranchForm, useEmployeeForm } from './form';
+
 import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
 import SideMenu from 'components/SideMenu.vue';
 import { DialogFormContainer, DialogHeader } from 'components/dialog';
 import BranchCardCustomer from 'components/03_customer-management/BranchCardCustomer.vue';
 import PaginationComponent from 'components/PaginationComponent.vue';
 import NoData from 'components/NoData.vue';
-import { QTableProps } from 'quasar';
+import TableEmpoloyee from 'components/03_customer-management/TableEmpoloyee.vue';
 import { AddressForm } from 'components/form';
-import { useCustomerBranchForm } from './form';
-import { storeToRefs } from 'pinia';
 import {
   SaveButton,
   CancelButton,
@@ -34,11 +38,12 @@ import {
 } from './components';
 
 const flowStore = useFlowStore();
-const { t } = useI18n();
-
 const customerStore = useCustomerStore();
-const { fetchListCustomeBranch } = customerStore;
+const employeeFormStore = useEmployeeForm();
 const customerBranchFormStore = useCustomerBranchForm();
+
+const { t } = useI18n();
+const { fetchListCustomeBranch } = customerStore;
 const {
   currentFormData: customerBranchFormData,
   state: customerBranchFormState,
@@ -54,6 +59,9 @@ const currentCustomerUrlImage = defineModel<string | null>(
   'currentCustomerUrlImage',
 );
 
+const { state: employeeFormState, currentFromDataEmployee } =
+  storeToRefs(employeeFormStore);
+
 const currentStatus = ref<Status | 'All'>('All');
 const currentBtnOpen = ref<boolean[]>([]);
 const totalBranch = ref(0);
@@ -73,6 +81,8 @@ const prop = withDefaults(
   },
 );
 
+const listEmployee = ref<Employee[]>([]);
+
 const customerId = defineModel<string>('customerId', { required: true });
 
 defineEmits<{
@@ -475,11 +485,41 @@ watch([customerId, inputSearch, currentStatus], async () => {
                   }
                 "
               />
+              <q-btn
+                class="btn-arrow-right"
+                :class="{ active: currentBtnOpen[props.rowIndex] }"
+                icon="mdi-arrow-right-bold-outline"
+                size="sm"
+                dense
+                round
+                flat
+                @click="
+                  () => {
+                    currentBtnOpen[props.rowIndex] =
+                      !currentBtnOpen[props.rowIndex];
+                  }
+                "
+              />
             </q-td>
           </q-tr>
 
-          <q-tr v-if="currentBtnOpen[props.rowIndex]" class="q-pa-sm">
-            {{ props.rowIndex }}
+          <q-tr v-show="currentBtnOpen[props.rowIndex]" :props="props">
+            <q-td colspan="100%" style="padding: 16px">
+              <div class="text-center">
+                <TableEmpoloyee
+                  :list-employee="listEmployee"
+                  :columns-employee="columnsEmployee"
+                  @history="(item) => {}"
+                  @view="
+                    (item) => {
+                      employeeFormState.drawerModal = true;
+                      //employeeFormState.isEmployeeEdit = true;
+                      employeeFormStore.assignFormDataEmployee(item.id);
+                    }
+                  "
+                />
+              </div>
+            </q-td>
           </q-tr>
         </template>
         <template #item="props">
@@ -787,4 +827,14 @@ watch([customerId, inputSearch, currentStatus], async () => {
     color: hsla(var(--_branch-card-bg) / 1);
   }
 }
+
+.btn-arrow-right {
+  transform: rotate(0deg);
+  transition: transform 0.3s ease;
+}
+
+.btn-arrow-right.active {
+  transform: rotate(90deg);
+  transition: transform 0.3s ease;
+}
 </style>