Skip to content

Commit 313396e

Browse files
drewngyendrewngyen
authored
Merge pull request #17 from drewngyen/master
moved componentlist logic into its own component, changed some stylin…
2 parents d041a62 + 088d65a commit 313396e

File tree

5 files changed

+126
-113
lines changed

5 files changed

+126
-113
lines changed

‎src/components/ComponentDisplay.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export default {
9494
/* width: 500px; */
9595
/* original is 70vh */
9696
height: 95vh;
97-
width: 100vw;
97+
width: 100%;
9898
position: relative;
9999
background: darkslategray;
100100
background-color: rgba(124, 126, 145, 0.44);

‎src/components/HomeSideDropDown.vue

Lines changed: 12 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -5,44 +5,17 @@
55
<q-card>
66
<q-card-section>
77
<div class="input-container">
8-
<!--
9-
<q-input
10-
standout="bg-teal text-white"
11-
bottom-slots
12-
v-model="text"
13-
label="Add Component"
14-
:dense="dense"
15-
class="input-add"
16-
>
17-
18-
<template v-slot:append>
19-
<q-btn round dense flat icon="add" />
20-
</template>
21-
</q-input>
22-
-->
23-
<a v-for="componentData in activeRouteDisplay"
24-
:key="componentData.componentName"
25-
v-on:click="onActivated(componentData)"
26-
>
27-
<q-list bordered separator>
28-
<q-item clickable v-ripple>
29-
<q-item-section>{{componentData.componentName}}</q-item-section>
30-
31-
</q-item>
32-
33-
</q-list>
34-
</a>
8+
<ComponentList />
359
</div>
3610
</q-card-section>
3711
</q-card>
3812
</q-expansion-item>
39-
4013
<q-expansion-item dense dense-toggle expand-separator label="Routes">
4114
<q-card>
4215
<q-card-section>
4316
<div class="input-container">
4417
<RouteDisplay />
45-
<br>
18+
<br />
4619
</div>
4720
</q-card-section>
4821
</q-card>
@@ -52,42 +25,7 @@
5225
<q-card>
5326
<q-card-section>
5427
<div class="input-container">
55-
<q-input
56-
standout="bg-teal text-white"
57-
bottom-slots
58-
v-model="text"
59-
label="Add Vuex"
60-
:dense="dense"
61-
class="input-add"
62-
>
63-
<template v-slot:append>
64-
<q-btn round dense flat icon="add" />
65-
</template>
66-
</q-input>
67-
<q-input
68-
standout="bg-teal text-white"
69-
bottom-slots
70-
v-model="text"
71-
label="Add Action"
72-
:dense="dense"
73-
class="input-add"
74-
>
75-
<template v-slot:append>
76-
<q-btn round dense flat icon="add" />
77-
</template>
78-
</q-input>
79-
<q-input
80-
standout="bg-teal text-white"
81-
bottom-slots
82-
v-model="text"
83-
label="Add Mutation"
84-
:dense="dense"
85-
class="input-add"
86-
>
87-
<template v-slot:append>
88-
<q-btn round dense flat icon="add" />
89-
</template>
90-
</q-input>
28+
<VuexForm />
9129
</div>
9230
</q-card-section>
9331
</q-card>
@@ -97,44 +35,23 @@
9735
</template>
9836
<script>
9937
import RouteDisplay from '../components/RouteDisplay'
100-
import { mapState, mapActions } from 'vuex'
38+
import ComponentList from './HomeSideDropDownItems/ComponentList'
39+
import VuexForm from './HomeSideDropDownItems/VuexForm'
10140
10241
export default {
10342
components: {
104-
RouteDisplay
105-
},
106-
computed: {
107-
...mapState(['routes', 'activeRoute', 'activeComponent', 'componentMap']),
108-
// used in VueDraggableResizeable component
109-
activeRouteDisplay () {
110-
// console.log('active route array method', this.routes[this.activeRoute])
111-
let component = this.routes[this.activeRoute]
112-
// console.log('component:', component)
113-
return component
114-
},
115-
activeComponentData () {
116-
// find out what this does
117-
return this.activeRouteDisplay.filter(componentData => {
118-
return componentData.componentName === this.activeComponent
119-
})[0]
120-
}
121-
},
122-
methods: {
123-
...mapActions(['setActiveComponent']),
124-
onActivated (componentData) {
125-
this.setActiveComponent(componentData.componentName)
126-
this.activeComponentData.isActive = true
127-
console.log('this.activeComponent', this.activeComponent)
128-
}
43+
RouteDisplay,
44+
VuexForm,
45+
ComponentList
12946
}
13047
}
13148
</script>
13249

13350
<style lang="stylus" scoped>
13451
.input-add {
135-
margin: 0em 1em 0em 1em;
136-
}
52+
margin: 0em 1em 0em 1em;
53+
}
13754
.input-container {
138-
margin-top: 1rem;
139-
}
55+
margin-top: 1rem;
56+
}
14057
</style>

‎src/components/HomeSideDropDownItems/ComponentList.vue

Lines changed: 63 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,77 @@
11
<template>
2-
<ul id="comp-list" class="component-list">
3-
<h3>hello world</h3>
4-
<li
5-
v-for="item in componentMap"
6-
:key="item.indexOf()"
7-
class="component-container"
8-
>{{ component }} </li>
9-
</ul>
2+
<div class="home-sidebar">
3+
<a
4+
v-for="componentData in activeRouteDisplay"
5+
:key="componentData.componentName"
6+
v-on:click="onActivated(componentData)"
7+
>
8+
<q-list dense bordered separator>
9+
<q-item clickable v-ripple>
10+
<q-item-section>
11+
<div class="component-container">
12+
<div class="component-info">
13+
<q-item-label overline class="component">{{componentData.componentName}}</q-item-label>
14+
<q-item-label>Child Components Here</q-item-label>
15+
<!-- {{componentData.componentName}} -->
16+
</div>
17+
<q-btn round flat icon="delete_forever" />
18+
</div>
19+
</q-item-section>
20+
</q-item>
21+
</q-list>
22+
</a>
23+
</div>
1024
</template>
1125

1226
<script>
13-
import { mapState } from 'vuex'
27+
/**
28+
* TODO: Needs functionality to delete component, and (maybe) show child components
29+
*/
30+
import { mapState, mapActions } from 'vuex'
1431
1532
export default {
16-
el: '#comp-list',
1733
computed: {
18-
...mapState(['componentMap']),
19-
componentMap () {
20-
return Object.keys(this.componentMap)
34+
...mapState(['routes', 'activeRoute', 'activeComponent']),
35+
activeRouteDisplay () {
36+
let component = this.routes[this.activeRoute]
37+
return component
38+
},
39+
activeComponentData () {
40+
return this.activeRouteDisplay.filter(componentData => {
41+
return componentData.componentName === this.activeComponent
42+
})[0]
43+
}
44+
},
45+
methods: {
46+
...mapActions(['setActiveComponent']),
47+
onActivated (componentData) {
48+
this.setActiveComponent(componentData.componentName)
49+
this.activeComponentData.isActive = true
50+
console.log('this.activeComponent', this.activeComponent)
2151
}
2252
}
2353
}
2454
</script>
2555

2656
<style>
57+
/* modifies entire container */
58+
.home-sidebar {
59+
margin: 1rem;
60+
padding-bottom: 1rem;
61+
border-radius: 5px;
62+
}
63+
/* modifies top label */
64+
.component {
65+
text-transform: uppercase;
66+
}
67+
/* modifies each list element */
68+
.q-list {
69+
margin-bottom: 0.5rem;
70+
border-radius: 5px;
71+
}
72+
/* modifies content in list element */
73+
.component-container {
74+
display: flex;
75+
justify-content: space-between;
76+
}
2777
</style>

‎src/components/HomeSideDropDownItems/VuexForm.vue

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<template>
2+
<div class="input-container">
3+
<q-input
4+
standout="bg-teal text-white"
5+
bottom-slots
6+
v-model="text"
7+
label="Add Vuex"
8+
:dense="dense"
9+
class="input-add"
10+
>
11+
<template v-slot:append>
12+
<q-btn round dense flat icon="add" />
13+
</template>
14+
</q-input>
15+
<q-input
16+
standout="bg-teal text-white"
17+
bottom-slots
18+
v-model="text"
19+
label="Add Action"
20+
:dense="dense"
21+
class="input-add"
22+
>
23+
<template v-slot:append>
24+
<q-btn round dense flat icon="add" />
25+
</template>
26+
</q-input>
27+
<q-input
28+
standout="bg-teal text-white"
29+
bottom-slots
30+
v-model="text"
31+
label="Add Mutation"
32+
:dense="dense"
33+
class="input-add"
34+
>
35+
<template v-slot:append>
36+
<q-btn round dense flat icon="add" />
37+
</template>
38+
</q-input>
39+
</div>
40+
</template>
41+
42+
<style lang="stylus" scoped>
43+
.input-add {
44+
margin: 0em 1em 0em 1em;
45+
}
46+
</style>

‎src/layouts/MyLayout.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<q-drawer v-model="left" side="left" behavior="desktop" bordered>
1414
<!-- drawer content -->
1515
<q-list>
16-
<UploadImage />
16+
<!-- <UploadImage /> -->
1717
<HomeSideDropDown />
1818
<CreateComponent />
1919
</q-list>
@@ -30,7 +30,7 @@
3030
import HomeSideDropDown from '../components/HomeSideDropDown'
3131
import Footer from '../components/Footer'
3232
import CreateComponent from '../components/CreateComponent'
33-
import UploadImage from '../components/UploadImage'
33+
// import UploadImage from '../components/UploadImage'
3434
3535
export default {
3636
data () {
@@ -42,8 +42,8 @@ export default {
4242
components: {
4343
HomeSideDropDown,
4444
Footer,
45-
CreateComponent,
46-
UploadImage
45+
CreateComponent
46+
// UploadImage
4747
}
4848
}
4949
</script>

0 commit comments

Comments
 (0)