Add an initial implementation of a confirm modal for deleting highlights

Relates to MS-871

client/src/components/highlights/HighlightPopover.vue

@@ -23,7 +23,7 @@
     <section class="highlight-popover__section">
       <trash-icon
         class="highlight-popover__icon"
-        @click="$emit('delete')"
+        @click="confirmDelete"
       />
     </section>
   </div>
@@ -32,18 +32,31 @@
 <script setup lang="ts">
 import NoteIcon from '@/components/icons/NoteIcon.vue';
 import TrashIcon from '@/components/icons/TrashIcon.vue';
+import modal from '@/helpers/modalService';
 export interface Props {
   top: string;
 }
 
-defineEmits(['close', 'confirm', 'choose-color']);
+const emit = defineEmits(['close', 'confirm', 'choose-color']);
 defineProps<Props>();
+const confirmDelete = () => {
+  console.log('trying to delete');
+  modal
+    .show()
+    .then(() => {
+      console.log('promise resolved');
+      emit('delete');
+    })
+    .catch(() => {
+      console.log('promise rejected');
+    });
+};
 </script>
 
 <style lang="postcss">
 .highlight-popover {
   position: absolute;
-  z-index: 99;
+  z-index: 80;
   top: calc(v-bind(top) - 80px);
 
   background-color: white;

client/src/components/modals/Confirm2.vue

@@ -0,0 +1,58 @@
+<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/helpers/modalService.ts

@@ -0,0 +1,37 @@
+import { createApp } from 'vue';
+import Confirm from '@/components/modals/Confirm2.vue';
+import { ResolveReject } from './types';
+export default {
+  show() {
+    const mountEl = document.createElement('div');
+    document.body.appendChild(mountEl);
+
+    const cleanUp = () => {
+      mountEl?.parentNode?.removeChild(mountEl);
+      modal.unmount();
+    };
+    let _resolve: ResolveReject, _reject: ResolveReject;
+
+    const promise = new Promise((resolve, reject) => {
+      _resolve = resolve;
+      _reject = reject;
+    });
+
+    const modal = createApp(Confirm, {
+      title: 'Löschen bestätigen',
+      message: 'Wollen Sie die Markierung wirklich löschen?',
+      onConfirm: () => {
+        cleanUp();
+        _resolve();
+      },
+      onCancel: () => {
+        cleanUp();
+        _reject();
+      },
+    });
+
+    modal.mount(mountEl);
+
+    return promise;
+  },
+};

client/src/helpers/popover.ts

@@ -1,7 +1,6 @@
 import HighlightPopover from '@/components/highlights/HighlightPopover.vue';
 import { createApp } from 'vue';
-
-type ResolveReject = (v?: unknown) => void;
+import { ResolveReject } from './types';
 
 interface Options {
   wrapper: HTMLElement;

client/src/helpers/types.ts

@@ -22,3 +22,5 @@ export interface FlavorValues {
   showLanguageFilter: boolean;
   showTopicNavigationNumbering: boolean;
 }
+
+export type ResolveReject = (v?: unknown) => void;