Vuex sample

Vuex.js

import { orderBy, remove } from 'lodash';

export default {

    /**
     * State
     *
     * @type {Object}
     * @author {goper}
     */
    state: {
        campaigns: [],
        campaignFolders: [],
        listInterests: [],

        campaignsFromFolder: false,
        campaignFolderId: '',
        sortBy: '',
        isFromSearch: false,

        // Pagination state
        totalItems: 0,
        currentPage: 1,
        itemsPerPage: 10,

        listingIsBusy: false,
    },

    /**
     * Mutations
     *
     * @type {Object}
     * @author {goper}
     */
    mutations: {

        /**
         * Store campaigns
         * @param  {[type]} state
         * @param  {[type]} payload
         * @return {[type]}
         */
        store(state, {campaigns, fromFolderId = false, folderId = '', sortBy = '', isFromSearch = false})
        {
            state.campaigns = [];
            state.campaigns = campaigns;
            state.campaignsFromFolder = fromFolderId;
            state.campaignFolderId = folderId;
            state.sortBy = sortBy;
            state.isFromSearch = isFromSearch;
        },

        /**
         * Store listInterests
         * @param  {[type]} state [description]
         * @param  {[type]} {}    [description]
         * @return {[type]}       [description]
         */
        storeListInterestsOnly(state, {listId})
        {
          state.listInterests.push(listId);
        },

        storeListInterestData(state, {listId, categories})
        {
          // remove(state.listInterests, function(n) {
          //   console.log('asd', n);
          //   return n == listId;
          // });
          state.listInterests.push({ listId, categories });
        },

        /**
         * Store total items results
         * @param  {[type]} state
         * @param  {[type]} payload
         * @return {[type]}
         */
        storeTotalItems(state, payload)
        {
            state.totalItems = 0;
            state.totalItems = payload;
        },

        /**
         * Store current page
         * @param  {[type]} state
         * @param  {[type]} payload
         * @return {[type]}
         */
        storeCurrentPage(state, payload)
        {
            state.currentPage = 1;
            state.currentPage = payload;
        },

        /**
         * Store pagination
         * @param  {[type]} state
         * @param  {[type]} payload
         * @return {[type]}
         */
        storeItemsPerPage(state, payload)
        {
            state.itemsPerPage = payload;
        },

        /**
         * Store listing loading icon
         * @param  {[type]} state
         * @param  {[type]} payload
         * @return {[type]}
         */
        storeListingIsBusy(state, payload)
        {
            state.listingIsBusy = payload;
        },

        /**
         * Store campaign folders
         * @param  {[type]} state
         * @param  {[type]} payload
         * @return {[type]}
         */
        storeCampaignFolders(state, payload)
        {
            state.campaignFolders = payload;
        },

        /**
         * Store sortBy method
         * @param  {[type]} state
         * @param  {[type]} payload
         * @return {[type]}
         */
        storeSortBy(state, payload)
        {
            state.sortBy = payload;
        },
    },

    /**
     * Actions
     *
     * @type {Object}
     * @author {goper}
     */
    actions: {

        /**
         * Get campaigns using AJAX
         * @param  {[type]} commit
         * @param  {integer} page
         * @return {void}
         */
        getCampaign({ commit, state }, {page = 1, sort = '' })
        {
            commit('storeListingIsBusy', true);
            // Check on state have sort values
            if (sort == '') {
                sort = state.sortBy;
            }

            return new Promise((resolve, reject) => {

                http.getJSON(route('mailchimp.campaigns', { page, sort }))
                    .then(({data}) => {
                        let {newsletters, current_page} = data;

                        commit('store', {
                            campaigns: newsletters.campaigns,
                            sortBy: sort,
                        });
                        commit('storeTotalItems', newsletters.total_items);
                        commit('storeCurrentPage', current_page);
                        commit('storeItemsPerPage', 10);
                        resolve(data);

                        commit('storeListingIsBusy', false);
                    })
                    .catch(error => {
                        reject(error);
                    });
            });
        },

        /**
         * Search
         * @param  {[type]} commit
         * @param  {[type]} key
         * @return {Promise}
         */
        search({commit, state}, {key = ''})
        {
            commit('storeListingIsBusy', true);
            return new Promise((resolve, reject) => {

                http.getJSON(route('mailchimp.campaigns.search', { key }))
                    .then(({data}) => {
                        let { newsletters } = data;
                        let campaigns = [];

                        if (newsletters.total_items > 0) {
                            for (let campaign of newsletters.results) {
                                campaigns.push(campaign.campaign);
                            }

                            if (state.sortBy == '' || state.sortBy == 'lastupdated') {
                                // Sort by `last_updated`
                                campaigns = orderBy(campaigns, [(campaign) => {
                                    return campaign.send_time;
                                }], ['desc']);
                            } else {
                                campaigns = orderBy(campaigns, [(campaign) => {
                                    return campaign.create_time;
                                }], ['asc']);
                            }
                        }


                        commit('storeTotalItems', newsletters.total_items);
                        commit('storeItemsPerPage', newsletters.total_items);
                        commit('store', {campaigns, isFromSearch: true});
                        commit('storeListingIsBusy', false);
                        resolve(data);
                    })
                    .catch(error => {
                        reject(error);
                    });
            });
        },

        /**
         * Sort campaign by `create_time` or `send_time`
         * @param  {[type]} commit
         * @param  {[type]} state
         * @param  {[type]} sortBy
         * @return {void}
         */
        sortCampaign({commit, state}, {sortBy})
        {
            let campaigns = state.campaigns;

            if (sortBy == '' || sortBy == 'lastupdated') {
                // Sort by `last_updated`
                campaigns = orderBy(campaigns, [(campaign) => {
                    return campaign.send_time;
                }], ['desc']);
            } else {
                campaigns = orderBy(campaigns, [(campaign) => {
                    return campaign.create_time;
                }], ['asc']);
            }

            commit('store', {campaigns, isFromSearch: state.isFromSearch, sortBy});
        },

        /**
         * Get campaigns using `folder_id`
         * @param  {[type]} commit
         * @param  {[type]} folderId
         * @return {[type]}
         */
        getCampaignUsingFolderId({commit, state}, {folderId, page = 1})
        {
            let sort = state.sortBy;

            CampaignEvent.emit('campaign.average.rate.reset');

            commit('storeListingIsBusy', true);
            return new Promise((resolve, reject) => {

                http.getJSON(route('mailchimp.campaigns.search.folder', { folderId, page, sort }))
                    .then(({data}) => {
                        let {newsletters, current_page} = data;
                        commit('store', {
                            campaigns: newsletters.campaigns,
                            fromFolderId: true,
                            folderId: folderId
                        });
                        commit('storeTotalItems', newsletters.total_items);
                        commit('storeItemsPerPage', 10);
                        commit('storeListingIsBusy', false);
                        commit('storeCurrentPage', current_page);

                        CampaignEvent.emit('campaign.post.average.rate', {
                            campaigns: newsletters.campaigns,
                            totalItems: newsletters.total_items,
                            folderId: folderId,
                        });
                    })
                    .catch(error => {
                        reject(error);
                    });
            });
        },

        /**
         * Get interest using list id
         * @param  {[type]} commit
         * @param  {[type]} state
         * @param  {[integer]} listId
         * @return {[array]}
         */
        getInterestUsingListId({commit, state}, {listId})
        {
          return new Promise((resolve, reject) => {

            let list = listId;
            // Check if listId exist
            if (state.listInterests.includes(listId)) {

            } else {
              // Add listId to `listInterests`
              commit('storeListInterestsOnly', {listId});
              http.getJSON(route('mailchimp.campaign.interest', { list }))
                  .then(({data}) => {
                      let {categories} = data.interests;
                      // storeListInterestData
                      commit('storeListInterestData', {listId, categories});
                  })
                  .catch(error => {
                      reject(error);
                  });
            }
          });
        },
    },

    /**
     * Getters
     *
     * @type {Object}
     * @author {goper}
     */
    getters: {

        /**
         * Tab
         *
         * @param  {State} state                            the state to use
         * @return {String}
         * @author {goper}
         */
        campaigns(state)
        {
            return state.campaigns;
        },


    }
};