add assignment v2 UI

app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue

@@ -8,6 +8,10 @@ export default {
     NextButton,
   },
   props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
     title: {
       type: String,
       default: 'This is a title',
@@ -25,35 +29,49 @@ export default {
       default: 'No',
     },
   },
+  emits: ['update:show', 'confirm', 'cancel'],
   data: () => ({
-    show: false,
+    localShow: false,
     resolvePromise: undefined,
     rejectPromise: undefined,
   }),
-
+  watch: {
+    show(val) {
+      this.localShow = val;
+    },
+  },
   methods: {
     showConfirmation() {
-      this.show = true;
+      this.localShow = true;
+      this.$emit('update:show', true);
       return new Promise((resolve, reject) => {
         this.resolvePromise = resolve;
         this.rejectPromise = reject;
       });
     },
     confirm() {
-      this.resolvePromise(true);
-      this.show = false;
+      if (this.resolvePromise) {
+        this.resolvePromise(true);
+      }
+      this.$emit('confirm');
+      this.localShow = false;
+      this.$emit('update:show', false);
     },
 
     cancel() {
-      this.resolvePromise(false);
-      this.show = false;
+      if (this.resolvePromise) {
+        this.resolvePromise(false);
+      }
+      this.$emit('cancel');
+      this.localShow = false;
+      this.$emit('update:show', false);
     },
   },
 };
 </script>
 
 <template>
-  <Modal v-model:show="show" :on-close="cancel">
+  <Modal v-model:show="localShow" :on-close="cancel">
     <div class="h-auto overflow-auto flex flex-col">
       <woot-modal-header :header-title="title" :header-content="description" />
       <div class="flex flex-row justify-end gap-2 py-4 px-6 w-full">