type safe FeedbackSearchOptions

frontend/src/components/feedback_list/FeedbackSearchOptions.vue

@@ -62,9 +62,10 @@
 
 <script>
 import {mapState, mapGetters} from 'vuex'
-import {namespace, feedbackSearchOptsMut} from '@/store/modules/feedback_list/feedback-search-options'
+import {FeedbackSearchOptions} from '@/store/modules/feedback_list/feedback-search-options'
 import {mapStateToComputedGetterSetter} from '@/util/helpers'
 import {Authentication} from '@/store/modules/authentication'
+import { actions } from '@/store/actions';
 
 export default {
   name: 'feedback-search-options',
@@ -82,32 +83,31 @@ export default {
       return this.tutors.map(tutor => tutor.username)
     },
     ...mapStateToComputedGetterSetter({
-      namespace,
-      pathPrefix: 'feedbackSearchOptions',
+      pathPrefix: 'FeedbackSearchOptions',
       items: [
         {
           name: 'showFinal',
-          mutation: feedbackSearchOptsMut.SET_SHOW_FINAL
+          mutation: FeedbackSearchOptions.SET_SHOW_FINAL
         },
         {
           name: 'searchOtherUserComments',
-          mutation: feedbackSearchOptsMut.SET_SEARCH_OTHER_USER_COMMENTS
+          mutation: FeedbackSearchOptions.SET_SEARCH_OTHER_USER_COMMENTS
         },
         {
           name: 'caseSensitive',
-          mutation: feedbackSearchOptsMut.SET_CASE_SENSITIVE
+          mutation: FeedbackSearchOptions.SET_CASE_SENSITIVE
         },
         {
           name: 'useRegex',
-          mutation: feedbackSearchOptsMut.SET_USE_REGEX
+          mutation: FeedbackSearchOptions.SET_USE_REGEX
         },
         {
           name: 'filterByTutors',
-          mutation: feedbackSearchOptsMut.SET_FILTER_BY_TUTORS
+          mutation: FeedbackSearchOptions.SET_FILTER_BY_TUTORS
         },
         {
           name: 'filterByStage',
-          mutation: feedbackSearchOptsMut.SET_FILTER_BY_STAGE
+          mutation: FeedbackSearchOptions.SET_FILTER_BY_STAGE
         }
 
       ]
@@ -116,7 +116,7 @@ export default {
   methods: {
     loadTutors () {
       if (this.tutors.length === 0 && this.isReviewer) {
-        this.$store.dispatch('getTutors')
+        actions.getTutors()
       }
     }
   },

frontend/src/components/feedback_list/FeedbackTable.vue

@@ -41,21 +41,19 @@
 import {mapState, mapGetters} from 'vuex'
 import {getObjectValueByPath} from '@/util/helpers'
 import FeedbackSearchOptions from '@/components/feedback_list/FeedbackSearchOptions'
-import { namespace as searchOptsNamespace } from '@/store/modules/feedback_list/feedback-search-options'
+import { FeedbackSearchOptions as OptionsModule } from '@/store/modules/feedback_list/feedback-search-options'
 
 export default {
   computed: {
-    ...mapState(searchOptsNamespace, [
-      'showFinal',
-      'searchOtherUserComments',
-      'caseSensitive',
-      'useRegex',
-      'filterByTutors',
-      'filterByStage'
-    ]),
-    ...mapGetters(searchOptsNamespace, [
-      'stageFilterString'
-    ]),
+    showFinal () { return OptionsModule.state.showFinal },
+    searchOtherUserComments () { return OptionsModule.state.searchOtherUserComments },
+    caseSensitive () { return OptionsModule.state.caseSensitive },
+    useRegex () { return OptionsModule.state.useRegex },
+    filterByTutors () { return OptionsModule.state.filterByTutors },
+    filterByStage () { return OptionsModule.state.filterByStage },
+
+    stageFilterString () { return OptionsModule.stageFilterString },
+
     feedback () {
       return Object.values(this.$store.state.feedbackTable.feedbackHist).filter(feedback => {
         return this.checkFinal(feedback) && this.filterFeedbackByTutorStage(feedback)

frontend/src/components/tutor_list/TutorList.vue

@@ -31,6 +31,7 @@
 <script>
 import {mapState, mapActions} from 'vuex'
 import {changeActiveForUser} from '@/api'
+import { actions } from '@/store/actions';
 
 export default {
   name: 'tutor-list',
@@ -67,12 +68,9 @@ export default {
     ])
   },
   methods: {
-    ...mapActions([
-      'getTutors'
-    ]),
     changeActiveStatus (tutor) {
       changeActiveForUser(tutor.pk, !tutor.isActive).then(() => {
-        this.getTutors()
+        actions.getTutors()
       }).catch(() => {
         this.$notify({
           title: 'Error',

frontend/src/pages/reviewer/TutorOverviewPage.vue

@@ -5,12 +5,13 @@
 <script>
 import store from '@/store/store'
 import TutorList from '@/components/tutor_list/TutorList'
+import { actions } from '@/store/actions';
 
 export default {
   components: {TutorList},
   name: 'tutor-overview-page',
   beforeRouteEnter (to, from, next) {
-    store.dispatch('getTutors')
+    actions.getTutors()
     next()
   }
 }

frontend/src/store/modules/feedback_list/feedback-search-options.ts

 import {Module} from 'vuex'
 import {RootState} from '@/store/store'
+import { getStoreBuilder } from 'vuex-typex';
 
 export const namespace = 'feedbackSearchOptions'
 
-export const feedbackSearchOptsMut = Object.freeze({
-  SET_SHOW_FINAL: 'SET_SHOW_FINAL',
-  SET_SEARCH_OTHER_USER_COMMENTS: 'SET_SEARCH_OTHER_USER_COMMENTS',
-  SET_CASE_SENSITIVE: 'SET_CASE_SENSITIVE',
-  SET_USE_REGEX: 'SET_USE_REGEX',
-  SET_FILTER_BY_TUTORS: 'SET_FILTER_BY_TUTORS',
-  SET_FILTER_BY_STAGE: 'SET_FILTER_BY_STAGE'
-})
-
-interface FeedbackSearchOptionsState {
+export interface FeedbackSearchOptionsState {
   showFinal: boolean
   searchOtherUserComments: boolean
   caseSensitive: boolean
@@ -32,29 +24,46 @@ function initialState (): FeedbackSearchOptionsState {
   }
 }
 
+const mb = getStoreBuilder<RootState>().module('FeedbackSearchOptions', initialState())
+
 const mapStageDisplayToApiString: {[index: string]: string} = {
   'Initial feedback': 'feedback-creation',
   'Validation': 'feedback-validation'
 }
 
-const feedbackSearchOptions: Module<FeedbackSearchOptionsState, RootState> = {
-  namespaced: true,
-  state: initialState(),
-  getters: {
-    stageFilterString (state) {
-      return mapStageDisplayToApiString[state.filterByStage] || 'all'
-    }
-  },
-  mutations: {
-    [feedbackSearchOptsMut.SET_SHOW_FINAL]: (state, val) => { state.showFinal = val },
-    [feedbackSearchOptsMut.SET_SEARCH_OTHER_USER_COMMENTS]: (state, val) => {
-      state.searchOtherUserComments = val
-    },
-    [feedbackSearchOptsMut.SET_CASE_SENSITIVE]: (state, val) => { state.caseSensitive = val },
-    [feedbackSearchOptsMut.SET_USE_REGEX]: (state, val) => { state.useRegex = val },
-    [feedbackSearchOptsMut.SET_FILTER_BY_TUTORS]: (state, val) => { state.filterByTutors = val },
-    [feedbackSearchOptsMut.SET_FILTER_BY_STAGE]: (state, val) => { state.filterByStage = val }
-  }
+const stateGetter = mb.state()
+
+const stageFilterStringGetter = mb.read(function stageFilterString (state: FeedbackSearchOptionsState) {
+  return mapStageDisplayToApiString[state.filterByStage] || 'all'
+})
+
+function SET_SHOW_FINAL (state: FeedbackSearchOptionsState, val: boolean) {
+  state.showFinal = val
 }
+function SET_SEARCH_OTHER_USER_COMMENTS (state: FeedbackSearchOptionsState, val: boolean) {
+  state.searchOtherUserComments = val
+}
+function SET_CASE_SENSITIVE (state: FeedbackSearchOptionsState, val: boolean) {
+  state.caseSensitive = val
+}
+function SET_USE_REGEX (state: FeedbackSearchOptionsState, val: boolean) {
+  state.useRegex = val
+}
+function SET_FILTER_BY_TUTORS (state: FeedbackSearchOptionsState, val: string[]) {
+  state.filterByTutors = val
+}
+function SET_FILTER_BY_STAGE (state: FeedbackSearchOptionsState, val: string) {
+  state.filterByStage = val
+}
+
+export const FeedbackSearchOptions = {
+  get state () { return stateGetter() },
+  get stageFilterString () { return stageFilterStringGetter() },
 
-export default feedbackSearchOptions
+  SET_SHOW_FINAL: mb.commit(SET_SHOW_FINAL),
+  SET_SEARCH_OTHER_USER_COMMENTS: mb.commit(SET_SEARCH_OTHER_USER_COMMENTS),
+  SET_CASE_SENSITIVE: mb.commit(SET_CASE_SENSITIVE),
+  SET_USE_REGEX: mb.commit(SET_USE_REGEX),
+  SET_FILTER_BY_TUTORS: mb.commit(SET_FILTER_BY_TUTORS),
+  SET_FILTER_BY_STAGE: mb.commit(SET_FILTER_BY_STAGE)
+}

frontend/src/store/store.ts

@@ -7,10 +7,10 @@ import studentPage from './modules/student-page'
 import submissionNotes from './modules/submission-notes'
 import subscriptions from './modules/subscriptions'
 import feedbackTable from './modules/feedback_list/feedback-table'
-import feedbackSearchOptions from './modules/feedback_list/feedback-search-options'
 
 import './modules/ui'
 import './modules/authentication'
+import './modules/feedback_list/feedback-search-options'
 
 import './mutations'
 import './actions'
@@ -19,6 +19,7 @@ import './getters'
 
 import {UIState} from './modules/ui'
 import {AuthState} from './modules/authentication'
+import {FeedbackSearchOptionsState, FeedbackSearchOptions} from './modules/feedback_list/feedback-search-options'
 
 import {lastInteraction} from '@/store/plugins/lastInteractionPlugin'
 import {
@@ -45,7 +46,8 @@ export interface RootInitialState {
 
 export interface RootState extends RootInitialState{
     UI: UIState,
-    Authentication: AuthState
+    Authentication: AuthState,
+    FeedbackSearchOptions: FeedbackSearchOptionsState
 }
 
 export function initialState (): RootInitialState {
@@ -75,8 +77,7 @@ const store = getStoreBuilder<RootState>().vuexStore({
     studentPage,
     submissionNotes,
     subscriptions,
-    feedbackTable,
-    feedbackSearchOptions
+    feedbackTable
   },
   plugins: [
     createPersistedState({
@@ -85,7 +86,7 @@ const store = getStoreBuilder<RootState>().vuexStore({
       // Authentication.token is manually saved since using it with this plugin caused issues
       // when manually reloading the page
       paths: Object.keys(initialState()).concat(
-        ['UI', 'studentPage', 'submissionNotes', 'feedbackSearchOptions', 'subscriptions',
+        ['UI', 'studentPage', 'submissionNotes', 'FeedbackSearchOptions', 'subscriptions',
           'Authentication.user', 'Authentication.jwtTimeDelta',
           'Authentication.tokenCreationTime'])
     }),