Skip to content

Commit 2584379

Browse files
codeByCandlelightcodeByCandlelight
committed
merged updated dev branch with current feature branch
Co-Authored by: Faraz Moallemi [email protected]
2 parents 36bdca3 + 384238a commit 2584379

File tree

11 files changed

+288
-227
lines changed

11 files changed

+288
-227
lines changed

‎src/components/ComponentDetails.vue

Lines changed: 30 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -9,82 +9,68 @@
99
indicator-color="secondary"
1010
align="left"
1111
>
12+
<q-tab name="code" label="Code Snippet" id="label-text" />
13+
<q-tab name="html" label="HTML Elements" id="label-text" />
1214
<q-tab name="state" label="Component State" id="label-text" />
1315
<q-tab name="actions" label="Component Actions" id="label-text" />
1416
<q-tab name="props" label="Component Props" id="label-text" />
1517
</q-tabs>
1618
<q-tab-panels v-model="tab" animated class="html-bg text-white">
17-
<q-tab-panel name="state" v-model="activeState">
19+
<q-tab-panel name="code">
20+
<CodeSnippet/>
21+
</q-tab-panel>
22+
<q-tab-panel name="html" :style="{height: `${height}vh`}">
23+
<HomeQueue />
24+
</q-tab-panel>
25+
<q-tab-panel name="state">
1826
<ul id="stateList">
19-
<li v-for="comp in activeState" :key="comp">
27+
<li v-for="comp in compObj.state" :key="comp">
2028
{{ comp }}
2129
</li>
2230
</ul>
2331
</q-tab-panel>
24-
<q-tab-panel name="actions" v-model="activeActions">
32+
<q-tab-panel name="actions">
2533
<ul id="actionList">
26-
<li v-for="comp in activeActions" :key="comp">
34+
<li v-for="comp in compObj.actions" :key="comp">
2735
{{ comp }}
2836
</li>
2937
</ul>
3038
</q-tab-panel>
31-
<q-tab-panel name="props" v-model="activeProps">
39+
<q-tab-panel name="props">
3240
<ul id="propsList">
33-
<li v-for="comp in activeProps" :key="comp">
41+
<li v-for="comp in compObj.props" :key="comp">
3442
{{ comp }}
3543
</li>
3644
</ul>
3745
</q-tab-panel>
3846
</q-tab-panels>
3947
</q-card>
40-
<q-card v-else>Select a component to show details</q-card>
48+
<q-card id="blank-card" v-else>Select a component to show details</q-card>
4149
</div>
4250
</template>
4351

4452
<script>
4553
import { mapState } from 'vuex'
54+
import HomeQueue from './HomeQueue'
55+
import CodeSnippet from './CodeSnippet'
4656
4757
export default {
4858
name: 'ComponentDetails',
59+
components: {
60+
HomeQueue,
61+
CodeSnippet
62+
},
4963
computed: {
5064
...mapState(['activeComponentObj']),
51-
activeState: {
52-
get () {
53-
if (this.activeComponentObj) return this.activeComponentObj.state
54-
return []
55-
}
56-
},
57-
activeProps: {
58-
get () {
59-
if (this.activeComponentObj) return this.activeComponentObj.props
60-
return []
61-
}
62-
},
63-
activeActions: {
65+
compObj: {
6466
get () {
65-
if (this.activeComponentObj) return this.activeComponentObj.actions
66-
return []
67+
return this.activeComponentObj
6768
}
6869
}
69-
// componentActions: {
70-
// get() {
71-
// return this.$store.state.activeComponentObj.actions;
72-
// },
73-
// },
74-
// componentState: {
75-
// get() {
76-
// return this.$store.state.activeComponentObj.state;
77-
// },
78-
// },
79-
// componentProps: {
80-
// get() {
81-
// return this.$store.state.activeComponentObj.props;
82-
// },
83-
// },
8470
},
8571
data () {
8672
return {
87-
tab: 'state'
73+
tab: 'code'
8874
}
8975
}
9076
}
@@ -143,19 +129,16 @@ i
143129
background black
144130
145131
#store-cards
146-
height 100%
132+
height 80%
147133
border-radius 0
148134
background #737578
149135
136+
#blank-card
137+
height 80%
138+
border-radius 0
139+
background-color #202122
140+
150141
.html-bg
151142
// give html background color of grey
152143
background-color #202122
153144
</style>
154-
155-
let active = (state.routes[state.activeRoute].filter(comp => {
156-
return comp.componentName === state.activeComponent
157-
})[0])
158-
159-
active.props
160-
active.state
161-
active.actions

‎src/components/ComponentDisplay.vue

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,8 @@ export default {
134134
'activeComponent',
135135
'componentMap',
136136
'componentChildrenMultiselectValue',
137-
'imagePath'
137+
'imagePath',
138+
'activeComponentObj'
138139
]),
139140
140141
// used in VueDraggableResizeable component
@@ -380,6 +381,14 @@ export default {
380381
if (!(this.activeComponent === '')) this.setActiveComponent('')
381382
}
382383
}
384+
},
385+
watch: {
386+
activeComponentObj: {
387+
handler () {
388+
// console.log('componentMap has changed')
389+
this.value = ''
390+
}
391+
}
383392
}
384393
}
385394
</script>
@@ -487,4 +496,4 @@ export default {
487496
#counter {
488497
margin-top: 20px;
489498
}
490-
</style>
499+
</style>

‎src/components/Dashboard.vue

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -22,31 +22,17 @@ Description:
2222
indicator-color="secondary"
2323
align="left"
2424
>
25-
26-
<q-tab name="code" label="Code Snippet" id="label-text" />
2725
<q-tab name="detail" label="Component Details" id="label-text" />
2826
<q-tab name="tree" label="Project Tree" id="label-text" />
29-
<q-tab name="html" label="HTML Elements" id="label-text" />
3027
<q-tab name="store" label="Vuex Store" id="label-text" />
31-
3228
</q-tabs>
33-
3429
<q-tab-panels v-model="tab" animated class="html-bg text-white" >
35-
<q-tab-panel name="code">
36-
<CodeSnippet />
37-
</q-tab-panel>
38-
<!-- Work in Progress -->
3930
<q-tab-panel name="detail">
4031
<ComponentDetails/>
4132
</q-tab-panel>
42-
<!----------------------->
4333
<q-tab-panel name="tree">
4434
<Tree />
4535
</q-tab-panel>
46-
47-
<q-tab-panel name="html" :style="{height: `${height}vh`}">
48-
<HomeQueue />
49-
</q-tab-panel>
5036
<q-tab-panel name="store">
5137
<VuexStore/>
5238
</q-tab-panel>
@@ -58,16 +44,12 @@ Description:
5844
<script>
5945
import { mapState, mapActions } from 'vuex'
6046
import Tree from './Tree'
61-
import HomeQueue from './HomeQueue'
62-
import CodeSnippet from './CodeSnippet'
6347
import VuexStore from './DashboardVuexStore.vue'
6448
import ComponentDetails from './ComponentDetails'
6549
6650
export default {
6751
components: {
6852
Tree,
69-
HomeQueue,
70-
CodeSnippet,
7153
VuexStore,
7254
ComponentDetails
7355
},

‎src/components/DashboardVuexStore.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ i
107107
background black
108108
109109
#store-cards
110-
height 100%
110+
height 80%
111111
border-radius 0
112112
background #737578
113113

‎src/components/HomeSideDropDown.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ Description:
66
<template>
77
<div class="q-pa-md" style="max-width: 350px">
88
<q-list padding bordered class="rounded-borders drawer-menu">
9-
<q-expansion-item dense dense-toggle expand-separator label="Components">
10-
<q-card>
11-
<div class="input-container" style="height: 130px">
12-
<ComponentList />
13-
</div>
14-
</q-card>
9+
<q-expansion-item dense dense-toggle expand-separator label="Edit/Delete Components">
10+
<q-card>
11+
<div class="input-container" style='height: 130px'>
12+
<ComponentList />
13+
</div>
14+
</q-card>
1515
</q-expansion-item>
1616
<q-expansion-item dense dense-toggle expand-separator label="Routes">
1717
<q-card>

‎src/components/HomeSideDropDownItems/ComponentList.vue

Lines changed: 64 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,25 @@ Description:
66

77
<template>
88
<div class="home-sidebar">
9+
<q-input
10+
@keyup.enter.native="editCompName(newName)"
11+
standout="bg-secondary text-white"
12+
bottom-slots
13+
v-on:keyup.delete.stop
14+
v-model="newName"
15+
label="Edit name"
16+
dense
17+
class="input-add"
18+
/>
19+
<!-- <template v-slot:append>
20+
<q-btn
21+
round
22+
dense
23+
flat
24+
icon="fas fa-edit"
25+
@click="editCompName(newName)"
26+
/>
27+
</template> -->
928
<multiselect
1029
class='multiselect'
1130
v-model="value"
@@ -20,24 +39,9 @@ Description:
2039
<span slot='noResult'>No components found.</span>
2140
</multiselect>
2241
<br/>
23-
<a
24-
v-for="componentData in activeRouteDisplay"
25-
:key="componentData.componentName"
26-
v-on:click="onActivated(componentData)"
27-
>
28-
<q-list class="list-item" dense bordered separator>
29-
<q-item clickable v-ripple class="list-item">
30-
<q-item-section>
31-
<div class="component-container">
32-
<div class="component-info">
33-
{{componentData.componentName}}
34-
</div>
35-
<q-btn round flat icon="highlight_off" v-on:click.stop="handleClick(componentData)" />
36-
</div>
37-
</q-item-section>
38-
</q-item>
39-
</q-list>
40-
</a>
42+
<h v-if="this.activeComponentObj"> Currently selected component: {{ activeComponentObj.componentName }} </h>
43+
<h v-else> Select a component </h>
44+
<q-btn id="deleteButton" @click="deleteSelectedComp(activeComponentData)" label = 'Delete currently selected'/>
4145
</div>
4246
</template>
4347

@@ -48,21 +52,23 @@ import Multiselect from 'vue-multiselect'
4852
export default {
4953
data () {
5054
return {
51-
value: ''
55+
value: '',
56+
newName: ''
5257
}
5358
},
5459
components: { Multiselect },
5560
computed: {
56-
...mapState(['routes', 'activeRoute', 'activeComponent']),
61+
...mapState(['routes', 'activeRoute', 'activeComponent', 'activeComponentObj']),
5762
activeRouteDisplay () {
5863
let component = this.routes[this.activeRoute]
5964
// console.log('component', component)
6065
return component
6166
},
62-
activeComponentData () {
63-
return this.activeRouteDisplay.filter(componentData => {
64-
return componentData.componentName === this.activeComponent
65-
})[0]
67+
activeComponentData() {
68+
return this.activeComponentObj
69+
// set(name){
70+
// this.editComponentName(name)
71+
// }
6672
},
6773
options () {
6874
const val = this.activeRouteDisplay.map(component => component.componentName)
@@ -74,17 +80,24 @@ export default {
7480
...mapActions([
7581
'setActiveComponent',
7682
'deleteComponent',
77-
'deleteActiveComponent'
83+
'deleteActiveComponent',
84+
'editComponentName'
7885
]),
7986
// Set component as active component from left side dropdown
80-
onActivated (componentData) {
81-
this.setActiveComponent(componentData.componentName)
82-
this.activeComponentData.isActive = true
83-
},
87+
// onActivated (componentData) {
88+
// this.setActiveComponent(componentData.componentName)
89+
// this.activeComponentData.isActive = true
90+
// },
91+
//
92+
// deleteCircumvent (e) {
93+
// e.preventDefault()
94+
// },
8495
// Deletes the selected component
85-
handleClick (componentData) {
86-
this.setActiveComponent(componentData.componentName)
87-
this.deleteActiveComponent(componentData.componentName)
96+
deleteSelectedComp (componentData) {
97+
if (componentData) {
98+
// this.setActiveComponent(componentData.componentName)
99+
this.deleteActiveComponent(componentData.componentName)
100+
}
88101
},
89102
// Select active component from multi-select input
90103
handleSelect (componentName) {
@@ -97,6 +110,17 @@ export default {
97110
if (this.activeComponent !== '') {
98111
this.setActiveComponent('')
99112
}
113+
},
114+
editCompName(name){
115+
if (name) this.editComponentName(name)
116+
console.log(this.routes[this.activeRoute])
117+
console.log(this.activeComponentObj)
118+
console.log(this.activeComponent)
119+
}
120+
},
121+
watch: {
122+
activeComponentObj: function () {
123+
if (this.activeComponentObj) this.newName = this.activeComponentObj.componentName
100124
}
101125
}
102126
}
@@ -126,7 +150,13 @@ export default {
126150
display: flex;
127151
justify-content: space-between;
128152
}
129-
</style>
130-
131153
154+
h {
155+
color: white;
156+
}
132157
158+
#deleteButton {
159+
background-color: #289ead;
160+
color: white;
161+
}
162+
</style>

0 commit comments

Comments
 (0)