hrms-mgt/src/modules/06_retirement/components/ListRetirement/AddList.vue

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

const $q = useQuasar(); //ใช้ noti quasar
const mixin = useCounterMixin();
const { messageError, success } = mixin;

const modal = ref<boolean>(false);

const columns = ref<any["columns"]>([
  {
    name: "index",
    required: true,
    label: "ลำดับ",
    field: "index",
    align: "left",
  },
  {
    name: "fullname",
    required: true,
    label: "ชื่อ-สกุล",
    field: "fullname",
    align: "left",
  },
  {
    name: "position",
    required: true,
    label: "ตำแหน่งในสายงาน",
    field: "position",
    align: "left",
  },
  {
    name: "level",
    required: true,
    label: "ระดับ",
    field: "level",
    align: "left",
  },
  {
    name: "affiliation",
    required: true,
    label: "สังกัด",
    field: "affiliation",
    align: "left",
  },
  {
    name: "funtion",
    required: true,
    label: "",
    field: "funtion",
    align: "left",
  },
]);
const rows = ref<any>([
  {
    fullname: "นายใจดี  ยอดใจ",
    position: "นักวิชาการพัสดุ",
    level: "ปฎิบัติการ",
    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
  },
  {
    fullname: "นายจักกริน  บัณฑิต",
    position: "นักวิชาการพัสดุ",
    level: "ปฎิบัติการ",
    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
  },
  {
    fullname: "นายจักกริน  บัณฑิต",
    position: "นักวิชาการพัสดุ",
    level: "ปฎิบัติการ",
    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
  },
  {
    fullname: "นายจักกริน  บัณฑิต",
    position: "นักวิชาการพัสดุ",
    level: "ปฎิบัติการ",
    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
  },
  {
    fullname: "นายจักกริน  บัณฑิต",
    position: "นักวิชาการพัสดุ",
    level: "ปฎิบัติการ",
    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
  },
  {
    fullname: "นายจักกริน  บัณฑิต",
    position: "นักวิชาการพัสดุ",
    level: "ปฎิบัติการ",
    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
  },
  {
    fullname: "นายจักกริน  บัณฑิต",
    position: "นักวิชาการพัสดุ",
    level: "ปฎิบัติการ",
    affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
  },
]);
const filter = ref<string>("");
watch(modal, () => {
  if (modal.value === true) {
    fecthProfile();
  }
});
const fecthProfile = async () => {
  await http
    .get(config.API.getprofileRetire("1234"))
    .then((res) => {
      console.log(res);
    })
    .catch((e) => {
      messageError($q, e);
    });
};
const clickAdd = () => {
  $q.dialog({
    title: "ยืนยันการเพิ่มข้อมูล",
    message: "ต้องการเพิ่มข้อมูลนี้ใช่หรือไม่?",
    cancel: {
      flat: true,
      color: "negative",
    },
    persistent: true,
  })
    .onOk(async () => {
      console.log("เพิ่มข้อมูล");
      await http
        .put(config.API.profileRetire("123"))
        .then(() => {
          success($q, "เพิ่มข้อมูลสำเร็จ");
        })
        .catch((e) => {
          messageError($q, e);
        })
        .finally(() => {
          fecthProfile();
        });
    })
    .onCancel(() => {})
    .onDismiss(() => {});
};
const paging = ref<boolean>(true);
const pagination = ref({
  sortBy: "fullname",
  descending: true,
  page: 1,
  rowsPerPage: 10,
});
const paginationLabel = (start: number, end: number, total: number) => {
  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
  else return start + "-" + end + " ใน " + total;
};
</script>

<template>
  <q-btn
    flat
    round
    class="text-teal-5"
    icon="mdi-plus"
    size="md"
    @click="modal = true"
  >
    <q-tooltip>เพิ่มรายชื่อ</q-tooltip></q-btn
  >

  <q-dialog v-model="modal">
    <q-card style="width: 850px; max-width: 80vw" class="q-px-sm q-pb-md">
      <q-toolbar class="q-py-md">
        <q-toolbar-title class="header-text text-weight-bolder"
          >เพิ่มรายชื่อ
        </q-toolbar-title>
        <q-btn
          icon="close"
          unelevated
          round
          dense
          @click="modal = false"
          style="color: #ff8080; background-color: #ffdede"
        />
      </q-toolbar>
      <q-separator />

      <div class="q-pa-md">
        <q-toolbar style="padding: 0">
          <q-input
            borderless
            outlined
            dense
            debounce="300"
            v-model="filter"
            placeholder="ค้นหา"
            style="width: 850px; max-width: auto"
          >
            <template v-slot:append>
              <q-icon name="search" />
            </template>
          </q-input>
        </q-toolbar>
        <q-table
          flat
          bordered
          dense
          :rows="rows"
          :columns="columns"
          row-key="name"
          class="custom-header-table"
          :filter="filter"
          :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"
                ><div>
                  <span class="row text-black">{{ col.label }}</span>
                </div>
              </q-th>
            </q-tr>
          </template>
          <template v-slot:body="props">
            <q-tr :props="props" class="cursor-pointer">
              <q-td>{{ props.rowIndex + 1 }}</q-td>
              <q-td key="fullname" :props="props">
                {{ props.row.fullname }}
              </q-td>
              <q-td key="position" :props="props">
                {{ props.row.position }}
              </q-td>
              <q-td key="level" :props="props">{{ props.row.level }}</q-td>
              <q-td key="affiliation" :props="props">
                {{ props.row.affiliation }}
              </q-td>

              <q-td>
                <q-btn
                  outline
                  label="เพิ่ม"
                  class="text-teal-5"
                  @click="clickAdd"
                />
              </q-td>
            </q-tr>
          </template>
          <template v-slot:pagination="scope">
            <q-pagination
              v-model="pagination.page"
              color="primary"
              :max="scope.pagesNumber"
              :max-pages="5"
              size="sm"
              boundary-links
              direction-links
            ></q-pagination>
          </template>
        </q-table>
      </div>
    </q-card>
  </q-dialog>
</template>

<style lang="scss">
.custom-header-table {
  max-height: 64vh;

  .q-table tr:nth-child(odd) td {
    background: white;
  }

  .q-table tr:nth-child(even) td {
    background: #f8f8f8;
  }

  .q-table thead tr {
    background: #ecebeb;
  }

  .q-table thead tr th {
    position: sticky;
    z-index: 1;
  }

  /* this will be the loading indicator */
  .q-table thead tr:last-child th {
    /* height of all previous header rows */
    top: 48px;
  }

  .q-table thead tr:first-child th {
    top: 0;
  }
}
</style>