Changes in store helper/baselayout/subscription

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>

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>

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
   }, {})