จัดการผู้ใช้งาน => ปรัับ ui เพิ่มผู้ใช้งาน

src/api/02_organizational/api.organization.ts

@@ -88,5 +88,7 @@ export default {
 
   orgProfileById: (id: string, type: string) => `${orgProfile}${type}/${id}`,
 
-  orgDeceasedProfile:`${orgPos}/profile/search`
+  orgDeceasedProfile: `${orgPos}/profile/search`,
+
+  orgProfileListKeycloak: () => `${orgProfile}/search-personal-no-keycloak`,
 };

src/modules/02_users/components/Users/DialogAddUser.vue

@@ -4,10 +4,16 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import type { QTableProps } from "quasar";
+import type {
+  DataOption,
+  Pagination,
+} from "@/modules/02_users/interface/index/Main";
 import type {
   FormUser,
   Roles,
 } from "@/modules/02_users/interface/request/Main";
+import type { Profile } from "@/modules/02_users/interface/response/Main";
 
 /** importComponents*/
 import DialogHeader from "@/components/DialogHeader.vue";
@@ -31,9 +37,80 @@ const props = defineProps({
   },
 });
 
+/** Table*/
+const rows = ref<Profile[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "firstName",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "firstName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastName",
+    align: "left",
+    label: "นามสกุล",
+    sortable: true,
+    field: "lastName",
+    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: "positionTpye",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "positionTpye",
+    format: (val, row) => {
+      return (
+        `${row.positionTypeName ? row.positionTypeName : ""}` +
+        (row.positionLevelName ? `(${row.positionLevelName})` : "")
+      );
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const selected = ref<Profile[]>([]);
+const searchType = ref<string>("citizenId");
+const keyword = ref<string>("");
+const searchTypeOption = ref<DataOption[]>([
+  { id: "citizenId", name: "เลขประจำตัวประชาชน" },
+  { id: "firstname", name: "ชื่อ" },
+  { id: "lastname", name: "นามสกุล" },
+]);
+const query = reactive({
+  page: 1,
+  pageSize: 10,
+});
+const total = ref<number>(0);
+const maxPage = ref<number>(1);
+
 const isPwd = ref<boolean>(true);
 const roles = ref<Roles[]>([]);
 const formData = reactive<FormUser>({
+  profileId: "",
   username: "",
   password: "",
   firstName: "",
@@ -41,9 +118,34 @@ const formData = reactive<FormUser>({
   email: "",
   roles: [],
 });
-const roleOptionsMain = ref([]);
 const roleOptions = ref([]);
 
+function fetchListUser() {
+  showLoader();
+  const body = {
+    fieldName: searchType.value ? searchType.value : "",
+    keyword: keyword.value ? keyword.value : "",
+  };
+  http
+    .post(
+      config.API.orgProfileListKeycloak() +
+        `?page=${query.page}&pageSize=${query.pageSize}`,
+      body
+    )
+    .then((res) => {
+      const data = res.data.result;
+      maxPage.value = Math.ceil(data.total / query.pageSize);
+      total.value = data.total;
+      rows.value = data.data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /**
  * function fetch ข้อมูลผู้ใช้งาน
  * @param id ผู้ใช้งาน
@@ -70,7 +172,6 @@ function fetchUserDetail(id: string) {
 
 /** function fetc รายการ role*/
 function fetchlistRole() {
-  showLoader();
   http
     .get(config.API.managementRole)
     .then((res) => {
@@ -84,9 +185,6 @@ function fetchlistRole() {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
@@ -121,14 +219,36 @@ function onSubmit() {
 /** function ปิด Dialog */
 function closeDialog() {
   modal.value = false;
+  formData.profileId = "";
   formData.username = "";
   formData.password = "";
   formData.firstName = "";
   formData.lastName = "";
   formData.email = "";
   roles.value = [];
+  searchType.value = "citizenId";
+  keyword.value = "";
+  selected.value = [];
+  query.page = 1;
+  query.pageSize = 10;
 }
 
+/**
+ * function อัปเดท paging
+ * @param initialPagination ข้อมูล pagination
+ */
+async function updatePagination(initialPagination: Pagination) {
+  query.page = 1;
+  query.pageSize = initialPagination.rowsPerPage;
+}
+
+watch(
+  () => query.pageSize,
+  () => {
+    fetchListUser();
+  }
+);
+
 watch(
   () => modal.value,
   () => {
@@ -136,20 +256,147 @@ watch(
       fetchUserDetail(userId.value);
     }
     modal.value && fetchlistRole();
+    modal.value && fetchListUser();
+  }
+);
+
+watch(
+  () => selected.value,
+  () => {
+    if (selected.value?.length !== 0) {
+      const data = selected.value[0];
+      formData.profileId = data.id;
+      formData.firstName = data.firstName;
+      formData.lastName = data.lastName;
+      formData.email = data.email;
+    }
   }
 );
 </script>
 
 <template>
-  <q-dialog v-model="modal" persistent>
+  <q-dialog v-model="modal" persistent full-width>
-    <q-card class="col-12" style="width: 25%">
+    <q-card>
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader
           :tittle="isStatusEdit ? 'แก้ไขผู้ใช้งาน' : 'เพิ่มผู้ใช้งาน'"
           :close="closeDialog"
         />
         <q-separator />
-        <q-card-section>
+
+        <q-card-section :horizontal="$q.screen.gt.xs">
+          <!-- รายชื่อ -->
+          <q-card-section class="col-md-8 col-xs-12">
+            <div class="row q-col-gutter-sm">
+              <div class="col-12 col-sm-6 col-md-3">
+                <q-select
+                  label="ค้นหาจาก"
+                  v-model="searchType"
+                  :options="searchTypeOption"
+                  outlined
+                  emit-value
+                  dense
+                  emit-option
+                  option-label="name"
+                  option-value="id"
+                  map-options
+                />
+              </div>
+              <div class="col-12 col-sm-6 col-md-9">
+                <q-input
+                  ref="searchRef"
+                  v-model="keyword"
+                  outlined
+                  clearable
+                  hide-bottom-space
+                  dense
+                  label="คำค้น"
+                >
+                  <template v-slot:after>
+                    <q-btn
+                      color="primary"
+                      icon="search"
+                      label="ค้นหา"
+                      class="full-width q-py-sm q-px-md"
+                      @click="(query.page = 1), fetchListUser()"
+                    >
+                    </q-btn>
+                  </template>
+                </q-input>
+              </div>
+            </div>
+
+            <div class="col-12 q-pt-sm">
+              <d-table
+                ref="table"
+                :columns="columns"
+                :rows="rows"
+                row-key="id"
+                flat
+                bordered
+                :paging="true"
+                dense
+                :rows-per-page-options="[10, 25, 50, 100]"
+                selection="single"
+                v-model:selected="selected"
+                @update:pagination="updatePagination"
+              >
+                <template v-slot:header="props">
+                  <q-tr :props="props">
+                    <q-th auto-width></q-th>
+                    <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">
+                    <q-td>
+                      <q-checkbox
+                        keep-color
+                        color="primary"
+                        dense
+                        v-model="props.selected"
+                      />
+                    </q-td>
+                    <q-td
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <div>
+                        {{ col.value ? col.value : "-" }}
+                      </div>
+                    </q-td>
+                  </q-tr>
+                </template>
+
+                <template v-slot:pagination="scope">
+                  ทั้งหมด {{ total }} รายการ
+                  <q-pagination
+                    v-model="query.page"
+                    active-color="primary"
+                    color="dark"
+                    :max="Number(maxPage)"
+                    size="sm"
+                    boundary-links
+                    direction-links
+                    :max-pages="5"
+                    @update:model-value="fetchListUser"
+                  ></q-pagination>
+                </template>
+              </d-table>
+            </div>
+          </q-card-section>
+          <q-separator vertical />
+
+          <!-- input -->
+          <q-card-section class="col-md-4 col-xs-12">
             <div class="row q-col-gutter-md">
               <div class="col-12">
                 <q-input
@@ -196,6 +443,7 @@ watch(
                   hide-bottom-space
                   class="inputgreen"
                   label="ชื่อ"
+                  readonly
                 >
                 </q-input>
               </div>
@@ -209,6 +457,7 @@ watch(
                   hide-bottom-space
                   class="inputgreen"
                   label="นามสกุล"
+                  readonly
                 >
                 </q-input>
               </div>
@@ -248,6 +497,8 @@ watch(
               </div>
             </div>
           </q-card-section>
+        </q-card-section>
+
         <q-separator />
         <q-card-actions align="right">
           <q-btn label="บันทึก" color="secondary" type="submit"

src/modules/02_users/interface/request/Main.ts

@@ -1,4 +1,5 @@
 interface FormUser {
+  profileId: string;
   username: string;
   password: string | undefined;
   firstName: string;

src/modules/02_users/interface/response/Main.ts

@@ -108,4 +108,31 @@ interface SysList {
   children: SysList[];
 }
 
-export type { Users, Roles, NodeTree, PosMaster, Position, SysList };
+interface Profile {
+  birthDate: string;
+  citizenId: string;
+  educationDegree: string;
+  email: string;
+  firstName: string;
+  id: string;
+  lastName: string;
+  name: string;
+  organization: string;
+  phone: string;
+  posLevelId: string;
+  posLevelName: string;
+  posMasterNo: number;
+  posNo: string;
+  posTypeId: string;
+  posTypeName: string;
+  position: string;
+  positionLevel: string;
+  positionLevelName: string;
+  positionType: string;
+  positionTypeName: string;
+  prefix: string;
+  rank: string;
+  salary: number;
+}
+
+export type { Users, Roles, NodeTree, PosMaster, Position, SysList, Profile };