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