Refactor confirm modals

client/src/components/modals/Confirm.vue

@@ -4,26 +4,22 @@
     :small="true"
   >
     <template #header>
-      <h3 class="confirm-dialog__heading">
+      <h3 class="confirm-dialog__heading">{{ title }}</h3>
-        {{ title }}
-      </h3>
     </template>
-    <p class="confirm-dialog__content">
+    <p class="confirm-dialog__content">{{ message }}</p>
-      {{ message }}
-    </p>
     <template #footer>
       <div>
         <a
           class="button button--primary"
           data-cy="modal-save-button"
-          @click="confirm"
+          @click="$emit('confirm')"
         >
           Bestätigen
         </a>
         <a
           class="button"
           data-cy="modal-cancel-button"
-          @click="cancel"
+          @click="$emit('cancel')"
         >
           Abbrechen
         </a>
@@ -32,40 +28,16 @@
   </modal>
 </template>
 
-<script>
+<script setup lang="ts">
 import Modal from '@/components/Modal.vue';
 
-export default {
+export interface Props {
-  components: {
+  title: string;
-    Modal,
+  message: string;
-  },
+}
 
-  computed: {
+defineProps<Props>();
-    title() {
+defineEmits(['confirm', 'cancel']);
-      const { payload } = this.$modal.state;
-      if (payload && payload.title) {
-        return payload.title;
-      }
-      return 'Bestätigung';
-    },
-    message() {
-      const { payload } = this.$modal.state;
-      if (payload && payload.message) {
-        return payload.message;
-      }
-      return 'Wollen Sie diesen Eintrag wirklich löschen?';
-    },
-  },
-
-  methods: {
-    confirm() {
-      this.$modal.confirm();
-    },
-    cancel() {
-      this.$modal.cancel();
-    },
-  },
-};
 </script>
 
 <style scoped lang="scss">

client/src/components/modals/Confirm2.vue

@@ -1,58 +0,0 @@
-<template>
-  <modal
-    class="confirm-dialog"
-    :small="true"
-  >
-    <template #header>
-      <h3 class="confirm-dialog__heading">{{ title }}</h3>
-    </template>
-    <p class="confirm-dialog__content">{{ message }}</p>
-    <template #footer>
-      <div>
-        <a
-          class="button button--primary"
-          data-cy="modal-save-button"
-          @click="$emit('confirm')"
-        >
-          Bestätigen
-        </a>
-        <a
-          class="button"
-          data-cy="modal-cancel-button"
-          @click="$emit('cancel')"
-        >
-          Abbrechen
-        </a>
-      </div>
-    </template>
-  </modal>
-</template>
-
-<script setup lang="ts">
-// todo: rename and probably merge with other confirm modal
-import Modal from '@/components/Modal.vue';
-
-export interface Props {
-  title: string;
-  message: string;
-}
-
-defineProps<Props>();
-defineEmits(['confirm', 'cancel']);
-</script>
-
-<style scoped lang="scss">
-@import 'styles/helpers';
-
-.confirm-dialog {
-  &__heading {
-    @include modal-heading;
-  }
-
-  &__content {
-    display: flex;
-    flex-direction: column;
-    padding: $medium-spacing 0;
-  }
-}
-</style>

client/src/components/modals/LegacyConfirm.vue

@@ -0,0 +1,44 @@
+<template>
+  <confirm
+    :title="title"
+    :message="message"
+    @confirm="confirm"
+    @cancel="cancel"
+  />
+</template>
+
+<script lang="ts">
+import Confirm from '@/components/modals/Confirm.vue';
+
+export default {
+  components: {
+    Confirm,
+  },
+
+  computed: {
+    title() {
+      const { payload } = this.$modal.state;
+      if (payload && payload.title) {
+        return payload.title;
+      }
+      return 'Bestätigung';
+    },
+    message() {
+      const { payload } = this.$modal.state;
+      if (payload && payload.message) {
+        return payload.message;
+      }
+      return 'Wollen Sie diesen Eintrag wirklich löschen?';
+    },
+  },
+
+  methods: {
+    confirm() {
+      this.$modal.confirm();
+    },
+    cancel() {
+      this.$modal.cancel();
+    },
+  },
+};
+</script>

client/src/components/modals/index.js

@@ -1,24 +1,12 @@
 import { defineAsyncComponent } from 'vue';
 const Modal = defineAsyncComponent(() => import('@/components/Modal.vue'));
-const FullscreenImage = defineAsyncComponent(() =>
+const FullscreenImage = defineAsyncComponent(() => import('@/components/FullscreenImage.vue'));
-  import('@/components/FullscreenImage.vue')
+const FullscreenInfographic = defineAsyncComponent(() => import('@/components/FullscreenInfographic.vue'));
-);
+const FullscreenVideo = defineAsyncComponent(() => import('@/components/FullscreenVideo.vue'));
-const FullscreenInfographic = defineAsyncComponent(() =>
+const DeactivatePerson = defineAsyncComponent(() => import('@/components/profile/DeactivatePerson.vue'));
-  import('@/components/FullscreenInfographic.vue')
+const SnapshotCreated = defineAsyncComponent(() => import('@/components/modules/SnapshotCreated.vue'));
-);
+const ChangeVisibility = defineAsyncComponent(() => import('@/components/rooms/ChangeVisibility.vue'));
-const FullscreenVideo = defineAsyncComponent(() =>
+const Confirm = defineAsyncComponent(() => import('@/components/modals/LegacyConfirm.vue'));
-  import('@/components/FullscreenVideo.vue')
-);
-const DeactivatePerson = defineAsyncComponent(() =>
-  import('@/components/profile/DeactivatePerson.vue')
-);
-const SnapshotCreated = defineAsyncComponent(() =>
-  import('@/components/modules/SnapshotCreated.vue')
-);
-const ChangeVisibility = defineAsyncComponent(() =>
-  import('@/components/rooms/ChangeVisibility.vue')
-);
-const Confirm = defineAsyncComponent(() => import('@/components/modals/Confirm.vue'));
 
 export default {
   Modal,

client/src/helpers/modalService.ts

@@ -1,5 +1,5 @@
 import { createApp } from 'vue';
-import Confirm from '@/components/modals/Confirm2.vue';
+import Confirm from '@/components/modals/Confirm.vue';
 import { ResolveReject } from './types';
 export default {
   show() {

client/src/plugins/modal.types.ts

@@ -2,7 +2,7 @@ export interface Modal {
   state: any;
   component: string;
   payload?: any;
-  confirm: (res: any) => void;
+  confirm: (res?: any) => void;
   open: (component: string, payload?: any) => Promise<(resolve: () => any, reject: () => any) => void>;
   cancel: () => void;
   _resolve: (r?: any) => any;

client/src/styles/_widget-popover.scss

@@ -8,7 +8,7 @@
   flex-direction: column;
   background-color: $color-white;
   padding: 0;
-  z-index: 100;
+  z-index: 80;
   @include widget-shadow;
   width: max-content;
 
@@ -50,7 +50,7 @@
     flex-grow: 1;
     width: auto;
 
-    & > a {
+    &>a {
       @include popover-link;
     }
 
@@ -58,7 +58,7 @@
       line-height: 40px;
       padding: $small-spacing $medium-spacing;
 
-      & > a,
+      &>a,
       & {
         @include small-text;
       }