From d33f4236550712e21801ffb78ae6c31241fb9b39 Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Thu, 20 Jul 2023 14:53:05 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20ui=20?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B8=84=E0=B8=B3=E0=B8=AA=E0=B8=B1?=
 =?UTF-8?q?=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/OrderPlacement/step/step02.vue | 221 +++++++++++++++---
 src/modules/09_coin/router.ts                 |  15 +-
 src/views/MainLayout.vue                      |   2 -
 3 files changed, 206 insertions(+), 32 deletions(-)

diff --git a/src/modules/05_placement/components/OrderPlacement/step/step02.vue b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
index b25dd46c4..2b5a6285f 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step02.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step02.vue
@@ -55,34 +55,79 @@
         selection="multiple"
         v-model:selected="selected"
       >
-        <template v-slot:header-selection="scope">
+        <!-- <template v-slot:header-selection="scope">
           <q-checkbox
             keep-color
             color="primary"
             dense
             v-model="scope.selected"
           />
+        </template> -->
+
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th auto-width>
+              <q-checkbox
+                keep-color
+                color="primary"
+                dense
+                v-model="props.selected"
+              />
+            </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-th auto-width />
+            <q-th auto-width />
+          </q-tr>
         </template>
-
-        <template v-slot:body-selection="scope">
-          <q-checkbox
-            keep-color
-            color="primary"
-            dense
-            v-model="scope.selected"
-          />
-        </template>
-
-        <template v-slot:body-cell="props">
-          <q-td :props="props">
-            <div v-if="props.col.name == 'no'">
-              {{ props.rowIndex + 1 }}
-            </div>
-
-            <div v-else @click="click(props)">
-              {{ props.value }}
-            </div>
-          </q-td>
+        <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"
+              @click="selectModal(props.row)"
+              >{{ col.name == "no" ? props.rowIndex + 1 : col.value }}</q-td
+            >
+            <q-td auto-width>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                :color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
+                :disable="props.rowIndex + 1 == 1"
+                @click="upDown(props)"
+                icon="mdi-arrow-up-bold"
+              >
+                <!-- <q-tooltip>เลื่อนลำดับขึ้น</q-tooltip> -->
+              </q-btn>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                :color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
+                :disable="rows.length == props.rowIndex + 1"
+                @click="upDown(props, false)"
+                icon="mdi-arrow-down-bold"
+              >
+                <!-- <q-tooltip>เลื่อนลำดับลง</q-tooltip> -->
+              </q-btn>
+            </q-td>
+          </q-tr>
         </template>
       </d-table>
     </div>
@@ -113,13 +158,92 @@
       </q-btn> -->
     </div>
   </div>
+
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 70vw; max-width: 70vw">
+      <q-form ref="myForm">
+        <DialogHeader :tittle="titleName" :close="modalOpenClose" />
+        <q-separator />
+        <q-card-section class="q-pa-sm bg-grey-1">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-6 row">
+              <q-card flat bordered class="fit q-pa-sm">
+                <!-- style="height: 70vh" -->
+                <q-scroll-area visible> </q-scroll-area>
+              </q-card>
+            </div>
+            <div class="col-xs-12 col-sm-6">
+              <div class="col-12 row q-py-sm items-center q-col-gutter-sm">
+                <div class="col-xs-6 col-sm-6 col-md-6">
+                  <q-input
+                    outlined
+                    dense
+                    lazy-rules
+                    v-model="modalData.salaryAmount"
+                    :rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
+                    :label="`${'เงินเดือน'}`"
+                    type="number"
+                    hide-bottom-space
+                  />
+                </div>
+
+                <div class="col-xs-6 col-sm-6 col-md-6">
+                  <q-input
+                    outlined
+                    dense
+                    lazy-rules
+                    v-model="modalData.positionSalaryAmount"
+                    :label="`${'เงินประจำตำแหน่ง'}`"
+                    type="number"
+                    hide-bottom-space
+                  />
+                  <!-- :rules="[
+                      (val) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
+                    ]" -->
+                </div>
+
+                <div class="col-xs-6 col-sm-6 col-md-6">
+                  <q-input
+                    outlined
+                    dense
+                    lazy-rules
+                    v-model="modalData.mouthSalaryAmount"
+                    :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                    type="number"
+                    hide-bottom-space
+                  />
+                  <!-- :rules="[
+                      (val) => !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
+                    ]" -->
+                </div>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            @click="saveModal"
+            class="q-px-md"
+            ><!-- icon="mdi-content-save-outline"
+        <q-tooltip>บันทึก</q-tooltip> -->
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
 import { useQuasar } from "quasar";
 import type { QInput } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
-import type { QTableProps } from "quasar";
+import type { QTableProps, QForm } from "quasar";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 
 const props = defineProps({
   next: {
@@ -139,6 +263,14 @@ const { dialogMessage, messageError, showLoader, hideLoader } = mixin;
 
 const $q = useQuasar();
 
+const modalData = ref<any>({
+  salaryAmount: 0,
+  positionSalaryAmount: 0,
+  mouthSalaryAmount: 0,
+});
+const myForm = ref<QForm | null>(null);
+const modal = ref<boolean>(false);
+const titleName = ref<string>("");
 const filterRef = ref<QInput>();
 const filter = ref<string>("");
 const visibleColumns = ref<String[]>(["no", "idcard", "name", "educate"]);
@@ -236,15 +368,48 @@ const rows = ref<any>([
   },
 ]);
 const selected = ref([]);
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
+
+const upDown = (value: any, up: boolean = true) => {
+  const indexCurrent = value.rowIndex;
+  if (up) {
+    rows.value[indexCurrent] = rows.value[indexCurrent - 1];
+    rows.value[indexCurrent - 1] = value.row;
+  } else {
+    rows.value[indexCurrent] = rows.value[indexCurrent + 1];
+    rows.value[indexCurrent + 1] = value.row;
+  }
+};
+
+const saveModal = () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then(async (result: boolean) => {
+      if (result) {
+        modalOpenClose();
+      }
+    });
+  }
+};
+
+const selectModal = (e: any) => {
+  titleName.value = e.name;
+  modalData.value = {
+    salaryAmount: 0,
+    positionSalaryAmount: 0,
+    mouthSalaryAmount: 0,
+  };
+  modalOpenClose();
+};
+
+const modalOpenClose = () => {
+  modal.value = !modal.value;
+  if (!modal.value) {
+    titleName.value = "";
+  }
+};
 
 const click = (e: any) => {
   console.log(e);
+  console.log(rows.value.length);
 };
 
 const save = () => {
diff --git a/src/modules/09_coin/router.ts b/src/modules/09_coin/router.ts
index 3626006be..d555454b2 100644
--- a/src/modules/09_coin/router.ts
+++ b/src/modules/09_coin/router.ts
@@ -1,8 +1,9 @@
 /**
- * Router เครื่องราชอิสริยาภรณ์ (insignia)
+ * Router  (coin)
  */
 
 const Main = () => import("@/modules/09_coin/views/Main.vue");
+const CoinHistory = () => import("@/modules/09_coin/components/Coin.vue");
 
 export default [
   {
@@ -11,7 +12,17 @@ export default [
     component: Main,
     meta: {
       Auth: true,
-      Key: [9],
+      Key: [8.2],
+      Role: "coin",
+    },
+  },
+  {
+    path: "/coin/history",
+    name: "coinHistory",
+    component: CoinHistory,
+    meta: {
+      Auth: true,
+      Key: [8.2],
       Role: "coin",
     },
   },
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 83b0af610..9c38c4542 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -1029,6 +1029,4 @@ if (keycloak.tokenParsed != null) {
 ::-webkit-scrollbar-thumb:hover {
   background-color: #a8bbbf;
 }
-
-
 </style>