Merge pull request #11 from oslabs-beta/emma/add-features

feat: Misc features

Author: EGenesen

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"
@@ -72,7 +72,7 @@
             {'background-color': componentData.color}]"
         >
           <p class="innerHtmlText" style="font-size: 3em">{{element.note !== '' ? element.note : element.text}}</p>
-        </div>sss
+        </div>
         <div v-if="element.text === 'footer'" class="htmlFooter"></div>
                 <div v-if="element.text === 'form'"
           class="htmlGeneral"
@@ -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();
       }

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,11 +8,34 @@ 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 v-if ="this.$store.state.displaylibComponent" outlined v-model="input" placeholder="Please input" label="Search Element+ Components"
 
       color="white"
           dark
@@ -35,33 +58,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 +87,7 @@ Description:
         :disabled="!componentNameInputValue.trim() || Object.keys(this.componentMap).includes(componentNameInputValue.trim())"
       />
 
-    </q-expansion-item>
+    <!-- </q-expansion-item> -->
   </div>
 </template>
 
@@ -108,6 +106,7 @@ export default {
   data(){
     return {
       input:'',
+      parent: '',
       libArray:[
         {
           name:'alert',
@@ -200,7 +199,7 @@ export default {
       "userActions",
       "userState",
       "userProps",
-
+      "routes",
     ]),
     componentNameInputValue: {
       get() {
@@ -245,11 +244,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 +276,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);

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="Create Component"
+        @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%;

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

@@ -23,6 +23,7 @@ import { mapState } from "vuex";
 const { fs, ipcRenderer } = window;
 
 import writeNested from "../../mixins/writeNested";
+import { result } from "lodash";
 
 
 export default {
@@ -104,6 +105,32 @@ export default {
      * @description: creates component code <template>, <script>, <style>
      * invokes writeTemplate, writeScript, writeStyle
      */
+
+    writeRenderUnitTestString(componentName, htmlList) {
+
+      const imports = `import { mount } from '@vue/test-utils'
+import ${componentName} from '../../src/components/${componentName}.vue'
+`
+
+  const results = [imports];
+
+  for (const el of htmlList) {
+  const test = `
+test('renders ${componentName}', () => {
+  const wrapper = mount(${componentName})
+
+  // customize your tests here; for more info please visit: https://github.com/vuejs/test-utils/
+})`
+    results.push(test);
+  }
+
+  return results.reduce((acc, ele) => acc += ele, '');
+},
+
+    createComponentTestCode(componentLocation, componentName, componentMap) {
+      fs.writeFileSync(componentLocation, this.writeRenderUnitTestString(componentName, componentMap[componentName].htmlList))
+    },
+
     createComponentCode(componentLocation, componentName, children, routes) {
       if (componentName === "App") {
         fs.writeFileSync(
@@ -206,11 +233,11 @@ export default {
       let outputStr = ``;
       // eslint-disable-next-line no-unused-vars
       for (let el of htmlArr) {
-        if (!el.text) {
-          outputStr += `    <${el}/>\n`;
-        } else {
-          outputStr += `    `;
-          outputStr += htmlElementMap[el.text][0]
+          if (!el.text) {
+            outputStr += `    <${el}/>\n`;
+           } else {
+            outputStr += `    `;
+            outputStr += htmlElementMap[el.text][0];
           //if conditional to check class
           if (el.class !== "") {
             outputStr += " " + "class = " + `"${el.class}"`;
@@ -491,6 +518,7 @@ export default {
 </style >`
     } else return `\n\n<style scoped>\n${styleString}</style >`;
     },
+    // create Firebase config for OAuth
     createFirebaseConfigFile(location) {
       if(this.$store.state.exportOauth ==='on'){
         let str = `import { initializeApp } from 'firebase/app';`;
@@ -644,7 +672,6 @@ export default {
         fs.writeFileSync(path.join(location, "src", "main.js"), str);
       }
     },
-    // create babel file
     createViteConfig(location) {
       let str = `import { fileURLToPath, URL } from 'url';\n\n`;
       str += `import { defineConfig } from 'vite';\n`;
@@ -807,6 +834,8 @@ export default {
         fs.mkdirSync(path.join(data, "src", "views"));
         fs.mkdirSync(path.join(data, "src", "router"));
         fs.mkdirSync(path.join(data, "src", "store"));
+        fs.mkdirSync(path.join(data, "test-templates"));
+        fs.mkdirSync(path.join(data, "test-templates", "components"));
       }
       // creating basic boilerplate for vue app
       this.createIndexFile(data);
@@ -849,6 +878,9 @@ export default {
               componentName,
               this.componentMap
             );
+            this.createComponentTestCode(path.join(data, "test-templates", "components", componentName + '.spec.js'),
+              componentName,
+              this.componentMap)
           }
           // if componentName is App
         } else {