Add Toasts with throwing messages on actions and errors

Dual-Ice · May 24, 2020 · f08a0b1 · f08a0b1
1 parent 48cd948
commit f08a0b1
Show file tree

Hide file tree

Showing 12 changed files with 280 additions and 51 deletions.
diff --git a/src/admin/App.vue b/src/admin/App.vue
@@ -5,10 +5,13 @@
     main.content-container
       keep-alive
         router-view
-
+    toast()
 </template>
 <script>
 export default {
+  components: {
+    toast: () => import('./components/partial/Toast')
+  }
 }
 </script>
 <style lang="postcss">

diff --git a/src/admin/components/About/SkillGroup.vue b/src/admin/components/About/SkillGroup.vue
@@ -27,7 +27,7 @@
                 placeholder="Название новой группы"
                 :errorText="validationMessage('tmpGroup', 'category')"
               )
-            .add__form-btns.add__form-btns--colored
+            .add__form-btns.add__form-btns--colored(:class="{ 'blocked': isBlocked }")
               CardBtn(
                 icon="confirm"
                 type="submit"
@@ -61,13 +61,16 @@
               placeholder="100 %"
               :errorText="validationMessage('newSkill', 'percent')"
             )
-          AddBtn(type="submit")
+          AddBtn(
+            :class="{ 'blocked': isBlocked }"
+            type="submit"
+          )
 </template>
 <script>
 import Skill from './Skill'
-import { mapActions } from 'vuex';
 import AddBtn from '../partial/AddBtn'
 import CardBtn from '../partial/CardBtn'
+import { mapActions, mapMutations } from 'vuex'
 import CustomInput from '../partial/CustomInput'
 import { required, minLength, numeric, maxValue } from 'vuelidate/lib/validators'
 export default {
@@ -95,7 +98,8 @@ export default {
         title: '',
         percent: '',
         category: 0
-      }
+      },
+      isBlocked: false
     }
   },
 
@@ -152,6 +156,8 @@ export default {
       ]
     ),
 
+    ...mapMutations('toast', ['showToast']),
+
     switchEdit () {
       this.editMode = !this.editMode
       this.$emit('hide');
@@ -188,27 +194,40 @@ export default {
     async saveGroup () {
       this.$v.tmpGroup.$touch()
       if (!this.$v.tmpGroup.$error) {
-        if (this.tmpGroup.category !== this.skillGroup.category) {
-          this.tmpGroup.id
-            ? await this.updateCategory(this.tmpGroup)
-            : await this.saveCategory(this.tmpGroup.category)
+        try {
+          this.isBlocked = true
+          if (this.tmpGroup.category !== this.skillGroup.category) {
+            this.tmpGroup.id
+              ? await this.updateCategory(this.tmpGroup)
+              : await this.saveCategory(this.tmpGroup.category)
+          }
+          this.switchEdit()
+        } catch ({message}) {
+          this.showToast( { type: 'error', message });
+        } finally {
+          this.isBlocked = false
         }
-
-        this.switchEdit()
       }
     },
 
     async addSkill () {
       this.$v.newSkill.$touch()
       if (!this.$v.newSkill.$error) {
         this.newSkill.category = this.tmpGroup.id;
-        await this.saveSkill(this.newSkill);
-        this.newSkill = {
-          title: '',
-          percent: '',
-          category: 0
+        try {
+          this.isBlocked = true
+          await this.saveSkill(this.newSkill);
+          this.newSkill = {
+            title: '',
+            percent: '',
+            category: 0
+          }
+          this.$v.newSkill.$reset()
+        } catch ({message}) {          
+          this.showToast( { type: 'error', message });
+        } finally {
+          this.isBlocked = false
         }
-        this.$v.newSkill.$reset()
       }
     }
   }

diff --git a/src/admin/components/Login.vue b/src/admin/components/Login.vue
@@ -28,6 +28,7 @@
 <script>
 import Icon from './partial/Icon'
 import axios from '../customAxios'
+import { mapMutations } from 'vuex'
 import CustomInput from './partial/CustomInput'
 import { required, minLength } from 'vuelidate/lib/validators'
 
@@ -60,16 +61,19 @@ export default {
   },
 
   methods: {
+    ...mapMutations('toast', ['showToast']),
+
     async login() {
       this.$v.$touch()
       if (!this.$v.$error) {
         try {
           const response = await axios.post('/login', this.user)
           const token = response.data.token
           localStorage.setItem('user-token', token)
-          await this.$router.replace('/')
+          this.$router.replace('/')
         } catch (error) {
-          console.log(error)
+          const message = error.response.data.error || error.response.data.message
+          this.showToast( { type: 'error', message });
         }
       }
     },

diff --git a/src/admin/components/Reviews/ReviewEdit.vue b/src/admin/components/Reviews/ReviewEdit.vue
@@ -63,8 +63,8 @@
           ).form__btn.form__btn--big {{btnTitle}}           
 </template>
 <script>
-import { mapActions } from 'vuex'
 import Icon from '../partial/Icon'
+import { mapActions, mapMutations } from 'vuex'
 import CustomInput from '../partial/CustomInput'
 import InputTooltip  from '../partial/InputTooltip'
 import { required, minLength } from 'vuelidate/lib/validators'
@@ -142,6 +142,7 @@ export default {
 
   methods: {
     ...mapActions('reviews', ['saveReview', 'updateReview']),
+    ...mapMutations('toast', ['showToast']),
 
     appendFileAndRenderPhoto (e) {
      this.tmpReview.photo = e.target.files[0]
@@ -153,7 +154,12 @@ export default {
           this.image = reader.result
         }
       } catch (error) {
-        console.log(error)
+        this.showToast(
+          {
+            type: 'error',
+            message: 'Ошибка при чтении файла'
+          }
+        )
       }
     },
 
@@ -177,7 +183,7 @@ export default {
 
           this.hide()
         } catch (error) {
-          console.log(error)
+          this.showToast( { type: 'error', message });
         } finally {
           this.isBlocked = false
         }

diff --git a/src/admin/components/Works/WorkEdit.vue b/src/admin/components/Works/WorkEdit.vue
@@ -84,8 +84,8 @@
           ).form__btn.form__btn--big {{btnTitle}}          
 </template>
 <script>
-import { mapActions } from 'vuex'
 import Icon from '../partial/Icon'
+import { mapActions, mapMutations } from 'vuex'
 import CustomInput from '../partial/CustomInput'
 import InputTooltip  from '../partial/InputTooltip'
 import { required, minLength, url } from 'vuelidate/lib/validators'
@@ -178,6 +178,7 @@ export default {
 
   methods: {
     ...mapActions('works', ['saveWork', 'updateWork']),
+    ...mapMutations('toast', ['showToast']),
     
     showInputFile () {
       document.querySelector("#upload-pic").click()
@@ -198,7 +199,12 @@ export default {
           this.image = reader.result
         }
       } catch (error) {
-        console.log(error)
+        this.showToast(
+          {
+            type: 'error',
+            message: 'Ошибка при чтении файла'
+          }
+        )
       }
     },
 
@@ -217,8 +223,8 @@ export default {
           }
 
           this.hide()
-        } catch (error) {
-          console.log(error)
+        } catch ({message}) {
+          this.showToast( { type: 'error', message });
         } finally {
           this.isBlocked = false
         }

diff --git a/src/admin/components/partial/Toast.vue b/src/admin/components/partial/Toast.vue
@@ -0,0 +1,95 @@
+<template lang="pug">
+  .toast-container(:class="{ showed: showed }")
+    .toast(:class="'toast--' + type")
+      .toast__text {{ message }}
+      button(@click="setVisibility(false)").toast__close
+</template>
+<script>
+import { mapState, mapMutations } from 'vuex';
+export default {
+  computed: {
+    ...mapState(
+      'toast', 
+      [
+        'type',
+        'showed',
+        'message'
+      ]
+    )
+  },
+
+  watch: {
+    showed (value) {
+      if (value) {
+        let timeout
+        clearTimeout(timeout)
+        timeout = setTimeout(() => this.setVisibility(false), 3000)
+      }
+    }
+  },
+
+  methods: {
+    ...mapMutations('toast', ['setVisibility'])
+  }
+}
+</script>
+<style lang="postcss">
+  @import '../../../styles/mixins.pcss';
+
+  .toast {
+    &-container {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      position: fixed;
+      bottom: -100%;
+      left: 50%;
+      transform: translateX(-50%);
+      visibility: hidden;
+      transition: 0.3s;
+
+      &.showed {
+        bottom: 0;
+        visibility: visible;
+      }
+    }
+
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+    width: 100%;
+    max-width: 400px;
+    background: #4bb133;
+    padding: 28px 20px 28px 30px;
+
+    @include phones {
+      max-width: 100%;
+    }
+
+    &__close {
+    }
+
+    &--warning {
+      background: #b18333;
+    }
+
+    &--error {
+      background: #b13333;
+    }
+  }
+
+  .toast__text {
+    font-size: 18px;
+    font-weight: 600;
+  }
+
+  .toast__close {
+    width: 20px;
+    height: 20px;
+    background: svg-load('cross.svg', fill=#fff) center center no-repeat;
+    cursor: pointer;
+    margin-left: 20px;
+  }
+</style>
diff --git a/src/admin/store/index.js b/src/admin/store/index.js
@@ -4,12 +4,14 @@ import auth from './modules/auth'
 import works from './modules/works'
 import reviews from './modules/reviews'
 import categories from './modules/categories'
+import toast from './modules/toast'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   modules: {
     auth,
     works,
+    toast,
     reviews,
     categories
   }