✨ Implements UI editor form for appConfig

src/components/InteractiveEditor/EditAppConfig.vue

@@ -0,0 +1,134 @@
+<template>
+  <modal
+    :name="modalName"
+    :resizable="true"
+    width="50%"
+    height="80%"
+    classes="dashy-modal edit-app-config"
+    @closed="modalClosed"
+  >
+  <div class="edit-app-config-inner">
+  <h3>{{ $t('interactive-editor.edit-app-config-btn') }}</h3>
+  <div class="app-config-intro">
+    <p class="use-caution">Proceed with Caution</p>
+    The following options are for advanded app configration.
+    If you are unsure about any of the fields, please reference the
+    <a href="https://dashy.to/docs/configuring#appconfig-optional">documentation</a>
+    to avoid unintended consequences.
+  </div>
+  <Button class="save-app-config-btn" :click="saveToState">
+    {{ $t('interactive-editor.save-stage-btn') }}
+    <SaveIcon />
+  </button>
+  <FormSchema
+    :schema="schema"
+    v-model="formData"
+    @submit.prevent="saveToState"
+    :search="true"
+    class="app-config-form"
+    name="appConfigForm"
+  ></FormSchema>
+  <Button class="save-app-config-btn" :click="saveToState">
+    {{ $t('interactive-editor.save-stage-btn') }}
+    <SaveIcon />
+  </button>
+  </div>
+  </modal>
+</template>
+
+<script>
+import FormSchema from '@formschema/native';
+import DashySchema from '@/utils/ConfigSchema';
+import StoreKeys from '@/utils/StoreMutations';
+import { modalNames } from '@/utils/defaults';
+import Button from '@/components/FormElements/Button';
+import SaveIcon from '@/assets/interface-icons/save-config.svg';
+
+export default {
+  name: 'EditAppConfig',
+  data() {
+    return {
+      formData: {},
+      schema: DashySchema.properties.appConfig,
+      modalName: modalNames.EDIT_APP_CONFIG,
+    };
+  },
+  props: {},
+  components: {
+    FormSchema,
+    Button,
+    SaveIcon,
+  },
+  mounted() {
+    this.formData = this.appConfig;
+  },
+  computed: {
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
+  },
+  methods: {
+    /* When form submitteed, update VueX store with new appConfig, and close modal */
+    saveToState() {
+      const processedFormData = this.removeUndefinedValues(this.formData);
+      this.$store.commit(StoreKeys.UPDATE_APP_CONFIG, processedFormData);
+      this.$modal.hide(this.modalName);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
+      this.$store.commit(StoreKeys.SET_EDIT_MODE, true);
+    },
+    /* Called when modal manually closed, updates state to allow searching again */
+    modalClosed() {
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
+    },
+    /* Remove any attribute which has an undefined value before saving */
+    removeUndefinedValues(rawAppConfig) {
+      const raw = rawAppConfig;
+      const isEmpty = (value) => (value === undefined || value === {} || value === []);
+      Object.keys(raw).forEach(key => isEmpty(raw[key]) && delete raw[key]);
+      return raw;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '@/styles/style-helpers.scss';
+@import '@/styles/media-queries.scss';
+@import '@/styles/schema-editor.scss';
+
+.edit-app-config-inner {
+  padding: 1rem;
+  background: var(--interactive-editor-background);
+  color: var(--interactive-editor-color);
+  height: 100%;
+  overflow-y: auto;
+  @extend .scroll-bar;
+  h3 {
+    font-size: 1.4rem;
+    margin: 0.5rem;
+  }
+  .app-config-form {
+    @extend .schema-form;
+    border-top: 1px dashed var(--interactive-editor-color);
+  }
+  .app-config-intro {
+    padding: 0.5rem;
+    font-size: 0.9rem;
+    color: var(--interactive-editor-color);
+    background: var(--interactive-editor-background-darker);
+    border-radius: var(--interactive-editor-color);
+    p.use-caution {
+      color: var(--warning);
+      margin: 0;
+      font-weight: bold;
+    }
+    a {
+      color: var(--interactive-editor-color);
+    }
+  }
+  button.save-app-config-btn {
+    margin: 0.5rem auto 1.5rem;
+  }
+}
+
+</style>

src/components/InteractiveEditor/EditModeSaveMenu.vue

@@ -55,6 +55,7 @@
         <PageInfoIcon />
       </Button>
       <Button
+        :click="openEditAppConfig"
         v-tooltip="tooltip($t('interactive-editor.edit-app-config-tooltip'))"
       >
         {{ $t('interactive-editor.edit-app-config-btn') }}
@@ -63,6 +64,7 @@
     </div>
     <!-- Modals for editing appConfig + pageInfo -->
     <EditPageInfo />
+    <EditAppConfig />
   </div>
 </template>
 
@@ -71,6 +73,7 @@ import Button from '@/components/FormElements/Button';
 import StoreKeys from '@/utils/StoreMutations';
 import { modalNames } from '@/utils/defaults';
 import EditPageInfo from '@/components/InteractiveEditor/EditPageInfo';
+import EditAppConfig from '@/components/InteractiveEditor/EditAppConfig';
 
 import SaveLocallyIcon from '@/assets/interface-icons/interactive-editor-save-locally.svg';
 import SaveToDiskIcon from '@/assets/interface-icons/interactive-editor-save-disk.svg';
@@ -90,15 +93,13 @@ export default {
     CancelIcon,
     AppConfigIcon,
     PageInfoIcon,
+    EditAppConfig,
   },
   methods: {
     reset() {
       this.$store.dispatch(StoreKeys.INITIALIZE_CONFIG);
       this.$store.commit(StoreKeys.SET_EDIT_MODE, false);
     },
-    tooltip(content) {
-      return { content, trigger: 'hover focus', delay: 250 };
-    },
     openExportConfigMenu() {
       this.$modal.show(modalNames.EXPORT_CONFIG_MENU);
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
@@ -107,6 +108,13 @@ export default {
       this.$modal.show(modalNames.EDIT_PAGE_INFO);
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
     },
+    openEditAppConfig() {
+      this.$modal.show(modalNames.EDIT_APP_CONFIG);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
+    },
+    tooltip(content) {
+      return { content, trigger: 'hover focus', delay: 250 };
+    },
   },
 };
 </script>

src/components/Settings/LanguageSwitcher.vue

@@ -56,7 +56,7 @@ export default {
     /* The ISO code for the users language, synced with VueX store */
     savedLanguage: {
       get() {
-        return this.getIsoFromLangObj(this.$store.state.lang);
+        return this.getIsoFromLangObj(this.$store.getters.appConfig.lang);
       },
       set(newLang) {
         this.$store.commit(Keys.SET_LANGUAGE, newLang.code);

src/store.js

@@ -16,12 +16,12 @@ const {
   UPDATE_ITEM,
   SET_EDIT_MODE,
   UPDATE_PAGE_INFO,
+  UPDATE_APP_CONFIG,
 } = Keys;
 
 const store = new Vuex.Store({
   state: {
     config: {},
-    lang: '', // The users language, auto-detected or read from local storage / config
     editMode: false, // While true, the user can drag and edit items + sections
     modalOpen: false, // KB shortcut functionality will be disabled when modal is open
   },
@@ -58,7 +58,9 @@ const store = new Vuex.Store({
       state.config = config;
     },
     [SET_LANGUAGE](state, lang) {
-      state.lang = lang;
+      const newConfig = state.config;
+      newConfig.appConfig.language = lang;
+      state.config = newConfig;
     },
     [SET_MODAL_OPEN](state, modalOpen) {
       state.modalOpen = modalOpen;
@@ -83,6 +85,11 @@ const store = new Vuex.Store({
       newConfig.pageInfo = newPageInfo;
       state.config = newConfig;
     },
+    [UPDATE_APP_CONFIG](state, newAppConfig) {
+      const newConfig = state.config;
+      newConfig.appConfig = newAppConfig;
+      state.config = newConfig;
+    },
   },
   actions: {
     /* Called when app first loaded. Reads config and sets state */

src/utils/StoreMutations.js

@@ -7,6 +7,7 @@ const KEY_NAMES = [
   'SET_EDIT_MODE',
   'UPDATE_ITEM',
   'UPDATE_PAGE_INFO',
+  'UPDATE_APP_CONFIG',
 ];
 
 // Convert array of key names into an object, and export