parsley/app/javascript/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

import api from '../lib/Api';

Vue.use(Vuex);

export default new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',
  state: {
    updateAvailable: false,
    loadingCount: 0,
    error: null,
    authChecked: false,
    user: null,
    loginMessage: null,

    taskLists: [],
    currentTaskList: null,

    // MediaQueryList objects in the root App component maintain this state.
    mediaQueries: {
      mobile: false,
      tablet: false,
      tabletOnly: false,
      touch: false,
      desktop: false,
      desktopOnly: false,
      widescreen: false,
      widescreenOnly: false,
      fullhd: false
    }
  },
  getters: {
    isLoading(state) {
      return state.loadingCount > 0;
    },
    isLoggedIn(state) {
      return state.user !== null;
    },
    isAdmin(state) {
      return state.user !== null && state.user.admin === true;
    }
  },
  mutations: {
    setUpdateAvailable(state, value) {
      state.updateAvailable = value;
    },

    setLoading(state, value) {
      if (value) {
        state.loadingCount = state.loadingCount + 1;
      } else {
        state.loadingCount = state.loadingCount - 1;
      }
      state.loading = state.loadingCount !== 0;
    },

    setError(state, value) {
      console.log(value);
      state.error = value;
    },

    setUser(state, user) {
      state.authChecked = true;
      state.user = user;
    },

    setLoginMessage(state, msg) {
      state.loginMessage = msg;
    },

    setTaskLists(state, lists) {
      state.taskLists = lists || [];
    },

    setCurrentTaskList(state, list) {
      state.currentTaskList = list || null;
    },

    appendTaskItem(state, item) {
      const listId = item.task_list_id;
      const list = state.taskLists.find(l => l.id === listId);
      if (list) {
        list.task_items.push(item);
      }
    },

    replaceTaskItem(state, item) {
      const listId = item.task_list_id;
      const list = state.taskLists.find(l => l.id === listId);
      if (list) {
        const taskIdx = list.task_items.findIndex(i => i.id === item.id);
        if (taskIdx >= 0) {
          list.task_items.splice(taskIdx, 1, item);
        }
      }
    },

    removeTaskItems(state, payload) {
      const listId = payload.taskList.id;
      const list = state.taskLists.find(l => l.id === listId);
      if (list) {

        list.task_items = list.task_items.filter(item => {
          return payload.taskItems.findIndex(i => i.id === item.id) === -1;
        });
      }
    },

    setTaskItemCompletion(state, payload) {
      const listId = payload.taskList.id;
      const list = state.taskLists.find(l => l.id === listId);
      if (list) {
        list.task_items.forEach(item => {
          if (payload.taskItems.findIndex(i => i.id === item.id) >= 0) {
            item.completed = payload.completed;
          }
        });
      }
    }
  },
  actions: {
    updateCurrentUser({commit}) {
      return api.getCurrentUser()
        .then(user => {
          commit("setUser", user);
          return user;
        });
    },

    login({commit}, authData) {
      return api.postLogin(authData.username, authData.password)
        .then(data => {
          if (data.success) {
            commit("setUser", data.user);
            commit("setLoginMessage", null);
          } else {
            commit("setUser", null);
            commit("setLoginMessage", data.message);
          }
          return data;
        });
    },

    logout({commit}) {
      return api.getLogout()
        .then(() => {
          commit("setUser", null);
        });
    },

    refreshTaskLists({commit, state}) {
      const cb = function(data) {
        commit("setTaskLists", data);
        let ctl = null;

        if (state.currentTaskList) {
          ctl = data.find(l => l.id === state.currentTaskList.id);
        }

        ctl = ctl || data[0] || null;
        commit("setCurrentTaskList", ctl);
      };

      return api.getTaskLists(cb)
    },

    createTaskList({commit, dispatch}, newList) {
      return api.postTaskList(newList)
        .then(data => commit("setCurrentTaskList", data))
        .then(() => dispatch("refreshTaskLists"))
    },

    deleteTaskList({dispatch}, taskList) {
      return api.deleteTaskList(taskList)
        .then(() => dispatch("refreshTaskLists"));
    },

    createTaskItem({commit, dispatch}, taskItem) {

      return api.postTaskItem(taskItem.task_list_id, taskItem)
        .then(data => {
          commit("appendTaskItem", data);
          return data;
        });
    },

    updateTaskItem({commit}, taskItem) {
      return api.patchTaskItem(taskItem.task_list_id, taskItem)
        .then(data => {
          commit("replaceTaskItem", data);
          return data;
        });
    },

    deleteTaskItems({commit}, payload) {
      return api.deleteTaskItems(payload.taskList.id, payload.taskItems)
        .then(() => commit("removeTaskItems", payload));
    },

    completeTaskItems({commit}, payload) {
      return api.completeTaskItems(payload.taskList.id, payload.taskItems, !payload.completed)
        .then(() => commit("setTaskItemCompletion", payload));
    }
  }
});