fix: refactor waterpark base template to use wutta feedback component
although for now we still provide the template and add reply-to
This commit is contained in:
Lance Edgar
parent
b7991b5dc6
commit
d1f4c0f150
|
|
@ -164,12 +164,7 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
% if request.has_perm('common.feedback'):
|
||||
<feedback-form
|
||||
action="${url('feedback')}"
|
||||
:message="feedbackMessage">
|
||||
</feedback-form>
|
||||
% endif
|
||||
${parent.render_feedback_button()}
|
||||
</%def>
|
||||
|
||||
<%def name="render_crud_header_buttons()">
|
||||
|
|
@ -262,174 +257,133 @@
|
|||
/>
|
||||
</%def>
|
||||
|
||||
<%def name="render_vue_templates()">
|
||||
${parent.render_vue_templates()}
|
||||
<%def name="render_vue_template_feedback()">
|
||||
<script type="text/x-template" id="feedback-template">
|
||||
<div>
|
||||
|
||||
${page_help.render_template()}
|
||||
${page_help.declare_vars()}
|
||||
<div class="level-item">
|
||||
<b-button type="is-primary"
|
||||
@click="showFeedback()"
|
||||
icon-pack="fas"
|
||||
icon-left="comment">
|
||||
Feedback
|
||||
</b-button>
|
||||
</div>
|
||||
|
||||
% if request.has_perm('common.feedback'):
|
||||
<script type="text/x-template" id="feedback-template">
|
||||
<div>
|
||||
<b-modal has-modal-card
|
||||
:active.sync="showDialog">
|
||||
<div class="modal-card">
|
||||
|
||||
<div class="level-item">
|
||||
<b-button type="is-primary"
|
||||
@click="showFeedback()"
|
||||
icon-pack="fas"
|
||||
icon-left="comment">
|
||||
Feedback
|
||||
</b-button>
|
||||
</div>
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">User Feedback</p>
|
||||
</header>
|
||||
|
||||
<b-modal has-modal-card
|
||||
:active.sync="showDialog">
|
||||
<div class="modal-card">
|
||||
<section class="modal-card-body">
|
||||
<p class="block">
|
||||
Questions, suggestions, comments, complaints, etc.
|
||||
<span class="red">regarding this website</span> are
|
||||
welcome and may be submitted below.
|
||||
</p>
|
||||
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">User Feedback</p>
|
||||
</header>
|
||||
<b-field label="User Name">
|
||||
<b-input v-model="userName"
|
||||
% if request.user:
|
||||
disabled
|
||||
% endif
|
||||
>
|
||||
</b-input>
|
||||
</b-field>
|
||||
|
||||
<section class="modal-card-body">
|
||||
<p class="block">
|
||||
Questions, suggestions, comments, complaints, etc.
|
||||
<span class="red">regarding this website</span> are
|
||||
welcome and may be submitted below.
|
||||
</p>
|
||||
<b-field label="Referring URL">
|
||||
<b-input
|
||||
v-model="referrer"
|
||||
disabled="true">
|
||||
</b-input>
|
||||
</b-field>
|
||||
|
||||
<b-field label="User Name">
|
||||
<b-input v-model="userName"
|
||||
% if request.user:
|
||||
disabled
|
||||
% endif
|
||||
>
|
||||
</b-input>
|
||||
</b-field>
|
||||
<b-field label="Message">
|
||||
<b-input type="textarea"
|
||||
v-model="message"
|
||||
ref="textarea">
|
||||
</b-input>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Referring URL">
|
||||
<b-input
|
||||
v-model="referrer"
|
||||
disabled="true">
|
||||
</b-input>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Message">
|
||||
<b-input type="textarea"
|
||||
v-model="message"
|
||||
ref="textarea">
|
||||
</b-input>
|
||||
</b-field>
|
||||
|
||||
% if config.get_bool('tailbone.feedback_allows_reply'):
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<b-checkbox v-model="pleaseReply"
|
||||
@input="pleaseReplyChanged">
|
||||
Please email me back{{ pleaseReply ? " at: " : "" }}
|
||||
</b-checkbox>
|
||||
</div>
|
||||
<div class="level-item" v-show="pleaseReply">
|
||||
<b-input v-model="userEmail"
|
||||
ref="userEmail">
|
||||
</b-input>
|
||||
</div>
|
||||
</div>
|
||||
% if config.get_bool('tailbone.feedback_allows_reply'):
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<b-checkbox v-model="pleaseReply"
|
||||
@input="pleaseReplyChanged">
|
||||
Please email me back{{ pleaseReply ? " at: " : "" }}
|
||||
</b-checkbox>
|
||||
</div>
|
||||
% endif
|
||||
<div class="level-item" v-show="pleaseReply">
|
||||
<b-input v-model="userEmail"
|
||||
ref="userEmail">
|
||||
</b-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
% endif
|
||||
|
||||
</section>
|
||||
|
||||
<footer class="modal-card-foot">
|
||||
<b-button @click="showDialog = false">
|
||||
Cancel
|
||||
</b-button>
|
||||
<b-button type="is-primary"
|
||||
icon-pack="fas"
|
||||
icon-left="paper-plane"
|
||||
@click="sendFeedback()"
|
||||
:disabled="sendingFeedback || !message.trim()">
|
||||
{{ sendingFeedback ? "Working, please wait..." : "Send Message" }}
|
||||
</b-button>
|
||||
</footer>
|
||||
</div>
|
||||
</b-modal>
|
||||
</section>
|
||||
|
||||
<footer class="modal-card-foot">
|
||||
<b-button @click="showDialog = false">
|
||||
Cancel
|
||||
</b-button>
|
||||
<b-button type="is-primary"
|
||||
icon-pack="fas"
|
||||
icon-left="paper-plane"
|
||||
@click="sendFeedback()"
|
||||
:disabled="sendingFeedback || !message || !message.trim()">
|
||||
{{ sendingFeedback ? "Working, please wait..." : "Send Message" }}
|
||||
</b-button>
|
||||
</footer>
|
||||
</div>
|
||||
</script>
|
||||
<script>
|
||||
</b-modal>
|
||||
|
||||
const FeedbackForm = {
|
||||
template: '#feedback-template',
|
||||
mixins: [SimpleRequestMixin],
|
||||
props: [
|
||||
'action',
|
||||
'message',
|
||||
],
|
||||
methods: {
|
||||
</div>
|
||||
</script>
|
||||
</%def>
|
||||
|
||||
showFeedback() {
|
||||
this.referrer = location.href
|
||||
this.showDialog = true
|
||||
this.$nextTick(function() {
|
||||
this.$refs.textarea.focus()
|
||||
})
|
||||
},
|
||||
<%def name="render_vue_script_feedback()">
|
||||
${parent.render_vue_script_feedback()}
|
||||
<script>
|
||||
|
||||
% if config.get_bool('tailbone.feedback_allows_reply'):
|
||||
pleaseReplyChanged(value) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.userEmail.focus()
|
||||
})
|
||||
},
|
||||
% endif
|
||||
WuttaFeedbackForm.template = '#feedback-template'
|
||||
WuttaFeedbackForm.props.message = String
|
||||
|
||||
sendFeedback() {
|
||||
this.sendingFeedback = true
|
||||
% if config.get_bool('tailbone.feedback_allows_reply'):
|
||||
|
||||
const params = {
|
||||
referrer: this.referrer,
|
||||
user: this.userUUID,
|
||||
user_name: this.userName,
|
||||
% if config.get_bool('tailbone.feedback_allows_reply'):
|
||||
please_reply_to: this.pleaseReply ? this.userEmail : null,
|
||||
% endif
|
||||
message: this.message.trim(),
|
||||
}
|
||||
WuttaFeedbackFormData.pleaseReply = false
|
||||
WuttaFeedbackFormData.userEmail = null
|
||||
|
||||
this.simplePOST(this.action, params, response => {
|
||||
WuttaFeedbackForm.methods.pleaseReplyChanged = function(value) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.userEmail.focus()
|
||||
})
|
||||
}
|
||||
|
||||
this.$buefy.toast.open({
|
||||
message: "Message sent! Thank you for your feedback.",
|
||||
type: 'is-info',
|
||||
duration: 4000, // 4 seconds
|
||||
})
|
||||
|
||||
this.showDialog = false
|
||||
// clear out message, in case they need to send another
|
||||
this.message = ""
|
||||
this.sendingFeedback = false
|
||||
|
||||
}, response => { // failure
|
||||
this.sendingFeedback = false
|
||||
})
|
||||
},
|
||||
WuttaFeedbackForm.methods.getExtraParams = function() {
|
||||
return {
|
||||
please_reply_to: this.pleaseReply ? this.userEmail : null,
|
||||
}
|
||||
}
|
||||
|
||||
const FeedbackFormData = {
|
||||
referrer: null,
|
||||
userUUID: null,
|
||||
userName: null,
|
||||
userEmail: null,
|
||||
% if config.get_bool('tailbone.feedback_allows_reply'):
|
||||
pleaseReply: false,
|
||||
% endif
|
||||
showDialog: false,
|
||||
sendingFeedback: false,
|
||||
}
|
||||
% endif
|
||||
|
||||
</script>
|
||||
% endif
|
||||
// TODO: deprecate / remove these
|
||||
const FeedbackForm = WuttaFeedbackForm
|
||||
const FeedbackFormData = WuttaFeedbackFormData
|
||||
|
||||
</script>
|
||||
</%def>
|
||||
|
||||
<%def name="render_vue_templates()">
|
||||
${parent.render_vue_templates()}
|
||||
${page_help.render_template()}
|
||||
${page_help.declare_vars()}
|
||||
</%def>
|
||||
|
||||
<%def name="modify_vue_vars()">
|
||||
|
|
@ -528,21 +482,6 @@
|
|||
|
||||
% endif
|
||||
|
||||
##############################
|
||||
## feedback
|
||||
##############################
|
||||
|
||||
% if request.has_perm('common.feedback'):
|
||||
|
||||
WholePageData.feedbackMessage = ""
|
||||
|
||||
% if request.user:
|
||||
FeedbackFormData.userUUID = ${json.dumps(request.user.uuid)|n}
|
||||
FeedbackFormData.userName = ${json.dumps(str(request.user))|n}
|
||||
% endif
|
||||
|
||||
% endif
|
||||
|
||||
##############################
|
||||
## edit fields help
|
||||
##############################
|
||||
|
|
@ -562,10 +501,4 @@
|
|||
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.timepicker.js') + f'?ver={tailbone.__version__}')}
|
||||
${make_grid_filter_components()}
|
||||
${page_help.make_component()}
|
||||
% if request.has_perm('common.feedback'):
|
||||
<script>
|
||||
FeedbackForm.data = function() { return FeedbackFormData }
|
||||
Vue.component('feedback-form', FeedbackForm)
|
||||
</script>
|
||||
% endif
|
||||
</%def>
|
||||
|
|
|
|||
Loading…
Reference in a new issue