Add "feedback" component; vuex store config
seems i have a lot to learn...pretty sure this isn't very clean yet
This commit is contained in:
parent
7bdaeee691
commit
5ef0703d60
8 changed files with 142 additions and 24 deletions
|
@ -7,9 +7,7 @@
|
||||||
"build": "vue-cli-service build --target lib --name byjove src/index.js"
|
"build": "vue-cli-service build --target lib --name byjove src/index.js"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"vue": "^2.6.10",
|
"vue": "^2.6.10"
|
||||||
"vue-router": "^3.0.3",
|
|
||||||
"vuex": "^3.0.1"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vue/cli-service": "^3.0.5",
|
"@vue/cli-service": "^3.0.5",
|
||||||
|
|
109
src/components/feedback/ByjoveFeedback.vue
Normal file
109
src/components/feedback/ByjoveFeedback.vue
Normal file
|
@ -0,0 +1,109 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<b-button type="is-primary"
|
||||||
|
@click="showFeedback()">
|
||||||
|
Feedback
|
||||||
|
</b-button>
|
||||||
|
<b-modal has-modal-card
|
||||||
|
:active.sync="showFeedbackDialog">
|
||||||
|
<div class="modal-card">
|
||||||
|
|
||||||
|
<header class="modal-card-head">
|
||||||
|
<p class="modal-card-title">User Feedback</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="modal-card-body">
|
||||||
|
<p>
|
||||||
|
Questions, suggestions, comments, complaints, etc. regarding this
|
||||||
|
website are welcome and may be submitted below.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<b-field label="Referring URL">
|
||||||
|
<div class="control">
|
||||||
|
{{ referringURL }}
|
||||||
|
</div>
|
||||||
|
</b-field>
|
||||||
|
|
||||||
|
<b-field label="Your Name"
|
||||||
|
v-show="!userUUID">
|
||||||
|
<!-- v-show="!user"> -->
|
||||||
|
<b-input v-model="userName"></b-input>
|
||||||
|
</b-field>
|
||||||
|
|
||||||
|
<b-field label="Message">
|
||||||
|
<b-input v-model="message"
|
||||||
|
type="textarea">
|
||||||
|
</b-input>
|
||||||
|
</b-field>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="modal-card-foot">
|
||||||
|
<b-button @click="showFeedbackDialog = false">
|
||||||
|
Cancel
|
||||||
|
</b-button>
|
||||||
|
<b-button type="is-primary"
|
||||||
|
@click="sendFeedback()"
|
||||||
|
:disabled="!message">
|
||||||
|
Send Note
|
||||||
|
</b-button>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</b-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'ByjoveFeedback',
|
||||||
|
props: {
|
||||||
|
url: String,
|
||||||
|
// userUUID: String,
|
||||||
|
// user: Object,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showFeedbackDialog: false,
|
||||||
|
referringURL: null,
|
||||||
|
userUUID: null,
|
||||||
|
userName: null,
|
||||||
|
message: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
showFeedback() {
|
||||||
|
this.referringURL = location.href
|
||||||
|
if (this.$store.state.user) {
|
||||||
|
this.userUUID = this.$store.state.user.uuid
|
||||||
|
}
|
||||||
|
this.message = null
|
||||||
|
this.showFeedbackDialog = true
|
||||||
|
},
|
||||||
|
|
||||||
|
sendFeedback() {
|
||||||
|
let params = {
|
||||||
|
referrer: this.referringURL,
|
||||||
|
user: this.userUUID,
|
||||||
|
// user: this.user ? this.user.uuid : null,
|
||||||
|
user_name: this.userName,
|
||||||
|
message: this.message,
|
||||||
|
}
|
||||||
|
this.$http.post(this.url, params).then(response => {
|
||||||
|
this.showFeedbackDialog = false
|
||||||
|
this.$buefy.toast.open({
|
||||||
|
message: "Thank you for your feedback!",
|
||||||
|
type: 'is-success',
|
||||||
|
position: 'is-bottom',
|
||||||
|
})
|
||||||
|
}, response => {
|
||||||
|
this.$buefy.toast.open({
|
||||||
|
message: "Something went wrong!",
|
||||||
|
type: 'is-danger',
|
||||||
|
position: 'is-bottom',
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
3
src/components/feedback/index.js
Normal file
3
src/components/feedback/index.js
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
import ByjoveFeedback from './ByjoveFeedback'
|
||||||
|
|
||||||
|
export default ByjoveFeedback
|
|
@ -1,5 +1,7 @@
|
||||||
import ByjoveLogo from './logo'
|
import ByjoveLogo from './logo'
|
||||||
|
import ByjoveFeedback from './feedback'
|
||||||
|
|
||||||
export {
|
export {
|
||||||
ByjoveLogo,
|
ByjoveLogo,
|
||||||
|
ByjoveFeedback,
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,3 @@
|
||||||
import Vue from 'vue'
|
|
||||||
import ByjoveLogo from './ByjoveLogo'
|
import ByjoveLogo from './ByjoveLogo'
|
||||||
|
|
||||||
Vue.component('byjove-logo', ByjoveLogo)
|
|
||||||
|
|
||||||
export default ByjoveLogo
|
export default ByjoveLogo
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
|
|
||||||
import * as components from './components'
|
|
||||||
|
|
||||||
export * from './components'
|
export * from './components'
|
||||||
|
|
||||||
|
export {ByjoveStoreConfig} from './store'
|
||||||
|
|
||||||
export default {}
|
export default {}
|
||||||
|
|
|
@ -1,10 +1,15 @@
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
|
import Vuex from 'vuex'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
import store from './store'
|
import {ByjoveStoreConfig} from './store'
|
||||||
|
|
||||||
Vue.config.productionTip = false
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
|
Vue.use(Vuex)
|
||||||
|
|
||||||
|
let store = new Vuex.Store(ByjoveStoreConfig)
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
router,
|
router,
|
||||||
store,
|
store,
|
||||||
|
|
24
src/store.js
24
src/store.js
|
@ -1,16 +1,20 @@
|
||||||
import Vue from 'vue'
|
|
||||||
import Vuex from 'vuex'
|
|
||||||
|
|
||||||
Vue.use(Vuex)
|
export let ByjoveStoreConfig = {
|
||||||
|
|
||||||
export default new Vuex.Store({
|
|
||||||
state: {
|
state: {
|
||||||
|
appVersion: null,
|
||||||
|
user: null,
|
||||||
|
permissions: [],
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
|
setAppVersion(state, payload) {
|
||||||
|
state.appVersion = payload
|
||||||
},
|
},
|
||||||
actions: {
|
setUser(state, payload) {
|
||||||
|
state.user = payload
|
||||||
|
},
|
||||||
|
setPermissions(state, payload) {
|
||||||
|
state.permissions = payload
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// actions: {},
|
||||||
}
|
}
|
||||||
})
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue