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

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

import useBranchStore from 'stores/branch';
import AppBox from 'components/app/AppBox.vue';
import BtnAddComponent from 'components/01_branch-management/BtnAddComponent.vue';
import TooltipComponent from 'components/TooltipComponent.vue';
import StatCardComponent from 'components/StatCardComponent.vue';
import CardDetailsComponent from 'src/components/01_branch-management/CardDetailsComponent.vue';
import DeatailsBranchDrawerComponent from 'src/components/01_branch-management/DeatailsBranchDrawerComponent.vue';

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

const branchStore = useBranchStore();
const test = ref<string>('');

const modal = ref<boolean>(false);

const showCurrentBaranch = ref<Branch | boolean | null>();

const shape = ref<boolean>(false);

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

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

const rows: {
  name: string;
  branchName: string;
  address: string;
  phonNumber: string;
  Headquarters: string;
  type: string;
  status: string;
}[] = [
  {
    name: 'HQ0001',
    branchName: 'จ็อบเวิร์ทเกอร์เซอร์วิส',
    address: '192',
    phonNumber: '0639195701',
    Headquarters: 'HQ0001',
    type: 'สำนักงานใหญ่',
    status: 'เปิดใช้งาน',
  },
  {
    name: 'HQ0002',
    branchName: 'จ็อบเวิร์ทเกอร์เซอร์วิส 2',
    address: '192',
    phonNumber: '0639195701',
    Headquarters: 'HQ0001',
    type: 'สำนักงานใหญ่',
    status: 'เปิดใช้งาน',
  },

  {
    name: 'HQ0002',
    branchName: 'จ็อบเวิร์ทเกอร์เซอร์วิส 2',
    address: '192',
    phonNumber: '0639195701',
    Headquarters: 'HQ0001',
    type: 'สำนักงานใหญ่',
    status: 'เปิดใช้งาน',
  },
];

const branchStat = ref<
  {
    amount: number;
    label: string;
  }[]
>([
  {
    amount: 1,
    label: 'สำนักงานใหญ่ 1',
  },

  {
    amount: 2,
    label: 'สำนักงานใหญ่ 2',
  },
  {
    amount: 3,
    label: 'สำนักงานใหญ่ 3',
  },
  {
    amount: 4,
    label: 'สำนักงานใหญ่ 4',
  },
  {
    amount: 5,
    label: 'สำนักงานใหญ่ 5',
  },
]);

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

onMounted(() => {
  BranchStore.fetchById('9ff3521b-0669-4812-bb25-7f1961956c8e');
  console.log(BranchStore.data);

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

  if (result) {
    treeData.value = result.result;
  }
}

async function fetchBranch(id: string) {
  if (typeof branchStore.fetchById(id) === 'object') {
    showCurrentBaranch.value = await branchStore.fetchById(id);
  }
}

onMounted(async () => {
  getTree();

  if (
    typeof branchStore.fetchById('bfff119e-079d-4b56-9699-0466ade4b517') ===
    'object'
  ) {
    showCurrentBaranch.value = await branchStore.fetchById(
      'bfff119e-079d-4b56-9699-0466ade4b517',
    );
  }
});
</script>
<template>
  <div class="column">
    <div class="row text-h6 text-weight-bold q-mb-md">
      {{ $t('branchManagement') }}
    </div>

    <app-box
      bordered
      class="q-mb-md"
      :class="{ 'bg-card-branch-title': $q.dark.isActive }"
    >
      <StatCardComponent :branch="branchStat" />
    </app-box>

    <app-box bordered style="width: 100%; height: 500px">
      <div class="column" style="height: 100%">
        <div class="col-1 self-end">
          <div class="row">
            <TooltipComponent
              title="branchNoMainOfficeYet"
              caption="branchClickToCreateMainOffice"
              imgSrc="img-table-"
            />
          </div>
        </div>

        <div
          class="col test self-center"
          style="display: flex; align-items: center"
        >
          <BtnAddComponent
            :label="'สร้างสำนักงานใหญ่'"
            @trigger="() => openDialog()"
          />
        </div>
      </div>
    </app-box>

    <q-card
      class="bordered branch-main-variable-color"
      :class="{ dark: $q.dark.isActive }"
      style="width: 100%; height: 500px"
    >
      <q-card-section class="bordered bg-card-branch-title">
        <div class="row items-center">
          <div
            class="col q-pl-md text-h6 text-weight-bold color-card-branch-title"
          >
            {{ $t('headQuarters') }}
          </div>
          <div class="col-3">
            <q-input
              style="border-radius: 6px"
              class="bordered"
              outlined
              dense
              v-model="test"
              label="ค้นหา"
            >
              <template #prepend>
                <Icon icon="ic:baseline-search" />
              </template>
            </q-input>
          </div>
        </div>
      </q-card-section>

      <q-card-section class="no-padding row" style="height: 423px">
        <div class="bordered q-pa-md bg-branch-tree-box" style="width: 21%">
          <div
            @click="() => console.log('test')"
            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="bordered 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="fetchBranch(prop.node.id)"
                    class="q-pa-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=""
                    size="xl"
                    flat
                    v-if="prop.node.isHeadOffice"
                    dense
                  >
                    <Icon
                      v-if="expanded.includes(prop.node.name)"
                      icon="eva:file-add-fill"
                    />

                    <Icon v-else icon="eva:file-add-outline" />
                  </q-btn>

                  <q-btn
                    class="color-brach-tree-btn"
                    @click.stop=""
                    size="xl"
                    dense
                    flat
                    name="menu"
                  >
                    <Icon icon="ri:more-2-fill" />
                    <q-menu class="bordered" style="width: 150px">
                      <q-list class="q-pa-sm">
                        <q-item clickable v-close-popup class="no-padding">
                          <q-item-section avatar>
                            <q-icon
                              style="color: hsla(var(--cyan-6-hsl) / 1)"
                              ize="22px"
                              name="mdi-pencil-outline"
                            />
                          </q-item-section>

                          <q-item-section>
                            {{ $t('edit') }}
                          </q-item-section>
                        </q-item>

                        <q-item clickable v-close-popup class="no-padding">
                          <q-item-section avatar>
                            <q-icon
                              style="color: hsla(var(--red-6-hsl) / 1)"
                              size="22px"
                              name="mdi-trash-can-outline"
                            />
                          </q-item-section>

                          <q-item-section>{{ $t('delete') }}</q-item-section>
                        </q-item>

                        <q-item clickable v-close-popup class="q-px-sm">
                          <q-item-section>
                            <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 class="col bordered full-height" style="overflow-y: auto">
          <q-card-section 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-2 q-pr-md">
                <q-input dense outlined v-model="inputSearch">
                  <template v-slot:append>
                    <iconify-icon icon="ic:baseline-search" />
                  </template>
                </q-input>
              </div>
              <div class="col-2">
                <q-select
                  style="width: 150px"
                  dense
                  outlined
                  v-model="inputFilter"
                  :options="optionsFilter"
                />
              </div>
            </div>
          </q-card-section>

          <q-card-section>
            <TableCardComponent :subBranch="true" :rows="rows" />
          </q-card-section>
        </div>

        <div
          v-if="false"
          class="col bordered full-height"
          style="overflow-y: auto"
        >
          <CardDetailsComponent
            :data="showCurrentBaranch as Branch"
            class="q-pa-sm"
          />
        </div>
      </q-card-section>
    </q-card>
  </div>
</template>

<style scoped>
.branch-main-variable-color {
  --_color-branch-tree-text: var(--blue-6-hsl);
  --_color-branch-title: var(--blue-10-hsl);
  --_bg-branch-title: var(--_color-branch-title) / 0.08;
  --_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>