flaschengeist-frontend/src/plugins/user/store/user.ts

import { Module, MutationTree, ActionTree, GetterTree } from 'vuex';
import { StateInterface } from 'src/store';
import { axios } from 'boot/axios';
import { AxiosResponse } from 'axios';
import { SessionStorage } from 'quasar';
import { CurrentUserResponse } from 'src/plugins/user/models';

export interface UserStateInterface {
  currentUser?: FG.User;
  currentPermissions: FG.Permission[];
  users: FG.User[];
  roles: FG.Role[];
  permissions: FG.Permission[];
  loading: number;
}

const state: UserStateInterface = {
  users: [],
  roles: [],
  permissions: [],
  currentUser: SessionStorage.getItem<FG.User>('currentUser') || undefined,
  currentPermissions:
    SessionStorage.getItem<FG.Permission[]>('currentPermissions') || [],
  loading: 0
};

const mutations: MutationTree<UserStateInterface> = {
  setCurrentUser(state, data: FG.User) {
    SessionStorage.set('currentUser', data);
    state.currentUser = data;
  },
  setCurrentPermissions(state, data: FG.Permission[]) {
    SessionStorage.set('currentPermissions', data);
    state.currentPermissions = data;
  },
  clearCurrentUser(state) {
    SessionStorage.remove('currentUser');
    SessionStorage.remove('currentPermissions');
    state.currentUser = undefined;
    state.currentPermissions = [];
  },
  setUsers(state, data: FG.User[]) {
    state.users = data;
  },
  setRoles(state, data: FG.Role[]) {
    state.roles = data;
  },
  updateRole(state, data: FG.Role) {
    const idx = state.roles.findIndex(role => role.id === data.id);
    if (idx != undefined || idx != null) {
      state.roles[idx].name = data.name;
      state.roles[idx].permissions = data.permissions;
    }
  },
  setPermissions(state, data: FG.Permission[]) {
    state.permissions = data;
  },
  setLoading(state, data = true) {
    if (data) state.loading += 1;
    else state.loading -= 1;
  }
};

const actions: ActionTree<UserStateInterface, StateInterface> = {
  getCurrentUser({ commit, rootState }) {
    if (rootState.session.currentSession) {
      commit('setLoading');
      axios
        .get(`/users/${rootState.session.currentSession.userid}`)
        .then((response: AxiosResponse<CurrentUserResponse>) => {
          if (response.data.birthday)
            response.data.birthday = new Date(response.data.birthday);
          commit('setCurrentUser', response.data);
          commit('setCurrentPermissions', response.data.permissions);
        })
        .catch(err => {
          console.warn(err);
        })
        .finally(() => {
          commit('setLoading', false);
        });
    } else {
      console.debug('User not logged in, can not get current_user.');
    }
  },

  getUsers({ commit }) {
    commit('setLoading');
    axios
      .get('/users')
      .then((response: AxiosResponse<FG.User[]>) => {
        response.data.forEach(user => {
          if (user.birthday) user.birthday = new Date(user.birthday);
        });
        commit('setUsers', response.data);
      })
      .catch(err => {
        console.warn(err);
      })
      .finally(() => {
        commit('setLoading', false);
      });
  },

  updateUser({ commit, state, dispatch }, data: FG.User) {
    commit('setLoading');
    axios
      .put(`/users/${data.userid}`, data)
      .then(() => {
        if (state.currentUser && state.currentUser.userid === data.userid)
          void dispatch('getCurrentUser');
        else void dispatch('getUsers');
      })
      .catch(error => {
        console.log(error);
      })
      .finally(() => {
        commit('setLoading', false);
      });
  },

  uploadAvatar({ commit }, payload: { user: FG.User; file: string }) {
    commit('setLoading');
    const formData = new FormData();
    formData.append('file', payload.file);
    return axios
      .post(`/users/${payload.user.userid}/avatar`, formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      .finally(() => {
        commit('setLoading', false);
      });
  },

  setUser({ commit, state, dispatch }, data: FG.User) {
    commit('setLoading');
    axios
      .post('users', data)
      .then(() => {
        if (state.currentUser && state.currentUser.userid === data.userid)
          void dispatch('getCurrentUser');
        else void dispatch('getUsers');
      })
      .catch(error => {
        console.warn(error);
      })
      .finally(() => {
        commit('setLoading', false);
      });
  },

  getRoles({ commit, state }, force = false) {
    if (!force && state.roles.length > 0) return;
    commit('setLoading');
    axios
      .get('/roles')
      .then((response: AxiosResponse<FG.Role[]>) => {
        commit('setRoles', response.data);
      })
      .finally(() => commit('setLoading', false));
  },

  updateRole({ commit }, data: FG.Role) {
    commit('setLoading');
    axios
      .put(`/roles/${data.id}`, data)
      .then(() => {
        commit('updateRole', data);
      })
      .finally(() => {
        commit('setLoading', false);
      });
  },

  newRole({ commit, dispatch }, data: FG.Role) {
    commit('setLoading');
    axios
      .post('/roles', data)
      .then(() => dispatch('getRoles', true))
      .finally(() => {
        commit('setLoading', false);
      });
  },

  deleteRole({ commit, state }, data: FG.Role) {
    commit('setLoading');
    axios
      .delete(`/roles/${data.id}`)
      .then(() => {
        commit(
          'setRoles',
          state.roles.filter(value => value.id !== data.id)
        );
      })
      .finally(() => {
        commit('setLoading', false);
      });
  },

  getPermissions({ commit, state }, force = false) {
    if (!force && state.permissions.length > 0) return;
    commit('setLoading');
    axios
      .get('/roles/permissions')
      .then((response: AxiosResponse<FG.Role[]>) => {
        commit('setPermissions', response.data);
      })
      .finally(() => commit('setLoading', false));
  }
};

const getters: GetterTree<UserStateInterface, StateInterface> = {
  currentUser({ currentUser }) {
    return currentUser;
  },
  users({ users }) {
    return users;
  },
  loading({ loading }) {
    return loading > 0;
  },
  displayName({ currentUser }) {
    return currentUser?.display_name;
  },
  roles({ roles }): string[] {
    return roles.map(role => role.name).flat();
  }
};

const userStore: Module<UserStateInterface, StateInterface> = {
  namespaced: true,
  actions,
  getters,
  mutations,
  state
};

export default userStore;