After service calling toast message and some improvements

Author: oguzhan.onder

package-lock.json

@@ -15,10 +15,10 @@
     "@coreui/icons": "^1.0.1",
     "@coreui/utils": "^1.3.1",
     "bootstrap": "^4.4.1",
-    "vue": "~2.6.11",
+    "vue": "~2.6.12",
     "vue-resource": "^1.5.1",
-    "vue-router": "^3.1.6",
-    "vuex": "^3.3.0"
+    "vue-router": "^3.4.4",
+    "vuex": "^3.5.1"
   },
   "browserslist": [
     "> 1%",
@@ -33,10 +33,10 @@
     "cross-env": "^5.0.5",
     "css-loader": "^0.28.7",
     "file-loader": "^1.1.4",
-    "vue-loader": "^13.0.5",
-    "vue-template-compiler": "^2.4.4",
+    "vue-loader": "^13.7.3",
+    "vue-template-compiler": "^2.6.12",
     "webpack": "^3.7.1",
-    "webpack-dev-server": "^2.9.1",
+    "webpack-dev-server": "^2.11.5",
     "js-yaml": ">=3.13.1",
     "sass-loader": "^7.2.0",
     "node-sass": "^4.0.0"

package.json

@@ -1,32 +1,41 @@
 <template>
   <div id="app">
     <router-view></router-view>
-    <CElementCover v-if ="this.$store.getters.getIsLoading"
-      :boundaries="[{ sides: ['top', 'left'], query: '.media-body' }]"
-      :opacity="0.8"
+    <CElementCover v-if="getIsLoading"
+                   :boundaries="[{ sides: ['top', 'left'], query: '.media-body' }]"
+                   :opacity="0.8"
     >
-      <h1 class="d-inline">Loading... </h1><CSpinner size="5xl" color="success"/>
+      <h1 class="d-inline">Loading... </h1>
+      <CSpinner size="5xl" color="success"/>
     </CElementCover>
+    <CToaster :autohide="5000" position="top-right">
+      <MyCToast :show.sync="getMyToast.show" :header="getMyToast.header">
+        <CIcon :height="42" :name="getMyToast.icon"/>
+        <b>{{getMyToast.message}}</b>
+      </MyCToast>
+    </CToaster>
   </div>
 </template>
 
 <script>
 
+  import {mapGetters} from 'vuex';
+  import MyCToast from "./components/MyCToast";
+
 
   export default {
     name: 'app',
+    components: {MyCToast},
     data() {
       return {}
     },
     created() {
-      /*if (this.$store.getters.getIsLogin == null) {
-        this.$store.dispatch("initIsLogin");
-      }*/
-      if (this.$store.getters.getIsLogin) {
+      if (this.getIsLoading) {
         this.$store.dispatch("getTradeResult");
-        //this.$store.dispatch("initApp");
       }
-
+    },
+    computed: {
+      ...mapGetters(["getIsLoading", "getMyToast"]),
     }
   }
 </script>

src/App.vue

@@ -20,7 +20,7 @@ import {
   cibCcVisa,
   cibStripe,
   cibPaypal,
-  cibGooglePay, 
+  cibGooglePay,
   cibCcAmex
 } from '@coreui/icons'
 import {
@@ -41,6 +41,7 @@ import {
   cilCloudDownload,
   cilChartPie,
   cilCheck,
+  cilWarning,
   cilChevronBottom,
   cilChevronTop,
   cilCheckCircle,
@@ -94,6 +95,7 @@ export const iconsSet = Object.assign(
     cilCloudDownload,
     cilChartPie,
     cilCheck,
+    cilWarning,
     cilChevronBottom,
     cilChevronTop,
     cilCheckCircle,
@@ -157,10 +159,10 @@ export const iconsSet = Object.assign(
     cibBehance,
     cibReddit,
     cibVimeo,
-    cibCcMastercard, 
-    cibCcVisa, 
-    cibStripe, 
-    cibPaypal, 
+    cibCcMastercard,
+    cibCcVisa,
+    cibStripe,
+    cibPaypal,
     cibGooglePay,
     cibCcAmex
   }

src/assets/icons/icons.js

@@ -0,0 +1,149 @@
+<template>
+  <transition :name="props.fade ? 'fade' : null" :appear="true">
+    <div
+      v-if="isShowed"
+      class="toast"
+      role="alert"
+      aria-live="assertive"
+      aria-atomic="true"
+    >
+      <div
+        v-if="header !== undefined || $slots.header"
+        class="toast-header"
+      >
+        <slot name="header">
+          <strong class="mr-auto">{{header}}</strong>
+        </slot>
+        <CButtonClose
+          v-if="props.closeButton"
+          @click="close()"
+          class="ml-2 mb-1"
+        />
+      </div>
+      <div class="toast-body">
+        <slot></slot>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+  import {props} from '@coreui/vue/src/components/toast/toast-props'
+  import CButtonClose from '@coreui/vue/src/components/button/CButtonClose'
+
+  export default {
+    name: 'MyCToast',
+    components: {
+      CButtonClose
+    },
+    props: {
+      ...props,
+      show: Boolean,
+      header: String
+    },
+    inject: {
+      toaster: {
+        default: false
+      }
+    },
+    data() {
+      return {
+        isShowed: this.show,
+        hideTimeout: null,
+        closeTimeout: null
+      }
+    },
+    watch: {
+      show: {
+        immediate: true,
+        handler(val) {
+          val ? this.display() : this.close()
+        }
+      }
+    },
+    computed: {
+      directlyDeclaredProps() {
+        return Object.keys(this.$options.propsData)
+      },
+      injectedProps() {
+        return this.toaster && this.toaster.props ? this.toaster.props : {}
+      },
+      props() {
+        return Object.keys(props).reduce((computedProps, key) => {
+          const propIsDirectlyDeclared = this.directlyDeclaredProps.includes(key)
+          const parentPropExists = this.injectedProps[key] !== undefined
+          const propIsInherited = parentPropExists && !propIsDirectlyDeclared
+          computedProps[key] = propIsInherited ? this.injectedProps[key] : this[key]
+          return computedProps
+        }, {})
+      }
+    },
+    methods: {
+      display() {
+        this.isShowed = true
+        this.$nextTick(() => {
+          if (this.props.autohide) {
+            this.setAutohide()
+          }
+        })
+      },
+      close() {
+        this.isShowed = false
+        this.$emit('update:show', false)
+        if (this.$el) {
+          this.$el.removeEventListener('mouseover', this.onHover)
+          this.$el.removeEventListener('mouseover', this.restoreHiddingToast)
+          this.$el.removeEventListener('mouseout', this.onHoverOut)
+        }
+
+      },
+      setHiddingMode() {
+        this.isShowed = false;
+        this.$el.removeEventListener('mouseover', this.onHover)
+        this.closeTimeout = setTimeout(() => this.close(), 1500)
+        this.$el.addEventListener('mouseover', this.restoreHiddingToast)
+
+
+      },
+      restoreHiddingToast() {
+        clearTimeout(this.closeTimeout)
+        this.display()
+      },
+      onHover() {
+        this.$el.removeEventListener('mouseover', this.onHover)
+        clearTimeout(this.hideTimeout)
+        this.$el.addEventListener('mouseout', this.onHoverOut)
+
+
+      },
+      onHoverOut() {
+        this.$el.removeEventListener('mouseout', this.onHoverOut)
+        this.setAutohide()
+      },
+      setAutohide() {
+        this.hideTimeout = setTimeout(() => {
+          this.setHiddingMode()
+        }, this.props.autohide)
+        this.$el.addEventListener('mouseover', this.onHover)
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .toast {
+    opacity: inherit;
+  }
+
+  .fade-enter-active {
+    transition: opacity .5s;
+  }
+
+  .fade-leave-active {
+    transition: opacity 2s;
+  }
+
+  .fade-enter, .fade-leave-to {
+    opacity: 0;
+  }
+</style>

src/components/MyCToast.vue

@@ -6,59 +6,63 @@ export const setTradeResult = ({state, commit}, tradeResult) => {
       if (response) {
         commit("updateTradeResult", response.data);
       }
-    });
+      util.common.control(response);
+    }).catch(error => {
+    util.common.control(error)
+  });
 };
 
 export const getTradeResult = ({commit}) => {
-  commit("setIsLoading", true);
   util.service.get("trade/result")
     .then(response => {
       if (response) {
         commit("updateTradeResult", response.data);
       }
-      commit("setIsLoading", false);
+      util.common.control(response);
     }).catch(error => {
     util.common.control(error)
   })
 };
 
-export const registerConfirm = (vueContext,param) => {
+export const registerConfirm = (vueContext, param) => {
   return util.service.get("user/registrationConfirm/" + param)
     .then(response => {
       if (response) {
+        util.common.control(response);
         return response;
       }
     }).catch(error => {
-    util.common.control(error)
-  })
+      util.common.control(error)
+    })
 };
 
 
 export const login = (vueContext, loginData) => {
   loginData.password = util.randomCode(loginData.password);
   loginData.username = util.randomCode(loginData.username);
-  vueContext.commit("setIsLoading", true);
   return util.service.post("auth/login", loginData)
     .then(response => {
-      loginData = {};
+      loginData.password = null;
+      loginData.username = null;
       if (response) {
         util.common.loginSuccessfully(response.data);
-        //vueContext.dispatch("initApp");
         vueContext.dispatch("getTradeResult");
         util.common.routePush("dashboard");
+        util.common.control(response);
       }
-      vueContext.commit("setIsLoading", false);
     }).catch(error => {
-      loginData = {};
+      loginData.password = null;
+      loginData.username = null;
+      util.common.control(error);
     });
 };
 
-export const logout = (vueContext) => {
+export const logout = () => {
   return util.service.post("auth/logout")
     .then(res => {
       if (res) {
         util.common.logoutSuccessfully();
-        util.common.routePush("login");
+        util.common.control(res);
       }
     }).catch(err => {
       util.common.control(err);
@@ -71,8 +75,11 @@ export const userRegister = (vueContext, registerData) => {
       if (response) {
         return response;
       }
+      util.common.control(response);
+
     }).catch(error => {
       registerData = {};
+      util.common.control(error);
     })
 };
 

src/store/actions.js

@@ -13,3 +13,7 @@ export const getIsLogin = (state) =>{
 export const getIsLoading = (state) =>{
   return state.isLoading;
 }
+
+export const getMyToast = (state)=>{
+  return state.myToast;
+}