Allow multiple feedback recipient options
in which case user must choose one, to send feedback
This commit is contained in:
		
							parent
							
								
									6e949eb199
								
							
						
					
					
						commit
						695ea388a6
					
				
					 2 changed files with 75 additions and 14 deletions
				
			
		|  | @ -12,16 +12,35 @@ | |||
|         <section class="modal-card-body"> | ||||
|           <p class="modal-card-title">User Feedback</p> | ||||
|           <br /> | ||||
|           <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> | ||||
|           <div v-if="hasRecipientOptions"> | ||||
|             <p class="block"> | ||||
|               Comments welcome!  Just let us know who they should go to. | ||||
|             </p> | ||||
|             <b-field label="Who To Notify?" | ||||
|                      :type="recipient ? null : 'is-danger'"> | ||||
|               <b-select v-model="recipient"> | ||||
|                 <option v-for="option in allRecipientOptions" | ||||
|                         :key="option.value" | ||||
|                         :value="option.value"> | ||||
|                   {{ option.label }} | ||||
|                 </option> | ||||
|               </b-select> | ||||
|             </b-field> | ||||
|           </div> | ||||
| 
 | ||||
|           <div v-if="!hasRecipientOptions"> | ||||
|             <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> | ||||
|           </div> | ||||
| 
 | ||||
|           <b-field label="Your Name" | ||||
|                    v-show="!userUUID"> | ||||
|  | @ -36,12 +55,12 @@ | |||
|           </b-field> | ||||
| 
 | ||||
|           <div class="buttons"> | ||||
|             <b-button @click="showFeedbackDialog = false"> | ||||
|             <b-button @click="cancelFeedback()"> | ||||
|               Cancel | ||||
|             </b-button> | ||||
|             <b-button type="is-primary" | ||||
|                          @click="sendFeedback()" | ||||
|                          :disabled="!message"> | ||||
|                       @click="sendFeedback()" | ||||
|                       :disabled="sendIsDisabled"> | ||||
|               Send Note | ||||
|             </b-button> | ||||
|           </div> | ||||
|  | @ -59,29 +78,64 @@ export default { | |||
|         url: String, | ||||
|         // userUUID: String, | ||||
|         // user: Object, | ||||
|         recipientOptions: { | ||||
|             type: Array, | ||||
|             default: null, | ||||
|         }, | ||||
|     }, | ||||
|     data() { | ||||
|         return { | ||||
|             showFeedbackDialog: false, | ||||
|             referringURL: null, | ||||
|             recipient: null, | ||||
|             userUUID: null, | ||||
|             userName: null, | ||||
|             message: null, | ||||
|         } | ||||
|     }, | ||||
|     computed: { | ||||
|         allRecipientOptions() { | ||||
|             if (this.recipientOptions !== null) { | ||||
|                 return this.recipientOptions | ||||
|             } | ||||
|             return [] | ||||
|         }, | ||||
|         hasRecipientOptions() { | ||||
|             return !!this.allRecipientOptions.length | ||||
|         }, | ||||
|         sendIsDisabled() { | ||||
|             if (this.hasRecipientOptions && !this.recipient) { | ||||
|                 return true | ||||
|             } | ||||
|             if (!this.message) { | ||||
|                 return true | ||||
|             } | ||||
|             return false | ||||
|         }, | ||||
|     }, | ||||
|     methods: { | ||||
| 
 | ||||
|         clearForm() { | ||||
|             this.recipient = null | ||||
|             this.message = null | ||||
|         }, | ||||
| 
 | ||||
|         showFeedback() { | ||||
|             this.referringURL = location.href | ||||
|             if (this.$store.state.user) { | ||||
|                 this.userUUID = this.$store.state.user.uuid | ||||
|             } | ||||
|             this.message = null | ||||
|             this.showFeedbackDialog = true | ||||
|         }, | ||||
| 
 | ||||
|         cancelFeedback() { | ||||
|             this.showFeedbackDialog = false | ||||
|             // this.clearForm() | ||||
|         }, | ||||
| 
 | ||||
|         sendFeedback() { | ||||
|             let params = { | ||||
|                 email_key: this.recipient, | ||||
|                 referrer: this.referringURL, | ||||
|                 user: this.userUUID, | ||||
|                 // user: this.user ? this.user.uuid : null, | ||||
|  | @ -90,6 +144,7 @@ export default { | |||
|             } | ||||
|             this.$http.post(this.url, params).then(response => { | ||||
|                 this.showFeedbackDialog = false | ||||
|                 this.clearForm() | ||||
|                 this.$buefy.toast.open({ | ||||
|                     message: "Thank you for your feedback!", | ||||
|                     type: 'is-success', | ||||
|  |  | |||
|  | @ -60,7 +60,9 @@ | |||
| 
 | ||||
|       <div v-if="shouldShowFeedback" | ||||
|            class="level-item"> | ||||
|         <byjove-feedback :url="feedbackUrl"></byjove-feedback> | ||||
|         <byjove-feedback :url="feedbackUrl" | ||||
|                          :recipient-options="feedbackRecipientOptions"> | ||||
|         </byjove-feedback> | ||||
|       </div> | ||||
|     </nav> | ||||
| 
 | ||||
|  | @ -93,6 +95,10 @@ export default { | |||
|             type: String, | ||||
|             default: '/api/feedback', | ||||
|         }, | ||||
|         feedbackRecipientOptions: { | ||||
|             type: Array, | ||||
|             default: null, | ||||
|         }, | ||||
|         includeAboutLink: { | ||||
|             type: Boolean, | ||||
|             default: true, | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue
	
	 Lance Edgar
						Lance Edgar