hrms-mgt/src/modules/05_placement/components/probation/MainProbation.vue

<script setup lang="ts">
import { ref, useAttrs, onMounted, reactive, watch } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import { useTransferDataStore } from "@/modules/05_placement/store";
import type { QTableProps } from "quasar";
import type {
  FormMainProbation,
  FormMainProbation2,
  mapData,
  OpfillterType,
  CriteriaType,
} from "@/modules/05_placement/interface/request/Main";

import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
import router from "@/router";

import http from "@/plugins/http";
import config from "@/app.config";

const $q = useQuasar(); //ใช้ noti quasar
const rows = ref<FormMainProbation[]>([]);
const rows2 = ref<FormMainProbation2[]>([]);
const modal = ref<boolean>(false);
const attrs = ref<any>(useAttrs());
const paging = ref<boolean>(true);
const fillter = ref<number | null>(0);
const paging2 = ref<boolean>(true);
const Opfillter = ref<OpfillterType[]>([{ id: 0, value: "ทั้งหมด" }]);
const filterRef = ref<any>(null);
const filterRef2 = ref<any>(null);
const dataUpdate = ref<FormMainProbation[]>([]);
const probationlist = ref<any>([]);
const filterKeyword = ref<string>("");
const fillterStatus = ref<any>([]);
const filterKeyword2 = ref<string>("");
const Opfillter2 = ref<OpfillterType[]>([{ id: 0, value: "ทั้งหมด" }]);

const storeFn = useTransferDataStore();
const mixin = useCounterMixin();
const { statusProbationMain } = storeFn;
const { messageError, success, showLoader, hideLoader, dialogConfirm } = mixin;
const pagination = ref({
  sortBy: "desc",
  descending: false,
  page: 1,
  rowsPerPage: 10,
});
const pagination2 = ref({
  sortBy: "desc",
  descending: false,
  page: 1,
  rowsPerPage: 10,
});

/** ข้อมูลที่เเสดง */
const visibleColumns = ref<string[]>([
  "no",
  "name",
  "position_line",
  "position_level",
  "organization",
  "probation_no",
  "order_number",
  "probation_status",
]);

/** หัวตาราง */
const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "name",
    align: "left",
    label: "ชื่อ-นามสกุล",
    sortable: true,
    field: "name",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "position_line",
    align: "left",
    label: "ตำแหน่งในสายงาน",
    sortable: true,
    field: "position_line",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "position_level",
    align: "left",
    label: "ระดับ",
    sortable: true,
    field: "position_level",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "organization",
    align: "left",
    label: "สังกัด",
    sortable: true,
    field: "organization",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px ",
    classes: "table_ellipsis",
  },
  {
    name: "probation_no",
    align: "center",
    label: "ครั้งที่ทดลองปฏิบัติหน้าที่ราชการ",
    sortable: true,
    field: "probation_no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "order_number",
    align: "center",
    label: "เลขที่คําสั่งบรรจุแต่งตั้ง",
    sortable: true,
    field: "order_number",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "probation_status",
    align: "left",
    label: "สถานะ",
    sortable: true,
    field: "probation_status",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);

/** หัวตาราง2 */
const columns2 = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: false,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "fullname",
    align: "left",
    label: "ชื่อ-นามสกุล",
    sortable: true,
    field: "fullname",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "position",
    align: "left",
    label: "ตำแหน่งในสายงาน",
    sortable: true,
    field: "position",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "posLevelName",
    align: "left",
    label: "ประเภทตำแหน่ง",
    sortable: true,
    field: "posLevelName",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
    format(val, row) {
      return (
        (row.posTypeName ? row.posTypeName : "") +
        (row.posLevelName !== null ? " (" + row.posLevelName + ")" : "")
      );
    },
  },
  {
    name: "organizationOrganization",
    align: "left",
    label: "สังกัด",
    sortable: true,
    field: "organizationOrganization",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "status",
    align: "left",
    label: "ทดลองปฏิบัติหน้าที่ราชการ",
    sortable: true,
    field: "status",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
]);

/** ฟังชั่น ฟิลเตอร์ หา status */
function ProbationMainFilter() {
  const useStatus = new Set();
  fillterStatus.value.forEach((item: any) => {
    const ID = item.probation_status;
    const title = statusProbationMain(Number(item.probation_status));
    if (ID !== null && !useStatus.has(ID)) {
      Opfillter.value.push({
        id: ID,
        value: title,
      });
      useStatus.add(ID);
    }
  });
  Opfillter.value.sort((a: any, b: any) => a.id - b.id);
  Opfillter2.value = Opfillter.value;
}

/**
 * อัพเดท rows ตาม status
 * @param body {id:? , value: ?}
 */
function updateRows(body: any) {
  if (body.value !== "ทั้งหมด") {
    const filteredRows = dataUpdate.value.filter(
      (item: FormMainProbation) => item.probation_status === body.value
    );
    rows.value = filteredRows;
  } else {
    rows.value = dataUpdate.value;
  }
}

/** get ข้อมูล */
async function getpersonalList() {
  showLoader();
  await http
    .get(config.API.probationPersonalList())
    .then((res) => {
      const data = res.data.data;
      fillterStatus.value = data;
      rows.value = data.map((item: FormMainProbation) => ({
        personal_id: item.personal_id,
        name: item.name,
        position_line: item.position_line,
        position_line_id: item.position_line_id,
        position_level: item.position_level,
        position_level_id: item.position_level_id,
        organization: item.organization !== "" ? item.organization : "-",
        probation_no: item.probation_no,
        order_number: item.order_number != "xx/2566" ? item.order_number : "-",
        probation_status: statusProbationMain(Number(item.probation_status)),
      }));
      dataUpdate.value = rows.value;
      ProbationMainFilter();
    })
    .catch(() => {})
    .finally(() => {
      hideLoader();
    });
}

const formProbation = reactive({ keyword: "", pageSize: 10, page: 1 });
const maxPage = ref<number>(1);

async function onclickAddProbation() {
  modal.value = true;
  modal.value && showLoader();
  await http
    .post(config.API.orgProfileProbation, formProbation)
    .then((res) => {
      maxPage.value = Math.ceil(res.data.result.total / formProbation.pageSize);
      rows2.value = res.data.result.data;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

watch([() => formProbation.page, () => formProbation.pageSize], () => {
  onclickAddProbation();
});

/**
 * function updatePagination
 * @param newPagination ข้อมูล Pagination ใหม่
 */
function updatePagination(newPagination: any) {
  formProbation.page = 1;
  formProbation.pageSize = newPagination.rowsPerPage;
}

async function filterKeyword2Fn(page: number) {
  page !== 1 ? (formProbation.page = 1) : await onclickAddProbation();
}

/** fecth profile */
// async function fecthlistPersonal() {
//   showLoader();
//   await http
//     .get(config.API.profileOrganizRoot)
//     .then((res) => {
//       const id = res.data.result[0].id;
//       if (id !== "") {
//         findlist(id);
//       }
//     })
//     .catch((e) => {
//       messageError($q, e);
//     })
//     .finally(() => {});
// }

/**
 * ส่งข้อมูลเพื่อ รับ res
 * @param id string
 * @param data type
 */
async function fecthlistProbation(id: string, data: any) {
  try {
    probationlist.value = [];
    const res = await http.post(
      config.API.profileSearchNewOcIdType(id, "officer"),
      {
        criterias: data,
      }
    );
    return res.data.result;
  } catch (err) {
    messageError($q, err);
  } finally {
    hideLoader();
  }
}

/**
 * ค้นหาข้อมูลตามไอดี
 * @param id string
 */
// async function findlist(id: string) {
//   let data: CriteriaType[] = [
//     { criteriaType: "is_retire", criteriaValue: "false" },
//     { criteriaType: "is_probation", criteriaValue: "true" },
//   ];
//   let data2: CriteriaType[] = [
//     { criteriaType: "is_retire", criteriaValue: "false" },
//     { criteriaType: "is_probation", criteriaValue: "false" },
//   ];
//   let response1 = await fecthlistProbation(id, data);
//   let response2 = await fecthlistProbation(id, data2);

//   response1.forEach((e: any) =>
//     probationlist.value.push({ ...e, probation: true })
//   );
//   response2.forEach((e: any) =>
//     probationlist.value.push({ ...e, probation: false })
//   );
//   rows2.value = probationlist.value.map((e: mapData) => ({
//     id: e.id,
//     fullname: e.fullname,
//     position: e.position,
//     level: e.positionEmployeeLevel,
//     organizationOrganization: e.oc,
//     status: e.probation,
//   }));
//   modal.value = true;
// }

/**
 * เพิ่มข้อมูล ผู้ทดลองปฏิบัติหน้าที่ราชการ
 * @param id personal id
 */
function clickAdd(data: any) {
  dialogConfirm(
    $q,
    async () => {
      showLoader();

      await http
        .post(config.API.personalAdd(), data)
        .then(() => {
          getpersonalList();
          success($q, "เพิ่มข้อมูลสำเร็จ");
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          clickClose();
          hideLoader();
        });
    },
    "ยันยันการเพิ่มข้อมูล",
    "ต้องการเพิ่มข้อมูลนี้หรือไม่ ?"
  );
}
/** ปิด dialog */
async function clickClose() {
  modal.value = false;
}

/** reset ฟิลเตอร์ */
function resetFilter() {
  filterKeyword.value = "";
  filterRef.value.focus();
}

/** reset ฟิลเตอร์ ใน dialog */
function resetFilter2() {
  filterKeyword2.value = "";
  filterRef2.value.focus();
}

function paginationLabel(start: string, end: string, total: string) {
  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
  else return start + "-" + end + " ใน " + total;
}

function paginationLabel2(start: string, end: string, total: string) {
  if (paging2.value == true) return " " + start + "-" + end + " ใน " + total;
  else return start + "-" + end + " ใน " + total;
}

/**
 * ค้นหาตาม text
 * @param val ค่าที่ค้นหา
 * @param update fn
 */
function filterFn(val: string, update: any) {
  if (val == "") {
    update(() => {
      Opfillter2.value = Opfillter.value;
      fillter.value = null;
    });
  } else {
    update(() => {
      Opfillter2.value = Opfillter.value.filter(
        (e: any) => e.value.search(val) !== -1
      );
    });
  }
}

/** get ค่า เมื่อโหลดหน้า */
onMounted(async () => {
  getpersonalList();
});
</script>

<template>
  <div class="toptitle text-dark col-12 row items-center">
    รายการผู้ทดลองปฏิบัติหน้าที่ราชการ
  </div>
  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
    <div class="row q-col-gutter-sm">
      <div class="row col-12 q-col-gutter-sm">
        <div class="col-6">
          <div class="row">
            <q-select
              class="col-5 col-sm-3 col-md-8"
              v-model="fillter"
              label="สถานะ"
              dense
              map-options
              option-label="value"
              :options="Opfillter2"
              option-value="id"
              lazy-rules
              hide-bottom-space
              :readonly="false"
              :borderless="false"
              :outlined="true"
              :hide-dropdown-icon="false"
              @update:model-value="updateRows(fillter)"
              @filter="filterFn"
              use-input
              behavior="menu"
            >
              <template v-slot:no-option>
                <q-item>
                  <q-item-section class="text-grey">
                    ไม่มีข้อมูล
                  </q-item-section>
                </q-item>
              </template>
            </q-select>

            <div>
              <q-btn
                @click="onclickAddProbation"
                size="12px"
                flat
                round
                color="add"
                icon="mdi-plus"
              >
                <q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
              </q-btn>
            </div>
          </div>
        </div>
        <q-space />

        <q-input
          class="col-xs-12 col-sm-3 col-md-2"
          standout
          dense
          v-model="filterKeyword"
          ref="filterRef"
          outlined
          debounce="300"
          placeholder="ค้นหา"
        >
          <template v-slot:append>
            <q-icon v-if="filterKeyword == ''" name="search" />
            <q-icon
              v-if="filterKeyword !== ''"
              name="clear"
              class="cursor-pointer"
              @click="resetFilter"
            />
          </template>
        </q-input>

        <q-select
          v-model="visibleColumns"
          multiple
          outlined
          dense
          options-dense
          :display-value="$q.lang.table.columns"
          emit-value
          map-options
          :options="columns"
          option-value="name"
          options-cover
          style="min-width: 150px"
          class="col-xs-12 col-sm-3 col-md-2"
        />
      </div>
      <div class="col-12">
        <d-table
          ref="table"
          :columns="columns"
          :rows="rows"
          :filter="filterKeyword"
          row-key="Order"
          flat
          bordered
          :paging="true"
          dense
          class="custom-header-table"
          v-bind="attrs"
          :visible-columns="visibleColumns"
          :pagination-label="paginationLabel"
          v-model:pagination="pagination"
        >
          <template v-slot:header="props">
            <q-tr :props="props">
              <q-th v-for="col in props.cols" :key="col.name" :props="props">
                <span class="text-weight-medium">{{ col.label }}</span>
              </q-th>
            </q-tr>
          </template>
          <template v-slot:body="props">
            <q-tr
              :props="props"
              class="cursor-pointer"
              @click="router.push(`/probation/detail/${props.row.personal_id}`)"
            >
              <q-td v-for="col in props.cols" :key="col.name" :props="props">
                <div v-if="col.name == 'no'">
                  {{ props.rowIndex + 1 }}
                </div>
                <div v-else>
                  {{ col.value ?? "-" }}
                </div>
              </q-td>
            </q-tr>
          </template>
          <template v-slot:pagination="scope">
            <q-pagination
              v-model="pagination.page"
              active-color="primary"
              color="dark"
              :max="scope.pagesNumber"
              :max-pages="5"
              size="sm"
              boundary-links
              direction-links
            ></q-pagination>
          </template>
        </d-table>
      </div>
    </div>
  </q-card>

  <q-dialog v-model="modal" persistent>
    <q-card style="width: 900px; max-width: 80vw">
      <q-form ref="myForm">
        <DialogHeader
          tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ "
          :close="clickClose"
        />
        <q-separator />
        <q-card-section class="q-pa-md q-col-gutter-sm">
          <q-input
            class="col-12"
            standout
            dense
            v-model="formProbation.keyword"
            ref="filterRef2"
            outlined
            debounce="300"
            placeholder="ค้นหา"
            @keydown.enter.prevent="filterKeyword2Fn(formProbation.page)"
          >
            <template v-slot:append>
              <q-icon v-if="filterKeyword2 == ''" name="search" />
              <q-icon
                v-if="filterKeyword2 !== ''"
                name="clear"
                class="cursor-pointer"
                @click="resetFilter2"
              />
            </template>
          </q-input>
          <div class="col-12">
            <d-table
              ref="table2"
              :columns="columns2"
              :rows="rows2"
              row-key="Order"
              flat
              bordered
              :paging="true"
              dense
              class="custom-header-table"
              v-bind="attrs"
              :pagination-label="paginationLabel2"
              v-model:pagination="pagination2"
              @update:pagination="updatePagination"
              :rows-per-page-options="[10, 25, 50, 100]"
            >
              <template v-slot:header="props">
                <q-tr :props="props">
                  <q-th
                    v-for="col in props.cols"
                    :key="col.name"
                    :props="props"
                  >
                    <span class="text-weight-medium">{{ col.label }}</span>
                  </q-th>
                  <q-th auto-width />
                </q-tr>
              </template>
              <template v-slot:body="props">
                <q-tr :props="props" class="cursor-pointer">
                  <q-td
                    v-for="col in props.cols"
                    :key="col.name"
                    :props="props"
                  >
                    <div v-if="col.name == 'no'">
                      {{
                        (formProbation.page - 1) * formProbation.pageSize +
                        props.rowIndex +
                        1
                      }}
                    </div>

                    <div v-else-if="col.name == 'fullname'">
                      {{
                        (props.row.prefix ? props.row.prefix : "") +
                        props.row.firstName +
                        "  " +
                        props.row.lastName
                      }}
                    </div>
                    <div v-else-if="col.name == 'status'" class="text-center">
                      <q-icon
                        v-if="props.row.isProbation === true"
                        name="mdi-check"
                        color="positive"
                        size="sm"
                      />
                    </div>
                    <div
                      v-else-if="col.name == 'organizationOrganization'"
                      class="table_ellipsis"
                    >
                      <div
                        v-if="
                          props.row.orgChild4Name === null &&
                          props.row.orgChild3Name === null &&
                          props.row.orgChild2Name === null &&
                          props.row.orgChild1Name === null &&
                          props.row.orgRootName === null
                        "
                      >
                        -
                      </div>
                      {{
                        `${
                          props.row.orgChild4Name
                            ? props.row.orgChild4Name + "/"
                            : ""
                        }${
                          props.row.orgChild3Name
                            ? props.row.orgChild3Name + "/"
                            : ""
                        }${
                          props.row.orgChild2Name
                            ? props.row.orgChild2Name + "-"
                            : ""
                        }${
                          props.row.orgChild1Name
                            ? props.row.orgChild1Name + "/"
                            : ""
                        }${props.row.orgRootName ? props.row.orgRootName : ""}`
                      }}
                    </div>
                    <div v-else>
                      {{ col.value ? col.value : "-" }}
                    </div>
                  </q-td>
                  <q-td auto-width>
                    <q-btn
                      dense
                      class="q-px-md"
                      outline
                      color="primary"
                      label="เพิ่ม"
                      @click="clickAdd(props.row)"
                    >
                    </q-btn>
                  </q-td>
                </q-tr>
              </template>
              <template v-slot:pagination="scope">
                <q-pagination
                  v-model="formProbation.page"
                  active-color="primary"
                  color="dark"
                  :max="maxPage"
                  size="sm"
                  boundary-links
                  direction-links
                  :max-pages="5"
                ></q-pagination>
              </template>
            </d-table>
          </div>
        </q-card-section>
      </q-form>
    </q-card>
  </q-dialog>
</template>