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>
|
</div>
|
||||||
|
|
||||||
% if request.has_perm('common.feedback'):
|
${parent.render_feedback_button()}
|
||||||
<feedback-form
|
|
||||||
action="${url('feedback')}"
|
|
||||||
:message="feedbackMessage">
|
|
||||||
</feedback-form>
|
|
||||||
% endif
|
|
||||||
</%def>
|
</%def>
|
||||||
|
|
||||||
<%def name="render_crud_header_buttons()">
|
<%def name="render_crud_header_buttons()">
|
||||||
|
|
@ -262,174 +257,133 @@
|
||||||
/>
|
/>
|
||||||
</%def>
|
</%def>
|
||||||
|
|
||||||
<%def name="render_vue_templates()">
|
<%def name="render_vue_template_feedback()">
|
||||||
${parent.render_vue_templates()}
|
<script type="text/x-template" id="feedback-template">
|
||||||
|
<div>
|
||||||
|
|
||||||
${page_help.render_template()}
|
<div class="level-item">
|
||||||
${page_help.declare_vars()}
|
<b-button type="is-primary"
|
||||||
|
@click="showFeedback()"
|
||||||
|
icon-pack="fas"
|
||||||
|
icon-left="comment">
|
||||||
|
Feedback
|
||||||
|
</b-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
% if request.has_perm('common.feedback'):
|
<b-modal has-modal-card
|
||||||
<script type="text/x-template" id="feedback-template">
|
:active.sync="showDialog">
|
||||||
<div>
|
<div class="modal-card">
|
||||||
|
|
||||||
<div class="level-item">
|
<header class="modal-card-head">
|
||||||
<b-button type="is-primary"
|
<p class="modal-card-title">User Feedback</p>
|
||||||
@click="showFeedback()"
|
</header>
|
||||||
icon-pack="fas"
|
|
||||||
icon-left="comment">
|
|
||||||
Feedback
|
|
||||||
</b-button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<b-modal has-modal-card
|
<section class="modal-card-body">
|
||||||
:active.sync="showDialog">
|
<p class="block">
|
||||||
<div class="modal-card">
|
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">
|
<b-field label="User Name">
|
||||||
<p class="modal-card-title">User Feedback</p>
|
<b-input v-model="userName"
|
||||||
</header>
|
% if request.user:
|
||||||
|
disabled
|
||||||
|
% endif
|
||||||
|
>
|
||||||
|
</b-input>
|
||||||
|
</b-field>
|
||||||
|
|
||||||
<section class="modal-card-body">
|
<b-field label="Referring URL">
|
||||||
<p class="block">
|
<b-input
|
||||||
Questions, suggestions, comments, complaints, etc.
|
v-model="referrer"
|
||||||
<span class="red">regarding this website</span> are
|
disabled="true">
|
||||||
welcome and may be submitted below.
|
</b-input>
|
||||||
</p>
|
</b-field>
|
||||||
|
|
||||||
<b-field label="User Name">
|
<b-field label="Message">
|
||||||
<b-input v-model="userName"
|
<b-input type="textarea"
|
||||||
% if request.user:
|
v-model="message"
|
||||||
disabled
|
ref="textarea">
|
||||||
% endif
|
</b-input>
|
||||||
>
|
</b-field>
|
||||||
</b-input>
|
|
||||||
</b-field>
|
|
||||||
|
|
||||||
<b-field label="Referring URL">
|
% if config.get_bool('tailbone.feedback_allows_reply'):
|
||||||
<b-input
|
<div class="level">
|
||||||
v-model="referrer"
|
<div class="level-left">
|
||||||
disabled="true">
|
<div class="level-item">
|
||||||
</b-input>
|
<b-checkbox v-model="pleaseReply"
|
||||||
</b-field>
|
@input="pleaseReplyChanged">
|
||||||
|
Please email me back{{ pleaseReply ? " at: " : "" }}
|
||||||
<b-field label="Message">
|
</b-checkbox>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
% endif
|
<div class="level-item" v-show="pleaseReply">
|
||||||
|
<b-input v-model="userEmail"
|
||||||
|
ref="userEmail">
|
||||||
|
</b-input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
% endif
|
||||||
|
|
||||||
</section>
|
</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>
|
|
||||||
|
|
||||||
|
<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>
|
</div>
|
||||||
</script>
|
</b-modal>
|
||||||
<script>
|
|
||||||
|
|
||||||
const FeedbackForm = {
|
</div>
|
||||||
template: '#feedback-template',
|
</script>
|
||||||
mixins: [SimpleRequestMixin],
|
</%def>
|
||||||
props: [
|
|
||||||
'action',
|
|
||||||
'message',
|
|
||||||
],
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
showFeedback() {
|
<%def name="render_vue_script_feedback()">
|
||||||
this.referrer = location.href
|
${parent.render_vue_script_feedback()}
|
||||||
this.showDialog = true
|
<script>
|
||||||
this.$nextTick(function() {
|
|
||||||
this.$refs.textarea.focus()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
% if config.get_bool('tailbone.feedback_allows_reply'):
|
WuttaFeedbackForm.template = '#feedback-template'
|
||||||
pleaseReplyChanged(value) {
|
WuttaFeedbackForm.props.message = String
|
||||||
this.$nextTick(() => {
|
|
||||||
this.$refs.userEmail.focus()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
% endif
|
|
||||||
|
|
||||||
sendFeedback() {
|
% if config.get_bool('tailbone.feedback_allows_reply'):
|
||||||
this.sendingFeedback = true
|
|
||||||
|
|
||||||
const params = {
|
WuttaFeedbackFormData.pleaseReply = false
|
||||||
referrer: this.referrer,
|
WuttaFeedbackFormData.userEmail = null
|
||||||
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(),
|
|
||||||
}
|
|
||||||
|
|
||||||
this.simplePOST(this.action, params, response => {
|
WuttaFeedbackForm.methods.pleaseReplyChanged = function(value) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.userEmail.focus()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
this.$buefy.toast.open({
|
WuttaFeedbackForm.methods.getExtraParams = function() {
|
||||||
message: "Message sent! Thank you for your feedback.",
|
return {
|
||||||
type: 'is-info',
|
please_reply_to: this.pleaseReply ? this.userEmail : null,
|
||||||
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
|
|
||||||
})
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const FeedbackFormData = {
|
% endif
|
||||||
referrer: null,
|
|
||||||
userUUID: null,
|
|
||||||
userName: null,
|
|
||||||
userEmail: null,
|
|
||||||
% if config.get_bool('tailbone.feedback_allows_reply'):
|
|
||||||
pleaseReply: false,
|
|
||||||
% endif
|
|
||||||
showDialog: false,
|
|
||||||
sendingFeedback: false,
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
// TODO: deprecate / remove these
|
||||||
% endif
|
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>
|
||||||
|
|
||||||
<%def name="modify_vue_vars()">
|
<%def name="modify_vue_vars()">
|
||||||
|
|
@ -528,21 +482,6 @@
|
||||||
|
|
||||||
% endif
|
% 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
|
## edit fields help
|
||||||
##############################
|
##############################
|
||||||
|
|
@ -562,10 +501,4 @@
|
||||||
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.timepicker.js') + f'?ver={tailbone.__version__}')}
|
${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.timepicker.js') + f'?ver={tailbone.__version__}')}
|
||||||
${make_grid_filter_components()}
|
${make_grid_filter_components()}
|
||||||
${page_help.make_component()}
|
${page_help.make_component()}
|
||||||
% if request.has_perm('common.feedback'):
|
|
||||||
<script>
|
|
||||||
FeedbackForm.data = function() { return FeedbackFormData }
|
|
||||||
Vue.component('feedback-form', FeedbackForm)
|
|
||||||
</script>
|
|
||||||
% endif
|
|
||||||
</%def>
|
</%def>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue