various bugfixes: pasting no longer generates duplicate names; removed includes method on checking child/parent fixing a bug where similarly named components would collide; updated CSS for selected options

Author: MrBeeAreWhy

src/components/dashboard_items/Tree.vue

@@ -152,7 +152,6 @@ export default {
   watch: {
     componentMap: {
       handler(){
-        console.log(this.componentMap)
         this.treeData = this.buildTree(this.componentMap);
       },
       deep: true,

src/components/home_sidebar_items/ComponentTab/EditDeleteComponents.vue

@@ -195,6 +195,14 @@ export default {
 
     // returns options for component multiselect
     options() {
+      if (this.activeComponent !== '')
+        this.newName = this.activeComponentObj.componentName;
+        if (this.activeComponent !== ''){
+          this.childrenSelected = [];
+          this.childrenSelected = this.componentMap[this.activeComponent].children;
+        } else {
+          this.childrenSelected = [];
+      }
       const compMap = this.componentMap;
       const activeComp = this.activeComponent;
       const val = this.activeRouteDisplay.map(
@@ -304,18 +312,6 @@ export default {
     },
   },
   mixins: [handleExportComponentMixin],
-  watch: {
-    // watches for changes in selected component, changes edit name text to newly selected component
-    activeComponentObj: function () {
-      if (this.activeComponentObj)
-        this.newName = this.activeComponentObj.componentName;
-        if (this.activeComponent !== ''){
-          this.childrenSelected = this.componentMap[this.activeComponent].children;
-        } else {
-          this.childrenSelected = [];
-        }
-    },
-  },
 };
 </script>
 

src/components/home_sidebar_items/ComponentTab/ParentMultiselect.vue

@@ -91,12 +91,17 @@ export default {
   :global(.multiselect__option) {
     color: white;
   }
+  :global(.multiselect__option--selected) {
+    background-color: $accent;
+    color: #155158;
+
+  }
   :global(.multiselect__single) {
     background-color: $subprimary;
     color: white;
   }
   :global(.multiselect__single:focus) {
-    background-color: $subprimary;
+    background-color: $negative;
     color: white;
   }
   :global(.multiselect__input::placeholder) {

src/store/mutations.js

@@ -286,9 +286,11 @@ const mutations = {
       const pastedComponent = { ...copiedComponent };
       pastedComponent.x = 20;
       pastedComponent.y = 20;
-      state.componentMap[
-        (pastedComponent.componentName += ` (${state.copyNumber})`)
-      ] = pastedComponent;
+      pastedComponent.componentName += ` (${state.copyNumber})`
+      while(state.componentMap.hasOwnProperty(pastedComponent.componentName)){
+        pastedComponent.componentName += ` copy`
+      }
+      state.componentMap[pastedComponent.componentName] = pastedComponent;
 
       // increment copyNumber
       state.copyNumber += 1;
@@ -650,19 +652,19 @@ const mutations = {
     if (state.activeComponent === payload){return}
     const temp = state.componentMap[state.activeComponent].children;
     // delete block
-    if ((temp.filter((el) => payload.includes(el))).length > 0) { 
+    if ((temp.filter((el) => payload === el)).length > 0) { 
       //commented stuff below does not seem necessary for the functionality of this if block.
-      
       //children will be current children EXCLUDING payload
       // const child = temp.filter((el) => payload.includes(el));
+      console.log('delete block')
       let childCount = 0;
       const components = Object.values(state.componentMap);
       for (const comp of components) {
         if (comp.children.includes(payload)) childCount++; //if the component has 2 parents, do not assign the component to the route
       }
-        state.componentMap[state.activeComponent].children = (temp.filter((el) => !payload.includes(el)));
+        state.componentMap[state.activeComponent].children = (temp.filter((el) => payload !== el));
       if (childCount <= 1) {
-        state.componentMap[state.activeRoute].children.push(...temp.filter((el) => payload.includes(el)));
+        state.componentMap[state.activeRoute].children.push(...temp.filter((el) => payload === el));
       }
       // const newHTMLList = state.componentMap[
       //   state.activeComponent