🚧 Working on `pages` form in interactive editor

src/components/InteractiveEditor/EditModeSaveMenu.vue

@@ -51,10 +51,11 @@
       </Button>
     </div>
     <!-- Open Modal Buttons -->
-    <div class="edit-banner-section edit-site-config-buttons">
+    <div class="edit-banner-section edit-config-buttons-container">
       <p class="section-sub-title">
         {{ $t('interactive-editor.menu.edit-site-data-subheading') }}
       </p>
+      <!-- Button to open pageInfo editor -->
       <Button
         :click="openEditPageInfo"
         :disallow="!permissions.allowViewConfig"
@@ -63,6 +64,7 @@
         {{ $t('interactive-editor.menu.edit-page-info-btn') }}
         <PageInfoIcon />
       </Button>
+      <!-- Button to open appConfig editor -->
       <Button
         :click="openEditAppConfig"
         :disallow="!permissions.allowViewConfig"
@@ -71,10 +73,20 @@
         {{ $t('interactive-editor.menu.edit-app-config-btn') }}
         <AppConfigIcon />
       </Button>
+      <!-- Button to open pages editor -->
+      <Button
+        :click="openEditMultiPages"
+        :disallow="!permissions.allowViewConfig"
+        v-tooltip="tooltip($t('interactive-editor.menu.edit-pages-tooltip'))"
+      >
+        {{ $t('interactive-editor.menu.edit-pages-btn') }}
+        <MultiPagesIcon />
+      </Button>
     </div>
-    <!-- Modals for editing appConfig + pageInfo -->
+    <!-- Modals for editing appConfig, pageInfo and pages -->
     <EditPageInfo />
     <EditAppConfig />
+    <EditMultiPages />
   </div>
 </template>
 
@@ -84,6 +96,7 @@ import Button from '@/components/FormElements/Button';
 import StoreKeys from '@/utils/StoreMutations';
 import EditPageInfo from '@/components/InteractiveEditor/EditPageInfo';
 import EditAppConfig from '@/components/InteractiveEditor/EditAppConfig';
+import EditMultiPages from '@/components/InteractiveEditor/EditMultiPages';
 import { modalNames } from '@/utils/defaults';
 import AccessError from '@/components/Configuration/AccessError';
 
@@ -93,6 +106,7 @@ import ExportIcon from '@/assets/interface-icons/interactive-editor-export-chang
 import CancelIcon from '@/assets/interface-icons/interactive-editor-cancel-changes.svg';
 import AppConfigIcon from '@/assets/interface-icons/interactive-editor-app-config.svg';
 import PageInfoIcon from '@/assets/interface-icons/interactive-editor-page-info.svg';
+import MultiPagesIcon from '@/assets/interface-icons/config-pages.svg';
 
 export default {
   name: 'EditModeSaveMenu',
@@ -100,13 +114,15 @@ export default {
   components: {
     Button,
     EditPageInfo,
+    EditAppConfig,
+    EditMultiPages,
     SaveLocallyIcon,
     SaveToDiskIcon,
     ExportIcon,
     CancelIcon,
     AppConfigIcon,
     PageInfoIcon,
-    EditAppConfig,
+    MultiPagesIcon,
     AccessError,
   },
   computed: {
@@ -138,6 +154,10 @@ export default {
       this.$modal.show(modalNames.EDIT_APP_CONFIG);
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
     },
+    openEditMultiPages() {
+      this.$modal.show(modalNames.EDIT_MULTI_PAGES);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
+    },
     tooltip(content) {
       return { content, trigger: 'hover focus', delay: 250 };
     },
@@ -145,7 +165,11 @@ export default {
       this.$toasted.show(message, { className: `toast-${success ? 'success' : 'error'}` });
     },
     saveLocally() {
-      this.saveConfigLocally(this.config);
+      const msg = this.$t('interactive-editor.menu.save-locally-warning');
+      const youSure = confirm(msg); // eslint-disable-line no-alert, no-restricted-globals
+      if (youSure) {
+        this.saveConfigLocally(this.config);
+      }
     },
     writeToDisk() {
       this.writeConfigToDisk(this.config);
@@ -168,14 +192,15 @@ div.edit-mode-bottom-banner {
   background: var(--interactive-editor-background-darker);
   box-shadow: 0 -5px 7px var(--transparent-50);
   grid-template-columns: 45% 10% 45%;
-  @include laptop-up { grid-template-columns: 40% 20% 40%; }
-  @include monitor-up { grid-template-columns: 30% 40% 30%; }
+  @include laptop-up { grid-template-columns: 50% 10% 40%; }
+  @include monitor-up { grid-template-columns: 40% 30% 30%; }
   @include big-screen-up { grid-template-columns: 25% 50% 25%; }
 
   /* Main sections */
   .edit-banner-section {
     padding: 0.5rem;
     height: 90%;
+    display: grid;
     /* Section sub-titles */
     p.section-sub-title {
       margin: 0;
@@ -196,22 +221,24 @@ div.edit-mode-bottom-banner {
         padding: 0 0.5rem;
       }
     }
+    button {
+      margin: 0.25rem;
+      height: stretch;
+      max-height: 3rem;
+    }
     /* Button containers */
-    &.edit-site-config-buttons,
-    &.save-buttons-container {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      button {
-        margin: 0.25rem;
-        height: stretch;
-        max-height: 3rem;
-      }
+    &.edit-config-buttons-container {
+      grid-template-columns: repeat(3, 1fr);
       p.section-sub-title {
-        grid-column-start: span 2;
+        grid-column-start: span 3;
       }
     }
     &.save-buttons-container {
       grid-row-start: span 2;
+      grid-template-columns: repeat(2, 1fr);
+      p.section-sub-title {
+        grid-column-start: span 2;
+      }
     }
   }
 

src/components/InteractiveEditor/EditMultiPages.vue

@@ -0,0 +1,131 @@
+<template>
+  <modal
+    :name="modalName" @closed="modalClosed"
+    :resizable="true" width="50%" height="80%"
+    classes="dashy-modal edit-multi-pages"
+  >
+  <div class="edit-multi-pages-inner" v-if="allowViewConfig">
+  <h3>{{ $t('interactive-editor.menu.edit-page-info-btn') }}</h3>
+  <FormSchema
+    :schema="schema"
+    v-model="formData"
+    @submit.prevent="saveToState"
+    class="multi-page-form"
+    name="multiPageForm"
+  >
+  <SaveCancelButtons :saveClick="saveToState" :cancelClick="cancelEditing" />
+  </FormSchema>
+  </div>
+  <AccessError v-else />
+  </modal>
+</template>
+
+<script>
+import FormSchema from '@formschema/native';
+import DashySchema from '@/utils/ConfigSchema';
+import StoreKeys from '@/utils/StoreMutations';
+import { modalNames } from '@/utils/defaults';
+import SaveCancelButtons from '@/components/InteractiveEditor/SaveCancelButtons';
+import AccessError from '@/components/Configuration/AccessError';
+
+export default {
+  name: 'EditPageInfo',
+  data() {
+    return {
+      formData: {},
+      schema: DashySchema.properties.pages,
+      modalName: modalNames.EDIT_MULTI_PAGES,
+    };
+  },
+  components: {
+    FormSchema,
+    SaveCancelButtons,
+    AccessError,
+  },
+  mounted() {
+    this.formData = this.pages;
+  },
+  computed: {
+    pages() {
+      return this.$store.getters.pages;
+    },
+    allowViewConfig() {
+      return this.$store.getters.permissions.allowViewConfig;
+    },
+  },
+  methods: {
+    /* When form submitted, update VueX store with new pageInfo, and close modal */
+    saveToState() {
+      this.$store.commit(StoreKeys.SET_PAGES, 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);
+    },
+    cancelEditing() {
+      this.$modal.hide(this.modalName);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '@/styles/style-helpers.scss';
+@import '@/styles/media-queries.scss';
+@import '@/styles/schema-editor.scss';
+
+.edit-multi-pages-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;
+  }
+  .multi-page-form {
+    @extend .schema-form;
+    margin-bottom: 2.5rem;
+    fieldset div[data-fs-wrapper], fieldset div[data-fs-kind=object] {
+      flex-direction: row;
+    }
+    [name=multiPageForm] button {
+      width: 8rem;
+      margin: 0 0.5rem 0.5rem 0.5rem;
+      padding: 0.25rem 0.5rem;
+      &[data-fs-button=push]::after { content: " Add New"; }
+      &[data-fs-button=moveUp]::after { content: " Move Up"; }
+      &[data-fs-button=moveDown]::after { content: " Move Down"; }
+      &[data-fs-button=delete]::after { content: " Delete"; }
+    }
+    div[data-fs-type=object] div[data-fs-type=object] {
+      div[data-fs-input=object] { border: none; }
+      label { display: none; }
+      div[data-fs-input=object] label { display: block; }
+    }
+    fieldset div[data-fs-kind=object] span {
+      text-align: right;
+    }
+    fieldset button[data-fs-button=push] {
+      min-width: 15rem;
+      padding: 0.5rem 0.75rem;
+      margin: 0.5rem 0;
+      font-size: 1rem;
+      color: var(--interactive-editor-color);
+      background: var(--interactive-editor-background);
+      border: 1px solid var(--interactive-editor-color);
+      border-radius: var(--curve-factor);
+      &:hover {
+        color: var(--interactive-editor-background);
+        background: var(--interactive-editor-color);
+      }
+    }
+  }
+}
+
+</style>

src/components/InteractiveEditor/SaveCancelButtons.vue

@@ -56,6 +56,9 @@ export default {
         path { fill: var(--interactive-editor-background); }
       }
     }
+    &:focus {
+      box-shadow: 1px 1px 6px var(--interactive-editor-color);
+    }
   }
 }
 </style>