ปรับ dialog ใหม่

src/modules/00_support/components/DialogStatus.vue

@@ -1,15 +1,38 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { useSupportStore } from "@/modules/00_support/store/Main";
+import dialogHeader from "@/components/DialogHeader.vue";
 const store = useSupportStore();
 const open = ref<boolean>(false);
-const statusIssue: ("new" | "ongoing" | "resolved")[] = [
-  "new",
-  "ongoing",
-  "resolved",
+
+const statusIssue: ("ปัญหาใหม่" | "กำลังดำเนินการ" | "เสร็จสิ้น")[] = [
+  "ปัญหาใหม่",
+  "กำลังดำเนินการ",
+  "เสร็จสิ้น",
 ];
 
-const status = ref<"new" | "ongoing" | "resolved">(store.correntStatusIssue);
+const status = ref<"ปัญหาใหม่" | "กำลังดำเนินการ" | "เสร็จสิ้น">(
+  store.correntStatusIssue == "new"
+    ? "ปัญหาใหม่"
+    : store.correntStatusIssue == "ongoing"
+    ? "กำลังดำเนินการ"
+    : "เสร็จสิ้น"
+);
+
+function saveData(inputStatus: "ปัญหาใหม่" | "กำลังดำเนินการ" | "เสร็จสิ้น") {
+  const statusEn: "new" | "ongoing" | "resolved" =
+    inputStatus == "ปัญหาใหม่"
+      ? "new"
+      : inputStatus == "กำลังดำเนินการ"
+      ? "ongoing"
+      : "resolved";
+  store.ChangeStatusIssue(
+    store.currentIssue,
+    store.currentTitle,
+    store.currentCategoryId,
+    statusEn
+  );
+}
 
 defineProps({
   issueId: String,
@@ -41,82 +64,70 @@ defineProps({
     </q-menu>
   </q-btn>
 
-  <q-dialog v-model="open" persistent>
-    <q-card>
-      <q-card-section class="row items-center">
-        <div class="flex items-center" style="flex-wrap: nowrap">
-          <div>
-            <h6 class="q-my-none">แก้ไขสถานะ</h6>
+  <q-dialog v-model="open" class="dialog" persistent>
+    <q-card style="min-width: 350px" class="bg-grey-11">
+      <q-card-section class="flex justify-between" style="padding: 0">
+        <dialog-header
+          tittle="แก้ไขสถานะ"
+          :close="
+            () => {
+              open = false;
+            }
+          "
+        />
+      </q-card-section>
 
-            <q-btn-dropdown
-              v-if="store.currentIssue"
-              :label="
-                store.correntStatusIssue == 'new'
-                  ? 'ปัญหาใหม่'
-                  : store.correntStatusIssue == 'ongoing'
-                  ? 'กำลังดำเนินการ'
-                  : 'เสร็จสิ้น'
-              "
-              @click.stop
-            >
-              <q-list v-for="itemStatusIssue in statusIssue">
-                <q-item
-                  clickable
-                  v-close-popup
-                  @click="
-                    () => {
-                      status = itemStatusIssue;
-                    }
-                  "
-                >
-                  <q-item-section>
-                    <q-item-label>{{
-                      itemStatusIssue == "new"
-                        ? "ปัญหาใหม่"
-                        : itemStatusIssue == "ongoing"
-                        ? "กำลังดำเนินการ"
-                        : "เสร็จสิ้น"
-                    }}</q-item-label>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-btn-dropdown>
-          </div>
+      <q-separator color="grey-4" />
+      <q-card-section class="q-pa-none align-center">
+        <div class="bg-white q-ma-sm border_black">
+          <q-select
+            class="q-my-sm q-mx-sm"
+            style="width: 280px"
+            borderless
+            dense
+            outlined
+            color="secondary"
+            v-model="status"
+            :options="statusIssue"
+            label="สถานะ"
+          />
         </div>
       </q-card-section>
 
       <q-card-actions align="right">
         <q-btn
+          id="onSubmit"
+          type="submit"
+          dense
+          unelevated
+          label="บันทึก"
+          color="public"
+          class="q-px-md"
           @click="
             () => {
-              console.log('ยกเลิกการลบ');
+              saveData(status);
+              open = false;
             }
           "
-          label="ยกเลิก"
-          flat
-          v-close-popup
-          id="dialogDeleteClose"
-        />
-
-        <q-btn
-          @click="
-            () => {
-              store.ChangeStatusIssue(
-                store.currentIssue,
-                store.currentTitle,
-                store.currentCategoryId,
-                status
-              );
-            }
-          "
-          color="primary"
-          v-close-popup
-          label="ยืนยัน"
-          id="dialogDeleteConfirm"
-        />
+        >
+          <q-tooltip>บันทึกข้อมูล</q-tooltip>
+        </q-btn>
       </q-card-actions>
     </q-card>
   </q-dialog>
 </template>
 
-<style scoped></style>
+<style scoped>
+.border_black {
+  border: solid 2px rgb(221, 214, 214);
+  padding: 5px;
+  display: inline-block;
+  border-radius: 10px;
+}
+
+.align-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>