Add confirmation modal, refactor modal components

client/src/App.vue

@@ -23,13 +23,8 @@
   import ScrollUp from '@/components/ScrollUp';
   import ReadOnlyBanner from '@/components/ReadOnlyBanner';
 
-  const Modal = () => import(/* webpackChunkName: "modals" */'@/components/Modal');
-  const FullscreenImage = () => import(/* webpackChunkName: "modals" */'@/components/FullscreenImage');
-  const FullscreenInfographic = () => import(/* webpackChunkName: "modals" */'@/components/FullscreenInfographic');
-  const FullscreenVideo = () => import(/* webpackChunkName: "modals" */'@/components/FullscreenVideo');
-  const DeactivatePerson = () => import(/* webpackChunkName: "modals" */'@/components/profile/DeactivatePerson');
-  const SnapshotCreated = () => import(/* webpackChunkName: "modals" */'@/components/modules/SnapshotCreated');
-  const ChangeVisibility = () => import(/* webpackChunkName: "modals" */'@/components/rooms/ChangeVisibility');
+  import modals from '@/components/modals';
+
   const NewContentBlockWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/content-block-form/NewContentBlockWizard');
   const EditContentBlockWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/content-block-form/EditContentBlockWizard');
   const NewRoomEntryWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/rooms/room-entries/NewRoomEntryWizard');
@@ -60,7 +55,6 @@
       PublicLayout,
       BlankLayout,
       SplitLayout,
-      Modal,
       NewContentBlockWizard,
       EditContentBlockWizard,
       NewRoomEntryWizard,
@@ -72,12 +66,7 @@
       EditNoteWizard,
       EditClassNameWizard,
       EditTeamNameWizard,
-      FullscreenImage,
-      FullscreenInfographic,
-      FullscreenVideo,
-      DeactivatePerson,
-      SnapshotCreated,
-      ChangeVisibility,
+      ...modals
     },
 
     computed: {

client/src/components/modals/Confirm.vue

@@ -0,0 +1,67 @@
+<template>
+  <modal
+    class="confirm-dialog"
+    :small="true"
+  >
+    <template #header>
+      <h3 class="confirm-dialog__heading">
+        Bestätigung
+      </h3>
+    </template>
+    <p class="confirm-dialog__content">
+      Wollen Sie diesen Eintrag wirklich löschen?
+    </p>
+    <template #footer>
+      <div>
+        <a
+          class="button button--primary"
+          data-cy="modal-save-button"
+          @click="confirm"
+        >
+          Bestätigen
+        </a>
+        <a
+          class="button"
+          data-cy="modal-cancel-button"
+          @click="cancel"
+        >
+          Abbrechen
+        </a>
+      </div>
+    </template>
+  </modal>
+</template>
+
+<script>
+  import Modal from '@/components/Modal';
+  export default {
+    components: {
+      Modal
+    },
+
+    methods: {
+      confirm() {
+        this.$modal.confirm();
+      },
+      cancel() {
+        this.$modal.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/index.js

@@ -0,0 +1,19 @@
+const Modal = () => import(/* webpackChunkName: "modals" */'@/components/Modal');
+const FullscreenImage = () => import(/* webpackChunkName: "modals" */'@/components/FullscreenImage');
+const FullscreenInfographic = () => import(/* webpackChunkName: "modals" */'@/components/FullscreenInfographic');
+const FullscreenVideo = () => import(/* webpackChunkName: "modals" */'@/components/FullscreenVideo');
+const DeactivatePerson = () => import(/* webpackChunkName: "modals" */'@/components/profile/DeactivatePerson');
+const SnapshotCreated = () => import(/* webpackChunkName: "modals" */'@/components/modules/SnapshotCreated');
+const ChangeVisibility = () => import(/* webpackChunkName: "modals" */'@/components/rooms/ChangeVisibility');
+const Confirm = () => import(/* webpackChunkName: "modals" */'@/components/modals/Confirm');
+
+export default {
+  Modal,
+  FullscreenImage,
+  FullscreenInfographic,
+  FullscreenVideo,
+  DeactivatePerson,
+  SnapshotCreated,
+  ChangeVisibility,
+  Confirm,
+};

client/src/pages/createContentBlock.vue

@@ -190,6 +190,15 @@
         }
       },
       remove(outer, inner) {
+        this.$modal.open('confirm')
+        .then(() => {
+          this.executeRemoval(outer, inner);
+        })
+        .catch(() => {
+
+        });
+      },
+      executeRemoval(outer, inner) {
         if (inner === undefined) {
           // not a list item container, just remove the element from the outer array
           this.contentBlock.contents = removeAtIndex(this.contentBlock.contents, outer);