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:
Lance Edgar 2019-11-06 10:54:59 -06:00
parent 7bdaeee691
commit 5ef0703d60
8 changed files with 142 additions and 24 deletions

View file

@ -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",

View 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>

View file

@ -0,0 +1,3 @@
import ByjoveFeedback from './ByjoveFeedback'
export default ByjoveFeedback

View file

@ -1,5 +1,7 @@
import ByjoveLogo from './logo'
import ByjoveFeedback from './feedback'
export {
ByjoveLogo,
ByjoveFeedback,
}

View file

@ -1,6 +1,3 @@
import Vue from 'vue'
import ByjoveLogo from './ByjoveLogo'
Vue.component('byjove-logo', ByjoveLogo)
export default ByjoveLogo

View file

@ -1,6 +1,6 @@
import * as components from './components'
export * from './components'
export {ByjoveStoreConfig} from './store'
export default {}

View file

@ -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,

View file

@ -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: {},
}