Skip to content

Commit b414a91

Browse files
codeByCandlelightcodeByCandlelight
committed
Merge branch 'ziggrace-sean/vuex' into dev2021
2 parents d65ceca + 5ce3272 commit b414a91

File tree

11 files changed

+306
-246
lines changed

11 files changed

+306
-246
lines changed

‎src/components/ComponentDetails.vue

Lines changed: 40 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -9,85 +9,71 @@
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>
45-
import { mapState } from "vuex";
53+
import { mapState } from 'vuex'
54+
import HomeQueue from './HomeQueue'
55+
import CodeSnippet from './CodeSnippet'
4656
4757
export default {
48-
name: "ComponentDetails",
58+
name: 'ComponentDetails',
59+
components: {
60+
HomeQueue,
61+
CodeSnippet
62+
},
4963
computed: {
50-
...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: {
64-
get() {
65-
if (this.activeComponentObj) return this.activeComponentObj.actions;
66-
return [];
67-
},
68-
},
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-
// },
64+
...mapState(['activeComponentObj']),
65+
compObj: {
66+
get () {
67+
return this.activeComponentObj
68+
}
69+
}
8470
},
85-
data() {
71+
data () {
8672
return {
87-
tab: "state",
88-
};
89-
},
90-
};
73+
tab: 'code'
74+
}
75+
}
76+
}
9177
</script>
9278

9379
<style lang="stylus" scoped>
@@ -143,20 +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-
156-
let active = (state.routes[state.activeRoute].filter(comp => {
157-
return comp.componentName === state.activeComponent
158-
})[0])
159-
160-
active.props
161-
active.state
162-
active.actions

‎src/components/ComponentDisplay.vue

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,8 @@ export default {
131131
'activeComponent',
132132
'componentMap',
133133
'componentChildrenMultiselectValue',
134-
'imagePath'
134+
'imagePath',
135+
'activeComponentObj'
135136
]),
136137
137138
// used in VueDraggableResizeable component
@@ -377,6 +378,14 @@ export default {
377378
if (!(this.activeComponent === '')) this.setActiveComponent('')
378379
}
379380
}
381+
},
382+
watch: {
383+
activeComponentObj: {
384+
handler () {
385+
// console.log('componentMap has changed')
386+
this.value = ''
387+
}
388+
}
380389
}
381390
}
382391
</script>
@@ -462,4 +471,4 @@ export default {
462471
#counter {
463472
margin-top: 20px;
464473
}
465-
</style>
474+
</style>

‎src/components/DashboardVuexStore.vue

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -33,25 +33,25 @@
3333
</template>
3434

3535
<script>
36-
import { mapState } from "vuex";
36+
import { mapState } from 'vuex'
3737
3838
export default {
39-
name: "VuexStore",
39+
name: 'VuexStore',
4040
computed: {
41-
...mapState(["userActions", "userState"]),
42-
actionOptions() {
43-
return this.userActions;
44-
},
45-
stateOptions() {
46-
return this.userState;
41+
...mapState(['userActions', 'userState']),
42+
actionOptions () {
43+
return this.userActions
4744
},
45+
stateOptions () {
46+
return this.userState
47+
}
4848
},
49-
data() {
49+
data () {
5050
return {
51-
tab: "state",
52-
};
53-
},
54-
};
51+
tab: 'state'
52+
}
53+
}
54+
}
5555
</script>
5656

5757
<style lang="stylus" scoped>
@@ -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/Footer.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/HomeSideDropDown.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ Description:
77
<template>
88
<div class="q-pa-md" style="max-width: 350px">
99
<q-list padding bordered class="rounded-borders drawer-menu">
10-
<q-expansion-item dense dense-toggle expand-separator label="Components">
10+
<q-expansion-item dense dense-toggle expand-separator label="Edit/Delete Components">
1111
<q-card>
1212
<div class="input-container" style='height: 130px'>
1313
<ComponentList />

0 commit comments

Comments
 (0)