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 = {
-    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,
+}