More work on student-page / minor Log & Layout refactor

frontend/src/components/Login.vue

@@ -35,6 +35,7 @@
 
 
 <script>
+  import {mapActions} from 'vuex'
   export default {
     name: 'grady-login',
     data () {
@@ -47,10 +48,17 @@
       }
     },
     methods: {
+      ...mapActions([
+        'getJWTToken',
+        'getExamModule',
+        'getUserRole'
+      ]),
       submit () {
-        this.$store.dispatch('getJWTToken', this.credentials).then(response => {
+        this.getJWTToken(this.credentials).then(() => {
           this.$router.push('/student/')
-        }).catch(_ => {
+          this.getExamModule()
+          this.getUserRole()
+        }).catch(() => {
           this.error = this.$store.state.error
         })
       }

frontend/src/components/base/BaseLayout.vue

@@ -4,26 +4,29 @@
       fixed
       clipped
       app
-      v-model="drawer"
+      permanent
+      :mini-variant.sync="mini"
     >
       <v-toolbar flat>
         <v-list>
           <v-list-tile>
-            <v-list-tile-title class="title">
+            <v-list-tile-action v-if="mini">
+              <v-btn icon @click.native.stop="mini = !mini">
+                <v-icon>chevron_right</v-icon>
+              </v-btn>
+            </v-list-tile-action>
+            <v-list-tile-content class="title">
               {{ examInstance }}
-            </v-list-tile-title>
+            </v-list-tile-content>
+            <v-list-tile-action>
+              <v-btn icon @click.native.stop="mini = !mini">
+                <v-icon>chevron_left</v-icon>
+              </v-btn>
+            </v-list-tile-action>
           </v-list-tile>
         </v-list>
       </v-toolbar>
-      <v-list dense>
-        <v-list-tile exact v-for="(item, i) in navItems" :key="i" :to="item.route">
-          <v-list-tile-content>
-            <v-list-tile-title>
-              {{ item.name }}
-            </v-list-tile-title>
-          </v-list-tile-content>
-        </v-list-tile>
-      </v-list>
+        <slot name="navigation"></slot>
     </v-navigation-drawer>
     <v-toolbar
       app
@@ -34,7 +37,6 @@
       class="grady-toolbar"
     >
       <v-toolbar-title>
-        <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
         <v-avatar>
           <img src="../../assets/brand.png">
         </v-avatar>
@@ -57,10 +59,9 @@
     name: 'base-layout',
     data () {
       return {
-        drawer: true
+        mini: false
       }
     },
-    props: ['navItems'],
     computed: {
       ...mapGetters([
         'gradySpeak'
@@ -87,5 +88,4 @@
   .grady-toolbar {
     font-weight: bold;
   }
-
 </style>

frontend/src/components/student/StudentLayout.vue

 <template>
-  <base-layout
-    :navItems="studentPageNavItems"
-  >
+  <base-layout>
+    <v-list dense slot="navigation">
+      <v-list-tile exact v-for="(item, i) in generalNavItems" :key="i" :to="item.route">
+        <v-list-tile-action>
+          <v-icon>{{ item.icon }}</v-icon>
+        </v-list-tile-action>
+        <v-list-tile-content>
+          <v-list-tile-title>
+            {{ item.name }}
+          </v-list-tile-title>
+        </v-list-tile-content>
+      </v-list-tile>
+      <v-divider></v-divider>
+    <v-list-tile exact v-for="(item, i) in submissionNavItems" :key="i" :to="item.route">
+      <v-list-tile-action>
+        <v-icon>assignment</v-icon>
+      </v-list-tile-action>
+      <v-list-tile-content>
+        <v-list-tile-title>
+          {{ item.name }}
+        </v-list-tile-title>
+      </v-list-tile-content>
+    </v-list-tile>
+    </v-list>
     <router-view></router-view>
   </base-layout>
 </template>
@@ -16,10 +37,12 @@
         generalNavItems: [
           {
             name: 'Overview',
+            icon: 'home',
             route: '/student/'
           },
           {
             name: 'Statistics',
+            icon: 'show_chart',
             route: '/student/'
           }
         ]
@@ -33,9 +56,6 @@
             route: `/student/submission/${index}`
           }
         })
-      },
-      studentPageNavItems: function () {
-        return this.generalNavItems.concat(this.submissionNavItems)
       }
     }
   }

frontend/src/store/store.js

@@ -16,10 +16,10 @@ const store = new Vuex.Store({
   state: {
     token: '',
     loggedIn: false,
-    username: 'username',
-    userRole: 'Student',
+    username: '',
+    userRole: '',
     error: '',
-    examInstance: 'B.Inf 1301 Kohorte 2'
+    examInstance: ''
   },
   getters: {
     gradySpeak: state => {
@@ -40,6 +40,12 @@ const store = new Vuex.Store({
     },
     'LOGOUT': function (state) {
       state.loggedIn = false
+    },
+    'SET_USER_ROLE': function (state, userRole) {
+      state.userRole = userRole
+    },
+    'SET_EXAM_INSTANCE': function (state, examInstance) {
+      state.examInstance = examInstance
     }
   },
   actions: {
@@ -60,6 +66,12 @@ const store = new Vuex.Store({
         }
       }
     },
+    getUserRole (context) {
+      ax.get('api/user-role/').then(response => context.commit('SET_USER_ROLE', response.data.role))
+    },
+    getExamModule (context) {
+      ax.get('api/exam-module/').then(response => context.commit('SET_EXAM_INSTANCE', response.data.exam))
+    },
     logout (store) {
       store.commit('LOGOUT')
       store.commit('SET_JWT_TOKEN', '')