⚡ Less confusing handling of local config

2024-04-16 16:50:06 +01:00 · 2024-04-16 16:50:06 +01:00 · 3c9e5bd369
parent c456bd6bd6
commit 3c9e5bd369
8 changed files with 116 additions and 20 deletions
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@ -171,9 +171,9 @@
    "status-fail-msg": "Task Failed",
    "success-msg-disk": "Config file written to disk successfully",
    "success-msg-local": "Local changes saved successfully",
-    "success-note-l1": "The app should rebuild automatically.",
-    "success-note-l2": "This may take up to a minute.",
-    "success-note-l3": "You will need to refresh the page for changes to take effect.",
+    "success-note-l1": "You will need to refresh the page for changes to take effect.",
+    "success-note-l2": "",
+    "success-note-l3": "",
    "error-msg-save-mode": "Please select a Save Mode: Local or File",
    "error-msg-cannot-save": "An error occurred saving config",
    "error-msg-bad-json": "Error in JSON, possibly malformed",
--- a/src/components/Configuration/ConfigContainer.vue
+++ b/src/components/Configuration/ConfigContainer.vue
@ -47,16 +47,17 @@
          </Button>
          <!-- Display app version and language -->
          <p class="language">{{ getLanguage() }}</p>
-          <p v-if="$store.state.currentConfigInfo" class="config-location">
-            Using Config From<br>
-            {{ $store.state.currentConfigInfo.confPath }}
+          <!-- Display location of config file -->
+          <p class="config-location">
+            Using config from
+            <a :href="configPath">{{ configPath }}</a>
          </p>
          <AppVersion />
        </div>
        <!-- Display note if Config disabled, or if on mobile -->
        <p v-if="!enableConfig" class="config-disabled-note">{{ $t('config.disabled-note') }}</p>
        <p class="small-screen-note" style="display: none;">{{ $t('config.small-screen-note') }}</p>
-        <div class="config-note">
+        <div class="config-note" @click="openExportConfigModal">
          <span>{{ $t('config.backup-note') }}</span>
        </div>
      </div>
@ -116,6 +117,11 @@ export default {
    enableConfig() {
      return this.$store.getters.permissions.allowViewConfig;
    },
+    configPath() {
+      return this.$store.state.currentConfigInfo?.confPath
+      || process.env.VUE_APP_CONFIG_PATH
+      || '/conf.yml';
+    },
  },
  components: {
    Button,
@ -248,8 +254,12 @@ a.hyperlink-wrapper {
 p.app-version, p.language, p.config-location {
  margin: 0.5rem auto;
  font-size: 1rem;
-  color: var(--transparent-white-50);
+  color: var(--config-settings-color);
  cursor: default;
+  opacity: var(--dimming-factor);
+  a {
+    color: var(--config-settings-color);
+  }
 }

 div.code-container {
--- a/src/components/InteractiveEditor/ExportConfigMenu.vue
+++ b/src/components/InteractiveEditor/ExportConfigMenu.vue
@ -22,6 +22,14 @@
        <DownloadConfigIcon />
      </Button>
    </div>
+    <!-- Show path to which config file is being used -->
+    <div class="config-path-info">
+      <h3>Config Location</h3>
+      <p>
+        The base config file you are currently using is
+        <a :href="configPath">{{ configPath }}</a>
+      </p>
+    </div>
    <!-- View Config in Tree Mode Section -->
    <h3>{{ $t('interactive-editor.export.view-title') }}</h3>
    <tree-view :data="config" class="config-tree-view" />
@ -61,6 +69,11 @@ export default {
    allowViewConfig() {
      return this.$store.getters.permissions.allowViewConfig;
    },
+    configPath() {
+      return this.$store.state.currentConfigInfo?.confPath
+      || process.env.VUE_APP_CONFIG_PATH
+      || '/conf.yml';
+    },
  },
  methods: {
    convertJsonToYaml() {
@ -121,6 +134,13 @@ export default {
    border-bottom: 1px dashed var(--interactive-editor-color);
    button { margin: 0 1rem; }
  }
+  .config-path-info {
+    p, a {
+      color: var(--interactive-editor-color);
+      font-size: 1.2rem;
+    }
+    border-bottom: 1px dashed var(--interactive-editor-color);
+  }
  .config-tree-view {
    padding: 0.5rem;
    font-family: var(--font-monospace);
--- a/src/components/Settings/KeyboardShortcutInfo.vue
+++ b/src/components/Settings/KeyboardShortcutInfo.vue
@ -1,36 +1,70 @@
 <template>
  <transition name="slide-fade">
    <div class="kb-sc-info" v-if="!shouldHide">
-      <h5>There are keyboard shortcuts! ⌨️🙌</h5>
+      <h5>{{ popupContent.title }}</h5>
      <div class="close" title="Hide forever [Esc]" @click="hideWelcomeHelper()">x</div>
-      <p title="Press [Esc] to hide this tip forever. See there's even a shortcut for that! 🚀">
-        Just start typing to filter. Then use the tab key to cycle through results,
-        and press enter to launch the selected item, or alt + enter to open in a modal.
-        You can hit Esc at anytime to clear the search. Easy 🥳
-      </p>
+      <p :title="popupContent.hoverText">{{ popupContent.message }}</p>
+      <p :title="popupContent.hoverText">{{ popupContent.messageContinued }}</p>
+      <div class="action-buttons">
+        <button @click="exportConfig">Export Local Config</button>
+        <button @click="saveConfig">Save Changes to Disk</button>
+        <button @click="resetLocalConfig">Reset Local Changes</button>
+        <button @click="hideWelcomeHelper">Dismiss this Notification</button>
+      </div>
    </div>
  </transition>
 </template>

 <script>

-import { localStorageKeys } from '@/utils/defaults';
+import { localStorageKeys, modalNames } from '@/utils/defaults';
+import StoreKeys from '@/utils/StoreMutations';
+import configSavingMixin from '@/mixins/ConfigSaving';

 export default {
  name: 'KeyboardShortcutInfo',
+  mixins: [configSavingMixin],
  data() {
    return {
      shouldHide: true, // False = show/ true = hide. Intuitive, eh?
-      timeDelay: 3000, // Short delay in ms before popup appears
+      timeDelay: 2000, // Short delay in ms before popup appears
+      popupContent: {
+        title: '⚠️ You\'re using a local config',
+        message: `This means that your settings are saved in this browser only,
+        and won't persist across devices.`,
+        messageContinued: `To ensure you don't loose your changes,
+        it's recommended to download a copy of your config, so you can restore it later.`,
+        hoverText: 'Press [Esc] to hide this warning',
+      },
    };
  },
  methods: {
+    exportConfig() {
+      this.$modal.show(modalNames.EXPORT_CONFIG_MENU);
+      this.shouldHide = true;
+    },
+    saveConfig() {
+      const localConfig = this.$store.state.config;
+      this.writeConfigToDisk(localConfig);
+      this.shouldHide = true;
+    },
+    resetLocalConfig() {
+      const msg = `${this.$t('config.reset-config-msg-l1')} `
+      + `${this.$t('config.reset-config-msg-l2')}\n\n${this.$t('config.reset-config-msg-l3')}`;
+      const isTheUserSure = confirm(msg); // eslint-disable-line no-alert, no-restricted-globals
+      if (isTheUserSure) {
+        localStorage.clear();
+        this.$toasted.show(this.$t('config.data-cleared-msg'));
+        this.$store.dispatch(StoreKeys.INITIALIZE_CONFIG);
+        this.shouldHide = true;
+      }
+    },
    /**
     * Returns true if the key exists in session storage, otherwise false
     * And the !! just converts 'false' to false, as strings resolve to true
     */
    shouldHideWelcomeMessage() {
-      return !!localStorage[localStorageKeys.HIDE_WELCOME_BANNER];
+      return !!localStorage[localStorageKeys.HIDE_INFO_NOTIFICATION];
    },
    /**
     * Update session storage, so that it won't be shown again
@ -38,7 +72,7 @@ export default {
     */
    hideWelcomeHelper() {
      this.shouldHide = true;
-      localStorage.setItem(localStorageKeys.HIDE_WELCOME_BANNER, true);
+      localStorage.setItem(localStorageKeys.HIDE_INFO_NOTIFICATION, true);
      window.removeEventListener('keyup', this.keyPressEvent);
    },
    /* Passed to window function, to add/ remove event listener */
@ -114,6 +148,23 @@ export default {
    }
  }
 }
+.action-buttons {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 1em;
+  button {
+    padding: 0.2rem;
+    background: var(--welcome-popup-background);
+    color: var(--welcome-popup-text-color);
+    border: 1px solid var(--welcome-popup-text-color);
+    border-radius: var(--curve-factor);
+    transition: all 0.2s ease-in-out;
+    &:hover {
+      background: var(--welcome-popup-text-color);
+      color: var(--welcome-popup-background);
+    }
+  }
+}
 /* Animations, animations everywhere */
 .slide-fade-enter-active {
  transition: all 1s ease;
--- a/src/store.js
+++ b/src/store.js
@ -19,6 +19,7 @@ const {
  SET_CONFIG,
  SET_ROOT_CONFIG,
  SET_CURRENT_CONFIG_INFO,
+  SET_IS_USING_LOCAL_CONFIG,
  SET_MODAL_OPEN,
  SET_LANGUAGE,
  SET_ITEM_LAYOUT,
@ -49,6 +50,7 @@ const store = new Vuex.Store({
    editMode: false, // While true, the user can drag and edit items + sections
    modalOpen: false, // KB shortcut functionality will be disabled when modal is open
    currentConfigInfo: {}, // For multi-page support, will store info about config file
+    isUsingLocalConfig: false, // If true, will use local config instead of fetched
    navigateConfToTab: undefined, // Used to switch active tab in config modal
  },
  getters: {
@ -155,6 +157,9 @@ const store = new Vuex.Store({
    [SET_CURRENT_CONFIG_INFO](state, subConfigInfo) {
      state.currentConfigInfo = subConfigInfo;
    },
+    [SET_IS_USING_LOCAL_CONFIG](state, isUsingLocalConfig) {
+      state.isUsingLocalConfig = isUsingLocalConfig;
+    },
    [SET_LANGUAGE](state, lang) {
      const newConfig = state.config;
      newConfig.appConfig.language = lang;
@ -334,6 +339,7 @@ const store = new Vuex.Store({
     */
    async [INITIALIZE_CONFIG]({ commit, state }, subConfigId) {
      const rootConfig = state.rootConfig || await this.dispatch(Keys.INITIALIZE_ROOT_CONFIG);
+      commit(SET_IS_USING_LOCAL_CONFIG, false);
      if (!subConfigId) { // Use root config as config
        commit(SET_CONFIG, rootConfig);
        commit(SET_CURRENT_CONFIG_INFO, {});
@ -350,6 +356,7 @@ const store = new Vuex.Store({
        }
        if (localSections.length > 0) {
          rootConfig.sections = localSections;
+          commit(SET_IS_USING_LOCAL_CONFIG, true);
        }
        return rootConfig;
      } else {
@ -377,7 +384,10 @@ const store = new Vuex.Store({
          if (localSectionsRaw) {
            try {
              const json = JSON.parse(localSectionsRaw);
-              if (json.length >= 1) configContent.sections = json;
+              if (json.length >= 1) {
+                configContent.sections = json;
+                commit(SET_IS_USING_LOCAL_CONFIG, true);
+              }
            } catch (e) {
              ErrorHandler('Malformed section data in local storage for sub-config');
            }
--- a/src/utils/StoreMutations.js
+++ b/src/utils/StoreMutations.js
@ -6,6 +6,7 @@ const KEY_NAMES = [
  'SET_CONFIG',
  'SET_ROOT_CONFIG',
  'SET_CURRENT_CONFIG_INFO',
+  'SET_IS_USING_LOCAL_CONFIG',
  'SET_CURRENT_SUB_PAGE',
  'SET_MODAL_OPEN',
  'SET_LANGUAGE',
--- a/src/utils/defaults.js
+++ b/src/utils/defaults.js
@ -116,7 +116,7 @@ module.exports = {
  /* Key names for local storage identifiers */
  localStorageKeys: {
    LANGUAGE: 'language',
-    HIDE_WELCOME_BANNER: 'hideWelcomeHelpers',
+    HIDE_INFO_NOTIFICATION: 'hideWelcomeHelpers',
    LAYOUT_ORIENTATION: 'layoutOrientation',
    COLLAPSE_STATE: 'collapseState',
    ICON_SIZE: 'iconSize',
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -56,6 +56,8 @@
    <EditModeSaveMenu v-if="isEditMode" />
    <!-- Modal for viewing and exporting configuration file -->
    <ExportConfigMenu />
+    <!-- Shows pertinent info -->
+    <NotificationThing v-if="$store.state.isUsingLocalConfig"/>
  </div>
 </template>

@ -66,6 +68,7 @@ import Section from '@/components/LinkItems/Section.vue';
 import EditModeSaveMenu from '@/components/InteractiveEditor/EditModeSaveMenu.vue';
 import ExportConfigMenu from '@/components/InteractiveEditor/ExportConfigMenu.vue';
 import AddNewSection from '@/components/InteractiveEditor/AddNewSectionLauncher.vue';
+import NotificationThing from '@/components/Settings/LocalConfigWarning.vue';
 import StoreKeys from '@/utils/StoreMutations';
 import { localStorageKeys, modalNames } from '@/utils/defaults';
 import ErrorHandler from '@/utils/ErrorHandler';
@ -79,6 +82,7 @@ export default {
    EditModeSaveMenu,
    ExportConfigMenu,
    AddNewSection,
+    NotificationThing,
    Section,
    BackIcon,
  },