From 91dcf3cb2050f0038383a9029fe2ca266f59c751 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 5 Feb 2024 17:35:24 +0100
Subject: [PATCH] Refactor confirm modals

---
 client/src/components/modals/Confirm.vue      | 50 ++++------------
 client/src/components/modals/Confirm2.vue     | 58 -------------------
 .../src/components/modals/LegacyConfirm.vue   | 44 ++++++++++++++
 client/src/components/modals/index.js         | 26 +++------
 client/src/helpers/modalService.ts            |  2 +-
 client/src/plugins/modal.types.ts             |  2 +-
 client/src/styles/_widget-popover.scss        |  6 +-
 7 files changed, 67 insertions(+), 121 deletions(-)
 delete mode 100644 client/src/components/modals/Confirm2.vue
 create mode 100644 client/src/components/modals/LegacyConfirm.vue

diff --git a/client/src/components/modals/Confirm.vue b/client/src/components/modals/Confirm.vue
index c4c6e9f4..af75e183 100644
--- a/client/src/components/modals/Confirm.vue
+++ b/client/src/components/modals/Confirm.vue
@@ -4,26 +4,22 @@
     :small="true"
   >
     <template #header>
-      <h3 class="confirm-dialog__heading">
-        {{ title }}
-      </h3>
+      <h3 class="confirm-dialog__heading">{{ title }}</h3>
     </template>
-    <p class="confirm-dialog__content">
-      {{ message }}
-    </p>
+    <p class="confirm-dialog__content">{{ 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 {
-  components: {
-    Modal,
-  },
+export interface Props {
+  title: string;
+  message: string;
+}
 
-  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();
-    },
-  },
-};
+defineProps<Props>();
+defineEmits(['confirm', 'cancel']);
 </script>
 
 <style scoped lang="scss">
diff --git a/client/src/components/modals/Confirm2.vue b/client/src/components/modals/Confirm2.vue
deleted file mode 100644
index 10fb8f05..00000000
--- a/client/src/components/modals/Confirm2.vue
+++ /dev/null
@@ -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>
diff --git a/client/src/components/modals/LegacyConfirm.vue b/client/src/components/modals/LegacyConfirm.vue
new file mode 100644
index 00000000..cfeb2a5e
--- /dev/null
+++ b/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>
diff --git a/client/src/components/modals/index.js b/client/src/components/modals/index.js
index 8c0a73be..3e3e21e5 100644
--- a/client/src/components/modals/index.js
+++ b/client/src/components/modals/index.js
@@ -1,24 +1,12 @@
 import { defineAsyncComponent } from 'vue';
 const Modal = defineAsyncComponent(() => import('@/components/Modal.vue'));
-const FullscreenImage = defineAsyncComponent(() =>
-  import('@/components/FullscreenImage.vue')
-);
-const FullscreenInfographic = defineAsyncComponent(() =>
-  import('@/components/FullscreenInfographic.vue')
-);
-const FullscreenVideo = defineAsyncComponent(() =>
-  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'));
+const FullscreenImage = defineAsyncComponent(() => import('@/components/FullscreenImage.vue'));
+const FullscreenInfographic = defineAsyncComponent(() => import('@/components/FullscreenInfographic.vue'));
+const FullscreenVideo = defineAsyncComponent(() => 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/LegacyConfirm.vue'));
 
 export default {
   Modal,
diff --git a/client/src/helpers/modalService.ts b/client/src/helpers/modalService.ts
index 6d72670b..20f616a0 100644
--- a/client/src/helpers/modalService.ts
+++ b/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() {
diff --git a/client/src/plugins/modal.types.ts b/client/src/plugins/modal.types.ts
index 5a143e80..2a140f9f 100644
--- a/client/src/plugins/modal.types.ts
+++ b/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;
diff --git a/client/src/styles/_widget-popover.scss b/client/src/styles/_widget-popover.scss
index 0923befb..e5310926 100644
--- a/client/src/styles/_widget-popover.scss
+++ b/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;
       }