From 77eeea971d7c6ab509db0b5a26c8ef682cd2e6db Mon Sep 17 00:00:00 2001
From: "robinwilliam.hundt" <robinwilliam.hundt@stud.uni-goettingen.de>
Date: Tue, 15 May 2018 22:59:56 +0200
Subject: [PATCH] Changes in store helper/baselayout/subscription
---
frontend/src/components/BaseLayout.vue | 84 ++++++-------
.../subscriptions/SubscriptionList.vue | 113 +++++++++---------
frontend/src/util/helpers.js | 4 +-
3 files changed, 103 insertions(+), 98 deletions(-)
diff --git a/frontend/src/components/BaseLayout.vue b/frontend/src/components/BaseLayout.vue
index c2974f03..9ab1ba03 100644
--- a/frontend/src/components/BaseLayout.vue
+++ b/frontend/src/components/BaseLayout.vue
@@ -84,53 +84,53 @@
</template>
<script>
-import { mapGetters, mapState } from 'vuex'
-import {uiMut} from '@/store/modules/ui'
-import { createComputedGetterSetter } from '@/util/helpers'
-import UserOptions from '@/components/UserOptions'
-export default {
- name: 'base-layout',
- components: {UserOptions},
- computed: {
- ...mapGetters([
- 'gradySpeak'
- ]),
- ...mapState({
- username: state => state.authentication.user.username,
- userRole: state => state.authentication.user.role
- }),
- darkMode: createComputedGetterSetter({
- path: 'ui.darkMode',
- mutation: uiMut.SET_DARK_MODE
- }),
- darkModeUnlocked: createComputedGetterSetter({
- path: 'ui.darkModeUnlocked',
- mutation: uiMut.SET_DARK_MODE_UNLOCKED
- }),
- mini: {
- get: function () {
- return this.$store.state.ui.sideBarCollapsed
+ import { mapGetters, mapState } from 'vuex'
+ import {uiMut} from '@/store/modules/ui'
+ import { mapStateToComputedGetterSetter } from '@/util/helpers'
+ export default {
+ name: 'base-layout',
+ computed: {
+ ...mapGetters([
+ 'gradySpeak'
+ ]),
+ ...mapState({
+ username: state => state.authentication.username,
+ userRole: state => state.authentication.userRole
+ }),
+ ...mapStateToComputedGetterSetter({
+ pathPrefix: 'ui',
+ items: [
+ {
+ name: 'darkMode',
+ mutation: uiMut.SET_DARK_MODE
+ },
+ {
+ name: 'darkModeUnlocked',
+ mutation: uiMut.SET_DARK_MODE_UNLOCKED
+ },
+ {
+ name: 'mini',
+ path: 'sideBarCollapsed',
+ mutation: uiMut.SET_SIDEBAR_COLLAPSED
+ }
+ ]
+ }),
+ production () {
+ return process.env.NODE_ENV === 'production'
},
- set: function (collapsed) {
- this.$store.commit(uiMut.SET_SIDEBAR_COLLAPSED, collapsed)
+ productionBrandUrl () {
+ return `https://${window.location.host}/static/img/brand.png`
}
},
- production () {
- return process.env.NODE_ENV === 'production'
- },
- productionBrandUrl () {
- return `https://${window.location.host}/static/img/brand.png`
- }
- },
- methods: {
- logout () {
- this.$store.dispatch('logout')
- },
- logFeedbackClick () {
- this.darkModeUnlocked = true
+ methods: {
+ logout () {
+ this.$store.dispatch('logout')
+ },
+ logFeedbackClick () {
+ this.darkModeUnlocked = true
+ }
}
}
-}
</script>
<style scoped>
diff --git a/frontend/src/components/subscriptions/SubscriptionList.vue b/frontend/src/components/subscriptions/SubscriptionList.vue
index 4ce05b34..cd63a0c0 100644
--- a/frontend/src/components/subscriptions/SubscriptionList.vue
+++ b/frontend/src/components/subscriptions/SubscriptionList.vue
@@ -2,7 +2,7 @@
<v-card>
<v-toolbar color="teal" :dense="sidebar">
<v-toolbar-side-icon><v-icon>assignment</v-icon></v-toolbar-side-icon>
- <v-toolbar-title v-if="!sidebar || (sidebar && !sideBarCollapsed)" style="min-width: fit-content;">
+ <v-toolbar-title v-if="showDetail" style="min-width: fit-content;">
Tasks
</v-toolbar-title>
<v-spacer/>
@@ -16,7 +16,7 @@
/>
</v-btn>
</v-toolbar>
- <v-tabs grow color="teal lighten-1" v-model="selectedStage">
+ <v-tabs grow color="teal lighten-1" v-model="selectedStage" v-if="showDetail">
<v-tab v-for="(item, i) in stagesReadable" :key="i">
{{item}}
</v-tab>
@@ -28,62 +28,65 @@
</template>
<script>
-import {mapGetters, mapActions, mapState} from 'vuex'
-import SubscriptionCreation from '@/components/subscriptions/SubscriptionCreation'
-import SubscriptionForList from '@/components/subscriptions/SubscriptionForList'
-import SubscriptionsForStage from '@/components/subscriptions/SubscriptionsForStage'
+ import {mapGetters, mapActions, mapState} from 'vuex'
+ import SubscriptionCreation from '@/components/subscriptions/SubscriptionCreation'
+ import SubscriptionForList from '@/components/subscriptions/SubscriptionForList'
+ import SubscriptionsForStage from '@/components/subscriptions/SubscriptionsForStage'
-export default {
- components: {
- SubscriptionsForStage,
- SubscriptionForList,
- SubscriptionCreation},
- name: 'subscription-list',
- props: {
- sidebar: {
- type: Boolean,
- default: false
+ export default {
+ components: {
+ SubscriptionsForStage,
+ SubscriptionForList,
+ SubscriptionCreation},
+ name: 'subscription-list',
+ props: {
+ sidebar: {
+ type: Boolean,
+ default: false
+ }
+ },
+ data () {
+ return {
+ selectedStage: null,
+ updating: false
+ }
+ },
+ computed: {
+ ...mapState({
+ sideBarCollapsed: state => state.ui.sideBarCollapsed
+ }),
+ ...mapGetters({
+ subscriptions: 'getSubscriptionsGroupedByType',
+ stages: 'availableStages',
+ stagesReadable: 'availableStagesReadable'
+ }),
+ showDetail () {
+ return !this.sidebar || (this.sidebar && !this.sideBarCollapsed)
+ }
+ },
+ methods: {
+ ...mapActions([
+ 'updateSubmissionTypes',
+ 'getCurrentAssignment',
+ 'getExamTypes',
+ 'subscribeToAll',
+ 'cleanAssignmentsFromSubscriptions'
+ ]),
+ async getSubscriptions () {
+ this.updating = true
+ const subscriptions = await this.$store.dispatch('getSubscriptions')
+ this.updating = false
+ return subscriptions
+ }
+ },
+ created () {
+ const typesAndSubscriptions = [this.updateSubmissionTypes(), this.getSubscriptions()]
+ Promise.all(typesAndSubscriptions).then(() => {
+ this.subscribeToAll()
+ this.cleanAssignmentsFromSubscriptions()
+ })
}
- },
- data () {
- return {
- selectedStage: null,
- updating: false
- }
- },
- computed: {
- ...mapState({
- sideBarCollapsed: state => state.ui.sideBarCollapsed
- }),
- ...mapGetters({
- subscriptions: 'getSubscriptionsGroupedByType',
- stages: 'availableStages',
- stagesReadable: 'availableStagesReadable'
- })
- },
- methods: {
- ...mapActions([
- 'updateSubmissionTypes',
- 'getCurrentAssignment',
- 'getExamTypes',
- 'subscribeToAll',
- 'cleanAssignmentsFromSubscriptions'
- ]),
- async getSubscriptions () {
- this.updating = true
- const subscriptions = await this.$store.dispatch('getSubscriptions')
- this.updating = false
- return subscriptions
- }
- },
- created () {
- const typesAndSubscriptions = [this.updateSubmissionTypes(), this.getSubscriptions()]
- Promise.all(typesAndSubscriptions).then(() => {
- this.subscribeToAll()
- this.cleanAssignmentsFromSubscriptions()
- })
}
-}
</script>
<style scoped>
diff --git a/frontend/src/util/helpers.js b/frontend/src/util/helpers.js
index c18c724f..a582d317 100644
--- a/frontend/src/util/helpers.js
+++ b/frontend/src/util/helpers.js
@@ -51,7 +51,9 @@ export function createComputedGetterSetter ({path, mutation, namespace}) {
*/
export function mapStateToComputedGetterSetter ({namespace = '', pathPrefix = '', items = []}) {
return items.reduce((acc, curr) => {
- let path = pathPrefix ? `${pathPrefix}.${curr.path}` : curr.path
+ // if no path is give, use name
+ const itemPath = curr.path || curr.name
+ const path = pathPrefix ? `${pathPrefix}.${itemPath}` : itemPath
acc[curr.name] = createComputedGetterSetter({...curr, path, namespace})
return acc
}, {})
--
GitLab