committing delete component functionality

Author: Schillaci767

src/components/ComponentDetails.vue

@@ -9,11 +9,19 @@
         indicator-color="secondary"
         align="left"
       >
+        <q-tab name="code" label="Code Snippet" id="label-text" />
+        <q-tab name="html" label="HTML Elements" id="label-text" />
         <q-tab name="state" label="Component State" id="label-text" />
         <q-tab name="actions" label="Component Actions" id="label-text" />
         <q-tab name="props" label="Component Props" id="label-text" />
       </q-tabs>
       <q-tab-panels v-model="tab" animated class="html-bg text-white">
+        <q-tab-panel name="code">
+          <CodeSnippet/>
+        </q-tab-panel>
+       <q-tab-panel name="html" :style="{height: `${height}vh`}">
+          <HomeQueue />
+        </q-tab-panel>
         <q-tab-panel name="state">
           <ul id="stateList">
             <li v-for="comp in compObj.state" :key="comp">
@@ -43,9 +51,15 @@
 
 <script>
 import { mapState } from 'vuex'
+import HomeQueue from './HomeQueue'
+import CodeSnippet from './CodeSnippet'
 
 export default {
   name: 'ComponentDetails',
+  components: {
+    HomeQueue,
+    CodeSnippet
+  },
   computed: {
     ...mapState(['activeComponentObj']),
     compObj: {
@@ -56,7 +70,7 @@ export default {
   },
   data () {
     return {
-      tab: 'state'
+      tab: 'code'
     }
   }
 }

src/components/Footer.vue

@@ -22,31 +22,17 @@ Description:
         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" />
-        <q-tab name="html" label="HTML Elements" id="label-text" />
         <q-tab name="store" label="Vuex Store" id="label-text" />
-
       </q-tabs>
-
       <q-tab-panels v-model="tab" animated class="html-bg text-white" >
-        <q-tab-panel name="code">
-          <CodeSnippet />
-        </q-tab-panel>
-      <!-- Work in Progress -->
         <q-tab-panel name="detail">
           <ComponentDetails/>
         </q-tab-panel>
-      <!----------------------->
         <q-tab-panel name="tree">
           <Tree />
         </q-tab-panel>
-
-        <q-tab-panel name="html" :style="{height: `${height}vh`}">
-          <HomeQueue />
-        </q-tab-panel>
         <q-tab-panel name="store">
           <VuexStore/>
         </q-tab-panel>
@@ -58,16 +44,12 @@ Description:
 <script>
 import { mapState, mapActions } from 'vuex'
 import Tree from './Tree'
-import HomeQueue from './HomeQueue'
-import CodeSnippet from './CodeSnippet'
 import VuexStore from './DashboardVuexStore.vue'
 import ComponentDetails from './ComponentDetails'
 
 export default {
   components: {
     Tree,
-    HomeQueue,
-    CodeSnippet,
     VuexStore,
     ComponentDetails
   },

src/components/HomeSideDropDown.vue

@@ -7,7 +7,7 @@ Description:
 <template>
   <div class="q-pa-md" style="max-width: 350px">
     <q-list padding bordered class="rounded-borders drawer-menu">
-      <q-expansion-item dense dense-toggle expand-separator label="Components">
+      <q-expansion-item dense dense-toggle expand-separator label="Edit/Delete Components">
           <q-card>
             <div class="input-container" style='height: 130px'>
               <ComponentList />

src/components/HomeSideDropDownItems/ComponentList.vue

@@ -6,6 +6,23 @@ Description:
 
 <template>
   <div class="home-sidebar">
+     <q-input
+      @keyup.enter.native="editComponentName(newName)"
+      standout="bg-secondary text-white"
+      bottom-slots
+      v-model="newName"
+      label="Edit name"
+      dense
+      class="input-add"
+    >
+      <template v-slot:append>
+        <q-btn
+          round
+          dense
+          flat
+          icon="add"
+          @click="createNewAction(textAction)"
+        />
     <multiselect
       class='multiselect'
       v-model="value"
@@ -20,24 +37,9 @@ Description:
       <span slot='noResult'>No components found.</span>
       </multiselect>
       <br/>
-    <a
-      v-for="componentData in activeRouteDisplay"
-      :key="componentData.componentName"
-      v-on:click="onActivated(componentData)"
-    >
-      <q-list class="list-item" dense bordered separator>
-        <q-item clickable v-ripple class="list-item">
-          <q-item-section>
-            <div class="component-container">
-              <div class="component-info">
-                {{componentData.componentName}}
-              </div>
-              <q-btn round flat icon="highlight_off" v-on:click.stop="handleClick(componentData)" />
-            </div>
-          </q-item-section>
-        </q-item>
-      </q-list>
-    </a>
+    <h v-if="this.activeComponentObj"> Currently selected component: {{ activeComponentObj.componentName }} </h>
+    <h v-else> Select a component </h>
+    <q-btn id="deleteButton" @click="deleteSelectedComp(activeComponentData)" label = 'Delete currently selected'/>
   </div>
 </template>
 
@@ -48,21 +50,20 @@ import Multiselect from 'vue-multiselect'
 export default {
   data () {
     return {
-      value: ''
+      value: '',
+      newName: ''
     }
   },
   components: { Multiselect },
   computed: {
-    ...mapState(['routes', 'activeRoute', 'activeComponent']),
+    ...mapState(['routes', 'activeRoute', 'activeComponent', 'activeComponentObj']),
     activeRouteDisplay () {
       let component = this.routes[this.activeRoute]
       // console.log('component', component)
       return component
     },
     activeComponentData () {
-      return this.activeRouteDisplay.filter(componentData => {
-        return componentData.componentName === this.activeComponent
-      })[0]
+      return this.activeComponentObj
     },
     options () {
       const val = this.activeRouteDisplay.map(component => component.componentName)
@@ -77,14 +78,16 @@ export default {
       'deleteActiveComponent'
     ]),
     // Set component as active component from left side dropdown
-    onActivated (componentData) {
-      this.setActiveComponent(componentData.componentName)
-      this.activeComponentData.isActive = true
-    },
+    // onActivated (componentData) {
+    //   this.setActiveComponent(componentData.componentName)
+    //   this.activeComponentData.isActive = true
+    // },
     // Deletes the selected component
-    handleClick (componentData) {
-      this.setActiveComponent(componentData.componentName)
-      this.deleteActiveComponent(componentData.componentName)
+    deleteSelectedComp (componentData) {
+      if (componentData) {
+        // this.setActiveComponent(componentData.componentName)
+        this.deleteActiveComponent(componentData.componentName)
+      }
     },
     // Select active component from multi-select input
     handleSelect (componentName) {
@@ -99,6 +102,14 @@ export default {
       }
     }
   }
+  // watch: {
+  //   activeComponent: function () {
+  //     // console.log('watching activeComponent in Footer');
+  //     if (this.activeComponent === '' && this.selectedElementList.length !== 0) {
+  //       this.tab = 'html'
+  //     }
+  //   }
+  // }
 }
 </script>
 
@@ -126,7 +137,13 @@ export default {
   display: flex;
   justify-content: space-between;
 }
-</style>
-
 
+h {
+  color: white;
+}
 
+#deleteButton {
+ background-color: #289ead;
+ color: white;
+}
+</style>

src/components/HomeSideDropDownItems/VuexForm.vue

@@ -13,7 +13,7 @@ Description:
       standout="bg-secondary text-white"
       bottom-slots
       v-model="textAction"
-      label="Create Action"
+      label="Create Action in Store"
       dense
       class="input-add"
     >
@@ -63,7 +63,7 @@ Description:
       standout="bg-secondary text-white"
       bottom-slots
       v-model="textState"
-      label="Create State"
+      label="Create State in Store"
       dense
       class="input-add"
     >
@@ -107,7 +107,7 @@ Description:
       standout="bg-secondary text-white"
       bottom-slots
       v-model="textProps"
-      label="Create Props"
+      label="Create Prop in Store"
       dense
       class="input-add"
     >