Skip to content

Commit 2aa44bf

Browse files
lamerson28lamerson28
committed
ComponentTab fully working/rendering
1 parent 4f25baa commit 2aa44bf

File tree

9 files changed

+306
-8
lines changed

9 files changed

+306
-8
lines changed

‎src/components/home_sidebar_items/ComponentTab/CreateComponent.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ Description:
3434
@activeLayer="addNestedNoActive"
3535
/> -->
3636
</div>
37-
<ParentMultiselect v-if="activeComponent === ''"></ParentMultiselect>
37+
<!-- <ParentMultiselect v-if="activeComponent === ''"></ParentMultiselect> -->
3838
<br />
3939

4040
<q-btn
@@ -51,15 +51,15 @@ Description:
5151

5252
<script>
5353
// import Icons from '../Icons'
54-
import ParentMultiselect from '../ParentMultiselect.vue'
54+
// import ParentMultiselect from '../ParentMultiselect.vue'
5555
import { mapState, mapActions } from 'vuex'
5656
5757
5858
export default {
5959
name: 'HomeSidebar',
6060
components: {
6161
// Icons,
62-
ParentMultiselect
62+
// ParentMultiselect
6363
},
6464
computed: {
6565
...mapState([

‎src/components/home_sidebar_items/Icons.vue

Lines changed: 298 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,298 @@
1+
<!--
2+
Description:
3+
Displays all html elements icons that can be added to component in createComponent
4+
Functionality includes: Adding (nesting) html elements to components
5+
-->
6+
7+
<template>
8+
<section class="icon-grid">
9+
<button
10+
@click.prevent="changeState(elementName)"
11+
v-for="([elementName, iconString], idx) in Object.entries(icons)"
12+
:key="idx + Date.now()"
13+
>
14+
<span class="badge"> {{ elementStorage[elementName] }}</span>
15+
<br />
16+
<i :class="iconString"></i>
17+
<br />
18+
<span class="white--text">{{ elementName }}</span>
19+
</button>
20+
</section>
21+
</template>
22+
23+
<script>
24+
import { mapState } from 'vuex'
25+
// import { breadthFirstSearch } from '../../utils/search.util'
26+
27+
export default {
28+
data () {
29+
return {
30+
// elementStorage: {}
31+
}
32+
},
33+
name: 'Icons',
34+
computed: {
35+
...mapState([
36+
'icons',
37+
'activeComponent',
38+
'componentMap',
39+
'selectedElementList',
40+
'activeHTML',
41+
'activeLayer'
42+
]),
43+
elementStorage: function () {
44+
// console.log('computed: elementStorage')
45+
let computedElementalStorage = {}
46+
if (this.activeComponent) {
47+
this.componentMap[this.activeComponent].htmlList.forEach(el => {
48+
if (!computedElementalStorage[el.text]) {
49+
computedElementalStorage[el.text] = 1
50+
} else {
51+
computedElementalStorage[el.text] += 1
52+
}
53+
})
54+
} else if (this.activeComponent === '') {
55+
// console.log(`watching activeComponent, current active is ''`)
56+
// if component was switched from existing component to '', reset cache and update items
57+
if (computedElementalStorage !== {}) computedElementalStorage = {}
58+
this.selectedElementList.forEach(el => {
59+
if (!computedElementalStorage[el.text]) {
60+
computedElementalStorage[el.text] = 1
61+
} else {
62+
computedElementalStorage[el.text] += 1
63+
}
64+
})
65+
}
66+
return computedElementalStorage
67+
}
68+
},
69+
methods: {
70+
// Logic to decide where to place selected html element
71+
changeState (elementName) {
72+
// console.log('changeState inside Icons.vue: ', this.elementStorage)
73+
// if no active component & creating a new component: add html to selectedElement list
74+
if (this.activeComponent === '') {
75+
this.$emit('getClickedIcon', { elementName, date: Date.now() })
76+
} else {
77+
if (this.activeHTML === '' && this.activeLayer.id === '') {
78+
// if active component & no active html: add html to component's htmlList no nesting
79+
this.$emit('activeElement', { elementName, date: Date.now() })
80+
} else if (this.activeLayer.id !== '' && this.activeHTML === '') {
81+
// if active component & in a different layer: add html to current layers htmlList
82+
this.$emit('activeLayer', { elementName, date: Date.now() })
83+
} else {
84+
// if active component, active layer is not selected, but have active html: add html to active html's htmlList
85+
this.$emit('activeHTML', { elementName, date: Date.now() })
86+
}
87+
}
88+
}
89+
},
90+
watch: {
91+
// // watch for changes to selectedElementList when creating a component
92+
// selectedElementList: function () {
93+
// console.log('watching selectedElementList');
94+
// if (this.activeComponent === '') {
95+
// this.elementStorage = {}
96+
// this.selectedElementList.forEach(el => {
97+
// // if user adds an element and the element is not inside of component, give it a value of 1
98+
// if (!this.elementStorage[el.text]) {
99+
// this.elementStorage[el.text] = 1
100+
// } else {
101+
// // otherwise increment count by 1
102+
// this.elementStorage[el.text] += 1
103+
// }
104+
// })
105+
// }
106+
// // console.log('storage is ', this.elementStorage)
107+
// },
108+
// // watch for changes to activeLayer when creating a component
109+
// activeLayer: {
110+
// deep: true,
111+
// handler () {
112+
// console.log('watch: activeLayer');
113+
// if (this.activeComponent) {
114+
// this.elementStorage = {}
115+
// if (this.activeLayer.id !== '' && this.activeHTML === '') {
116+
// let activeLayerObj = breadthFirstSearch(
117+
// this.componentMap[this.activeComponent].htmlList,
118+
// this.activeLayer.id
119+
// )
120+
// activeLayerObj.children.forEach(el => {
121+
// if (!this.elementStorage[el.text]) {
122+
// this.elementStorage[el.text] = 1
123+
// } else {
124+
// this.elementStorage[el.text] += 1
125+
// }
126+
// })
127+
// }
128+
// }
129+
// }
130+
// },
131+
// // if componentMap is updated (i.e. element is added to component's htmlList), elementStorage will update its cache of elements & frequency
132+
// componentMap: {
133+
// deep: true,
134+
// // handler logic for where to increment html element count in element storage
135+
// handler () {
136+
// console.log('watch: componentMap');
137+
// // console.log('watching componentMap');
138+
// // console.log('activecomponent is ', this.activeComponent)
139+
// // console.log('htmlList', this.componentMap[this.activeComponent].htmlList)
140+
// if (this.activeComponent) {
141+
// this.elementStorage = {}
142+
// if (this.activeLayer.id !== '' && this.activeHTML === '') {
143+
// let activeLayerObj = breadthFirstSearch(
144+
// this.componentMap[this.activeComponent].htmlList,
145+
// this.activeLayer.id
146+
// )
147+
// activeLayerObj.children.forEach(el => {
148+
// if (!this.elementStorage[el.text]) {
149+
// this.elementStorage[el.text] = 1
150+
// } else {
151+
// this.elementStorage[el.text] += 1
152+
// }
153+
// })
154+
// } else if (this.activeHTML !== '') {
155+
// let activeHtmlObj = breadthFirstSearch(
156+
// this.componentMap[this.activeComponent].htmlList,
157+
// this.activeHTML
158+
// )
159+
// activeHtmlObj.children.forEach(el => {
160+
// if (!this.elementStorage[el.text]) {
161+
// this.elementStorage[el.text] = 1
162+
// } else {
163+
// this.elementStorage[el.text] += 1
164+
// }
165+
// })
166+
// } else {
167+
// this.componentMap[this.activeComponent].htmlList.forEach(el => {
168+
// if (!this.elementStorage[el.text]) {
169+
// this.elementStorage[el.text] = 1
170+
// } else {
171+
// this.elementStorage[el.text] += 1
172+
// }
173+
// })
174+
// }
175+
// // console.log('elementStorage is ', this.elementStorage);
176+
// }
177+
// }
178+
// },
179+
// // watch for changes to the activeHTML to decide where to place our html element
180+
// activeHTML: function () {
181+
// this.elementStorage = {}
182+
// console.log('watch: activeHTML');
183+
// if (this.activeHTML !== '') {
184+
// let activeHtmlObj = breadthFirstSearch(
185+
// this.componentMap[this.activeComponent].htmlList,
186+
// this.activeHTML
187+
// )
188+
// activeHtmlObj.children.forEach(el => {
189+
// if (!this.elementStorage[el.text]) {
190+
// this.elementStorage[el.text] = 1
191+
// } else {
192+
// this.elementStorage[el.text] += 1
193+
// }
194+
// })
195+
// } else {
196+
// if (this.activeLayer.id !== '' && this.activeHTML === '') {
197+
// let activeLayerObj = breadthFirstSearch(
198+
// this.componentMap[this.activeComponent].htmlList,
199+
// this.activeLayer.id
200+
// )
201+
// activeLayerObj.children.forEach(el => {
202+
// if (!this.elementStorage[el.text]) {
203+
// this.elementStorage[el.text] = 1
204+
// } else {
205+
// this.elementStorage[el.text] += 1
206+
// }
207+
// })
208+
// } else {
209+
// this.componentMap[this.activeComponent].htmlList.forEach(el => {
210+
// if (!this.elementStorage[el.text]) {
211+
// this.elementStorage[el.text] = 1
212+
// } else {
213+
// this.elementStorage[el.text] += 1
214+
// }
215+
// })
216+
// }
217+
// }
218+
// },
219+
// if activeComponent is updated, elementStorage will update its cache of elements & frequency to reflect new active component
220+
// activeComponent: {
221+
// // deep: true,
222+
// handler () {
223+
// // console.log('watching activeComponent', this.activeComponent);
224+
// console.log('watch: activeComponent');
225+
// if (this.activeComponent) {
226+
// this.elementStorage = {}
227+
// this.componentMap[this.activeComponent].htmlList.forEach(el => {
228+
// if (!this.elementStorage[el.text]) {
229+
// this.elementStorage[el.text] = 1
230+
// } else {
231+
// this.elementStorage[el.text] += 1
232+
// }
233+
// })
234+
// // console.log('elementStorage is ', this.elementStorage);
235+
// } else if (this.activeComponent === '') {
236+
// // console.log(`watching activeComponent, current active is ''`)
237+
// // if component was switched from existing component to '', reset cache and update items
238+
// if (this.elementStorage !== {}) this.elementStorage = {}
239+
// this.selectedElementList.forEach(el => {
240+
// if (!this.elementStorage[el.text]) {
241+
// this.elementStorage[el.text] = 1
242+
// } else {
243+
// this.elementStorage[el.text] += 1
244+
// }
245+
// })
246+
// }
247+
// }
248+
// }
249+
}
250+
}
251+
252+
</script>
253+
254+
<style scoped>
255+
.icon-grid {
256+
display: grid;
257+
grid-template-columns: 33% 33% 33%;
258+
grid-row-gap: 1em;
259+
padding-top: 10px;
260+
}
261+
262+
@media (max-width: 680px) {
263+
.icon-grid {
264+
display: grid;
265+
grid-template-columns: 50% 50%;
266+
grid-row-gap: 1em;
267+
width: 100%;
268+
}
269+
}
270+
button {
271+
background: none;
272+
color: white;
273+
border: none;
274+
}
275+
button:hover {
276+
cursor: pointer;
277+
color: #00ffff;
278+
}
279+
button:focus {
280+
outline: none;
281+
color: #00ffff;
282+
}
283+
button:active {
284+
box-shadow: 0 5px inherit;
285+
transform: translateY(4px);
286+
}
287+
.badge {
288+
width: 15px;
289+
line-height: 15px;
290+
text-align: center;
291+
font-size: 10px;
292+
font-weight: bold;
293+
float: right;
294+
border-radius: 50%;
295+
background-color: #228585;
296+
color: white;
297+
}
298+
</style>

‎src/components/home_sidebar_items/ParentMultiselect.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ Description:
77
<template>
88
<div id="parent-select">
99
<br />
10-
<multiselect
10+
<!-- <multiselect
1111
v-model="value"
1212
placeholder="Parent Component"
1313
:multiple="false"
@@ -18,19 +18,19 @@ Description:
1818
:max-height="90"
1919
:option-height="20"
2020
:searchable="true"
21-
>
21+
> -->
2222
<!-- refactor slot syntax here -->
2323
<!-- <span slot='noResult'>No components found.</span> -->
2424
<span class='noResult'>
2525
<slot></slot>
2626
</span>
27-
</multiselect>
27+
<!-- </multiselect> -->
2828
</div>
2929
</template>
3030

3131
<script>
3232
import { mapState, mapActions } from 'vuex'
33-
import Multiselect from 'vue-multiselect'
33+
// import Multiselect from 'vue-multiselect'
3434
3535
export default {
3636
name: 'ParentMultiselect',

‎src/layouts/MyLayout.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ export default {
134134
OpenProjectComponent,
135135
// UploadImage,
136136
SlackLoginWindow,
137-
// ComponentTab,
137+
ComponentTab,
138138
StoreTab,
139139
},
140140
methods: {

‎test/jest/__tests__/.App.spec.js.icloud

159 Bytes
Binary file not shown.

‎test/jest/__tests__/.htmlElements.spec.js.icloud

170 Bytes
Binary file not shown.

‎test/jest/__tests__/.openProject.spec.js.icloud

169 Bytes
Binary file not shown.

‎test/jest/__tests__/.routeTests.spec.js.icloud

168 Bytes
Binary file not shown.

‎test/jest/__tests__/.uploadImage.spec.js.icloud

169 Bytes
Binary file not shown.

0 commit comments

Comments
 (0)