import component is started, not complete.

Co-authored-by: Kerolos Nesem <[email protected]>

Author: MrBeeAreWhy

src/components/ComponentDisplay.vue

@@ -167,6 +167,7 @@ export default {
     activeComponentData() {
       // Must deep clone this so we are not directly mutating state
       // return this.activeComponentObj;
+      console.log(this.activeComponentObj)
       return cloneDeep(this.activeComponentObj);
     },
     options() {

src/components/home_sidebar_items/ComponentTab/CreateComponent.vue

@@ -41,27 +41,23 @@ Description:
       @click="createComponent"
       :disabled="!componentNameInputValue.trim()"
     />
+    <ImportComponent v-if="activeComponent === ''" />
 
-    <q-btn
-      v-if="activeComponent === ''"
-      id="import-component-btn"
-      color="secondary"
-      label="Import Component"
-      @click="click"
-    />
   </div>
 </template>
 
 <script>
 import Icons from "./Icons.vue";
 import ParentMultiselect from "./ParentMultiselect.vue";
+import ImportComponent from "./ImportComponent.vue"
 import { mapState, mapActions } from "vuex";
 export default {
   name: "HomeSidebar",
   components: {
     Icons,
     ParentMultiselect,
-  },
+    ImportComponent
+},
   computed: {
     ...mapState([
       "componentMap",
@@ -88,10 +84,9 @@ export default {
       "addNestedHTML",
       "addNestedNoActive",
       "editComponentName",
+      "openProject",
     ]),
-    click() {
-      console.log("click");
-    },
+
     createComponent() {
       if (!this.componentNameInputValue.replace(/[^a-z0-9-_.]/gi, "")) {
         event.preventDefault();
@@ -116,6 +111,7 @@ export default {
         parent: {},
         isActive: false,
       };
+      console.log(component.htmlList)
       if (!this.componentMap[component.componentName]) {
         this.registerComponent(component);
         this.setActiveComponent(component.componentName);

src/components/home_sidebar_items/ComponentTab/ImportComponent.vue

@@ -1,7 +1,159 @@
+<template>
+      <q-btn
+      id="import-component-btn"
+      color="secondary"
+      label="Import Component"
+      @click="importComponent"
+    />
+</template>
+
 <script>
-import { defineComponent } from "@vue/composition-api";
+export default {
+  methods: {
+    importComponent() {
+      ipcRenderer
+        .invoke("openProject", {
+          properties: ["openProject"],
+          filters: [
+            {
+              name: "Vue Files",
+              extensions: ["vue"],
+            },
+          ],
+        })
+        .then((res) => this.openVueFile(res.filePaths))
+        .catch((err) => console.log(err));
+    },
+
+    openVueFile(data) {
+      if (data === undefined) return;
+      let vueFile = fs.readFileSync(data[0], "utf8");
+      const importObj = {
+        htmlList: []
+      };
+
+      const htmlElementMap = { //OverVue state management only handles these HTML tags.
+        div: ["<div>", "</div>"],
+        button: ["<button>", "</button>"],
+        form: ["<form>", "</form>"],
+        img: ["<img>", ""],
+        link: ['<a href="#"/>', ""],
+        list: ["<li>", "</li>"],
+        paragraph: ["<p>", "</p>"],
+        "list-ol": ["<ol>", "</ol>"],
+        "list-ul": ["<ul>", "</ul>"],
+        input: ["<input />", ""],
+        navbar: ["<nav>", "</nav>"],
+      };
+
+      let htmlList = [];
+      let htmlString = vueFile.substring(vueFile.indexOf('<template >')+10, vueFile.indexOf('</template>'));
+      let scriptString = vueFile.substring(vueFile.indexOf(`<script>`)+8, vueFile.indexOf(`/script>`)-1)
+      htmlParser(htmlString);
+      createHTMLList(htmlList);
+
+      function htmlParser(htmlString){
+        if (!htmlString){return}
+        //remove new lines and tabs from HTML
+        htmlString = htmlString.replaceAll('\n', '').replaceAll('\t', '') 
+        //find index for the first < and > in the string
+        let openTag = htmlString.indexOf('<')
+        let closeTag = htmlString.indexOf('>')
+
+        //push the substring wrapped by < and > into the helper func
+        pushElement(htmlString.substring(openTag+1, closeTag))
+
+        //recursively call htmlParser on the remainder of the string
+        return htmlParser(htmlString.substring(closeTag+1))
+      }
+
+      function pushElement(substring){
+      for (const elem in htmlElementMap){
+        for (let i = 0; i < htmlElementMap[elem].length; i++){
+          //if the htmlElementMap[elem][index] matches the substring, push it into the output array
+          if (htmlElementMap[elem][i].indexOf(substring) !== -1){
+            htmlList.push(htmlElementMap[elem][i])
+            break; //exit, or else div will match with /div, for example.
+          }
+        }
+      }
+      }
+
+      function createHTMLList (htmlList){
+        let currentOpen = null;
+        for (let i = 0; i < htmlList.length; i++){
+          const elemText = htmlList[i].substring(1,htmlList[i].length-1);
+          
+        }
+      }
+
+      console.log(importObj)
+
+
+}
+}
+}
+
+      //img, link, input do NOT need closing tags -- cannot have children either
+
+      
+      //for props, it's
+      
+      //Trying to target obj property without a key 
+    //string.slice(indexof({),indexof(:))
 
-export default defineComponent({
-  setup() {},
-});
+      function parsingStringToProps (str){
+
+        //Split the strings into an array
+        //look for the last '{' in the string
+        //look for the first ':' after the last '{'
+         //save the string in between as a first prop
+        
+        //if after ':' there's a ',' look for ':'
+         // save the string in between as a second prop
+
+        //if after ':' there's a ',' invoke the second function in search for the third prop, etc..
+         // save the string in between as third prop  
+      }
+      /*
+      //
+      data () {
+        return {
+          
+          TestPropForImport: "PLACEHOLDER FOR VALUE",
+        }
+      },
+      
+      */
+
+      //for state it's
+      /*
+
+      computed: {
+            ...mapState([
+            "TestStateForImport",
+            ]),
+        },
+      */
+     
+
+     //for actions it's
+     /*
+
+      methods: {
+        ...mapActions([
+          "TestActionForImport",
+        ]),
+      },
+
+     */
+
+  
+    
 </script>
+
+
+
+
+
+

src/store/actions.js

@@ -273,6 +273,12 @@ const actions = {
     commit(types.SET_ROUTES, payload.routes);
   },
 
+  [types.importComponent]: ({ commit }, payload) => {
+    //import component
+    console.log('inside import component action')
+    console.log(payload)
+  },
+
   // Add project
   [types.addProject]: ({ commit }, payload) => {
     commit(types.ADD_PROJECT, payload);

src/store/types.js

@@ -93,6 +93,7 @@ export const deletePropsFromComponent = 'deletePropsFromComponent'
 export const deleteSelectedElement = 'deleteSelectedElement'
 export const deleteStateFromComponent = 'deleteStateFromComponent'
 export const editComponentName = 'editComponentName'
+export const importComponent = 'importComponent'
 export const importImage = 'importImage'
 export const incrementProjectId = 'incrementProjectId'
 export const openProject = 'openProject'