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,
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
							
								
								
									
										34
									
								
								src/store.js
									
										
									
									
									
								
							
							
						
						
									
										34
									
								
								src/store.js
									
										
									
									
									
								
							| 
						 | 
					@ -1,16 +1,20 @@
 | 
				
			||||||
import Vue from 'vue'
 | 
					 | 
				
			||||||
import Vuex from 'vuex'
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
Vue.use(Vuex)
 | 
					export let ByjoveStoreConfig = {
 | 
				
			||||||
 | 
					    state: {
 | 
				
			||||||
export default new Vuex.Store({
 | 
					        appVersion: null,
 | 
				
			||||||
  state: {
 | 
					        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