procat2/cateditor/src/pages/editor/store/index.js

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

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    catalog: {
      name: 'my catalog',
      owner: 12,
      created: '2019-04-04T22:00:14Z',
      sections: [
        { id: 1,
          name: 'Trailhead (Men)',
          pages: [
            [{ name: 'model name override', size: 2, ids: ['1001001', '1001002'] },
             { size: 1, ids: ['1001011', '1001012'] }], // one page, two blocks
            [{ size: 1,
               ids: ['1001021', '1001022', '1001023', '1001024', '1001025',
                     '1001026', '1001027', '1001028', '1001029'] }],
          ],
        },
        { id: 2,
          name: 'Waterfront (Men)',
          pages: [
            [{ size: 1, ids: ['1001021'] }],
          ],
        },
      ],
    },
    materials: {
      '1001001': { id: '1001001', // call them sap maybe?
                   model: 'AW123',
                   family: 'MF123',
                   name: 'Targhee WP',
                   color: 'Green / Blue' },
      '1001002': { id: '1001002',
                   model: 'AW123',
                   family: 'MF123',
                   name: 'Targhee WP',
                   color: 'Red / Purple' },
      '1001011': { id: '1001011',
                   model: 'WA999',
                   family: 'MF123',
                   name: 'Targhee WP FA',
                   color: 'Green / Blue' },
      '1001012': { id: '1001012',
                   model: 'WA999',
                   family: 'MF123',
                   name: 'Targhee WP FA',
                   color: 'Green / Blue' },
      '1001021': { id: '1001021',
                   model: 'BBB22',
                   family: 'BBBMF',
                   name: 'Slither',
                   color: 'Green / Blue' },
      '1001022': { id: '1001022',
                   model: 'BBB22',
                   family: 'BBBMF',
                   name: 'Slither',
                   color: 'Red / Blue' },
      '1001023': { id: '1001023',
                   model: 'BBB22',
                   family: 'BBBMF',
                   name: 'Slither',
                   color: 'Blue / Green' },
      '1001024': { id: '1001024',
                   model: 'BBB22',
                   family: 'BBBMF',
                   name: 'Slither',
                   color: 'Red / Green' },
      '1001025': { id: '1001025',
                   model: 'BBB22',
                   family: 'BBBMF',
                   name: 'Slither',
                   color: 'Orange / Blue' },
      '1001026': { id: '1001026',
                   model: 'BBB22',
                   family: 'BBBMF',
                   name: 'Slither',
                   color: 'Yellow / Blue' },
      '1001027': { id: '1001027',
                   model: 'BBB22',
                   family: 'BBBMF',
                   name: 'Slither',
                   color: 'Yellow / Blue' },
      '1001028': { id: '1001028',
                   model: 'BBB22',
                   family: 'BBBMF',
                   name: 'Slither',
                   color: 'Yellow / Blue' },
      '1001029': { id: '1001029',
                   model: 'BBB22',
                   family: 'BBBMF',
                   name: 'Slither',
                   color: 'Yellow / Blue' },
    },
    selectedSectionID: null,
    selectedFamilyID: null,
    selectedModelID: null,
    selectedMaterial: null,
  },
  getters: {
    //
    // catalog info
    //
    CAT_NAME: state => {
      return state.catalog.name
    },
    CAT_SECTIONS: state => {
      return state.catalog.sections
    },
    CAT_SECTION: (state) => (id) => {
      return state.catalog.sections.find(s => s.id === id)
    },
    //
    // selection info
    //
    SELECTED_SECTION_ID: state => {
      return state.selectedSectionID
    },
    // SELECTED_SECTION: state => {
    //   return store.getters.CAT_SECTION(state.selectedSectionID)
    // },
    SELECTED_FAMILY_ID: state => {
      return state.selectedFamilyID
    },
    SELECTED_MODEL_ID: state => {
      return state.selectedModelID
    },
    SELECTED_MATERIAL_ID: state => {
      return state.selectedMaterial
    },
    //
    // material info
    //
    MATERIAL: (state) => (id) => {
      return state.materials[id]
    },
  },
  mutations: {
    SET_CAT_SECTIONS: (state, payload) => {
      state.catalog.sections = payload
    },
    SET_CAT_SECTION_NAME: (state, payload) => {
      var section = state.catalog.sections.find(s => s.id === payload.id)
      section.name = payload.name
    },
    SET_SELECTED_SECTION_ID: (state, payload) => {
      state.selectedSectionID = payload
      state.selectedFamilyID = null
      state.selectedModelID = null
      state.selectedMaterial = null
    },
    SET_SELECTED_FAMILY_ID: (state, payload) => {
      state.selectedFamilyID = payload
      state.selectedModelID = null
      state.selectedMaterial = null
    },
    SET_SELECTED_MODEL_ID: (state, payload) => {
      state.selectedModelID = payload
      state.selectedFamilyID = null
      state.selectedMaterial = null
    },
    SET_SELECTED_MATERIAL_ID: (state, payload) => {
      state.selectedMaterial = payload
    },
  },
  actions: {
    SET_CAT_SECTIONS: (context, payload) => {
      context.commit('SET_CAT_SECTIONS', payload)
    },
    SET_CAT_SECTION_NAME: (context, payload) => {
      context.commit('SET_CAT_SECTION_NAME', payload)
    },
    SET_SELECTED_SECTION_ID: (context, payload) => {
      context.commit('SET_SELECTED_SECTION_ID', payload)
    },
    SET_SELECTED_FAMILY_ID: (context, payload) => {
      context.commit('SET_SELECTED_FAMILY_ID', payload)
    },
    SET_SELECTED_MODEL_ID: (context, payload) => {
      context.commit('SET_SELECTED_MODEL_ID', payload)
    },
    SET_SELECTED_MATERIAL_ID: (context, payload) => {
      context.commit('SET_SELECTED_MATERIAL_ID', payload)
    },
    //   SAVE_TODO : async (context,payload) => {
    //     let { data } = await Axios.post('http://yourwebsite.com/api/todo')
    //     context.commit('ADD_TODO',payload)
    //   },
  }
})