hrms-mgt/src/modules/11_discipline/components/1_Complaint/MainPage.vue

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";

// importStroe
import { useCounterMixin } from "@/stores/mixin";
import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";

// impoet Components
import TableComplaint from "@/modules/11_discipline/components/1_Complaint/TableComplaint.vue";

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

const $q = useQuasar();
const mixin = useCounterMixin();

const { showLoader, messageError, hideLoader } = mixin;
const router = useRouter();

/** stoer */
const complainstStore = useComplainstDataStore();
const { fetchComplainst } = complainstStore;
const filterRef = ref<HTMLInputElement | null>(null);
const filterTable = ref<string>("");
const filterKeyword = ref<string>("");
const maxPage = ref<number>(1);
const page = ref<number>(1);
const rowsPerPage = ref<number>(10);
const statusFilter = ref<string>("ALL");

async function updatePagingProp(rowPerpage: number, pageCurrent: number) {
  rowsPerPage.value = rowPerpage;
  page.value = pageCurrent;
  await getList();
}

async function getList() {
  showLoader();
  await http
    .get(
      config.API.complaintList(
        page.value,
        rowsPerPage.value,
        filterKeyword.value
      )
    )
    //
    .then((res) => {
      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
      const data = res.data.result.data;
      fetchComplainst(data);
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
}

/** ไปยังหน้าเพิ่มข้อมูล */
function redirectToPageadd() {
  router.push(`/discipline/complaints/add`);
}

function filterFn() {
  getList();
}

function dataUpdate() {
  console.log(statusFilter.value);
}

function resetFilter() {
  filterKeyword.value = "";
  if (filterRef.value) {
    filterRef.value.focus();
    getList();
  }
}

/** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
onMounted(async () => {
  await getList();
});
</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 col-12 q-col-gutter-sm q-mb-sm">
      <div class="col-2">
        <q-select
          v-model="statusFilter"
          label="สถานะ"
          dense
          outlined
          emit-value
          map-options
          option-label="name"
          option-value="id"
          :options="complainstStore.statusOptions"
          @update:model-value="dataUpdate"
        />
      </div>
      <div>
        <q-btn
          id="addComplaints"
          for="addComplaints"
          size="12px"
          flat
          round
          color="primary"
          icon="mdi-plus"
          @click="redirectToPageadd()"
          ><q-tooltip>เพิ่มเรื่องร้องเรียน </q-tooltip></q-btn
        >
      </div>
      <q-space />

      <q-input
        for="#search"
        class="col-xs-12 col-sm-3 col-md-2"
        standout
        dense
        v-model="filterKeyword"
        ref="filterRef"
        outlined
        debounce="300"
        placeholder="ค้นหา"
        @keydown.enter.prevent="filterFn"
      >
        <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
        id="visibleColumns"
        for="visibleColumns"
        v-model="complainstStore.visibleColumns"
        multiple
        outlined
        dense
        options-dense
        :display-value="$q.lang.table.columns"
        emit-value
        map-options
        :options="complainstStore.columns"
        option-value="name"
        options-cover
        class="col-xs-12 col-sm-3 col-md-2"
      />
    </div>

    <div class="col-12">
      <TableComplaint
        :filterTable="filterTable"
        :rowsPerPage="rowsPerPage"
        :page="page"
        :maxPage="maxPage"
        @update:pagination="updatePagingProp"
      />
    </div>
  </q-card>
</template>

<style scoped></style>