Fix ParentMultiselect.vue to allow children to be added properly; exports checked & OK

Author: Shanon Lee

src/components/ComponentDisplay.vue

@@ -212,13 +212,11 @@ export default {
     },
   },
   updated() {
-    // console.log(this.$refs.boxes);
     // if there are no active components, all boxes are unhighlighted
     if (this.activeComponent === "") {
       if (this.$refs.boxes) {
         this.$refs.boxes.forEach((element) => {
           element.enabled = false;
-
           element.$emit("deactivated");
           element.$emit("update:active", false);
           // this.$emit("deactivated");
@@ -229,8 +227,6 @@ export default {
       // if a component is set to active, highlight it
       this.$refs.boxes.forEach((element) => {
         if (
-          // this.activeComponent === element.$attrs.id &&
-          // element.enabled === false
           this.activeComponent === element.$attrs.id &&
           element.enabled === false
         ) {
@@ -353,9 +349,10 @@ export default {
         this.setActiveComponent(componentData.componentName);
       }
       this.activeComponentData.isActive = true;
+
     },
     // deactivated is emitted before activated
-    onDeactivated(type) {
+    onDeactivated() {
       // console.log("This is DEACTIVATED");
       if (this.activeComponent !== "") {
         this.activeComponentData.isActive = false;
@@ -401,7 +398,7 @@ export default {
       if (this.activeComponent) {
         this.onActivated(this.activeComponentObj);
       } else {
-        this.onDeactivated("bgClick");
+        this.onDeactivated();
       }
     },
   },

src/components/dashboard_items/CodeSnippet.vue

@@ -164,6 +164,8 @@ export default {
     },
     // Creates boiler text for <script> and <style>
     createBoiler (componentName, children) {
+      console.log('CreateBoiler componentName: ' + componentName)
+      console.log('CreateBoiler children: ' + children)
       // add import mapstate and mapactions if they exist
       let imports = ''
       if (
@@ -248,7 +250,7 @@ export default {
     }
   },
   watch: {
-    // watches activeComponentObj for changes to make it reactive upon mutation
+    // // watches activeComponentObj for changes to make it reactive upon mutation
     // activeComponentObj: {
     //   handler () {
     //     // console.log(this.activeComponentObj.children)
@@ -258,7 +260,7 @@ export default {
     //     )
     //   }
     // },
-    // watches componentMap for changes to make it reactive upon mutation
+    // // // // watches componentMap for changes to make it reactive upon mutation
     // componentMap: {
     //   handler () {
     //     this.code = this.createCodeSnippet(
@@ -304,7 +306,7 @@ export default {
   //     }
   //   }
   // },
-  // If HTML elements or components are added, rerenders Code Snippet
+  // // If HTML elements or components are added, rerenders Code Snippet
   // componentMap: {
   //   deep: true,
   //   handler () {

src/components/file_system_interface/ExportProject.vue

@@ -270,7 +270,7 @@ export default {
         }
         // concat all code within script tags
         let output = "\n\n<script>\n";
-        output += imports + "\nexport default {\n  name: " + componentName;
+        output += imports + "\nexport default {\n  name: '" + componentName + "\'";
         output += ",\n  components: {\n";
         output += childrenComponentNames + "  },\n";
         output += data;

src/components/home_sidebar_items/ComponentTab/EditDeleteComponents.vue

@@ -39,7 +39,7 @@ Description:
         :multiple="false"
         :close-on-select="true"
         :options="childOptions"
-        @input="handleAddChild"
+        @select="handleAddChild"
         :max-height="90"
         :option-height="20"
         :searchable="false"
@@ -130,7 +130,7 @@ Description:
         :close-on-select="true"
         :max-height="90"
         :option-height="20"
-        @input="handleSelect(value)"
+        @select="handleSelect"
         placeholder="Select/Search component"
       >
       <span slot="noResult">No components found.</span>
@@ -150,6 +150,7 @@ import Icons from "../Icons.vue";
 import AddProps from "./AddProps.vue";
 import ComponentState from "./ComponentState.vue";
 import ComponentActions from "./ComponentActions.vue";
+const cloneDeep = require("lodash.clonedeep");
 
 export default {
   data() {
@@ -189,7 +190,8 @@ export default {
     },
 
     activeComponentData() {
-      return this.activeComponentObj;
+      return cloneDeep(this.activeComponentObj);
+      // return this.activeComponentObj;
     },
 
     // returns options for component multiselect
@@ -251,8 +253,9 @@ export default {
     ]),
 
     handleAddChild(value) {
-      console.log('selected child component: ', value)
-      this.updateActiveComponentChildrenValue(value);
+      const valueArray = [value];
+      this.updateActiveComponentChildrenValue(valueArray);
+      // this.updateActiveComponentChildrenValue(value);
     },
 
     // delete selected state from active component
@@ -274,8 +277,11 @@ export default {
     // },
     // Set component as active component from left side dropdown
     onActivated(componentData) {
-      this.setActiveComponent(componentData.componentName);
-      this.activeComponentData.isActive = true;
+      if (componentData) {
+        this.setActiveComponent(componentData.componentName);
+        this.activeComponentData.isActive = true;
+        console.log('onActivated Triggered')
+      }
     },
     //
     // deleteCircumvent (e) {
@@ -306,6 +312,7 @@ export default {
 
     // Select active component from multi-select input
     handleSelect(componentName) {
+      console.log('handleSelect ' + componentName)
       this.setActiveComponent(componentName);
       this.value = "";
       this.activeComponentData.isActive = true;

src/components/home_sidebar_items/ParentMultiselect.vue

@@ -7,7 +7,7 @@ Description:
 <template>
   <div id="parent-select">
     <br />
-    <VueMultiselect
+    <!-- <VueMultiselect
       v-model="value"
       placeholder="Parent Component"
       :multiple="false"
@@ -18,6 +18,18 @@ Description:
       :max-height="90"
       :option-height="20"
       :searchable="true"
+    > -->
+    <VueMultiselect
+      v-model="value"
+      placeholder="Parent Component"
+      :multiple="false"
+      :close-on-select="true"
+      :options="options"
+      @select="selectParent"
+      @open="resetActiveComponent"
+      :max-height="90"
+      :option-height="20"
+      :searchable="true"
     >
     <!-- refactor slot syntax here -->
     <span slot='noResult'>No components found.</span>
@@ -55,7 +67,9 @@ export default {
   methods: {
     ...mapActions(['parentSelected', 'setActiveComponent']),
     selectParent (value) {
+      // console.log('Select parent triggered with value: ' + value)
       this.parentSelected(value);
+      // console.log('Parent selected: ' + this.$store.state.parentSelected)
     },
     // when multiselect is opened activeComponent is deselected to allow for parentSelected action
     resetActiveComponent () {

src/store/actions.js

@@ -54,6 +54,7 @@ const actions = {
   [types.setActiveComponent]: ({ commit }, payload) => {
     commit(types.SET_ACTIVE_COMPONENT, payload)
   },
+  
 
   [types.updateActiveComponentChildrenValue]: ({ commit }, payload) => {
     // console.log('payload', payload)