bug fixed

Author: sunhonghaoparis

package-lock.json

@@ -40,7 +40,7 @@
     >
 
       <div class="component-title">
-        <p>{{ componentData.componentName }}</p>
+        <p>{{ componentData.componentName }}<span v-if="isElementPlus(componentData.htmlList)"> (Element+)</span></p>
       </div>
       <q-icon v-if="componentData.componentName === this.activeComponent"
         size="25px"
@@ -536,6 +536,10 @@ export default {
     //   this.initialPosition.x = this.activeComponentData.x;
     //   this.initialPosition.y = this.activeComponentData.y;
     // },
+    isElementPlus(htmlList) {
+      console.log(htmlList);
+      return htmlList.find(({ text }) => text[0] === 'e');
+    },
     //color change function
     updateColors(data) {
       let payload = {
@@ -643,6 +647,7 @@ export default {
 
     // renders modal with Update Children and Layer in it
     handleAddNotes() {
+      console.log(this.activeComponentData);
       if (this.wasDragged === false && this.activeComponent !== '') {
         this.openNoteModal();
       }
@@ -914,7 +919,7 @@ behavior: url(/pie/PIE.htc);
   position: absolute;
   font-size: 3em;
   margin-top: -4%;
-  margin-left: 23%;
+  margin-left: 29%;
   color: black;
 }
 

src/components/Canvas.vue

@@ -1,7 +1,6 @@
-import * as ElementPlus from '../../../node_modules/element-plus/es/components' // importing all components from Element Plus with install wrappers
+// import * as ElementPlus from '../../../node_modules/element-plus/es/components' // importing all components from Element Plus with install wrappers
 
 export function useCreateComponent(importObj) {
-
   const createComponent = (importObj) => {
     let imported = false; //alter this logic once ready to import components
     if (importObj.hasOwnProperty('componentName')) {
@@ -29,10 +28,12 @@ export function useCreateComponent(importObj) {
       return false;
     }
     // boilerplate properties for each component upon creation
+    console.log(importObj.parent);
+    console.log({ y: importObj?.parent?.y })
     const component = {
-      x: 0,
-      y: 0,
-      z: 0,
+      x: importObj?.parent?.x ?? 0,
+      y: importObj?.parent?.y ?? 0,
+      z: importObj?.parent?.z ?? 0,
       htmlList: this.selectedElementList,
       noteList: [],
       children: [],
@@ -68,7 +69,7 @@ export function useCreateComponent(importObj) {
   createComponent(importObj)
 
   // console logging all components from Element Plus to determine shape of data and investigate structure of components
-  console.log(ElementPlus)
+  // console.log(ElementPlus)
     // components all within giant object
 }
 

src/components/composables/useCreateComponent.js

@@ -9,9 +9,8 @@ export function useExportComponent() {
      *
      */
 
-      const showExportComponentDialog = () => {
-        ipcRenderer
-        .invoke("exportComponent", {
+      const exportComponent = () => {
+        ipcRenderer.invoke("exportComponent", {
           title: "Choose location to save folder in",
           message: "Choose location to save folder in",
           nameFieldLabel: "Component Name",
@@ -356,5 +355,5 @@ z-index: ${html.z};
           this.componentMap[this.activeComponent].children
         );
       }
-      showExportComponentDialog();
+      exportComponent();
   }

src/components/composables/useExportComponent.js

@@ -8,12 +8,36 @@ Description:
 <template>
   <div class="create-component-div drawer-menu">
 
-    <q-expansion-item group="accordion" label="Create Component" >
-      <ImportLibraryButton></ImportLibraryButton>
+    <form class="create-component-form" v-on:submit.prevent="createComponent">
+        <!-- will render if creating new component -->
+        <q-input
+          v-if="activeComponent === ''"
+          v-on:keyup.delete.stop
+          v-model="componentNameInputValue"
+          label="Set component name *"
+          color="white"
+          dark
+          dense
+          outlined
+          item-aligned
+          padding="5px"
+          class="input-add"
+          no-error-icon
+          reactive-rules
+          :rules="[ val => val.length != 0 || 'Please set a component name', val => !Object.keys(this.componentMap).includes(val) || 'A component/route with this name already exists' ]"
+        ></q-input>
+      </form>
+
+      <ParentMultiselect
+      @addparent="parent = $event"
+      v-if="activeComponent === ''"></ParentMultiselect>
+
+    <!-- <q-expansion-item group="accordion" label="Create Component" > -->
       <LibComponents></LibComponents>
 <div class="searchinput">
-      <q-input v-if ="this.$store.state.displaylibComponent" outlined v-model="input" placeholder="Please input" label="Search Component"
 
+      <q-input outlined v-model="input" placeholder="Please input" label="Search Element+ Components"
+      id="searchbox"
       color="white"
           dark
           dense
@@ -22,6 +46,7 @@ Description:
           class="input-add"
           no-error-icon
       />
+
     </div>
 
 
@@ -35,33 +60,8 @@ Description:
 
         </q-tooltip>
       </q-item>
-
-
-
     </q-list>
 
-      <form class="create-component-form" v-on:submit.prevent="createComponent">
-        <!-- will render if creating new component -->
-        <q-input
-          v-if="activeComponent === ''"
-          v-on:keyup.delete.stop
-          v-model="componentNameInputValue"
-          label="Set component name *"
-          color="white"
-          dark
-          dense
-          outlined
-          item-aligned
-          padding="5px"
-          class="input-add"
-          no-error-icon
-          reactive-rules
-          :rules="[ val => val.length != 0 || 'Please set a component name', val => !Object.keys(this.componentMap).includes(val) || 'A component/route with this name already exists' ]"
-        ></q-input>
-      </form>
-
-      <ParentMultiselect v-if="activeComponent === ''"></ParentMultiselect>
-
       <div class="subsection">Elements/Components</div>
       <div class="icon-container">
         <Icons
@@ -89,7 +89,7 @@ Description:
         :disabled="!componentNameInputValue.trim() || Object.keys(this.componentMap).includes(componentNameInputValue.trim())"
       />
 
-    </q-expansion-item>
+    <!-- </q-expansion-item> -->
   </div>
 </template>
 
@@ -108,6 +108,7 @@ export default {
   data(){
     return {
       input:'',
+      parent: '',
       libArray:[
         {
           name:'alert',
@@ -200,7 +201,7 @@ export default {
       "userActions",
       "userState",
       "userProps",
-
+      "routes",
     ]),
     componentNameInputValue: {
       get() {
@@ -245,11 +246,13 @@ pickComponent(componentName){
   this.addLibComponents(payload);
 
 }
-
    ,
-
     createComponent() {
-      useCreateComponent.bind(this)({}) //invokes composable
+      // need to find a dynamic solution to pull current route, here set to HomeView
+      // Parses array of components off routes, then finds parent element name (id), then passes parent into useCreateComponent, where x, y and z are pulled off the parent object
+      const parent = JSON.parse(
+      JSON.stringify(this.routes.HomeView)).find((ele) => ele.componentName === this.parent);
+      useCreateComponent.bind(this)({ parent }) //invokes composable
     },
   },
     watch: {
@@ -275,7 +278,6 @@ pickComponent(componentName){
     justify-content: flex-start;
     align-items: stretch;
     padding: -20px;
-    margin-right: 10px;
   }
   .subsection {
     border-top: 1px solid rgba(245, 245, 245, 0.3);
@@ -308,8 +310,11 @@ pickComponent(componentName){
     max-width: 600px;
   }
   .searchinput{
-    margin-right: 10px;
+    
+    width: 260px;
+
   }
 
 
+
 </style>

src/components/left-sidebar/ComponentTab/CreateMenu.vue

@@ -1,12 +1,7 @@
 <template>
 
-  <div class=""
-
-  v-if = "this.$store.state.displaylibComponent">
-
-
-
-    <q-btn-dropdown class="selectLib" color="pink" label="Select Library Component" dropdown-icon="change_history">
+  <div class="">
+    <q-btn-dropdown class="selectLib" color="pink" label="Select Element+ Component" dropdown-icon="change_history">
       <q-list class="dropButton">
 
         <q-item clickable v-close-popup @click="pickComponent('e-alert')">

src/components/left-sidebar/ComponentTab/LibComponents.vue

@@ -44,6 +44,7 @@ export default {
       // 'routes'
     ]),
     options() {
+      console.log(this.routes);
       return this.routes[this.activeRoute].map(
         (component) => component.componentName
       );
@@ -53,6 +54,7 @@ export default {
     ...mapActions(["parentSelected", "setActiveComponent"]),
     selectParent(value) {
       this.parentSelected(value);
+      this.$emit("addparent", value);
     },
     // when multiselect is opened activeComponent is deselected to allow for parentSelected action
     resetActiveComponent() {

src/components/left-sidebar/ComponentTab/ParentMultiselect.vue

@@ -110,6 +110,13 @@ Description:
         </q-expansion-item>
 
       </q-list>
+      <q-btn
+        id="create-component-btn"
+        class="sidebar-btn"
+        color="secondary"
+        label="Done"
+        @click="resetActiveComponent"
+      />
       <q-btn
         id="exportButton"
         class="sidebar-btn"
@@ -175,6 +182,7 @@ export default {
       "componentMap",
       "exportAsTypescript",
       'attributeModalOpen',
+      
     ]),
 
     activeRouteDisplay() {
@@ -418,7 +426,7 @@ p {
   margin-bottom: 30px;
 }
 
-#exportButton {
+#exportButton, #create-component-btn {
   background-color: $secondary;
   color: $menutext;
   width: 100%;