Skip to content

Commit e0501ac

Browse files
jchan444jchan444
committed
Merge branch 'dev' of https://github.com/oslabs-beta/OverVue into dev
2 parents c4b0dce + 36d2249 commit e0501ac

File tree

6 files changed

+160
-41
lines changed

6 files changed

+160
-41
lines changed

‎src/components/left-sidebar/ComponentTab/Icons.vue

Lines changed: 51 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,28 @@ Description:
66

77
<template>
88
<section class="icon-grid">
9+
<button @click.prevent="changeState(elementName)" v-for="([elementName, iconString], idx) in Object.entries(icons)"
10+
:key="idx + Date.now()">
11+
<span class="badge"> {{ elementStorage[elementName] }}</span>
12+
<br />
13+
<i :class="iconString"></i>
14+
<br />
15+
<span>{{ elementName }}</span>
16+
</button>
17+
918
<button
1019
@click.prevent="changeState(elementName)"
11-
v-for="([elementName, iconString], idx) in Object.entries(icons)"
20+
v-for="(elementName, idx) in childrenComp"
1221
:key="idx + Date.now()"
1322
>
1423
<span class="badge"> {{ elementStorage[elementName] }}</span>
1524
<br />
16-
<i :class="iconString"></i>
25+
<i :class="childIcon"></i>
1726
<br />
1827
<span>{{ elementName }}</span>
1928
</button>
29+
30+
2031
</section>
2132
</template>
2233

@@ -25,7 +36,10 @@ import { mapState } from "vuex";
2536
2637
export default {
2738
data() {
28-
return {};
39+
return {
40+
//to give the child componenets of the active components icons
41+
childIcon: ["fa-solid fa-code"]
42+
};
2943
},
3044
name: "Icons",
3145
computed: {
@@ -41,13 +55,33 @@ export default {
4155
elementStorage: function () {
4256
let computedElementalStorage = {};
4357
if (this.activeComponent) {
58+
4459
this.componentMap[this.activeComponent].htmlList.forEach((el) => {
4560
if (!computedElementalStorage[el.text]) {
4661
computedElementalStorage[el.text] = 1;
47-
} else {
62+
}
63+
else if (computedElementalStorage[el.text]) {
4864
computedElementalStorage[el.text] += 1;
4965
}
5066
});
67+
//show the badge for all nested children arrays
68+
const checkChild = array => {
69+
for (let html of array) {
70+
console.log(html)
71+
if (html.children.length) {
72+
checkChild(html.children)
73+
} else {
74+
if (!computedElementalStorage[html.text]) {
75+
computedElementalStorage[html.text] = 1
76+
} else {
77+
++computedElementalStorage[html.text]
78+
}
79+
}
80+
}
81+
}
82+
//invoke the recursive function
83+
checkChild(this.componentMap[this.activeComponent].htmlList)
84+
5185
} else if (this.activeComponent === "") {
5286
// if component was switched from existing component to '', reset cache and update items
5387
if (computedElementalStorage !== {}) computedElementalStorage = {};
@@ -61,6 +95,14 @@ export default {
6195
}
6296
return computedElementalStorage;
6397
},
98+
childrenComp: function () {
99+
let childrenAvailable = [];
100+
101+
if(this.activeComponent) {
102+
childrenAvailable = this.componentMap[this.activeComponent].children
103+
}
104+
return childrenAvailable;
105+
},
64106
},
65107
methods: {
66108
// Logic to decide where to place selected html element
@@ -104,23 +146,28 @@ export default {
104146
width: 100%;
105147
}
106148
}
149+
107150
button {
108151
background: none;
109152
color: $menutext;
110153
border: none;
111154
}
155+
112156
button:hover {
113157
cursor: pointer;
114158
color: $secondary;
115159
}
160+
116161
button:focus {
117162
outline: none;
118163
color: $secondary;
119164
}
165+
120166
button:active {
121167
box-shadow: 0 5px inherit;
122168
transform: translateY(4px);
123169
}
170+
124171
.badge {
125172
width: 15px;
126173
line-height: 15px;

‎src/components/right-sidebar/CodeSnippet.vue

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -85,9 +85,7 @@ export default {
8585
else return `<template>\n <div>\n${templateTagStr} </div>\n</template>`;
8686
},
8787
// Creates <template> boilerplate
88-
writeTemplateTag(componentName) {
89-
// console.log(this.activeComponentObj)
90-
// create reference object
88+
writeTemplateTag(componentName, activeComponent) {
9189
const htmlElementMap = {
9290
div: ["<div", "</div>"],
9391
button: ["<button", "</button>"],
@@ -110,6 +108,11 @@ export default {
110108
h5: ["<h5", "</h5>"],
111109
h6: ["<h6", "</h6>"],
112110
};
111+
//add childComponents of the activeCompnent to the htmlElementMap
112+
const childComponents = this.componentMap[this.activeComponent].children;
113+
childComponents.forEach(child => {
114+
htmlElementMap[child]=[`<${child}`, ""] //single
115+
})
113116
function writeNested(childrenArray, indent) {
114117
if (!childrenArray.length) {
115118
return "";
@@ -124,15 +127,15 @@ export default {
124127
} else {
125128
nestedString += htmlElementMap[child.text][0];
126129
if (child.class !== "") {
127-
nestedString += " " + "class = " + `"${child.class}"`;
130+
nestedString += " " + "class=" + `"${child.class}"`;
128131
}
129132
if (child.binding !== "") {
130133
if (child.text !== 'img' || child.text !== 'link') {
131-
nestedString += ` v-model = "${child.binding}"`
134+
nestedString += ` v-model="${child.binding}"`
132135
133136
}
134137
}
135-
if (child.text === "img" || child.text === "input" || child.text === "link") {
138+
if (child.text === "img" || child.text === "input" || child.text === "link" || childComponents.includes(child.text)) {
136139
nestedString += "/>";
137140
} else { nestedString += ">"; }
138141
@@ -161,10 +164,15 @@ export default {
161164
outputStr += htmlElementMap[el.text][0]
162165
//if conditional to check class
163166
if (el.class !== "") {
164-
outputStr += " " + "class = " + `"${el.class}"`;
167+
outputStr += " " + "class=" + `"${el.class}"`;
165168
}
169+
166170
if (el.binding !== "") {
167-
outputStr += ` v-model = "${el.binding}"`
171+
outputStr += ` v-model="${el.binding}"`
172+
}
173+
// add an extra slash at the end for child Components and single tags
174+
if(childComponents.includes(el.text) || el.text === "img" || el.text === "input" || el.text === "link"){
175+
outputStr += "/"
168176
}
169177
outputStr += ">";
170178
if (el.children.length) {
@@ -218,30 +226,31 @@ export default {
218226
// if true add data section and populate with props
219227
let data = "";
220228
if (this.componentMap[this.activeComponent].props.length) {
221-
data += " data () {\n return {";
229+
data += " props: {";
222230
this.componentMap[this.activeComponent].props.forEach((prop) => {
223-
data += `\n ${prop}: "PLACEHOLDER FOR VALUE",`;
231+
data += `\n ${prop}: "PLACEHOLDER FOR VALUE",`;
224232
});
225233
data += "\n";
226-
data += " }\n";
234+
//data += " }\n";
227235
data += " },\n";
228236
}
229237
const htmlBinding = this.componentMap[this.activeComponent].htmlList
230238
231-
data += " data () {\n return {\n"
239+
data += " data() {\n return {\n"
232240
htmlBinding.forEach(el => {
233241
if (el.binding !== '') {
234-
data += ` "${el.binding}": "PLACEHOLDER FOR VALUE", `
242+
data += ` "${el.binding}": "PLACEHOLDER FOR VALUE", `
235243
data += '\n'
236244
}
237245
})
238-
data += ` \n } \n `
246+
data += ` }`
247+
data += ` \n }, \n `
239248
240249
241250
// if true add computed section and populate with state
242251
let computed = "";
243252
if (this.componentMap[this.activeComponent].state.length) {
244-
computed += " computed: {";
253+
computed += " computed: {";
245254
computed += "\n ...mapState([";
246255
this.componentMap[this.activeComponent].state.forEach((state) => {
247256
computed += `\n "${state}", `;
@@ -290,7 +299,7 @@ export default {
290299
output += imports + "\nexport default defineComponent ({\n name: '" + componentName + "';";
291300
} else {
292301
output = "\n\n<script>\n";
293-
output += imports + "\nexport default {\n name: '" + componentName + "';";
302+
output += imports + "\nexport default {\n name: '" + componentName + "'";
294303
}
295304
output += ",\n components: {\n";
296305
output += childrenComponentNames + " },\n";

‎src/components/right-sidebar/HTMLQueue.vue

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ Description:
2424
<button class="attributeButton" @click="setActiveElement(element)">
2525
<div class="tooltip"> Edit {{ element[0] }} attributes </div>
2626
</button>
27-
<i v-if='activeComponent === "" || exceptions.includes(element[0])'></i>
27+
<i v-if='activeComponent === "" || exceptions.includes(element[0]) || moreExceptions.includes(element[0])'></i>
2828
<i v-else class="fas fa fa-angle-double-down fa-md"
2929
@click="setLayer({ text: element[0], id: element[2] })"></i>
3030
{{ element[0] }}
@@ -73,15 +73,15 @@ Description:
7373
<q-form autofocus v-on:submit.prevent="submitClass">
7474
<p class="title">Add Class Name:</p>
7575
<q-input label="Add your class here" filled dark autofocus true hide-bottom-space v-model="classText"
76-
@keyup.enter="submitClass"></q-input>
76+
@keydown.enter="submitClass(classText, this.activeHTML)" />
7777
<q-btn id="comp-btn" class="sidebar-btn" color="secondary" label="Submit Attribute"
7878
:disable="classText.length > 0 ? false : true" @click="submitClass(classText, this.activeHTML)" />
7979
</q-form>
8080
<q-form autofocus v-on:submit.prevent="addBinding">
8181
<p class="title">Add Binding:</p>
8282

8383
<q-input label="Add two way binding here" filled dark autofocus true hide-bottom-space v-model="bindingText"
84-
@keyup.enter="addBinding"></q-input>
84+
@keydown.enter="addBinding(bindingText, this.activeHTML)"></q-input>
8585
<q-btn id="comp-btn" class="sidebar-btn" color="secondary" label="Add Binding"
8686
:disable="bindingText.length > 0 ? false : true" @click="addBinding(bindingText, this.activeHTML)">
8787
</q-btn>
@@ -146,15 +146,20 @@ export default {
146146
newTitle += ` > ${el}`
147147
})
148148
return newTitle;
149+
},
150+
moreExceptions: function () {
151+
let childComponent = [];
152+
if(this.activeComponent) {
153+
childComponent = this.componentMap[this.activeComponent].children;
154+
}
155+
return childComponent;
149156
}
150-
151157
},
152158
methods: {
153159
...mapActions(['setActiveHTML', 'setActiveLayer', 'upOneLayer', 'setSelectedIdDrag', 'setIdDrag', 'setSelectedIdDrop', 'setIdDrop', 'dragDropSortHtmlElements', 'dragDropSortSelectedHtmlElements', 'openAttributeModal', 'addActiveComponentClass', 'addBindingText']),
154160
deleteElement(id) {
155161
if (this.activeComponent === '') this.$store.dispatch(deleteSelectedElement, id[0])
156-
this.setActiveHTML(element);
157-
this.openAttributeModal(element);
162+
else this.$store.dispatch(deleteFromComponentHtmlList, id[1])
158163
159164
},
160165
setActiveElement(element) {

‎src/store/actions.js

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -246,6 +246,11 @@ const actions = {
246246
[types.deleteStateFromComponent]: ({ commit }, payload) => {
247247
commit(types.DELETE_STATE_FROM_COMPONENT, payload);
248248
},
249+
//
250+
[types.addBindingText]: ({ commit }, payload) => {
251+
commit(types.ADD_BINDING_TEXT, payload)
252+
},
253+
249254
// Delete user actions from vuex store
250255
[types.deleteUserActions]: ({ state, commit }, payload) => {
251256
commit(types.DELETE_USER_ACTIONS, payload);
@@ -264,7 +269,6 @@ const actions = {
264269
},
265270

266271
// Actions dispatched from left hand panel////////////////////////////////////////
267-
268272
[types.addToComponentElementList]: ({ commit }, payload) => {
269273
// adds element to the HTMLQueue
270274
commit(types.ADD_TO_COMPONENT_HTML_LIST, payload);
@@ -281,7 +285,6 @@ const actions = {
281285
// end of left hand panel/////////////////////////
282286

283287
// HTML Element related actions ////////////////////
284-
285288
[types.addNestedHTML]: ({ commit }, payload) => {
286289
commit(types.ADD_NESTED_HTML, payload);
287290
},
@@ -319,7 +322,10 @@ const actions = {
319322
[types.upOneLayer]: ({ commit }, payload) => {
320323
commit(types.UP_ONE_LAYER, payload);
321324
},
322-
//FOR MUTATING HTML WITH DRAG AND DROP
325+
326+
// end of HTML segment ////////////////////////////////////////////////
327+
328+
// Drag-and-drop ///////////////////////////////////////
323329
[types.setIdDrag]: ({ commit }, payload) => {
324330
commit(types.SET_ID_DRAG, payload)
325331
},
@@ -344,10 +350,9 @@ const actions = {
344350
commit(types.DRAG_DROP_SORT_SELECTED_HTML_ELEMENTS)
345351
},
346352

347-
// end of HTML segment ////////////////////////////////////////////////
353+
// end of Drag-and-drop /////////////////////////////////
348354

349355
// Loading ///////////////////////////////////////////////////////
350-
351356
[types.openProject]: ({ commit }, payload) => {
352357
commit(types.REMOVE_ALL_STATE_PROPS_ACTIONS)
353358
commit(types.SET_ACTIVE_ROUTE, "HomeView");

0 commit comments

Comments
 (0)