From af1468914ffb046141de4b2ae2868af069bee8be Mon Sep 17 00:00:00 2001
From: "robinwilliam.hundt" <robinwilliam.hundt@stud.uni-goettingen.de>
Date: Sun, 10 Dec 2017 21:55:40 +0100
Subject: [PATCH] More work on student-page / minor Log & Layout refactor
---
frontend/src/components/Login.vue | 12 +++++--
frontend/src/components/base/BaseLayout.vue | 32 +++++++++----------
.../src/components/student/StudentLayout.vue | 32 +++++++++++++++----
frontend/src/store/store.js | 18 +++++++++--
4 files changed, 67 insertions(+), 27 deletions(-)
diff --git a/frontend/src/components/Login.vue b/frontend/src/components/Login.vue
index 92e3a906..1344def4 100644
--- a/frontend/src/components/Login.vue
+++ b/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
})
}
diff --git a/frontend/src/components/base/BaseLayout.vue b/frontend/src/components/base/BaseLayout.vue
index 1b6b8109..b3c9950c 100644
--- a/frontend/src/components/base/BaseLayout.vue
+++ b/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>
diff --git a/frontend/src/components/student/StudentLayout.vue b/frontend/src/components/student/StudentLayout.vue
index b55f8563..bc313774 100644
--- a/frontend/src/components/student/StudentLayout.vue
+++ b/frontend/src/components/student/StudentLayout.vue
@@ -1,7 +1,28 @@
<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)
}
}
}
diff --git a/frontend/src/store/store.js b/frontend/src/store/store.js
index 6e8e4912..9d5acae0 100644
--- a/frontend/src/store/store.js
+++ b/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', '')
--
GitLab