Merge branch 'master' into createComponentDropDown

JojuOlaode · JojuOlaode · commit 66bd7d0fa0f1 · 2020-05-29T19:02:09.000-04:00
diff --git a/src/components/ChildrenMultiselect.vue b/src/components/ChildrenMultiselect.vue
@@ -41,7 +41,7 @@ export default {
     options () {
       const routes = Object.keys(this.routes)
       const exceptions = new Set(['App', this.activeComponent, ...routes])
-      console.log('exceptions', exceptions)
+      // console.log('exceptions', exceptions)
       return Object.keys(this.componentMap).filter(component => {
         if (!exceptions.has(component)) return component
       })
@@ -55,7 +55,7 @@ export default {
     //
     handleSelect (value) {
       // if (this.modalOpen) this.updateActiveComponentChildrenValue(value)
-      console.log('Multiselect: ', value)
+      // console.log('Multiselect: ', value)
       this.updateActiveComponentChildrenValue(value)
       this.updateComponentChildrenMultiselectValue(value)
     }
diff --git a/src/components/CodeSnippet.vue b/src/components/CodeSnippet.vue
@@ -111,7 +111,7 @@ export default {
   // updates code snippet, but broken cause children undefined, shows `function () { [native code] }`
   updated() {
     // console.log(`code: ${this.createCodeSnippet(this.activeComponent, this.componentMap[this.activeComponent].children)}`)
-    console.log('component map: ', this.componentMap);
+    // console.log('component map: ', this.componentMap);
     if (this.componentMap[this.activeComponent]) {
       this.code = `${this.createCodeSnippet(
         this.activeComponent,
@@ -128,7 +128,7 @@ export default {
     componentMap: {
       deep: true,
       handler() {
-        console.log('component Map has changed');
+        // console.log('component Map has changed');
         if (this.componentMap[this.activeComponent]) {
           this.code = `${this.createCodeSnippet(
             this.activeComponent,
@@ -138,7 +138,7 @@ export default {
       },
     },
     activeComponent: function() {
-      console.log('watching active component');
+      // console.log('watching active component');
     },
   },
 };
diff --git a/src/components/ComponentDisplay.vue b/src/components/ComponentDisplay.vue
@@ -27,17 +27,17 @@
       <q-menu context-menu>
         <q-list class="menu">
           <q-item clickable v-ripple v-close-popup @click="handleAddChild">
-            <q-item-section style="color: white">Add Children</q-item-section>
+            <q-item-section style="color: white">Update Children</q-item-section>
             <q-item-section avatar>
               <q-icon color="primary" name="add" />
             </q-item-section>
           </q-item>
-          <q-item clickable v-ripple v-close-popup auto-close>
+          <!-- <q-item clickable v-ripple v-close-popup auto-close>
             <q-item-section style="color: pink">Delete Children</q-item-section>
             <q-item-section avatar>
               <q-icon color="primary" name="delete" />
             </q-item-section>
-          </q-item>
+          </q-item> -->
         </q-list>
       </q-menu>
     </VueDraggableResizable>
@@ -86,7 +86,7 @@ export default {
     window.addEventListener("keyup", event => {
       if (event.key === "Backspace") {
         if (this.activeComponent && this.activeComponentData.isActive) {
-          // console.log('this:', this)
+          console.log('this:', this)
           this.$store.dispatch("deleteActiveComponent");
         }
       }
@@ -103,7 +103,7 @@ export default {
     ]),
     // used in VueDraggableResizeable component
     activeRouteArray() {
-      console.log("active route array method", this.routes[this.activeRoute]);
+      // console.log("active route array method", this.routes[this.activeRoute]);
       return this.routes[this.activeRoute];
     },
     // used to delete components
@@ -119,9 +119,9 @@ export default {
       // PROBLEM: the objects on childrenmultiselectvalue are applied
       // check to see if there are any existing children
       if (this.componentMap[this.activeComponent]) {
-        console.log('active component', this.activeComponent)
-        console.log('testmodel', this.testModel)
-        console.log(this.componentMap[this.activeComponent].children)
+        // console.log('active component', this.activeComponent)
+        // console.log('testmodel', this.testModel)
+        // console.log(this.componentMap[this.activeComponent].children)
         this.testModel = this.componentMap[this.activeComponent].children;
       }
       const routes = Object.keys(this.routes);
diff --git a/src/components/CreateComponent.vue b/src/components/CreateComponent.vue
@@ -27,7 +27,7 @@
       color="secondary"
       label="Create Component"
       @click="handleClick"
-      :disabled="!componentNameInputValue"
+      :disabled="!componentNameInputValue.trim()"
     />
   </div>
 </template>
@@ -63,6 +63,10 @@ export default {
       'addToComponentElementList'
     ]),
     handleClick () {
+      if (!this.componentNameInputValue.trim()) {
+        event.preventDefault();
+        return false;
+      }
       const component = {
         componentName: this.componentNameInputValue,
         x: 0,
@@ -75,6 +79,7 @@ export default {
       }
 
       this.registerComponent(component)
+
     },
     resetActiveComponent () {
       this.setActiveComponent('')
@@ -91,7 +96,7 @@ export default {
   height: 45px;
 }
 form {
-  margin-bottom: 2em;
+  /* margin-bottom: 2em; */
 }
 #add-component-btn {
   height: 15px;
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
@@ -15,6 +15,7 @@
         indicator-color="secondary"
         align="left"
       >
+
         <q-tab name="code" label="Code Snippet" id="label-text" />
         <q-tab name="detail" label="Component Details" id="label-text" />
         <q-tab name="tree" label="Project Tree" id="label-text" />
@@ -43,6 +44,7 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import Tree from './Tree'
 import HomeQueue from './HomeQueue'
 import CodeSnippet from './CodeSnippet'
@@ -53,6 +55,9 @@ export default {
     HomeQueue,
     CodeSnippet
   },
+  computed: {
+    ...mapState(['activeComponent', 'componentNameInputValue', 'selectedElementList'])
+  },
   data () {
     return {
       tab: 'code',
@@ -71,6 +76,30 @@ export default {
       this.height === 40 ? (this.height = minHeight) : (this.height = 40)
       this.open === true ? (this.open = false) : (this.open = true)
     }
+  },
+  // toggles footer to "html" tab when existing component is not in focus
+  watch: {
+    activeComponent: function () {
+      // console.log('watching activeComponent in Footer');
+      if (this.activeComponent === '' && this.selectedElementList.length !== 0) {
+        this.tab = 'html'
+      }
+    },
+  // toggles footer to "html" tab if component name has value & elements are in queue
+    componentNameInputValue: function() {
+      // console.log('watching componentNameInputVal')
+      if (this.componentNameInputValue !== '' && this.selectedElementList.length !== 0 && this.activeComponent === '') {
+        // console.log(this.selectedElementList)
+        this.tab = 'html'
+      }
+    },
+    // toggles footer to "html" tab if elements are added to queue on component creation
+    selectedElementList: function() {
+      // console.log('watching selectedElementList')
+      if (this.activeComponent === '' && this.selectedElementList.length !== 0) {
+        this.tab = 'html'
+      }
+    }
   }
 }
 </script>
diff --git a/src/components/HomeQueue.vue b/src/components/HomeQueue.vue
@@ -1,5 +1,8 @@
 <template>
   <section class="home-queue">
+    <span class='list-title' v-if='component'> Viewing Elements in '{{ this.activeComponent }}' </span>
+    <span class='list-title' v-else> Elements in Queue </span>
+    <hr>
     <draggable
       v-model="renderList"
       group="people"
@@ -31,7 +34,11 @@ export default {
       type: Array
     }
   },
-
+  data () {
+    return {
+      component: false
+    }
+  },
   computed: {
     ...mapState(['selectedElementList', 'componentMap', 'activeComponent']),
     renderList: {
@@ -52,6 +59,16 @@ export default {
   },
   components: {
     draggable
+  },
+  watch: {
+    activeComponent: function () {
+      // console.log('watching activeComponent in HomeQueue')
+      if (this.activeComponent !== '') {
+        this.component = true
+      } else {
+        this.component = false
+      }
+    }
   }
 }
 </script>
@@ -63,6 +80,9 @@ export default {
 li {
   list-style-type: none;
 }
+.list-title {
+  // font-weight: bold;
+}
 .list-group-item {
   display: inline-block;
   margin: 2px 1.5%;
@@ -81,4 +101,7 @@ li {
   position: relative;
   left: 20px;
 }
+hr {
+  border: 1px solid grey
+}
 </style>
diff --git a/src/components/Icons.vue b/src/components/Icons.vue
@@ -5,9 +5,12 @@
       v-for="([elementName, iconString], idx) in Object.entries(icons)"
       :key="idx + Date.now()"
     >
+      <span class="badge"> {{ elementStorage[elementName] }}</span>
+      <br />
       <i :class="iconString"></i>
       <br />
-      <span class="white--text">{{ elementName }}</span>
+      <span class="white--text"
+      >{{ elementName }}</span>
     </button>
   </section>
 </template>
@@ -16,14 +19,81 @@
 import { mapState } from 'vuex'
 
 export default {
+  data () {
+    return {
+      elementStorage: {}
+    }
+  },
   name: 'Icons',
   computed: {
-    ...mapState(['icons', 'activeComponent'])
+    ...mapState(['icons', 'activeComponent', 'componentMap', 'selectedElementList'])
   },
   methods: {
     changeState (elementName) {
       if (this.activeComponent === '') { this.$emit('getClickedIcon', elementName) } else this.$emit('activeElement', elementName)
     }
+  },
+  watch: {
+    selectedElementList: function() {
+      // console.log('watching selectedElementList');
+      if (this.activeComponent === '') {
+        this.elementStorage = {};
+        this.selectedElementList.forEach(el => {
+          if (!this.elementStorage[el.text]) {
+            this.elementStorage[el.text] = 1;
+          } else {
+            this.elementStorage[el.text] += 1;
+          }
+        })
+      }
+      // console.log('storage is ', this.elementStorage)
+    },
+    // if componentMap is updated (i.e. element is added to component's htmlList), elementStorage will update its cache of elements & frequency
+    componentMap: {
+      deep: true,
+      handler () {
+        // console.log('watching componentMap');
+        // console.log('activecomponent is ', this.activeComponent)
+        // console.log('htmlList', this.componentMap[this.activeComponent].htmlList)
+        if (this.activeComponent) {
+          this.elementStorage = {};
+          this.componentMap[this.activeComponent].htmlList.forEach(el => {
+            if (!this.elementStorage[el.text]) {
+              this.elementStorage[el.text] = 1;
+            } else {
+              this.elementStorage[el.text] += 1;
+            }
+          })
+          // console.log('elementStorage is ', this.elementStorage);
+        }
+      },
+    },
+    // if activeComponent is updated, elementStorage will update its cache of elements & frequency to reflect new active component
+    activeComponent: function() {
+      // console.log('watching activeComponent', this.activeComponent);
+      if (this.activeComponent) {
+        this.elementStorage = {};
+        this.componentMap[this.activeComponent].htmlList.forEach(el => {
+          if (!this.elementStorage[el.text]) {
+            this.elementStorage[el.text] = 1;
+          } else {
+            this.elementStorage[el.text] += 1;
+          }
+        })
+        // console.log('elementStorage is ', this.elementStorage);
+      } else if (this.activeComponent === '') {
+        // console.log(`watching activeComponent, current active is ''`)
+        // if component was switched from existing component to '', reset cache and update items
+        if (this.elementStorage !== {}) this.elementStorage = {};
+        this.selectedElementList.forEach(el => {
+          if (!this.elementStorage[el.text]) {
+            this.elementStorage[el.text] = 1;
+          } else {
+            this.elementStorage[el.text] += 1;
+          }
+        })
+      }
+    }
   }
 }
 </script>
@@ -44,7 +114,6 @@ export default {
     width: 100%;
   }
 }
-
 button {
   background: none;
   color: white;
@@ -54,7 +123,23 @@ button:hover {
   cursor: pointer;
   color: #00ffff;
 }
-button:focus {
+button:focus {  
   outline: none;
+  color: #00ffff;
+}
+button:active {
+  box-shadow: 0 5px inherit;
+  transform: translateY(4px);
+}
+.badge {
+  width: 15px;
+  line-height: 15px;
+  text-align: center;
+  font-size: 10px;
+  font-weight: bold;
+  float: right;
+  border-radius: 50%;
+  background-color: #228585;
+  color: white;
 }
 </style>
diff --git a/src/components/Tree.vue b/src/components/Tree.vue
@@ -40,6 +40,7 @@ export default {
           children: compData.children
         })
       })
+      console.log("Formatcomponent map result", result)
       return result
     },
     transformToTree (data) {
diff --git a/src/store/mutations.js b/src/store/mutations.js
