🚧 Working on interactive editor, commiting to switch computer

src/assets/locales/en.json

@@ -171,7 +171,7 @@
     "workspace": "Workspace View",
     "options-section-title": "Options",
     "edit-item": "Edit",
-    "move-item": "Move To",
+    "move-item": "Copy or Move",
     "remove-item": "Remove"
   },
   "context-menus": {
@@ -183,7 +183,7 @@
       "workspace": "Workspace View",
       "options-section-title": "Options",
       "edit-item": "Edit",
-      "move-item": "Move To",
+      "move-item": "Copy or Move",
       "remove-item": "Remove"
     },
     "section": {
@@ -213,7 +213,8 @@
       "edit-mode-name": "Edit Mode",
       "edit-mode-subtitle": "You are in Edit Mode",
       "edit-mode-description": "This means you can make modifications to your config, and preview the results, but until you save, none of your changes will be preserved.",
-      "save-stage-btn": "Save"
+      "save-stage-btn": "Save",
+      "cancel-stage-btn": "Cancel"
     },
     "edit-section": {
       "edit-tooltip": "Click to Edit, or right-click for more options"

src/components/LinkItems/Item.vue

@@ -40,7 +40,9 @@
       :id="`context-menu-${id}`"
       @launchItem="launchItem"
       @openItemSettings="openItemSettings"
+      @openMoveItemMenu="openMoveItemMenu"
     />
+    <MoveItemTo v-if="isEditMode" :itemId="id" />
     <EditItem v-if="editMenuOpen" :itemId="id" @closeEditMenu="closeEditMenu" />
   </div>
 </template>
@@ -52,6 +54,7 @@ import Icon from '@/components/LinkItems/ItemIcon.vue';
 import ItemOpenMethodIcon from '@/components/LinkItems/ItemOpenMethodIcon';
 import StatusIndicator from '@/components/LinkItems/StatusIndicator';
 import EditItem from '@/components/InteractiveEditor/EditItem';
+import MoveItemTo from '@/components/InteractiveEditor/MoveItemTo';
 import ContextMenu from '@/components/LinkItems/ItemContextMenu';
 import StoreKeys from '@/utils/StoreMutations';
 import { targetValidator } from '@/utils/ConfigHelpers';
@@ -92,6 +95,7 @@ export default {
     ItemOpenMethodIcon,
     StatusIndicator,
     ContextMenu,
+    MoveItemTo,
     EditItem,
     EditModeIcon,
   },
@@ -289,6 +293,11 @@ export default {
       lastUsed[itemId] = new Date().getTime();
       localStorage.setItem(localStorageKeys.LAST_USED, JSON.stringify(lastUsed));
     },
+    openMoveItemMenu() {
+      this.$modal.show(`${modalNames.MOVE_ITEM_TO}-${this.id}`);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
+      this.closeContextMenu();
+    },
   },
   mounted() {
     // If ststus checking is enabled, then check service status

src/components/LinkItems/ItemContextMenu.vue

@@ -33,7 +33,7 @@
           <EditIcon />
           <span>{{ $t('menu.edit-item') }}</span>
         </li>
-        <li v-if="isEditMode">
+        <li v-if="isEditMode" @click="openMoveMenu()">
           <MoveIcon />
           <span>{{ $t('menu.move-item') }}</span>
         </li>
@@ -51,7 +51,6 @@
 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';
 import NewTabOpenIcon from '@/assets/interface-icons/open-new-tab.svg';
 import IframeOpenIcon from '@/assets/interface-icons/open-iframe.svg';
@@ -90,6 +89,9 @@ export default {
     openSettings() {
       this.$emit('openItemSettings');
     },
+    openMoveMenu() {
+      this.$emit('openMoveItemMenu');
+    },
   },
 };
 </script>

src/components/LinkItems/Section.vue

@@ -16,7 +16,7 @@
     </div>
     <div v-else
       :class="`there-are-items ${isGridLayout? 'item-group-grid': ''} inner-size-${itemSize}`"
-      :style="gridStyle"
+      :style="gridStyle" :id="`section-${groupId}`"
     >
       <Item
         v-for="(item) in sortedItems"
@@ -73,7 +73,11 @@ import EditSection from '@/components/InteractiveEditor/EditSection.vue';
 import ContextMenu from '@/components/LinkItems/SectionContextMenu.vue';
 import ErrorHandler from '@/utils/ErrorHandler';
 import StoreKeys from '@/utils/StoreMutations';
-import { sortOrder as defaultSortOrder, localStorageKeys, modalNames } from '@/utils/defaults';
+import {
+  sortOrder as defaultSortOrder,
+  localStorageKeys,
+  modalNames,
+} from '@/utils/defaults';
 
 export default {
   name: 'Section',

src/styles/schema-editor.scss

@@ -26,6 +26,7 @@
         font-style: italic;
         margin-right: 0.5rem;
         max-width: 20rem;
+        opacity: var(--dimming-factor);
       }
       input {
         min-width: 15rem;

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}`;
+  return `${index}_${charSum}_${itemTitleStr}_${Math.random()}`;
 };
 
 /* Given an array of sections, apply a unique ID to each item, and return modified array */
@@ -40,6 +40,7 @@ export const applyItemId = (inputSections) => {
     if (sec.items) {
       sec.items.forEach((item, itemIdx) => {
         sections[secIdx].items[itemIdx].id = makeItemId(sec.name, item.title, itemIdx);
+        // TODO: Check if ID already exists, and if so, modify it
       });
     }
   });