Refactor feedback dialog for Buefy themes
for more proper Vue.js component usage pattern
This commit is contained in:
Lance Edgar
parent
4499a872d8
commit
b8274d92db
|
|
@ -22,8 +22,10 @@ body {
|
|||
******************************/
|
||||
|
||||
header .level {
|
||||
/* TODO: not sure what this 60px was supposed to do? but it broke the */
|
||||
/* styles for the feedback dialog, so disabled it is.
|
||||
/* height: 60px; */
|
||||
line-height: 60px;
|
||||
/* line-height: 60px; */
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,59 +1,42 @@
|
|||
|
||||
const FeedbackForm = {
|
||||
props: ['user_name', 'referrer'],
|
||||
let FeedbackForm = {
|
||||
props: ['action'],
|
||||
template: '#feedback-template',
|
||||
methods: {
|
||||
|
||||
showFeedback() {
|
||||
this.showDialog = true
|
||||
this.$nextTick(function() {
|
||||
this.$refs.textarea.focus()
|
||||
})
|
||||
},
|
||||
|
||||
sendFeedback() {
|
||||
|
||||
var textarea = $('.feedback-dialog textarea');
|
||||
var msg = $.trim(textarea.val());
|
||||
if (! msg) {
|
||||
alert("Please enter a message.");
|
||||
textarea.select();
|
||||
textarea.focus();
|
||||
return;
|
||||
let params = {
|
||||
referrer: this.referrer,
|
||||
user: this.userUUID,
|
||||
user_name: this.userName,
|
||||
message: this.message.trim(),
|
||||
}
|
||||
|
||||
// disable_button(dialog_button(event));
|
||||
let headers = {
|
||||
// TODO: should find a better way to handle CSRF token
|
||||
'X-CSRF-TOKEN': this.csrftoken,
|
||||
}
|
||||
|
||||
var form = $('.feedback-dialog').parents('form');
|
||||
// TODO: this was copied from default template, but surely we could
|
||||
// just serialize() the form instead?
|
||||
var data = {
|
||||
_csrf: form.find('input[name="_csrf"]').val(),
|
||||
referrer: location.href,
|
||||
user: form.find('input[name="user"]').val(),
|
||||
user_name: form.find('input[name="user_name"]').val(),
|
||||
message: msg
|
||||
};
|
||||
|
||||
var that = this;
|
||||
$.ajax(form.attr('action'), {
|
||||
method: 'POST',
|
||||
data: data,
|
||||
success: function(data) {
|
||||
that.$emit('close');
|
||||
alert("Message successfully sent.\n\nThank you for your feedback.");
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
this.$http.post(this.action, params, {headers: headers}).then(({ data }) => {
|
||||
this.showDialog = false
|
||||
alert("Message successfully sent.\n\nThank you for your feedback.")
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
new Vue({
|
||||
el: '#feedback-app',
|
||||
methods: {
|
||||
showFeedback() {
|
||||
this.$modal.open({
|
||||
parent: this,
|
||||
canCancel: ['escape', 'x'],
|
||||
component: FeedbackForm,
|
||||
hasModalCard: true,
|
||||
props: {
|
||||
referrer: location.href
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
let FeedbackFormData = {
|
||||
referrer: null,
|
||||
userUUID: null,
|
||||
userName: null,
|
||||
message: '',
|
||||
showDialog: false,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,69 +1,88 @@
|
|||
## -*- coding: utf-8; -*-
|
||||
|
||||
<%def name="feedback_dialog()">
|
||||
<div id="feedback-template" style="display: none;">
|
||||
${h.form(url('feedback'))}
|
||||
${h.csrf_token(request)}
|
||||
${h.hidden('user', value=request.user.uuid if request.user else None)}
|
||||
<div class="modal-card feedback-dialog">
|
||||
<script type="text/x-template" id="feedback-template">
|
||||
<div>
|
||||
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">User Feedback</p>
|
||||
</header>
|
||||
<div class="level-item">
|
||||
<b-button type="is-primary"
|
||||
@click="showFeedback()"
|
||||
icon-pack="fas"
|
||||
icon-left="fas fa-comment">
|
||||
Feedback
|
||||
</b-button>
|
||||
</div>
|
||||
|
||||
<section class="modal-card-body">
|
||||
<p>
|
||||
Questions, suggestions, comments, complaints, etc.
|
||||
<span class="red">regarding this website</span> are
|
||||
welcome and may be submitted below.
|
||||
</p>
|
||||
<b-modal has-modal-card
|
||||
:active.sync="showDialog">
|
||||
<div class="modal-card">
|
||||
|
||||
<b-field label="User Name">
|
||||
% if request.user:
|
||||
<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.
|
||||
<span class="red">regarding this website</span> are
|
||||
welcome and may be submitted below.
|
||||
</p>
|
||||
|
||||
<b-field label="User Name">
|
||||
<b-input v-model="userName"
|
||||
% if request.user:
|
||||
disabled
|
||||
% endif
|
||||
>
|
||||
</b-input>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Referring URL">
|
||||
<b-input
|
||||
value="${six.text_type(request.user)}"
|
||||
## :value="referrer"
|
||||
v-model="referrer"
|
||||
disabled="true">
|
||||
</b-input>
|
||||
% else:
|
||||
<b-input
|
||||
name="user_name">
|
||||
</b-field>
|
||||
|
||||
<b-field label="Message">
|
||||
<b-input type="textarea"
|
||||
v-model="message"
|
||||
ref="textarea">
|
||||
</b-input>
|
||||
% endif
|
||||
</b-field>
|
||||
% if request.user:
|
||||
<b-input
|
||||
name="user_name"
|
||||
type="hidden"
|
||||
value="${six.text_type(request.user)}">
|
||||
</b-input>
|
||||
% endif
|
||||
</b-field>
|
||||
|
||||
<b-field label="Referring URL">
|
||||
<b-input
|
||||
:value="referrer"
|
||||
disabled="true">
|
||||
</b-input>
|
||||
</b-field>
|
||||
<b-input
|
||||
name="referrer"
|
||||
type="hidden"
|
||||
:value="referrer">
|
||||
</b-input>
|
||||
</section>
|
||||
|
||||
<b-field label="Message">
|
||||
<b-input
|
||||
name="message"
|
||||
type="textarea">
|
||||
</b-input>
|
||||
</b-field>
|
||||
<footer class="modal-card-foot">
|
||||
<b-button @click="showDialog = false">
|
||||
Cancel
|
||||
</b-button>
|
||||
<once-button type="is-primary"
|
||||
@click="sendFeedback()"
|
||||
:disabled="!message.trim()"
|
||||
text="Send Message">
|
||||
</once-button>
|
||||
</footer>
|
||||
</div>
|
||||
</b-modal>
|
||||
|
||||
</section>
|
||||
|
||||
<footer class="modal-card-foot">
|
||||
<button type="button" class="button" @click="$parent.close()">Cancel</button>
|
||||
<button type="button" class="button is-primary" @click="sendFeedback()">Send</button>
|
||||
</footer>
|
||||
</div>
|
||||
${h.end_form()}
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
FeedbackFormData.csrftoken = ${json.dumps(request.session.get_csrf_token() or request.session.new_csrf_token())|n}
|
||||
FeedbackFormData.referrer = location.href
|
||||
|
||||
% if request.user:
|
||||
FeedbackFormData.userUUID = ${json.dumps(request.user.uuid)|n}
|
||||
FeedbackFormData.userName = ${json.dumps(six.text_type(request.user))|n}
|
||||
% endif
|
||||
|
||||
FeedbackForm.data = function() { return FeedbackFormData }
|
||||
|
||||
Vue.component('feedback-form', FeedbackForm)
|
||||
|
||||
</script>
|
||||
</%def>
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@
|
|||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="level">
|
||||
<nav class="level" style="margin: 0.5rem auto;">
|
||||
<div class="level-left">
|
||||
|
||||
## Current Context
|
||||
|
|
@ -180,18 +180,16 @@
|
|||
</div>
|
||||
% endif
|
||||
|
||||
## Feedback Button
|
||||
<div class="level-item" id="feedback-app">
|
||||
<a class="button is-primary" @click="showFeedback()">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-comment"></i>
|
||||
</span>
|
||||
<span>Feedback</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
## Feedback Dialog
|
||||
## Feedback Button / Dialog
|
||||
${h.javascript_link(request.static_url('tailbone:static/themes/falafel/js/tailbone.feedback.js') + '?ver={}'.format(tailbone.__version__))}
|
||||
${feedback_dialog()}
|
||||
<div id="feedback-app">
|
||||
<feedback-form action="${url('feedback')}">
|
||||
</feedback-form>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
new Vue({el: '#feedback-app'})
|
||||
</script>
|
||||
|
||||
</div><!-- level-right -->
|
||||
</nav><!-- level -->
|
||||
|
|
@ -257,8 +255,6 @@
|
|||
|
||||
</div><!-- content-wrapper -->
|
||||
|
||||
${h.javascript_link(request.static_url('tailbone:static/themes/falafel/js/tailbone.feedback.js') + '?ver={}'.format(tailbone.__version__))}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue