setup messages

Author: rockstarr-programmerr

src/App.vue

@@ -1,10 +1,11 @@
 <template>
-  <div>
+  <v-app id="keep-learning-app">
     <component v-if="initDone" :is="layout"/>
-    <v-app v-else>
-      <v-progress-linear indeterminate></v-progress-linear>
-    </v-app>
-  </div>
+    <v-progress-linear
+      v-else
+      indeterminate
+    ></v-progress-linear>
+  </v-app>
 </template>
 
 <script lang="ts">

src/layouts/LayoutDefault.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app id="keep-learning-app">
+  <div>
     <v-app-bar
       app
       color="primary"
@@ -45,6 +45,23 @@
       </slot>
     </v-main>
 
+    <v-snackbar
+      :value="messageShow"
+      @input="setMessage"
+    >
+      {{ messageText }}
+      <template #action="{ attrs }">
+        <v-btn
+          color="pink"
+          text
+          v-bind="attrs"
+          @click="hideMessage"
+        >
+          Close
+        </v-btn>
+      </template>
+    </v-snackbar>
+
     <!--  TODO: is this needed?
     <v-bottom-navigation
       app
@@ -58,19 +75,29 @@
       <v-spacer></v-spacer>
     </v-bottom-navigation>
     -->
-  </v-app>
+  </div>
 </template>
 
 <script lang="ts">
 import { User } from '@/interfaces/user'
 import { Vue, Component } from 'vue-property-decorator'
-import { mapGetters } from 'vuex'
+import { mapGetters, mapMutations, mapState } from 'vuex'
 import KLAvatar from '@/components/KLAvatar.vue'
 
 @Component({
   computed: {
     ...mapGetters({
       user: 'account/loggedInUser'
+    }),
+    ...mapState('message', {
+      messageShow: 'show',
+      messageText: 'text'
+    })
+  },
+  methods: {
+    ...mapMutations('message', {
+      showMessage: 'SHOW_MESSAGE',
+      hideMessage: 'HIDE_MESSAGE'
     })
   },
   components: {
@@ -79,6 +106,19 @@ import KLAvatar from '@/components/KLAvatar.vue'
 })
 export default class LayoutDefault extends Vue {
   user!: User
+
+  messageShow!: boolean
+  messageText!: string
+  showMessage!: CallableFunction
+  hideMessage!: CallableFunction
+
+  setMessage (show: boolean): void {
+    if (show) {
+      this.showMessage()
+    } else {
+      this.hideMessage()
+    }
+  }
 }
 </script>
 

src/layouts/LayoutNoAppbar.vue

@@ -1,9 +1,7 @@
 <template>
-  <v-app>
-    <v-main>
-      <router-view/>
-    </v-main>
-  </v-app>
+  <v-main>
+    <router-view/>
+  </v-main>
 </template>
 
 <script lang="ts">

src/store/index.ts

@@ -3,6 +3,7 @@ import Vuex from 'vuex'
 import { account } from './account'
 import { classroom } from './classroom'
 import { readingExercise } from './reading-exercises'
+import { message } from './message'
 
 Vue.use(Vuex)
 
@@ -20,6 +21,7 @@ export default new Vuex.Store({
   modules: {
     account,
     classroom,
-    readingExercise
+    readingExercise,
+    message
   }
 })

src/store/message.ts

@@ -0,0 +1,29 @@
+import { Module } from 'vuex'
+import { RootState } from './index'
+
+declare interface MessageState {
+  show: boolean;
+  text: string;
+  color: string;
+}
+
+export const message: Module<MessageState, RootState> = {
+  namespaced: true,
+
+  state: {
+    show: false,
+    text: '',
+    color: 'success'
+  },
+
+  mutations: {
+    SHOW_MESSAGE (state, text) {
+      state.text = text
+      state.show = true
+    },
+
+    HIDE_MESSAGE (state) {
+      state.show = false
+    }
+  }
+}

src/views/classroom/ClassroomStudents.vue

@@ -136,7 +136,7 @@ import { VForm } from '@/interfaces/vuetify'
 import { snakeCaseToCamelCase, unexpectedExc } from '@/utils'
 import { assertErrCode, status } from '@/utils/status-codes'
 import { Vue, Component } from 'vue-property-decorator'
-import { mapState } from 'vuex'
+import { mapMutations, mapState } from 'vuex'
 import KLDialogConfirm from '@/components/KLDialogConfirm.vue'
 import { Api } from '@/api'
 
@@ -146,6 +146,11 @@ import { Api } from '@/api'
       classroom: 'currentClassroom'
     })
   },
+  methods: {
+    ...mapMutations('message', {
+      showMessage: 'SHOW_MESSAGE'
+    })
+  },
   components: {
     KLDialogConfirm
   }
@@ -185,6 +190,7 @@ export default class ClassroomStudents extends Vue {
    */
   showAddStudent = false
   loadingAddStudent = false
+  showMessage!: CallableFunction
 
   name = ''
   email = ''
@@ -206,6 +212,7 @@ export default class ClassroomStudents extends Vue {
     this.$store.dispatch('classroom/addStudents', [payload])
       .then(() => {
         (this.$refs.addStudentForm as VForm).reset()
+        this.showMessage('Student added.')
       })
       .catch(err => {
         if (assertErrCode(err, status.HTTP_400_BAD_REQUEST)) {
@@ -249,6 +256,7 @@ export default class ClassroomStudents extends Vue {
     this.$store.dispatch('classroom/removeStudents', [payload])
       .then(() => {
         this.removeConfirm = false
+        this.showMessage('Student removed.')
       })
       .catch(unexpectedExc)
       .finally(() => {
@@ -263,6 +271,9 @@ export default class ClassroomStudents extends Vue {
     Api.classroom.resendPasswordEmail(this.classroom.pk, {
       email: student.email
     })
+      .then(() => {
+        this.showMessage('Email sent.')
+      })
       .catch(unexpectedExc)
   }
 }