Refactor feedback dialog for Buefy themes

for more proper Vue.js component usage pattern

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>

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>