store.js

/* Vuex store, for centralized state management */

import Vue from 'vue';
import Vuex from 'vuex';
import client from 'api-client';
import router from './router.js';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    // values populated from API calls
    model: {
      breadcrumbs: [],
      groupsPanel: null,
      permissionsPanel: null,
      membersPanel: null,
      permission: null,
      leaf: false,
      user: null,
      genericSearchResults: {},
      userSearchResults: {
        user: null,
        groups: {},
        permissions: {}
      }
    },
    // values used to perform API calls
    input: {
      selectedGroupId: 'ROOT',
      paginatorPageSize: 20,
      paginatorPage: 1,
      tabIndex: 0,
      searchFilter: '',
      genericSearch: {
        filter: '',
        paginatorPage: 1,
        paginatorPageSize: 20
      }
    },
    loading: false
  },
  mutations: {
    updateHomePageModel(state, model) {
      state.model.breadcrumbs = model.breadcrumbs;
      state.model.groupsPanel = model.groupsPanel;
      state.model.permission = model.permission;
      state.model.user = model.user;
    },
    updateGroups(state, model) {
      state.model.breadcrumbs = model.breadcrumbs;
      state.model.groupsPanel = model.groupsPanel;
      state.model.permission = model.permission;
      state.model.leaf = model.leaf;
    },
    updateGroupsPanel(state, groupsPanel) {
      state.model.groupsPanel = groupsPanel;
      state.input.paginatorPage = groupsPanel.currentPage;
    },
    updatePermissionsPanel(state, permissionsPanel) {
      state.model.permissionsPanel = permissionsPanel;
      for(let up of permissionsPanel.items) {
        Vue.set(up, 'editable', false);
      }
      state.input.paginatorPage = permissionsPanel.currentPage;
    },
    togglePermissionEditable(state, index) {
      let up = state.model.permissionsPanel.items[index];
      up.editable = !up.editable;
    },
    updateMembersPanel(state, membersPanel) {
      state.model.membersPanel = membersPanel;
      state.input.paginatorPage = membersPanel.currentPage;
    },
    setTabIndex(state, tabIndex) {
      // this will trigger the tabChanged() method in Main.vue
      state.input.tabIndex = tabIndex;
    },
    setLoading(state, loading) {
      state.loading = loading;
    },
    displaySearchResults(state, results) {
      if (results) {
        state.model.genericSearchResults = results;
      }
    },
    updateSearchResults(state, results) {
      state.model.genericSearchResults = results;
    },
    setUserSearchModel(state, model) {
      state.model.userSearchResults.user = model.user;
      state.model.userSearchResults.groups = model.groups;
      state.model.userSearchResults.permissions = model.permissions;
    },
    setGenericSearchFilter(state, filter) {
      state.input.genericSearch.filter = filter;
    }
  },
  actions: {
    loadHomePageModel({ commit, state }) {
      client.fetchHomePageModel(state.input)
        .then(model => commit('updateHomePageModel', model));
    },
    search({ commit, state }, filter) {
      commit('setGenericSearchFilter', filter);
      client.search(state.input)
        .then(results => commit('displaySearchResults', results));
    },
    changeTab({ commit, state }, tabIndex) {
      state.input.tabIndex = tabIndex;
      // reset paginator
      state.input.paginatorPage = 1;
      switch (tabIndex) {
        case 0:
          client.fetchGroupsTab(state.input)
            .then(model => commit('updateGroups', model));
          break;
        case 1:
          client.fetchMembersPanel(state.input)
            .then(panel => commit('updateMembersPanel', panel));
          break;
        case 2:
          client.fetchPermissionsPanel(state.input)
            .then(panel => commit('updatePermissionsPanel', panel));
          break;
      }
    },
    openGroup({ commit, dispatch, state }, groupId) {
      let input = state.input;
      input.selectedGroupId = groupId;
      input.searchFilter = '';
      client.fetchGroupsTab(input)
        .then(model => {
          commit('updateGroups', model);
          if (model.leaf) {
            // If there are no subgroups show the members panel
            dispatch('changeTab', 1);
          } else {
            dispatch('changeTab', 0);
          }
          router.push('/', () => {});
        });
    },
    openUserPage({ commit }, userId) {
      client.openUserSearchResult(userId)
        .then(model => commit('setUserSearchModel', model));
    }
  },
  getters: {
    selectedGroupId: state => {
      return state.model.breadcrumbs[state.model.breadcrumbs.length - 1].groupId;
    }
  }
});