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
|
@ -7,9 +7,7 @@
|
|||
"build": "vue-cli-service build --target lib --name byjove src/index.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^2.6.10",
|
||||
"vue-router": "^3.0.3",
|
||||
"vuex": "^3.0.1"
|
||||
"vue": "^2.6.10"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@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 ByjoveFeedback from './feedback'
|
||||
|
||||
export {
|
||||
ByjoveLogo,
|
||||
ByjoveFeedback,
|
||||
}
|
||||
|
|
|
@ -1,6 +1,3 @@
|
|||
import Vue from 'vue'
|
||||
import ByjoveLogo from './ByjoveLogo'
|
||||
|
||||
Vue.component('byjove-logo', ByjoveLogo)
|
||||
|
||||
export default ByjoveLogo
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
import * as components from './components'
|
||||
|
||||
export * from './components'
|
||||
|
||||
export {ByjoveStoreConfig} from './store'
|
||||
|
||||
export default {}
|
||||
|
|
|
@ -1,10 +1,15 @@
|
|||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import {ByjoveStoreConfig} from './store'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
let store = new Vuex.Store(ByjoveStoreConfig)
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
|
|
34
src/store.js
34
src/store.js
|
@ -1,16 +1,20 @@
|
|||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
|
||||
},
|
||||
mutations: {
|
||||
|
||||
},
|
||||
actions: {
|
||||
|
||||
}
|
||||
})
|
||||
export let ByjoveStoreConfig = {
|
||||
state: {
|
||||
appVersion: null,
|
||||
user: null,
|
||||
permissions: [],
|
||||
},
|
||||
mutations: {
|
||||
setAppVersion(state, payload) {
|
||||
state.appVersion = payload
|
||||
},
|
||||
setUser(state, payload) {
|
||||
state.user = payload
|
||||
},
|
||||
setPermissions(state, payload) {
|
||||
state.permissions = payload
|
||||
},
|
||||
},
|
||||
// actions: {},
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue