✨ Implements move, copy and delete item, and delete section functionality

src/components/LinkItems/Item.vue

@@ -41,6 +41,7 @@
       @launchItem="launchItem"
       @openItemSettings="openItemSettings"
       @openMoveItemMenu="openMoveItemMenu"
+      @openDeleteItem="openDeleteItem"
     />
     <MoveItemTo v-if="isEditMode" :itemId="id" />
     <EditItem v-if="editMenuOpen" :itemId="id" @closeEditMenu="closeEditMenu" />
@@ -293,11 +294,19 @@ export default {
       lastUsed[itemId] = new Date().getTime();
       localStorage.setItem(localStorageKeys.LAST_USED, JSON.stringify(lastUsed));
     },
+    /* Open the modal for moving/ copying item to other section */
     openMoveItemMenu() {
       this.$modal.show(`${modalNames.MOVE_ITEM_TO}-${this.id}`);
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
       this.closeContextMenu();
     },
+    /* Deletes the current item from the state */
+    openDeleteItem() {
+      const parentSection = this.$store.getters.getParentSectionOfItem(this.id);
+      const payload = { itemId: this.id, sectionName: parentSection.name };
+      this.$store.commit(StoreKeys.REMOVE_ITEM, payload);
+      this.closeContextMenu();
+    },
   },
   mounted() {
     // If ststus checking is enabled, then check service status

src/components/LinkItems/ItemContextMenu.vue

@@ -37,7 +37,7 @@
           <MoveIcon />
           <span>{{ $t('menu.move-item') }}</span>
         </li>
-        <li v-if="isEditMode">
+        <li v-if="isEditMode" @click="openDeleteItem()">
           <BinIcon />
           <span>{{ $t('menu.remove-item') }}</span>
         </li>
@@ -92,6 +92,9 @@ export default {
     openMoveMenu() {
       this.$emit('openMoveItemMenu');
     },
+    openDeleteItem() {
+      this.$emit('openDeleteItem');
+    },
   },
 };
 </script>

src/components/LinkItems/Section.vue

@@ -60,6 +60,7 @@
       v-click-outside="closeContextMenu"
       @openEditSection="openEditSection"
       @navigateToSection="navigateToSection"
+      @removeSection="removeSection"
     />
   </Collapsable>
 </template>
@@ -217,6 +218,12 @@ export default {
       this.$modal.hide(modalNames.EDIT_SECTION);
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
     },
+    /* Deletes current section, in local state */
+    removeSection() {
+      const payload = { sectionIndex: this.index, sectionName: this.title };
+      this.$store.commit(StoreKeys.REMOVE_SECTION, payload);
+      this.closeContextMenu();
+    },
     /* Open custom context menu, and set position */
     openContextMenu(e) {
       this.contextMenuOpen = true;

src/components/LinkItems/SectionContextMenu.vue

@@ -12,11 +12,7 @@
           <EditIcon />
           <span>{{ $t('context-menus.section.edit-section') }}</span>
         </li>
-        <li v-if="isEditMode">
-          <MoveIcon />
-          <span>{{ $t('context-menus.section.move-section') }}</span>
-        </li>
-        <li v-if="isEditMode">
+        <li v-if="isEditMode" @click="removeSection">
           <BinIcon />
           <span>{{ $t('context-menus.section.remove-section') }}</span>
         </li>
@@ -29,14 +25,12 @@
 // Import icons for each element
 import EditIcon from '@/assets/interface-icons/config-edit-json.svg';
 import BinIcon from '@/assets/interface-icons/interactive-editor-remove.svg';
-import MoveIcon from '@/assets/interface-icons/interactive-editor-move-to.svg';
 import SameTabOpenIcon from '@/assets/interface-icons/open-current-tab.svg';
 
 export default {
   name: 'ContextMenu',
   components: {
     EditIcon,
-    MoveIcon,
     BinIcon,
     SameTabOpenIcon,
   },
@@ -62,6 +56,9 @@ export default {
     openEditSectionMenu() {
       this.$emit('openEditSection');
     },
+    removeSection() {
+      this.$emit('removeSection');
+    },
   },
 };
 </script>