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 @@
@@ -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 @@
{{ $t('menu.move-item') }}
-
+
{{ $t('menu.remove-item') }}
@@ -92,6 +92,9 @@ export default {
openMoveMenu() {
this.$emit('openMoveItemMenu');
},
+ openDeleteItem() {
+ this.$emit('openDeleteItem');
+ },
},
};
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"
/>
@@ -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 @@
{{ $t('context-menus.section.edit-section') }}
-
-
- {{ $t('context-menus.section.move-section') }}
-
-
+
{{ $t('context-menus.section.remove-section') }}
@@ -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');
+ },
},
};
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