✨ 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>