✨ Builds edit section form and functionality

src/components/LinkItems/Collapsable.vue

@@ -4,16 +4,17 @@
     :style="`${color ? 'background: '+color : ''}; ${sanitizeCustomStyles(customStyles)};`"
   >
     <input
-      :id="`collapsible-${uniqueKey}`"
+      :id="sectionKey"
       class="toggle"
       type="checkbox"
       :checked="getCollapseState()"
       @change="collapseChanged"
       tabIndex="-1"
     >
-    <label :for="`collapsible-${uniqueKey}`" class="lbl-toggle" tabindex="-1">
+    <label :for="sectionKey" class="lbl-toggle" tabindex="-1">
       <Icon v-if="icon" :icon="icon" size="small" :url="title" class="section-icon" />
       <h3>{{ title }}</h3>
+      <EditModeIcon v-if="isEditMode" class="edit-mode-item" @click="openEditModal" />
     </label>
     <div class="collapsible-content">
       <div class="content-inner">
@@ -27,6 +28,7 @@
 
 import { localStorageKeys } from '@/utils/defaults';
 import Icon from '@/components/LinkItems/ItemIcon.vue';
+import EditModeIcon from '@/assets/interface-icons/interactive-editor-edit-mode.svg';
 
 export default {
   name: 'CollapsableContainer',
@@ -42,6 +44,16 @@ export default {
   },
   components: {
     Icon,
+    EditModeIcon,
+  },
+  computed: {
+    isEditMode() {
+      return this.$store.state.editMode;
+    },
+    sectionKey() {
+      if (this.isEditMode) return undefined;
+      return `collapsible-${this.uniqueKey}`;
+    },
   },
   methods: {
     /* Check that row & column span is valid, and not over the max */
@@ -95,6 +107,9 @@ export default {
         this.setCollapseState(this.uniqueKey.toString(), whatChanged.srcElement.checked);
       }
     },
+    openEditModal() {
+      this.$emit('openEditSection');
+    },
   },
 };
 </script>
@@ -207,5 +222,13 @@ export default {
   .collapsible-content .content-inner {
     padding: 0.5rem;
   }
+
+  .edit-mode-item {
+    width: 1rem;
+    height: 1rem;
+    float: right;
+    right: 0.5rem;
+    top: 0.5rem;
+  }
 }
 </style>

src/components/LinkItems/Section.vue

@@ -8,6 +8,7 @@
     :rows="displayData.rows"
     :color="displayData.color"
     :customStyles="displayData.customStyles"
+    @openEditSection="openEditSection"
   >
     <div v-if="!items || items.length < 1" class="no-items">
       No Items to Show Yet
@@ -45,15 +46,22 @@
       :name="`iframeModal-${groupId}`"
       @closed="$emit('itemClicked')"
     />
+    <EditSection
+      v-if="editMenuOpen"
+      @closeEditSection="closeEditSection"
+      :sectionIndex="index"
+    />
   </Collapsable>
 </template>
 
 <script>
-import { sortOrder as defaultSortOrder, localStorageKeys } from '@/utils/defaults';
-import ErrorHandler from '@/utils/ErrorHandler';
 import Item from '@/components/LinkItems/Item.vue';
 import Collapsable from '@/components/LinkItems/Collapsable.vue';
 import IframeModal from '@/components/LinkItems/IframeModal.vue';
+import EditSection from '@/components/InteractiveEditor/EditSection.vue';
+import ErrorHandler from '@/utils/ErrorHandler';
+import StoreKeys from '@/utils/StoreMutations';
+import { sortOrder as defaultSortOrder, localStorageKeys, modalNames } from '@/utils/defaults';
 
 export default {
   name: 'Section',
@@ -64,11 +72,18 @@ export default {
     displayData: Object,
     items: Array,
     itemSize: String,
+    index: Number,
   },
   components: {
     Collapsable,
     Item,
     IframeModal,
+    EditSection,
+  },
+  data() {
+    return {
+      editMenuOpen: false,
+    };
   },
   computed: {
     appConfig() {
@@ -113,6 +128,9 @@ export default {
       }
       return styles;
     },
+    isEditMode() {
+      return this.$store.state.editMode;
+    },
   },
   methods: {
     /* Opens the iframe modal */
@@ -157,6 +175,17 @@ export default {
         .sort((a, b) => a.sort - b.sort)
         .map(({ value }) => value);
     },
+    /* Open the Section Edit Menu */
+    openEditSection() {
+      this.editMenuOpen = true;
+      this.$modal.show(modalNames.EDIT_SECTION);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
+    },
+    closeEditSection() {
+      this.editMenuOpen = false;
+      this.$modal.hide(modalNames.EDIT_SECTION);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
+    },
   },
 };
 </script>