From 8a472dc923e2c0f74f760100f65f1604b8978a0e Mon Sep 17 00:00:00 2001
From: oat <oatkub402@gmail.com>
Date: Thu, 8 Feb 2024 16:31:21 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=A5=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4:=20UI+API?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/registry/api.profile.ts               |   8 +-
 .../components/registry/registry.vue          | 591 ++++++++++++++++++
 src/modules/04_registryNew/stores/registry.ts |  20 +
 src/modules/04_registryNew/views/main.vue     |  11 +-
 4 files changed, 625 insertions(+), 5 deletions(-)
 create mode 100644 src/modules/04_registryNew/components/registry/registry.vue
 create mode 100644 src/modules/04_registryNew/stores/registry.ts

diff --git a/src/api/registry/api.profile.ts b/src/api/registry/api.profile.ts
index cc49aecba..ad1fdd93f 100644
--- a/src/api/registry/api.profile.ts
+++ b/src/api/registry/api.profile.ts
@@ -6,7 +6,7 @@ const profile = `${env.API_URI_PROFILE_SERVICE}/profile/`;
 const report = `${env.API_REPORT_URI}/report/profile/`;
 
 const organizationRoot = `${env.API_URI}/profile/organization/list/root`;
-
+const registryNew = `${env.API_URI}/org/profile/`;
 export default {
   /**
    * api สังกัด  ทะเบียนประวัติเงินเดือน
@@ -199,5 +199,9 @@ export default {
 
   // verify
   profileVerified: (profileId: string) => `${profile}verified/${profileId}`,
-  profileVerifiedUnlock: (profileId: string) => `${profile}not-verified/${profileId}`,
+  profileVerifiedUnlock: (profileId: string) =>
+    `${profile}not-verified/${profileId}`,
+
+  registryNew,
+  registryNewId: (id: string) => `${registryNew}${id}`,
 };
diff --git a/src/modules/04_registryNew/components/registry/registry.vue b/src/modules/04_registryNew/components/registry/registry.vue
new file mode 100644
index 000000000..50b315c9c
--- /dev/null
+++ b/src/modules/04_registryNew/components/registry/registry.vue
@@ -0,0 +1,591 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from "vue";
+import type { QInput, QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRouter } from "vue-router";
+import { useRegistryDataStore } from "@/modules/04_registryNew/stores/registry";
+import dialogHeader from "@/components/DialogHeader.vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const store = useRegistryDataStore();
+const mixin = useCounterMixin();
+const {
+  dialogRemove,
+  dialogConfirm,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const $q = useQuasar();
+
+const editId = ref<string>("");
+const filterKeyword = ref<string>("");
+const dialog = ref<boolean>(false);
+const dialogStatus = ref<"create" | "edit">("create");
+
+const prefix = ref<string>("");
+const firstName = ref<string>("");
+const lastName = ref<string>("");
+const citizenId = ref<string>("");
+const position = ref<string>("");
+const posTypeId = ref<string>("");
+const posLevelId = ref<string>("");
+const dataLevel = ref<any>();
+
+const prefixRef = ref<QInput | null>(null);
+const firstNameRef = ref<QInput | null>(null);
+const lastNameRef = ref<QInput | null>(null);
+const citizenIdRef = ref<QInput | null>(null);
+const positionRef = ref<QInput | null>(null);
+const posTypeIdRef = ref<QInput | null>(null);
+const posLevelIdRef = ref<QInput | null>(null);
+
+type SelectOptions = {
+  label: string;
+  value: string;
+}[];
+
+const prefixDropdown = ref<SelectOptions>([]);
+const posTypeIdDropdown = ref<SelectOptions>([]);
+const posLevelIdDropdown = ref<SelectOptions>([]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "citizenId",
+  "fullName",
+  "position",
+]);
+
+onMounted(async () => {
+  fetchData();
+  fetchPrefix();
+  fetchType();
+});
+
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.registryNew)
+    .then(async (res) => {
+      store.save(res.data.result);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function fetchType() {
+  showLoader();
+  await http
+    .get<{
+      result: {
+        posTypeName: string;
+        id: string;
+      }[];
+    }>(config.API.orgPosType)
+    .then(async (res) => {
+      const data = res.data.result;
+      dataLevel.value = data;
+      posTypeIdDropdown.value = data.map((v) => ({
+        label: v.posTypeName,
+        value: v.id,
+      }));
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function fetchPrefix() {
+  showLoader();
+  await http
+    .get(config.API.orgPrefix)
+    .then(async (res) => {
+      prefixDropdown.value = res.data.result.map((v: any) => ({
+        label: v.name,
+        value: v.name,
+      }));
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function addData() {
+  await http.post(config.API.registryNew, {
+    prefix: prefix.value,
+    firstName: firstName.value,
+    lastName: lastName.value,
+    citizenId: citizenId.value,
+    position: position.value,
+    posTypeId: posTypeId.value,
+    posLevelId: posLevelId.value,
+  });
+  fetchData();
+}
+
+async function editData(id: string) {
+  await http.put(config.API.registryNewId(id), {
+    prefix: prefix.value,
+    firstName: firstName.value,
+    lastName: lastName.value,
+    citizenId: citizenId.value,
+    position: position.value,
+    posTypeId: posTypeId.value,
+    posLevelId: posLevelId.value,
+  });
+  fetchData();
+}
+
+async function deleteData(id: string) {
+  await http.delete(config.API.registryNewId(id));
+  fetchData();
+}
+
+function updateSelectType(val: string) {
+  const listLevel = dataLevel.value.find((e: any) => e.id === val);
+  posLevelIdDropdown.value = listLevel.posLevels.map((e: any) => ({
+    value: e.id,
+    label: e.posLevelName,
+  }));
+}
+
+function validateForm() {
+  if (
+    [
+      prefixRef.value,
+      firstNameRef.value,
+      lastNameRef.value,
+      citizenIdRef.value,
+      positionRef.value,
+      posTypeIdRef.value,
+      posLevelIdRef.value,
+    ].every((v) => v?.validate())
+  ) {
+    onSubmit();
+  }
+}
+
+async function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      dialogStatus.value === "create" ? addData() : editData(editId.value);
+      closeDialog();
+      prefix.value = "";
+      firstName.value = "";
+      lastName.value = "";
+      citizenId.value = "";
+      position.value = "";
+      posTypeId.value = "";
+      posLevelId.value = "";
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
+function closeDialog() {
+  dialog.value = false;
+}
+watch(posTypeId, () => {
+  setTimeout(() => {
+    updateSelectType(posTypeId.value);
+  }, 200);
+});
+</script>
+
+<template>
+  <q-toolbar style="padding: 0">
+    <q-btn
+      flat
+      round
+      color="primary"
+      icon="add"
+      @click.stop="
+        () => {
+          dialogStatus = 'create';
+          dialog = true;
+          prefix = '';
+          firstName = '';
+          lastName = '';
+          citizenId = '';
+          position = '';
+          posTypeId = '';
+          posLevelId = '';
+        }
+      "
+    >
+      <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+    </q-btn>
+    <q-space />
+    <div class="row q-gutter-sm">
+      <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></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"
+      />
+    </div>
+  </q-toolbar>
+
+  <d-table
+    ref="table"
+    :columns="columns"
+    :rows="store.row"
+    :filter="filterKeyword"
+    row-key="name"
+    flat
+    bordered
+    :paging="true"
+    dense
+    class="custom-header-table"
+    :visible-columns="visibleColumns"
+  >
+    <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.id">
+          <div v-if="col.name == 'no'">
+            {{ props.rowIndex + 1 }}
+          </div>
+          <div v-else-if="col.name == 'fullName'">
+            {{ props.row.prefix }}{{ props.row.firstName }}
+            {{ props.row.lastName }}
+          </div>
+
+          <div v-else>
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="grey"
+            flat
+            dense
+            round
+            size="14px"
+            icon="more_vert"
+            @click.stop
+          >
+            <q-menu>
+              <q-list dense>
+                <q-item
+                  v-close-popup
+                  clickable
+                  @click.stop="
+                    () => {
+                      dialogStatus = 'edit';
+                      dialog = true;
+                      editId = props.row.id;
+                      prefix = props.row.prefix;
+                      firstName = props.row.firstName;
+                      lastName = props.row.lastName;
+                      citizenId = props.row.citizenId;
+                      position = props.row.position;
+                      posTypeId = props.row.posTypeId;
+                      posLevelId = props.row.posLevelId;
+                    }
+                  "
+                >
+                  <q-item-section>
+                    <div class="row items-center white">
+                      <q-icon name="o_edit" color="positive" />
+                      <span class="q-ml-sm">แก้ไข</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable>
+                  <q-item-section
+                    @click="
+                      dialogRemove(
+                        $q,
+                        async () => await deleteData(props.row.id)
+                      )
+                    "
+                    v-close-popup
+                  >
+                    <div class="row items-center white">
+                      <q-icon name="mdi-trash-can-outline" color="negative" />
+                      <span class="q-ml-sm">ลบ</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+  </d-table>
+
+  <q-dialog v-model="dialog" class="dialog" persistent>
+    <q-card style="min-width: 350px" class="bg-grey-11">
+      <form @submit.prevent="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <dialog-header
+            :tittle="dialogStatus === 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+            :close="closeDialog"
+          />
+        </q-card-section>
+
+        <q-separator color="grey-4" />
+        <q-card-section class="q-pa-none">
+          <q-select
+            ref="prefixRef"
+            v-model="prefix"
+            label="คำนำหน้าชื่อ"
+            outlined
+            dense
+            :options="prefixDropdown"
+            option-label="label"
+            option-value="value"
+            map-options
+            class="col-12 bg-white q-ma-md"
+            hide-bottom-space
+            :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+            emit-value
+          />
+          <q-input
+            ref="firstNameRef"
+            outlined
+            v-model="firstName"
+            label="ชื่อ"
+            dense
+            lazy-rules
+            borderless
+            class="col-12 bg-white q-ma-md"
+            :rules="[(val) => val.length > 0 || 'กรุณากรอกชื่อ']"
+            hide-bottom-space
+          />
+          <q-input
+            ref="lastNameRef"
+            outlined
+            v-model="lastName"
+            label="นามสกุล"
+            dense
+            lazy-rules
+            borderless
+            class="col-12 bg-white q-ma-md"
+            :rules="[(val) => val.length > 0 || 'กรุณากรอกนามสกุล']"
+            hide-bottom-space
+          />
+          <q-input
+            ref="citizenIdRef"
+            outlined
+            v-model="citizenId"
+            label="เลขประจำตัวประชาชน"
+            dense
+            lazy-rules
+            borderless
+            class="col-12 bg-white q-ma-md"
+            :rules="[(val) => val.length > 0 || 'กรุณากรอกเลขประจำตัวประชาชน']"
+            hide-bottom-space
+          />
+          <q-input
+            ref="positionRef"
+            outlined
+            v-model="position"
+            label="ตำแหน่ง"
+            dense
+            lazy-rules
+            borderless
+            class="col-12 bg-white q-ma-md"
+            :rules="[(val) => val.length > 0 || 'กรุณากรอกตำแหน่ง']"
+            hide-bottom-space
+          />
+          <q-select
+            ref="posTypeIdRef"
+            v-model="posTypeId"
+            label="ประเภทตำแหน่ง"
+            outlined
+            :options="posTypeIdDropdown"
+            dense
+            class="col-12 bg-white q-ma-md"
+            options-cover
+            map-options
+            emit-value
+            option-label="label"
+            option-value="value"
+            hide-bottom-space
+            :rules="[(val) => !!val || 'กรุณาเลือกประเภทตำแหน่ง']"
+          />
+          <q-select
+            ref="posLevelIdRef"
+            v-model="posLevelId"
+            label="ระดับตำแหน่ง"
+            :options="posLevelIdDropdown"
+            outlined
+            dense
+            @update:model-value="updateSelectType"
+            class="col-12 bg-white q-ma-md"
+            map-options
+            emit-value
+            option-label="label"
+            option-value="value"
+            options-cover
+            hide-bottom-space
+            :rules="[(val) => !!val || 'กรุณาเลือกระดับตำแหน่ง']"
+          />
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped lang="scss">
+.border_custom {
+  border-radius: 6px !important;
+  border: 1px solid #e1e1e1;
+}
+$toggle-background-color-on: #06884d;
+$toggle-background-color-off: darkgray;
+$toggle-control-color: white;
+$toggle-width: 40px;
+$toggle-height: 25px;
+$toggle-gutter: 3px;
+$toggle-radius: 50%;
+$toggle-control-speed: 0.15s;
+$toggle-control-ease: ease-in;
+
+// These are our computed variables
+// change at your own risk.
+$toggle-radius: $toggle-height / 2;
+$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
+
+.toggle-control {
+  display: block;
+  position: relative;
+  padding-left: $toggle-width;
+  margin-bottom: 12px;
+  cursor: pointer;
+  font-size: 22px;
+  user-select: none;
+
+  input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  input:checked ~ .control {
+    background-color: $toggle-background-color-on;
+
+    &:after {
+      left: $toggle-width - $toggle-control-size - $toggle-gutter;
+    }
+  }
+
+  .control {
+    position: absolute;
+    top: -7px;
+    left: -15px;
+    height: $toggle-height;
+    width: $toggle-width;
+    border-radius: $toggle-radius;
+    background-color: $toggle-background-color-off;
+    transition: background-color $toggle-control-speed $toggle-control-ease;
+
+    &:after {
+      content: "";
+      position: absolute;
+      left: $toggle-gutter;
+      top: $toggle-gutter;
+      width: $toggle-control-size;
+      height: $toggle-control-size;
+      border-radius: $toggle-radius;
+      background: $toggle-control-color;
+      transition: left $toggle-control-speed $toggle-control-ease;
+    }
+  }
+}
+</style>
diff --git a/src/modules/04_registryNew/stores/registry.ts b/src/modules/04_registryNew/stores/registry.ts
new file mode 100644
index 000000000..c76b6d1ee
--- /dev/null
+++ b/src/modules/04_registryNew/stores/registry.ts
@@ -0,0 +1,20 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+
+// const { date2Thai } = useCounterMixin();
+
+export const useRegistryDataStore = defineStore("RegistryData", () => {
+  const row = ref<[]>([]);
+
+  function save(data: any) {
+    const list = data.map((e: any) => ({
+      ...e,
+    })) satisfies [];
+    row.value = list;
+  }
+  return {
+    save,
+    row,
+  };
+});
diff --git a/src/modules/04_registryNew/views/main.vue b/src/modules/04_registryNew/views/main.vue
index db4dfb1ec..22bd55098 100644
--- a/src/modules/04_registryNew/views/main.vue
+++ b/src/modules/04_registryNew/views/main.vue
@@ -1,7 +1,12 @@
+<script setup lang="ts">
+import Registry from "@/modules/04_registryNew/components/registry/registry.vue";
+</script>
 <template>
-  ทะเบียนประวัติ (ใหม่)
+  <div class="toptitle text-dark col-12 row items-center">
+    ข้อมูลทะเบียนประวัติ
+  </div>
+
+  <q-card flat bordered class="q-pa-md"> <Registry /> </q-card>
 </template>
 
-<script setup lang="ts"></script>
-
 <style scoped></style>