Refactor feedback dialog for Buefy themes

for more proper Vue.js component usage pattern

tailbone/static/themes/falafel/css/layout.css

@@ -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;
 }

tailbone/static/themes/falafel/js/tailbone.feedback.js

@@ -1,59 +1,42 @@
 
-const FeedbackForm = {
+let FeedbackForm = {
-    props: ['user_name', 'referrer'],
+    props: ['action'],
     template: '#feedback-template',
     methods: {
+
+        showFeedback() {
+            this.showDialog = true
+            this.$nextTick(function() {
+                this.$refs.textarea.focus()
+            })
+        },
+
         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
-            var form = $('.feedback-dialog').parents('form');
+                'X-CSRF-TOKEN': this.csrftoken,
-            // 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({
+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
-                }
-            });
-        }
-    }
-});

tailbone/templates/feedback_dialog_buefy.mako

@@ -1,11 +1,21 @@
 ## -*- coding: utf-8; -*-
 
 <%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="level-item">
-    <div class="modal-card feedback-dialog">
+        <b-button type="is-primary"
+                  @click="showFeedback()"
+                  icon-pack="fas"
+                  icon-left="fas fa-comment">
+          Feedback
+        </b-button>
+      </div>
+
+      <b-modal has-modal-card
+               :active.sync="showDialog">
+        <div class="modal-card">
 
           <header class="modal-card-head">
             <p class="modal-card-title">User Feedback</p>
@@ -19,51 +29,60 @@
             </p>
 
             <b-field label="User Name">
+              <b-input v-model="userName"
                        % if request.user:
-              <b-input
+                       disabled
-                 value="${six.text_type(request.user)}"
-                 disabled="true">
-              </b-input>
-          % else:
-              <b-input
-                 name="user_name">
-              </b-input>
                        % endif
+                       >
+              </b-input>
             </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">
               <b-input
-             :value="referrer"
+                 ## :value="referrer"
+                 v-model="referrer"
                  disabled="true">
               </b-input>
             </b-field>
-        <b-input
-           name="referrer"
-           type="hidden"
-           :value="referrer">
-        </b-input>
 
             <b-field label="Message">
-          <b-input
+              <b-input type="textarea"
-             name="message"
+                       v-model="message"
-             type="textarea">
+                       ref="textarea">
               </b-input>
             </b-field>
 
           </section>
 
           <footer class="modal-card-foot">
-        <button type="button" class="button" @click="$parent.close()">Cancel</button>
+            <b-button @click="showDialog = false">
-        <button type="button" class="button is-primary" @click="sendFeedback()">Send</button>
+              Cancel
+            </b-button>
+            <once-button type="is-primary"
+                         @click="sendFeedback()"
+                         :disabled="!message.trim()"
+                         text="Send Message">
+            </once-button>
           </footer>
         </div>
-    ${h.end_form()}
+      </b-modal>
+
     </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>

tailbone/templates/themes/falafel/base.mako

@@ -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
+          ## 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()}
+          <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>