Explore User Desire for Saved Filter State

[em-c-rod]

Does the user want a saved filter in the profile, results, and checklist view, such that changing views reloads the filter that was written on that page? Is this intuitive? Is it confusing? What is needed to best suite the user's expectations?

The code below will save the filter state after the checklist editor PR is merged in #3315 The belongs in apps/frontend/src/mixins/RouteMixin.ts This issue should be explored for usability before making code changes.

import {AppInfoModule, views} from '@/store/app_info';
import {FilteredDataModule} from '@/store/data_filters';
import {SearchModule} from '@/store/search';
import {Component, Vue} from 'vue-property-decorator';

@Component({})
export default class RouteMixin extends Vue {
  // get the value of the current route
  get currentRoute() {
    return AppInfoModule.currentView;
  }

  navigateWithNoErrors(route: string): void {
    // Saves filter state of current route before navigation
    switch (this.currentRoute) {
      case views.Checklist: {
        // Save checklist filter state and clear filters before navigation
        FilteredDataModule.setChecklistFilterState(SearchModule.searchTerm);
        break;
      }
      case views.Result: {
        // Save results filter state and clear filters before navigation
        FilteredDataModule.setResultsFilterState(SearchModule.searchTerm);
        break;
      }
      case views.Profile: {
        // Save profiles filter state and clear filters before navigation
        FilteredDataModule.setProfilesFilterState(SearchModule.searchTerm);
        break;
      }
    }

    this.$router.push(route).catch(() => {
      // Ignore errors caused by navigation
    });
    // Set the current view
    AppInfoModule.SET_CURRENT_VIEW(route.split('/')[1] as views);
    // Sets the filter state to the page navigated to
    switch (route.split('/')[1]) {
      case views.Checklist: {
        SearchModule.updateSearch(FilteredDataModule.checklistFilterState);
        SearchModule.parseSearch();
        break;
      }
      case views.Result: {
        SearchModule.updateSearch(FilteredDataModule.resultsFilterState);
        SearchModule.parseSearch();
        break;
      }
      case views.Profile: {
        SearchModule.updateSearch(FilteredDataModule.profilesFilterState);
        SearchModule.parseSearch();
        break;
      }
    }
  }
}