From 59bd58aca768f9e18a1e3db7447a576c48d29191 Mon Sep 17 00:00:00 2001
From: Lance Edgar <lance@edbob.org>
Date: Tue, 20 Aug 2024 13:46:40 -0500
Subject: [PATCH] feat: add new 'waterpark' theme, based on wuttaweb w/ vue2 +
 buefy

hoping to eventually replace the 'default' view with this one, if all
goes well.  definitely needs more testing and is not exposed as an
option yet, unless configured
---
 tailbone/app.py                               |   3 +-
 tailbone/forms/core.py                        |  15 +-
 tailbone/grids/core.py                        |  14 +-
 tailbone/static/__init__.py                   |   5 +-
 tailbone/templates/appinfo/index.mako         |   4 +-
 tailbone/templates/base.mako                  |   2 +
 tailbone/templates/batch/index.mako           |   9 +-
 tailbone/templates/batch/view.mako            |  20 +-
 tailbone/templates/form.mako                  |   5 +-
 tailbone/templates/themes/waterpark/base.mako | 486 ++++++++++++++++++
 .../templates/themes/waterpark/configure.mako |   2 +
 tailbone/templates/themes/waterpark/form.mako |   2 +
 .../themes/waterpark/master/configure.mako    |   2 +
 .../themes/waterpark/master/create.mako       |   2 +
 .../themes/waterpark/master/delete.mako       |  46 ++
 .../themes/waterpark/master/edit.mako         |   2 +
 .../themes/waterpark/master/form.mako         |   2 +
 .../themes/waterpark/master/index.mako        | 294 +++++++++++
 .../themes/waterpark/master/view.mako         |   2 +
 tailbone/templates/themes/waterpark/page.mako |  48 ++
 tailbone/views/master.py                      |  12 +-
 tailbone/views/people.py                      |   2 +-
 tests/util.py                                 |   2 +-
 23 files changed, 937 insertions(+), 44 deletions(-)
 create mode 100644 tailbone/templates/themes/waterpark/base.mako
 create mode 100644 tailbone/templates/themes/waterpark/configure.mako
 create mode 100644 tailbone/templates/themes/waterpark/form.mako
 create mode 100644 tailbone/templates/themes/waterpark/master/configure.mako
 create mode 100644 tailbone/templates/themes/waterpark/master/create.mako
 create mode 100644 tailbone/templates/themes/waterpark/master/delete.mako
 create mode 100644 tailbone/templates/themes/waterpark/master/edit.mako
 create mode 100644 tailbone/templates/themes/waterpark/master/form.mako
 create mode 100644 tailbone/templates/themes/waterpark/master/index.mako
 create mode 100644 tailbone/templates/themes/waterpark/master/view.mako
 create mode 100644 tailbone/templates/themes/waterpark/page.mako

diff --git a/tailbone/app.py b/tailbone/app.py
index ad9663cf..b7262866 100644
--- a/tailbone/app.py
+++ b/tailbone/app.py
@@ -321,7 +321,8 @@ def main(global_config, **settings):
     """
     This function returns a Pyramid WSGI application.
     """
-    settings.setdefault('mako.directories', ['tailbone:templates'])
+    settings.setdefault('mako.directories', ['tailbone:templates',
+                                             'wuttaweb:templates'])
     rattail_config = make_rattail_config(settings)
     pyramid_config = make_pyramid_config(settings)
     pyramid_config.include('tailbone')
diff --git a/tailbone/forms/core.py b/tailbone/forms/core.py
index 2f1c9370..059b212a 100644
--- a/tailbone/forms/core.py
+++ b/tailbone/forms/core.py
@@ -905,7 +905,8 @@ class Form(object):
 
     def render_vue_template(self, template='/forms/deform.mako', **context):
         """ """
-        return self.render_deform(template=template, **context)
+        output = self.render_deform(template=template, **context)
+        return HTML.literal(output)
 
     def render_deform(self, dform=None, template=None, **kwargs):
         if not template:
@@ -1220,6 +1221,18 @@ class Form(object):
             # TODO: again, why does serialize() not return literal?
             return HTML.literal(field.serialize())
 
+    # TODO: this was copied from wuttaweb; can remove when we align
+    # Form class structure
+    def render_vue_finalize(self):
+        """ """
+        set_data = f"{self.vue_component}.data = function() {{ return {self.vue_component}Data }}"
+        make_component = f"Vue.component('{self.vue_tagname}', {self.vue_component})"
+        return HTML.tag('script', c=['\n',
+                                     HTML.literal(set_data),
+                                     '\n',
+                                     HTML.literal(make_component),
+                                     '\n'])
+
     def render_field_readonly(self, field_name, **kwargs):
         """
         Render the given field completely, but in read-only fashion.
diff --git a/tailbone/grids/core.py b/tailbone/grids/core.py
index 6ec55987..eada1041 100644
--- a/tailbone/grids/core.py
+++ b/tailbone/grids/core.py
@@ -216,39 +216,39 @@ class Grid(WuttaGrid):
             expose_direct_link=False,
             **kwargs,
     ):
-        if kwargs.get('component'):
+        if 'component' in kwargs:
             warnings.warn("component param is deprecated for Grid(); "
                           "please use vue_tagname param instead",
                           DeprecationWarning, stacklevel=2)
             kwargs.setdefault('vue_tagname', kwargs.pop('component'))
 
-        if kwargs.get('default_sortkey'):
+        if 'default_sortkey' in kwargs:
             warnings.warn("default_sortkey param is deprecated for Grid(); "
                           "please use sort_defaults param instead",
                           DeprecationWarning, stacklevel=2)
-        if kwargs.get('default_sortdir'):
+        if 'default_sortdir' in kwargs:
             warnings.warn("default_sortdir param is deprecated for Grid(); "
                           "please use sort_defaults param instead",
                           DeprecationWarning, stacklevel=2)
-        if kwargs.get('default_sortkey') or kwargs.get('default_sortdir'):
+        if 'default_sortkey' in kwargs or 'default_sortdir' in kwargs:
             sortkey = kwargs.pop('default_sortkey', None)
             sortdir = kwargs.pop('default_sortdir', 'asc')
             if sortkey:
                 kwargs.setdefault('sort_defaults', [(sortkey, sortdir)])
 
-        if kwargs.get('pageable'):
+        if 'pageable' in kwargs:
             warnings.warn("pageable param is deprecated for Grid(); "
                           "please use vue_tagname param instead",
                           DeprecationWarning, stacklevel=2)
             kwargs.setdefault('paginated', kwargs.pop('pageable'))
 
-        if kwargs.get('default_pagesize'):
+        if 'default_pagesize' in kwargs:
             warnings.warn("default_pagesize param is deprecated for Grid(); "
                           "please use pagesize param instead",
                           DeprecationWarning, stacklevel=2)
             kwargs.setdefault('pagesize', kwargs.pop('default_pagesize'))
 
-        if kwargs.get('default_page'):
+        if 'default_page' in kwargs:
             warnings.warn("default_page param is deprecated for Grid(); "
                           "please use page param instead",
                           DeprecationWarning, stacklevel=2)
diff --git a/tailbone/static/__init__.py b/tailbone/static/__init__.py
index 2ad5161a..57700b80 100644
--- a/tailbone/static/__init__.py
+++ b/tailbone/static/__init__.py
@@ -2,7 +2,7 @@
 ################################################################################
 #
 #  Rattail -- Retail Software Framework
-#  Copyright © 2010-2017 Lance Edgar
+#  Copyright © 2010-2024 Lance Edgar
 #
 #  This file is part of Rattail.
 #
@@ -24,9 +24,8 @@
 Static Assets
 """
 
-from __future__ import unicode_literals, absolute_import
-
 
 def includeme(config):
+    config.include('wuttaweb.static')
     config.add_static_view('tailbone', 'tailbone:static')
     config.add_static_view('deform', 'deform:static')
diff --git a/tailbone/templates/appinfo/index.mako b/tailbone/templates/appinfo/index.mako
index 68244300..75032c1f 100644
--- a/tailbone/templates/appinfo/index.mako
+++ b/tailbone/templates/appinfo/index.mako
@@ -1,7 +1,7 @@
 ## -*- coding: utf-8; -*-
 <%inherit file="/master/index.mako" />
 
-<%def name="render_grid_component()">
+<%def name="page_content()">
 
   <div class="buttons">
 
@@ -108,7 +108,7 @@
 
     <div class="panel-block">
       <div style="width: 100%;">
-        ${parent.render_grid_component()}
+        ${grid.render_vue_tag()}
       </div>
     </div>
   </${b}-collapse>
diff --git a/tailbone/templates/base.mako b/tailbone/templates/base.mako
index a0e58e22..eb950011 100644
--- a/tailbone/templates/base.mako
+++ b/tailbone/templates/base.mako
@@ -1,4 +1,5 @@
 ## -*- coding: utf-8; -*-
+<%namespace file="/wutta-components.mako" import="make_wutta_components" />
 <%namespace file="/grids/nav.mako" import="grid_index_nav" />
 <%namespace file="/autocomplete.mako" import="tailbone_autocomplete_template" />
 <%namespace name="base_meta" file="/base_meta.mako" />
@@ -955,6 +956,7 @@
 </%def>
 
 <%def name="make_vue_components()">
+  ${make_wutta_components()}
   ${make_grid_filter_components()}
   ${page_help.make_component()}
   ${multi_file_upload.make_component()}
diff --git a/tailbone/templates/batch/index.mako b/tailbone/templates/batch/index.mako
index a1b11b89..bea10a97 100644
--- a/tailbone/templates/batch/index.mako
+++ b/tailbone/templates/batch/index.mako
@@ -43,7 +43,7 @@
             <br />
             <div class="form-wrapper">
               <div class="form">
-                <${execute_form.component} ref="executeResultsForm"></${execute_form.component}>
+                ${execute_form.render_vue_tag(ref='executeResultsForm')}
               </div>
             </div>
           </section>
@@ -67,7 +67,7 @@
 <%def name="render_vue_templates()">
   ${parent.render_vue_templates()}
   % if master.results_executable and master.has_perm('execute_multiple'):
-      ${execute_form.render_deform(form_kwargs={'ref': 'actualExecuteForm'}, buttons=False)|n}
+      ${execute_form.render_vue_template(form_kwargs={'ref': 'actualExecuteForm'}, buttons=False)}
   % endif
 </%def>
 
@@ -128,9 +128,6 @@
 <%def name="make_vue_components()">
   ${parent.make_vue_components()}
   % if master.results_executable and master.has_perm('execute_multiple'):
-      <script>
-        ${execute_form.vue_component}.data = function() { return ${execute_form.vue_component}Data }
-        Vue.component('${execute_form.vue_tagname}', ${execute_form.vue_component})
-      </script>
+      ${execute_form.render_vue_finalize()}
   % endif
 </%def>
diff --git a/tailbone/templates/batch/view.mako b/tailbone/templates/batch/view.mako
index cdfa9ba7..7c81ab0e 100644
--- a/tailbone/templates/batch/view.mako
+++ b/tailbone/templates/batch/view.mako
@@ -119,8 +119,7 @@
                         <div class="markdown">
                           ${execution_described|n}
                         </div>
-                        <${execute_form.component} ref="executeBatchForm">
-                        </${execute_form.component}>
+                        ${execute_form.render_vue_tag(ref='executeBatchForm')}
                       </section>
 
                       <footer class="modal-card-foot">
@@ -168,8 +167,7 @@
               Please be certain to use the right one!
             </p>
             <br />
-            <${upload_worksheet_form.component} ref="uploadForm">
-            </${upload_worksheet_form.component}>
+            ${upload_worksheet_form.render_vue_tag(ref='uploadForm')}
           </section>
 
           <footer class="modal-card-foot">
@@ -254,10 +252,10 @@
 <%def name="render_vue_templates()">
   ${parent.render_vue_templates()}
   % if master.has_worksheet_file and master.allow_worksheet(batch) and master.has_perm('worksheet'):
-      ${upload_worksheet_form.render_deform(buttons=False, form_kwargs={'ref': 'actualUploadForm'})|n}
+      ${upload_worksheet_form.render_vue_template(buttons=False, form_kwargs={'ref': 'actualUploadForm'})}
   % endif
   % if master.handler.executable(batch) and master.has_perm('execute'):
-      ${execute_form.render_deform(form_kwargs={'ref': 'actualExecuteForm'}, buttons=False)|n}
+      ${execute_form.render_vue_template(form_kwargs={'ref': 'actualExecuteForm'}, buttons=False)}
   % endif
 </%def>
 
@@ -345,15 +343,9 @@
 <%def name="make_vue_components()">
   ${parent.make_vue_components()}
   % if master.has_worksheet_file and master.allow_worksheet(batch) and master.has_perm('worksheet'):
-      <script>
-        ${upload_worksheet_form.vue_component}.data = function() { return ${upload_worksheet_form.vue_component}Data }
-        Vue.component('${upload_worksheet_form.component}', ${upload_worksheet_form.vue_component})
-      </script>
+      ${upload_worksheet_form.render_vue_finalize()}
   % endif
   % if execute_enabled and master.has_perm('execute'):
-      <script>
-        ${execute_form.vue_component}.data = function() { return ${execute_form.vue_component}Data }
-        Vue.component('${execute_form.component}', ${execute_form.vue_component})
-      </script>
+      ${execute_form.render_vue_finalize()}
   % endif
 </%def>
diff --git a/tailbone/templates/form.mako b/tailbone/templates/form.mako
index 3bb04257..e3a4d5dc 100644
--- a/tailbone/templates/form.mako
+++ b/tailbone/templates/form.mako
@@ -109,9 +109,6 @@
 <%def name="make_vue_components()">
   ${parent.make_vue_components()}
   % if form is not Undefined:
-      <script>
-        ${form.vue_component}.data = function() { return ${form.vue_component}Data }
-        Vue.component('${form.vue_tagname}', ${form.vue_component})
-      </script>
+      ${form.render_vue_finalize()}
   % endif
 </%def>
diff --git a/tailbone/templates/themes/waterpark/base.mako b/tailbone/templates/themes/waterpark/base.mako
new file mode 100644
index 00000000..15184f6e
--- /dev/null
+++ b/tailbone/templates/themes/waterpark/base.mako
@@ -0,0 +1,486 @@
+## -*- coding: utf-8; -*-
+<%inherit file="wuttaweb:templates/base.mako" />
+<%namespace name="base_meta" file="/base_meta.mako" />
+<%namespace file="/formposter.mako" import="declare_formposter_mixin" />
+<%namespace file="/grids/filter-components.mako" import="make_grid_filter_components" />
+<%namespace name="page_help" file="/page_help.mako" />
+
+<%def name="base_styles()">
+  ${parent.base_styles()}
+  <style>
+
+    .filters .filter-fieldname .field,
+    .filters .filter-fieldname .field label {
+        width: 100%;
+    }
+
+    .filters .filter-fieldname,
+    .filters .filter-fieldname .field label,
+    .filters .filter-fieldname .button {
+        justify-content: left;
+    }
+
+    .filters .filter-verb .select,
+    .filters .filter-verb .select select {
+        width: 100%;
+    }
+
+    % if filter_fieldname_width is not Undefined:
+
+        .filters .filter-fieldname,
+        .filters .filter-fieldname .button {
+            min-width: ${filter_fieldname_width};
+        }
+
+        .filters .filter-verb {
+            min-width: ${filter_verb_width};
+        }
+
+    % endif
+
+  </style>
+</%def>
+
+<%def name="before_content()">
+  ## TODO: this must come before the self.body() call..but why?
+  ${declare_formposter_mixin()}
+</%def>
+
+<%def name="render_navbar_brand()">
+  <div class="navbar-brand">
+    <a class="navbar-item" href="${url('home')}"
+       v-show="!menuSearchActive">
+      ${base_meta.header_logo()}
+      <div id="global-header-title">
+        ${base_meta.global_title()}
+      </div>
+    </a>
+    <div v-show="menuSearchActive"
+         class="navbar-item">
+      <b-autocomplete ref="menuSearchAutocomplete"
+                      v-model="menuSearchTerm"
+                      :data="menuSearchFilteredData"
+                      field="label"
+                      open-on-focus
+                      keep-first
+                      icon-pack="fas"
+                      clearable
+                      @keydown.native="menuSearchKeydown"
+                      @select="menuSearchSelect">
+      </b-autocomplete>
+    </div>
+    <a role="button" class="navbar-burger" data-target="navbar-menu" aria-label="menu" aria-expanded="false">
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+    </a>
+  </div>
+</%def>
+
+<%def name="render_navbar_start()">
+  <div class="navbar-start">
+
+    <div v-if="menuSearchData.length"
+         class="navbar-item">
+      <b-button type="is-primary"
+                size="is-small"
+                @click="menuSearchInit()">
+        <span><i class="fa fa-search"></i></span>
+      </b-button>
+    </div>
+
+    % for topitem in menus:
+        % if topitem['is_link']:
+            ${h.link_to(topitem['title'], topitem['url'], target=topitem['target'], class_='navbar-item')}
+        % else:
+            <div class="navbar-item has-dropdown is-hoverable">
+              <a class="navbar-link">${topitem['title']}</a>
+              <div class="navbar-dropdown">
+                % for item in topitem['items']:
+                    % if item['is_menu']:
+                        <% item_hash = id(item) %>
+                        <% toggle = 'menu_{}_shown'.format(item_hash) %>
+                        <div>
+                          <a class="navbar-link" @click.prevent="toggleNestedMenu('${item_hash}')">
+                            ${item['title']}
+                          </a>
+                        </div>
+                        % for subitem in item['items']:
+                            % if subitem['is_sep']:
+                                <hr class="navbar-divider" v-show="${toggle}">
+                            % else:
+                                ${h.link_to("{}".format(subitem['title']), subitem['url'], class_='navbar-item nested', target=subitem['target'], **{'v-show': toggle})}
+                            % endif
+                        % endfor
+                    % else:
+                        % if item['is_sep']:
+                            <hr class="navbar-divider">
+                        % else:
+                            ${h.link_to(item['title'], item['url'], class_='navbar-item', target=item['target'])}
+                        % endif
+                    % endif
+                % endfor
+              </div>
+            </div>
+        % endif
+    % endfor
+
+  </div>
+</%def>
+
+<%def name="render_theme_picker()">
+  % if expose_theme_picker and request.has_perm('common.change_app_theme'):
+      <div class="level-item">
+        ${h.form(url('change_theme'), method="post", ref='themePickerForm')}
+          ${h.csrf_token(request)}
+          <input type="hidden" name="referrer" :value="referrer" />
+          <div style="display: flex; align-items: center; gap: 0.5rem;">
+            <span>Theme:</span>
+            <b-select name="theme"
+                      v-model="globalTheme"
+                      @input="changeTheme()">
+              % for option in theme_picker_options:
+                  <option value="${option.value}">
+                    ${option.label}
+                  </option>
+              % endfor
+            </b-select>
+          </div>
+        ${h.end_form()}
+      </div>
+  % endif
+</%def>
+
+<%def name="render_feedback_button()">
+
+  <div class="level-item">
+    <page-help
+      % if can_edit_help:
+      @configure-fields-help="configureFieldsHelp = true"
+      % endif
+      />
+  </div>
+
+  % if request.has_perm('common.feedback'):
+      <feedback-form
+         action="${url('feedback')}"
+         :message="feedbackMessage">
+      </feedback-form>
+  % endif
+</%def>
+
+<%def name="render_this_page_component()">
+  <this-page @change-content-title="changeContentTitle"
+             % if can_edit_help:
+                 :configure-fields-help="configureFieldsHelp"
+             % endif
+             />
+</%def>
+
+<%def name="render_vue_templates()">
+  ${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>
+
+          <div class="level-item">
+            <b-button type="is-primary"
+                      @click="showFeedback()"
+                      icon-pack="fas"
+                      icon-left="comment">
+              Feedback
+            </b-button>
+          </div>
+
+          <b-modal has-modal-card
+                   :active.sync="showDialog">
+            <div class="modal-card">
+
+              <header class="modal-card-head">
+                <p class="modal-card-title">User Feedback</p>
+              </header>
+
+              <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="User Name">
+                  <b-input v-model="userName"
+                           % if request.user:
+                               disabled
+                           % endif
+                           >
+                  </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>
+                    </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>
+
+        </div>
+      </script>
+      <script>
+
+        const FeedbackForm = {
+            template: '#feedback-template',
+            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) {
+                        this.$nextTick(() => {
+                            this.$refs.userEmail.focus()
+                        })
+                    },
+                % endif
+
+                sendFeedback() {
+                    this.sendingFeedback = true
+
+                    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 => {
+
+                        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
+                    })
+                },
+            }
+        }
+
+        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="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
+
+    ##############################
+    ## menu search
+    ##############################
+
+    WholePageData.menuSearchActive = false
+    WholePageData.menuSearchTerm = ''
+    WholePageData.menuSearchData = ${json.dumps(global_search_data or [])|n}
+
+    WholePage.computed.menuSearchFilteredData = function() {
+        if (!this.menuSearchTerm.length) {
+            return this.menuSearchData
+        }
+
+        const terms = []
+        for (let term of this.menuSearchTerm.toLowerCase().split(' ')) {
+            term = term.trim()
+            if (term) {
+                terms.push(term)
+            }
+        }
+        if (!terms.length) {
+            return this.menuSearchData
+        }
+
+        // all terms must match
+        return this.menuSearchData.filter((option) => {
+            const label = option.label.toLowerCase()
+            for (const term of terms) {
+                if (label.indexOf(term) < 0) {
+                    return false
+                }
+            }
+            return true
+        })
+    }
+
+    WholePage.methods.globalKey = function(event) {
+
+        // Ctrl+8 opens menu search
+        if (event.target.tagName == 'BODY') {
+            if (event.ctrlKey && event.key == '8') {
+                this.menuSearchInit()
+            }
+        }
+    }
+
+    WholePage.mounted = function() {
+        window.addEventListener('keydown', this.globalKey)
+        for (let hook of this.mountedHooks) {
+            hook(this)
+        }
+    }
+
+    WholePage.beforeDestroy = function() {
+        window.removeEventListener('keydown', this.globalKey)
+    }
+
+    WholePage.methods.menuSearchInit = function() {
+        this.menuSearchTerm = ''
+        this.menuSearchActive = true
+        this.$nextTick(() => {
+            this.$refs.menuSearchAutocomplete.focus()
+        })
+    }
+
+    WholePage.methods.menuSearchKeydown = function(event) {
+
+        // ESC will dismiss searchbox
+        if (event.which == 27) {
+            this.menuSearchActive = false
+        }
+    }
+
+    WholePage.methods.menuSearchSelect = function(option) {
+        location.href = option.url
+    }
+
+    ##############################
+    ## theme picker
+    ##############################
+
+    % if expose_theme_picker and request.has_perm('common.change_app_theme'):
+
+        WholePageData.globalTheme = ${json.dumps(theme or None)|n}
+        ## WholePageData.referrer = location.href
+
+        WholePage.methods.changeTheme = function() {
+            this.$refs.themePickerForm.submit()
+        }
+
+    % 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
+    ##############################
+
+    % if can_edit_help:
+        WholePageData.configureFieldsHelp = false
+    % endif
+
+  </script>
+</%def>
+
+<%def name="make_vue_components()">
+  ${parent.make_vue_components()}
+  ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.datepicker.js') + f'?ver={tailbone.__version__}')}
+  ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.numericinput.js') + f'?ver={tailbone.__version__}')}
+  ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.oncebutton.js') + f'?ver={tailbone.__version__}')}
+  ${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>
diff --git a/tailbone/templates/themes/waterpark/configure.mako b/tailbone/templates/themes/waterpark/configure.mako
new file mode 100644
index 00000000..9ac9a5cd
--- /dev/null
+++ b/tailbone/templates/themes/waterpark/configure.mako
@@ -0,0 +1,2 @@
+## -*- coding: utf-8; -*-
+<%inherit file="wuttaweb:templates/configure.mako" />
diff --git a/tailbone/templates/themes/waterpark/form.mako b/tailbone/templates/themes/waterpark/form.mako
new file mode 100644
index 00000000..cf1ddb8a
--- /dev/null
+++ b/tailbone/templates/themes/waterpark/form.mako
@@ -0,0 +1,2 @@
+## -*- coding: utf-8; -*-
+<%inherit file="wuttaweb:templates/form.mako" />
diff --git a/tailbone/templates/themes/waterpark/master/configure.mako b/tailbone/templates/themes/waterpark/master/configure.mako
new file mode 100644
index 00000000..51da5b0a
--- /dev/null
+++ b/tailbone/templates/themes/waterpark/master/configure.mako
@@ -0,0 +1,2 @@
+## -*- coding: utf-8; -*-
+<%inherit file="wuttaweb:templates/master/configure.mako" />
diff --git a/tailbone/templates/themes/waterpark/master/create.mako b/tailbone/templates/themes/waterpark/master/create.mako
new file mode 100644
index 00000000..23399b9e
--- /dev/null
+++ b/tailbone/templates/themes/waterpark/master/create.mako
@@ -0,0 +1,2 @@
+## -*- coding: utf-8; -*-
+<%inherit file="wuttaweb:templates/master/create.mako" />
diff --git a/tailbone/templates/themes/waterpark/master/delete.mako b/tailbone/templates/themes/waterpark/master/delete.mako
new file mode 100644
index 00000000..a15dfaf8
--- /dev/null
+++ b/tailbone/templates/themes/waterpark/master/delete.mako
@@ -0,0 +1,46 @@
+## -*- coding: utf-8; -*-
+<%inherit file="tailbone:templates/form.mako" />
+
+<%def name="title()">Delete ${model_title}: ${instance_title}</%def>
+
+<%def name="render_form()">
+  <br />
+  <b-notification type="is-danger" :closable="false">
+    You are about to delete the following ${model_title} and all associated data:
+  </b-notification>
+  ${parent.render_form()}
+</%def>
+
+<%def name="render_form_buttons()">
+  <br />
+  <b-notification type="is-danger" :closable="false">
+    Are you sure about this?
+  </b-notification>
+  <br />
+
+  ${h.form(request.current_route_url(), **{'@submit': 'submitForm'})}
+  ${h.csrf_token(request)}
+    <div class="buttons">
+      <wutta-button once tag="a" href="${form.cancel_url}"
+                    label="Whoops, nevermind..." />
+      <b-button type="is-primary is-danger"
+                native-type="submit"
+                :disabled="formSubmitting">
+        {{ formSubmitting ? "Working, please wait..." : "${form.button_label_submit}" }}
+      </b-button>
+    </div>
+  ${h.end_form()}
+</%def>
+
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
+
+    ${form.vue_component}Data.formSubmitting = false
+
+    ${form.vue_component}.methods.submitForm = function() {
+        this.formSubmitting = true
+    }
+
+  </script>
+</%def>
diff --git a/tailbone/templates/themes/waterpark/master/edit.mako b/tailbone/templates/themes/waterpark/master/edit.mako
new file mode 100644
index 00000000..18a2fa2f
--- /dev/null
+++ b/tailbone/templates/themes/waterpark/master/edit.mako
@@ -0,0 +1,2 @@
+## -*- coding: utf-8; -*-
+<%inherit file="wuttaweb:templates/master/edit.mako" />
diff --git a/tailbone/templates/themes/waterpark/master/form.mako b/tailbone/templates/themes/waterpark/master/form.mako
new file mode 100644
index 00000000..db56843b
--- /dev/null
+++ b/tailbone/templates/themes/waterpark/master/form.mako
@@ -0,0 +1,2 @@
+## -*- coding: utf-8; -*-
+<%inherit file="wuttaweb:templates/master/form.mako" />
diff --git a/tailbone/templates/themes/waterpark/master/index.mako b/tailbone/templates/themes/waterpark/master/index.mako
new file mode 100644
index 00000000..e3b5b42d
--- /dev/null
+++ b/tailbone/templates/themes/waterpark/master/index.mako
@@ -0,0 +1,294 @@
+## -*- coding: utf-8; -*-
+<%inherit file="wuttaweb:templates/master/index.mako" />
+
+<%def name="grid_tools()">
+
+  ## grid totals
+  % if getattr(master, 'supports_grid_totals', False):
+      <div style="display: flex; align-items: center;">
+        <b-button v-if="gridTotalsDisplay == null"
+                  :disabled="gridTotalsFetching"
+                  @click="gridTotalsFetch()">
+          {{ gridTotalsFetching ? "Working, please wait..." : "Show Totals" }}
+        </b-button>
+        <div v-if="gridTotalsDisplay != null"
+             class="control">
+          Totals: {{ gridTotalsDisplay }}
+        </div>
+      </div>
+  % endif
+
+  ## download search results
+  % if getattr(master, 'results_downloadable', False) and master.has_perm('download_results'):
+      <div>
+        <b-button type="is-primary"
+                  icon-pack="fas"
+                  icon-left="download"
+                  @click="showDownloadResultsDialog = true"
+                  :disabled="!total">
+          Download Results
+        </b-button>
+
+        ${h.form(url('{}.download_results'.format(route_prefix)), ref='download_results_form')}
+        ${h.csrf_token(request)}
+        <input type="hidden" name="fmt" :value="downloadResultsFormat" />
+        <input type="hidden" name="fields" :value="downloadResultsFieldsIncluded" />
+        ${h.end_form()}
+
+        <b-modal :active.sync="showDownloadResultsDialog">
+          <div class="card">
+
+            <div class="card-content">
+              <p>
+                There are
+                <span class="is-size-4 has-text-weight-bold">
+                  {{ total.toLocaleString('en') }} ${model_title_plural}
+                </span>
+                matching your current filters.
+              </p>
+              <p>
+                You may download this set as a single data file if you like.
+              </p>
+              <br />
+
+              <b-notification type="is-warning" :closable="false"
+                              v-if="downloadResultsFormat == 'xlsx' && total >= 1000">
+                Excel downloads for large data sets can take a long time to
+                generate, and bog down the server in the meantime.  You are
+                encouraged to choose CSV for a large data set, even though
+                the end result (file size) may be larger with CSV.
+              </b-notification>
+
+              <div style="display: flex; justify-content: space-between">
+
+                <div>
+                  <b-field label="Format">
+                    <b-select v-model="downloadResultsFormat">
+                      % for key, label in master.download_results_supported_formats().items():
+                      <option value="${key}">${label}</option>
+                      % endfor
+                    </b-select>
+                  </b-field>
+                </div>
+
+                <div>
+
+                  <div v-show="downloadResultsFieldsMode != 'choose'"
+                       class="has-text-right">
+                    <p v-if="downloadResultsFieldsMode == 'default'">
+                      Will use DEFAULT fields.
+                    </p>
+                    <p v-if="downloadResultsFieldsMode == 'all'">
+                      Will use ALL fields.
+                    </p>
+                    <br />
+                  </div>
+
+                  <div class="buttons is-right">
+                    <b-button type="is-primary"
+                              v-show="downloadResultsFieldsMode != 'default'"
+                              @click="downloadResultsUseDefaultFields()">
+                      Use Default Fields
+                    </b-button>
+                    <b-button type="is-primary"
+                              v-show="downloadResultsFieldsMode != 'all'"
+                              @click="downloadResultsUseAllFields()">
+                      Use All Fields
+                    </b-button>
+                    <b-button type="is-primary"
+                              v-show="downloadResultsFieldsMode != 'choose'"
+                              @click="downloadResultsFieldsMode = 'choose'">
+                      Choose Fields
+                    </b-button>
+                  </div>
+
+                  <div v-show="downloadResultsFieldsMode == 'choose'">
+                    <div style="display: flex;">
+                      <div>
+                        <b-field label="Excluded Fields">
+                          <b-select multiple native-size="8"
+                                    expanded
+                                    v-model="downloadResultsExcludedFieldsSelected"
+                                    ref="downloadResultsExcludedFields">
+                            <option v-for="field in downloadResultsFieldsExcluded"
+                                    :key="field"
+                                    :value="field">
+                              {{ field }}
+                            </option>
+                          </b-select>
+                        </b-field>
+                      </div>
+                      <div>
+                        <br /><br />
+                        <b-button style="margin: 0.5rem;"
+                                  @click="downloadResultsExcludeFields()">
+                          &lt;
+                        </b-button>
+                        <br />
+                        <b-button style="margin: 0.5rem;"
+                                  @click="downloadResultsIncludeFields()">
+                          &gt;
+                        </b-button>
+                      </div>
+                      <div>
+                        <b-field label="Included Fields">
+                          <b-select multiple native-size="8"
+                                    expanded
+                                    v-model="downloadResultsIncludedFieldsSelected"
+                                    ref="downloadResultsIncludedFields">
+                            <option v-for="field in downloadResultsFieldsIncluded"
+                                    :key="field"
+                                    :value="field">
+                              {{ field }}
+                            </option>
+                          </b-select>
+                        </b-field>
+                      </div>
+                    </div>
+                  </div>
+
+                </div>
+              </div>
+            </div> <!-- card-content -->
+
+            <footer class="modal-card-foot">
+              <b-button @click="showDownloadResultsDialog = false">
+                Cancel
+              </b-button>
+              <once-button type="is-primary"
+                           @click="downloadResultsSubmit()"
+                           icon-pack="fas"
+                           icon-left="download"
+                           :disabled="!downloadResultsFieldsIncluded.length"
+                           text="Download Results">
+              </once-button>
+            </footer>
+          </div>
+        </b-modal>
+      </div>
+  % endif
+
+  ## download rows for search results
+  % if getattr(master, 'has_rows', False) and master.results_rows_downloadable and master.has_perm('download_results_rows'):
+      <b-button type="is-primary"
+                icon-pack="fas"
+                icon-left="download"
+                @click="downloadResultsRows()"
+                :disabled="downloadResultsRowsButtonDisabled">
+        {{ downloadResultsRowsButtonText }}
+      </b-button>
+      ${h.form(url('{}.download_results_rows'.format(route_prefix)), ref='downloadResultsRowsForm')}
+      ${h.csrf_token(request)}
+      ${h.end_form()}
+  % endif
+
+  ## merge 2 objects
+  % if getattr(master, 'mergeable', False) and request.has_perm('{}.merge'.format(permission_prefix)):
+
+      ${h.form(url('{}.merge'.format(route_prefix)), class_='control', **{'@submit': 'submitMergeForm'})}
+      ${h.csrf_token(request)}
+      <input type="hidden"
+             name="uuids"
+             :value="checkedRowUUIDs()" />
+      <b-button type="is-primary"
+                native-type="submit"
+                icon-pack="fas"
+                icon-left="object-ungroup"
+                :disabled="mergeFormSubmitting || checkedRows.length != 2">
+        {{ mergeFormButtonText }}
+      </b-button>
+      ${h.end_form()}
+  % endif
+
+  ## enable / disable selected objects
+  % if getattr(master, 'supports_set_enabled_toggle', False) and master.has_perm('enable_disable_set'):
+
+      ${h.form(url('{}.enable_set'.format(route_prefix)), class_='control', ref='enable_selected_form')}
+      ${h.csrf_token(request)}
+      ${h.hidden('uuids', v_model='selected_uuids')}
+      <b-button :disabled="enableSelectedDisabled"
+                @click="enableSelectedSubmit()">
+        {{ enableSelectedText }}
+      </b-button>
+      ${h.end_form()}
+
+      ${h.form(url('{}.disable_set'.format(route_prefix)), ref='disable_selected_form', class_='control')}
+      ${h.csrf_token(request)}
+      ${h.hidden('uuids', v_model='selected_uuids')}
+      <b-button :disabled="disableSelectedDisabled"
+                @click="disableSelectedSubmit()">
+        {{ disableSelectedText }}
+      </b-button>
+      ${h.end_form()}
+  % endif
+
+  ## delete selected objects
+  % if getattr(master, 'set_deletable', False) and master.has_perm('delete_set'):
+      ${h.form(url('{}.delete_set'.format(route_prefix)), ref='delete_selected_form', class_='control')}
+      ${h.csrf_token(request)}
+      ${h.hidden('uuids', v_model='selected_uuids')}
+      <b-button type="is-danger"
+                :disabled="deleteSelectedDisabled"
+                @click="deleteSelectedSubmit()"
+                icon-pack="fas"
+                icon-left="trash">
+        {{ deleteSelectedText }}
+      </b-button>
+      ${h.end_form()}
+  % endif
+
+  ## delete search results
+  % if getattr(master, 'bulk_deletable', False) and request.has_perm('{}.bulk_delete'.format(permission_prefix)):
+      ${h.form(url('{}.bulk_delete'.format(route_prefix)), ref='delete_results_form', class_='control')}
+      ${h.csrf_token(request)}
+      <b-button type="is-danger"
+                :disabled="deleteResultsDisabled"
+                :title="total ? null : 'There are no results to delete'"
+                @click="deleteResultsSubmit()"
+                icon-pack="fas"
+                icon-left="trash">
+        {{ deleteResultsText }}
+      </b-button>
+      ${h.end_form()}
+  % endif
+
+</%def>
+
+<%def name="render_vue_template_grid()">
+  ${grid.render_vue_template(tools=capture(self.grid_tools).strip(), context_menu=capture(self.context_menu_items).strip())}
+</%def>
+
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
+
+    % if getattr(master, 'bulk_deletable', False) and master.has_perm('bulk_delete'):
+
+        ${grid.vue_component}Data.deleteResultsSubmitting = false
+        ${grid.vue_component}Data.deleteResultsText = "Delete Results"
+
+        ${grid.vue_component}.computed.deleteResultsDisabled = function() {
+            if (this.deleteResultsSubmitting) {
+                return true
+            }
+            if (!this.total) {
+                return true
+            }
+            return false
+        }
+
+        ${grid.vue_component}.methods.deleteResultsSubmit = function() {
+            // TODO: show "plural model title" here?
+            if (!confirm("You are about to delete " + this.total.toLocaleString('en') + " objects.\n\nAre you sure?")) {
+                return
+            }
+
+            this.deleteResultsSubmitting = true
+            this.deleteResultsText = "Working, please wait..."
+            this.$refs.delete_results_form.submit()
+        }
+
+    % endif
+
+  </script>
+</%def>
diff --git a/tailbone/templates/themes/waterpark/master/view.mako b/tailbone/templates/themes/waterpark/master/view.mako
new file mode 100644
index 00000000..99194469
--- /dev/null
+++ b/tailbone/templates/themes/waterpark/master/view.mako
@@ -0,0 +1,2 @@
+## -*- coding: utf-8; -*-
+<%inherit file="wuttaweb:templates/master/view.mako" />
diff --git a/tailbone/templates/themes/waterpark/page.mako b/tailbone/templates/themes/waterpark/page.mako
new file mode 100644
index 00000000..7e6851a7
--- /dev/null
+++ b/tailbone/templates/themes/waterpark/page.mako
@@ -0,0 +1,48 @@
+## -*- coding: utf-8; -*-
+<%inherit file="wuttaweb:templates/page.mako" />
+
+<%def name="render_vue_template_this_page()">
+  <script type="text/x-template" id="this-page-template">
+    <div style="height: 100%;">
+      ## DEPRECATED; called for back-compat
+      ${self.render_this_page()}
+    </div>
+  </script>
+</%def>
+
+## DEPRECATED; remains for back-compat
+<%def name="render_this_page()">
+  <div style="display: flex;">
+
+    <div class="this-page-content" style="flex-grow: 1;">
+      ${self.page_content()}
+    </div>
+
+    ## DEPRECATED; remains for back-compat
+    <ul id="context-menu">
+      ${self.context_menu_items()}
+    </ul>
+  </div>
+</%def>
+
+## DEPRECATED; remains for back-compat
+<%def name="context_menu_items()">
+  % if context_menu_list_items is not Undefined:
+      % for item in context_menu_list_items:
+          <li>${item}</li>
+      % endfor
+  % endif
+</%def>
+
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
+
+    ThisPageData.csrftoken = ${json.dumps(request.session.get_csrf_token() or request.session.new_csrf_token())|n}
+
+    % if can_edit_help:
+        ThisPage.props.configureFieldsHelp = Boolean
+    % endif
+
+  </script>
+</%def>
diff --git a/tailbone/views/master.py b/tailbone/views/master.py
index ac74a070..a8365482 100644
--- a/tailbone/views/master.py
+++ b/tailbone/views/master.py
@@ -137,6 +137,7 @@ class MasterView(View):
     deleting = False
     executing = False
     cloning = False
+    configuring = False
     has_pk_fields = False
     has_image = False
     has_thumbnail = False
@@ -350,6 +351,7 @@ class MasterView(View):
             return self.json_response(context)
 
         context = {
+            'index_url': None, # nb. avoid title link since this *is* the index
             'grid': grid,
         }
 
@@ -380,7 +382,7 @@ class MasterView(View):
         grid contents etc.
         """
 
-    def make_grid(self, factory=None, key=None, data=None, columns=None, **kwargs):
+    def make_grid(self, factory=None, key=None, data=None, columns=None, session=None, **kwargs):
         """
         Creates a new grid instance
         """
@@ -389,7 +391,7 @@ class MasterView(View):
         if key is None:
             key = self.get_grid_key()
         if data is None:
-            data = self.get_data(session=kwargs.get('session'))
+            data = self.get_data(session=session)
         if columns is None:
             columns = self.get_grid_columns()
 
@@ -407,7 +409,7 @@ class MasterView(View):
         """
         if session is None:
             session = self.Session()
-        kwargs.setdefault('pageable', False)
+        kwargs.setdefault('paginated', False)
         grid = self.make_grid(session=session, **kwargs)
         return grid.make_visible_data()
 
@@ -1701,7 +1703,7 @@ class MasterView(View):
         """
         if session is None:
             session = self.Session()
-        kwargs.setdefault('pageable', False)
+        kwargs.setdefault('paginated', False)
         kwargs.setdefault('sortable', sort)
         grid = self.make_row_grid(session=session, **kwargs)
         return grid.make_visible_data()
@@ -1879,6 +1881,7 @@ class MasterView(View):
             return self.redirect(self.get_action_url('view', instance))
 
         form = self.make_form(instance)
+        form.save_label = "DELETE Forever"
 
         # TODO: Add better validation, ideally CSRF etc.
         if self.request.method == 'POST':
@@ -5119,6 +5122,7 @@ class MasterView(View):
         """
         Generic view for configuring some aspect of the software.
         """
+        self.configuring = True
         app = self.get_rattail_app()
         if self.request.method == 'POST':
             if self.request.POST.get('remove_settings'):
diff --git a/tailbone/views/people.py b/tailbone/views/people.py
index 020babc5..b6a4c0b9 100644
--- a/tailbone/views/people.py
+++ b/tailbone/views/people.py
@@ -543,7 +543,7 @@ class PersonView(MasterView):
             },
             filterable=True,
             sortable=True,
-            pageable=True,
+            paginated=True,
             default_sortkey='end_time',
             default_sortdir='desc',
             component='transactions-grid',
diff --git a/tests/util.py b/tests/util.py
index 3aa04f5e..4277a7c3 100644
--- a/tests/util.py
+++ b/tests/util.py
@@ -24,7 +24,7 @@ class WebTestCase(DataTestCase):
         self.pyramid_config = testing.setUp(request=self.request, settings={
             'wutta_config': self.config,
             'rattail_config': self.config,
-            'mako.directories': ['tailbone:templates'],
+            'mako.directories': ['tailbone:templates', 'wuttaweb:templates'],
             # 'pyramid_deform.template_search_path': 'wuttaweb:templates/deform',
         })