no message

src/modules/05_placement/components/DialogFooter.vue

@@ -13,18 +13,7 @@
       <q-tooltip>แก้ไขข้อมูล</q-tooltip>
     </q-btn>
     <div v-else>
-      <!-- <q-btn
+
-        flat
-        round
-        :disabled="!editvisible"
-        :outline="!editvisible"
-        :color="!editvisible ? 'grey-7' : 'red'"
-        @click="cancel()"
-        icon="mdi-undo"
-        v-if="modalEdit == true"
-      >
-        <q-tooltip>ยกเลิก</q-tooltip>
-      </q-btn> -->
       <q-btn
         flat
         round
@@ -80,11 +69,6 @@ const edit = async () => {
 const checkSave = () => {
   props.validate();
   props.save();
-  //   if (myForm.value !== null) {
+
-  //     myForm.value.validate().then((success) => {
-  //       if (success) {
-  //       }
-  //     });
-  //   }
 };
 </script>

src/modules/05_placement/components/DialogHeader.vue

@@ -12,8 +12,8 @@
   </q-toolbar>
 </template>
 <script setup lang="ts">
-import { ref, useAttrs } from "vue";
 
+import { ref, useAttrs } from "vue";
 const props = defineProps({
   tittle: String,
   close: {
@@ -24,4 +24,5 @@ const props = defineProps({
 const close = async () => {
   props.close();
 };
+
 </script>

src/modules/05_placement/components/PlacementTable.vue

@@ -16,6 +16,7 @@ const filter = ref<string>("");
 const { placementData } = store;
 const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
 const modal = ref<boolean>(false); //modal add detail
+const modal_right = ref<boolean>(false); //modal add detail
 const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
 const position = ref<number>();
 const Name = ref<string>();
@@ -26,7 +27,7 @@ const BMAOfficer = ref<boolean>();
 const Status = ref<string>();
 const checkList = ref<string>();
 
-  const $q = useQuasar(); // show dialog
+const $q = useQuasar(); // show dialog
 
 const selectData = (props: TableName) => {
   if (editvisible.value == true) {
@@ -42,13 +43,29 @@ const selectData = (props: TableName) => {
     BMAOfficer.value = props.BMAOfficer;
     Status.value = props.Status;
     checkList.value = props.checkList;
-  }else{
+  } else {
     editRow.value = false;
     modalEdit.value = true;
     modal.value = true;
     edit.value = true;
   }
 };
+const editDetail = (props:TableName, action:string) => {
+  if (action === 'cancel') {
+    editRow.value = false;
+    modalEdit.value = false;
+    modal_right.value = true;
+    edit.value = true;
+    Name.value = props.Name;
+
+  } else if(action === 'wait'){
+    editRow.value = false;
+    modalEdit.value = true;
+    modal_right.value = true;
+    edit.value = true;
+    Name.value = props.Name;
+  }
+};
 
 placementData.mappingPosition.columns.length == 0
   ? (visibleColumns.value = [
@@ -150,7 +167,7 @@ const rows = ref<TableName[]>([
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "บรรจุเเล้ว",
-    checkList:null
+    checkList: null,
   },
   {
     position: 1,
@@ -160,7 +177,7 @@ const rows = ref<TableName[]>([
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "ยังไม่บรรจุ",
-    checkList:null
+    checkList: null,
   },
   {
     position: 1,
@@ -170,7 +187,7 @@ const rows = ref<TableName[]>([
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "เตรียมบรรจุ",
-    checkList:null
+    checkList: null,
   },
 
   {
@@ -181,7 +198,7 @@ const rows = ref<TableName[]>([
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "เตรียมบรรจุ",
-    checkList:null
+    checkList: null,
   },
 
   {
@@ -192,7 +209,7 @@ const rows = ref<TableName[]>([
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "เตรียมบรรจุ",
-    checkList:null
+    checkList: null,
   },
   {
     position: 1,
@@ -202,7 +219,7 @@ const rows = ref<TableName[]>([
     ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
     BMAOfficer: true,
     Status: "บรรจุเเล้ว",
-    checkList:null
+    checkList: null,
   },
 ]);
 const clickCancel = async () => {
@@ -217,9 +234,11 @@ const clickClose = async () => {
       ok: "ยืนยัน",
       persistent: true,
     }).onOk(async () => {
+      modal_right.value = false;
       modal.value = false;
     });
   } else {
+    modal_right.value = false;
     modal.value = false;
   }
 };
@@ -271,15 +290,6 @@ const clickClose = async () => {
                   class="text-h5"
                 />
               </div>
-              <q-toggle
-                v-else
-                v-model="props.row.isActive"
-                dense
-                color="green"
-                @update:model-value="
-                  clickIsActive(props.row.id, props.row.isActive)
-                "
-              />
             </div>
             <div v-else class="table_ellipsis">
               {{ col.value }}
@@ -297,6 +307,7 @@ const clickClose = async () => {
                 round
                 size="14px"
                 icon="mdi-account-alert"
+                @click="editDetail(props.row, 'wait')"
               />
               <q-btn
                 color="red"
@@ -305,6 +316,7 @@ const clickClose = async () => {
                 round
                 size="14px"
                 icon="mdi-account-remove"
+                @click="editDetail(props.row, 'cancel')"
               />
             </div>
             <div v-else align="right">
@@ -319,28 +331,46 @@ const clickClose = async () => {
             </div>
           </q-td>
         </q-tr>
+        <q-dialog v-model="modal" persistent>
+          <q-card style="width: 800px">
+            <q-form ref="myForm">
+              <!-- :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
+              <DialogHeader
+                :tittle="`รายละเอียดของ${Name}`"
+                :close="clickClose"
+              />
+              <q-separator />
+              <q-card-section class="q-p-sm"> text </q-card-section>
+              <q-separator />
+              <DialogFooter
+                :save="clickSave"
+                v-model:editvisible="edit"
+                v-model:modalEdit="modalEdit"
+              />
+            </q-form>
+          </q-card>
+        </q-dialog>
+
+        <q-dialog v-model="modal_right" persistent>
+          <q-card style="width: 800px">
+            <q-form ref="myForm">
+              <!-- :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
+              <DialogHeader
+                :tittle="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ...`"
+                :close="clickClose"
+              />
+              <q-separator />
+              <q-card-section class="q-p-sm"> text </q-card-section>
+              <q-separator />
+              <DialogFooter
+                :save="clickSave"
+                v-model:editvisible="edit"
+                v-model:modalEdit="modalEdit"
+              />
+            </q-form>
+          </q-card>
+        </q-dialog>
       </template>
     </Table>
   </q-form>
-    <q-dialog v-model="modal" persistent>
-    <q-card style="width: 800px">
-      <q-form ref="myForm">
-        <!-- :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
-        <DialogHeader
-          :tittle="`รายละเอียดของ`"
-          :close="clickClose"
-        />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-     text
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          :save="clickSave"
-          v-model:editvisible="edit"
-          v-model:modalEdit="modalEdit"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
 </template>