From c9746769ab36dea253e8f07ef54a2c2e56a7d021 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 1 Feb 2024 22:34:29 +0100
Subject: [PATCH] Add an initial implementation of a confirm modal for deleting
 highlights

Relates to MS-871
---
 .../highlights/HighlightPopover.vue           | 19 +++++-
 client/src/components/modals/Confirm2.vue     | 58 +++++++++++++++++++
 client/src/helpers/modalService.ts            | 37 ++++++++++++
 client/src/helpers/popover.ts                 |  3 +-
 client/src/helpers/types.ts                   |  2 +
 5 files changed, 114 insertions(+), 5 deletions(-)
 create mode 100644 client/src/components/modals/Confirm2.vue
 create mode 100644 client/src/helpers/modalService.ts

diff --git a/client/src/components/highlights/HighlightPopover.vue b/client/src/components/highlights/HighlightPopover.vue
index acfcdd64..00fa2305 100644
--- a/client/src/components/highlights/HighlightPopover.vue
+++ b/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;
diff --git a/client/src/components/modals/Confirm2.vue b/client/src/components/modals/Confirm2.vue
new file mode 100644
index 00000000..10fb8f05
--- /dev/null
+++ b/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>
diff --git a/client/src/helpers/modalService.ts b/client/src/helpers/modalService.ts
new file mode 100644
index 00000000..6d72670b
--- /dev/null
+++ b/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;
+  },
+};
diff --git a/client/src/helpers/popover.ts b/client/src/helpers/popover.ts
index 299ee943..24e21efe 100644
--- a/client/src/helpers/popover.ts
+++ b/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;
diff --git a/client/src/helpers/types.ts b/client/src/helpers/types.ts
index 43e4f031..9d19b709 100644
--- a/client/src/helpers/types.ts
+++ b/client/src/helpers/types.ts
@@ -22,3 +22,5 @@ export interface FlavorValues {
   showLanguageFilter: boolean;
   showTopicNavigationNumbering: boolean;
 }
+
+export type ResolveReject = (v?: unknown) => void;