✨ Implements Add new Item functionality

src/components/InteractiveEditor/EditItem.vue

@@ -94,6 +94,8 @@ export default {
   },
   props: {
     itemId: String,
+    isNew: Boolean,
+    parentSectionTitle: String, // If adding new item, which section to add it under
   },
   computed: {},
   components: {
@@ -105,7 +107,9 @@ export default {
     BinIcon,
   },
   mounted() {
-    this.item = this.getItemFromState(this.itemId);
+    if (!this.isNew) { // Get existing item data
+      this.item = this.getItemFromState(this.itemId);
+    }
     this.formData = this.makeInitialFormData();
     this.$modal.show(modalNames.EDIT_ITEM);
   },
@@ -187,8 +191,13 @@ export default {
       this.formData.forEach((row) => { structured[row.name] = row.value; });
       // Some attributes need a little extra formatting
       const newItem = this.formatBeforeSave(structured);
-      // Update the data store, with new item data
-      this.$store.commit(StoreKeys.UPDATE_ITEM, { newItem, itemId: this.itemId });
+      if (this.isNew) { // Insert new item into data store
+        newItem.id = `temp_${newItem.title}`;
+        const payload = { newItem, targetSection: this.parentSectionTitle };
+        this.$store.commit(StoreKeys.INSERT_ITEM, payload);
+      } else { // Update existing item from form data, in the store
+        this.$store.commit(StoreKeys.UPDATE_ITEM, { newItem, itemId: this.itemId });
+      }
       // If we're not already in edit mode, enable it now
       this.$store.commit(StoreKeys.SET_EDIT_MODE, true);
       // Close edit menu

src/components/LinkItems/Item.vue

@@ -5,7 +5,7 @@
       @contextmenu.prevent
       :href="hyperLinkHref"
       :target="anchorTarget"
-      :class="`item ${!icon? 'short': ''} size-${itemSize}`"
+      :class="`item ${!icon? 'short': ''} size-${itemSize} ${isAddNew ? 'add-new' : ''}`"
       v-tooltip="getTooltipOptions()"
       rel="noopener noreferrer" tabindex="0"
       :id="`link-${id}`"
@@ -44,7 +44,9 @@
       @openDeleteItem="openDeleteItem"
     />
     <MoveItemTo v-if="isEditMode" :itemId="id" />
-    <EditItem v-if="editMenuOpen" :itemId="id" @closeEditMenu="closeEditMenu" />
+    <EditItem v-if="editMenuOpen" :itemId="id"
+      @closeEditMenu="closeEditMenu"
+      :isNew="isAddNew" :parentSectionTitle="parentSectionTitle" />
   </div>
 </template>
 
@@ -90,6 +92,8 @@ export default {
     statusCheckUrl: String,
     statusCheckInterval: Number,
     statusCheckAllowInsecure: Boolean,
+    parentSectionTitle: String,
+    isAddNew: Boolean,
   },
   components: {
     Icon,
@@ -360,6 +364,9 @@ export default {
   &.short:not(.size-large) {
     height: 2rem;
   }
+  &.add-new {
+    border-style: dashed !important;
+  }
 }
 
 /* Text in tile */

src/components/LinkItems/Section.vue

@@ -11,13 +11,15 @@
     @openEditSection="openEditSection"
     @openContextMenu="openContextMenu"
   >
+    <!-- If no items, show message -->
     <div v-if="!items || items.length < 1" class="no-items">
       No Items to Show Yet
     </div>
+    <!-- Item Container -->
     <div v-else
       :class="`there-are-items ${isGridLayout? 'item-group-grid': ''} inner-size-${itemSize}`"
       :style="gridStyle" :id="`section-${groupId}`"
-    >
+    > <!-- Show for each item -->
       <Item
         v-for="(item) in sortedItems"
         :id="item.id"
@@ -34,24 +36,40 @@
         :itemSize="newItemSize"
         :hotkey="item.hotkey"
         :provider="item.provider"
+        :parentSectionTitle="title"
         :enableStatusCheck="shouldEnableStatusCheck(item.statusCheck)"
         :statusCheckInterval="getStatusCheckInterval()"
         :statusCheckAllowInsecure="item.statusCheckAllowInsecure"
         @itemClicked="$emit('itemClicked')"
         @triggerModal="triggerModal"
       />
+      <!-- When in edit mode, show additional item, for Add New item -->
+      <Item v-if="isEditMode"
+        :isAddNew="true"
+        :parentSectionTitle="title"
+        icon=":heavy_plus_sign:"
+        id="add-new"
+        title="Add New Item"
+        description="Click to add new item"
+        key="add-new"
+        class="add-new-item"
+        :itemSize="newItemSize"
+      />
       <div ref="modalContainer"></div>
     </div>
+    <!-- Modal for opening in modal view -->
     <IframeModal
       :ref="`iframeModal-${groupId}`"
       :name="`iframeModal-${groupId}`"
       @closed="$emit('itemClicked')"
     />
+    <!-- Edit item menu -->
     <EditSection
       v-if="editMenuOpen"
       @closeEditSection="closeEditSection"
       :sectionIndex="index"
     />
+    <!-- Right-click item options context menu -->
     <ContextMenu
       :show="contextMenuOpen"
       :posX="contextPos.posX"
@@ -300,4 +318,10 @@ export default {
   }
 }
 
+.add-new-item {
+  display: flex;
+  a {
+    border-style: dashed;
+  }
+}
 </style>

src/store.js

@@ -22,6 +22,7 @@ const {
   REMOVE_SECTION,
   COPY_ITEM,
   REMOVE_ITEM,
+  INSERT_ITEM,
 } = Keys;
 
 const store = new Vuex.Store({
@@ -122,6 +123,17 @@ const store = new Vuex.Store({
       }
       state.config = newConfig;
     },
+    [INSERT_ITEM](state, payload) {
+      const { newItem, targetSection } = payload;
+      const config = { ...state.config };
+      config.sections.forEach((section) => {
+        if (section.name === targetSection) {
+          section.items.push(newItem);
+        }
+      });
+      config.sections = applyItemId(config.sections);
+      state.config = config;
+    },
     [COPY_ITEM](state, payload) {
       const { item, toSection, appendTo } = payload;
       const config = { ...state.config };

src/utils/StoreMutations.js

@@ -12,6 +12,7 @@ const KEY_NAMES = [
   'REMOVE_SECTION',
   'COPY_ITEM',
   'REMOVE_ITEM',
+  'INSERT_ITEM',
 ];
 
 // Convert array of key names into an object, and export