✨ Add new section functionality

src/components/InteractiveEditor/AddNewSectionLauncher.vue

@@ -0,0 +1,66 @@
+<!-- Main homepage for default view -->
+<template>
+  <div class="add-section">
+  <!-- When in edit mode, show Add New Section button -->
+  <div v-if="isEditMode" @click="openAddNewSectionMenu()" class="add-new-section">
+    <p>➕ {{ $t('interactive-editor.edit-section.add-section-title') }}</p>
+  </div>
+  <!-- Add new section form -->
+  <EditSectionMenu
+    v-if="isEditMode && addNewSectionOpen"
+    :isAddNew="true"
+    @closeEditSection="closeEditSection"
+  />
+  </div>
+</template>
+
+<script>
+
+import EditSectionMenu from '@/components/InteractiveEditor/EditSection.vue';
+import StoreKeys from '@/utils/StoreMutations';
+import { modalNames } from '@/utils/defaults';
+
+export default {
+  name: 'add-section-container',
+  components: {
+    EditSectionMenu,
+  },
+  data: () => ({
+    addNewSectionOpen: false,
+  }),
+  computed: {
+    isEditMode() {
+      return this.$store.state.editMode;
+    },
+  },
+  methods: {
+    openAddNewSectionMenu() {
+      this.addNewSectionOpen = true;
+      this.$modal.show(modalNames.EDIT_SECTION);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
+    },
+    closeEditSection() {
+      this.addNewSectionOpen = false;
+      this.$modal.hide(modalNames.EDIT_SECTION);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+.add-new-section {
+  border: 2px dashed var(--primary);
+  border-radius: var(--curve-factor);
+  padding: var(--item-group-padding);
+  background: var(--item-group-background);
+  color: var(--primary);
+  font-size: 1.2rem;
+  cursor: pointer;
+  text-align: center;
+  height: fit-content;
+  margin: 10px;
+}
+
+</style>

src/components/InteractiveEditor/EditSection.vue

@@ -1,14 +1,13 @@
 <template>
   <modal
-    :name="modalName"
-    :resizable="true"
-    width="50%"
-    height="80%"
+    :name="modalName" @closed="modalClosed"
+    :resizable="true" width="50%" height="80%"
     classes="dashy-modal edit-section"
-    @closed="modalClosed"
   >
   <div class="edit-section-inner">
-    <h3>{{ $t('interactive-editor.edit-section.edit-section-title') }}</h3>
+    <h3>
+      {{ $t(`interactive-editor.edit-section.${isAddNew ? 'add' : 'edit'}-section-title`) }}
+    </h3>
     <FormSchema
       :schema="customSchema"
       v-model="sectionData"
@@ -34,6 +33,7 @@ export default {
   name: 'EditSection',
   props: {
     sectionIndex: Number,
+    isAddNew: Boolean,
   },
   components: {
     SaveCancelButtons,
@@ -47,6 +47,7 @@ export default {
     };
   },
   computed: {
+    /* Make a custom schema object, using fields from ConfigSchema */
     customSchema() {
       const sectionSchema = this.schema;
       const displayDataSchema = this.schema.displayData.properties;
@@ -76,7 +77,9 @@ export default {
     this.$modal.show(modalNames.EDIT_SECTION);
   },
   methods: {
+    /* From the current index, return section data */
     getSectionFromState(index) {
+      if (this.isAddNew) return {};
       return this.$store.getters.getSectionByIndex(index);
     },
     /* Clean up work, triggered when modal closed */
@@ -84,9 +87,14 @@ export default {
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
       this.$emit('closeEditSection');
     },
+    /* Either update existing section, or insert new one, then close modal */
     saveSection() {
       const { sectionIndex, sectionData } = this;
+      if (this.isAddNew) {
+        this.$store.commit(StoreKeys.INSERT_SECTION, sectionData);
+      } else {
         this.$store.commit(StoreKeys.UPDATE_SECTION, { sectionIndex, sectionData });
+      }
       this.$store.commit(StoreKeys.SET_EDIT_MODE, true);
       this.$emit('closeEditSection');
     },

src/views/Home.vue

@@ -44,6 +44,8 @@
         :class="
         (searchValue && filterTiles(section.items, searchValue).length === 0) ? 'no-results' : ''"
       />
+      <!-- Show add new section button, in edit mode -->
+      <AddNewSection v-if="isEditMode" />
     </div>
     <!-- Show message when there's no data to show -->
     <div v-if="checkIfResults()" class="no-data">
@@ -62,8 +64,10 @@ import SettingsContainer from '@/components/Settings/SettingsContainer.vue';
 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 { searchTiles } from '@/utils/Search';
-import Defaults, { localStorageKeys, iconCdns } from '@/utils/defaults';
+import StoreKeys from '@/utils/StoreMutations';
+import Defaults, { localStorageKeys, iconCdns, modalNames } from '@/utils/defaults';
 import ErrorHandler from '@/utils/ErrorHandler';
 import BackIcon from '@/assets/interface-icons/back-arrow.svg';
 
@@ -73,6 +77,7 @@ export default {
     SettingsContainer,
     EditModeSaveMenu,
     ExportConfigMenu,
+    AddNewSection,
     Section,
     BackIcon,
   },
@@ -80,6 +85,7 @@ export default {
     searchValue: '',
     layout: '',
     itemSizeBound: '',
+    addNewSectionOpen: false,
   }),
   computed: {
     sections() {
@@ -164,6 +170,16 @@ export default {
     updateModalVisibility(modalState) {
       this.$store.commit('SET_MODAL_OPEN', modalState);
     },
+    openAddNewSectionMenu() {
+      this.addNewSectionOpen = true;
+      this.$modal.show(modalNames.EDIT_SECTION);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
+    },
+    closeEditSection() {
+      this.addNewSectionOpen = false;
+      this.$modal.hide(modalNames.EDIT_SECTION);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
+    },
     /* If on sub-route, and section exists, then return only that section */
     findSingleSection: (allSections, sectionTitle) => {
       if (!sectionTitle) return undefined;
@@ -346,6 +362,18 @@ export default {
   &.single-section-view {
     display: block;
   }
+  .add-new-section {
+    border: 2px dashed var(--primary);
+    border-radius: var(--curve-factor);
+    padding: var(--item-group-padding);
+    background: var(--item-group-background);
+    color: var(--primary);
+    font-size: 1.2rem;
+    cursor: pointer;
+    text-align: center;
+    height: fit-content;
+    margin: 10px;
+  }
 }
 
 /* Custom styles only applied when there is no sections in config */