Add New SweetAlert & Notification Components

resources/assets/js/store/index.js

@@ -26,6 +26,7 @@ import estimateTemplate from './modules/estimate-template'
 import invoiceTemplate from './modules/invoice-template'
 import search from './modules/search'
 import notes from './modules/notes'
+import notification from './modules/notification'
 
 Vue.use(Vuex)
 
@@ -76,5 +77,6 @@ export default new Vuex.Store({
     invoiceTemplate,
     search,
     notes,
+    notification,
   },
 })

resources/assets/js/store/modules/auth/actions.js

@@ -13,7 +13,6 @@ export const login = ({ commit }, data) => {
           commit('user/' + userTypes.RESET_CURRENT_USER, null, { root: true })
           commit(rootTypes.UPDATE_APP_LOADING_STATUS, false, { root: true })
 
-          window.toastr['success']('Login Successful')
           resolve(response)
         })
         .catch((err) => {
@@ -28,7 +27,7 @@ export const setLogoutFalse = ({ state, commit }) => {
   commit(types.SET_LOGOUT, false)
 }
 
-export const logout = ({ state, commit }) => {
+export const logout = ({ state, commit, dispatch }) => {
   return new Promise((resolve, reject) => {
     if (state.isLoggedOut) {
       resolve()
@@ -40,7 +39,14 @@ export const logout = ({ state, commit }) => {
       .get('/auth/logout')
       .then(() => {
         router.push('/login')
-        window.toastr['success']('Logged out!', 'Success')
+        dispatch(
+          'notification/showNotification',
+          {
+            type: 'success',
+            message: 'Logged out successfully.',
+          },
+          { root: true }
+        )
       })
       .catch((err) => {
         router.push('/login')

resources/assets/js/store/modules/notification/actions.js

@@ -0,0 +1,27 @@
+import * as types from './mutation-types'
+
+export const showNotification = ({ commit, dispatch, state }, payload) => {
+  commit(types.SHOW_NOTIFICATION, true)
+
+  if (payload.type) {
+    commit(types.SET_NOTIFICATION_TYPE, payload.type)
+  }
+  if (payload.title) {
+    commit(types.SET_TITLE, payload.title)
+  }
+  if (payload.autoHide) {
+    commit(types.SET_AUTO_HIDE, payload.autoHide)
+  }
+  if (payload.message) {
+    commit(types.SET_MESSAGE, payload.message)
+  }
+}
+
+export const hideNotification = ({ commit, dispatch, state }) => {
+  commit(types.RESET_DATA)
+  commit(types.HIDE_NOTIFICATION, false)
+}
+
+export const resetNotificationData = ({ commit, dispatch, state }) => {
+  commit(types.RESET_DATA)
+}

resources/assets/js/store/modules/notification/getters.js

@@ -0,0 +1,5 @@
+export const notificationActive = (state) => state.active
+export const notificationTitle = (state) => state.title
+export const notificationMessage = (state) => state.message
+export const notificationAutoHide = (state) => state.autoHide
+export const notificationType = (state) => state.type

resources/assets/js/store/modules/notification/index.js

@@ -0,0 +1,23 @@
+import mutations from './mutations'
+import * as actions from './actions'
+import * as getters from './getters'
+
+const initialState = {
+  active: false,
+  autoHide: true,
+  title: '',
+  message: '',
+  type: '',
+}
+
+export default {
+  namespaced: true,
+
+  state: initialState,
+
+  getters: getters,
+
+  actions: actions,
+
+  mutations: mutations,
+}

resources/assets/js/store/modules/notification/mutation-types.js

@@ -0,0 +1,7 @@
+export const SHOW_NOTIFICATION = 'SHOW_NOTIFICATION'
+export const HIDE_NOTIFICATION = 'HIDE_NOTIFICATION'
+export const SET_TITLE = 'SET_TITLE'
+export const SET_AUTO_HIDE = 'SET_AUTO_HIDE'
+export const SET_MESSAGE = 'SET_MESSAGE'
+export const SET_NOTIFICATION_TYPE = 'SET_NOTIFICATION_TYPE'
+export const RESET_DATA = 'RESET_DATA'

resources/assets/js/store/modules/notification/mutations.js

@@ -0,0 +1,33 @@
+import * as types from './mutation-types'
+
+export default {
+  [types.SHOW_NOTIFICATION](state, data) {
+    state.active = data
+  },
+
+  [types.HIDE_NOTIFICATION](state, data) {
+    state.active = data
+  },
+
+  [types.SET_TITLE](state, data) {
+    state.title = data
+  },
+
+  [types.SET_AUTO_HIDE](state, data) {
+    state.autoHide = data
+  },
+
+  [types.SET_MESSAGE](state, data) {
+    state.message = data
+  },
+
+  [types.SET_NOTIFICATION_TYPE](state, data) {
+    state.type = data
+  },
+
+  [types.RESET_DATA](state) {
+    state.active = false
+    state.description = ''
+    state.title = ''
+  },
+}