From b8274d92dbbd06868f2ae82f0e18ecc7e1277597 Mon Sep 17 00:00:00 2001
From: Lance Edgar <ledgar@techsupport.coop>
Date: Fri, 5 Jul 2019 19:50:16 -0500
Subject: [PATCH] Refactor feedback dialog for Buefy themes

for more proper Vue.js component usage pattern
---
 tailbone/static/themes/falafel/css/layout.css |   4 +-
 .../themes/falafel/js/tailbone.feedback.js    |  79 +++++------
 tailbone/templates/feedback_dialog_buefy.mako | 127 ++++++++++--------
 tailbone/templates/themes/falafel/base.mako   |  24 ++--
 4 files changed, 117 insertions(+), 117 deletions(-)

diff --git a/tailbone/static/themes/falafel/css/layout.css b/tailbone/static/themes/falafel/css/layout.css
index 98d4b7be..5d1264ad 100644
--- a/tailbone/static/themes/falafel/css/layout.css
+++ b/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;
 }
diff --git a/tailbone/static/themes/falafel/js/tailbone.feedback.js b/tailbone/static/themes/falafel/js/tailbone.feedback.js
index d6da902b..8d5cca86 100644
--- a/tailbone/static/themes/falafel/js/tailbone.feedback.js
+++ b/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,
+}
diff --git a/tailbone/templates/feedback_dialog_buefy.mako b/tailbone/templates/feedback_dialog_buefy.mako
index 874ab952..7507bd91 100644
--- a/tailbone/templates/feedback_dialog_buefy.mako
+++ b/tailbone/templates/feedback_dialog_buefy.mako
@@ -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>
diff --git a/tailbone/templates/themes/falafel/base.mako b/tailbone/templates/themes/falafel/base.mako
index f5df0d76..15aad18b 100644
--- a/tailbone/templates/themes/falafel/base.mako
+++ b/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
-          <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>