jws-frontend/src/pages/01_branch-management/MainPage.vue

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { ref, onMounted, computed, watch } from 'vue';
import { Icon } from '@iconify/vue';
import { BranchContact } from 'src/stores/branch-contact/types';
import { useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
import type { QTableProps } from 'quasar';

import useBranchStore from 'stores/branch';
import useFlowStore from 'src/stores/flow';
import { BranchWithChildren, BranchCreate } from 'stores/branch/types';
import { Status } from 'src/stores/types';

import useUtilsStore, { dialog } from 'src/stores/utils';
import AddButton from 'components/AddButton.vue';
import TooltipComponent from 'components/TooltipComponent.vue';
import StatCard from 'components/StatCardComponent.vue';
import BranchCard from 'components/01_branch-management/BranchCard.vue';
import FormDialog from 'components/FormDialog.vue';
import FormBranchInformation from 'components/01_branch-management/FormBranchInformation.vue';
import FormLocation from 'components/01_branch-management/FormLocation.vue';
import FormQr from 'components/01_branch-management/FormQr.vue';
import FormBranchContact from 'components/01_branch-management/FormBranchContact.vue';
import FormImage from 'components/01_branch-management/FormImage.vue';
import DrawerInfo from 'components/DrawerInfo.vue';
import InfoForm from 'components/02_personnel-management/InfoForm.vue';

const $q = useQuasar();
const { t } = useI18n();
const utilsStore = useUtilsStore();

const holdDialog = ref(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',
  },
  {
    name: 'branchLabelType',
    align: 'left',
    label: 'type',
    field: 'isHeadOffice',
  },
] satisfies QTableProps['columns'];

const modal = ref<boolean>(false);
const hideStat = ref(false);
const currentStatus = ref<Status | 'All'>('All');
const expandedTree = ref<string[]>([]);

const profileFileImg = ref<File | undefined>(undefined);
const imageUrl = ref<string | null>('');
const currentNode = ref<BranchWithChildren>();

const inputFileImg = (() => {
  const element = document.createElement('input');
  element.type = 'file';
  element.accept = 'image/*';

  const reader = new FileReader();
  reader.addEventListener('load', () => {
    if (typeof reader.result === 'string') imageUrl.value = reader.result;
  });

  element.addEventListener('change', () => {
    profileFileImg.value = element.files?.[0];
    if (profileFileImg.value) {
      reader.readAsDataURL(profileFileImg.value);
    }
  });

  return element;
})();

const profileFile = ref<File | undefined>(undefined);
const qrCodeimageUrl = ref<string | null>('');

const inputFile = (() => {
  const element = document.createElement('input');
  element.type = 'file';
  element.accept = 'image/*';

  const reader = new FileReader();
  reader.addEventListener('load', () => {
    if (typeof reader.result === 'string') qrCodeimageUrl.value = reader.result;
  });

  element.addEventListener('change', () => {
    profileFile.value = element.files?.[0];
    if (profileFile.value) {
      reader.readAsDataURL(profileFile.value);
    }
  });

  return element;
})();

const branchStore = useBranchStore();
const flowStore = useFlowStore();
const { locale } = useI18n();

const { data: branchData } = storeToRefs(branchStore);

const treeData = computed(() => {
  const arr: BranchWithChildren[] = [];

  branchData.value?.result.forEach((a) => {
    if (a.isHeadOffice) arr.push(Object.assign(a, { branch: [] }));
    else arr.find((b) => b.id === a.headOfficeId)?.branch.push(a);
  });

  return arr;
});

async function calculateStats() {
  const _stats = await branchStore.stats();

  if (_stats) {
    stats.value = [
      {
        icon: 'mdi-office-building-outline',
        count: _stats.hq,
        label: 'branchHQLabel',
        color: 'pink',
      },
      {
        icon: 'mdi-home-group',
        count: _stats.br,
        label: 'branchLabel',
        color: 'purple',
      },
    ];
  }
}

onMounted(async () => {
  utilsStore.currentTitle.title = 'branchManagement';
  utilsStore.currentTitle.path = [
    {
      text: 'branchManagementCaption',
      handler: () => {
        fieldSelectedBranch.value.value = 'branchHQLabel';
        currentHq.value = {
          id: '',
          code: '',
        };
      },
    },
  ];

  await branchStore.fetchList({ pageSize: 99999 });
  await calculateStats();

  modeView.value = $q.screen.lt.md ? true : false;

  flowStore.rotate();
});

const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');

const beforeBranch = ref<{ id: string; code: string }>({
  id: '',
  code: '',
});

const inputSearch = ref<string>('');
const fieldBranch = ref(['all', 'branchHQLabel', 'branchLabel']);
const fieldDisplay = ref<
  (
    | 'branchLabelName'
    | 'branchLabelAddress'
    | 'branchLabelTel'
    | 'branchLabelType'
  )[]
>([
  'branchLabelName',
  'branchLabelTel',
  'branchLabelAddress',
  'branchLabelType',
]);
const fieldSelected = ref<
  (
    | 'branchLabelName'
    | 'branchLabelAddress'
    | 'branchLabelTel'
    | 'branchLabelType'
  )[]
>(fieldDisplay.value);
const fieldSelectedBranch = ref<{
  label: string;
  value: string;
}>({
  label: t('branchHQLabel'),
  value: 'branchHQLabel',
});

const stats = ref<
  { icon: string; count: number; label: string; color: 'pink' | 'purple' }[]
>([]);

const modeView = ref<boolean>(false);

const splitterModel = ref(25);

const defaultFormData = {
  headOfficeId: null,
  taxNo: '',
  nameEN: '',
  name: '',
  addressEN: '',
  address: '',
  zipCode: '',
  email: '',
  contactName: '',
  contact: '',
  telephoneNo: '',
  longitude: '',
  latitude: '',
  subDistrictId: '',
  districtId: '',
  provinceId: '',
  lineId: '',
};

const formDialogRef = ref();

const formType = ref<'create' | 'edit' | 'delete' | 'view'>('create');
const formTypeBranch = ref<'headOffice' | 'subBranch'>('headOffice');
const currentHq = ref<{ id: string; code: string }>({ id: '', code: '' });
const currentEdit = ref<{ id: string; code: string }>({ id: '', code: '' });
const formData = ref<
  Omit<BranchCreate & { codeHeadOffice?: string }, 'qrCodeImage' | 'imageUrl'>
>(structuredClone(defaultFormData));

const prevFormData = ref<
  Omit<BranchCreate & { codeHeadOffice?: string }, 'qrCodeImage' | 'imageUrl'>
>(structuredClone(defaultFormData));

const modalDrawer = ref<boolean>(false);

function openDrawer() {
  modalDrawer.value = true;
}

function openDialog() {
  modal.value = true;
}

async function fetchBranchById(id: string) {
  const res = await branchStore.fetchById(id, { includeContact: true });

  if (res) {
    qrCodeimageUrl.value = res.qrCodeImageUrl;
    imageUrl.value = res.imageUrl;

    formData.value = {
      headOfficeId: res.headOfficeId,
      taxNo: res.taxNo,
      nameEN: res.nameEN,
      name: res.name,
      addressEN: res.addressEN,
      address: res.address,
      zipCode: res.zipCode,
      email: res.email,
      contactName: res.contactName,
      contact: res.contact.length > 0 ? res.contact[0].telephoneNo : ' ',
      telephoneNo: res.telephoneNo,
      longitude: res.longitude,
      latitude: res.latitude,
      subDistrictId: res.subDistrictId,
      districtId: res.districtId,
      provinceId: res.provinceId,
      lineId: res.lineId,
      status: res.status,
    };
  }
}

function clearData() {
  formData.value = structuredClone(defaultFormData);
  imageUrl.value = null;
  qrCodeimageUrl.value = null;
  currentEdit.value = {
    id: '',
    code: '',
  };
  profileFile.value = undefined;
}

async function undo() {
  formType.value = 'view';
  formData.value = prevFormData.value;
}

function triggerCreate(
  type: 'headOffice' | 'subBranch',
  id?: string,
  code?: string,
) {
  clearData();

  formTypeBranch.value = type;

  if (type === 'headOffice') {
    currentHq.value = {
      id: id ?? '',
      code: code ?? '',
    };
  }

  if (type === 'subBranch' && id && code) {
    formData.value.headOfficeId = id;
    formData.value.codeHeadOffice = code;
  }

  formType.value = 'create';
  openDialog();
}

function drawerEdit() {
  formType.value = 'edit';
  prevFormData.value = {
    ...formData.value,
  };
}

async function triggerEdit(
  openFormType: string,
  id: string,
  typeBranch: 'headOffice' | 'subBranch',
  code?: string,
) {
  await fetchBranchById(id);
  if (openFormType === 'form') {
    formType.value = 'edit';
    openDialog();
  }
  if (openFormType === 'drawer') {
    formType.value = 'view';
    openDrawer();
  }

  if (typeBranch === 'headOffice') {
    formData.value.codeHeadOffice = code;
  }

  const currentRecord = branchData.value.result.find((x) => x.id === id);

  if (!currentRecord) return;

  currentEdit.value = {
    id: currentRecord.id,
    code: currentRecord.code,
  };

  if (typeBranch === 'subBranch') {
    const currentRecordHead = branchData.value.result.find(
      (x) => x.id === currentRecord.headOfficeId,
    );

    formData.value.codeHeadOffice = currentRecordHead?.code;

    if (currentRecordHead) {
      currentHq.value.id = currentRecordHead.id;
      currentHq.value.code = currentRecordHead.code;
    } else {
      currentHq.value = currentEdit.value;
    }
  }

  formTypeBranch.value = typeBranch;
}

function triggerDelete(id: string) {
  if (id) {
    dialog({
      color: 'negative',
      icon: 'mdi-alert',
      title: t('deleteConfirmTitle'),
      actionText: t('agree'),
      persistent: true,
      message: t('deleteConfirmMessage'),
      action: async () => {
        await branchStore.deleteById(id);
        await branchStore.fetchList({ pageSize: 99999 });
        modalDrawer.value = false;
        await calculateStats();

        flowStore.rotate();
      },
      cancel: () => {},
    });
  }
}

async function onSubmit() {
  if (formType.value === 'edit') {
    delete formData.value['codeHeadOffice'];

    await branchStore.editById(
      currentEdit.value.id,
      {
        ...formData.value,
        status: undefined,
      },
      profileFile.value,
      profileFileImg.value,
    );

    await branchStore.fetchList({ pageSize: 99999 });
    modal.value = false;
    modalDrawer.value = false;
  }

  if (formType.value === 'create') {
    if (formTypeBranch.value === 'subBranch') {
      const currentRecord = branchData.value.result.find(
        (x) => x.id === formData.value.headOfficeId,
      );

      formData.value.headOfficeId = currentRecord?.id;
      delete formData.value['codeHeadOffice'];
    }

    await branchStore.create({
      ...formData.value,
      qrCodeImage: profileFile.value,
      imageUrl: profileFileImg.value,
    });

    await branchStore.fetchList({ pageSize: 99999 });
    modal.value = false;
  }

  const _stats = await branchStore.stats();

  if (_stats) {
    stats.value = [
      {
        icon: 'mdi-home',
        count: _stats.hq,
        label: 'branchHQLabel',
        color: 'pink',
      },
      {
        icon: 'mdi-domain',
        count: _stats.br,
        label: 'branchLabel',
        color: 'purple',
      },
    ];
  }
  flowStore.rotate();
}

function changeTitle(
  formType: 'edit' | 'create' | 'delete' | 'view',
  typeBranch: 'headOffice' | 'subBranch',
) {
  if (typeBranch === 'headOffice') {
    return formType === 'create'
      ? t('formDialogTitleCreateHeadOffice')
      : formType === 'view'
        ? t('formDialogTitleViewHeadOffice')
        : t('formDialogTitleEditHeadOffice');
  }
  if (typeBranch === 'subBranch') {
    return formType === 'create'
      ? t('formDialogTitleCreateSubBranch')
      : formType === 'view'
        ? t('formDialogTitleViewSubBranch')
        : t('formDialogTitleEditSubBranch');
  }
  return '';
}

function handleHold(node: BranchWithChildren) {
  if ($q.screen.gt.xs) return;
  return function (props: unknown) {
    holdDialog.value = true;
    currentNode.value = node;
  };
}

watch(locale, () => {
  fieldSelectedBranch.value = {
    label: t(`${fieldSelectedBranch.value.label}`),
    value: fieldSelectedBranch.value.value,
  };
});

watch(
  () => $q.screen.lt.md,
  (v) => {
    if (v) modeView.value = true;
  },
);
</script>

<template>
  <div class="column full-height no-wrap">
    <div class="text-body-2 q-mb-xs flex items-center">
      {{ $t('branchStatTitle') }}
      <q-btn
        class="q-ml-xs"
        icon="mdi-pin"
        color="primary"
        size="sm"
        flat
        dense
        rounded
        @click="hideStat = !hideStat"
        :style="hideStat ? 'rotate: 90deg' : ''"
        style="transition: 0.1s ease-in-out"
      />
    </div>
    <transition name="slide">
      <StatCard
        v-if="!hideStat"
        class="q-pb-md"
        label-i18n
        :branch="
          expandedTree[0]
            ? [
                {
                  ...stats[1],
                  count: (() => {
                    const foundItem = treeData.find(
                      (i) => i.id === expandedTree[0],
                    );
                    return foundItem ? foundItem._count.branch : 0;
                  })(),
                },
              ]
            : stats
        "
        :dark="$q.dark.isActive"
      />
    </transition>

    <div class="col surface-2 rounded" :no-padding="!!branchData.total">
      <template v-if="!branchData.total">
        <div class="full-width full-height column">
          <div class="self-end q-ma-md">
            <TooltipComponent
              class="self-end"
              title="branchNoMainOfficeYet"
              caption="branchClickToCreateMainOffice"
              imgSrc="personnel-table-"
            />
          </div>

          <div class="col flex items-center justify-center">
            <AddButton
              label="branchAdd"
              @trigger="() => triggerCreate('headOffice')"
            />
          </div>
        </div>
      </template>

      <template v-else>
        <div class="full-height column" style="flex-grow: 1; flex-wrap: nowrap">
          <q-splitter
            v-model="splitterModel"
            :limits="[0, 100]"
            class="col"
            before-class="overflow-hidden"
            after-class="overflow-hidden"
          >
            <template v-slot:before>
              <div class="surface-1 column full-height">
                <div
                  class="row no-wrap full-width bordered-b text-weight-bold surface-3 items-center q-px-md q-py-sm"
                  :style="`min-height: ${$q.screen.gt.sm ? '57px' : '100.8px'}`"
                >
                  <div class="col ellipsis-2-lines">จัดการสาขาทั้งหมด</div>
                  <q-btn
                    round
                    flat
                    size="md"
                    dense
                    id="hq-add-btn"
                    class="q-mr-sm"
                    @click="
                      () => {
                        if (!currentHq.id) {
                          triggerCreate('headOffice');
                        } else {
                          triggerCreate(
                            'subBranch',
                            currentHq.id,
                            currentHq.code,
                          );
                        }
                      }
                    "
                  >
                    <Icon
                      icon="pixelarticons:plus"
                      class="cursor-pointer"
                      style="color: var(--foreground); scale: 1.5"
                    />
                  </q-btn>
                </div>

                <div class="col full-width">
                  <div class="q-pa-md">
                    <q-tree
                      :nodes="treeData"
                      node-key="id"
                      label-key="name"
                      children-key="branch"
                      color="transparent"
                      v-model:expanded="expandedTree"
                      style="color: var(--foreground)"
                    >
                      <template #default-header="{ node }">
                        <div
                          class="full-width q-py-xs"
                          :class="{ 'clickable-node': node.isHeadOffice }"
                          v-touch-hold.mouse="handleHold(node)"
                          @click.stop="
                            () => {
                              if (
                                node.isHeadOffice &&
                                node._count.branch !== 0 &&
                                currentHq.id === node.id
                              ) {
                                expandedTree = expandedTree.filter(
                                  (i) => node.id !== i,
                                );
                                fieldSelectedBranch.value = 'branchHQLabel';

                                currentHq = {
                                  id: '',
                                  code: '',
                                };
                                return;
                              }

                              if (
                                node.isHeadOffice &&
                                node._count.branch !== 0 &&
                                currentHq.id !== node.id
                              ) {
                                expandedTree = [];
                                expandedTree.push(node.id);
                                fieldSelectedBranch.value = '';
                                inputSearch = '';
                                currentHq = {
                                  id: node.id,
                                  code: node.code,
                                };
                                beforeBranch = {
                                  id: '',
                                  code: '',
                                };
                              }
                            }
                          "
                        >
                          <div
                            class="row col items-center justify-between full-width no-wrap"
                          >
                            <q-icon
                              v-if="
                                node.isHeadOffice && node._count.branch !== 0
                              "
                              name="mdi-triangle-down"
                              size="12px"
                              class="app-text-muted q-mr-md"
                              :style="`rotate: ${expandedTree[0] === node.id ? '0deg' : '30deg'}`"
                            />
                            <div class="col row">
                              <span
                                class="ellipsis col-12"
                                style="white-space: nowrap"
                                :class="{
                                  'text-weight-bold':
                                    expandedTree[0] === node.id,
                                  'app-text-info': expandedTree[0] === node.id,
                                }"
                              >
                                {{ node.name }}
                              </span>
                              <span
                                class="app-text-muted text-caption ellipsis"
                              >
                                {{ node.code }}
                              </span>
                            </div>

                            <div
                              class="row q-gutter-xs items-center no-wrap"
                              @click.stop
                              v-if="$q.screen.gt.xs"
                            >
                              <q-btn
                                v-if="node.isHeadOffice"
                                :id="`create-sub-branch-btn-${node.name}`"
                                @click.stop="
                                  triggerCreate('subBranch', node.id, node.code)
                                "
                                icon="mdi-file-plus"
                                class="app-text-muted-2"
                                size="sm"
                                dense
                                round
                                flat
                              />

                              <q-btn
                                :id="`view-detail-btn-${node.name}`"
                                icon="mdi-dots-vertical"
                                class="app-text-muted-2"
                                size="sm"
                                dense
                                round
                                flat
                              >
                                <q-menu class="bordered">
                                  <q-list v-close-popup>
                                    <q-item
                                      :id="`view-detail-btn-${node.name}-view`"
                                      @click.stop="
                                        if (node.isHeadOffice) {
                                          triggerEdit(
                                            'drawer',
                                            node.id,
                                            'headOffice',
                                            node.code,
                                          );
                                        } else {
                                          triggerEdit(
                                            'drawer',
                                            node.id,
                                            'subBranch',
                                          );
                                        }
                                      "
                                      clickable
                                      dense
                                      class="row q-py-sm"
                                      style="white-space: nowrap"
                                    >
                                      <q-icon
                                        name="mdi-eye-outline"
                                        class="col-3"
                                        size="xs"
                                        style="color: hsl(var(--green-6-hsl))"
                                      />
                                      <span
                                        class="col-9 q-px-md flex items-center"
                                      >
                                        {{ $t('viewDetail') }}
                                      </span>
                                    </q-item>

                                    <q-item
                                      :id="`view-detail-btn-${node.name}-edit`"
                                      clickable
                                      dense
                                      class="row q-py-sm"
                                      style="white-space: nowrap"
                                      @click="
                                        () => {
                                          if (node.isHeadOffice) {
                                            triggerEdit(
                                              'form',
                                              node.id,
                                              'headOffice',
                                              node.code,
                                            );
                                          } else {
                                            triggerEdit(
                                              'form',
                                              node.id,
                                              'subBranch',
                                            );
                                          }
                                        }
                                      "
                                    >
                                      <q-icon
                                        name="mdi-pencil-outline"
                                        class="col-3"
                                        size="xs"
                                        style="color: hsl(var(--cyan-6-hsl))"
                                      />
                                      <span
                                        class="col-9 q-px-md flex items-center"
                                      >
                                        {{ $t('edit') }}
                                      </span>
                                    </q-item>
                                    <q-item
                                      :id="`view-detail-btn-${node.name}-delete`"
                                      dense
                                      :clickable="node.status === 'CREATED'"
                                      class="row"
                                      :class="{
                                        'surface-3': node.status !== 'CREATED',
                                        'app-text-muted':
                                          node.status !== 'CREATED',
                                      }"
                                      style="white-space: nowrap"
                                      @click="triggerDelete(node.id)"
                                    >
                                      <q-icon
                                        name="mdi-trash-can-outline"
                                        size="xs"
                                        class="col-3"
                                        :class="{
                                          'app-text-negative':
                                            node.status === 'CREATED',
                                        }"
                                      />
                                      <span
                                        class="col-9 q-px-md flex items-center"
                                      >
                                        {{ $t('delete') }}
                                      </span>
                                    </q-item>

                                    <q-item dense>
                                      <q-item-section class="q-py-sm">
                                        <div class="q-pa-sm surface-2 rounded">
                                          <q-toggle
                                            :id="`view-detail-btn-${node.name}-status`"
                                            dense
                                            size="sm"
                                            :label="
                                              node.status !== 'INACTIVE'
                                                ? $t('switchOnLabel')
                                                : $t('switchOffLabel')
                                            "
                                            @click="
                                              async () => {
                                                const res =
                                                  await branchStore.editById(
                                                    node.id,
                                                    {
                                                      status:
                                                        node.status !==
                                                        'INACTIVE'
                                                          ? 'INACTIVE'
                                                          : 'ACTIVE',
                                                    },
                                                  );
                                                if (res)
                                                  node.status = res.status;
                                              }
                                            "
                                            :model-value="
                                              node.status === 'CREATED' ||
                                              node.status === 'ACTIVE'
                                            "
                                          />
                                        </div>
                                      </q-item-section>
                                    </q-item>
                                  </q-list>
                                </q-menu>
                              </q-btn>
                            </div>
                          </div>
                        </div>
                      </template>
                    </q-tree>
                  </div>
                </div>
              </div>
            </template>

            <template v-slot:after>
              <div class="column full-height no-wrap">
                <div
                  class="row q-py-sm q-px-md justify-between full-width surface-3 bordered-b"
                >
                  <q-input
                    for="input-search"
                    outlined
                    dense
                    :label="$t('search')"
                    class="q-mr-md col-12 col-md-4"
                    :bg-color="$q.dark.isActive ? 'dark' : 'white'"
                    v-model="inputSearch"
                    debounce="200"
                  >
                    <template v-slot:prepend>
                      <q-icon name="mdi-magnify" />
                    </template>
                  </q-input>

                  <div
                    class="row col-12 col-md-6"
                    :class="{ 'q-pt-xs': $q.screen.lt.md }"
                  >
                    <q-select
                      v-model="statusFilter"
                      outlined
                      dense
                      option-value="value"
                      :hide-dropdown-icon="$q.screen.lt.sm"
                      option-label="label"
                      class="col"
                      map-options
                      emit-value
                      :options="[
                        { label: $t('all'), value: 'all' },
                        { label: $t('statusACTIVE'), value: 'statusACTIVE' },
                        {
                          label: $t('statusINACTIVE'),
                          value: 'statusINACTIVE',
                        },
                      ]"
                    ></q-select>

                    <q-select
                      id="select-field"
                      for="select-field"
                      :options="
                        fieldDisplay.map((v) => ({ label: $t(v), value: v }))
                      "
                      :display-value="$t('displayField')"
                      :hide-dropdown-icon="$q.screen.lt.sm"
                      class="col q-mx-sm"
                      v-model="fieldSelected"
                      option-label="label"
                      option-value="value"
                      map-options
                      emit-value
                      outlined
                      multiple
                      dense
                    />

                    <q-btn-toggle
                      id="btn-mode"
                      v-model="modeView"
                      dense
                      class="no-shadow bordered rounded surface-1"
                      :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
                          name="mdi-view-grid-outline"
                          size="16px"
                          class="q-px-sm q-py-xs rounded"
                          :style="{
                            color: $q.dark.isActive
                              ? modeView
                                ? '#C9D3DB '
                                : '#787B7C'
                              : modeView
                                ? '#787B7C'
                                : '#C9D3DB',
                          }"
                        />
                      </template>
                      <template v-slot:list>
                        <q-icon
                          name="mdi-format-list-bulleted"
                          class="q-px-sm q-py-xs rounded"
                          size="16px"
                          :style="{
                            color: $q.dark.isActive
                              ? modeView === false
                                ? '#C9D3DB'
                                : '#787B7C'
                              : modeView === false
                                ? '#787B7C'
                                : '#C9D3DB',
                          }"
                        />
                      </template>
                    </q-btn-toggle>
                  </div>
                </div>

                <div class="surface-2 q-pa-md scroll full-width">
                  <q-table
                    flat
                    bordered
                    class="full-width"
                    :rows-per-page-options="[0]"
                    :rows="
                      treeData
                        .flatMap((v) => [v, ...v.branch])
                        .filter((v) => {
                          if (
                            statusFilter === 'statusACTIVE' &&
                            v.status === 'INACTIVE'
                          ) {
                            return false;
                          }
                          if (
                            statusFilter === 'statusINACTIVE' &&
                            v.status !== 'INACTIVE'
                          ) {
                            return false;
                          }

                          const terms = `${v.code} ${$i18n.locale === 'en-US' ? v.nameEN : v.name} ${v.telephoneNo}`;
                          if (inputSearch && !terms.includes(inputSearch)) {
                            return false;
                          }

                          if (
                            !!currentHq.id &&
                            currentHq.id === v.headOfficeId
                          ) {
                            return true;
                          }
                          if (fieldSelectedBranch.value === 'all') return true;
                          if (fieldSelectedBranch.value === 'branchHQLabel')
                            return v.isHeadOffice;
                          if (fieldSelectedBranch.value === 'branchLabel')
                            return !v.isHeadOffice;

                          return false;
                        })
                    "
                    :columns="columns"
                    :grid="modeView"
                    card-container-class="row q-col-gutter-md"
                    row-key="name"
                    hide-pagination
                    :visible-columns="fieldSelected"
                  >
                    <template v-slot:header="props">
                      <q-tr class="surface-3" :props="props">
                        <q-th
                          v-for="col in props.cols"
                          :key="col.name"
                          :props="props"
                        >
                          {{ $t(col.label) }}
                        </q-th>
                        <q-th auto-width />
                      </q-tr>
                    </template>

                    <template v-slot:body="props">
                      <q-tr
                        :class="{
                          'app-text-muted': props.row.status === 'INACTIVE',
                          'cursor-pointer': props.row._count.branch !== 0,
                        }"
                        :props="props"
                        @click="
                          () => {
                            if (
                              props.row.isHeadOffice &&
                              props.row._count.branch !== 0
                            ) {
                              fieldSelectedBranch.value = '';
                              inputSearch = '';
                              currentHq = {
                                id: props.row.id,
                                code: props.row.code,
                              };
                              beforeBranch = {
                                id: '',
                                code: '',
                              };
                              expandedTree = [];
                              expandedTree.push(props.row.id);
                            }
                          }
                        "
                      >
                        <q-td v-if="fieldSelected.includes('branchLabelName')">
                          <div class="row items-center">
                            <div
                              :class="{
                                'status-active':
                                  props.row.status !== 'INACTIVE',
                                'status-inactive':
                                  props.row.status === 'INACTIVE',
                                'branch-card__hq': props.row.isHeadOffice,
                                'branch-card__br': !props.row.isHeadOffice,
                              }"
                              style="
                                width: 50px;
                                display: flex;
                                margin-bottom: var(--size-2);
                              "
                            >
                              <div class="branch-card__icon">
                                <q-icon
                                  size="md"
                                  style="scale: 0.8"
                                  name="mdi-office-building-outline"
                                />
                              </div>
                            </div>
                            <div class="col">
                              <div class="col">{{ props.row.name }}</div>
                              <div class="col app-text-muted">
                                {{ props.row.code }}
                              </div>
                            </div>
                          </div>
                        </q-td>
                        <q-td
                          v-if="fieldSelected.includes('branchLabelAddress')"
                        >
                          {{ props.row.address }}
                        </q-td>
                        <q-td v-if="fieldSelected.includes('branchLabelTel')">
                          {{ props.row.contact[0]?.telephoneNo || '-' }}
                        </q-td>
                        <q-td v-if="fieldSelected.includes('branchLabelType')">
                          {{
                            props.row.isHeadOffice
                              ? $t('branchHQLabel')
                              : $t('branchLabel')
                          }}
                        </q-td>
                        <q-td>
                          <q-btn
                            icon="mdi-dots-vertical"
                            size="sm"
                            dense
                            round
                            flat
                            @click.stop
                          >
                            <q-menu class="bordered">
                              <q-list v-close-popup>
                                <q-item
                                  :id="`view-detail-btn-${props.row.name}-view`"
                                  @click.stop="
                                    if (props.row.isHeadOffice) {
                                      triggerEdit(
                                        'drawer',
                                        props.row.id,
                                        'headOffice',
                                        props.row.code,
                                      );
                                    } else {
                                      triggerEdit(
                                        'drawer',
                                        props.row.id,
                                        'subBranch',
                                      );
                                    }
                                  "
                                  clickable
                                  dense
                                  class="row q-py-sm"
                                  style="white-space: nowrap"
                                >
                                  <q-icon
                                    name="mdi-eye-outline"
                                    class="col-3"
                                    size="xs"
                                    style="color: hsl(var(--green-6-hsl))"
                                  />
                                  <span class="col-9 q-px-md flex items-center">
                                    {{ $t('viewDetail') }}
                                  </span>
                                </q-item>

                                <q-item
                                  :id="`view-detail-btn-${props.row.name}-edit`"
                                  clickable
                                  dense
                                  class="row q-py-sm"
                                  style="white-space: nowrap"
                                  @click="
                                    () => {
                                      if (props.row.isHeadOffice) {
                                        triggerEdit(
                                          'form',
                                          props.row.id,
                                          'headOffice',
                                          props.row.code,
                                        );
                                      } else {
                                        triggerEdit(
                                          'form',
                                          props.row.id,
                                          'subBranch',
                                        );
                                      }
                                    }
                                  "
                                >
                                  <q-icon
                                    name="mdi-pencil-outline"
                                    class="col-3"
                                    size="xs"
                                    style="color: hsl(var(--cyan-6-hsl))"
                                  />
                                  <span class="col-9 q-px-md flex items-center">
                                    {{ $t('edit') }}
                                  </span>
                                </q-item>
                                <q-item
                                  :id="`view-detail-btn-${props.row.name}-delete`"
                                  dense
                                  :clickable="props.row.status === 'CREATED'"
                                  class="row"
                                  :class="{
                                    'surface-3': props.row.status !== 'CREATED',
                                    'app-text-muted':
                                      props.row.status !== 'CREATED',
                                  }"
                                  style="white-space: nowrap"
                                  @click="triggerDelete(props.row.id)"
                                >
                                  <q-icon
                                    name="mdi-trash-can-outline"
                                    size="xs"
                                    class="col-3"
                                    :class="{
                                      'app-text-negative':
                                        props.row.status === 'CREATED',
                                    }"
                                  />
                                  <span class="col-9 q-px-md flex items-center">
                                    {{ $t('delete') }}
                                  </span>
                                </q-item>

                                <q-item dense>
                                  <q-item-section class="q-py-sm">
                                    <div class="q-pa-sm surface-2 rounded">
                                      <q-toggle
                                        :id="`view-detail-btn-${props.row.name}-status`"
                                        dense
                                        size="sm"
                                        :label="
                                          props.row.status !== 'INACTIVE'
                                            ? $t('switchOnLabel')
                                            : $t('switchOffLabel')
                                        "
                                        @click="
                                          async () => {
                                            const res =
                                              await branchStore.editById(
                                                props.row.id,
                                                {
                                                  status:
                                                    props.row.status !==
                                                    'INACTIVE'
                                                      ? 'INACTIVE'
                                                      : 'ACTIVE',
                                                },
                                              );
                                            if (res)
                                              props.row.status = res.status;
                                          }
                                        "
                                        :model-value="
                                          props.row.status === 'CREATED' ||
                                          props.row.status === 'ACTIVE'
                                        "
                                      />
                                    </div>
                                  </q-item-section>
                                </q-item>
                              </q-list>
                            </q-menu>
                          </q-btn>
                        </q-td>
                      </q-tr>
                    </template>

                    <template v-slot:item="props">
                      <div class="col-12 col-md-6">
                        <BranchCard
                          class="surface-1"
                          :id="`branch-card-${props.row.name}`"
                          :class="{
                            'cursor-pointer': props.row._count.branch !== 0,
                          }"
                          @click="
                            () => {
                              if (
                                props.row.isHeadOffice &&
                                props.row._count.branch !== 0
                              ) {
                                fieldSelectedBranch.value = '';
                                inputSearch = '';
                                currentHq = {
                                  id: props.row.id,
                                  code: props.row.code,
                                };
                                beforeBranch = {
                                  id: '',
                                  code: '',
                                };
                                expandedTree = [];
                                expandedTree.push(props.row.id);
                              }
                            }
                          "
                          :metadata="props.row"
                          :color="props.row.isHeadOffice ? 'hq' : 'br'"
                          :key="props.row.id"
                          :data="{
                            branchLabelCode: props.row.code,
                            branchLabelName:
                              $i18n.locale === 'en-US'
                                ? props.row.nameEN
                                : props.row.name,
                            branchLabelTel: props.row.contact
                              .map((c: BranchContact) => c.telephoneNo)
                              .join(','),
                            branchLabelAddress:
                              $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 || ''}`,
                            branchLabelType: $t(
                              props.row.isHeadOffice
                                ? 'branchHQLabel'
                                : 'branchLabel',
                            ),
                          }"
                          :field-selected="fieldSelected"
                          :badge-field="['branchLabelStatus']"
                          :inactive="props.row.status === 'INACTIVE'"
                          @view-detail="
                            (v) => {
                              triggerEdit(
                                'drawer',
                                v.id,
                                v.isHeadOffice ? 'headOffice' : 'subBranch',
                                v.code,
                              );
                            }
                          "
                        >
                          <template v-slot:action>
                            <q-menu class="bordered">
                              <q-list>
                                <q-item
                                  :id="`view-detail-btn-${props.row.name}-view`"
                                  @click.stop="
                                    if (props.row.isHeadOffice) {
                                      triggerEdit(
                                        'drawer',
                                        props.row.id,
                                        'headOffice',
                                        props.row.code,
                                      );
                                    } else {
                                      triggerEdit(
                                        'drawer',
                                        props.row.id,
                                        'subBranch',
                                      );
                                    }
                                  "
                                  v-close-popup
                                  clickable
                                  dense
                                  class="row q-py-sm"
                                  style="white-space: nowrap"
                                >
                                  <q-icon
                                    name="mdi-eye-outline"
                                    class="col-3"
                                    size="xs"
                                    style="color: hsl(var(--green-6-hsl))"
                                  />
                                  <span class="col-9 q-px-md flex items-center">
                                    {{ $t('viewDetail') }}
                                  </span>
                                </q-item>

                                <q-item
                                  :id="`view-detail-btn-${props.row.name}-edit`"
                                  v-close-popup
                                  clickable
                                  dense
                                  class="row q-py-sm"
                                  style="white-space: nowrap"
                                  @click="
                                    () => {
                                      if (props.row.isHeadOffice) {
                                        triggerEdit(
                                          'form',
                                          props.row.id,
                                          'headOffice',
                                          props.row.code,
                                        );
                                      } else {
                                        triggerEdit(
                                          'form',
                                          props.row.id,
                                          'subBranch',
                                        );
                                      }
                                    }
                                  "
                                >
                                  <q-icon
                                    name="mdi-pencil-outline"
                                    class="col-3"
                                    size="xs"
                                    style="color: hsl(var(--cyan-6-hsl))"
                                  />
                                  <span class="col-9 q-px-md flex items-center">
                                    {{ $t('edit') }}
                                  </span>
                                </q-item>
                                <q-item
                                  :id="`view-detail-btn-${props.row.name}-delete`"
                                  dense
                                  v-close-popup
                                  :clickable="props.row.status === 'CREATED'"
                                  class="row"
                                  :class="{
                                    'surface-3': props.row.status !== 'CREATED',
                                    'app-text-muted':
                                      props.row.status !== 'CREATED',
                                  }"
                                  style="white-space: nowrap"
                                  @click="triggerDelete(props.row.id)"
                                >
                                  <q-icon
                                    name="mdi-trash-can-outline"
                                    size="xs"
                                    class="col-3"
                                    :class="{
                                      'app-text-negative':
                                        props.row.status === 'CREATED',
                                    }"
                                  />
                                  <span class="col-9 q-px-md flex items-center">
                                    {{ $t('delete') }}
                                  </span>
                                </q-item>

                                <q-item dense>
                                  <q-item-section class="q-py-sm">
                                    <div class="q-pa-sm surface-2 rounded">
                                      <q-toggle
                                        :id="`view-detail-btn-${props.row.name}-status`"
                                        dense
                                        size="sm"
                                        :label="
                                          props.row.status !== 'INACTIVE'
                                            ? $t('switchOnLabel')
                                            : $t('switchOffLabel')
                                        "
                                        @click="
                                          async () => {
                                            const res =
                                              await branchStore.editById(
                                                props.row.id,
                                                {
                                                  status:
                                                    props.row.status !==
                                                    'INACTIVE'
                                                      ? 'INACTIVE'
                                                      : 'ACTIVE',
                                                },
                                              );
                                            if (res)
                                              props.row.status = res.status;
                                          }
                                        "
                                        :model-value="
                                          props.row.status === 'CREATED' ||
                                          props.row.status === 'ACTIVE'
                                        "
                                      />
                                    </div>
                                  </q-item-section>
                                </q-item>
                              </q-list>
                            </q-menu>
                          </template>
                        </BranchCard>
                      </div>
                    </template>
                  </q-table>
                </div>
              </div>
            </template>
          </q-splitter>
        </div>
      </template>
    </div>
  </div>

  <FormDialog
    ref="formDialogRef"
    v-model:modal="modal"
    v-model:address="formData.address"
    v-model:addressEN="formData.addressEN"
    v-model:province-id="formData.provinceId"
    v-model:district-id="formData.districtId"
    v-model:sub-district-id="formData.subDistrictId"
    v-model:zip-code="formData.zipCode"
    :title="changeTitle(formType, formTypeBranch) + ' ' + currentEdit.code"
    :titleFormAddress="$t('formDialogTitleAddress')"
    :address-title="$t('formDialogAddress')"
    :address-title-EN="$t('formDialogAddressEN')"
    :addressSeparator="true"
    :submit="
      () => {
        onSubmit();
      }
    "
    :close="() => (modal = false)"
  >
    <template #information>
      <FormBranchInformation
        v-model:code="formData.codeHeadOffice"
        v-model:code-sub-branch="currentEdit.code"
        v-model:taxNo="formData.taxNo"
        v-model:name="formData.name"
        v-model:nameEN="formData.nameEN"
        v-model:type-branch="formTypeBranch"
        :separator="true"
        :dense="true"
        :outlined="true"
        :readonly="formType === 'view'"
        :view="formType === 'view'"
        title="formDialogTitleInformation"
      />
    </template>

    <template #person>
      <FormBranchContact
        v-model:type-branch="formTypeBranch"
        v-model:telephone-no="formData.telephoneNo"
        v-model:contact="formData.contact"
        v-model:email="formData.email"
        v-model:contact-name="formData.contactName"
        v-model:line-id="formData.lineId"
        :separator="true"
        title="formDialogTitleContact"
        :dense="true"
        :outlined="true"
      />
    </template>

    <template #qr-code>
      <FormQr
        title="QR Code"
        :separator="true"
        :qr="qrCodeimageUrl"
        :readonly="formType === 'view'"
        @upload="
          () => {
            inputFile.click();
          }
        "
      />
    </template>

    <template #location>
      <FormLocation
        :readonly="formType === 'view'"
        :separator="true"
        v-model:latitude="formData.latitude"
        v-model:longitude="formData.longitude"
        title="formDialogTitleLocation"
      />
    </template>

    <template #by-type>
      <FormImage
        :readonly="formType === 'view'"
        v-model:image="imageUrl"
        @upload="
          () => {
            inputFileImg.click();
          }
        "
        :title="$t('formDialogTitleImg')"
      />
    </template>
  </FormDialog>

  <DrawerInfo
    ref="formDialogRef"
    v-model:drawerOpen="modalDrawer"
    :title="changeTitle(formType, formTypeBranch) + ' ' + currentEdit.code"
    :titleFormAddress="$t('formDialogTitleAddress')"
    :addressSeparator="true"
    :undo="() => undo()"
    :isEdit="formType === 'edit'"
    :editData="() => drawerEdit()"
    :submit="() => onSubmit()"
    :delete-data="() => triggerDelete(currentEdit.id)"
    :close="() => ((modalDrawer = false), flowStore.rotate())"
    :statusBranch="formData.status"
  >
    <template #info>
      <InfoForm
        v-model:address="formData.address"
        v-model:addressEN="formData.addressEN"
        v-model:province-id="formData.provinceId"
        v-model:district-id="formData.districtId"
        v-model:sub-district-id="formData.subDistrictId"
        v-model:zip-code="formData.zipCode"
        :title-form-address="$t('formDialogTitleAddress')"
        :address-title="$t('formDialogAddress')"
        :address-title-e-n="$t('formDialogAddressEN')"
        :readonly="formType === 'view'"
      >
        <template #information>
          <FormBranchInformation
            v-model:code="formData.codeHeadOffice"
            v-model:code-sub-branch="currentEdit.code"
            v-model:taxNo="formData.taxNo"
            v-model:name="formData.name"
            v-model:nameEN="formData.nameEN"
            v-model:type-branch="formTypeBranch"
            :separator="true"
            :dense="true"
            :outlined="true"
            :readonly="formType === 'view'"
            :view="formType === 'view'"
            title="formDialogTitleInformation"
          />
        </template>

        <template #person>
          <FormBranchContact
            title="formDialogTitleContact"
            v-model:telephone-no="formData.telephoneNo"
            v-model:contact="formData.contact"
            v-model:email="formData.email"
            v-model:contact-name="formData.contactName"
            v-model:line-id="formData.lineId"
            :readonly="formType === 'view'"
            :view="formType === 'view'"
            :separator="true"
            :dense="true"
            :outlined="true"
          />
        </template>

        <template #qr-code>
          <FormQr
            :readonly="formType === 'view'"
            title="QR Code"
            :separator="true"
            :qr="qrCodeimageUrl"
            @upload="
              () => {
                inputFile.click();
              }
            "
          />
        </template>

        <template #location>
          <FormLocation
            title="formDialogTitleLocation"
            v-model:latitude="formData.latitude"
            v-model:longitude="formData.longitude"
            :readonly="formType === 'view'"
            :separator="true"
          />
        </template>

        <template #by-type>
          <FormImage
            @upload="
              () => {
                inputFileImg.click();
              }
            "
            v-model:image="imageUrl"
            :title="$t('formDialogTitleImg')"
            :readonly="formType === 'view'"
          />
        </template>
      </InfoForm>
    </template>
  </DrawerInfo>

  <q-dialog v-model="holdDialog" position="bottom">
    <div class="surface-1 full-width rounded column q-pb-md">
      <div class="flex q-py-sm justify-center full-width">
        <div
          class="rounded"
          style="
            width: 8%;
            height: 4px;
            background-color: hsla(0, 0%, 50%, 0.75);
          "
        ></div>
      </div>

      <q-list v-if="currentNode">
        <q-item
          clickable
          v-ripple
          v-close-popup
          @click.stop="
            triggerCreate('subBranch', currentNode.id, currentNode.code)
          "
        >
          <q-item-section avatar>
            <q-icon name="mdi-file-plus" class="app-text-muted-2" />
          </q-item-section>
          <q-item-section>
            {{ $t('formDialogTitleCreateSubBranch') }}
          </q-item-section>
        </q-item>

        <q-item
          clickable
          v-ripple
          v-close-popup
          @click.stop="
            if (currentNode.isHeadOffice) {
              triggerEdit(
                'drawer',
                currentNode.id,
                'headOffice',
                currentNode.code,
              );
            } else {
              triggerEdit('drawer', currentNode.id, 'subBranch');
            }
          "
        >
          <q-item-section avatar>
            <q-icon
              name="mdi-eye-outline"
              style="color: hsl(var(--green-6-hsl))"
            />
          </q-item-section>
          <q-item-section>{{ $t('viewDetail') }}</q-item-section>
        </q-item>

        <q-item
          clickable
          v-ripple
          v-close-popup
          @click="
            () => {
              if (currentNode && currentNode.isHeadOffice) {
                triggerEdit(
                  'form',
                  currentNode.id,
                  'headOffice',
                  currentNode.code,
                );
              } else {
                currentNode && triggerEdit('form', currentNode.id, 'subBranch');
              }
            }
          "
        >
          <q-item-section avatar>
            <q-icon
              name="mdi-pencil-outline"
              style="color: hsl(var(--cyan-6-hsl))"
            />
          </q-item-section>
          <q-item-section>{{ $t('edit') }}</q-item-section>
        </q-item>

        <q-item
          clickable
          v-ripple
          v-close-popup
          @click="triggerDelete(currentNode.id)"
        >
          <q-item-section avatar>
            <q-icon name="mdi-trash-can-outline" class="app-text-negative" />
          </q-item-section>
          <q-item-section>{{ $t('delete') }}</q-item-section>
        </q-item>

        <q-item clickable v-ripple>
          <q-item-section avatar>
            <q-toggle
              dense
              :id="`view-detail-btn-${currentNode.name}-status`"
              size="sm"
              @click="
                async () => {
                  if (!currentNode) return;
                  const res = await branchStore.editById(currentNode.id, {
                    status:
                      currentNode.status !== 'INACTIVE' ? 'INACTIVE' : 'ACTIVE',
                  });
                  if (res) currentNode.status = res.status;
                }
              "
              :model-value="
                currentNode.status === 'CREATED' ||
                currentNode.status === 'ACTIVE'
              "
            />
          </q-item-section>
          <q-item-section>
            {{
              currentNode.status !== 'INACTIVE'
                ? $t('switchOnLabel')
                : $t('switchOffLabel')
            }}
          </q-item-section>
        </q-item>
      </q-list>
    </div>
  </q-dialog>
</template>

<style scoped>
.color-icon-arrow {
  color: var(--gray-3);
}

.color-icon-plus {
  color: var(--cyan-6);
}

.tree-container {
  width: 100%;
  min-width: 300px;
  max-width: 25%;
  max-height: 100%;
}

.branch-wrapper {
  flex-grow: 1;

  & > .branch-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: unset;
    gap: var(--size-4);
  }
}

.branch-card__hq {
  --_branch-card-bg: var(--pink-6-hsl);
}

.branch-card__br {
  --_branch-card-bg: var(--violet-11-hsl);

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

.status-active {
  --_branch-status-color: var(--green-6-hsl);
}

.status-inactive {
  --_branch-status-color: var(--red-4-hsl);
  --_branch-badge-bg: var(--red-4-hsl);
  filter: grayscale(1);
  opacity: 0.5;
}

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

  &::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);
  }
}

.slide-enter-active {
  transition: all 0.1s ease-out;
}

.slide-leave-active {
  transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-enter-from,
.slide-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}

* :deep(.q-icon.mdi-play) {
  display: none;
}
</style>