Merge branch 'dev2021' of https://github.com/oslabs-beta/OverVue into dev2021

Author: codeByCandlelight

src/components/dashboard_items/CodeSnippet.vue

@@ -65,7 +65,6 @@ export default {
     },
     // Creates <template> boilerplate
     writeTemplateTag (componentName) {
-      // console.log('writeTemplateTag invoked!')
       // create reference object
       const htmlElementMap = {
         div: ['<div>', '</div>'],
@@ -82,6 +81,7 @@ export default {
       }
 
       // Helper function that recursively iterates through the given html element's children and their children's children.
+      // also adds proper indentation to code snippet
       function writeNested (childrenArray, indent) {
         if (!childrenArray.length) {
           return ''
@@ -91,7 +91,6 @@ export default {
 
         childrenArray.forEach(child => {
           nestedString += indented
-          // console.log(child)
           if (!child.text) {
             nestedString += `<${child}/>\n`
           } else {
@@ -113,7 +112,6 @@ export default {
       let htmlArr = this.componentMap[componentName].htmlList
       let outputStr = ``
       for (let el of htmlArr) {
-        // console.log(el)
         if (!el.text) {
           outputStr += `    <${el}/>\n`
         } else {
@@ -130,7 +128,6 @@ export default {
           }
         }
       }
-      // console.log(`outputStr from writeTemplateTag: ${outputStr}`)
       return outputStr
     },
     // Creates boiler text for <script> and <style>
@@ -156,15 +153,14 @@ export default {
       this.getWindowHeight()
     })
   },
-  // Updates code snippet
+  // Updates code snippet when adding children
   updated () {
-    // console.log(`code: ${this.createCodeSnippet(this.activeComponent, this.componentMap[this.activeComponent].children)}`)
-    // console.log('component map: ', this.componentMap);
     if (this.componentMap[this.activeComponent]) {
       this.code = `${this.createCodeSnippet(
         this.activeComponent,
         this.componentMap[this.activeComponent].children
       )}`
+      // else if there is not existing component/no active component
     } else {
       this.code = `Your component boilerplate will be displayed here.`
     }

src/components/dashboard_items/ComponentDetails.vue

@@ -1,3 +1,12 @@
+<!--
+Description:
+  Located in the Dashboard
+  Contains the Code Snippet, HTMLQueue Components, and the Component state, actions, and props as well
+  Functionality includes: Contains the Code Snippet and HTMLQueue Components,
+  as well as tabs to show the Component state, actions, and props
+
+  -->
+
 <template>
   <div class="container">
     <q-card id="store-cards" v-if="this.activeComponentObj">

src/components/dashboard_items/Dashboard.vue

@@ -1,8 +1,8 @@
 <!--
 Description:
   Displays OverVue's dashboard containing Component Details, Vuex Store, and the Project Tree
-  Functionality includes: opening/closing drawer, deselecting active html, and
-  toggling to html elements tab during component creation
+  Functionality includes: opening/closing drawer, and contains the different Tabs
+  As of now, no default tab selected when not selecting anything, but might change to Project Tree in the future if we want
   -->
 
   <template>
@@ -85,27 +85,30 @@ export default {
       }
     }
   },
-  // toggles dashboard to "html" tab when existing component is not in focus
   watch: {
+    // toggles dashboard to "Component Details" tab when a components is selected
     activeComponent: function () {
-      // console.log('watching activeComponent in Dashboard');
-      if (this.activeComponent === '' && this.selectedElementList.length !== 0) {
-        this.tab = 'html'
+      if (this.activeComponent !== '') {
+        this.tab = 'detail'
+      } else {
+        // otherwise toggle dashboard to 'Project Tree' tab if no component is selected
+        this.tab = 'tree'
       }
     },
-    // toggles dashboard to "html" tab if component name has value & elements are in queue
+    // otherwise toggle dashboard to 'Project Tree' tab if no component is selected or the
+    // user is in the process of creating a component
     componentNameInputValue: function () {
-      // console.log('watching componentNameInputVal')
-      if (this.componentNameInputValue !== '' && this.selectedElementList.length !== 0 && this.activeComponent === '') {
-        // console.log(this.selectedElementList)
-        this.tab = 'html'
+      if (this.componentNameInputValue !== '' && this.activeComponent === '') {
+        console.log(this.selectedElementList.length)
+        this.tab = 'tree'
       }
     },
-    // toggles dashboard to "html" tab if elements are added to queue on component creation
+    // // toggles dashboard to "Project Tree" tab if:
+    // // no component is selected and either:
+    // // elements are being added to component or name is being typed
     selectedElementList: function () {
-      // console.log('watching selectedElementList')
       if (this.activeComponent === '' && this.selectedElementList.length !== 0) {
-        this.tab = 'html'
+        this.tab = 'tree'
       }
     }
   }

src/components/dashboard_items/HTMLQueue.vue

@@ -38,7 +38,7 @@ import { setSelectedElementList, deleteSelectedElement, deleteFromComponentHtmlL
 import { breadthFirstSearch } from '../../utils/search.util'
 
 export default {
-  name: 'HTML Queue',
+  name: 'HTMLQueue',
   props: {
     name: {
       type: String