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

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

import useBranchStore from 'stores/branch';
import useBranchContactStore from 'stores/branch-contact';
import AppBox from 'components/app/AppBox.vue';
import AddButton from 'components/AddButton.vue';
import TooltipComponent from 'components/TooltipComponent.vue';
import StatCardComponent from 'components/StatCardComponent.vue';
import CardDetailsComponent from 'src/components/01_branch-management/CardDetailsComponent.vue';
import DetailBranchDrawerComponent from 'src/components/01_branch-management/DetailBranchDrawerComponent.vue';
import FormDialog from 'src/components/FormDialog.vue';
import TableCardComponent from 'src/components/01_branch-management/TableCardComponent.vue';
import { dialog } from 'src/stores/utils';

import { BranchContactCreate } from 'src/stores/branch-contact/types';

import {
  BranchWithChildren,
  Branch,
  BranchCreate,
} from 'src/stores/branch/types';

const profileFile = ref<File | undefined>(undefined);
const inputFile = document.createElement('input');
inputFile.type = 'file';
inputFile.accept = 'image/*';

inputFile.addEventListener('change', (e) => {
  profileFile.value = (e.currentTarget as HTMLInputElement).files?.[0];
});

const branchStore = useBranchStore();
const branchContactStore = useBranchContactStore();

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

const modal = ref<boolean>(false);

const currentHeadOfficeId = ref<string>();
const currentHeadOfficeName = ref<{
  nameTh: string;
  nameEn: string;
}>({ nameTh: '', nameEn: '' });
const currentBranchIdEdit = ref<string>('');
const currentBranchContactIdEdit = ref<string>('');
const showCurrentBranch = ref<Branch>();

const shape = ref<boolean>(false);
const openBranchDrawer = ref<boolean>(false);
const openCardDetails = ref<boolean>(false);
const openTableCard = ref<boolean>(true);

const formDialogRef = ref();
const inputSelectBranch = ref<string>('ทั้งหมด');
const inputFilter = ref<string>('คอลัมน์');
const inputSearch = ref<string>('');
const optionsBranch: string[] = ['ทั้งหมด', 'สำนักงานใหญ่', 'สาขา'];
const optionsFilter: string[] = [
  'ชื่อสาขา',
  'ที่อยู่',
  'เบอร์โทร',
  'สำนักงานใหญ่',
  'ประเภท',
  'สถานะ',
];

const urlQrCode = ref<string | boolean>(false);
const formDataContact = ref<BranchContactCreate>({
  lineId: '',
  telephoneNo: '',
});

const formType = ref<'edit' | 'create' | 'delete'>('create');
const typeBranch = ref<'headOffice' | 'subBranch'>('headOffice');
const inputCode = ref<string>('');
const formData = ref<BranchCreate>({
  taxNo: '',
  nameEN: '',
  name: '',
  addressEN: '',
  address: '',
  zipCode: '',
  email: '',
  telephoneNo: '',
  longitude: '',
  latitude: '',
  subDistrictId: '',
  districtId: '',
  provinceId: '',
  headOfficeId: null,
});

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

const expanded = ref<string[]>([]);

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

const treeData = ref<BranchWithChildren[]>([]);

const subBranch = ref<boolean>(false);
const rowsBranch = ref<
  {
    id: string;
    name: string;
    branchName: string;
    address: string;
    telephoneNo: string;
    code: string;
    type: boolean;
    status: string;
  }[]
>([]);

function clearData() {
  formData.value = {
    taxNo: '',
    nameEN: '',
    name: '',
    addressEN: '',
    address: '',
    zipCode: '',
    email: '',
    telephoneNo: '',
    longitude: '',
    latitude: '',
    subDistrictId: '',
    districtId: '',
    provinceId: '',
    headOfficeId: null,
  };

  formDataContact.value = {
    lineId: '',
    telephoneNo: '',
  };

  profileFile.value = undefined;
  urlQrCode.value = false;
}
function openDialog() {
  modal.value = true;
}

async function getTree() {
  const result = await branchStore.fetchList<BranchWithChildren>({
    tree: true,
  });

  if (result) {
    treeData.value = result.result;
    rowsBranch.value = treeData.value
      .filter((v) => v.isHeadOffice)
      .map((v) => ({
        id: v.id,
        name: v.code,
        branchName: v.name,
        address: v.address,
        telephoneNo: v.telephoneNo,
        code: v.code,
        type: v.isHeadOffice,
        status: v.status.toString(),
      }));

    subBranch.value = false;
    showCurrentBranch.value = undefined;
    currentHeadOfficeId.value = undefined;
  }
}

function changeSubject(
  formType: 'edit' | 'create' | 'delete',
  typeBranch: 'headOffice' | 'subBranch',
) {
  if (typeBranch === 'headOffice') {
    return formType === 'create' ? 'เพิ่มสำนักงานใหญ่' : 'แก้ไขสำนักงานใหญ่';
  }
  if (typeBranch === 'subBranch') {
    return formType === 'create' ? 'เพิ่มสาขา' : 'แก้ไขสาขา';
  }
  return '';
}

function triggerCreateSubBranch(code: string, id: string) {
  clearData();
  formType.value = 'create';
  typeBranch.value = 'subBranch';
  inputCode.value = code;
  formData.value.headOfficeId = id;
  openDialog();
}

async function triggerEditSubBranch(code: string, id: string) {
  await clearData();
  formType.value = 'edit';
  typeBranch.value = 'subBranch';
  inputCode.value = code;
  formData.value.headOfficeId = id;
  currentBranchIdEdit.value = id;
  await fetchFormEditBranch(id);
  await fetchFormEditBranchContact(id);
  await formDialogRef.value.fetchDistrict(formData.value.provinceId);
  await formDialogRef.value.fetchSubDistrict(formData.value.districtId);
  openDialog();
}

function triggerDeleteSubBranch(id: string) {
  clearData();
  formType.value = 'delete';
  typeBranch.value = 'subBranch';
  formData.value.headOfficeId = id;
  dialog({
    color: 'negative',
    icon: 'mdi-alert',
    title: 'ยืนยังการลบข้อมูล',
    actionText: 'ตกลง',
    persistent: true,
    message: 'ท่านต้องการลบข้อมูลหรือมั้ย',
    action: async () => {
      await deleteForm(id);
      await getTree();
    },
    cancel: () => {},
  });
}

function triggerCreateHeadOffice() {
  clearData();
  formType.value = 'create';
  typeBranch.value = 'headOffice';
  openDialog();
}

async function triggerEditHeadOffice(id: string) {
  await clearData();
  formType.value = 'edit';
  typeBranch.value = 'headOffice';
  currentBranchIdEdit.value = id;
  await fetchFormEditBranch(id);
  await fetchFormEditBranchContact(id);

  await formDialogRef.value.fetchDistrict(formData.value.provinceId);
  await formDialogRef.value.fetchSubDistrict(formData.value.districtId);

  openDialog();
}

function triggerDeleteHeadOffice(id: string) {
  clearData();
  formType.value = 'delete';
  typeBranch.value = 'headOffice';

  dialog({
    color: 'negative',
    icon: 'mdi-alert',
    title: 'ยืนยังการลบข้อมูล',
    actionText: 'ตกลง',
    persistent: true,
    message: 'ท่านต้องการลบข้อมูลหรือมั้ย',
    action: async () => {
      await deleteForm(id);
      await getTree();
    },
    cancel: () => {},
  });
}

async function fetchFormEditBranch(id: string) {
  const result = await branchStore.fetchById<Branch>(id);

  if (result) {
    formData.value = {
      taxNo: result.taxNo,
      nameEN: result.nameEN,
      name: result.name,
      addressEN: result.addressEN,
      address: result.address,
      zipCode: result.zipCode,
      email: result.email,
      telephoneNo: result.telephoneNo,
      longitude: result.longitude,
      latitude: result.latitude,
      subDistrictId: result.subDistrictId,
      districtId: result.districtId,
      provinceId: result.provinceId,
      headOfficeId: result.headOfficeId,
    };
  }
}

async function deleteForm(idBranch: string) {
  await fetchFormEditBranchContact(idBranch);
  await branchContactStore.deleteById(
    idBranch,
    currentBranchContactIdEdit.value,
  );
  await branchStore.deleteById(idBranch);
}

async function fetchFormEditBranchContact(id: string) {
  const result = await branchContactStore.fetchList(id);

  if (result) {
    const first = result.result.pop();

    if (!first) return;

    currentBranchContactIdEdit.value = first.id;
    urlQrCode.value = first.qrCodeImageUrl;
    formDataContact.value = {
      lineId: first.lineId,
      telephoneNo: first.telephoneNo,
    };
  }
}

async function submitForm(
  typeSubmit: 'create' | 'edit' | 'delete',
  formTypeSubmit: 'headOffice' | 'subBranch',
  inputBranchCreate: BranchCreate,
  inputBranchContactCreate: BranchContactCreate,
) {
  if (formTypeSubmit === 'headOffice') {
    if (typeSubmit === 'create') {
      const result = await branchStore.create(inputBranchCreate);
      if (result) {
        await branchContactStore.create(
          result.id,
          inputBranchContactCreate,
          profileFile.value,
        );
        getTree();
        modal.value = false;
        return;
      }
    }
    if (typeSubmit === 'edit') {
      await branchStore.editById(currentBranchIdEdit.value, inputBranchCreate);

      if (currentBranchIdEdit.value && currentBranchContactIdEdit.value) {
        await branchContactStore.editById(
          currentBranchIdEdit.value,
          currentBranchContactIdEdit.value,
          inputBranchContactCreate,
          profileFile.value ? profileFile.value : undefined,
        );
      } else {
        await branchContactStore.create(
          currentBranchIdEdit.value,
          inputBranchContactCreate,
          profileFile.value ? profileFile.value : undefined,
        );
      }

      getTree();
      modal.value = false;
      return;
    }
  }

  if (formTypeSubmit === 'subBranch') {
    if (typeSubmit === 'create') {
      const result = await branchStore.create(inputBranchCreate);
      if (result) {
        await branchContactStore.create(
          result.id,
          inputBranchContactCreate,
          profileFile.value,
        );
        getTree();
        modal.value = false;
        return;
      }
    }

    if (typeSubmit === 'edit') {
      await branchStore.editById(currentBranchIdEdit.value, inputBranchCreate);
      await branchContactStore.editById(
        currentBranchIdEdit.value,
        currentBranchContactIdEdit.value,
        inputBranchContactCreate,
        profileFile.value ? profileFile.value : undefined,
      );
      getTree();
      modal.value = false;
      return;
    }
  }
}

async function fetchCard(id: string, drawer = false) {
  const result = await branchStore.fetchById<Branch>(id);

  if (result) {
    showCurrentBranch.value = result;

    if (drawer) openBranchDrawer.value = true;
    else {
      openCardDetails.value = true;
      openTableCard.value = false;
    }
  }
}

async function fetchSubBranch(id: string) {
  const result = await branchStore.fetchById<BranchWithChildren>(id, {
    includeSubBranch: true,
  });

  if (result) {
    if (result.isHeadOffice) {
      currentHeadOfficeId.value = result.id;
      currentHeadOfficeName.value = {
        nameTh: result.name,
        nameEn: result.nameEN,
      };
    }
    rowsBranch.value = result.branch.map((v) => ({
      id: v.id,
      name: v.code,
      branchName: v.name,
      address: v.address,
      telephoneNo: v.telephoneNo,
      code: v.code,
      type: v.isHeadOffice,
      status: v.status,
    }));

    showCurrentBranch.value = undefined;
    subBranch.value = true;
    openCardDetails.value = false;
    openTableCard.value = true;
  }
}

onMounted(async () => {
  getTree();
  const result = await branchStore.stats();

  if (result) {
    branchStats.value.push({
      amount: result.hq,
      label: 'branchHQLabel',
    });
    branchStats.value.push({
      amount: result.br,
      label: 'branchLabel',
    });
  }
});
</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"
      :class="{ 'bg-card-branch-title': $q.dark.isActive }"
    >
      <StatCardComponent :branch="branchStats" :dark="$q.dark.isActive" />
    </AppBox>

    <AppBox bordered style="width: 100%" v-if="!branchData?.total">
      <div class="column">
        <div class="col-1 self-end">
          <TooltipComponent
            title="branchNoMainOfficeYet"
            caption="branchClickToCreateMainOffice"
            imgSrc="img-table-"
          />
        </div>
        <div class="col self-center" style="display: flex; align-items: center">
          <AddButton
            :label="'สร้างสำนักงานใหญ่'"
            @trigger="() => openDialog()"
          />
        </div>
      </div>
    </AppBox>

    <AppBox
      class="bordered branch-container no-padding"
      :class="{ dark: $q.dark.isActive }"
    >
      <AppBox class="bg-card-branch-title" style="border-radius: 0">
        <div class="row items-center">
          <span
            v-if="false"
            class="col q-pl-md text-h6 text-weight-bold color-card-branch-title"
          >
            {{ $t('headQuarters') }}
          </span>

          <span class="col text-h7 text-weight-bold color-card-branch-title">
            <div class="row" style="width: 300px">
              <div class="column q-px-sm" @click="getTree()">ทั้งหมด</div>
              <div class="column q-px-sm" v-if="currentHeadOfficeId">></div>
              <div
                class="column q-px-sm"
                v-if="currentHeadOfficeId"
                @click="fetchSubBranch(currentHeadOfficeId)"
              >
                {{ currentHeadOfficeName.nameTh }}
              </div>

              <div
                class="column q-px-sm"
                v-if="showCurrentBranch && !showCurrentBranch.isHeadOffice"
              >
                >
              </div>
              <div
                class="column q-px-sm"
                v-if="showCurrentBranch && !showCurrentBranch.isHeadOffice"
              >
                {{ showCurrentBranch.code }}
              </div>
            </div>
          </span>

          <div class="col-3">
            <q-input
              class="bordered rounded q-px-md"
              borderless
              dense
              v-model="inputSearch"
              label="ค้นหา"
            >
              <template #prepend>
                <Icon icon="ic:baseline-search" />
              </template>
            </q-input>
          </div>
        </div>
      </AppBox>

      <AppBox class="no-padding row bordered-t" style="border-radius: 0">
        <div class="q-pa-md bg-branch-tree-box bordered-r" style="width: 21%">
          <div
            @click="triggerCreateHeadOffice()"
            class="btn-add col-2 text-weight-bold cursor-pointer color-card-branch-btn"
          >
            <div class="text-h4 q-mr-md">+</div>
            {{ $t('btnCreate') }}
          </div>

          <q-scroll-area
            class="q-pa-sm bg-branch-tree-scroll"
            style="height: 350px; width: 100%; border-radius: 6px"
          >
            <div class="col">
              <q-tree
                :nodes="treeData"
                dense
                node-key="name"
                v-model:expanded="expanded"
                v-model:selected="selected"
                children-key="branch"
              >
                <template #default-header="prop">
                  <div
                    @click="
                      () => {
                        fetchSubBranch(prop.node.id);

                        if (
                          !expanded.includes(prop.node.name) &&
                          expanded.length <= 1
                        ) {
                          expanded.push(prop.node.name);
                        } else expanded[1] = prop.node.name;
                      }
                    "
                    class="q-px-sm color-brach-tree-text"
                    :class="{
                      'color-tree-active': expanded.includes(prop.node.name),
                      'bg-branch-tree':
                        prop.node.isHeadOffice &&
                        expanded.includes(prop.node.name),
                      'dark-tree': $q.dark.isActive,
                    }"
                    style="border-radius: 6px"
                  >
                    {{ prop.node.name }}
                  </div>

                  <q-space />

                  <q-btn
                    class="color-brach-tree-btn"
                    @click.stop="
                      triggerCreateSubBranch(prop.node.code, prop.node.id)
                    "
                    v-if="prop.node.isHeadOffice"
                    size="lg"
                    flat
                    square
                    dense
                  >
                    <Icon
                      v-if="expanded.includes(prop.node.name)"
                      icon="eva:file-add-fill"
                    />

                    <Icon v-else icon="eva:file-add-outline" />
                  </q-btn>
                  <!-- subBranch -->
                  <q-btn
                    v-else
                    class="color-brach-tree-btn"
                    @click.stop
                    size="lg"
                    dense
                    flat
                    name="menu"
                  >
                    <Icon icon="ri:more-2-fill" width="16px" />
                    <q-menu class="bordered" style="width: 150px">
                      <q-list>
                        <q-item
                          clickable
                          v-close-popup
                          dense
                          @click="
                            triggerEditSubBranch(prop.node.code, prop.node.id)
                          "
                        >
                          <q-item-section avatar class="q-py-sm">
                            <q-icon
                              style="color: hsl(var(--cyan-6-hsl))"
                              name="mdi-pencil-outline"
                            />
                          </q-item-section>
                          <q-item-section>{{ $t('edit') }}</q-item-section>
                        </q-item>

                        <q-item
                          clickable
                          v-close-popup
                          dense
                          @click="triggerDeleteSubBranch(prop.node.id)"
                        >
                          <q-item-section avatar class="q-py-sm">
                            <q-icon
                              style="color: hsl(var(--red-6-hsl))"
                              name="mdi-trash-can-outline"
                            />
                          </q-item-section>
                          <q-item-section>{{ $t('delete') }}</q-item-section>
                        </q-item>

                        <q-item v-close-popup dense>
                          <q-item-section class="q-py-sm">
                            <div
                              class="bg-branch-tree-toggle q-pa-sm"
                              style="border-radius: 6px"
                              :class="{ 'dark-toggle': $q.dark.isActive }"
                            >
                              <q-toggle
                                dense
                                :label="$t('closedStatus')"
                                size="sm"
                                v-model="shape"
                                val="md"
                              />
                            </div>
                          </q-item-section>
                        </q-item>
                      </q-list>
                    </q-menu>
                  </q-btn>

                  <q-btn
                    v-if="prop.node.isHeadOffice"
                    class="color-brach-tree-btn"
                    @click.stop
                    size="lg"
                    dense
                    flat
                    name="menu"
                  >
                    <Icon icon="ri:more-2-fill" width="16px" />
                    <q-menu class="bordered" style="width: 150px">
                      <q-list>
                        <q-item
                          clickable
                          v-close-popup
                          dense
                          @click="triggerEditHeadOffice(prop.node.id)"
                        >
                          <q-item-section avatar class="q-py-sm">
                            <q-icon
                              style="color: hsl(var(--cyan-6-hsl))"
                              name="mdi-pencil-outline"
                            />
                          </q-item-section>
                          <q-item-section>{{ $t('edit') }}</q-item-section>
                        </q-item>

                        <q-item
                          clickable
                          v-close-popup
                          dense
                          @click="triggerDeleteHeadOffice(prop.node.id)"
                        >
                          <q-item-section avatar class="q-py-sm">
                            <q-icon
                              style="color: hsl(var(--red-6-hsl))"
                              name="mdi-trash-can-outline"
                            />
                          </q-item-section>
                          <q-item-section>{{ $t('delete') }}</q-item-section>
                        </q-item>

                        <q-item v-close-popup dense>
                          <q-item-section class="q-py-sm">
                            <div
                              class="bg-branch-tree-toggle q-pa-sm"
                              style="border-radius: 6px"
                              :class="{ 'dark-toggle': $q.dark.isActive }"
                            >
                              <q-toggle
                                dense
                                :label="$t('closedStatus')"
                                size="sm"
                                v-model="shape"
                                val="md"
                              />
                            </div>
                          </q-item-section>
                        </q-item>
                      </q-list>
                    </q-menu>
                  </q-btn>
                </template>
              </q-tree>
            </div>
          </q-scroll-area>
        </div>

        <div v-if="openTableCard" class="col" style="overflow-y: auto">
          <AppBox class="q-pb-none">
            <div class="row">
              <div class="col">
                <q-select
                  style="width: 150px"
                  dense
                  outlined
                  v-model="inputSelectBranch"
                  :options="optionsBranch"
                  label="เลือก"
                />
              </div>
              <div class="col-3">
                <q-select
                  dense
                  outlined
                  v-model="inputFilter"
                  :options="optionsFilter"
                />
              </div>
            </div>
          </AppBox>

          <AppBox>
            <TableCardComponent
              @navigate="(v) => fetchSubBranch(v.id)"
              @show-info="(v) => fetchCard(v.id, !subBranch)"
              :sub-branch="subBranch"
              :rows="rowsBranch"
            />
          </AppBox>
        </div>

        <div
          v-if="openCardDetails"
          class="col bordered"
          style="overflow-y: auto"
        >
          <CardDetailsComponent
            v-if="showCurrentBranch"
            :data="showCurrentBranch"
            class="q-pa-sm"
          />
        </div>
      </AppBox>
    </AppBox>
  </div>

  <DetailBranchDrawerComponent
    @trigger-edit="
      (v) => {
        subBranch
          ? triggerEditSubBranch(v.code, v.id)
          : triggerEditHeadOffice(v.id);
        openBranchDrawer = false;
      }
    "
    @trigger-delete="
      (v) => {
        subBranch
          ? triggerDeleteSubBranch(v.id)
          : triggerDeleteHeadOffice(v.id);
      }
    "
    v-if="showCurrentBranch"
    v-model:open="openBranchDrawer"
    :data="showCurrentBranch"
  />

  <FormDialog
    ref="formDialogRef"
    v-model:modal="modal"
    v-model:address="formData.address"
    v-model:addressEN="formData.addressEN"
    v-model:provinceId="formData.provinceId as string"
    v-model:districtId="formData.districtId as string"
    v-model:subDistrictId="formData.subDistrictId as string"
    v-model:zipCode="formData.zipCode"
    :title="changeSubject(formType, typeBranch)"
    :submit="() => submitForm(formType, typeBranch, formData, formDataContact)"
  >
    <template #top>
      <div class="row full-width">
        <div class="col">
          <q-input
            :bg-color="$q.dark.isActive ? 'dark' : 'white'"
            v-model="inputCode"
            dense
            outlined
            :label="$t('formDialogInputCode')"
            readonly
          />
        </div>

        <div class="col q-pl-md">
          <q-input
            hide-bottom-space
            :bg-color="$q.dark.isActive ? 'dark' : 'white'"
            v-model="formData.taxNo"
            dense
            outlined
            :label="$t('formDialogInputTaxNo')"
            lazy-rules
            :rules="[
              (val) =>
                (val && val.length > 0) || $t('formDialogInputTaxNoValidate'),
            ]"
          />
        </div>
      </div>

      <div class="row full-width">
        <div class="col">
          <q-input
            hide-bottom-space
            :bg-color="$q.dark.isActive ? 'dark' : 'white'"
            v-model="formData.name"
            dense
            outlined
            :label="
              typeBranch === 'headOffice'
                ? $t('formDialogInputNameHq')
                : $t('formDialogInputNameSubBranch')
            "
            lazy-rules
            :rules="[(val) => val && val.length > 0]"
            :error-message="
              typeBranch === 'headOffice'
                ? $t('formDialogInputNameHqValidate')
                : $t('formDialogInputNameSubBranchValidate')
            "
          />
        </div>

        <div class="col q-pl-md">
          <q-input
            hide-bottom-space
            :bg-color="$q.dark.isActive ? 'dark' : 'white'"
            v-model="formData.nameEN"
            dense
            outlined
            :label="
              typeBranch === 'headOffice'
                ? $t('formDialogInputNameHqEn')
                : $t('formDialogInputNameSubBranchEn')
            "
            :rules="[(val) => val && val.length > 0]"
            :error-message="
              typeBranch === 'headOffice'
                ? $t('formDialogInputNameHqEnValidate')
                : $t('formDialogInputNameSubBranchEnValidate')
            "
          />
        </div>
      </div>
    </template>

    <template #append>
      <AppBox
        class="q-mt-md branch-form-input-Contact"
        :class="{ 'dark-form-input-Contact': $q.dark.isActive }"
      >
        <div class="row q-mb-md">
          <div class="col">
            <q-input
              :bg-color="$q.dark.isActive ? 'dark' : 'white'"
              hide-bottom-space
              v-model="formDataContact.telephoneNo"
              dense
              outlined
              :label="$t('formDialogInputTelephoneContact')"
            />
          </div>
          <div class="col q-pl-md">
            <q-input
              :bg-color="$q.dark.isActive ? 'dark' : 'white'"
              hide-bottom-space
              v-model="formDataContact.lineId"
              dense
              outlined
              label="Line Id"
            />
          </div>
        </div>

        <div
          class="branch-form-show-qr-code q-pa-md column items-center justify-center full-width"
          :class="{ 'dark-form-show-qr-code': $q.dark.isActive }"
        >
          <div class="col q-pb-md">
            <q-img
              v-if="urlQrCode"
              :src="urlQrCode as string"
              style="width: 100px; height: 100px"
            />
            <q-btn
              class="branch-form-btn-qr-code"
              v-else
              unelevated
              :color="$q.dark.isActive ? 'grey-10' : 'grey-2'"
              :text-color="$q.dark.isActive ? 'white' : 'grey-5'"
            >
              <Icon icon="teenyicons:add-outline" width="20px" height="50px" />
            </q-btn>
          </div>
          <div class="col">
            <q-btn
              style="
                background: var(--blue-5);
                color: var(--blue-0);
                font-size: 12px;
              "
              unelevated
              rounded
              :label="$t('formDialogUploadQrCode')"
              @click="inputFile.click()"
            ></q-btn>
          </div>
        </div>
      </AppBox>
    </template>

    <template #midBottom>
      <div>
        <div class="row full-width q-pb-md">
          <div class="col q-pr-md">
            <q-input
              v-model="formData.telephoneNo"
              dense
              outlined
              :label="$t('formDialogInputTelephoneHq')"
            />
          </div>
          <div class="col">
            <q-input
              v-model="formData.email"
              dense
              outlined
              :label="$t('formDialogInputEmailHq')"
            />
          </div>
        </div>

        <div
          class="column q-pa-sm full-width bordered"
          style="border-radius: 6px"
        >
          <div class="col">location</div>
          <div class="col self-center bg-image q-pa-md">
            <q-btn
              rounded
              style="
                background: var(--blue-5);
                color: var(--blue-0);
                font-size: 12px;
              "
              class="flex flrx-center"
              label="location"
            ></q-btn>
          </div>
        </div>
      </div>
    </template>
  </FormDialog>
</template>

<style scoped>
.bg-image {
  background-image: url(/map.png);
  background-repeat: no-repeat;
  background-size: auto;
}

.branch-form-show-qr-code {
  --_bg-branch-form-show-qr-code: linear-gradient(
    180deg,
    var(--indigo-0),
    var(--sand-0)
  );

  --_border-branch-form-show-qr-code: 2px dashed var(--gray-4);
  border: var(--_border-branch-form-show-qr-code);
  border-radius: 10px;
  background-image: var(--_bg-branch-form-show-qr-code);

  &.dark-form-show-qr-code {
    background: var(--gray-9);
  }
}

.branch-form-btn-qr-code {
  --_color-btn-qr-code: 3px solid var(--gray-4);

  border: var(--_color-btn-qr-code);
  border-radius: 6px;
}

.branch-form-input-Contact {
  --_bg-branch-form-input-Contact: var(--gray-1-hsl);
  background: hsl(var(--_bg-branch-form-input-Contact));

  &.dark-form-input-Contact {
    --_bg-branch-form-input-Contact: var(--gray-10-hsl);
    border: 2px solid var(--gray-9);
  }
}

.branch-container {
  --_color-branch-tree-text: var(--blue-6-hsl);
  --_color-branch-title: var(--blue-10-hsl);
  --_bg-branch-title: var(--blue-0-hsl) / 0.5;
  --_color-branch-btn: var(--cyan-6-hsl);
  --_color-branch-tree-active: var(--blue-6-hsl);
  --_bg-branch-tree-box: var(--gray-0-hsl);
  --_bg-branch-tree-scroll: var(--gray-0-hsl);
  --_color-branch-tree-scroll: var(--gray-0-hsl);

  &.dark {
    --_color-branch-title: var(--blue-0-hsl);
    --_bg-branch-title: var(--gray-9-hsl) / 1;
    --_color-branch-btn: var(--cyan-6-hsl);
    --_color-branch-tree-active: var(--blue-6-hsl);
    --_bg-branch-tree-box: var(--gray-10-hsl);
    --_bg-branch-tree-scroll: var(--gray-11-hsl);
    --_color-branch-tree-scroll: var(--gray-8-hsl);
  }
}

.bg-branch-tree-toggle {
  --_bg-branch-tree-toggle: var(--gray-3-hsl);
  background: hsl(var(--_bg-branch-tree-toggle));

  &.dark-toggle {
    --_bg-branch-tree-toggle: var(--gray-9-hsl);
  }
}

.bg-branch-tree-scroll {
  background: hsl(var(--_bg-branch-tree-scroll));
  color: hsl(var(--_color-branch-tree-scroll));
}

.bg-branch-tree-box {
  background: hsl(var(--_bg-branch-tree-box));
}

.bg-card-branch-title {
  background: hsla(var(--_bg-branch-title));
}

.color-card-branch-title {
  color: hsl(var(--_color-branch-title));
}

.color-card-branch-btn {
  color: hsl(var(--_color-branch-btn));
  display: flex;
  align-items: center;
}

.color-brach-tree-text,
.color-brach-tree-btn {
  color: var(--stone-6);
}

.color-tree-active {
  color: hsl(var(--_color-branch-tree-active));
}

.bg-branch-tree {
  background: hsla(var(--_color-branch-tree-active) / 0.08);

  &.dark-tree {
    background: hsla(var(--_color-branch-tree-active) / 0.01);
    border: 1px solid hsla(var(--_color-branch-tree-active));
  }
}
</style>