Improved modal

components/ReportModal.vue

@@ -8,8 +8,19 @@
     @confirm="report"
     @cancel="close"
   >
+    <transition name="ds-transition-fade">
+      <ds-flex
+        v-if="success"
+        class="hc-modal-success"
+        centered
+      >
+        <sweetalert-icon icon="success" />
+      </ds-flex>
+    </transition>
+
     <!-- eslint-disable-next-line vue/no-v-html -->
     <p v-html="$t(`report.${data.context}.message`, { name: name })" />
+
     <template
       slot="footer"
       slot-scope="{ cancel, confirm, cancelLabel, confirmLabel }"
@@ -37,11 +48,16 @@
 
 <script>
 import gql from 'graphql-tag'
+import { SweetalertIcon } from 'vue-sweetalert-icons'
 
 export default {
   name: 'ReportModal',
+  components: {
+    SweetalertIcon
+  },
   data() {
     return {
+      success: false,
       loading: false,
       disabled: false
     }
@@ -63,6 +79,7 @@ export default {
   watch: {
     isOpen(open) {
       if (open) {
+        this.success = false
         this.disabled = false
         this.loading = false
       }
@@ -75,6 +92,7 @@ export default {
     report() {
       console.log('')
       this.loading = true
+      this.disabled = true
       this.$apollo
         .mutate({
           mutation: gql`
@@ -94,9 +112,9 @@ export default {
           }
         })
         .then(() => {
+          this.success = true
           this.$toast.success('Thanks for reporting!')
-          this.disabled = true
-          this.close()
+          setTimeout(this.close, 1500)
         })
         .catch(err => {
           this.$toast.error(err.message)
@@ -109,3 +127,18 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.hc-modal-success {
+  pointer-events: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: #fff;
+  opacity: 1;
+  z-index: $z-index-modal;
+  border-radius: $border-radius-x-large;
+}
+</style>

package.json

@@ -56,6 +56,7 @@
     "v-tooltip": "^2.0.0-rc.33",
     "vue-count-to": "^1.0.13",
     "vue-izitoast": "1.1.2",
+    "vue-sweetalert-icons": "^3.2.0",
     "vuex-i18n": "^1.11.0"
   },
   "devDependencies": {

yarn.lock

@@ -11691,6 +11691,11 @@ vue-svg-loader@^0.11.0:
     loader-utils "^1.1.0"
     svg-to-vue "^0.3.0"
 
+vue-sweetalert-icons@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/vue-sweetalert-icons/-/vue-sweetalert-icons-3.2.0.tgz#2926d3af5590b81c0ba3b104212922fc1709396d"
+  integrity sha512-N18uG8++ZfdCnXO0gHNTmwpB2mAE8WWrwjGeWGa8CnHu6l1emn4RG6E8r1P9crVJ+fx3R9gTUezC+cdVu0mN7w==
+
 vue-template-compiler@^2.5.17:
   version "2.5.17"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.17.tgz#52a4a078c327deb937482a509ae85c06f346c3cb"