🔥 Implementation of VueX, delete all emit events

src/components/LinkItems/IframeModal.vue

@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import Keys from '@/utils/StoreMutations';
+
 export default {
   name: 'IframeModal',
   props: {
@@ -21,13 +23,13 @@ export default {
     show(url) {
       this.url = url;
       this.$modal.show(this.name);
-      this.$emit('modalChanged', true);
+      this.$store.commit(Keys.SET_MODAL_OPEN, true);
     },
     hide() {
       this.$modal.hide(this.name);
     },
     modalClosed() {
-      this.$emit('modalChanged', false);
+      this.$store.commit(Keys.SET_MODAL_OPEN, false);
     },
   },
 };

src/components/LinkItems/Section.vue

@@ -44,7 +44,6 @@
       :ref="`iframeModal-${groupId}`"
       :name="`iframeModal-${groupId}`"
       @closed="$emit('itemClicked')"
-      @modalChanged="modalChanged"
     />
   </Collapsable>
 </template>
@@ -65,7 +64,6 @@ export default {
     displayData: Object,
     items: Array,
     itemSize: String,
-    modalOpen: Boolean,
   },
   components: {
     Collapsable,
@@ -124,10 +122,6 @@ export default {
     triggerModal(url) {
       this.$refs[`iframeModal-${this.groupId}`].show(url);
     },
-    /* Emmit value upwards when iframe modal opened/ closed */
-    modalChanged(changedTo) {
-      this.$emit('change-modal-visibility', changedTo);
-    },
     /* Determines if user has enabled online status checks */
     shouldEnableStatusCheck(itemPreference) {
       const globalPreference = this.appConfig.statusCheck || false;

src/components/MinimalView/MinimalSection.vue

@@ -26,7 +26,6 @@
       :ref="`iframeModal-${groupId}`"
       :name="`iframeModal-${groupId}`"
       @closed="$emit('itemClicked')"
-      @modalChanged="modalChanged"
     />
   </div>
 </template>
@@ -70,9 +69,6 @@ export default {
     triggerModal(url) {
       this.$refs[`iframeModal-${this.groupId}`].show(url);
     },
-    modalChanged(changedTo) {
-      this.$emit('change-modal-visibility', changedTo);
-    },
     shouldEnableStatusCheck(itemPreference) {
       const globalPreference = this.appConfig.statusCheck || false;
       return itemPreference !== undefined ? itemPreference : globalPreference;

src/components/Settings/ConfigLauncher.vue

@@ -11,7 +11,7 @@
 
     <!-- Modal containing all the configuration options -->
     <modal :name="modalNames.CONF_EDITOR" :resizable="true" width="60%" height="85%"
-      @closed="$emit('modalChanged', false)" classes="dashy-modal">
+      @closed="editorClosed" classes="dashy-modal">
       <ConfigContainer :config="combineConfig()" />
     </modal>
 
@@ -48,6 +48,7 @@
 import ConfigContainer from '@/components/Configuration/ConfigContainer';
 import LanguageSwitcher from '@/components/Settings/LanguageSwitcher';
 import { topLevelConfKeys, localStorageKeys, modalNames } from '@/utils/defaults';
+import Keys from '@/utils/StoreMutations';
 import IconSpanner from '@/assets/interface-icons/config-editor.svg';
 import IconViewMode from '@/assets/interface-icons/application-change-view.svg';
 import IconHome from '@/assets/interface-icons/application-home.svg';
@@ -85,7 +86,10 @@ export default {
   methods: {
     showEditor: function show() {
       this.$modal.show(modalNames.CONF_EDITOR);
-      this.$emit('modalChanged', true);
+      this.$store.commit(Keys.SET_MODAL_OPEN, true);
+    },
+    editorClosed: function show() {
+      this.$store.commit(Keys.SET_MODAL_OPEN, false);
     },
     combineConfig() {
       const conf = {};

src/components/Settings/SearchBar.vue

@@ -35,9 +35,6 @@ import {
 
 export default {
   name: 'FilterTile',
-  props: {
-    active: Boolean,
-  },
   data() {
     return {
       input: '', // Users current search term
@@ -46,6 +43,9 @@ export default {
     };
   },
   computed: {
+    active() {
+      return !this.$store.state.modalOpen;
+    },
     searchPrefs() {
       return this.$store.getters.webSearch || {};
     },

src/components/Settings/SettingsContainer.vue

@@ -3,15 +3,14 @@
     <SearchBar ref="SearchBar"
       @user-is-searchin="userIsTypingSomething"
       v-if="searchVisible"
-      :active="!modalOpen"
     />
     <div class="options-outer">
       <div :class="`options-container ${!settingsVisible ? 'hide' : ''}`">
-        <ThemeSelector :externalThemes="externalThemes" @modalChanged="modalChanged"
+        <ThemeSelector :externalThemes="externalThemes"
           :confTheme="getInitialTheme()" :userThemes="getUserThemes()" />
         <LayoutSelector :displayLayout="displayLayout" @layoutUpdated="updateDisplayLayout"/>
         <ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
-        <ConfigLauncher @modalChanged="modalChanged" />
+        <ConfigLauncher />
         <AuthButtons  v-if="userState != 'noone'" :userType="userState" />
       </div>
       <div :class="`show-hide-container ${settingsVisible? 'hide-btn' : 'show-btn'}`">
@@ -51,7 +50,6 @@ export default {
     displayLayout: String,
     iconSize: String,
     externalThemes: Object,
-    modalOpen: Boolean,
   },
   components: {
     SearchBar,
@@ -110,9 +108,6 @@ export default {
     updateIconSize(iconSize) {
       this.$emit('change-icon-size', iconSize);
     },
-    modalChanged(changedTo) {
-      this.$emit('change-modal-visibility', changedTo);
-    },
     getInitialTheme() {
       return this.appConfig.theme || '';
     },

src/components/Settings/ThemeSelector.vue

@@ -31,6 +31,7 @@ import {
   ApplyCustomVariables,
 } from '@/utils/ThemeHelper';
 import Defaults, { localStorageKeys } from '@/utils/defaults';
+import Keys from '@/utils/StoreMutations';
 import IconPalette from '@/assets/interface-icons/config-color-palette.svg';
 
 export default {
@@ -94,12 +95,12 @@ export default {
     },
     /* Opens the theme color configurator popup */
     openThemeConfigurator() {
-      this.$emit('modalChanged', true);
+      this.$store.commit(Keys.SET_MODAL_OPEN, true);
       this.themeConfiguratorOpen = true;
     },
     /* Closes the theme color configurator popup */
     closeThemeConfigurator() {
-      // this.$emit('modalChanged', false);
+      this.$store.commit(Keys.SET_MODAL_OPEN, false);
       this.themeConfiguratorOpen = false;
     },
     /* Updates theme. Checks if the new theme is local or external,

src/main.js

@@ -51,7 +51,7 @@ const render = (awesome) => awesome(Dashy);
 
 // Mount the app, with router, store i18n and render func
 const mount = () => new Vue({
-  router, render, i18n, store,
+  store, router, render, i18n,
 }).$mount('#app');
 
 // If Keycloak not enabled, then proceed straight to the app

src/router.js

@@ -14,10 +14,10 @@ import Home from '@/views/Home.vue';
 import Login from '@/views/Login.vue';
 import Workspace from '@/views/Workspace.vue';
 import Minimal from '@/views/Minimal.vue';
+import ConfigAccumulator from '@/utils/ConfigAccumalator';
 
 // Import helper functions, config data and defaults
 import { isAuthEnabled, isLoggedIn, isGuestAccessEnabled } from '@/utils/Auth';
-import { config } from '@/utils/ConfigHelpers';
 import { metaTagData, startingView, routePaths } from '@/utils/defaults';
 import ErrorHandler from '@/utils/ErrorHandler';
 
@@ -32,8 +32,18 @@ const isAuthenticated = () => {
   return (!authEnabled || userLoggedIn || guestEnabled);
 };
 
+const getConfig = () => {
+  const Accumulator = new ConfigAccumulator();
+  return {
+    appConfig: Accumulator.appConfig(),
+    pageInfo: Accumulator.pageInfo(),
+  };
+};
+
+const { appConfig, pageInfo } = getConfig();
+
 /* Get the users chosen starting view from app config, or return default */
-const getStartingView = () => config.appConfig.startingView || startingView;
+const getStartingView = () => appConfig.startingView || startingView;
 
 /**
  * Returns the component that should be rendered at the base path,
@@ -51,7 +61,7 @@ const getStartingComponent = () => {
 
 /* Returns the meta tags for each route */
 const makeMetaTags = (defaultTitle) => ({
-  title: config.pageInfo.title || defaultTitle,
+  title: pageInfo.title || defaultTitle,
   metaTags: metaTagData,
 });
 

src/utils/Auth.js

@@ -16,9 +16,7 @@ const getAppConfig = () => {
  * Support for old user structure will be removed in V 1.7.0
  */
 const printWarning = () => {
-  const msg = 'From V 1.6.5 onwards, the structure of the users object has changed.';
-  // eslint-disable-next-line no-console
-  console.warn(msg);
+  ErrorHandler('From V 1.6.5 onwards, the structure of the users object has changed.');
 };
 
 /* Returns true if keycloak is enabled */

src/utils/ConfigAccumalator.js

@@ -11,9 +11,8 @@ import {
   pageInfo as defaultPageInfo,
   iconSize as defaultIconSize,
   layout as defaultLayout,
-  // language as defaultLanguage,
 } from '@/utils/defaults';
-
+import ErrorHandler from '@/utils/ErrorHandler';
 import conf from '../../public/conf.yml';
 
 export default class ConfigAccumulator {
@@ -46,24 +45,14 @@ export default class ConfigAccumulator {
 
   /* Page Info */
   pageInfo() {
-    const defaults = defaultPageInfo;
-    let localPageInfo;
-    try {
-      localPageInfo = JSON.parse(localStorage[localStorageKeys.PAGE_INFO]);
-    } catch (e) {
-      localPageInfo = {};
+    let localPageInfo = {};
+    if (localStorage[localStorageKeys.PAGE_INFO]) {
+      // eslint-disable-next-line brace-style
+      try { localPageInfo = JSON.parse(localStorage[localStorageKeys.PAGE_INFO]); }
+      catch (e) { ErrorHandler('Malformed pageInfo data in local storage'); }
     }
-    let filePageInfo = {};
-    if (this.conf) {
-      filePageInfo = this.conf.pageInfo || {};
-    }
-    const pi = filePageInfo || defaults; // The page info object to return
-    pi.title = localPageInfo.title || filePageInfo.title || defaults.title;
-    pi.logo = localPageInfo.logo || filePageInfo.logo || defaults.logo;
-    pi.description = localPageInfo.description || filePageInfo.description || defaults.description;
-    pi.navLinks = localPageInfo.navLinks || filePageInfo.navLinks || defaults.navLinks;
-    pi.footerText = localPageInfo.footerText || filePageInfo.footerText || defaults.footerText;
-    return pi;
+    const filePageInfo = this.conf ? this.conf.pageInfo || {} : {};
+    return { ...defaultPageInfo, ...filePageInfo, ...localPageInfo };
   }
 
   /* Sections */
@@ -75,13 +64,11 @@ export default class ConfigAccumulator {
         const json = JSON.parse(localSections);
         if (json.length >= 1) return json;
       } catch (e) {
-        // The data in local storage has been malformed, will return conf.sections instead
+        ErrorHandler('Malformed section data in local storage');
       }
     }
     // If the function hasn't yet returned, then return the config file sections
-    let sectionsFile = [];
-    if (this.conf) sectionsFile = this.conf.sections || [];
-    return sectionsFile;
+    return this.conf ? this.conf.sections || [] : [];
   }
 
   /* Complete config */

src/views/Home.vue

@@ -60,7 +60,6 @@ export default {
     searchValue: '',
     layout: '',
     itemSizeBound: '',
-    modalOpen: false, // When true, keybindings are disabled
   }),
   computed: {
     sections() {
@@ -72,6 +71,9 @@ export default {
     pageInfo() {
       return this.$store.getters.pageInfo;
     },
+    modalOpen() {
+      return this.$store.state.modalOpen;
+    },
     /* Get class for num columns, if specified by user */
     colCount() {
       let { colCount } = this.appConfig;
@@ -144,7 +146,7 @@ export default {
     },
     /* Update data when modal is open (so that key bindings can be disabled) */
     updateModalVisibility(modalState) {
-      this.modalOpen = modalState;
+      this.$store.commit('SET_MODAL_OPEN', modalState);
     },
     /* Returns an array of links to external CSS from the Config */
     getExternalCSSLinks() {