refactor: show dialogdelete

Services/client/src/components/DialogDelete.vue

@@ -1,9 +1,24 @@
 <script setup lang="ts">
-defineEmits(['confirm', 'cancel'])
+defineEmits(['confirm', 'cancel', 'update:open'])
+
+const props = withDefaults(
+  defineProps<{
+    open: boolean
+  }>(),
+  {
+    open: false,
+  },
+)
 </script>
 
 <template>
-  <q-dialog persistent transition-show="scale" transition-hide="scale">
+  <q-dialog 
+  persistent 
+  transition-show="scale" 
+  transition-hide="scale"
+  :model-value="props.open"
+  @update:model-value="(v) => $emit('update:open', v)"
+  >
     <q-card style="width: 400px">
       <q-card-section>
         <span class="text-h6">
@@ -21,7 +36,7 @@ defineEmits(['confirm', 'cancel'])
           label="ยกเลิก"
           flat
           v-close-popup
-          @click="() => $emit('cancel')"
+          @click="() => ($emit('update:open', !open))"
         />
 
         <q-btn