made updates to edit name

Author: ziggrace

package-lock.json

@@ -50,6 +50,7 @@
     "@quasar/app": "^1.0.0",
     "@quasar/quasar-app-extension-testing": "^1.0.0",
     "@quasar/quasar-app-extension-testing-unit-jest": "^1.0.0",
+    "@vue/devtools": "^5.3.4",
     "@vue/eslint-config-standard": "^4.0.0",
     "babel-eslint": "^10.0.1",
     "devtron": "^1.4.0",

package.json

@@ -33,14 +33,17 @@ Description:
       <div class="component-title">
         <p>{{ componentData.componentName }}</p>
       </div>
-      <!-- <p> Elements in Component: </p>
-      <p
-        v-for="htmlElement in componentMap[componentData.componentName]
-          .htmlList"
-        :key="htmlElement"
-      >
-        {{ htmlElement.text }}
-      </p> -->
+      <!-- <div class="component-html-info"> -->
+        <!-- <p>Elements in Component:</p> -->
+        <!-- <p
+          class="component-html-info"
+          v-for="htmlElement in componentMap[componentData.componentName]
+            .htmlList"
+          :key="htmlElement"
+        >
+           {{  htmlElement.text  }}
+        </p> -->
+      <!-- </div> -->
       <q-menu context-menu>
         <q-list color="black" class="menu">
           <q-item clickable v-ripple v-close-popup @click="handleAddChild">
@@ -339,7 +342,7 @@ export default {
     },
 
     // deactivated is emitted before activated
-    onDeactivated (componentData) {
+    onDeactivated () {
       if (this.activeComponent !== '') {
         this.activeComponentData.isActive = false
       }
@@ -378,8 +381,13 @@ export default {
     }
   },
   watch: {
-    activeComponent: function(){
-      this.onActivated(this.activeComponentObj)
+    activeComponent: function () {
+      if (this.activeComponent){
+        this.onActivated(this.activeComponentObj)
+      }
+      else{
+        this.onDeactivated()
+      }
     }
   }
 }
@@ -397,6 +405,19 @@ export default {
   line-height: 1.2;
   z-index: -1;
 }
+
+.component-html-info {
+    display: flex;
+    font-size: 14px;
+    /* flex-basis: auto; */
+    flex-direction: column;
+    /* flex-wrap: wrap; */
+    /* justify-content: center; */
+    /* flex-flow: column wrap; */
+    /* align-content: stretch; */
+    /* align-items: flex-start; */
+    font-weight: 800;
+  }
 .component-children {
   position: relative;
   top: 0rem;
@@ -466,4 +487,4 @@ export default {
 #counter {
   margin-top: 20px;
 }
-</style>
+</style>

src/components/ComponentDisplay.vue

@@ -1,13 +1,14 @@
 <!--
 Description:
-  Dynamically renders Code Snippet in Footer
+  Located under Component Details in Dashboard
+  Dynamically renders Code Snippet in Dashboard
   Functionality includes: Displays children components and (nested) HTML elements in order of selection.
   -->
 
 <template>
   <div class="codesnippet-container">
-    <div class="top-p" v-if="activeComponent === ''">Select a component</div>
-    <div v-else>{{ `${activeComponent}.vue` }}</div>
+    <div class="top-p" v-if="this.activeComponent === ''">Select a component</div>
+    <div v-else>{{ `${this.activeComponent}.vue` }}</div>
     <prism-editor
       v-model="code"
       language="js"
@@ -171,18 +172,28 @@ export default {
   beforeDestroy () {
     window.removeEventListener('resize', this.getWindowHeight)
   },
-  watch: {
-    // If HTML elements or components are added, rerenders Code Snippet
-    componentMap: {
-      deep: true,
-      handler () {
-        // console.log('component Map has changed');
-        if (this.componentMap[this.activeComponent]) {
-          this.code = `${this.createCodeSnippet(
-            this.activeComponent,
-            this.componentMap[this.activeComponent].children
-          )}`
-        }
+  // watch: {
+  //   activeComponent: {
+  //     handler () {
+  //       if (this.componentMap[this.activeComponent]) {
+  //         this.code = `${this.createCodeSnippet(
+  //           this.activeComponent,
+  //           this.componentMap[this.activeComponent].children
+  //         )}`
+  //       }
+  //     }
+  //   }
+  // },
+  // If HTML elements or components are added, rerenders Code Snippet
+  componentMap: {
+    deep: true,
+    handler () {
+      // console.log('component Map has changed');
+      if (this.componentMap[this.activeComponent]) {
+        this.code = `${this.createCodeSnippet(
+          this.activeComponent,
+          this.componentMap[this.activeComponent].children
+        )}`
       }
     }
   }

src/components/CodeSnippet.vue renamed to src/components/dashboard_items/CodeSnippet.vue

@@ -19,8 +19,8 @@
         <q-tab-panel name="code">
           <CodeSnippet/>
         </q-tab-panel>
-       <q-tab-panel name="html" :style="{height: `${height}vh`}">
-          <HomeQueue />
+       <q-tab-panel name="html">
+          <HTMLQueue />
         </q-tab-panel>
         <q-tab-panel name="state">
           <ul id="stateList">
@@ -51,13 +51,13 @@
 
 <script>
 import { mapState } from 'vuex'
-import HomeQueue from './HomeQueue'
+import HTMLQueue from './HTMLQueue'
 import CodeSnippet from './CodeSnippet'
 
 export default {
   name: 'ComponentDetails',
   components: {
-    HomeQueue,
+    HTMLQueue,
     CodeSnippet
   },
   computed: {
@@ -84,13 +84,13 @@ i
   font-size 8px
   margin 5px
 
-// styling for the entire footer
+// styling for the entire dashboard
 .q-footer
   transition-timing-function ease-in
   transition .2s
   background $subsecondary
 
-// changes the footer toolbar height
+// changes the dashboard toolbar height
 .q-toolbar
   min-height 25px !important
   padding 0 6px !important

src/components/ComponentDetails.vue renamed to src/components/dashboard_items/ComponentDetails.vue

@@ -1,6 +1,6 @@
 <!--
 Description:
-  Displays OverVue's footer containing Code Snippet, component details (TBD), Project Tree, and HTML Elements tabs
+  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
   -->
@@ -13,7 +13,7 @@ Description:
       </q-btn>
       <q-toolbar-title>Dashboard</q-toolbar-title>
     </q-toolbar>
-    <q-card id="footer-cards">
+    <q-card id="dashboard-cards">
       <q-tabs
         v-model="tab"
         dense
@@ -67,7 +67,7 @@ export default {
   },
   methods: {
     ...mapActions(['setActiveHTML']),
-    // toggles open/close action of footer drawer
+    // toggles open/close action of dashboard drawer
     openBottomDrawer () {
       // 15in mb pro - 1027 px 3.75
       // big screens 2.5
@@ -85,23 +85,23 @@ export default {
       }
     }
   },
-  // toggles footer to "html" tab when existing component is not in focus
+  // toggles dashboard to "html" tab when existing component is not in focus
   watch: {
     activeComponent: function () {
-      // console.log('watching activeComponent in Footer');
+      // console.log('watching activeComponent in Dashboard');
       if (this.activeComponent === '' && this.selectedElementList.length !== 0) {
         this.tab = 'html'
       }
     },
-    // toggles footer to "html" tab if component name has value & elements are in queue
+    // toggles dashboard 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
+    // toggles dashboard 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) {
@@ -122,14 +122,14 @@ i {
   margin: 5px;
 }
 
-// styling for the entire footer
+// styling for the entire dashboard
 .q-footer {
   transition-timing-function: ease-in;
   transition: 0.2s;
   background: $subsecondary;
 }
 
-// changes the footer toolbar height
+// changes the dashboard toolbar height
 .q-toolbar {
   min-height: 25px !important;
   padding: 0 6px !important;
@@ -174,7 +174,7 @@ i {
   background: black;
 }
 
-#footer-cards {
+#dashboard-cards {
   height: 100%;
   border-radius: 0px;
   background: #737578;

src/components/Footer.vue renamed to src/components/dashboard_items/Dashboard.vue

@@ -62,13 +62,13 @@ i
   font-size 8px
   margin 5px
 
-// styling for the entire footer
+// styling for the entire Dashboard
 .q-footer
   transition-timing-function ease-in
   transition .2s
   background $subsecondary
 
-// changes the footer toolbar height
+// changes the Dashboard toolbar height
 .q-toolbar
   min-height 25px !important
   padding 0 6px !important

src/components/DashboardVuexStore.vue renamed to src/components/dashboard_items/DashboardVuexStore.vue

@@ -34,11 +34,11 @@ Description:
 <script>
 
 import { mapState, mapActions } from 'vuex'
-import { setSelectedElementList, deleteSelectedElement, deleteFromComponentHtmlList } from '../store/types'
-import { breadthFirstSearch } from '../utils/search.util'
+import { setSelectedElementList, deleteSelectedElement, deleteFromComponentHtmlList } from '../../store/types'
+import { breadthFirstSearch } from '../../utils/search.util'
 
 export default {
-  name: 'HomeQueue',
+  name: 'HTML Queue',
   props: {
     name: {
       type: String
@@ -105,7 +105,7 @@ export default {
   },
   watch: {
     activeComponent: function () {
-      // console.log('watching activeComponent in HomeQueue')
+      // console.log('watching activeComponent in HTMLQueue')
       if (this.activeComponent !== '') {
         this.component = true
       } else {

src/components/HomeQueue.vue renamed to src/components/dashboard_items/HTMLQueue.vue

@@ -1,6 +1,6 @@
 <!--
 Description:
-  Displays project tree in Footer
+  Displays project tree in Dashboard
   Functionality includes: formating componentMap object to displaying in tree form
   -->