diff --git a/src/store.js b/src/store.js index 2eae4ef1..85e68e3c 100644 --- a/src/store.js +++ b/src/store.js @@ -12,20 +12,24 @@ Vue.use(Vuex); const { INITIALIZE_CONFIG, - UPDATE_CONFIG, + SET_CONFIG, SET_MODAL_OPEN, SET_LANGUAGE, SET_ITEM_LAYOUT, SET_ITEM_SIZE, + SET_THEME, UPDATE_ITEM, SET_EDIT_MODE, - UPDATE_PAGE_INFO, - UPDATE_APP_CONFIG, + SET_PAGE_INFO, + SET_APP_CONFIG, + SET_SECTIONS, UPDATE_SECTION, + INSERT_SECTION, REMOVE_SECTION, COPY_ITEM, REMOVE_ITEM, INSERT_ITEM, + UPDATE_CUSTOM_CSS, } = Keys; const editorLog = (logMessage) => { @@ -48,6 +52,9 @@ const store = new Vuex.Store({ appConfig(state) { return state.config.appConfig || {}; }, + theme(state) { + return state.config.appConfig.theme; + }, sections(state) { return filterUserSections(state.config.sections || []); }, @@ -80,7 +87,7 @@ const store = new Vuex.Store({ }, }, mutations: { - [UPDATE_CONFIG](state, config) { + [SET_CONFIG](state, config) { state.config = config; }, [SET_LANGUAGE](state, lang) { @@ -110,18 +117,24 @@ const store = new Vuex.Store({ }); state.config = newConfig; }, - [UPDATE_PAGE_INFO](state, newPageInfo) { + [SET_PAGE_INFO](state, newPageInfo) { const newConfig = state.config; newConfig.pageInfo = newPageInfo; state.config = newConfig; editorLog('Page info updated'); }, - [UPDATE_APP_CONFIG](state, newAppConfig) { + [SET_APP_CONFIG](state, newAppConfig) { const newConfig = state.config; newConfig.appConfig = newAppConfig; state.config = newConfig; editorLog('App config updated'); }, + [SET_SECTIONS](state, newSections) { + const newConfig = state.config; + newConfig.sections = newSections; + state.config = newConfig; + editorLog('Sections updated'); + }, [UPDATE_SECTION](state, payload) { const { sectionIndex, sectionData } = payload; const newConfig = { ...state.config }; @@ -129,6 +142,13 @@ const store = new Vuex.Store({ state.config = newConfig; editorLog('Section updated'); }, + [INSERT_SECTION](state, newSection) { + const newConfig = { ...state.config }; + newSection.items = []; + newConfig.sections.push(newSection); + state.config = newConfig; + editorLog('New section added'); + }, [REMOVE_SECTION](state, payload) { const { sectionIndex, sectionName } = payload; const newConfig = { ...state.config }; @@ -156,7 +176,7 @@ const store = new Vuex.Store({ const newItem = { ...item }; config.sections.forEach((section) => { if (section.name === toSection) { - if (appendTo === 'Begining') { + if (appendTo === 'beginning') { section.items.unshift(newItem); } else { section.items.push(newItem); @@ -182,19 +202,28 @@ const store = new Vuex.Store({ }); state.config = config; }, + [SET_THEME](state, theme) { + const newConfig = { ...state.config }; + newConfig.appConfig.theme = theme; + state.config = newConfig; + InfoHandler('Theme updated', InfoKeys.VISUAL); + }, [SET_ITEM_LAYOUT](state, layout) { state.config.appConfig.layout = layout; }, [SET_ITEM_SIZE](state, iconSize) { state.config.appConfig.iconSize = iconSize; }, + [UPDATE_CUSTOM_CSS](state, customCss) { + state.config.appConfig.customCss = customCss; + }, }, actions: { /* Called when app first loaded. Reads config and sets state */ [INITIALIZE_CONFIG]({ commit }) { const deepCopy = (json) => JSON.parse(JSON.stringify(json)); const config = deepCopy(new ConfigAccumulator().config()); - commit(UPDATE_CONFIG, config); + commit(SET_CONFIG, config); }, }, modules: {},