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

<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 { 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 TableEmpoloyee from 'components/03_customer-management/TableEmpoloyee.vue';
import { AddressForm } from 'components/form';
import {
  SaveButton,
  CancelButton,
  UndoButton,
  EditButton,
  DeleteButton,
} from 'components/button';
import {
  EmployerFormAbout,
  EmployerFormBusiness,
  EmployerFormContact,
} from './components';

const flowStore = useFlowStore();
const customerStore = useCustomerStore();
const employeeFormStore = useEmployeeForm();
const customerBranchFormStore = useCustomerBranchForm();

const { t } = useI18n();
const { fetchListCustomeBranch } = customerStore;
const {
  currentFormData: customerBranchFormData,
  state: customerBranchFormState,
} = storeToRefs(customerBranchFormStore);

const inputSearch = ref<string>('');

const branch = defineModel<CustomerBranch[]>('branch');
const currentCustomerName = defineModel<string>('currentCustomerName');
const modeView = defineModel<boolean>('modeView');

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);

const currentPageBranch = ref<number>(1);
const maxPageBranch = ref<number>(1);
const pageSizeBranch = ref<number>(30);

const prop = withDefaults(
  defineProps<{
    color?: 'purple' | 'green';

    customerType: CustomerType;
  }>(),
  {
    color: 'green',
  },
);

const listEmployee = ref<Employee[]>([]);

const customerId = defineModel<string>('customerId', { required: true });

defineEmits<{
  (e: 'back'): void;
  (e: 'viewDetail', branch: CustomerBranch, index: number): void;
  (e: 'dialog'): void;
}>();

onMounted(async () => {
  const url = window.location.href;
  const parts = url.split('/');
  customerBranchFormState.value.currentCustomerId = parts[4];

  await fetchList();

  branch.value?.forEach((v) => {
    currentBtnOpen.value.push(false);
  });
});

const columns = [
  {
    name: 'branchLabelName',
    align: 'left',
    label: 'office',
    field: 'name',
    sortable: true,
  },
  {
    name: 'branchLabelAddress',
    align: 'left',
    label: 'address',
    field: 'address',
    sortable: true,
  },
  {
    name: 'branchLabelTel',
    align: 'left',
    label: 'formDialogInputTelephone',
    field: 'telephoneNo',
  },
] satisfies QTableProps['columns'];

const fieldDisplay = ref<
  (
    | 'branchName'
    | 'customerBranchFormTab'
    | 'address'
    | 'telephone'
    | 'businessTypePure'
    | 'totalEmployee'
  )[]
>([
  'branchName',
  'customerBranchFormTab',
  'address',
  'telephone',
  'businessTypePure',
  'totalEmployee',
]);
const branchFieldSelected = ref<
  (
    | 'customerBranchFormTab'
    | 'branchName'
    | 'address'
    | 'telephone'
    | 'businessTypePure'
    | 'totalEmployee'
  )[]
>(fieldDisplay.value);

async function deleteBranchById(id: string) {
  return await new Promise((resolve) => {
    dialog({
      color: 'negative',
      icon: 'mdi-alert',
      title: t('deleteConfirmTitle'),
      actionText: t('ok'),
      persistent: true,
      message: t('deleteConfirmMessage'),
      action: async () => {
        await customerStore.deleteBranchById(id);
        await fetchList();
        flowStore.rotate();
        resolve(true);
        customerBranchFormState.value.dialogModal = false;
      },
      cancel: () => {
        resolve(false);
      },
    });
  });
}

async function fetchList() {
  if (!customerId.value) return;

  const result = await fetchListCustomeBranch({
    customerId: customerId.value,
    query: !!inputSearch.value ? inputSearch.value : undefined,
    page: currentPageBranch.value,
    pageSize: pageSizeBranch.value,
    includeCustomer: true,
    status:
      currentStatus.value === 'All'
        ? undefined
        : currentStatus.value === 'ACTIVE'
          ? 'ACTIVE'
          : 'INACTIVE',
  });
  if (result) {
    totalBranch.value = result.total;
    maxPageBranch.value = Math.ceil(result.total / pageSizeBranch.value);
    branch.value = result.result;
  }
}

function openEmployerBranchForm(formType: 'create' | 'edit' | 'info') {
  customerBranchFormState.value.dialogType = formType;
  customerBranchFormState.value.dialogModal = true;
}

onMounted(async () => {
  await fetchList();
});

watch([customerId, inputSearch, currentStatus], async () => {
  await fetchList();
});
</script>

<template>
  <ButtonAddComponent
    style="z-index: 999"
    v-if="$route.name !== 'CustomerManagement'"
  >
    <q-fab-action
      id="add-branch"
      :style="{
        color: 'white',
        'background-color':
          customerType === 'CORP'
            ? 'hsla(var(--violet-11-hsl))'
            : 'hsla(var(--pink-6-hsl))',
      }"
      @click="openEmployerBranchForm('create')"
      padding="xs"
      icon="mdi-office-building-outline"
      :label="$t('formDialogTitleCreateSubBranch')"
      external-label
      label-position="left"
    />
  </ButtonAddComponent>
  <div
    class="row justify-between bordered-b surface-3 full-width q-px-md"
    style="z-index: 1"
  >
    <div class="row items-center col-12 col-md">
      <q-card-section
        class="q-pa-sm q-pt-md q-mr-md q-mb-sm"
        :class="{
          color__purple: customerType === 'CORP',
          color__green: customerType === 'PERS',
        }"
        style="border-radius: 0 0 40px 40px; position: relative"
      >
        <q-avatar no-padding size="50px">
          <img :src="currentCustomerUrlImage ?? '/no-profile.png'" />
        </q-avatar>
      </q-card-section>
      <div>
        <div>{{ currentCustomerName }}</div>
        <div class="row items-center">
          <i
            class="isax isax-frame5"
            style="font-size: 1rem; color: var(--stone-6)"
          />
          <div class="q-px-sm">
            {{ '10' }}
          </div>
          <q-icon name="mdi-home" size="16px" style="color: var(--stone-6)" />
          <div class="q-px-sm">
            {{ '2' }}
          </div>
        </div>
      </div>
    </div>

    <div class="row items-center justify-end col-12 col-md q-py-sm no-wrap">
      <q-input
        lazy-rules="ondemand"
        outlined
        dense
        class="col-6"
        :label="$t('search')"
        :bg-color="$q.dark.isActive ? 'dark' : 'white'"
        v-model="inputSearch"
        debounce="500"
      >
        <template v-slot:prepend>
          <q-icon name="mdi-magnify" />
        </template>
      </q-input>

      <q-select
        lazy-rules="ondemand"
        id="select-status"
        for="select-status"
        v-model="currentStatus"
        outlined
        dense
        option-value="value"
        option-label="label"
        class="col q-pl-sm"
        map-options
        emit-value
        :hide-dropdown-icon="$q.screen.lt.sm"
        :options="[
          { label: $t('all'), value: 'All' },
          { label: $t('statusACTIVE'), value: 'ACTIVE' },
          { label: $t('statusINACTIVE'), value: 'INACTIVE' },
        ]"
      ></q-select>

      <q-btn-toggle
        id="btn-mode"
        v-model="modeView"
        dense
        class="no-shadow bordered rounded surface-1 q-ml-sm"
        :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
        size="xs"
        :options="[
          { value: true, slot: 'folder' },
          { value: false, slot: 'list' },
        ]"
      >
        <template v-slot:folder>
          <q-icon
            id="icon-mode-grid"
            name="mdi-view-grid-outline"
            size="16px"
            class="q-px-sm q-py-sm rounded"
            :style="{
              color: $q.dark.isActive
                ? modeView
                  ? '#C9D3DB'
                  : '#787B7C'
                : modeView
                  ? '#787B7C'
                  : '#C9D3DB',
            }"
          />
        </template>
        <template v-slot:list>
          <q-icon
            id="icon-mode-list"
            name="mdi-format-list-bulleted"
            class="q-px-sm q-py-xs rounded"
            size="16px"
            :style="{
              color: $q.dark.isActive
                ? modeView === true
                  ? '#C9D3DB'
                  : '#787B7C'
                : modeView === false
                  ? '#787B7C'
                  : '#C9D3DB',
            }"
          />
        </template>
      </q-btn-toggle>
    </div>
  </div>
  <div
    class="row q-pa-md col scroll full-width surface-2"
    :class="{
      'justify-center': totalBranch === 0,
      'items-center': totalBranch === 0,
    }"
  >
    <NoData v-if="totalBranch === 0" :not-found="!!inputSearch" />

    <div style="width: 100%" v-else>
      <q-table
        v-if="branch"
        flat
        class="full-width"
        bordered
        :rows-per-page-options="[0]"
        :rows="branch"
        :columns="columns"
        :grid="modeView"
        card-container-class="row q-col-gutter-md"
        row-key="name"
        hide-pagination
        :visible-columns="branchFieldSelected"
      >
        <template #header>
          <q-tr style="background-color: hsla(var(--info-bg) / 0.07)">
            <q-th
              v-for="(v, i) in fieldDisplay"
              :key="v"
              :class="{ 'text-left': i === 0 }"
            >
              {{ $t(v) }}
            </q-th>
            <q-th auto-width />
          </q-tr>
        </template>
        <template #body="props">
          <q-tr
            :class="{
              'app-text-muted': props.row.status === 'INACTIVE',
              'cursor-pointer': props.row._count?.branch !== 0,
            }"
            :props="props"
            @click="$emit('viewDetail', props.row, props.rowIndex)"
          >
            <q-td v-if="branchFieldSelected.includes('branchName')">
              <div class="row items-center no-wrap">
                <div
                  :class="{
                    'status-active': props.row.status !== 'INACTIVE',
                    'status-inactive': props.row.status === 'INACTIVE',
                  }"
                  class="q-mr-md"
                  style="display: flex; margin-bottom: var(--size-2)"
                >
                  <div
                    class="branch-card__icon"
                    :class="{ 'branch-card__dark': $q.dark.isActive }"
                  >
                    <q-icon
                      size="md"
                      style="scale: 0.8"
                      name="mdi-office-building-outline"
                    />
                  </div>
                </div>
                <div class="col" style="min-width: fit-content">
                  <div class="col">
                    {{
                      $i18n.locale === 'en-US'
                        ? props.row.nameEN
                        : props.row.name
                    }}
                  </div>
                  <div class="col app-text-muted">
                    {{ props.row.code }}
                  </div>
                </div>
              </div>
            </q-td>
            <q-td
              v-if="branchFieldSelected.includes('customerBranchFormTab')"
              class="text-center"
            >
              {{ props.row.branchNo || '-' }}
            </q-td>
            <q-td
              v-if="branchFieldSelected.includes('address')"
              class="text-center"
            >
              {{
                $i18n.locale === 'en-US'
                  ? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
                  : `${props.row.address || ''} ${props.row.subDistrict?.name || ''} ${props.row.district?.name || ''} ${props.row.province?.name || ''}`
              }}
            </q-td>
            <q-td
              v-if="branchFieldSelected.includes('telephone')"
              class="text-center"
            >
              {{ props.row.telephoneNo || '-' }}
            </q-td>
            <q-td
              v-if="branchFieldSelected.includes('businessTypePure')"
              class="text-center"
            >
              {{ useOptionStore().mapOption(props.row.bussinessType) || '-' }}
            </q-td>
            <q-td
              v-if="branchFieldSelected.includes('totalEmployee')"
              class="text-center"
            >
              {{ props.row._count?.employee }}
            </q-td>
            <q-td>
              <q-btn
                icon="mdi-eye-outline"
                :id="`btn-eye-${props.row.customerName}`"
                size="sm"
                dense
                round
                flat
                @click="
                  () => {
                    customerBranchFormStore.initForm('info', props.row.id);
                    customerBranchFormState.dialogModal = true;
                  }
                "
              />
              <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-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">
          <div class="col-12 col-md-6">
            <BranchCardCustomer
              class="surface-1"
              :inactive="props.row.status === 'INACTIVE'"
              :color="customerType === 'CORP' ? 'corp' : 'pers'"
              :badgeField="['status']"
              :data="{
                customerBranchFormTab: props.row.branchNo,
                branchName: props.row.name,
                address:
                  $i18n.locale === 'en-US'
                    ? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
                    : `${props.row.address || ''} ${props.row.subDistrict?.name || ''} ${props.row.district?.name || ''} ${props.row.province?.name || ''}`,
                telephone: props.row.telephoneNo,
                businessTypePure: useOptionStore().mapOption(
                  props.row.bussinessType,
                ),
                totalEmployee: props.row._count?.employee,
              }"
              :visible-columns="branchFieldSelected"
              @view-detail="$emit('viewDetail', props.row, props.rowIndex)"
            />
          </div>
        </template>
      </q-table>
    </div>
  </div>

  <div class="row justify-between items-center q-px-md q-py-sm surface-2">
    <div class="col"></div>
    <div class="app-text-muted col text-center">
      {{
        $t('recordsPage', {
          resultcurrentPage: branch?.length,
          total: totalBranch,
        })
      }}
    </div>
    <div class="col-4 flex justify-end">
      <PaginationComponent
        v-model:current-page="currentPageBranch"
        v-model:max-page="maxPageBranch"
        :fetch-data="
          async () => {
            await fetchList();
            flowStore.rotate();
          }
        "
      />
    </div>
  </div>

  <DialogFormContainer
    :model-value="customerBranchFormState.dialogModal"
    :on-close="
      async () => {
        await fetchList();
        customerBranchFormState.dialogModal = false;
        flowStore.rotate();
      }
    "
    @submit="
      async () => {
        const res = await customerBranchFormStore.submitForm();

        if (res) {
          customerBranchFormStore.initForm('info', res?.id);
        }
      }
    "
  >
    <template #header>
      <DialogHeader
        :title="
          $t(`form.title.${customerBranchFormState.dialogType}`, {
            name: $t('customer.employee'),
          })
        "
      >
        <template #before>
          <EditButton
            icon-only
            v-if="customerBranchFormState.dialogType === 'info'"
            @click="customerBranchFormState.dialogType = 'edit'"
          />
          <DeleteButton
            icon-only
            v-if="customerBranchFormState.dialogType === 'info'"
            @click="
              () => {
                deleteBranchById(customerBranchFormData.id || '');
              }
            "
          />
          <UndoButton
            icon-only
            v-if="customerBranchFormState.dialogType === 'edit'"
            @click="customerBranchFormState.dialogType = 'info'"
          />
        </template>
      </DialogHeader>
    </template>

    <div
      style="flex: 1; width: 100%; overflow-y: auto"
      class="surface-2 q-pa-md"
      id="customer-form"
    >
      <div class="col surface-1 full-height rounded bordered row">
        <div
          class="col full-height"
          style="max-height: 100%; overflow-y: auto"
          v-if="$q.screen.gt.sm"
        >
          <div class="q-py-md q-pl-md q-pr-sm">
            <SideMenu
              :menu="[
                {
                  name: $t('customerBranch.tab.main'),
                  anchor: 'employer-branch-main',
                },
                {
                  name: $t('customerBranch.tab.address'),
                  anchor: 'employer-branch-address',
                },
                {
                  name: $t('customerBranch.tab.business'),
                  anchor: 'employer-branch-business',
                },
                {
                  name: $t('customerBranch.tab.contact'),
                  anchor: 'employer-branch-contact',
                },
              ]"
              background="transparent"
              :active="{
                background: 'hsla(var(--blue-6-hsl) / .2)',
                foreground: 'var(--blue-6)',
              }"
              scroll-element="#employer-branch-content"
            />
          </div>
        </div>

        <div
          id="employer-branch-content"
          class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm full-height scroll"
        >
          <div class="row q-col-gutter-sm q-mb-sm" id="employer-branch-main">
            <div class="col-12 text-weight-bold text-body1 row items-center">
              <q-icon
                flat
                size="xs"
                class="q-pa-sm rounded q-mr-sm"
                color="info"
                name="mdi-office-building-outline"
                style="background-color: var(--surface-3)"
              />
              <span>{{ $t('customerBranch.tab.main') }}</span>
            </div>
          </div>
          <EmployerFormAbout
            class="q-mb-xl"
            :readonly="customerBranchFormState.dialogType === 'info'"
            v-model:id="customerBranchFormData.id"
            v-model:branch-no="customerBranchFormData.branchNo"
            v-model:tax-no="customerBranchFormData.taxNo"
            v-model:code="customerBranchFormData.code"
            v-model:name="customerBranchFormData.name"
            v-model:name-en="customerBranchFormData.nameEN"
            v-model:registered-name="customerBranchFormData.registerName"
            v-model:registered-date="customerBranchFormData.registerDate"
            v-model:authorized-capital="
              customerBranchFormData.authorizedCapital
            "
          />
          <div class="row q-col-gutter-sm q-mb-sm" id="employer-branch-address">
            <div class="col-12 text-weight-bold text-body1 row items-center">
              <q-icon
                flat
                size="xs"
                class="q-pa-sm rounded q-mr-sm"
                color="info"
                name="mdi-office-building-outline"
                style="background-color: var(--surface-3)"
              />
              <span>{{ $t('customerBranch.tab.address') }}</span>
            </div>
          </div>
          <AddressForm
            prefix-id="employer-branch"
            class="q-mb-xl"
            hide-title
            dense
            :readonly="customerBranchFormState.dialogType === 'info'"
            outlined
            :title="$t('form.address')"
            v-model:address="customerBranchFormData.address"
            v-model:addressEN="customerBranchFormData.addressEN"
            v-model:province-id="customerBranchFormData.provinceId"
            v-model:district-id="customerBranchFormData.districtId"
            v-model:sub-district-id="customerBranchFormData.subDistrictId"
            :addressTitle="$t('form.address')"
            :addressTitleEN="$t('form.address', { suffix: '(EN)' })"
          />
          <div
            class="row q-col-gutter-sm q-mb-sm"
            id="employer-branch-business"
          >
            <div class="col-12 text-weight-bold text-body1 row items-center">
              <q-icon
                flat
                size="xs"
                class="q-pa-sm rounded q-mr-sm"
                color="info"
                name="mdi-office-building-outline"
                style="background-color: var(--surface-3)"
              />
              <span>{{ $t('customerBranch.tab.business') }}</span>
            </div>
          </div>
          <EmployerFormBusiness
            dense
            class="q-mb-xl"
            outlined
            prefix-id="employer-branch"
            :readonly="customerBranchFormState.dialogType === 'info'"
            v-model:employment-office="customerBranchFormData.employmentOffice"
            v-model:bussiness-type="customerBranchFormData.bussinessType"
            v-model:bussiness-type-en="customerBranchFormData.bussinessTypeEN"
            v-model:job-position="customerBranchFormData.jobPosition"
            v-model:job-position-en="customerBranchFormData.jobPositionEN"
            v-model:job-description="customerBranchFormData.jobDescription"
            v-model:sale-employee="customerBranchFormData.saleEmployee"
            v-model:pay-date="customerBranchFormData.payDate"
            v-model:wage-rate="customerBranchFormData.wageRate"
          />
          <div class="row q-col-gutter-sm q-mb-sm" id="employer-branch-contact">
            <div class="col-12 text-weight-bold text-body1 row items-center">
              <q-icon
                flat
                size="xs"
                class="q-pa-sm rounded q-mr-sm"
                color="info"
                name="mdi-office-building-outline"
                style="background-color: var(--surface-3)"
              />
              <span>{{ $t('customerBranch.tab.contact') }}</span>
            </div>
          </div>
          <EmployerFormContact
            class="q-mb-lg"
            :readonly="customerBranchFormState.dialogType === 'info'"
            v-model:email="customerBranchFormData.email"
            v-model:telephone="customerBranchFormData.telephoneNo"
          />
        </div>
      </div>
    </div>

    <template #footer>
      <CancelButton outlined class="q-ml-auto" v-close-popup />
      <SaveButton
        solid
        class="q-ml-sm"
        type="submit"
        v-if="customerBranchFormState.dialogType !== 'info'"
      />
    </template>
  </DialogFormContainer>
</template>

<style scoped>
.branch-card__icon {
  --_branch-card-bg: var(--pink-6-hsl);

  background-color: hsla(var(--_branch-card-bg) / 0.15);
  border-radius: 50%;
  padding: var(--size-1);
  position: relative;
  transform: rotate(45deg);

  &.branch-card__dark {
    --_branch-card-bg: var(--pink-5-hsl);
  }

  &::after {
    content: ' ';
    display: block;
    block-size: 0.5rem;
    aspect-ratio: 1;
    position: absolute;
    border-radius: 50%;
    right: -0.25rem;
    top: calc(50% - 0.25rem);
    bottom: calc(50% - 0.25rem);
    background-color: hsla(var(--_branch-status-color) / 1);
  }

  & :deep(.q-icon) {
    transform: rotate(-45deg);
    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>