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

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

@@ -20,10 +20,10 @@ export default {
   /** position*/
   orgPosPosition: `${orgPos}/position`,
   orgPosPositionById: (id: string) => `${orgPos}/position/${id}`,
-  orgPosPositionExecutive : () => `${orgPos}/position/executive`,
+  orgPosPositionExecutive: () => `${orgPos}/position/executive`,
   orgPosExecutive: `${orgPos}/executive`,
   orgPosType: `${orgPos}/type`,
-  orgPosTypeId:  (id: string) => `${orgPos}/type/${id}`,
+  orgPosTypeId: (id: string) => `${orgPos}/type/${id}`,
   orgPosLevel: `${orgPos}/level`,
   orgPosMaster: `${orgPos}/master`,
   orgPosMasterById: (id: string) => `${orgPos}/master/${id}`,
@@ -86,7 +86,9 @@ export default {
   orgProfileEmp: `${orgEmployeePos}/profile`,
   orgSearchProfileEmp: `${orgProfile}-employee/search`,
 
-  orgProfileById:(id:string,type:string)=>`${orgProfile}${type}/${id}`,
+  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,118 +256,249 @@ 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>
+
-          <div class="row q-col-gutter-md">
+        <q-card-section :horizontal="$q.screen.gt.xs">
-            <div class="col-12">
+          <!-- รายชื่อ -->
-              <q-input
+          <q-card-section class="col-md-8 col-xs-12">
-                :readonly="isStatusEdit"
+            <div class="row q-col-gutter-sm">
-                v-model="formData.username"
+              <div class="col-12 col-sm-6 col-md-3">
-                outlined
+                <q-select
-                dense
+                  label="ค้นหาจาก"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผู้ใช้งาน'}`,]"
+                  v-model="searchType"
-                lazy-rules
+                  :options="searchTypeOption"
-                hide-bottom-space
+                  outlined
-                class="inputgreen"
+                  emit-value
-                label="ชื่อผู้ใช้งาน"
+                  dense
-              >
+                  emit-option
-              </q-input>
+                  option-label="name"
-            </div>
+                  option-value="id"
-            <div class="col-12" v-if="!isStatusEdit">
+                  map-options
-              <q-input
+                />
-                v-model="formData.password"
+              </div>
-                outlined
+              <div class="col-12 col-sm-6 col-md-9">
-                dense
+                <q-input
-                :type="isPwd ? 'password' : 'text'"
+                  ref="searchRef"
-                :rules="[(val:string) => !!val || `${'กรุณากรอกรหัสผู้ใช้งาน'}`,]"
+                  v-model="keyword"
-                lazy-rules
+                  outlined
-                label="รหัสผู้ใช้งาน"
+                  clearable
-                hide-bottom-space
+                  hide-bottom-space
-                class="inputgreen"
+                  dense
-              >
+                  label="คำค้น"
-                <template v-slot:append>
+                >
-                  <q-icon
+                  <template v-slot:after>
-                    :name="isPwd ? 'visibility_off' : 'visibility'"
+                    <q-btn
-                    class="cursor-pointer"
+                      color="primary"
-                    @click="isPwd = !isPwd"
+                      icon="search"
-                  />
+                      label="ค้นหา"
-                </template>
+                      class="full-width q-py-sm q-px-md"
-              </q-input>
+                      @click="(query.page = 1), fetchListUser()"
-            </div>
+                    >
-            <div class="col-12">
+                    </q-btn>
-              <q-input
+                  </template>
-                v-model="formData.firstName"
+                </q-input>
-                outlined
+              </div>
-                dense
-                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อ'}`,]"
-                lazy-rules
-                hide-bottom-space
-                class="inputgreen"
-                label="ชื่อ"
-              >
-              </q-input>
-            </div>
-            <div class="col-12">
-              <q-input
-                v-model="formData.lastName"
-                outlined
-                dense
-                :rules="[(val:string) => !!val || `${'กรุณากรอกนามสกุล'}`,]"
-                lazy-rules
-                hide-bottom-space
-                class="inputgreen"
-                label="นามสกุล"
-              >
-              </q-input>
             </div>
 
-            <div class="col-12">
+            <div class="col-12 q-pt-sm">
-              <q-input
+              <d-table
-                v-model="formData.email"
+                ref="table"
-                outlined
+                :columns="columns"
+                :rows="rows"
+                row-key="id"
+                flat
+                bordered
+                :paging="true"
                 dense
-                :rules="[(val:string) => !!val || `${'กรุณากรอก Email'}`,]"
+                :rows-per-page-options="[10, 25, 50, 100]"
-                lazy-rules
+                selection="single"
-                hide-bottom-space
+                v-model:selected="selected"
-                class="inputgreen"
+                @update:pagination="updatePagination"
-                label="Email"
-                type="email"
               >
-              </q-input>
+                <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>
-            <div class="col-12" v-if="!isStatusEdit">
+          </q-card-section>
-              <q-select
+          <q-separator vertical />
-                v-model="roles"
+
-                outlined
+          <!-- input -->
-                label="role"
+          <q-card-section class="col-md-4 col-xs-12">
-                dense
+            <div class="row q-col-gutter-md">
-                option-label="name"
+              <div class="col-12">
-                option-value="id"
+                <q-input
-                :options="roleOptions"
+                  :readonly="isStatusEdit"
-                class="inputgreen"
+                  v-model="formData.username"
-                map-options
+                  outlined
-                hide-bottom-space
+                  dense
-                lazy-rules
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผู้ใช้งาน'}`,]"
-                use-chips
+                  lazy-rules
-                multiple
+                  hide-bottom-space
-                use-input
+                  class="inputgreen"
-                :rules="[(val:string) => !!val && val.length > 0|| `${'กรุณาเลือก Role'}`,]"
+                  label="ชื่อผู้ใช้งาน"
-              />
+                >
+                </q-input>
+              </div>
+              <div class="col-12" v-if="!isStatusEdit">
+                <q-input
+                  v-model="formData.password"
+                  outlined
+                  dense
+                  :type="isPwd ? 'password' : 'text'"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกรหัสผู้ใช้งาน'}`,]"
+                  lazy-rules
+                  label="รหัสผู้ใช้งาน"
+                  hide-bottom-space
+                  class="inputgreen"
+                >
+                  <template v-slot:append>
+                    <q-icon
+                      :name="isPwd ? 'visibility_off' : 'visibility'"
+                      class="cursor-pointer"
+                      @click="isPwd = !isPwd"
+                    />
+                  </template>
+                </q-input>
+              </div>
+              <div class="col-12">
+                <q-input
+                  v-model="formData.firstName"
+                  outlined
+                  dense
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อ'}`,]"
+                  lazy-rules
+                  hide-bottom-space
+                  class="inputgreen"
+                  label="ชื่อ"
+                  readonly
+                >
+                </q-input>
+              </div>
+              <div class="col-12">
+                <q-input
+                  v-model="formData.lastName"
+                  outlined
+                  dense
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกนามสกุล'}`,]"
+                  lazy-rules
+                  hide-bottom-space
+                  class="inputgreen"
+                  label="นามสกุล"
+                  readonly
+                >
+                </q-input>
+              </div>
+
+              <div class="col-12">
+                <q-input
+                  v-model="formData.email"
+                  outlined
+                  dense
+                  :rules="[(val:string) => !!val || `${'กรุณากรอก Email'}`,]"
+                  lazy-rules
+                  hide-bottom-space
+                  class="inputgreen"
+                  label="Email"
+                  type="email"
+                >
+                </q-input>
+              </div>
+              <div class="col-12" v-if="!isStatusEdit">
+                <q-select
+                  v-model="roles"
+                  outlined
+                  label="role"
+                  dense
+                  option-label="name"
+                  option-value="id"
+                  :options="roleOptions"
+                  class="inputgreen"
+                  map-options
+                  hide-bottom-space
+                  lazy-rules
+                  use-chips
+                  multiple
+                  use-input
+                  :rules="[(val:string) => !!val && val.length > 0|| `${'กรุณาเลือก Role'}`,]"
+                />
+              </div>
             </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 };