Skip to content

Commit fb994ce

Browse files
Schillaci767Schillaci767
committed
comitting optimized vuex feature
2 parents 179802c + f806edb commit fb994ce

File tree

11 files changed

+216
-114
lines changed

11 files changed

+216
-114
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ yarn-debug.log*
1313
yarn-error.log*
1414
/coverage
1515
package-lock.json
16+
vetur.config.js
1617

1718
# Editor directories and files
1819
.idea

‎src/components/ComponentDetails.vue

Lines changed: 12 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -16,28 +16,28 @@
1616
<q-tab-panels v-model="tab" animated class="html-bg text-white">
1717
<q-tab-panel name="state">
1818
<ul id="stateList">
19-
<li v-for="comp in activeState" :key="comp">
19+
<li v-for="comp in compObj.state" :key="comp">
2020
{{ comp }}
2121
</li>
2222
</ul>
2323
</q-tab-panel>
2424
<q-tab-panel name="actions">
2525
<ul id="actionList">
26-
<li v-for="comp in activeActions" :key="comp">
26+
<li v-for="comp in compObj.actions" :key="comp">
2727
{{ comp }}
2828
</li>
2929
</ul>
3030
</q-tab-panel>
3131
<q-tab-panel name="props">
3232
<ul id="propsList">
33-
<li v-for="comp in activeProps" :key="comp">
33+
<li v-for="comp in compObj.props" :key="comp">
3434
{{ comp }}
3535
</li>
3636
</ul>
3737
</q-tab-panel>
3838
</q-tab-panels>
3939
</q-card>
40-
<q-card v-else>Select a component to show details</q-card>
40+
<q-card id="blank-card" v-else>Select a component to show details</q-card>
4141
</div>
4242
</template>
4343

@@ -48,44 +48,11 @@ export default {
4848
name: 'ComponentDetails',
4949
computed: {
5050
...mapState(['activeComponentObj']),
51-
// component: {
52-
// get(){
53-
// return this.activeComponentObj
54-
// }
55-
// },
56-
activeState: {
51+
compObj: {
5752
get () {
58-
if (this.activeComponentObj) return this.activeComponentObj.state
59-
return []
60-
}
61-
},
62-
activeProps: {
63-
get () {
64-
if (this.activeComponentObj) return this.activeComponentObj.props
65-
return []
66-
}
67-
},
68-
activeActions: {
69-
get () {
70-
if (this.activeComponentObj) return this.activeComponentObj.actions
71-
return []
53+
return this.activeComponentObj
7254
}
7355
}
74-
// componentActions: {
75-
// get() {
76-
// return this.$store.state.activeComponentObj.actions;
77-
// },
78-
// },
79-
// componentState: {
80-
// get() {
81-
// return this.$store.state.activeComponentObj.state;
82-
// },
83-
// },
84-
// componentProps: {
85-
// get() {
86-
// return this.$store.state.activeComponentObj.props;
87-
// },
88-
// },
8956
},
9057
data () {
9158
return {
@@ -148,10 +115,15 @@ i
148115
background black
149116
150117
#store-cards
151-
height 100%
118+
height 80%
152119
border-radius 0
153120
background #737578
154121
122+
#blank-card
123+
height 80%
124+
border-radius 0
125+
background-color #202122
126+
155127
.html-bg
156128
// give html background color of grey
157129
background-color #202122

‎src/components/ComponentDisplay.vue

Lines changed: 66 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,17 @@ Description:
55
-->
66

77
<template>
8-
<div class="component-display grid-bg" :style="mockBg" v-on:click ="handleClick">
8+
<div
9+
class="component-display grid-bg"
10+
:style="mockBg"
11+
v-on:click="handleClick"
12+
>
913
<VueDraggableResizable
1014
class-name="component-box"
1115
v-for="componentData in activeRouteArray"
12-
ref ="boxes"
16+
ref="boxes"
1317
:key="componentData.componentName"
14-
:id ="componentData.componentName"
18+
:id="componentData.componentName"
1519
:x="componentData.x"
1620
:y="componentData.y"
1721
:z="componentData.z"
@@ -29,19 +33,43 @@ Description:
2933
<div class="component-title">
3034
<p>{{ componentData.componentName }}</p>
3135
</div>
36+
<p> Elements in Component: </p>
37+
<p
38+
v-for="htmlElement in componentMap[componentData.componentName]
39+
.htmlList"
40+
:key="htmlElement"
41+
>
42+
{{ htmlElement.text }}
43+
</p>
3244
<q-menu context-menu>
33-
<q-list color='black' class="menu">
45+
<q-list color="black" class="menu">
3446
<q-item clickable v-ripple v-close-popup @click="handleAddChild">
35-
<q-item-section style="color: white">Update Children</q-item-section>
47+
<q-item-section style="color: white"
48+
>Update Children</q-item-section
49+
>
3650
<q-item-section avatar>
3751
<q-icon color="primary" name="add" />
3852
</q-item-section>
3953
</q-item>
4054
<q-item clickable v-ripple v-close-popup>
41-
<q-item-section class='layer' style="color: pink">Layer</q-item-section>
42-
<q-btn class='btn' color='transparent' text-color='primary' label='-' @click='(e)=>handleLayer(e)'/>
43-
<p id='counter' style="color: white"> {{componentData.z}} </p>
44-
<q-btn class='btn' color='transparent' text-color='primary' label='+' @click='(e)=>handleLayer(e)'/>
55+
<q-item-section class="layer" style="color: white"
56+
>Layer</q-item-section
57+
>
58+
<q-btn
59+
class="btn"
60+
color="transparent"
61+
text-color="primary"
62+
label="-"
63+
@click="e => handleLayer(e)"
64+
/>
65+
<p id="counter" style="color: white">{{ componentData.z }}</p>
66+
<q-btn
67+
class="btn"
68+
color="transparent"
69+
text-color="primary"
70+
label="+"
71+
@click="e => handleLayer(e)"
72+
/>
4573
</q-item>
4674
</q-list>
4775
</q-menu>
@@ -142,7 +170,12 @@ export default {
142170
// console.log('Lineage', lineage);
143171
}
144172
const routes = Object.keys(this.routes)
145-
const exceptions = new Set(['App', ...lineage, ...routes, ...this.testModel])
173+
const exceptions = new Set([
174+
'App',
175+
...lineage,
176+
...routes,
177+
...this.testModel
178+
])
146179
return Object.keys(this.componentMap).filter(component => {
147180
if (!exceptions.has(component)) return component
148181
})
@@ -158,7 +191,9 @@ export default {
158191
mockBg () {
159192
return this.imagePath[this.activeRoute]
160193
? {
161-
background: `url("${this.userImage}") center/contain no-repeat rgba(223, 218, 218, 0.886)`
194+
background: `url("${
195+
this.userImage
196+
}") center/contain no-repeat rgba(223, 218, 218, 0.886)`
162197
}
163198
: {}
164199
}
@@ -167,16 +202,19 @@ export default {
167202
// if there are no active component, all boxes are unhighlighted
168203
if (this.activeComponent === '') {
169204
if (this.$refs.boxes) {
170-
this.$refs.boxes.forEach((element) => {
205+
this.$refs.boxes.forEach(element => {
171206
element.enabled = false
172207
element.$emit('deactivated')
173208
element.$emit('update:active', false)
174209
})
175210
}
176211
} else {
177212
// if a component is set to active, highlight it
178-
this.$refs.boxes.forEach((element) => {
179-
if (this.activeComponent === element.$attrs.id && element.enabled === false) {
213+
this.$refs.boxes.forEach(element => {
214+
if (
215+
this.activeComponent === element.$attrs.id &&
216+
element.enabled === false
217+
) {
180218
element.enabled = true
181219
element.$emit('activated')
182220
element.$emit('update:active', true)
@@ -228,8 +266,12 @@ export default {
228266
routeArray: this.routes[this.activeRoute],
229267
activeComponentData: this.activeComponentData
230268
}
231-
if (payload.x !== this.initialPosition.x || payload.y !== this.initialPosition.y ||
232-
payload.w !== this.initialSize.w || payload.h !== this.initialSize.h) {
269+
if (
270+
payload.x !== this.initialPosition.x ||
271+
payload.y !== this.initialPosition.y ||
272+
payload.w !== this.initialSize.w ||
273+
payload.h !== this.initialSize.h
274+
) {
233275
this.updateComponentSize(payload)
234276
}
235277
},
@@ -245,7 +287,10 @@ export default {
245287
}
246288
// console.log("Payload.x = ", payload.x, "this.initialPosition.x", this.initialPosition.x)
247289
// console.log("Payload.y = ", payload.y, "this.initialPosition.y", this.initialPosition.y)
248-
if (payload.x !== this.initialPosition.x || payload.y !== this.initialPosition.y) {
290+
if (
291+
payload.x !== this.initialPosition.x ||
292+
payload.y !== this.initialPosition.y
293+
) {
249294
this.updateComponentPosition(payload)
250295
}
251296
},
@@ -281,7 +326,7 @@ export default {
281326
282327
// unhighlights all inactive components
283328
onActivated (componentData) {
284-
this.$refs.boxes.forEach((element) => {
329+
this.$refs.boxes.forEach(element => {
285330
if (element.$attrs.id !== componentData.componentName) {
286331
element.enabled = false
287332
element.$emit('deactivated')
@@ -408,12 +453,13 @@ export default {
408453
height: 10px;
409454
transition: none;
410455
}
411-
.btn:hover, .btn:focus, .btn:active {
456+
.btn:hover,
457+
.btn:focus,
458+
.btn:active {
412459
color: white;
413460
background-color: transparent;
414461
}
415462
#counter {
416463
margin-top: 20px;
417464
}
418-
419465
</style>

‎src/components/CreateComponent.vue

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@ Description:
77
<template>
88
<div class="home-sidebar drawer-menu">
99
<br />
10-
<form v-on:submit.prevent="createComponent" v-on:click="resetActiveComponent">
10+
<form
11+
v-on:submit.prevent="createComponent"
12+
v-on:click="resetActiveComponent"
13+
>
1114
<q-input
1215
standout="bg-secondary text-white"
1316
bottom-slots
@@ -51,7 +54,12 @@ export default {
5154
ParentMultiselect
5255
},
5356
computed: {
54-
...mapState(['componentMap', 'selectedElementList', 'activeComponent', 'activeHTML']),
57+
...mapState([
58+
'componentMap',
59+
'selectedElementList',
60+
'activeComponent',
61+
'activeHTML'
62+
]),
5563
componentNameInputValue: {
5664
get () {
5765
return this.$store.state.componentNameInputValue
@@ -77,8 +85,12 @@ export default {
7785
event.preventDefault()
7886
return false
7987
}
88+
// boilerplate properties for each component upon creation
8089
const component = {
81-
componentName: this.componentNameInputValue.replace(/[^a-z0-9-_.]/gi, ''),
90+
componentName: this.componentNameInputValue.replace(
91+
/[^a-z0-9-_.]/gi,
92+
''
93+
),
8294
x: 0,
8395
y: 20,
8496
z: 0,

‎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/Footer.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export default {
9494
this.height === 40 ? (this.height = minHeight) : (this.height = 40)
9595
this.open === true ? (this.open = false) : (this.open = true)
9696
},
97-
// method that will handle deselection from active HTML element
97+
// function that will handle deselection from active HTML element
9898
handleHtmlDeselection (event) {
9999
// console.log('target html element: ', event.target)
100100
if (event.target.className !== 'list-group-item') {

‎src/components/HomeQueue.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export default {
8181
})
8282
return newTitle
8383
}
84-
84+
8585
},
8686
methods: {
8787
...mapActions(['setActiveHTML', 'setActiveLayer', 'upOneLayer']),

0 commit comments

Comments
 (0)