🚧 Fetch use root config in store (#799)

This commit is contained in:
Alicia Sykes 2022-07-16 16:39:27 +01:00
parent 6be38b9f58
commit deb055b9bc

View File

@ -47,9 +47,9 @@ const {
const store = new Vuex.Store({ const store = new Vuex.Store({
state: { state: {
config: {}, // The current config, rendered to the UI config: {}, // The current config being used, and rendered to the UI
rootConfig: null, // The config from the main config file rootConfig: null, // Always the content of main config file, never used directly
// remoteConfig: {}, // The configuration stored on the server currentConfigId: null, // When on sub-page, this will be page ID / name. null = root config
editMode: false, // While true, the user can drag and edit items + sections editMode: false, // While true, the user can drag and edit items + sections
modalOpen: false, // KB shortcut functionality will be disabled when modal is open modalOpen: false, // KB shortcut functionality will be disabled when modal is open
currentConfigInfo: undefined, // For multi-page support, will store info about config file currentConfigInfo: undefined, // For multi-page support, will store info about config file
@ -75,8 +75,8 @@ const store = new Vuex.Store({
}, },
theme(state) { theme(state) {
let localTheme = null; let localTheme = null;
if (state.currentConfigInfo?.pageId) { if (state.currentConfigId) {
const themeStoreKey = `${localStorageKeys.THEME}-${state.currentConfigInfo?.pageId}`; const themeStoreKey = `${localStorageKeys.THEME}-${state.currentConfigId}`;
localTheme = localStorage[themeStoreKey]; localTheme = localStorage[themeStoreKey];
} else { } else {
localTheme = localStorage[localStorageKeys.THEME]; localTheme = localStorage[localStorageKeys.THEME];
@ -315,32 +315,28 @@ const store = new Vuex.Store({
[SET_CURRENT_SUB_PAGE](state, subPageObject) { [SET_CURRENT_SUB_PAGE](state, subPageObject) {
if (!subPageObject) { if (!subPageObject) {
// Set theme back to primary when navigating to index page // Set theme back to primary when navigating to index page
const defaulTheme = localStorage.getItem(localStorageKeys.PRIMARY_THEME); const defaultTheme = localStorage.getItem(localStorageKeys.PRIMARY_THEME);
if (defaulTheme) state.config.appConfig.theme = defaulTheme; if (defaultTheme) state.config.appConfig.theme = defaultTheme;
} }
state.currentConfigInfo = subPageObject; state.currentConfigInfo = subPageObject;
}, },
[USE_MAIN_CONFIG](state) { /* Set config to rootConfig, by calling initialize with no params */
if (state.remoteConfig) { async [USE_MAIN_CONFIG]() {
state.config = state.remoteConfig; this.dispatch(Keys.INITIALIZE_CONFIG);
} else {
this.dispatch(Keys.INITIALIZE_CONFIG);
}
}, },
}, },
actions: { actions: {
/* Called when app first loaded. Reads config and sets state */
// async [INITIALIZE_CONFIG]({ commit }) {
// // Get the config file from the server and store it for use by the accumulator
// commit(SET_REMOTE_CONFIG, yaml.load((await axios.get('/conf.yml')).data));
// const deepCopy = (json) => JSON.parse(JSON.stringify(json));
// const config = deepCopy(new ConfigAccumulator().config());
// commit(SET_CONFIG, config);
// },
/* Fetches the root config file, only ever called by INITIALIZE_CONFIG */ /* Fetches the root config file, only ever called by INITIALIZE_CONFIG */
async [INITIALIZE_ROOT_CONFIG]({ commit }) { async [INITIALIZE_ROOT_CONFIG]({ commit }) {
console.log('Initializing root config....'); // Load and parse config from root config file
commit(SET_ROOT_CONFIG, yaml.load((await axios.get('/conf.yml')).data)); const data = await yaml.load((await axios.get('/conf.yml')).data);
// Replace missing root properties with empty objects
if (!data.appConfig) data.appConfig = {};
if (!data.pageInfo) data.pageInfo = {};
if (!data.sections) data.sections = [];
// Set the state, and return data
commit(SET_ROOT_CONFIG, data);
return data;
}, },
/** /**
* Fetches config and updates state * Fetches config and updates state
@ -350,18 +346,15 @@ const store = new Vuex.Store({
*/ */
async [INITIALIZE_CONFIG]({ commit, state }, subConfigPath) { async [INITIALIZE_CONFIG]({ commit, state }, subConfigPath) {
const fetchPath = subConfigPath || '/conf.yml'; // The path to fetch config from const fetchPath = subConfigPath || '/conf.yml'; // The path to fetch config from
if (!state.rootConfig) { const rootConfig = state.rootConfig || await this.dispatch(Keys.INITIALIZE_ROOT_CONFIG);
await this.dispatch(Keys.INITIALIZE_ROOT_CONFIG);
}
console.log('rootConfig', state.rootConfig);
if (!subConfigPath) { // Use root config as config if (!subConfigPath) { // Use root config as config
commit(SET_CONFIG, state.rootConfig); commit(SET_CONFIG, rootConfig);
} else { // Fetch sub-config, and use as config } else { // Fetch sub-config, and use as config
axios.get(fetchPath).then((response) => { axios.get(fetchPath).then((response) => {
const configContent = yaml.load(response.data); const configContent = yaml.load(response.data);
// Certain values must be inherited from root config // Certain values must be inherited from root config
configContent.appConfig = state.rootConfig.appConfig; configContent.appConfig = rootConfig.appConfig;
configContent.pages = state.rootConfig.pages; configContent.pages = rootConfig.pages;
commit(SET_CONFIG, configContent); commit(SET_CONFIG, configContent);
}).catch((err) => { }).catch((err) => {
ErrorHandler(`Unable to load config from '${fetchPath}'`, err); ErrorHandler(`Unable to load config from '${fetchPath}'`, err);