Skip to content

Commit 6aa9f60

Browse files
committed
committing creat action and add action multiselect
2 parents 9bd9186 + e9c7c3e commit 6aa9f60

File tree

11 files changed

+260
-51
lines changed

11 files changed

+260
-51
lines changed

package-lock.json

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

src-electron/electron-flag.d.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
2+
// REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
3+
import "quasar/dist/types/feature-flag";
4+
5+
declare module "quasar/dist/types/feature-flag" {
6+
interface QuasarFeatureFlags {
7+
electron: true;
8+
}
9+
}

src-pwa/pwa-flag.d.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
2+
// REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
3+
import "quasar/dist/types/feature-flag";
4+
5+
declare module "quasar/dist/types/feature-flag" {
6+
interface QuasarFeatureFlags {
7+
pwa: true;
8+
}
9+
}

src/components/Footer.vue

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@ Description:
2727
<q-tab name="detail" label="Component Details" id="label-text" />
2828
<q-tab name="tree" label="Project Tree" id="label-text" />
2929
<q-tab name="html" label="HTML Elements" id="label-text" />
30+
<q-tab name="store" label="Vuex Store" id="label-text" />
31+
<q-tab name="comp vuex" label="Component: Vuex" id="label-text" />
32+
3033
</q-tabs>
3134

3235
<q-tab-panels v-model="tab" animated class="html-bg text-white" >
@@ -35,7 +38,7 @@ Description:
3538
</q-tab-panel>
3639
<!-- Work in Progress -->
3740
<q-tab-panel name="detail">
38-
<div class="text-h6">Vuex</div>Component Info Here
41+
<div class="text-h6">Hello</div>World
3942
</q-tab-panel>
4043
<!----------------------->
4144
<q-tab-panel name="tree">
@@ -45,6 +48,12 @@ Description:
4548
<q-tab-panel name="html" :style="{height: `${height}vh`}">
4649
<HomeQueue />
4750
</q-tab-panel>
51+
<q-tab-panel name="detail">
52+
<div class="text-h6">Vuex</div>Component Info Here
53+
</q-tab-panel>
54+
<q-tab-panel name="detail">
55+
<div class="text-h6">Vuex</div>Component Info Here
56+
</q-tab-panel>
4857
</q-tab-panels>
4958
</q-card>
5059
</q-footer>

src/components/HomeSideDropDownItems/VuexForm.vue

Lines changed: 115 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ Description:
66

77
<template>
88
<div class="input-container">
9-
<q-input
9+
<!-- <q-input
1010
standout="bg-secondary text-white"
1111
bottom-slots
1212
v-model="text"
@@ -17,36 +17,141 @@ Description:
1717
<template v-slot:append>
1818
<q-btn round dense flat icon="add" />
1919
</template>
20-
</q-input>
20+
</q-input> -->
2121
<q-input
2222
standout="bg-secondary text-white"
2323
bottom-slots
2424
v-model="text"
25-
label="Add Action"
25+
label="Create Action"
2626
dense
2727
class="input-add"
2828
>
2929
<template v-slot:append>
30-
<q-btn round dense flat icon="add" />
30+
<q-btn
31+
round dense flat icon="add"
32+
@click="createNewAction(text)"
33+
/>
3134
</template>
3235
</q-input>
33-
<q-input
36+
<!-- <q-input
3437
standout="bg-secondary text-white"
3538
bottom-slots
3639
v-model="text"
37-
label="Add Mutation"
40+
label="Select Action"
3841
dense
3942
class="input-add"
4043
>
4144
<template v-slot:append>
4245
<q-btn round dense flat icon="add" />
4346
</template>
44-
</q-input>
47+
</q-input> -->
48+
<!-- :max-height="90"
49+
:option-height="20" -->
50+
<template>
51+
<div id="action-select">
52+
<br />
53+
<multiselect
54+
v-model="value"
55+
placeholder="Select Action"
56+
:multiple="true"
57+
:close-on-select="false"
58+
@input="selectAction"
59+
:max-height="90"
60+
:option-height="20"
61+
open-direction= "top"
62+
:options="options"
63+
:searchable="true"
64+
>
65+
<span slot="noResult">No components found.</span>
66+
</multiselect>
67+
</div>
68+
</template>
69+
<template>
70+
<div>
71+
<br />
72+
<q-btn
73+
id="add-actions-btn"
74+
color="secondary"
75+
label="Add Action(s)"
76+
@click="addActionToComponent"
77+
/>
78+
</div>
79+
</template>
4580
</div>
4681
</template>
82+
<!-- @click="createComponent" -->
83+
<!-- :disabled="!componentNameInputValue.trim()" -->
84+
<script>
85+
import { mapState, mapActions } from 'vuex'
86+
import Multiselect from 'vue-multiselect'
4787
48-
<style lang="stylus" scoped>
49-
.input-add {
50-
margin: 0em 1em 0em 1em;
88+
export default {
89+
name: 'VuexForm',
90+
components: {
91+
Multiselect
92+
},
93+
data () {
94+
return {
95+
text: '',
96+
value: ''
97+
}
98+
},
99+
computed: {
100+
...mapState([
101+
'routes',
102+
'componentMap',
103+
'activeComponent',
104+
'activeRoute',
105+
'routes',
106+
'userActions'
107+
]),
108+
options () {
109+
return this.userActions
110+
}
111+
},
112+
methods: {
113+
...mapActions(['setActiveComponent', 'createAction', 'addActionSelected']),
114+
selectAction (value) {
115+
this.addActionSelected(value)
116+
},
117+
createNewAction (text) {
118+
console.log('text:', text)
119+
if (!this.$store.state.userActions.includes(text)) {
120+
this.createAction(text)
121+
console.log('userActions', this.$store.state.userActions)
122+
console.log('userActionArray', this.userActions)
123+
this.text = ''
124+
}
125+
},
126+
// when multiselect is opened activeComponent is deselected to allow for parentSelected action
127+
resetActiveComponent () {
128+
if (this.activeComponent !== '') {
129+
this.setActiveComponent('')
130+
}
131+
}
132+
},
133+
// clears out value in mutiselect on creation of component
134+
watch: {
135+
componentMap: {
136+
handler () {
137+
// console.log('componentMap has changed')
138+
this.value = ''
139+
}
140+
}
141+
}
51142
}
143+
</script>
144+
145+
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
146+
<style scoped>
147+
#parent-select {
148+
height: 30px;
149+
margin: 0.75rem;
150+
width: 90%;
151+
}
152+
</style>
153+
154+
<style lang="stylus" scoped>
155+
.input-add
156+
margin 0 1em
52157
</style>

src/index.template.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<meta name="description" content="<%= htmlWebpackPlugin.options.productDescription %>">
88
<meta name="format-detection" content="telephone=no">
99
<meta name="msapplication-tap-highlight" content="no">
10-
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova) { %>, viewport-fit=cover<% } %>">
10+
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (htmlWebpackPlugin.options.ctx.mode.cordova || htmlWebpackPlugin.options.ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
1111

1212
<link rel="icon" type="image/png" href="statics/app-logo-128x128.png">
1313
<link rel="icon" type="image/png" sizes="16x16" href="statics/icons/favicon-16x16.png">

src/store/actions.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,17 @@ const actions = {
112112

113113
// End of Routing section //////////////////////////////////////////
114114

115+
// Vuex Actions ///////////////////////////////////////////////
116+
117+
[types.createAction]: ({ commit }, payload) => {
118+
commit(types.CREATE_ACTION, payload)
119+
},
120+
121+
[types.addActionSelected]: ({ commit }, payload) => {
122+
commit(types.ADD_ACTION_SELECTED, payload)
123+
},
124+
// End of Vuex Actions section //////////////////////////////////////////
125+
115126
// Actions dispatched from left hand panel////////////////////////////////////////
116127

117128
[types.addToComponentElementList]: ({ commit }, payload) => {

0 commit comments

Comments
 (0)