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,69 +179,75 @@
           }
         }, []);
         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
-                };
-                const {chapter} = store.readQuery({query, variables});
-                const index = chapter.contentBlocks.findIndex(contentBlock => contentBlock.id === id);
-                const contentBlocks = removeAtIndex(chapter.contentBlocks, index);
-                const data = {
-                  chapter: {
-                    ...chapter,
-                    contentBlocks
-                  }
-                };
-                store.writeQuery({query, variables, data});
-              }
-          }
+            if (success) {
+              const query = CHAPTER_QUERY;
+              const variables = {
+                id: parent.id,
+              };
+              const {chapter} = store.readQuery({query, variables});
+              const index = chapter.contentBlocks.findIndex(contentBlock => contentBlock.id === id);
+              const contentBlocks = removeAtIndex(chapter.contentBlocks, index);
+              const data = {
+                chapter: {
+                  ...chapter,
+                  contentBlocks,
+                },
+              };
+              store.writeQuery({query, variables, data});
+            }
+          },
         });
       },
       createContentListOrBlocks(contentList) {
         return [{
           type: 'content_list',
           contents: contentList,
-          id: contentList[0].id
+          id: contentList[0].id,
         }];
       },
-    }
+    },
   };
 </script>