Merge pull request #29 from oslabs-beta/bryan/displayRoutesOnTutorialClose

Bryan/display routes on tutorial close

Author: Kerolos-Nesem

src/components/ComponentDisplay.vue

@@ -10,6 +10,7 @@
     class="component-display grid-bg"
     :style="mockBg"
     v-on:click="handleClick"
+    v-on:click.right="handleRight"
   >
     <!-- This is the actual component box -->
     <!-- https://www.npmjs.com/package/vue-draggable-resizable -->
@@ -50,7 +51,7 @@
       <q-menu context-menu>
         <q-list color="black" class="menu">
           <q-item clickable v-ripple v-close-popup id="layer-item">
-            <q-item-section class="layer">Layer</q-item-section>
+            <q-item-section class="layer">Component Layer</q-item-section>
             <q-btn
               class="minorAction"
               color="transparent"
@@ -91,19 +92,22 @@
     </vue-draggable-resizable>
     <div>
       <q-dialog v-model="modalOpen">
-        <q-select
-          @select="handleSelect"
-          id="childrenDropdown"
-          filled
-          v-model="testModel"
-          multiple
-          :options="options"
-          use-chips
-          stack-label
-          dark
-          label="Select children"
-          style="width: 250px; background-color: #201221;"
-        />
+      <div class="addChild">
+      <p>Add/Remove Children</p>
+      <VueMultiselect
+        v-model="childrenSelected"
+        placeholder="Add/remove children"
+        :multiple="true"
+        :close-on-select="false"
+        :options="options"
+        :show-labels="false"
+        @remove="handleSelect"
+        @select="handleSelect"
+        :height="300"
+        :option-height="40"
+        :searchable="false"
+      />
+      </div>
       </q-dialog>
 
       <!-- some irregularity (delete event listener firing on bkspc/del) with the modal when stored locally, so modal open stored in state, and triggers to local reflect only stateful change.-->
@@ -153,6 +157,7 @@
 <script>
 import { mapState, mapActions } from "vuex";
 import VueDraggableResizable from "vue-draggable-resizable/src/components/vue-draggable-resizable.vue";
+import VueMultiselect from "vue-multiselect";
 import "vue-draggable-resizable/src/components/vue-draggable-resizable.css";
 import handleExportComponentMixin from "./ExportComponentMixin.vue";
 const { fs, ipcRenderer } = window;
@@ -163,6 +168,7 @@ export default {
   name: "ComponentDisplay",
   components: {
     VueDraggableResizable,
+    VueMultiselect,
   },
   mixins: [handleExportComponentMixin],
   data() {
@@ -176,6 +182,7 @@ export default {
       initialPosition: { x: 0, y: 0 },
       initialSize: { w: 0, h: 0 },
       htmlElements: [],
+      childrenSelected: [],
     };
   },
   mounted() {
@@ -203,7 +210,7 @@ export default {
     });
     window.addEventListener("paste", () => {
       if (this.noteModalOpen === false){
-        this.$store.dispatch("pasteActiveComponent");
+          this.$store.dispatch("pasteActiveComponent");
       }
     });
   },
@@ -217,8 +224,8 @@ export default {
       "imagePath",
       "activeComponentObj",
       "exportAsTypescript",
-      "noteModalOpen"
-
+      "noteModalOpen",
+      "activeRouteDisplay"
     ]),
     // used in VueDraggableResizeable component
     activeRouteArray() {
@@ -231,34 +238,37 @@ export default {
       return cloneDeep(this.activeComponentObj);
     },
     options() {
-      // checks if component has any parents and pushes them into lineage
-      const checkParents = (component, lineage = [component.componentName]) => {
-        console.log("Lineage: " + lineage);
-        if (!Object.keys(component.parent).length) return lineage;
-        for (var parents in component.parent) {
-          // Mutating?
-          lineage.push(parents);
-          checkParents(component.parent[parents], lineage);
-        }
-        return lineage;
-      };
-      let lineage = [this.activeComponent];
-      // checks to see if there are any existing children
-      if (this.componentMap[this.activeComponent]) {
-        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-        this.testModel = this.componentMap[this.activeComponent].children;
-        lineage = checkParents(this.componentMap[this.activeComponent]);
+      if (this.activeComponent !== ''){
+          this.childrenSelected = [];
+          this.childrenSelected = this.componentMap[this.activeComponent].children;
+      } else {
+        this.childrenSelected = [];
       }
-      const routes = Object.keys(this.routes);
-      const exceptions = new Set([
-        "App",
-        ...lineage,
-        ...routes,
-        ...this.testModel,
-      ]);
-      return Object.keys(this.componentMap).filter((component) => {
-        if (!exceptions.has(component)) return component;
-      });
+      const compMap = this.componentMap;
+      const activeComp = this.activeComponent;
+      const val = this.routes[this.activeRoute].map(
+        (component) => component.componentName
+      );
+      const relatives = [...val]
+        //also need to filter out any parents
+
+      let parentalLineage = [];
+      findLineage(relatives)
+      function findLineage(children){
+        children.forEach((el)=>{
+          parentalLineage.push(el);
+          if (compMap[el].children.length > 0){
+            findLineage(compMap[el].children);
+          }
+          if (el !== activeComp){
+            parentalLineage.pop();
+          } else {
+            return;
+          }
+        })
+      }
+      const optionOutput = val.filter(el => !parentalLineage.includes(el)).filter(el => el !== this.activeComponent); 
+      return optionOutput;
     },
     userImage() {
       const imgSrc = `file://` + this.imagePath[this.activeRoute];
@@ -316,7 +326,6 @@ export default {
     recordInitialPosition: function (e) {
       if (this.activeComponent !== e.target.id) {
         if (e.target.parentElement?.classList.contains('draggable')){
-          //console.log("using vanilla JS to WIN")
           this.setActiveComponent(e.target.parentElement.id)
         } else {
           this.setActiveComponent(e.target.id);
@@ -424,7 +433,7 @@ export default {
       this.deleteActiveComponentNote(e.target.previousElementSibling.innerText);
     },
     // used when user selects to add child from dropdown
-    handleSelect(value) {
+    handleSelect(value) { //actually handles adding or deleting
       this.updateActiveComponentChildrenValue(value);
     },
     // user can change component's layer order
@@ -446,7 +455,11 @@ export default {
         this.setActiveComponent("");
       }
     },
-    copyActiveComponent() {},
+    handleRight(event) {
+      if (event.target.className === "component-display grid-bg") {
+        //right click modal to make a component?
+      }
+    },
   },
   watch: {
     noteModalOpen (){
@@ -468,6 +481,17 @@ export default {
 </script>
 
 <style scoped lang="scss">
+
+.addChild{
+  width: 25vh;
+  height: 50vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: $subsecondary;
+  padding: 10px;
+}
+
 li{
   display: flex;
   font-weight: bold;
@@ -477,6 +501,8 @@ li{
 li:hover{
   background-color: $subprimary;
 }
+
+
 .noteblock{
   white-space: pre-wrap;
   font-weight: normal;

src/components/dashboard_items/CodeSnippet.vue

@@ -35,7 +35,7 @@ import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
 export default {
   data() {
     return {
-      // code: `Your component boilerplate will be displayed here.`,
+      code: `Your component boilerplate will be displayed here.`,
       lineNumbers: true,
       height: null,
     };
@@ -46,18 +46,19 @@ export default {
   computed: {
     // needs access to current component aka activeComponent
     ...mapState(["componentMap", "activeComponent", "activeComponentObj", "exportAsTypescript"]),
-    code: function () {
-      let computedCode = "Your component boilerplate will be displayed here.";
-      if (this.activeComponent) {
-        computedCode = this.createCodeSnippet(
+  },
+  methods: {
+    snippetInvoke(){
+      if (this.activeComponent !== ''){
+        this.code = this.createCodeSnippet(
           this.componentMap[this.activeComponent].componentName,
           this.componentMap[this.activeComponent].children
-        );
+        )
+        } else {
+          this.code = 'Your component boilerplate will be displayed here.'
       }
-      return computedCode;
     },
-  },
-  methods: {
+    //highlighter does not work: OverVue 6.0;
     highlighter(myCode) {
       return highlight(myCode, languages.js);
     },
@@ -161,16 +162,16 @@ export default {
       // add import mapstate and mapactions if they exist
       let imports = "";
       if (
-        this.activeComponentObj.actions.length ||
-        this.activeComponentObj.state.length
+        this.componentMap[this.activeComponent].actions.length ||
+        this.componentMap[this.activeComponent].state.length
       ) {
         imports += "import { ";
         if (
-          this.activeComponentObj.actions.length &&
-          this.activeComponentObj.state.length
+          this.componentMap[this.activeComponent].actions.length &&
+          this.componentMap[this.activeComponent].state.length
         ) {
           imports += "mapState, mapActions";
-        } else if (this.activeComponentObj.state.length) imports += "mapState";
+        } else if (this.componentMap[this.activeComponent].state.length) imports += "mapState";
         else imports += "mapActions";
         imports += ' } from "vuex";\n';
       }
@@ -193,9 +194,9 @@ export default {
 
       // if true add data section and populate with props
       let data = "";
-      if (this.activeComponentObj.props.length) {
+      if (this.componentMap[this.activeComponent].props.length) {
         data += "  data () {\n    return {";
-        this.activeComponentObj.props.forEach((prop) => {
+        this.componentMap[this.activeComponent].props.forEach((prop) => {
           data += `\n      ${prop}: "PLACEHOLDER FOR VALUE",`;
         });
         data += "\n";
@@ -205,10 +206,10 @@ export default {
 
       // if true add computed section and populate with state
       let computed = "";
-      if (this.activeComponentObj.state.length) {
+      if (this.componentMap[this.activeComponent].state.length) {
         computed += "  computed: {";
         computed += "\n    ...mapState([";
-        this.activeComponentObj.state.forEach((state) => {
+        this.componentMap[this.activeComponent].state.forEach((state) => {
           computed += `\n      "${state}",`;
         });
         computed += "\n    ]),\n";
@@ -217,10 +218,10 @@ export default {
 
       // if true add methods section and populate with actions
       let methods = "";
-      if (this.activeComponentObj.actions.length) {
+      if (this.componentMap[this.activeComponent].actions.length) {
         methods += "  methods: {";
         methods += "\n    ...mapActions([";
-        this.activeComponentObj.actions.forEach((action) => {
+        this.componentMap[this.activeComponent].actions.forEach((action) => {
           methods += `\n      "${action}",`;
         });
         methods += "\n    ]),\n";
@@ -249,40 +250,29 @@ export default {
       } else {
         output += "};\n<\/script>\n\n<style scoped>\n</style>"
       }
-      // eslint-disable-next-line no-useless-escape
-      // add props/data
-
-      // eslint-disable-next-line no-useless-escape
-      // return `\n\n<script>\n${str}\nexport default {\n  name: '${componentName}',\n
-      // components: {\n${childrenComponentNames}  }\n};\n<\/script>\n\n<style scoped>\n
-      // </style>`
       return output;
     },
   },
   watch: {
-    // // watches activeComponentObj for changes to make it reactive upon mutation
-    // activeComponentObj: {
-    //   handler () {
-    //     // console.log(this.activeComponentObj.children)
-    //     this.code = this.createCodeSnippet(
-    //       this.activeComponentObj.componentName,
-    //       this.activeComponentObj.children
-    //     )
-    //   }
-    // },
-    // // // // watches componentMap for changes to make it reactive upon mutation
-    // componentMap: {
-    //   handler () {
-    //     this.code = this.createCodeSnippet(
-    //       this.activeComponentObj.componentName,
-    //       this.activeComponentObj.children
-    //     )
-    //   }
-    // }
+    // watches activeComponentObj for changes to make it reactive upon mutation
+    // // // watches componentMap for changes to make it reactive upon mutation
+    activeComponent: {
+      handler () {
+        this.snippetInvoke();
+      },
+      deep: true
+    },
+    componentMap: {
+      handler () {
+        this.snippetInvoke();
+      },
+      deep: true
+    }
   },
   mounted() {
     // https://vuejs.org/v2/api/#Vue-nextTick
     // kinda like a promise, used for the window resize
+    this.snippetInvoke(); //generates the code snippet whenever this is mounted
     this.$nextTick(() => {
       window.addEventListener("resize", this.getWindowHeight);
 
@@ -304,15 +294,18 @@ export default {
   font-size: 12px;
   background: #2d2d2d;
   color: #ccc;
-  max-height: 70vh;
+  max-height: 100%;
   /* you must provide font-family font-size line-height. Example: */
   font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
   line-height: 1.5;
   padding: 5px;
 }
 
 .codesnippet-container {
-  margin-bottom: 1rem;
+  padding-bottom: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  height: 95%;
 }
 
 .prism-editor__textarea:focus {