Skip to content

Commit 59e5a4b

Browse files
drewngyendrewngyen
committed
no coverage tests
1 parent 698093b commit 59e5a4b

File tree

13 files changed

+405
-407
lines changed

13 files changed

+405
-407
lines changed

‎src/components/CodeSnippet.vue‎

Lines changed: 58 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -15,111 +15,111 @@
1515
</template>
1616

1717
<script>
18-
import { mapState } from "vuex";
19-
import PrismEditor from "vue-prism-editor";
20-
import "prismjs";
21-
import "prismjs/themes/prism-okaidia.css";
22-
import "vue-prism-editor/dist/VuePrismEditor.css";
18+
import { mapState } from 'vuex'
19+
import PrismEditor from 'vue-prism-editor'
20+
import 'prismjs'
21+
import 'prismjs/themes/prism-okaidia.css'
22+
import 'vue-prism-editor/dist/VuePrismEditor.css'
2323
2424
export default {
25-
data() {
25+
data () {
2626
return {
2727
code: `Your component boilerplate will be displayed here.`,
2828
lineNumbers: true,
2929
height: null
30-
};
30+
}
3131
},
3232
components: {
3333
PrismEditor
3434
},
3535
computed: {
3636
// needs access to current component aka activeComponent
37-
...mapState(["componentMap", "activeComponent"])
37+
...mapState(['componentMap', 'activeComponent'])
3838
},
3939
methods: {
40-
getWindowHeight(e) {
40+
getWindowHeight (e) {
4141
let minHeight =
42-
window.outerHeight < 900 ? 22 : window.outerHeight < 1035 ? 24 : 27.5;
43-
this.height = minHeight;
42+
window.outerHeight < 900 ? 22 : window.outerHeight < 1035 ? 24 : 27.5
43+
this.height = minHeight
4444
},
4545
// calls createTemplate and createBoiler to generate snippet
46-
createCodeSnippet(componentName, children) {
46+
createCodeSnippet (componentName, children) {
4747
let result = `${this.createTemplate(
4848
componentName,
4949
children
50-
)}${this.createBoiler(componentName, children)}`;
51-
return result;
50+
)}${this.createBoiler(componentName, children)}`
51+
return result
5252
},
53-
createTemplate(componentName, children) {
54-
let output = ``;
55-
output += ` <div>\n`;
53+
createTemplate (componentName, children) {
54+
let output = ``
55+
output += ` <div>\n`
5656
children.forEach(name => {
57-
output += ` <${name}>\n </${name}>\n`;
58-
});
59-
let templateTagStr = this.writeTemplateTag(componentName);
60-
return `<template>\n ${output}${templateTagStr} </div>\n</template>`;
57+
output += ` <${name}>\n </${name}>\n`
58+
})
59+
let templateTagStr = this.writeTemplateTag(componentName)
60+
return `<template>\n ${output}${templateTagStr} </div>\n</template>`
6161
},
62-
writeTemplateTag(componentName) {
62+
writeTemplateTag (componentName) {
6363
// console.log('writeTemplateTag invoked!')
6464
// create reference object
6565
const htmlElementMap = {
66-
div: ["<div>", "</div>"],
67-
button: ["<button>", "</button>"],
68-
form: ["<form>", "</form>"],
69-
img: ["<img>", ""],
70-
link: ['<a href="#"/>', ""],
71-
list: ["<li>", "</li>"],
72-
paragraph: ["<p>", "</p>"],
73-
"list-ol": ["<ol>", "</ol>"],
74-
"list-ul": ["<ul>", "</ul>"],
75-
input: ["<input />", ""],
76-
navbar: ["<nav>", "</nav>"]
77-
};
66+
div: ['<div>', '</div>'],
67+
button: ['<button>', '</button>'],
68+
form: ['<form>', '</form>'],
69+
img: ['<img>', ''],
70+
link: ['<a href="#"/>', ''],
71+
list: ['<li>', '</li>'],
72+
paragraph: ['<p>', '</p>'],
73+
'list-ol': ['<ol>', '</ol>'],
74+
'list-ul': ['<ul>', '</ul>'],
75+
input: ['<input />', ''],
76+
navbar: ['<nav>', '</nav>']
77+
}
7878
// loop to iterate through compName arr
79-
let htmlArr = this.componentMap[componentName].htmlList;
80-
let outputStr = ``;
79+
let htmlArr = this.componentMap[componentName].htmlList
80+
let outputStr = ``
8181
for (let el of htmlArr) {
82-
outputStr += ` `;
83-
outputStr += htmlElementMap[el.text][0];
84-
outputStr += htmlElementMap[el.text][1];
85-
outputStr += ` \n`;
82+
outputStr += ` `
83+
outputStr += htmlElementMap[el.text][0]
84+
outputStr += htmlElementMap[el.text][1]
85+
outputStr += ` \n`
8686
}
8787
// console.log(`outputStr from writeTemplateTag: ${outputStr}`)
88-
return outputStr;
88+
return outputStr
8989
},
90-
createBoiler(componentName, children) {
91-
let str = "";
90+
createBoiler (componentName, children) {
91+
let str = ''
9292
children.forEach(name => {
93-
str += `import ${name} from '@/components/${name}.vue';\n`;
94-
});
95-
let childrenComponentNames = "";
93+
str += `import ${name} from '@/components/${name}.vue';\n`
94+
})
95+
let childrenComponentNames = ''
9696
children.forEach(name => {
97-
childrenComponentNames += ` ${name},\n`;
98-
});
99-
return `\n\n<script>\n${str}\nexport default {\n name: '${componentName}',\n components: {\n${childrenComponentNames} }\n};\n<\/script>\n\n<style scoped>\n</style>`;
97+
childrenComponentNames += ` ${name},\n`
98+
})
99+
return `\n\n<script>\n${str}\nexport default {\n name: '${componentName}',\n components: {\n${childrenComponentNames} }\n};\n<\/script>\n\n<style scoped>\n</style>`
100100
}
101101
},
102-
mounted() {
102+
mounted () {
103103
// https://vuejs.org/v2/api/#Vue-nextTick
104104
// kinda like a promise, used for the window resize
105105
this.$nextTick(() => {
106-
window.addEventListener("resize", this.getWindowHeight);
106+
window.addEventListener('resize', this.getWindowHeight)
107107
108-
this.getWindowHeight();
109-
});
108+
this.getWindowHeight()
109+
})
110110
},
111111
// updates code snippet, but broken cause children undefined, shows `function () { [native code] }`
112-
updated() {
112+
updated () {
113113
// console.log(`code: ${this.createCodeSnippet(this.activeComponent, this.componentMap[this.activeComponent].children)}`)
114114
this.code = `${this.createCodeSnippet(
115115
this.activeComponent,
116116
this.componentMap[this.activeComponent].children
117-
)}`;
117+
)}`
118118
},
119-
beforeDestroy() {
120-
window.removeEventListener("resize", this.getWindowHeight);
119+
beforeDestroy () {
120+
window.removeEventListener('resize', this.getWindowHeight)
121121
}
122-
};
122+
}
123123
</script>
124124

125125
<style lang="stylus" scoped>

‎src/components/CreateComponent.vue‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -33,36 +33,36 @@
3333
</template>
3434

3535
<script>
36-
import Icons from "./Icons";
37-
import ParentMultiselect from "../components/ParentMultiselect";
38-
import { mapState, mapActions } from "vuex";
36+
import Icons from './Icons'
37+
import ParentMultiselect from '../components/ParentMultiselect'
38+
import { mapState, mapActions } from 'vuex'
3939
4040
export default {
41-
name: "HomeSidebar",
41+
name: 'HomeSidebar',
4242
components: {
4343
Icons,
4444
ParentMultiselect
4545
},
4646
computed: {
47-
...mapState(["componentMap", "selectedElementList", "activeComponent"]),
47+
...mapState(['componentMap', 'selectedElementList', 'activeComponent']),
4848
componentNameInputValue: {
49-
get() {
50-
return this.$store.state.componentNameInputValue;
49+
get () {
50+
return this.$store.state.componentNameInputValue
5151
},
52-
set(value) {
53-
this.updateComponentNameInputValue(value);
52+
set (value) {
53+
this.updateComponentNameInputValue(value)
5454
}
5555
}
5656
},
5757
methods: {
5858
...mapActions([
59-
"registerComponent",
60-
"addToSelectedElementList",
61-
"updateComponentNameInputValue",
62-
"setActiveComponent",
63-
"addToComponentElementList"
59+
'registerComponent',
60+
'addToSelectedElementList',
61+
'updateComponentNameInputValue',
62+
'setActiveComponent',
63+
'addToComponentElementList'
6464
]),
65-
handleClick() {
65+
handleClick () {
6666
const component = {
6767
componentName: this.componentNameInputValue,
6868
x: 0,
@@ -72,19 +72,19 @@ export default {
7272
htmlList: this.selectedElementList,
7373
children: [],
7474
isActive: false
75-
};
75+
}
7676
77-
this.registerComponent(component);
77+
this.registerComponent(component)
7878
},
79-
resetActiveComponent() {
80-
this.setActiveComponent("");
79+
resetActiveComponent () {
80+
this.setActiveComponent('')
8181
},
82-
handleIconClick() {
83-
if (this.activeComponent === "") this.setClickedElementList();
84-
else this.setComponentHtmlList();
82+
handleIconClick () {
83+
if (this.activeComponent === '') this.setClickedElementList()
84+
else this.setComponentHtmlList()
8585
}
8686
}
87-
};
87+
}
8888
</script>
8989
<style type="stylus" scoped>
9090
.is-primary {

‎src/components/Footer.vue‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -43,36 +43,36 @@
4343
</template>
4444

4545
<script>
46-
import Tree from "./Tree";
47-
import HomeQueue from "./HomeQueue";
48-
import CodeSnippet from "./CodeSnippet";
46+
import Tree from './Tree'
47+
import HomeQueue from './HomeQueue'
48+
import CodeSnippet from './CodeSnippet'
4949
5050
export default {
5151
components: {
5252
Tree,
5353
HomeQueue,
5454
CodeSnippet
5555
},
56-
data() {
56+
data () {
5757
return {
58-
tab: "code",
58+
tab: 'code',
5959
open: true,
6060
height: 40,
61-
up: "fas fa-chevron-up",
62-
down: "fas fa-chevron-down"
63-
};
61+
up: 'fas fa-chevron-up',
62+
down: 'fas fa-chevron-down'
63+
}
6464
},
6565
methods: {
66-
openBottomDrawer() {
66+
openBottomDrawer () {
6767
// 15in mb pro - 1027 px 3.75
6868
// big ass screens 2.5
6969
let minHeight =
70-
window.outerHeight < 900 ? 4.5 : window.outerHeight < 1035 ? 3.75 : 2.5;
71-
this.height === 40 ? (this.height = minHeight) : (this.height = 40);
72-
this.open === true ? (this.open = false) : (this.open = true);
70+
window.outerHeight < 900 ? 4.5 : window.outerHeight < 1035 ? 3.75 : 2.5
71+
this.height === 40 ? (this.height = minHeight) : (this.height = 40)
72+
this.open === true ? (this.open = false) : (this.open = true)
7373
}
7474
}
75-
};
75+
}
7676
</script>
7777

7878
<style lang="stylus" scoped>

‎src/components/HomeSideDropDown.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,17 +34,17 @@
3434
</div>
3535
</template>
3636
<script>
37-
import RouteDisplay from "../components/RouteDisplay";
38-
import ComponentList from "./HomeSideDropDownItems/ComponentList";
39-
import VuexForm from "./HomeSideDropDownItems/VuexForm";
37+
import RouteDisplay from '../components/RouteDisplay'
38+
import ComponentList from './HomeSideDropDownItems/ComponentList'
39+
import VuexForm from './HomeSideDropDownItems/VuexForm'
4040
4141
export default {
4242
components: {
4343
RouteDisplay,
4444
VuexForm,
4545
ComponentList
4646
}
47-
};
47+
}
4848
</script>
4949

5050
<style lang="stylus">

‎src/components/HomeSideDropDownItems/ComponentList.vue‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -28,37 +28,37 @@
2828
/**
2929
* TODO: Needs functionality to delete component, and (maybe) show child components
3030
*/
31-
import { mapState, mapActions } from "vuex";
31+
import { mapState, mapActions } from 'vuex'
3232
3333
export default {
3434
computed: {
35-
...mapState(["routes", "activeRoute", "activeComponent"]),
36-
activeRouteDisplay() {
37-
let component = this.routes[this.activeRoute];
38-
return component;
35+
...mapState(['routes', 'activeRoute', 'activeComponent']),
36+
activeRouteDisplay () {
37+
let component = this.routes[this.activeRoute]
38+
return component
3939
},
40-
activeComponentData() {
40+
activeComponentData () {
4141
return this.activeRouteDisplay.filter(componentData => {
42-
return componentData.componentName === this.activeComponent;
43-
})[0];
42+
return componentData.componentName === this.activeComponent
43+
})[0]
4444
}
4545
},
4646
methods: {
4747
...mapActions([
48-
"setActiveComponent",
49-
"deleteComponent",
50-
"deleteActiveComponent"
48+
'setActiveComponent',
49+
'deleteComponent',
50+
'deleteActiveComponent'
5151
]),
52-
onActivated(componentData) {
53-
this.setActiveComponent(componentData.componentName);
54-
this.activeComponentData.isActive = true;
52+
onActivated (componentData) {
53+
this.setActiveComponent(componentData.componentName)
54+
this.activeComponentData.isActive = true
5555
},
56-
handleClick(componentData) {
57-
this.setActiveComponent(componentData.componentName);
58-
this.deleteActiveComponent(componentData.componentName);
56+
handleClick (componentData) {
57+
this.setActiveComponent(componentData.componentName)
58+
this.deleteActiveComponent(componentData.componentName)
5959
}
6060
}
61-
};
61+
}
6262
</script>
6363

6464
<style>

0 commit comments

Comments
 (0)