Skip to content

Commit fce6b19

Browse files
author
Jeffrey Sul
committed
finished leftsidebar functionality for components, still WIP for store
1 parent c6364cd commit fce6b19

File tree

11 files changed

+929
-271
lines changed

11 files changed

+929
-271
lines changed

‎package-lock.json

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

‎src/components/home_sidebar_items/ComponentTab/AddProps.vue

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<template>
2+
<div>
3+
<q-input
4+
@keyup.enter.native="createNewProp(textProps)"
5+
standout="bg-secondary text-white"
6+
bottom-slots
7+
v-model="textProps"
8+
label="Create Prop"
9+
dense
10+
class="input-add"
11+
v-on:keyup.delete.stop
12+
>
13+
<template v-slot:append>
14+
<q-btn round dense flat icon="add" @click="createNewProp(textProps)" />
15+
</template>
16+
</q-input>
17+
18+
<div id="props-select">
19+
<multiselect
20+
v-model="selectProps"
21+
class="multiselect"
22+
placeholder="Select Props for Component"
23+
:multiple="true"
24+
:close-on-select="false"
25+
:max-height="180"
26+
:option-height="20"
27+
open-direction="top"
28+
:options="propsOptions"
29+
:searchable="false"
30+
@search-change="stopDelete($event)"
31+
>
32+
<span slot="noResult">No props found.</span>
33+
</multiselect>
34+
</div>
35+
<br/>
36+
<div>
37+
<q-btn
38+
v-if="selectProps.length"
39+
id="add-props-btn"
40+
class="add-btn"
41+
color="secondary"
42+
label="Add Prop(s)"
43+
@click="addPropsToComp"
44+
/>
45+
</div>
46+
</div>
47+
</template>
48+
49+
<script>
50+
import { mapState, mapActions } from 'vuex'
51+
import Multiselect from 'vue-multiselect'
52+
53+
export default {
54+
name: 'addProps',
55+
components: {
56+
Multiselect
57+
},
58+
data () {
59+
return {
60+
textProps: ''
61+
}
62+
},
63+
64+
computed: {
65+
...mapState([
66+
'selectedProps',
67+
'userProps',
68+
]),
69+
propsOptions () {
70+
return this.userProps
71+
},
72+
selectProps: {
73+
get () {
74+
return this.selectedProps
75+
},
76+
set (value) {
77+
this.addPropsSelected(value)
78+
}
79+
}
80+
},
81+
82+
methods: {
83+
...mapActions([
84+
'createProp',
85+
'addPropsSelected',
86+
'addPropsToComponent'
87+
]),
88+
// Prevent Delete on changes to searchable multiselect
89+
stopDelete (e) {
90+
if (e.code === 'Backspace') e.stopPropogation()
91+
console.log(e)
92+
},
93+
94+
// Create's a new prop that will be stored in the userProps array within store, and it will be added to the props drop-down menu
95+
createNewProp (text) {
96+
if (!this.userProps.includes(text) && text) {
97+
this.createProp(text)
98+
this.textProps = ''
99+
}
100+
},
101+
102+
addPropsToComp () {
103+
this.addPropsToComponent(this.selectedProps)
104+
}
105+
}
106+
}
107+
</script>

‎src/components/home_sidebar_items/ComponentTab/ComponentActions.vue

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<!-- this will display the active/selected component's state. Functionality will include being able to add more state and delete state -->
2+
<!-- Functions:
3+
- display all the component's state as a list
4+
- maybe with a delete button similar to props right now
5+
- dropdown to add more state to component (multiselect)
6+
- submit button (like props)
7+
-->
8+
9+
<template>
10+
<div>
11+
<div id="action-select">
12+
<multiselect
13+
v-model="selectAction"
14+
class="multiselect"
15+
placeholder="Select Action for Component"
16+
:multiple="true"
17+
:close-on-select="false"
18+
:max-height="180"
19+
:option-height="20"
20+
open-direction="top"
21+
:options="actionOptions"
22+
:searchable="false"
23+
@search-change="stopDelete($event)"
24+
>
25+
<span slot="noResult">No actions found.</span>
26+
</multiselect>
27+
<br/>
28+
<q-btn
29+
v-if="selectAction.length"
30+
id="add-actions-btn"
31+
class="add-btn"
32+
color="secondary"
33+
label="Map Action(s)"
34+
@click="addActionToComp"
35+
/>
36+
</div>
37+
<p v-if="!this.activeComponentObj.actions.length">
38+
No actions in component
39+
</p>
40+
<a
41+
v-else
42+
v-for="action in this.activeComponentData.actions"
43+
:key="action"
44+
>
45+
<q-list class="list-item" dense bordered separator>
46+
<q-item clickable v-ripple class="list-item">
47+
<q-item-section>
48+
<div class="component-container">
49+
<div class="component-info">
50+
{{action}}
51+
</div>
52+
<q-btn round flat icon="highlight_off" v-on:click.stop="deleteAction(action)" />
53+
</div>
54+
</q-item-section>
55+
</q-item>
56+
</q-list>
57+
</a>
58+
<br/>
59+
</div>
60+
</template>
61+
62+
<script>
63+
import { mapState, mapActions } from "vuex";
64+
import Multiselect from 'vue-multiselect';
65+
66+
export default {
67+
name: "ComponentActions",
68+
components: {
69+
Multiselect
70+
},
71+
computed: {
72+
...mapState([
73+
"activeComponentObj",
74+
"selectedActions",
75+
"userActions",
76+
]),
77+
activeComponentData () {
78+
return this.activeComponentObj
79+
},
80+
compObj: {
81+
get() {
82+
return this.activeComponentObj;
83+
}
84+
},
85+
actionOptions () {
86+
return this.userActions
87+
},
88+
selectAction: {
89+
get () {
90+
return this.selectedActions
91+
},
92+
set (value) {
93+
this.addActionSelected(value)
94+
}
95+
}
96+
},
97+
methods: {
98+
...mapActions([
99+
'addActionSelected',
100+
'addActionToComponent',
101+
'deleteActionFromComponent',
102+
]),
103+
// Prevent Delete on changes to searchable multiselect
104+
stopDelete (e) {
105+
if (e.code === 'Backspce') e.stopPropogation();
106+
console.log(e);
107+
},
108+
// adds an action to the currently selected component
109+
addActionToComp () {
110+
this.addActionToComponent(this.selectedActions);
111+
},
112+
// delete selected action from active component
113+
deleteAction (action) {
114+
this.deleteActionFromComponent(action);
115+
console.log(this.activeComponentObj);
116+
},
117+
118+
}
119+
}
120+
</script>

‎src/components/home_sidebar_items/ComponentTab/ComponentState.vue

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<!-- this will display the active/selected component's state. Functionality will include being able to add more state and delete state -->
2+
<!-- Functions:
3+
- display all the component's state as a list
4+
- maybe with a delete button similar to props right now
5+
- dropdown to add more state to component (multiselect)
6+
- submit button (like props)
7+
-->
8+
9+
<template>
10+
<div>
11+
<div id="state-select">
12+
<multiselect
13+
v-model="selectState"
14+
class="multiselect"
15+
placeholder="Select State for Component"
16+
:multiple="true"
17+
:close-on-select="false"
18+
:max-height="180"
19+
:option-height="20"
20+
open-direction="top"
21+
:options="stateOptions"
22+
:searchable="false"
23+
@search-change="stopDelete($event)"
24+
>
25+
<span slot="noResult">No state found.</span>
26+
</multiselect>
27+
<br/>
28+
<q-btn
29+
v-if="selectState.length"
30+
id="add-state-btn"
31+
class="add-btn"
32+
color="secondary"
33+
label="Map State"
34+
@click="addStateToComp"
35+
/>
36+
</div>
37+
<p v-if="!this.activeComponentObj.state.length">
38+
No state in component
39+
</p>
40+
<a
41+
v-else
42+
v-for="state in this.activeComponentData.state"
43+
:key="state"
44+
>
45+
<q-list class="list-item" dense bordered separator>
46+
<q-item clickable v-ripple class="list-item">
47+
<q-item-section>
48+
<div class="component-container">
49+
<div class="component-info">
50+
{{state}}
51+
</div>
52+
<q-btn round flat icon="highlight_off" v-on:click.stop="deleteState(state)" />
53+
</div>
54+
</q-item-section>
55+
</q-item>
56+
</q-list>
57+
</a>
58+
<br/>
59+
</div>
60+
</template>
61+
62+
<script>
63+
import { mapState, mapActions } from "vuex";
64+
import Multiselect from 'vue-multiselect';
65+
66+
export default {
67+
name: "ComponentState",
68+
components: {
69+
Multiselect
70+
},
71+
computed: {
72+
...mapState([
73+
"activeComponentObj",
74+
"selectedState",
75+
"userState",
76+
]),
77+
activeComponentData () {
78+
return this.activeComponentObj
79+
},
80+
compObj: {
81+
get() {
82+
return this.activeComponentObj;
83+
}
84+
},
85+
stateOptions () {
86+
return this.userState
87+
},
88+
selectState: {
89+
get () {
90+
return this.selectedState
91+
},
92+
set (value) {
93+
this.addStateSelected(value)
94+
}
95+
}
96+
},
97+
methods: {
98+
...mapActions([
99+
'addStateSelected',
100+
'addStateToComponent',
101+
'deleteStateFromComponent',
102+
]),
103+
// Prevent Delete on changes to searchable multiselet
104+
stopDelete (e) {
105+
if (e.code === 'Backspce') e.stopPropogation();
106+
console.log(e);
107+
},
108+
// adds a state to the currently selected component
109+
addStateToComp () {
110+
this.addStateToComponent(this.selectedState);
111+
},
112+
// delete selected state from active component
113+
deleteState (state) {
114+
this.deleteStateFromComponent(state);
115+
console.log(this.activeComponentObj);
116+
},
117+
118+
}
119+
}
120+
</script>

‎src/components/home_sidebar_items/ComponentTab/ComponentTab.vue

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,6 @@
22
Functionality includes: if active component is selected, will switch view to editing mode. If not, it will be in create mode -->
33
<template>
44
<q-card id="store-cards">
5-
<!-- display component name if there is active component selected -->
6-
<!-- <q-tabs
7-
v-model="tab"
8-
dense
9-
class="bg-subaccent text-white"
10-
active-color="secondary"
11-
indicator-color="secondary"
12-
>
13-
<q-tab name="details" label="details"/>
14-
<q-tab name="vuex" label="vuex"/>
15-
</q-tabs>
16-
<q-tab-panels v-model="tab" animated class="html-bg text-white" >
17-
<q-tab-panel name="details">
18-
<CreateComponent v-if="activeComponent === ''"></CreateComponent>
19-
<EditDeleteComponents v-if="activeComponent !== ''"></EditDeleteComponents>
20-
</q-tab-panel>
21-
<q-tab-panel name="vuex">
22-
<h6>Vuex Mapping State and Actions</h6>
23-
</q-tab-panel>
24-
</q-tab-panels> -->
255
<CreateComponent v-if="activeComponent === ''"/>
266
<EditDeleteComponents v-if="activeComponent !== ''"/>
277
</q-card>

0 commit comments

Comments
 (0)