hrms-mgt/src/modules/02_organizationalNew/views/main.vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";

/** importType*/
import type { DataOption } from "@/modules/02_organizationalNew/interface/index/Main";
import type { OrgRevision } from "@/modules/02_organizationalNew/interface/response/organizational";

/** importComponents*/
import ListView from "@/modules/02_organizationalNew/components/listView.vue";
import StructureView from "@/modules/02_organizationalNew/components/structureView.vue";
import DialogFormNewStructure from "@/modules/02_organizationalNew/components/DialogNewStructure.vue";
import DialogDateTime from "@/modules/02_organizationalNew/components/DialogFormDateTime.vue";
import DialogHistory from "@/modules/02_organizationalNew/components/DialogHistory.vue";
import DialogPositionDetail from "@/modules/02_organizationalNew/components/PositionDetail.vue";
/** importStore*/
import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
import { useCounterMixin } from "@/stores/mixin";

const $q = useQuasar();
const { showLoader, hideLoader, messageError } = useCounterMixin();

const modalNewStructure = ref<boolean>(false);
const modalPositionDetail = ref<boolean>(false);

const stroe = useOrganizational();

const isStatusData = ref<boolean>(false);
const ishasActive = ref<boolean>(false);
const ishasDraft = ref<boolean>(false);
const itemStructure = ref<DataOption[]>([
  {
    id: "NEW",
    name: "สร้างใหม่",
  },
  {
    id: "ORG",
    name: "ทำสำเนาเฉพาะโครงสร้าง",
  },
  {
    id: "ORG_POSITION",
    name: "ทำสำเนาโครงสร้างและตำแหน่ง",
  },
  {
    id: "ORG_POSITION_PERSON",
    name: "ทำสำเนาโครงสร้าง ตำแหน่งและคนครอง",
  },
]);

async function fetchOrganizationActive() {
  showLoader();
  await http
    .get(config.API.activeOrganization)
    .then((res) => {
      const data = res.data.result;
      if (data) {
        stroe.fetchDataActive(data);
        if (data.activeName === null && data.draftName === null) {
          isStatusData.value = false;
        } else {
          isStatusData.value = true;
          if (isStatusData.value) {
            if (data.activeName === null) {
              ishasActive.value = true;
              stroe.typeOrganizational = "draft";
            } else if (data.draftName === null) {
              ishasDraft.value = true;
              stroe.typeOrganizational = "current";
            }
          }
        }
      }
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

const itemHistory = ref<DataOption[]>([]);
const historyId = ref<string>("");
async function fetchHistory() {
  // showLoader();
  await http
    .get(config.API.organizationHistoryNew)
    .then((res) => {
      console.log(res);
      const data = res.data.result;
      const filterData = data.filter(
        (e: OrgRevision) => !e.orgRevisionIsDraft && !e.orgRevisionIsCurrent
      );

      itemHistory.value = filterData.map((e: OrgRevision) => ({
        id: e.orgRevisionId,
        name: e.orgRevisionName,
      }));
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

const typeStructure = ref<string>("");
function ocClickAddStructure(type: string) {
  modalNewStructure.value = !modalNewStructure.value;
  typeStructure.value = type;
}

const modalDateTime = ref<boolean>(false);
function onClickDateTime() {
  modalDateTime.value = !modalDateTime.value;
}

const modalHistory = ref<boolean>(false);
const count = ref<number>(0);
function onClickHistory(id: string) {
  historyId.value = id;
  count.value++;
  // modalHistory.value = !modalHistory.value;
}

onMounted(async () => {
  await fetchOrganizationActive();
  await fetchHistory();
});
</script>
<template>
  <div class="row">
    <div class="toptitle text-dark row items-center">โครงสร้างอัตรากำลัง</div>
    <q-space />

    <div class="toptitle row" v-if="stroe.typeOrganizational === 'draft'">
      <q-btn
        color="indigo-9"
        icon="alarm"
        label="ตั้งเวลาเผยแพร่"
        @click="onClickDateTime"
      >
      </q-btn>
    </div>
  </div>

  <q-card flat bordered>
    <div class="q-pa-xl" v-if="!isStatusData">
      <q-card
        flat
        bordered
        style="
          height: 70vh;
          border: 1px solid rgb(210, 210, 210);
          border-radius: 5px;
        "
      >
        <div
          class="text-center row"
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
          "
        >
          <div>
            <q-btn
              flat
              style="background-color: #d8f5f2"
              round
              color="primary"
              size="lg"
              icon="add"
              @click="ocClickAddStructure('NEW')"
            >
              <q-tooltip>เพิ่มโครงสร้าง </q-tooltip>
            </q-btn>
            <div class="q-mt-sm">เพิ่มโครงสร้าง</div>
          </div>
        </div>
      </q-card>
    </div>
    <div v-else>
      <q-card class="my-card">
        <q-card-section>
          <q-toolbar class="q-gutter-md" style="padding: 0px">
            <q-btn-group outline>
              <q-btn
                :outline="stroe.typeOrganizational === 'current' ? false : true"
                color="blue"
                label="ปัจจุบัน"
                @click="stroe.typeOrganizational = 'current'"
                :disable="ishasActive"
              />
              <q-btn
                :outline="stroe.typeOrganizational === 'draft' ? false : true"
                color="blue"
                label="แบบร่าง"
                @click="stroe.typeOrganizational = 'draft'"
                :disable="ishasDraft"
              />
              <q-btn-dropdown
                color="blue"
                label="โครงสร้างแบบเก่า"
                @click="stroe.typeOrganizational = 'old'"
                :outline="stroe.typeOrganizational === 'old' ? false : true"
              >
                <q-list>
                  <q-item
                    dense
                    clickable
                    v-close-popup
                    v-for="(item, index) in itemHistory"
                    :key="index"
                    @click="onClickHistory(item.id)"
                  >
                    <q-item-section>
                      <q-item-label>{{ item.name }}</q-item-label>
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-btn-dropdown>
            </q-btn-group>

            <q-btn-dropdown color="green" label="ประวัติโครงสร้าง">
              <q-list>
                <q-item
                  dense
                  clickable
                  v-close-popup
                  v-for="(item, index) in itemStructure"
                  :key="index"
                  @click="ocClickAddStructure(item.id)"
                >
                  <q-item-section>
                    <q-item-label>{{ item.name }}</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-btn-dropdown>

            <!-- <q-btn flat round color="primary" icon="history">
              <q-tooltip>ประวัติโครงสร้าง</q-tooltip>
            </q-btn> -->
            <q-space />
            <q-btn
              flat
              round
              :color="stroe.statusView === 'list' ? 'grey-7' : 'grey-4'"
              icon="list"
              @click="stroe.statusView = 'list'"
            />
            <q-btn
              flat
              round
              icon="mdi-sitemap"
              :color="stroe.statusView === 'tree' ? 'grey-7' : 'grey-4'"
              @click="stroe.statusView = 'tree'"
            />
          </q-toolbar>
        </q-card-section>
        <q-separator />
        <q-card-section style="padding: 0px">
          <ListView
            v-if="stroe.statusView === 'list'"
            v-model:historyId="historyId"
            v-model:count="count"
          />
          <StructureView v-if="stroe.statusView === 'tree'" />
        </q-card-section>
      </q-card>
    </div>
  </q-card>

  <!-- เพิ่มโครงสร้าง -->
  <DialogFormNewStructure
    v-model:new-structure="modalNewStructure"
    v-model:status="isStatusData"
    v-model:type="typeStructure"
    :fetchActive="fetchOrganizationActive"
  />

  <!-- ตั้งเวลาเผยแพร่ -->
  <DialogDateTime :modal="modalDateTime" :close="onClickDateTime" />

  <!-- ประวัติโครงสร้าง -->
  <DialogHistory :modal="modalHistory" :close="onClickHistory" />

  <!-- รายละเอียดโครงสร้าง -->
  <!-- <DialogStructureDetail v-model:structure-detail="modalStructureDetail" /> -->

  <!-- รายละเอียดตำแหน่ง -->
  <DialogPositionDetail v-model:position-detail="modalPositionDetail" />
</template>

<style scoped></style>