From 31e172befb98726ddc7133e5d5404a3c7714fcd0 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Mon, 25 Oct 2021 19:11:13 +0100
Subject: [PATCH] :sparkles: Implements move, copy and delete item, and delete
 section functionality

---
 .../Configuration/CloudBackupRestore.vue      |  2 +-
 .../InteractiveEditor/ExportConfigMenu.vue    |  1 +
 .../InteractiveEditor/MoveItemTo.vue          | 10 +++--
 src/components/LinkItems/Item.vue             |  9 ++++
 src/components/LinkItems/ItemContextMenu.vue  |  5 ++-
 src/components/LinkItems/Section.vue          |  7 ++++
 .../LinkItems/SectionContextMenu.vue          | 11 ++---
 src/store.js                                  | 41 ++++++++++++++++++-
 src/utils/MiscHelpers.js                      |  2 +-
 src/utils/StoreMutations.js                   |  2 +
 10 files changed, 75 insertions(+), 15 deletions(-)

diff --git a/src/components/Configuration/CloudBackupRestore.vue b/src/components/Configuration/CloudBackupRestore.vue
index e4a4139c..92f6709d 100644
--- a/src/components/Configuration/CloudBackupRestore.vue
+++ b/src/components/Configuration/CloudBackupRestore.vue
@@ -244,7 +244,7 @@ export default {
   }
 
   /* Overide form element colors, so that config menu can be themed by user */
-  input, button, {
+  input, button {
     color: var(--config-settings-color);
     border: 1px solid var(--config-settings-color);
     background: none;
diff --git a/src/components/InteractiveEditor/ExportConfigMenu.vue b/src/components/InteractiveEditor/ExportConfigMenu.vue
index f0a9b80f..d30bbcdf 100644
--- a/src/components/InteractiveEditor/ExportConfigMenu.vue
+++ b/src/components/InteractiveEditor/ExportConfigMenu.vue
@@ -115,6 +115,7 @@ export default {
     background: var(--interactive-editor-background-darker);
     border-radius: var(--curve-factor);
     box-shadow: 0px 0px 3px var(--interactive-editor-color);
+    margin-bottom: 1.5rem;
     span {
       font-family: var(--font-monospace);
     }
diff --git a/src/components/InteractiveEditor/MoveItemTo.vue b/src/components/InteractiveEditor/MoveItemTo.vue
index 19efb4d7..fd12eb98 100644
--- a/src/components/InteractiveEditor/MoveItemTo.vue
+++ b/src/components/InteractiveEditor/MoveItemTo.vue
@@ -14,7 +14,7 @@
       <Select
         v-model="selectedSection"
         :options="sectionList"
-        :initialOption="currentSection"
+        :initialOption="selectedSection"
         label="Destination"
       />
       <Radio
@@ -84,15 +84,19 @@ export default {
       return sectionName;
     },
   },
+  mounted() {
+    this.selectedSection = this.currentSection;
+  },
   methods: {
     save() {
       const item = this.$store.getters.getItemById(this.itemId);
       // Copy item to new section
-      const copyPayload = { item, toSection: this.selectedSection };
+      const copyPayload = { item, toSection: this.selectedSection, appendTo: this.appendTo };
       this.$store.commit(StoreKeys.COPY_ITEM, copyPayload);
       // Remove item from previous section
       if (this.operation === 'Move') {
-        // TODO: Remove
+        const payload = { itemId: this.itemId, sectionName: this.currentSection };
+        this.$store.commit(StoreKeys.REMOVE_ITEM, payload);
       }
       this.close();
     },
diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue
index 1a45ad4f..8fc556da 100644
--- a/src/components/LinkItems/Item.vue
+++ b/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
diff --git a/src/components/LinkItems/ItemContextMenu.vue b/src/components/LinkItems/ItemContextMenu.vue
index 702f7469..1e1c375d 100644
--- a/src/components/LinkItems/ItemContextMenu.vue
+++ b/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>
diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue
index 737a92ff..adba954b 100644
--- a/src/components/LinkItems/Section.vue
+++ b/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;
diff --git a/src/components/LinkItems/SectionContextMenu.vue b/src/components/LinkItems/SectionContextMenu.vue
index 3ddf8afa..1836fc46 100644
--- a/src/components/LinkItems/SectionContextMenu.vue
+++ b/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>
diff --git a/src/store.js b/src/store.js
index 708033d7..13fcd701 100644
--- a/src/store.js
+++ b/src/store.js
@@ -19,7 +19,9 @@ const {
   UPDATE_PAGE_INFO,
   UPDATE_APP_CONFIG,
   UPDATE_SECTION,
+  REMOVE_SECTION,
   COPY_ITEM,
+  REMOVE_ITEM,
 } = Keys;
 
 const store = new Vuex.Store({
@@ -59,6 +61,15 @@ const store = new Vuex.Store({
       });
       return item;
     },
+    getParentSectionOfItem: (state, getters) => (itemId) => {
+      let foundSection;
+      getters.sections.forEach((section) => {
+        section.items.forEach((item) => {
+          if (item.id === itemId) foundSection = section;
+        });
+      });
+      return foundSection;
+    },
   },
   mutations: {
     [UPDATE_CONFIG](state, config) {
@@ -103,18 +114,44 @@ const store = new Vuex.Store({
       newConfig.sections[sectionIndex] = sectionData;
       state.config = newConfig;
     },
+    [REMOVE_SECTION](state, payload) {
+      const { sectionIndex, sectionName } = payload;
+      const newConfig = { ...state.config };
+      if (newConfig.sections[sectionIndex].name === sectionName) {
+        newConfig.sections.splice(sectionIndex, 1);
+      }
+      state.config = newConfig;
+    },
     [COPY_ITEM](state, payload) {
-      const { item, toSection } = payload;
+      const { item, toSection, appendTo } = payload;
       const config = { ...state.config };
       const newItem = { ...item };
       config.sections.forEach((section) => {
         if (section.name === toSection) {
-          section.items.push(newItem);
+          if (appendTo === 'Begining') {
+            section.items.unshift(newItem);
+          } else {
+            section.items.push(newItem);
+          }
         }
       });
       config.sections = applyItemId(config.sections);
       state.config = config;
     },
+    [REMOVE_ITEM](state, payload) {
+      const { itemId, sectionName } = payload;
+      const config = { ...state.config };
+      config.sections.forEach((section) => {
+        if (section.name === sectionName) {
+          section.items.forEach((item, index) => {
+            if (item.id === itemId) {
+              section.items.splice(index, 1);
+            }
+          });
+        }
+      });
+      state.config = config;
+    },
   },
   actions: {
     /* Called when app first loaded. Reads config and sets state */
diff --git a/src/utils/MiscHelpers.js b/src/utils/MiscHelpers.js
index a2c74fe4..092f2869 100644
--- a/src/utils/MiscHelpers.js
+++ b/src/utils/MiscHelpers.js
@@ -30,7 +30,7 @@ export const sanitize = (string) => {
 const makeItemId = (sectionStr, itemStr, index) => {
   const charSum = sectionStr.split('').map((a) => a.charCodeAt(0)).reduce((x, y) => x + y);
   const itemTitleStr = itemStr.replace(/\s+/g, '-').replace(/[^a-zA-Z ]/g, '').toLowerCase();
-  return `${index}_${charSum}_${itemTitleStr}_${Math.random()}`;
+  return `${index}_${charSum}_${itemTitleStr}}`;
 };
 
 /* Given an array of sections, apply a unique ID to each item, and return modified array */
diff --git a/src/utils/StoreMutations.js b/src/utils/StoreMutations.js
index 73383ce1..f48aca9e 100644
--- a/src/utils/StoreMutations.js
+++ b/src/utils/StoreMutations.js
@@ -9,7 +9,9 @@ const KEY_NAMES = [
   'UPDATE_PAGE_INFO',
   'UPDATE_APP_CONFIG',
   'UPDATE_SECTION',
+  'REMOVE_SECTION',
   'COPY_ITEM',
+  'REMOVE_ITEM',
 ];
 
 // Convert array of key names into an object, and export