เเก้ ui

src/modules/00_support/components/category/DialogCategory.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useSupportStore } from "@/modules/00_support/store/Main";
-
+import dialogHeader from "@/components/DialogHeader.vue";
 const store = useSupportStore();
 
 const [open] = defineModel<Boolean>();
@@ -20,81 +20,67 @@ function controlAction(
   statusAction?: string,
   name: string = ""
 ) {
-  if (statusAction == "add") store.newCategory(name);
+  if (statusAction == "add") {
+    store.newCategory(name);
+  }
   if (statusAction == "edit") store.editCategory(categoryId, name);
-  if (statusAction == "delete") store.deleteCategory(categoryId);
+}
+
+function checkStatus(status: string) {
+  if (status == "add") return "เพิ่มประเภทของปัญหา";
+  if (status == "edit") return "แก้ไขประเภทของปัญหา";
 }
 </script>
 
 <template>
-  <q-dialog v-model="prop.open" persistent>
-    <q-card>
-      <q-card-section>
-        <div class="flex items-center" style="flex-wrap: nowrap">
-          <div class="q-pa-sm">
-            <h6 v-if="prop.status == 'add'" class="q-my-none">
-              เพิ่มประเภทของปัญหา
-            </h6>
-            <h6 v-if="prop.status == 'edit'" class="q-my-none">
-              แก้ไขประเภทของปัญหา
-            </h6>
-
-            <div
-              v-if="prop.status == 'delete'"
-              style="border-radius: 50%"
-              class="q-pa-sm"
-            >
-              <q-icon
-                name="mdi-trash-can-outline"
-                color="negative"
-                size="2.5rem"
-              />
-            </div>
-          </div>
-          <div v-if="prop.status == 'delete'">
-            <h6 class="q-my-none">ยืนยันการลบข้อมูล</h6>
-            <p class="q-my-none">ต้องการยืนยันการลบข้อมูลนี้หรือไม่</p>
-          </div>
-        </div>
+  <q-dialog v-model="prop.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="checkStatus(prop.status)"
+          :close="
+            () => {
+              open = false;
+              if (status == 'add') input = '';
+            }
+          "
+        />
       </q-card-section>
+
       <q-separator color="grey-4" />
-      <q-card-section
-        style="width: 400px"
-        class="items-center"
-        v-if="prop.status !== 'delete'"
-      >
-        <div style="flex-wrap: ">
-          <div>
-            <q-input dense outlined v-model="input" />
-          </div>
+      <q-card-section class="q-pa-none align-center">
+        <div class="bg-white q-ma-sm border_black">
+          <q-input
+            hide-bottom-space
+            outlined
+            dense
+            label="ประเภทของปัญหา"
+            lazy-rules
+            borderless
+            v-model="input"
+          />
         </div>
       </q-card-section>
       <q-separator color="grey-4" />
       <q-card-actions align="right">
         <q-btn
-          @click="
-            () => {
-              open = false;
-            }
-          "
-          label="ยกเลิก"
-          flat
-          v-close-popup
-          id="dialogDeleteClose"
-        />
-
-        <q-btn
+          id="onSubmit"
+          type="submit"
+          dense
+          unelevated
+          label="บันทึก"
+          color="public"
+          class="q-px-md"
           @click="
             () => {
               controlAction(prop.category, prop.status, input);
+              input = '';
               open = false;
             }
           "
-          :color="prop.status == 'delete' ? 'negative' : 'primary'"
-          v-close-popup
-          label="ยืนยัน"
-          id="dialogDeleteConfirm"
-        />
+        >
+          <q-tooltip>บันทึกข้อมูล</q-tooltip>
+        </q-btn>
       </q-card-actions>
     </q-card>
   </q-dialog>