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

@@ -164,12 +164,7 @@
       />
   </div>
 
-  % if request.has_perm('common.feedback'):
+  ${parent.render_feedback_button()}
-      <feedback-form
-         action="${url('feedback')}"
-         :message="feedbackMessage">
-      </feedback-form>
-  % endif
 </%def>
 
 <%def name="render_crud_header_buttons()">
@@ -262,13 +257,7 @@
              />
 </%def>
 
-<%def name="render_vue_templates()">
+<%def name="render_vue_template_feedback()">
-  ${parent.render_vue_templates()}
-
-  ${page_help.render_template()}
-  ${page_help.declare_vars()}
-
-  % if request.has_perm('common.feedback'):
   <script type="text/x-template" id="feedback-template">
     <div>
 
@@ -347,7 +336,7 @@
                       icon-pack="fas"
                       icon-left="paper-plane"
                       @click="sendFeedback()"
-                          :disabled="sendingFeedback || !message.trim()">
+                      :disabled="sendingFeedback || !message || !message.trim()">
               {{ sendingFeedback ? "Working, please wait..." : "Send Message" }}
             </b-button>
           </footer>
@@ -356,80 +345,45 @@
 
     </div>
   </script>
+</%def>
+
+<%def name="render_vue_script_feedback()">
+  ${parent.render_vue_script_feedback()}
   <script>
 
-        const FeedbackForm = {
+    WuttaFeedbackForm.template = '#feedback-template'
-            template: '#feedback-template',
+    WuttaFeedbackForm.props.message = String
-            mixins: [SimpleRequestMixin],
-            props: [
-                'action',
-                'message',
-            ],
-            methods: {
-
-                showFeedback() {
-                    this.referrer = location.href
-                    this.showDialog = true
-                    this.$nextTick(function() {
-                        this.$refs.textarea.focus()
-                    })
-                },
 
     % if config.get_bool('tailbone.feedback_allows_reply'):
-                    pleaseReplyChanged(value) {
+
+        WuttaFeedbackFormData.pleaseReply = false
+        WuttaFeedbackFormData.userEmail = null
+
+        WuttaFeedbackForm.methods.pleaseReplyChanged = function(value) {
             this.$nextTick(() => {
                 this.$refs.userEmail.focus()
             })
-                    },
+        }
-                % endif
 
-                sendFeedback() {
+        WuttaFeedbackForm.methods.getExtraParams = function() {
-                    this.sendingFeedback = true
+            return {
-
-                    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(),
-                    }
 
-                    this.simplePOST(this.action, params, response => {
+    // TODO: deprecate / remove these
-
+    const FeedbackForm = WuttaFeedbackForm
-                        this.$buefy.toast.open({
+    const FeedbackFormData = WuttaFeedbackFormData
-                            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
-                    })
-                },
-            }
-        }
-
-        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,
-        }
 
   </script>
-  % endif
+</%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>