actions.js

import Vue from "vue";
import {
    API_ERROR,
    SET_USERS,
    SET_FILTERS_FOR_USERS,
    SET_LOADER_USERS,
    SET_LOADER_DOWNLOADING_FILTERED_USERS
} from '@/store/mutation-types';

export async function getFiltersForDropdown ({commit}) {
    try {
        const {data} = await Vue.axios({
            url: `${process.env.VUE_API_URL}/users/reports/filters`
        });
        commit(SET_FILTERS_FOR_USERS, data)
    } catch (e) {
        commit(API_ERROR, e.message, {root: true})
    }
}

export async function getUsers ({state, commit}, {pagination, filters}) {
    try {
        commit(SET_LOADER_USERS, true);
        const filterParams = Object.keys(filters).map(k => `${encodeURIComponent(k)}=${encodeURIComponent(filters[k])}`).join('&');
        const filterPagination = Object.keys(pagination).map(k => `${encodeURIComponent(k)}=${encodeURIComponent(pagination[k])}`).join('&');
        const {data} = await Vue.axios({
            url: `${process.env.VUE_API_URL}/users/paginated/?${filterPagination}&${filterParams}`
        });
        commit(SET_USERS, data)
    } catch (e) {
        commit(API_ERROR, e.message, {root: true})
    } finally {
        commit(SET_LOADER_USERS, false);
    }
}

export async function getAllFilteredUsers ({state, commit}, {filters}) {
    try {
        commit(SET_LOADER_DOWNLOADING_FILTERED_USERS, true);
        const filterParams = Object.keys(filters).map(k => `${encodeURIComponent(k)}=${encodeURIComponent(filters[k])}`).join('&');
        const {data} = await Vue.axios({
            url: `${process.env.VUE_API_URL}/users/all-filtered/?${filterParams}`
        });
        return data;
    } catch (e) {
        commit(API_ERROR, e.message, {root: true})
    } finally {
        commit(SET_LOADER_DOWNLOADING_FILTERED_USERS, false);
    }
}

index.js

import * as actions from './actions';
import mutations from './mutations';
import * as getters from './getters';
import state from './state';

export default {
    namespaced: true,
    mutations,
    actions,
    state,
    getters,
};

mutations.js

import {
    SET_USERS,
    SET_FILTERS_FOR_USERS,
    SET_LOADER_USERS,
    SET_USERS_PER_PAGE,
    SET_USERS_TABLE_ORDER, 
    SET_LOADER_DOWNLOADING_FILTERED_USERS, 
    UNSET_USERS_INFO
} from "@/store/mutation-types";

import initialState from "@/store/User/state";

export default {
    [SET_USERS](state, payload) {
        state.users = payload.data
        state.pagination.page = payload.current_page
        state.pagination.rowsPerPage = parseInt(payload.per_page)
        state.totalUsers = payload.total
    },
    [SET_FILTERS_FOR_USERS](state, data) {
        state.statuses = data.statuses;
        state.roles = data.roles;
    },
    [SET_LOADER_USERS](state, processing) {
        state.processing = processing;
    },
    [SET_LOADER_DOWNLOADING_FILTERED_USERS](state, show) {
        state.processingFilteredUsers.show = show;
    },
    [SET_USERS_PER_PAGE](state, rowsPerPage) {
        state.pagination.rowsPerPage = rowsPerPage;
    },
    [SET_USERS_TABLE_ORDER](state, pagination) {
        state.pagination.sortBy = pagination.sortBy;
        state.pagination.descending = pagination.descending;
    },
    [UNSET_USERS_INFO] (state) {
        Object.keys(initialState).forEach(key => { state[key] = initialState[key] })
    }
};

state.js

const initialState = () => ({
    processing: false,
    processingFilteredUsers: {show: false, message: 'Descargando usuarios para exportar'},
    users: [],
    pagination: {
        page: 1,
        rowsPerPage: 10,
        descending: true
    },
    totalUsers: 0,
    statuses: [],
    roles: [],
})
export default initialState();