Resolve "Frontend Refactor"

Start of #118 (closed)

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>