spa.js

// ---------------------
// Vuex module
// ---------------------
import Vue from 'vue';
import { com } from "./../../main";
import * as log from 'loglevel';

const state = {
  projects: {},
  currentProjectId: undefined
};

const getters = {
  projectsList: state => Object.values(state.projects),
  project: state => state.projects[state.currentProjectId]
};

const actions = {
  fetchProjects: ({ commit }, product) => {
    com.get("crm/" + product + "/projects", (json) => {
      let projects = {};
      for (let project of json.projects) {
        projects[project.id] = project;
      }
      commit('setProjects', projects);
    }, () => {
      //TODO Error
    });
  },
  setCurrentProject: ({ commit }, projectId) => commit('setCurrentProject', projectId),
  addProject: ({ commit }, { product, project }) => {
    com.post(`crm/${product}/projects/`, project, (json) => {
      log.info("Return from creating project: ", json);
      commit('addProject', json.project);
    }, () => {
      //TODO Error
    });
  },
  updateProject: ({ commit }, { product, project }) => {
    com.put(`crm/${product}/projects/${project.id}`, project, (json) => {
      log.info("Return from updating project: ", json);
      commit('updateProject', json.project);
    }, () => {
      //TODO Error
    });
  },
  deleteProject: ({ commit }, { product, project }) => {
    com.delete(`crm/${product}/projects/${project.id}`, {}, (json) => {
      log.info("Return from deleting project: ", json);
      commit('deleteProject', json.project);
    }, () => {
      //TODO Error
    });
  }
};

const mutations = {
  setProjects: (state, projects) => state.projects = projects,
  addProject: (state, project) => Vue.set(state.projects, project.id, project),
  updateProject: (state, project) => Vue.set(state.projects, project.id, project),
  deleteProject: (state, project) => Vue.delete(state.projects, project.id),
  setCurrentProject: (state, projectId) => state.currentProjectId = projectId
};

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

// ---------------------
// Routing
// ---------------------
{ path: ":product/projects", name: "crm/projects", component: CrmProjects,
  children: [
  { path: "add", component: CrmProjectsAdd},
  { path: ":id", component: CrmProjectsShow},
  { path: ":id/edit", component: CrmProjectsEdit}
]}