From d1f4c0f150f51b1fde0bdbdffa5a11d489f4ec9a Mon Sep 17 00:00:00 2001
From: Lance Edgar <lance@edbob.org>
Date: Mon, 26 Aug 2024 14:54:45 -0500
Subject: [PATCH] fix: refactor waterpark base template to use wutta feedback
 component

although for now we still provide the template and add reply-to
---
 tailbone/templates/themes/waterpark/base.mako | 277 +++++++-----------
 1 file changed, 105 insertions(+), 172 deletions(-)

diff --git a/tailbone/templates/themes/waterpark/base.mako b/tailbone/templates/themes/waterpark/base.mako
index 520e18ce..774479ba 100644
--- a/tailbone/templates/themes/waterpark/base.mako
+++ b/tailbone/templates/themes/waterpark/base.mako
@@ -164,12 +164,7 @@
       />
   </div>
 
-  % if request.has_perm('common.feedback'):
-      <feedback-form
-         action="${url('feedback')}"
-         :message="feedbackMessage">
-      </feedback-form>
-  % endif
+  ${parent.render_feedback_button()}
 </%def>
 
 <%def name="render_crud_header_buttons()">
@@ -262,174 +257,133 @@
              />
 </%def>
 
-<%def name="render_vue_templates()">
-  ${parent.render_vue_templates()}
+<%def name="render_vue_template_feedback()">
+  <script type="text/x-template" id="feedback-template">
+    <div>
 
-  ${page_help.render_template()}
-  ${page_help.declare_vars()}
+      <div class="level-item">
+        <b-button type="is-primary"
+                  @click="showFeedback()"
+                  icon-pack="fas"
+                  icon-left="comment">
+          Feedback
+        </b-button>
+      </div>
 
-  % if request.has_perm('common.feedback'):
-      <script type="text/x-template" id="feedback-template">
-        <div>
+      <b-modal has-modal-card
+               :active.sync="showDialog">
+        <div class="modal-card">
 
-          <div class="level-item">
-            <b-button type="is-primary"
-                      @click="showFeedback()"
-                      icon-pack="fas"
-                      icon-left="comment">
-              Feedback
-            </b-button>
-          </div>
+          <header class="modal-card-head">
+            <p class="modal-card-title">User Feedback</p>
+          </header>
 
-          <b-modal has-modal-card
-                   :active.sync="showDialog">
-            <div class="modal-card">
+          <section class="modal-card-body">
+            <p class="block">
+              Questions, suggestions, comments, complaints, etc.
+              <span class="red">regarding this website</span> are
+              welcome and may be submitted below.
+            </p>
 
-              <header class="modal-card-head">
-                <p class="modal-card-title">User Feedback</p>
-              </header>
+            <b-field label="User Name">
+              <b-input v-model="userName"
+                       % if request.user:
+                           disabled
+                       % endif
+                       >
+              </b-input>
+            </b-field>
 
-              <section class="modal-card-body">
-                <p class="block">
-                  Questions, suggestions, comments, complaints, etc.
-                  <span class="red">regarding this website</span> are
-                  welcome and may be submitted below.
-                </p>
+            <b-field label="Referring URL">
+              <b-input
+                 v-model="referrer"
+                 disabled="true">
+              </b-input>
+            </b-field>
 
-                <b-field label="User Name">
-                  <b-input v-model="userName"
-                           % if request.user:
-                               disabled
-                           % endif
-                           >
-                  </b-input>
-                </b-field>
+            <b-field label="Message">
+              <b-input type="textarea"
+                       v-model="message"
+                       ref="textarea">
+              </b-input>
+            </b-field>
 
-                <b-field label="Referring URL">
-                  <b-input
-                     v-model="referrer"
-                     disabled="true">
-                  </b-input>
-                </b-field>
-
-                <b-field label="Message">
-                  <b-input type="textarea"
-                           v-model="message"
-                           ref="textarea">
-                  </b-input>
-                </b-field>
-
-                % if config.get_bool('tailbone.feedback_allows_reply'):
-                    <div class="level">
-                      <div class="level-left">
-                        <div class="level-item">
-                          <b-checkbox v-model="pleaseReply"
-                                      @input="pleaseReplyChanged">
-                            Please email me back{{ pleaseReply ? " at: " : "" }}
-                          </b-checkbox>
-                        </div>
-                        <div class="level-item" v-show="pleaseReply">
-                          <b-input v-model="userEmail"
-                                   ref="userEmail">
-                          </b-input>
-                        </div>
-                      </div>
+            % if config.get_bool('tailbone.feedback_allows_reply'):
+                <div class="level">
+                  <div class="level-left">
+                    <div class="level-item">
+                      <b-checkbox v-model="pleaseReply"
+                                  @input="pleaseReplyChanged">
+                        Please email me back{{ pleaseReply ? " at: " : "" }}
+                      </b-checkbox>
                     </div>
-                % endif
+                    <div class="level-item" v-show="pleaseReply">
+                      <b-input v-model="userEmail"
+                               ref="userEmail">
+                      </b-input>
+                    </div>
+                  </div>
+                </div>
+            % endif
 
-              </section>
-
-              <footer class="modal-card-foot">
-                <b-button @click="showDialog = false">
-                  Cancel
-                </b-button>
-                <b-button type="is-primary"
-                          icon-pack="fas"
-                          icon-left="paper-plane"
-                          @click="sendFeedback()"
-                          :disabled="sendingFeedback || !message.trim()">
-                  {{ sendingFeedback ? "Working, please wait..." : "Send Message" }}
-                </b-button>
-              </footer>
-            </div>
-          </b-modal>
+          </section>
 
+          <footer class="modal-card-foot">
+            <b-button @click="showDialog = false">
+              Cancel
+            </b-button>
+            <b-button type="is-primary"
+                      icon-pack="fas"
+                      icon-left="paper-plane"
+                      @click="sendFeedback()"
+                      :disabled="sendingFeedback || !message || !message.trim()">
+              {{ sendingFeedback ? "Working, please wait..." : "Send Message" }}
+            </b-button>
+          </footer>
         </div>
-      </script>
-      <script>
+      </b-modal>
 
-        const FeedbackForm = {
-            template: '#feedback-template',
-            mixins: [SimpleRequestMixin],
-            props: [
-                'action',
-                'message',
-            ],
-            methods: {
+    </div>
+  </script>
+</%def>
 
-                showFeedback() {
-                    this.referrer = location.href
-                    this.showDialog = true
-                    this.$nextTick(function() {
-                        this.$refs.textarea.focus()
-                    })
-                },
+<%def name="render_vue_script_feedback()">
+  ${parent.render_vue_script_feedback()}
+  <script>
 
-                % if config.get_bool('tailbone.feedback_allows_reply'):
-                    pleaseReplyChanged(value) {
-                        this.$nextTick(() => {
-                            this.$refs.userEmail.focus()
-                        })
-                    },
-                % endif
+    WuttaFeedbackForm.template = '#feedback-template'
+    WuttaFeedbackForm.props.message = String
 
-                sendFeedback() {
-                    this.sendingFeedback = true
+    % if config.get_bool('tailbone.feedback_allows_reply'):
 
-                    const params = {
-                        referrer: this.referrer,
-                        user: this.userUUID,
-                        user_name: this.userName,
-                        % if config.get_bool('tailbone.feedback_allows_reply'):
-                            please_reply_to: this.pleaseReply ? this.userEmail : null,
-                        % endif
-                        message: this.message.trim(),
-                    }
+        WuttaFeedbackFormData.pleaseReply = false
+        WuttaFeedbackFormData.userEmail = null
 
-                    this.simplePOST(this.action, params, response => {
+        WuttaFeedbackForm.methods.pleaseReplyChanged = function(value) {
+            this.$nextTick(() => {
+                this.$refs.userEmail.focus()
+            })
+        }
 
-                        this.$buefy.toast.open({
-                            message: "Message sent!  Thank you for your feedback.",
-                            type: 'is-info',
-                            duration: 4000, // 4 seconds
-                        })
-
-                        this.showDialog = false
-                        // clear out message, in case they need to send another
-                        this.message = ""
-                        this.sendingFeedback = false
-
-                    }, response => { // failure
-                        this.sendingFeedback = false
-                    })
-                },
+        WuttaFeedbackForm.methods.getExtraParams = function() {
+            return {
+                please_reply_to: this.pleaseReply ? this.userEmail : null,
             }
         }
 
-        const FeedbackFormData = {
-            referrer: null,
-            userUUID: null,
-            userName: null,
-            userEmail: null,
-            % if config.get_bool('tailbone.feedback_allows_reply'):
-                pleaseReply: false,
-            % endif
-            showDialog: false,
-            sendingFeedback: false,
-        }
+    % endif
 
-      </script>
-  % endif
+    // TODO: deprecate / remove these
+    const FeedbackForm = WuttaFeedbackForm
+    const FeedbackFormData = WuttaFeedbackFormData
+
+  </script>
+</%def>
+
+<%def name="render_vue_templates()">
+  ${parent.render_vue_templates()}
+  ${page_help.render_template()}
+  ${page_help.declare_vars()}
 </%def>
 
 <%def name="modify_vue_vars()">
@@ -528,21 +482,6 @@
 
     % endif
 
-    ##############################
-    ## feedback
-    ##############################
-
-    % if request.has_perm('common.feedback'):
-
-        WholePageData.feedbackMessage = ""
-
-        % if request.user:
-            FeedbackFormData.userUUID = ${json.dumps(request.user.uuid)|n}
-            FeedbackFormData.userName = ${json.dumps(str(request.user))|n}
-        % endif
-
-    % endif
-
     ##############################
     ## edit fields help
     ##############################
@@ -562,10 +501,4 @@
   ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.timepicker.js') + f'?ver={tailbone.__version__}')}
   ${make_grid_filter_components()}
   ${page_help.make_component()}
-  % if request.has_perm('common.feedback'):
-      <script>
-        FeedbackForm.data = function() { return FeedbackFormData }
-        Vue.component('feedback-form', FeedbackForm)
-      </script>
-  % endif
 </%def>