Skip to content

Commit 7cb2767

Browse files
deanfchungdeanfchung
authored
Merge pull request #6 from deanfchung/dean
Dean
2 parents dc93c88 + 33820c8 commit 7cb2767

16 files changed

+429
-31
lines changed

‎package-lock.json

Lines changed: 68 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,15 @@
1717
"mousetrap": "^1.6.3",
1818
"prismjs": "^1.16.0",
1919
"quasar": "^1.0.0",
20+
"vue-custom-context-menu": "^3.0.1",
2021
"vue-drag-resize": "^1.3.2",
22+
"vue-draggable-nested-tree": "^2.2.17",
2123
"vue-draggable-resizable": "^2.0.0-rc2",
2224
"vue-loader": "^15.7.0",
2325
"vue-multiselect": "^2.1.6",
2426
"vue-prism-editor": "^0.2.1",
2527
"vued3tree": "^3.7.1",
28+
"vuedraggable": "^2.23.0",
2629
"vuex": "^3.1.1"
2730
},
2831
"devDependencies": {

‎quasar.conf.js

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,13 +53,21 @@ module.exports = function (ctx) {
5353
'QTab',
5454
'QRouteTab',
5555
'QTabPanels',
56+
'QDialog',
57+
'QSelect',
5658
'QTabPanel',
5759
'QFab',
58-
'QFabAction'
60+
'QFabAction',
61+
'QMenu',
62+
'QUploader',
63+
'QEditor',
64+
'QCard',
65+
'QChip'
5966
],
6067

6168
directives: [
62-
'Ripple'
69+
'Ripple',
70+
'ClosePopup'
6371
],
6472

6573
// Quasar plugins

‎src/components/ChildrenMultiselect.vue

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<template>
2+
<div id="child-select">
3+
<br />
4+
<multiselect
5+
id="dropdown"
6+
placeholder="Select child components"
7+
:multiple="true"
8+
:close-on-select="false"
9+
:options="options"
10+
:value="componentChildrenMultiselectValue"
11+
@input="handleSelect"
12+
:max-height="150"
13+
:option-height="20"
14+
:searchable="false"
15+
></multiselect>
16+
<!-- <q-select
17+
:options="options"
18+
label="Select children"
19+
multiple
20+
/> -->
21+
</div>
22+
</template>
23+
24+
<script>
25+
import { mapState, mapActions } from 'vuex'
26+
import Multiselect from 'vue-multiselect'
27+
28+
export default {
29+
components: {
30+
Multiselect
31+
},
32+
computed: {
33+
...mapState([
34+
'routes',
35+
// comes from store/state/index.js
36+
'componentMap',
37+
'activeComponent',
38+
'componentChildrenMultiselectValue',
39+
'modalOpen'
40+
]),
41+
options () {
42+
const routes = Object.keys(this.routes)
43+
const exceptions = new Set(['App', this.activeComponent, ...routes])
44+
console.log('exceptions', exceptions)
45+
return Object.keys(this.componentMap).filter(component => {
46+
if (!exceptions.has(component)) return component
47+
})
48+
}
49+
},
50+
methods: {
51+
...mapActions([
52+
'updateComponentChildrenMultiselectValue',
53+
'updateActiveComponentChildrenValue'
54+
]),
55+
//
56+
handleSelect (value) {
57+
// if (this.modalOpen) this.updateActiveComponentChildrenValue(value)
58+
console.log('Multiselect: ', value)
59+
this.updateActiveComponentChildrenValue(value)
60+
this.updateComponentChildrenMultiselectValue(value)
61+
}
62+
}
63+
}
64+
</script>
65+
66+
<!-- New step!
67+
Add Multiselect CSS. Can be added as a static asset or inside a component. -->
68+
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
69+
<style scoped>
70+
#child-select {
71+
min-width: 300px;
72+
min-height: 200px;
73+
}
74+
</style>

‎src/components/CodeSnippet.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export default {
4343
// calls createTemplate and createBoiler to generate snippet
4444
createCodeSnippet (componentName, children) {
4545
let result = `${this.createTemplate(componentName, children)}${this.createBoiler(componentName, children)}`
46-
console.log(`createCodeSnippet result: ${result}`)
46+
//console.log(`createCodeSnippet result: ${result}`)
4747
return result
4848
},
4949
createTemplate (componentName, children) {
@@ -57,7 +57,7 @@ export default {
5757
return `<template>\n ${output}${templateTagStr} </div>\n</template>`
5858
},
5959
writeTemplateTag (componentName) {
60-
console.log('writeTemplateTag invoked!')
60+
//console.log('writeTemplateTag invoked!')
6161
// create reference object
6262
const htmlElementMap = {
6363
div: ['<div>', '</div>'],
@@ -81,7 +81,7 @@ export default {
8181
outputStr += htmlElementMap[el.text][1]
8282
outputStr += ` \n`
8383
}
84-
console.log(`outputStr from writeTemplateTag: ${outputStr}`)
84+
//console.log(`outputStr from writeTemplateTag: ${outputStr}`)
8585
return outputStr
8686
},
8787
createBoiler (componentName, children) {
@@ -109,7 +109,7 @@ export default {
109109
},
110110
// updates code snippet, but broken cause children undefined, shows `function () { [native code] }`
111111
updated () {
112-
console.log(`code: ${this.createCodeSnippet(this.activeComponent, this.componentMap[this.activeComponent].children)}`)
112+
//console.log(`code: ${this.createCodeSnippet(this.activeComponent, this.componentMap[this.activeComponent].children)}`)
113113
this.code = `${this.createCodeSnippet(this.activeComponent, this.componentMap[this.activeComponent].children)}`
114114
},
115115
beforeDestroy () {

‎src/components/ComponentDisplay.vue

Lines changed: 61 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,48 @@
99
:w="componentData.w"
1010
:h="componentData.h"
1111
:parent="true"
12-
class-name-resizable="my-resizable-class"
1312
@activated="onActivated(componentData)"
1413
@deactivated="onDeactivated(componentData)"
1514
@dragging="onDrag"
1615
@resizing="onResize"
16+
@dblclick.native="onDoubleClick(componentData)"
1717
>
1818
<h3>{{ componentData.componentName }}</h3>
19+
<q-menu context-menu>
20+
<q-list>
21+
<q-item clickable v-ripple v-close-popup @click="handleAddChild">
22+
<q-item-section>Add Children</q-item-section>
23+
<q-item-section avatar><q-icon color="primary" name="add"/></q-item-section>
24+
</q-item>
25+
<q-item clickable v-ripple v-close-popup auto-close>
26+
<q-item-section>Delete Children</q-item-section>
27+
<q-item-section avatar><q-icon color="primary" name="delete"/></q-item-section>
28+
</q-item>
29+
</q-list>
30+
</q-menu>
1931
</VueDraggableResizable>
32+
<div>
33+
<q-dialog v-model="modalOpen">
34+
<q-select
35+
@input="handleSelect"
36+
id="dropdown"
37+
filled
38+
v-model="testModel"
39+
multiple
40+
:options="options"
41+
use-chips
42+
stack-label
43+
label="Select children"
44+
style="width: 250px; background-color: #fd5f00"
45+
/>
46+
</q-dialog>
47+
</div>
2048
</div>
2149
</template>
2250
<script>
2351
import { mapState, mapActions } from 'vuex'
2452
import VueDraggableResizable from 'vue-draggable-resizable'
53+
// import ChildrenMultiselect from '../components/ChildrenMultiselect'
2554
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
2655
2756
export default {
@@ -31,7 +60,10 @@ export default {
3160
},
3261
data () {
3362
return {
34-
abilityToDelete: false
63+
modalOpen: false,
64+
abilityToDelete: false,
65+
testOptions: ['parent', 'child', 'grandchild'],
66+
testModel: []
3567
}
3668
},
3769
mounted () {
@@ -45,7 +77,7 @@ export default {
4577
})
4678
},
4779
computed: {
48-
...mapState(['routes', 'activeRoute', 'activeComponent', 'componentMap']),
80+
...mapState(['routes', 'activeRoute', 'activeComponent', 'componentMap', 'componentChildrenMultiselectValue']),
4981
// used in VueDraggableResizeable component
5082
activeRouteArray () {
5183
// console.log('active route array method', this.routes[this.activeRoute])
@@ -57,10 +89,21 @@ export default {
5789
return this.activeRouteArray.filter(componentData => {
5890
return componentData.componentName === this.activeComponent
5991
})[0]
92+
},
93+
options () {
94+
// PROBLEM: the objects on childrenmultiselectvalue are applied
95+
const routes = Object.keys(this.routes)
96+
const exceptions = new Set(['App', this.activeComponent, ...routes])
97+
return Object.keys(this.componentMap).filter(component => {
98+
if (!exceptions.has(component)) return component
99+
})
60100
}
61101
},
62102
methods: {
63-
...mapActions(['setActiveComponent']),
103+
...mapActions([
104+
'setActiveComponent',
105+
'updateComponentChildrenMultiselectValue',
106+
'updateActiveComponentChildrenValue']),
64107
onResize: function (x, y, width, height) {
65108
this.activeComponentData.x = x
66109
this.activeComponentData.y = y
@@ -85,6 +128,20 @@ export default {
85128
},
86129
onDeactivated () {
87130
this.activeComponentData.isActive = false
131+
},
132+
onDoubleClick (compData) {
133+
this.setActiveComponent(compData.componentName)
134+
this.activeComponentData.isActive = true
135+
},
136+
handleAddChild () {
137+
// render modal with childrenmultiselect in it
138+
this.modalOpen = true
139+
},
140+
handleSelect (value) {
141+
// if (this.modalOpen) this.updateActiveComponentChildrenValue(value)
142+
console.log('Multiselect: ', value)
143+
this.updateActiveComponentChildrenValue(value)
144+
// this.updateComponentChildrenMultiselectValue(value)
88145
}
89146
// @dblclick.native="onDoubleClick(componentData)"
90147
// onDoubleClick (compData) {
@@ -136,7 +193,6 @@ export default {
136193
border: 1px dashed rgb(227, 203, 71);
137194
background-color: rgba(186, 99, 99, 0.529);
138195
}
139-
140196
.active {
141197
background-color: rgba(57, 63, 84, 0.5);
142198
}

0 commit comments

Comments
 (0)