Skip to content

Commit c0040b0

Browse files
keylakoizuminkeylakoizumin
authored
Merge pull request #39 from oslabs-beta/Johnny
Johnny
2 parents 7381733 + 993191b commit c0040b0

File tree

13 files changed

+338
-217
lines changed

13 files changed

+338
-217
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -288,6 +288,8 @@ Then open a new terminal instance, set the DISPLAY value again (re-enter above c
288288
```
289289
quasar dev -m electron
290290
```
291+
**NOTE** Electron-deeplink currently does not work on our WSL2 computers and output an error during installing the dependency which prevented the application to open in dev mode. Go to /src-electron/electron-main.js and comment out line 3/import line to bypass error. The developers did not find any impacts on application so far.
292+
291293
## Running the Docker Image
292294

293295
To run the built version, pull down the docker image from [Docker repo]

‎quasar.conf.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -264,3 +264,4 @@ module.exports = configure(function (ctx) {
264264
},
265265
};
266266
});
267+
``

‎src-electron/electron-main.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { app, BrowserWindow, nativeTheme, dialog, ipcMain } from "electron";
2+
//import deeplink currently did not work in our WSL2 computers - commented out line 3 fixed our issue to be able to run in dev mode
23
import { Deeplink } from "electron-deeplink";
34
import isDev from "electron-is-dev";
45
import path from "path";

‎src/components/Canvas.vue‎

Lines changed: 7 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
<!-- https://www.npmjs.com/package/vue-draggable-resizable -->
1313
<p class="cssContainerText">
1414
CSS Container</p>
15+
16+
<!--each component box in canvas will have these properties-->
1517
<vue-draggable-resizable
1618
class-name="component-box"
1719
v-for="componentData in activeRouteArray"
@@ -217,13 +219,14 @@
217219
</div>
218220
<div v-if="element.text === 'navbar'" class="htmlNavbar"></div>
219221
</div>
222+
<!--change color icon-->
220223
<q-icon v-if="componentData.componentName === this.activeComponent"
221224
size="25px"
222225
z-layer="0"
223226
name="palette"
224227
class="colorLogo"
225228
@click="handleEditColor" />
226-
<!-- start of right click function-->
229+
<!-- start of right click on component box function-->
227230
<q-menu context-menu>
228231
<q-list color="black" class="menu">
229232
<q-item clickable v-ripple v-close-popup id="layer-item">
@@ -298,9 +301,8 @@
298301
</div>
299302
</q-dialog>
300303

301-
<!--color selector-->
304+
<!--color selector logic - color changer will start at current state of the color-->
302305
<q-dialog v-model="colorModal" @update:model-value="handleEditColor">
303-
<!--may need to change starting to be current state?-->
304306
<ColorPicker class="colorPicker" default-format="hex" id="color-picker-1" :visible-formats="['hex']"
305307
:color="this.activeComponentData.color" @color-change="updateColors">
306308
<template #hue-range-input-label>
@@ -376,21 +378,6 @@ export default {
376378
};
377379
},
378380
mounted() {
379-
// when component is mounted, add ability to delete
380-
// window.addEventListener("keyup", (event) => {
381-
// if (event.key === "Backspace") {
382-
// if (this.activeComponent !== '' && this.noteModalOpen === false) {
383-
// this.$store.dispatch("deleteActiveComponent");
384-
// }
385-
// }
386-
// });
387-
// window.addEventListener("keyup", (event) => {
388-
// if (event.key === "Delete") {
389-
// if (this.activeComponent !== '' && this.noteModalOpen === false) {
390-
// this.$store.dispatch("deleteActiveComponent");
391-
// }
392-
// }
393-
// });
394381
// listener for the copy
395382
window.addEventListener("copy", () => {
396383
// if there is an activeComponent, copy info to state using dispatch
@@ -588,7 +575,7 @@ export default {
588575
payload.z--;
589576
this.updateComponentLayer(payload);
590577
},
591-
578+
//drag and drop function
592579
finishedDrag: function (x, y) {
593580
let payload = {
594581
x: x,
@@ -647,7 +634,7 @@ export default {
647634
this.openNoteModal();
648635
}
649636
},
650-
637+
//color editor - opens the pop up
651638
handleEditColor() {
652639
if (this.wasDragged === false && this.activeComponent !== '') {
653640
this.openColorModal();

‎src/components/composables/useExportComponent.js‎

Lines changed: 109 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export function useExportComponent() {
2727
const createComponentCode = (componentLocation, componentName, children) => {
2828
fs.writeFileSync(
2929
componentLocation + ".vue",
30-
writeComments(componentName) +
30+
// writeComments(componentName) +
3131
writeTemplate(componentName, children) +
3232
writeScript(componentName, children) +
3333
writeStyle(componentName)
@@ -37,26 +37,26 @@ export function useExportComponent() {
3737
const writeTemplateTag = (componentName) => {
3838
// create reference object
3939
const htmlElementMap = {
40-
div: ["<div>", "</div>"],
41-
button: ["<button>", "</button>"],
42-
form: ["<form>", "</form>"],
43-
img: ["<img>", ""],
44-
link: ['<a href="#"/>', ""],
45-
list: ["<li>", "</li>"],
46-
paragraph: ["<p>", "</p>"],
47-
"list-ol": ["<ol>", "</ol>"],
48-
"list-ul": ["<ul>", "</ul>"],
49-
input: ["<input />", ""],
50-
navbar: ["<nav>", "</nav>"],
51-
header:["<header>", "</header>"],
52-
footer:["<footer>", "</footer>"],
53-
meta: ["<meta>", "</meta>"],
54-
h1:["<h1>", "</h1>"],
55-
h2:["<h2>", "</h2>"],
56-
h3:["<h3>", "</h3>"],
57-
h4:["<h4>", "</h4>"],
58-
h5:["<h5>", "</h5>"],
59-
h6:["<h6>", "</h6>"],
40+
div: ["<div", "</div>"],
41+
button: ["<button", "</button>"],
42+
form: ["<form", "</form>"],
43+
img: ["<img", ""], //single
44+
link: ['<a href="#"', ""], //single
45+
list: ["<li", "</li>"],
46+
paragraph: ["<p", "</p>"],
47+
"list-ol": ["<ol", "</ol>"],
48+
"list-ul": ["<ul", "</ul>"],
49+
input: ["<input", ""], //single
50+
navbar: ["<nav", "</nav>"],
51+
header: ["<header", "</header>"],
52+
footer: ["<footer", "</footer>"],
53+
meta: ["<meta", "</meta>"],
54+
h1: ["<h1", "</h1>"],
55+
h2: ["<h2", "</h2>"],
56+
h3: ["<h3", "</h3>"],
57+
h4: ["<h4", "</h4>"],
58+
h5: ["<h5", "</h5>"],
59+
h6: ["<h6", "</h6>"],
6060
};
6161
// function to loop through nested elements
6262
const writeNested = (childrenArray, indent) => {
@@ -65,51 +65,66 @@ export function useExportComponent() {
6565
}
6666
let indented = indent + " ";
6767
let nestedString = "";
68+
6869
childrenArray.forEach((child) => {
6970
nestedString += indented;
7071
if (!child.text) {
7172
nestedString += `<${child}/>\n`;
7273
} else {
74+
nestedString += htmlElementMap[child.text][0];
75+
if (child.class !== "") {
76+
nestedString += " " + "class = " + `"${child.class}"`;
77+
}
78+
if(child.binding !== "") {
79+
nestedString += " " + "v-model = " + `"${child.binding}"`;
80+
}
81+
if (child.text === "img" || child.text === "input" || child.text === "link") {
82+
nestedString += "/>";
83+
} else { nestedString += ">"; }
84+
7385
if (child.children.length) {
74-
nestedString += htmlElementMap[child.text][0];
7586
nestedString += "\n";
7687
nestedString += writeNested(child.children, indented);
7788
nestedString += indented + htmlElementMap[child.text][1];
7889
nestedString += "\n";
7990
} else {
80-
nestedString +=
81-
htmlElementMap[child.text][0] +
82-
htmlElementMap[child.text][1] +
83-
"\n";
91+
nestedString += htmlElementMap[child.text][1] + "\n";
8492
}
8593
}
8694
});
8795
return nestedString;
8896
}
8997
// iterate through component's htmllist
9098
let htmlArr = this.componentMap[componentName].htmlList;
91-
let outputStr = ``;
92-
// eslint-disable-next-line no-unused-vars
93-
for (let el of htmlArr) {
94-
if (!el.text) {
95-
outputStr += ` <${el}/>\n`;
96-
} else {
99+
let outputStr = ``;
100+
// eslint-disable-next-line no-unused-vars
101+
for (let el of htmlArr) {
102+
if (!el.text) {
103+
outputStr += ` <${el}/>\n`;
104+
} else {
105+
outputStr += ` `;
106+
outputStr += htmlElementMap[el.text][0]
107+
//if conditional to check class
108+
if (el.class !== "") {
109+
outputStr += " " + "class = " + `"${el.class}"`;
110+
}
111+
if (el.binding !== "") {
112+
outputStr += " " + "v-model = " + `"${el.binding}"`;
113+
}
114+
outputStr += ">";
115+
if (el.children.length) {
116+
outputStr += "\n";
117+
outputStr += writeNested(el.children, ` `);
97118
outputStr += ` `;
98-
if (el.children.length) {
99-
outputStr += htmlElementMap[el.text][0];
100-
outputStr += "\n";
101-
outputStr += writeNested(el.children, ` `);
102-
outputStr += ` `;
103-
outputStr += htmlElementMap[el.text][1];
104-
outputStr += ` \n`;
105-
} else {
106-
outputStr +=
107-
htmlElementMap[el.text][0] + htmlElementMap[el.text][1] + "\n";
108-
}
119+
outputStr += htmlElementMap[el.text][1];
120+
outputStr += ` \n`;
121+
} else {
122+
outputStr += htmlElementMap[el.text][1] + "\n";
109123
}
110124
}
111-
return outputStr;
112125
}
126+
return outputStr;
127+
}
113128

114129
const writeComments = (componentName) => {
115130
if (this.componentMap[componentName]?.noteList?.length > 0){
@@ -128,11 +143,19 @@ export function useExportComponent() {
128143
* also creates the <template></template> tag for each component
129144
*/
130145
const writeTemplate = (componentName, children) => {
131-
let str = "";
132-
str += `<div>\n`;
146+
// let str = "";
147+
// str += `<div>\n`;
133148
// writes the HTML tag boilerplate
134149
let templateTagStr = writeTemplateTag(componentName);
135-
return `<template>\n\t${str}${templateTagStr}\t</div>\n</template>`;
150+
151+
//used to loop through - and apply class/id in code snippet
152+
if (this.componentMap[componentName].htmlAttributes.class !== "" && this.componentMap[componentName].htmlAttributes.id !== "") {
153+
return `<template>\n <div id = "${this.componentMap[componentName].htmlAttributes.id}" class = "${this.componentMap[componentName].htmlAttributes.class}">\n${templateTagStr} </div>\n</template>`;
154+
} else if (this.componentMap[componentName].htmlAttributes.class !== "" && this.componentMap[componentName].htmlAttributes.id === "") {
155+
return `<template>\n <div class = "${this.componentMap[componentName].htmlAttributes.class}">\n${templateTagStr} </div>\n</template>`;
156+
} else if (this.componentMap[componentName].htmlAttributes.class === "" && this.componentMap[componentName].htmlAttributes.id !== "")
157+
return `<template>\n <div id = "${this.componentMap[componentName].htmlAttributes.id}">\n${templateTagStr} </div>\n</template>`;
158+
else return `<template>\n <div>\n${templateTagStr} </div>\n</template>`;
136159
}
137160

138161
/**
@@ -167,15 +190,23 @@ export function useExportComponent() {
167190
});
168191
// if true add data section and populate with props
169192
let data = "";
193+
data += " data () {\n return {";
170194
if (currentComponent.props.length) {
171-
data += " data () {\n return {";
172195
currentComponent.props.forEach((prop) => {
173196
data += `\n ${prop}: "PLACEHOLDER FOR VALUE",`;
174197
});
198+
}
199+
this.routes.HomeView.forEach((element) => {
200+
element.htmlList.forEach((html) => {
201+
if(html.binding !== '') {
202+
data += `\n ${html.binding}: "PLACEHOLDER FOR VALUE",`;
203+
}
204+
})
205+
})
175206
data += "\n";
176207
data += " }\n";
177208
data += " },\n";
178-
}
209+
179210
// if true add computed section and populate with state
180211
let computed = "";
181212
if (currentComponent.state.length) {
@@ -228,7 +259,35 @@ export function useExportComponent() {
228259
* if component is 'App', writes css, else returns <style scoped>
229260
*/
230261
const writeStyle = (componentName) => {
231-
return `\n\n<style scoped>\n</style>`;
262+
let htmlArray = this.componentMap[componentName].htmlList;
263+
let styleString = "";
264+
265+
this.routes.HomeView.forEach((element) => {
266+
if(element.htmlAttributes.class !== "") {
267+
styleString += `.${element.htmlAttributes.class} {\nbackground-color: ${element.color};
268+
width: ${element.w}px;
269+
height: ${element.h}px;
270+
z-index: ${element.z};
271+
}\n`
272+
}
273+
})
274+
275+
276+
277+
278+
279+
for (const html of htmlArray) {
280+
if (html.class !== '') {
281+
styleString += `.${html.class} {\nheight: ${html.h}%;
282+
width: ${html.w}%;
283+
top: ${html.x}%;
284+
left: ${html.y}%;
285+
z-index: ${html.z};
286+
}\n`
287+
}
288+
}
289+
290+
return `\n\n<style scoped>\n${styleString}</style >`;
232291
}
233292

234293
const exportComponentFile = (data) => {

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

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,30 +16,19 @@
1616
</q-item>
1717
</q-list>
1818
</q-btn-dropdown>
19-
19+
<!--Attribute (id/class so far) change function for main component parent-->
2020
<q-input @keyup.enter="createAttribute(attributeText)" color="white" dark outlined bottom-slots
2121
v-model="attributeText" label="Enter Label" dense class="input-add" v-on:keyup.delete.stop>
2222
<template v-slot:append>
2323
<q-btn flat icon="add" @click="createAttribute(attributeText)" />
2424
</template>
2525
</q-input>
26-
26+
<!--delete buttons to remove class/id-->
2727
<button v-if="this.activeComponentObj.htmlAttributes.class !== ''" class="deleteButton"
2828
@click="deleteAttribute('class')" color="primary">Remove class</button>
2929

3030
<button v-if="this.activeComponentObj.htmlAttributes.id !== ''" class="deleteButton" @click="deleteAttribute('id')"
3131
color="primary">Remove id</button>
32-
33-
<!-- <div>
34-
<q-btn
35-
v-if="selectProps.length"
36-
id="add-props-btn"
37-
class="add-btn"
38-
color="secondary"
39-
label="Add Prop(s)"
40-
@click="addPropsToComp"
41-
/>
42-
</div> -->
4332
</div>
4433
</template>
4534

@@ -79,7 +68,7 @@ export default {
7968
stopDelete(e) {
8069
if (e.code === "Backspace") e.stopPropogation();
8170
},
82-
71+
//attribute change function to create attribute
8372
createAttribute(attributeText) {
8473
this.editAttribute({
8574
attribute: this.attributeSelection,
@@ -88,12 +77,14 @@ export default {
8877
routeArray: this.routes[this.activeRoute],
8978
activeComponentData: this.activeComponentData,
9079
})
80+
this.attributeText = "";
9181
},
92-
82+
//function to change the state of the attribute selection dropdown menu
9383
changeAttribute(attribute) {
9484
this.attributeSelection = attribute;
9585
},
9686
87+
//delete attribute after the delete bvutton has been clicked
9788
deleteAttribute(attribute) {
9889
this.editAttribute({
9990
attribute: attribute,
@@ -115,9 +106,6 @@ export default {
115106
}
116107
117108
.input-add {
118-
// position:absolute;
119-
// margin-left: 7em;
120-
// bottom:-100%;
121109
margin-top: 1em;
122110
margin-bottom: -1em;
123111
}

0 commit comments

Comments
 (0)