✨ Adds ability to edit pageInfo through the UI

src/components/InteractiveEditor/EditModeSaveMenu.vue

@@ -12,8 +12,11 @@
     <div class="edit-banner-section empty-space"></div>
     <!-- Save Buttons -->
     <div class="edit-banner-section save-buttons-container">
-      <p class="section-sub-title">Config Saving Options</p>
+      <p class="section-sub-title">
+        {{ $t('interactive-editor.config-save-methods-subheading') }}
+      </p>
       <Button
+        :click="openExportConfigMenu"
         v-tooltip="tooltip($t('interactive-editor.export-config-tooltip'))"
       >
         {{ $t('interactive-editor.export-config-btn') }}
@@ -41,8 +44,11 @@
     </div>
     <!-- Open Modal Buttons -->
     <div class="edit-banner-section edit-site-config-buttons">
-      <p class="section-sub-title">Edit Site Data</p>
+      <p class="section-sub-title">
+        {{ $t('interactive-editor.edit-site-data-subheading') }}
+      </p>
       <Button
+        :click="openEditPageInfo"
         v-tooltip="tooltip($t('interactive-editor.edit-page-info-tooltip'))"
       >
         {{ $t('interactive-editor.edit-page-info-btn') }}
@@ -55,12 +61,16 @@
         <AppConfigIcon />
       </Button>
     </div>
+    <!-- Modals for editing appConfig + pageInfo -->
+    <EditPageInfo />
   </div>
 </template>
 
 <script>
 import Button from '@/components/FormElements/Button';
 import StoreKeys from '@/utils/StoreMutations';
+import { modalNames } from '@/utils/defaults';
+import EditPageInfo from '@/components/InteractiveEditor/EditPageInfo';
 
 import SaveLocallyIcon from '@/assets/interface-icons/interactive-editor-save-locally.svg';
 import SaveToDiskIcon from '@/assets/interface-icons/interactive-editor-save-disk.svg';
@@ -73,6 +83,7 @@ export default {
   name: 'EditModeSaveMenu',
   components: {
     Button,
+    EditPageInfo,
     SaveLocallyIcon,
     SaveToDiskIcon,
     ExportIcon,
@@ -88,6 +99,14 @@ export default {
     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);
+    },
+    openEditPageInfo() {
+      this.$modal.show(modalNames.EDIT_PAGE_INFO);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
+    },
   },
 };
 </script>
@@ -159,5 +178,16 @@ div.edit-mode-bottom-banner {
       flex-direction: column;
     }
   }
+  /* Set colors for buttons */
+  .edit-banner-section button {
+    color: var(--interactive-editor-color);
+    border-color: var(--interactive-editor-color);
+    background: var(--interactive-editor-background);
+    &:hover {
+      color: var(--interactive-editor-background);
+      border-color: var(--interactive-editor-color);
+      background: var(--interactive-editor-color);
+    }
+  }
 }
 </style>

src/components/InteractiveEditor/EditPageInfo.vue

@@ -0,0 +1,96 @@
+<template>
+  <modal
+    :name="modalName"
+    :resizable="true"
+    width="50%"
+    height="80%"
+    classes="dashy-modal edit-page-info"
+    @closed="modalClosed"
+  >
+  <div class="edit-page-info-inner">
+  <h3>{{ $t('interactive-editor.edit-page-info-btn') }}</h3>
+  <FormSchema
+    :schema="schema"
+    v-model="formData"
+    @submit.prevent="saveToState"
+    class="page-info-form"
+    name="pageInfoForm"
+  >
+    <Button type="submit">
+      {{ $t('interactive-editor.save-stage-btn') }}
+      <SaveIcon />
+    </button>
+  </FormSchema>
+  </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: 'EditPageInfo',
+  data() {
+    return {
+      formData: {},
+      schema: DashySchema.properties.pageInfo,
+      modalName: modalNames.EDIT_PAGE_INFO,
+    };
+  },
+  props: {},
+  components: {
+    FormSchema,
+    Button,
+    SaveIcon,
+  },
+  mounted() {
+    this.formData = this.pageInfo;
+  },
+  computed: {
+    pageInfo() {
+      return this.$store.getters.pageInfo;
+    },
+  },
+  methods: {
+    /* When form submitteed, update VueX store with new pageInfo, and close modal */
+    saveToState() {
+      this.$store.commit(StoreKeys.UPDATE_PAGE_INFO, this.formData);
+      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);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '@/styles/style-helpers.scss';
+@import '@/styles/media-queries.scss';
+
+.edit-page-info-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;
+  }
+  .page-info-form {
+    @extend .schema-form;
+    margin-bottom: 2.5rem;
+  }
+}
+
+</style>