Move header information to store

frontend/components/containers/LabelList.vue

@@ -74,29 +74,13 @@
 </template>
 
 <script>
-import { mapState, mapActions, mapMutations } from 'vuex'
+import { mapState, mapActions, mapMutations, mapGetters } from 'vuex'
 import { colorRules, labelNameRules } from '@/rules/index'
 import { idealColor } from '~/plugins/utils'
 
 export default {
   data() {
     return {
-      headers: [
-        {
-          text: 'Name',
-          align: 'left',
-          value: 'text'
-        },
-        {
-          text: 'Shortkey',
-          value: 'suffix_key'
-        },
-        {
-          text: 'Color',
-          sortable: false,
-          value: 'background_color'
-        }
-      ],
       search: '',
       colorRules,
       labelNameRules
@@ -105,6 +89,7 @@ export default {
 
   computed: {
     ...mapState('labels', ['items', 'selected', 'loading']),
+    ...mapGetters('labels', ['headers']),
 
     keys() {
       return 'abcdefghijklmnopqrstuvwxyz'.split('')

frontend/components/containers/MemberList.vue

@@ -48,24 +48,12 @@
 </template>
 
 <script>
-import { mapState, mapActions, mapMutations } from 'vuex'
+import { mapState, mapActions, mapMutations, mapGetters } from 'vuex'
 import { roleRules } from '@/rules/index'
 
 export default {
   data() {
     return {
-      headers: [
-        {
-          text: 'Name',
-          align: 'left',
-          sortable: false,
-          value: 'username'
-        },
-        {
-          text: 'Role',
-          value: 'role'
-        }
-      ],
       roles: [
         'Admin',
         'Member'
@@ -77,7 +65,8 @@ export default {
   },
 
   computed: {
-    ...mapState('members', ['items', 'selected', 'loading'])
+    ...mapState('members', ['items', 'selected', 'loading']),
+    ...mapGetters('members', ['headers'])
   },
 
   created() {

frontend/components/containers/ProjectList.vue

@@ -29,32 +29,18 @@
 </template>
 
 <script>
-import { mapState, mapActions, mapMutations } from 'vuex'
+import { mapState, mapActions, mapMutations, mapGetters } from 'vuex'
 
 export default {
   data() {
     return {
-      headers: [
-        {
-          text: 'Name',
-          align: 'left',
-          value: 'name'
-        },
-        {
-          text: 'Description',
-          value: 'description'
-        },
-        {
-          text: 'Type',
-          value: 'project_type'
-        }
-      ],
       search: ''
     }
   },
 
   computed: {
-    ...mapState('projects', ['projects', 'selected', 'loading'])
+    ...mapState('projects', ['projects', 'selected', 'loading']),
+    ...mapGetters('projects', ['headers'])
   },
 
   created() {

frontend/store/labels.js

@@ -9,6 +9,24 @@ export const state = () => ({
 export const getters = {
   isLabelSelected(state) {
     return state.selected.length > 0
+  },
+  headers() {
+    return [
+      {
+        text: 'Name',
+        align: 'left',
+        value: 'text'
+      },
+      {
+        text: 'Shortkey',
+        value: 'suffix_key'
+      },
+      {
+        text: 'Color',
+        sortable: false,
+        value: 'background_color'
+      }
+    ]
   }
 }
 

frontend/store/members.js

@@ -9,6 +9,20 @@ export const state = () => ({
 export const getters = {
   isMemberSelected(state) {
     return state.selected.length > 0
+  },
+  headers() {
+    return [
+      {
+        text: 'Name',
+        align: 'left',
+        sortable: false,
+        value: 'username'
+      },
+      {
+        text: 'Role',
+        value: 'role'
+      }
+    ]
   }
 }
 

frontend/store/projects.js

@@ -13,6 +13,23 @@ export const getters = {
   },
   currentProject(state) {
     return state.current
+  },
+  headers() {
+    return [
+      {
+        text: 'Name',
+        align: 'left',
+        value: 'name'
+      },
+      {
+        text: 'Description',
+        value: 'description'
+      },
+      {
+        text: 'Type',
+        value: 'project_type'
+      }
+    ]
   }
 }