Add confirmation dialog to content block deletion

client/src/components/ContentBlock.vue

@@ -86,6 +86,7 @@
   import PopoverLink from '@/components/ui/PopoverLink';
   import {removeAtIndex} from '@/graphql/immutable-operations';
   import {EDIT_CONTENT_BLOCK_PAGE} from '@/router/module.names';
+
   const ContentComponent = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ContentComponent');
 
   const instruments = {
@@ -100,16 +101,16 @@
     props: {
       contentBlock: {
         type: Object,
-        default: () => ({})
+        default: () => ({}),
       },
       parent: {
         type: Object,
-        default: () => ({})
+        default: () => ({}),
       },
       editMode: {
         type: Boolean,
-        default: true
+        default: true,
-      }
+      },
     },
 
     mixins: [me],
@@ -120,7 +121,7 @@
       AddContentButton,
       VisibilityAction,
       MoreOptionsWidget,
-      UserWidget
+      UserWidget,
     },
 
     computed: {
@@ -178,46 +179,52 @@
           }
         }, []);
         return Object.assign({}, this.contentBlock, {
-          contents: newContent
+          contents: newContent,
         });
       },
       hidden() {
         return hidden({
           block: this.contentBlock,
           schoolClass: this.schoolClass,
-          type: CONTENT_TYPE
+          type: CONTENT_TYPE,
         });
       },
       root() {
         // we need the root content block id, not the generated content block if inside a content list block
         return this.contentBlock.root ? this.contentBlock.root : this.contentBlock.id;
-      }
+      },
     },
     methods: {
       editContentBlock(contentBlock) {
         const route = {
           name: EDIT_CONTENT_BLOCK_PAGE,
           params: {
-            id: contentBlock.id
+            id: contentBlock.id,
-          }
+          },
         };
         this.$router.push(route);
       },
       deleteContentBlock(contentBlock) {
+        this.$modal.open('confirm').then(() => {
+            this.doDeleteContentBlock(contentBlock);
+          })
+          .catch();
+      },
+      doDeleteContentBlock(contentBlock) {
         const parent = this.parent;
         const id = contentBlock.id;
         this.$apollo.mutate({
           mutation: DELETE_CONTENT_BLOCK_MUTATION,
           variables: {
             input: {
-              id
+              id,
-            }
+            },
           },
           update(store, {data: {deleteContentBlock: {success}}}) {
             if (success) {
               const query = CHAPTER_QUERY;
               const variables = {
-                  id: parent.id
+                id: parent.id,
               };
               const {chapter} = store.readQuery({query, variables});
               const index = chapter.contentBlocks.findIndex(contentBlock => contentBlock.id === id);
@@ -225,22 +232,22 @@
               const data = {
                 chapter: {
                   ...chapter,
-                    contentBlocks
+                  contentBlocks,
-                  }
+                },
               };
               store.writeQuery({query, variables, data});
             }
-          }
+          },
         });
       },
       createContentListOrBlocks(contentList) {
         return [{
           type: 'content_list',
           contents: contentList,
-          id: contentList[0].id
+          id: contentList[0].id,
         }];
       },
-    }
+    },
   };
 </script>