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

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { ref, onMounted, computed } from 'vue';
import { Icon } from '@iconify/vue';

import useBranchStore from 'stores/branch';

import { dialog } from 'src/stores/utils';
import AppBox from 'components/app/AppBox.vue';
import AddButton from 'components/AddButton.vue';
import TooltipComponent from 'components/TooltipComponent.vue';
import StatCard from 'components/StatCardComponent.vue';
import BranchCard from 'src/components/01_branch-management/BranchCard.vue';
import FormDialog from 'src/components/FormDialog.vue';
import FormBranchInformation from 'src/components/01_branch-management/FormBranchInformation.vue';
import FormLocation from 'src/components/01_branch-management/FormLocation.vue';
import FormQr from 'src/components/01_branch-management/FormQr.vue';
import FormBranchContact from 'src/components/01_branch-management/FormBranchContact.vue';
import FormImage from 'src/components/01_branch-management/FormImage.vue';

import { BranchWithChildren, BranchCreate } from 'stores/branch/types';
import { watch } from 'vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

const modal = ref<boolean>(false);

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

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

onMounted(async () => {
  await branchStore.fetchList({ pageSize: 99999 });
  const _stats = await branchStore.stats();

  if (_stats) {
    stats.value.push(
      { count: _stats.hq, label: 'branchHQLabel' },
      { count: _stats.br, label: 'branchLabel' },
    );
  }
});

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

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

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

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

const stats = ref<{ count: number; label: string }[]>([]);

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 codeHq = ref<{ id: string; code: string }>({ id: '', code: '' });
const formData = ref<Omit<BranchCreate, 'qrCodeImage' | 'imageUrl'>>(
  structuredClone(defaultFormData),
);

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

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

  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: '',
      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;
  profileFile.value = undefined;
}

function triggerView(id: string, code?: string) {
  fetchBranchById(id);
  if (id && code) {
    codeHq.value = {
      id: id,
      code: code,
    };
  }

  formType.value = 'view';

  openDialog();
}

function triggerCreate(type: string, id?: string, code?: string) {
  clearData();

  if (type === 'subBranch' && id && code) {
    formTypeBranch.value = 'subBranch';
    codeHq.value = {
      id: id,
      code: code,
    };
  } else {
    formTypeBranch.value = 'headOffice';
    codeHq.value = { id: '', code: '' };
  }

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

function triggerEdit(type: string, id: string, code?: string) {
  fetchBranchById(id);
  if (id && code) {
    codeHq.value = {
      id: id,
      code: code,
    };
  }
  if (type === 'subBranch' && id && code) {
    formTypeBranch.value = 'subBranch';
  } else {
    formTypeBranch.value = 'headOffice';
  }

  formType.value = 'edit';

  openDialog();
}

function triggerDelete(id: string) {
  fetchBranchById(id);
  if (id) {
    dialog({
      color: 'negative',
      icon: 'mdi-alert',
      title: 'ยืนยังการลบข้อมูล',
      actionText: 'ตกลง',
      persistent: true,
      message: 'ท่านต้องการลบข้อมูลหรือมั้ย',
      action: async () => {
        await branchStore.deleteById(id);
        await branchStore.fetchList({ pageSize: 99999 });
      },
      cancel: () => {},
    });
  }
}

async function onSubmit() {
  if (formType.value === 'edit') {
    await branchStore.editById(
      codeHq.value.id,
      formData.value,
      profileFile.value,
      profileFileImg.value,
    );

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

  if (formTypeBranch.value === 'headOffice') {
    if (
      formType.value === 'create' &&
      profileFile.value &&
      profileFileImg.value
    ) {
      await branchStore.create({
        ...formData.value,
        qrCodeImage: profileFile.value,
        imageUrl: profileFileImg.value,
      });
      await branchStore.fetchList({ pageSize: 99999 });
      modal.value = false;
    }
  }

  if (formTypeBranch.value === 'subBranch') {
    if (
      formType.value === 'create' &&
      profileFile.value &&
      profileFileImg.value
    ) {
      formData.value.headOfficeId = codeHq.value.id;

      await branchStore.create({
        ...formData.value,
        qrCodeImage: profileFile.value,
        imageUrl: profileFileImg.value,
      });
      await branchStore.fetchList({ pageSize: 99999 });
      modal.value = false;
    }
  }
}

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

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

<template>
  <div class="column">
    <div class="row text-h6 text-weight-bold q-mb-md">
      {{ $t('branchManagement') }}
    </div>

    <AppBox bordered class="q-mb-md">
      <StatCard :branch="stats" :dark="$q.dark.isActive" />
    </AppBox>

    <AppBox class="column" no-padding bordered style="min-height: 70vh">
      <template v-if="!branchData.total">
        <TooltipComponent
          class="self-end"
          title="branchNoMainOfficeYet"
          caption="branchClickToCreateMainOffice"
          imgSrc="personnel-table-"
        />

        <div class="row items-center justify-center" style="flex-grow: 1">
          <AddButton label="branchAdd" @trigger="() => {}" />
        </div>
      </template>
      <template v-else>
        <div class="row" style="flex-grow: 1; flex-wrap: nowrap">
          <div class="tree-container q-pa-md bordered-r surface-2">
            <div class="row">
              <Icon
                icon="ep:arrow-left-bold"
                width="21px"
                class="q-mr-sm"
                :class="{
                  'color-icon-arrow ': !currentHq.id,
                  'cursor-pointer': currentHq.id,
                }"
                @click="
                  () => {
                    if (currentHq.id) {
                      beforeBranch = currentHq;
                      currentHq = { id: '', code: '' };
                      fieldSelectedBranch = {
                        label: $t('branchHQLabel'),
                        value: 'branchHQLabel',
                      };
                    }
                  }
                "
              />

              <Icon
                icon="ep:arrow-right-bold"
                width="21px"
                class="q-mr-md"
                :class="{
                  'color-icon-arrow ': !beforeBranch.id,
                  'cursor-pointer': beforeBranch.id,
                }"
                @click="
                  () => {
                    if (beforeBranch.id) {
                      currentHq = beforeBranch;
                      beforeBranch = { id: '', code: '' };
                      fieldSelectedBranch = {
                        label: '',
                        value: '',
                      };
                    }
                  }
                "
              />

              <q-space />

              <Icon
                icon="pixelarticons:plus"
                height="26"
                class="color-icon-plus cursor-pointer"
                @click="triggerCreate('headOffice')"
              />
            </div>

            <div class="bordered rounded q-mt-md surface-1">
              <div
                class="bordered-b q-pl-sm text-weight-bold surface-3"
                style="height: 50px; display: flex; align-items: center"
              >
                <Icon icon="flowbite:home-solid" width="24px" class="q-mr-md" />
                ทั้งหมด
              </div>

              <q-tree
                :nodes="treeData"
                node-key="id"
                label-key="name"
                children-key="branch"
              >
                <template #default-header="{ node }">
                  <div
                    class="row items-center justify-between full-width no-wrap"
                  >
                    <span>{{ node.name }}</span>
                    <div class="q-gutter-xs flex no-wrap" @click.stop>
                      <q-btn
                        v-if="node.isHeadOffice"
                        @click.stop="
                          triggerCreate('subBranch', node.id, node.code)
                        "
                        icon="mdi-file-plus-outline"
                        fab-mini
                        unelevated
                      />
                      <q-btn icon="mdi-dots-vertical" fab-mini unelevated flat>
                        <q-menu class="bordered">
                          <q-list v-close-popup>
                            <q-item
                              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
                              clickable
                              dense
                              class="row q-py-sm"
                              style="white-space: nowrap"
                              @click="
                                () => {
                                  if (node.isHeadOffice) {
                                    triggerEdit(
                                      'headOffice',
                                      node.id,
                                      node.code,
                                    );
                                  } else {
                                    triggerEdit(
                                      'subBranch',
                                      node.id,
                                      node.code,
                                    );
                                  }
                                }
                              "
                            >
                              <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
                              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
                                    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>
                </template>
              </q-tree>
            </div>
          </div>
          <div class="branch-wrapper q-pa-md">
            <div class="q-mb-md flex" style="gap: var(--size-4)">
              <div
                style="
                  flex-grow: 1;
                  display: flex;
                  align-items: stretch;
                  gap: var(--size-2);
                "
              >
                <template v-if="!currentHq.id">
                  <q-select
                    v-model="fieldSelectedBranch"
                    style="min-width: 120px"
                    outlined
                    :options="
                      fieldBranch.map((v) => ({ label: $t(v), value: v }))
                    "
                    :label="$t('select')"
                    dense
                  />
                  <q-btn
                    icon="mdi-tune-vertical-variant"
                    size="sm"
                    class="bordered rounded"
                    :class="{ 'app-text-info': statusFilter !== 'all' }"
                    unelevated
                  >
                    <q-menu class="bordered">
                      <q-list v-close-popup dense>
                        <q-item
                          clickable
                          class="flex items-center"
                          :class="{ 'app-text-info': statusFilter === 'all' }"
                          @click="statusFilter = 'all'"
                        >
                          {{ $t('all') }}
                        </q-item>
                        <q-item
                          clickable
                          class="flex items-center"
                          :class="{
                            'app-text-info': statusFilter === 'statusACTIVE',
                          }"
                          @click="statusFilter = 'statusACTIVE'"
                        >
                          {{ $t('statusACTIVE') }}
                        </q-item>
                        <q-item
                          clickable
                          class="flex items-center"
                          :class="{
                            'app-text-info': statusFilter === 'statusINACTIVE',
                          }"
                          @click="statusFilter = 'statusINACTIVE'"
                        >
                          {{ $t('statusINACTIVE') }}
                        </q-item>
                      </q-list>
                    </q-menu>
                  </q-btn>
                </template>
                <div v-else class="text-weight-bold text">
                  {{ $t('branchInHQ') }}
                  {{ currentHq.code }}
                </div>
              </div>

              <div
                style="flex-grow: 1; display: flex; justify-content: flex-end"
              >
                <q-input
                  style="width: 250px"
                  outlined
                  dense
                  label="ค้นหา"
                  v-model="inputSearch"
                  debounce="500"
                ></q-input>
              </div>

              <div style="flex-grow: 1">
                <q-select
                  :options="
                    fieldDisplay.map((v) => ({ label: $t(v), value: v }))
                  "
                  :display-value="$t('displayField')"
                  v-model="fieldSelected"
                  option-label="label"
                  option-value="value"
                  map-options
                  emit-value
                  outlined
                  multiple
                  dense
                />
              </div>
            </div>
            <div class="branch-container">
              <BranchCard
                v-for="item in branchData.result
                  .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;
                  })
                  .map((v) => ({
                    id: v.id,
                    hq: v.isHeadOffice,
                    status: v.status,
                    branchLabelCode: v.code,
                    branchLabelName:
                      $i18n.locale === 'en-US' ? v.nameEN : v.name,
                    branchLabelTel: v.contact
                      .map((c) => c.telephoneNo)
                      .join(','),
                    branchLabelAddress:
                      $i18n.locale === 'en-US'
                        ? `${v.addressEN || ''} ${v.subDistrict?.nameEN || ''} ${v.district?.nameEN || ''} ${v.province?.nameEN || ''}`
                        : `${v.address || ''} ${v.subDistrict?.name || ''} ${v.district?.name || ''} ${v.province?.name || ''}`,
                    branchLabelType: $t(
                      v.isHeadOffice ? 'branchHQLabel' : 'branchLabel',
                    ),
                    branchLabelStatus: $t(`status${v.status}`),
                  }))"
                @click="
                  () => {
                    if (item.hq) {
                      fieldSelectedBranch.value = '';
                      inputSearch = '';
                      currentHq = { id: item.id, code: item.branchLabelCode };
                      beforeBranch = {
                        id: '',
                        code: '',
                      };
                    }
                  }
                "
                :key="item.id"
                :data="item"
                :field-selected="fieldSelected"
                :inactive="item.status === 'INACTIVE'"
                @view-detail="(b) => triggerView(b.id, b.branchLabelCode)"
              />
            </div>
          </div>
        </div>
      </template>
    </AppBox>
  </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"
    :title="changeTitle(formType, formTypeBranch)"
    :titleFormAddress="$t('formDialogTitleAddress')"
    :addressSeparator="true"
    :submit="
      () => {
        onSubmit();
      }
    "
  >
    <template #information>
      <FormBranchInformation
        v-model:code="codeHq.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"
        title="formDialogTitleInformation"
      />
    </template>

    <template #person>
      <FormBranchContact
        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"
        @upload="
          () => {
            inputFile.click();
          }
        "
      />
    </template>

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

    <template #by-type>
      <FormImage
        v-model:image="imageUrl"
        @upload="
          () => {
            inputFileImg.click();
          }
        "
        :title="$t('formDialogTitleImg')"
      />
    </template>
  </FormDialog>
</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);
  }
}
</style>