ปรับฟอร์มเพิ่มประธาน/กรรมการ รอ API list คนอันใหม่

src/api/05_placement/api.probation.ts

@@ -87,4 +87,6 @@ export default {
 
   appointMain,
   appointMainList:(id:string)=>`${appointMain}/list/${id}`,
+
+  orgProfileDirector:`${orgProfile}/profile/commander-director`
 };

src/modules/05_placement/components/probation/DialogOrder/DialogSendToCommand.vue

@@ -16,6 +16,17 @@ const selected = ref<AppointMainRows[]>([]);
 const mixin = useCounterMixin();
 const { dialogConfirm } = mixin;
 
+const dataMapToSend = computed(() => {
+  return selected.value.map((i: any) => ({
+    id: i.id,
+    profileId: null,
+    prefix: null,
+    firstName: null,
+    lastName: null,
+    citizenId: null,
+  }));
+});
+
 const filterKeyword = defineModel<string>("filterKeyword", { required: true });
 const rows = defineModel<AppointMainRows[]>("rows", { required: true });
 /** props*/
@@ -236,7 +247,7 @@ watchEffect(() => {
   <DialogCreateCommand
     v-model:modal="modalCommand"
     :command-type-code="'C-PM-10'"
-    :persons="selected"
+    :persons="selected ? dataMapToSend:[]"
-    :not-person="true"
+    :not-person="false"
   />
 </template>

src/modules/05_placement/components/probation/FormAppoint/FormAppoint.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useQuasar, type QTableProps } from "quasar";
-import { ref, reactive, watch, onMounted } from "vue";
+import { ref, reactive, watch, onMounted, computed } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
 import http from "@/plugins/http";
@@ -39,6 +39,7 @@ const isDirector = ref<boolean>(false);
 
 const topic = ref<string>("");
 const status = ref<string>("");
+const filterKeyword = ref<string>("");
 
 const rows = ref<PersonsAppointData[]>([]);
 const modal = ref<boolean>(false);
@@ -54,14 +55,21 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
+const countRowLength = computed(() => {
+  return selected.value.length + rows.value.length == 4
+    ? true
+    : selected.value.length == 3
+    ? true
+    : false;
+});
+
 const optionsTypeMain = ref<OpfillterTypeSt[]>([]);
 const optionsType = ref<OpfillterTypeSt[]>([
   { id: "chairman", value: "ประธาน" },
   { id: "committee", value: "กรรมการ" },
 ]);
 
-const commanderRows = ref<MemBerType[]>([]);
+const rowsDirector = ref<MemBerType[]>([]);
-const chairmanRows = ref<MemBerType[]>([]);
 
 const visibleColumns = ref<string[]>([
   "no",
@@ -192,6 +200,7 @@ function onAdd() {
 function close() {
   modal.value = false;
   member.value = "";
+  selected.value = [];
 }
 
 function updatePagination(newPagination: any) {
@@ -218,36 +227,23 @@ function onAddPerson() {
   close();
 }
 
-function getPerson() {
+async function getPerson() {
   showLoader();
   http
-    .get(config.API.orgProfilePlacement(profileId.value))
+    .post(config.API.orgProfileDirector + `?keyword=${filterKeyword.value}`, {
+      isDirector: isDirector.value,
+    })
     .then((res) => {
       const data = res.data.result;
-      commanderRows.value = data.commander.map((item: any) => ({
+      rowsDirector.value = data;
-        id: item.id,
+      rowsDirector.value = rowsDirector.value.filter(
-        prefix: item.prefix,
+        (item: MemBerType) =>
-        firstName: item.firstName,
+          !rows.value.some((i: PersonsAppointData) => i.profileId == item.id)
-        lastName: item.lastName,
+      );
-        citizenId: item.citizenId,
+      totalList.value = Math.ceil(
-        posLevel: item.posLevel,
+        res.data.result.total / pagination.value.rowsPerPage
-        posType: item.posType,
+      );
-        position: item.position,
+      total.value = data.total;
-        isDirector: item.isDirector,
-      }));
-
-      chairmanRows.value = data.chairman.map((item: any) => ({
-        id: item.id,
-        prefix: item.prefix,
-        firstName: item.firstName,
-        lastName: item.lastName,
-        citizenId: item.citizenId,
-        posLevel: item.posLevel,
-        posType: item.posType,
-        position: item.position,
-        isDirector: item.isDirector,
-      }));
-
       hideLoader();
     })
     .catch((e) => {
@@ -257,20 +253,6 @@ function getPerson() {
     .finally(() => {});
 }
 
-function onChangeMember() {
-  selected.value = [];
-
-  commanderRows.value = commanderRows.value.filter(
-    (item: MemBerType) =>
-      !rows.value.some((i: PersonsAppointData) => i.profileId == item.id)
-  );
-
-  chairmanRows.value = chairmanRows.value.filter(
-    (item: MemBerType) =>
-      !rows.value.some((i: PersonsAppointData) => i.profileId == item.id)
-  );
-}
-
 function onDelete(id: string) {
   changeFormData();
   rows.value = rows.value.filter((row) => row.profileId !== id);
@@ -359,25 +341,43 @@ async function getData() {
 }
 
 function onDirector() {
+  getPerson();
+  selected.value = [];
 }
 
+function resetFilter() {
+  filterKeyword.value = "";
+  getPerson();
+}
 watch(
   () => modal.value,
   () => {
     if (modal.value) {
       optionsTypeMain.value = optionsType.value;
       const optionData = optionsType.value;
+      const committeeCount = rows.value.filter(
+        (i) => i.role === "committee"
+      ).length;
+
       optionsTypeMain.value = optionData.filter(
         (item: OpfillterTypeSt) =>
           !rows.value.some(
             (i) => i.role === "chairman" && item.id === "chairman"
-          )
+          ) && !(item.id === "committee" && committeeCount >= 3)
       );
+
       getPerson();
     }
   }
 );
 
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    await getPerson();
+  }
+);
+
 onMounted(async () => {
   await getData();
 });
@@ -433,7 +433,7 @@ onMounted(async () => {
             >
               ประธาน/กรรมการ
               <q-btn
-                v-if="!checkRoutePermisson"
+                v-if="!checkRoutePermisson && rows.length !== 4"
                 size="12px"
                 flat
                 round
@@ -529,24 +529,8 @@ onMounted(async () => {
       <q-form greedy @submit.prevent @validation-success="onAddPerson">
         <DialogHeader tittle="เพิ่มประธาน/กรรมการ" :close="close" />
         <q-separator />
-
         <q-card-section>
           <div class="row q-col-gutter-sm">
-            <div class="col-4">
-              <q-select
-                v-model="member"
-                outlined
-                dense
-                label="ประธาน/กรรมการ"
-                :options="optionsTypeMain"
-                option-value="id"
-                option-label="value"
-                map-options
-                emit-value
-                @update:model-value="onChangeMember()"
-              >
-              </q-select>
-            </div>
             <q-checkbox
               keep-color
               v-model="isDirector"
@@ -556,17 +540,68 @@ onMounted(async () => {
             >
               <q-tooltip>แสดงเฉพาะผู้อำนวยการ/หัวหน้า </q-tooltip>
             </q-checkbox>
+            <div class="col-12">
+              <div class="row">
+                <q-select
+                  v-model="member"
+                  outlined
+                  dense
+                  label="ประธาน/กรรมการ"
+                  :options="optionsTypeMain"
+                  option-value="id"
+                  option-label="value"
+                  map-options
+                  emit-value
+                  @update:model-value="selected = []"
+                  style="width: 300px"
+                >
+                </q-select>
+                <q-space />
+                <q-input
+                  class="col-xs-12 col-sm-3 col-md-2 q-mr-sm"
+                  standout
+                  dense
+                  v-model="filterKeyword"
+                  ref="filterRef"
+                  outlined
+                  debounce="300"
+                  placeholder="ค้นหา"
+                  @keydown.enter.prevent="getPerson()"
+                >
+                  <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
+                  v-model="visibleColumnsMember"
+                  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"
+                  class="col-xs-12 col-sm-3 col-md-2"
+                />
+              </div>
+            </div>
+
             <div class="col-12">
               <d-table
                 ref="table"
                 :columns="columnsMember"
-                :rows="
+                :rows="rowsDirector"
-                  member == 'committee'
-                    ? commanderRows
-                    : member == 'chairman'
-                    ? chairmanRows
-                    : []
-                "
                 row-key="id"
                 flat
                 :visible-columns="visibleColumnsMember"
@@ -575,23 +610,33 @@ onMounted(async () => {
                 dense
                 :selection="member == 'chairman' ? 'single' : 'multiple'"
                 v-model:selected="selected"
-                :rows-per-page-options="[10, 25, 50, 100]"
+                :rows-per-page-options="[1, 25, 50, 100]"
+                @update:pagination="updatePagination"
               >
-                <template v-slot:header-selection="scope">
+                <template v-slot:pagination="scope">
-                  <q-checkbox
+                  ทั้งหมด {{ total }} รายการ
-                    keep-color
+                  <q-pagination
-                    color="primary"
+                    v-model="pagination.page"
-                    dense
+                    active-color="primary"
-                    :disable="!member"
+                    color="dark"
-                    v-model="scope.selected"
+                    :max="Number(totalList)"
-                  />
+                    size="sm"
+                    boundary-links
+                    direction-links
+                    :max-pages="5"
+                    @update:model-value="getPerson()"
+                  ></q-pagination>
                 </template>
+
+                <template v-slot:header-selection="scope"> </template>
                 <template v-slot:body="props">
                   <q-tr :props="props">
                     <td class="text-center">
                       <q-checkbox
                         keep-color
-                        :disable="!member"
+                        :disable="
+                          !member || (props.selected == false && countRowLength)
+                        "
                         color="primary"
                         dense
                         v-model="props.selected"
@@ -609,6 +654,7 @@ onMounted(async () => {
                           1
                         }}
                       </div>
+
                       <div v-else-if="col.name == 'name'">
                         {{
                           props.row.firstName