Skip to content

Commit 726fe42

Browse files
aleckslualeckslu
committed
fixed issue with component html badge numbers not displaying correctly - inside Icons.vue
1 parent db47517 commit 726fe42

File tree

1 file changed

+185
-170
lines changed

1 file changed

+185
-170
lines changed

‎src/components/home_sidebar_items/Icons.vue‎

Lines changed: 185 additions & 170 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import { breadthFirstSearch } from '../../utils/search.util'
2727
export default {
2828
data () {
2929
return {
30-
elementStorage: {}
30+
// elementStore: {}
3131
}
3232
},
3333
name: 'Icons',
@@ -40,22 +40,36 @@ export default {
4040
'activeHTML',
4141
'activeLayer'
4242
]),
43-
// elementStorage: function () {
44-
// console.log('computed: elementStorage')
45-
// if (this.activeComponent) {
46-
// return {
47-
48-
// }
49-
// }
50-
// return {
51-
52-
// }
53-
// }
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+
}
5468
},
5569
methods: {
5670
// Logic to decide where to place selected html element
5771
changeState (elementName) {
58-
// console.log('this.elementStorage: ', this.elementStorage)
72+
console.log('changeState inside Icons.vue: ', this.elementStorage)
5973
// if no active component & creating a new component: add html to selectedElement list
6074
if (this.activeComponent === '') {
6175
this.$emit('getClickedIcon', { elementName, date: Date.now() })
@@ -74,166 +88,167 @@ export default {
7488
}
7589
},
7690
watch: {
77-
// watch for changes to selectedElementList when creating a component
78-
selectedElementList: function () {
79-
console.log('watching selectedElementList');
80-
if (this.activeComponent === '') {
81-
this.elementStorage = {}
82-
this.selectedElementList.forEach(el => {
83-
// if user adds an element and the element is not inside of component, give it a value of 1
84-
if (!this.elementStorage[el.text]) {
85-
this.elementStorage[el.text] = 1
86-
} else {
87-
// otherwise increment count by 1
88-
this.elementStorage[el.text] += 1
89-
}
90-
})
91-
}
92-
// console.log('storage is ', this.elementStorage)
93-
},
94-
// watch for changes to activeLayer when creating a component
95-
activeLayer: {
96-
deep: true,
97-
handler () {
98-
console.log('watch: activeLayer');
99-
if (this.activeComponent) {
100-
this.elementStorage = {}
101-
if (this.activeLayer.id !== '' && this.activeHTML === '') {
102-
let activeLayerObj = breadthFirstSearch(
103-
this.componentMap[this.activeComponent].htmlList,
104-
this.activeLayer.id
105-
)
106-
activeLayerObj.children.forEach(el => {
107-
if (!this.elementStorage[el.text]) {
108-
this.elementStorage[el.text] = 1
109-
} else {
110-
this.elementStorage[el.text] += 1
111-
}
112-
})
113-
}
114-
}
115-
}
116-
},
117-
// if componentMap is updated (i.e. element is added to component's htmlList), elementStorage will update its cache of elements & frequency
118-
componentMap: {
119-
deep: true,
120-
// handler logic for where to increment html element count in element storage
121-
handler () {
122-
console.log('watch: componentMap');
123-
// console.log('watching componentMap');
124-
// console.log('activecomponent is ', this.activeComponent)
125-
// console.log('htmlList', this.componentMap[this.activeComponent].htmlList)
126-
if (this.activeComponent) {
127-
this.elementStorage = {}
128-
if (this.activeLayer.id !== '' && this.activeHTML === '') {
129-
let activeLayerObj = breadthFirstSearch(
130-
this.componentMap[this.activeComponent].htmlList,
131-
this.activeLayer.id
132-
)
133-
activeLayerObj.children.forEach(el => {
134-
if (!this.elementStorage[el.text]) {
135-
this.elementStorage[el.text] = 1
136-
} else {
137-
this.elementStorage[el.text] += 1
138-
}
139-
})
140-
} else if (this.activeHTML !== '') {
141-
let activeHtmlObj = breadthFirstSearch(
142-
this.componentMap[this.activeComponent].htmlList,
143-
this.activeHTML
144-
)
145-
activeHtmlObj.children.forEach(el => {
146-
if (!this.elementStorage[el.text]) {
147-
this.elementStorage[el.text] = 1
148-
} else {
149-
this.elementStorage[el.text] += 1
150-
}
151-
})
152-
} else {
153-
this.componentMap[this.activeComponent].htmlList.forEach(el => {
154-
if (!this.elementStorage[el.text]) {
155-
this.elementStorage[el.text] = 1
156-
} else {
157-
this.elementStorage[el.text] += 1
158-
}
159-
})
160-
}
161-
// console.log('elementStorage is ', this.elementStorage);
162-
}
163-
}
164-
},
165-
// watch for changes to the activeHTML to decide where to place our html element
166-
activeHTML: function () {
167-
this.elementStorage = {}
168-
console.log('watch: activeHTML');
169-
if (this.activeHTML !== '') {
170-
let activeHtmlObj = breadthFirstSearch(
171-
this.componentMap[this.activeComponent].htmlList,
172-
this.activeHTML
173-
)
174-
activeHtmlObj.children.forEach(el => {
175-
if (!this.elementStorage[el.text]) {
176-
this.elementStorage[el.text] = 1
177-
} else {
178-
this.elementStorage[el.text] += 1
179-
}
180-
})
181-
} else {
182-
if (this.activeLayer.id !== '' && this.activeHTML === '') {
183-
let activeLayerObj = breadthFirstSearch(
184-
this.componentMap[this.activeComponent].htmlList,
185-
this.activeLayer.id
186-
)
187-
activeLayerObj.children.forEach(el => {
188-
if (!this.elementStorage[el.text]) {
189-
this.elementStorage[el.text] = 1
190-
} else {
191-
this.elementStorage[el.text] += 1
192-
}
193-
})
194-
} else {
195-
this.componentMap[this.activeComponent].htmlList.forEach(el => {
196-
if (!this.elementStorage[el.text]) {
197-
this.elementStorage[el.text] = 1
198-
} else {
199-
this.elementStorage[el.text] += 1
200-
}
201-
})
202-
}
203-
}
204-
},
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+
// },
205219
// if activeComponent is updated, elementStorage will update its cache of elements & frequency to reflect new active component
206-
activeComponent: {
207-
// deep: true,
208-
handler () {
209-
// console.log('watching activeComponent', this.activeComponent);
210-
console.log('watch: activeComponent');
211-
if (this.activeComponent) {
212-
this.elementStorage = {}
213-
this.componentMap[this.activeComponent].htmlList.forEach(el => {
214-
if (!this.elementStorage[el.text]) {
215-
this.elementStorage[el.text] = 1
216-
} else {
217-
this.elementStorage[el.text] += 1
218-
}
219-
})
220-
// console.log('elementStorage is ', this.elementStorage);
221-
} else if (this.activeComponent === '') {
222-
// console.log(`watching activeComponent, current active is ''`)
223-
// if component was switched from existing component to '', reset cache and update items
224-
if (this.elementStorage !== {}) this.elementStorage = {}
225-
this.selectedElementList.forEach(el => {
226-
if (!this.elementStorage[el.text]) {
227-
this.elementStorage[el.text] = 1
228-
} else {
229-
this.elementStorage[el.text] += 1
230-
}
231-
})
232-
}
233-
}
234-
}
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+
// }
235249
}
236250
}
251+
237252
</script>
238253

239254
<style scoped>

0 commit comments

Comments
 (0)