fix: add startup hack for tempmon DB model

mostly just for convenience

CHANGELOG.md

@@ -5,6 +5,226 @@ All notable changes to Tailbone will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## v0.22.7 (2025-02-19)
+
+### Fix
+
+- stop using old config for logo image url on login page
+- fix warning msg for deprecated Grid param
+
+## v0.22.6 (2025-02-01)
+
+### Fix
+
+- register vue3 form component for products -> make batch
+
+## v0.22.5 (2024-12-16)
+
+### Fix
+
+- whoops this is latest rattail
+- require newer rattail lib
+- require newer wuttaweb
+- let caller request safe HTML literal for rendered grid table
+
+## v0.22.4 (2024-11-22)
+
+### Fix
+
+- avoid error in product search for duplicated key
+- use vmodel for confirm password widget input
+
+## v0.22.3 (2024-11-19)
+
+### Fix
+
+- avoid error for trainwreck query when not a customer
+
+## v0.22.2 (2024-11-18)
+
+### Fix
+
+- use local/custom enum for continuum operations
+- add basic master view for Product Costs
+- show continuum operation type when viewing version history
+- always define `app` attr for ViewSupplement
+- avoid deprecated import
+
+## v0.22.1 (2024-11-02)
+
+### Fix
+
+- fix submit button for running problem report
+- avoid deprecated grid method
+
+## v0.22.0 (2024-10-22)
+
+### Feat
+
+- add support for new ordering batch from parsed file
+
+### Fix
+
+- avoid deprecated method to suggest username
+
+## v0.21.11 (2024-10-03)
+
+### Fix
+
+- custom method for adding grid action
+- become/stop root should redirect to previous url
+
+## v0.21.10 (2024-09-15)
+
+### Fix
+
+- update project repo links, kallithea -> forgejo
+- use better icon for submit button on login page
+- wrap notes text for batch view
+- expose datasync consumer batch size via configure page
+
+## v0.21.9 (2024-08-28)
+
+### Fix
+
+- render custom attrs in form component tag
+
+## v0.21.8 (2024-08-28)
+
+### Fix
+
+- ignore session kwarg for `MasterView.make_row_grid()`
+
+## v0.21.7 (2024-08-28)
+
+### Fix
+
+- avoid error when form value cannot be obtained
+
+## v0.21.6 (2024-08-28)
+
+### Fix
+
+- avoid error when grid value cannot be obtained
+
+## v0.21.5 (2024-08-28)
+
+### Fix
+
+- set empty string for "-new-" file configure option
+
+## v0.21.4 (2024-08-26)
+
+### Fix
+
+- handle differing email profile keys for appinfo/configure
+
+## v0.21.3 (2024-08-26)
+
+### Fix
+
+- show non-standard config values for app info configure email
+
+## v0.21.2 (2024-08-26)
+
+### Fix
+
+- refactor waterpark base template to use wutta feedback component
+- fix input/output file upload feature for configure pages, per oruga
+- tweak how grid data translates to Vue template context
+- merge filters into main grid template
+- add basic wutta view for users
+- some fixes for wutta people view
+- various fixes for waterpark theme
+- avoid deprecated `component` form kwarg
+
+## v0.21.1 (2024-08-22)
+
+### Fix
+
+- misc. bugfixes per recent changes
+
+## v0.21.0 (2024-08-22)
+
+### Feat
+
+- move "most" filtering logic for grid class to wuttaweb
+- inherit from wuttaweb templates for home, login pages
+- inherit from wuttaweb for AppInfoView, appinfo/configure template
+- add "has output file templates" config option for master view
+
+### Fix
+
+- change grid reset-view param name to match wuttaweb
+- move "searchable columns" grid feature to wuttaweb
+- use wuttaweb to get/render csrf token
+- inherit from wuttaweb for appinfo/index template
+- prefer wuttaweb config for "home redirect to login" feature
+- fix master/index template rendering for waterpark theme
+- fix spacing for navbar logo/title in waterpark theme
+
+## v0.20.1 (2024-08-20)
+
+### Fix
+
+- fix default filter verbs logic for workorder status
+
+## v0.20.0 (2024-08-20)
+
+### Feat
+
+- add new 'waterpark' theme, based on wuttaweb w/ vue2 + buefy
+- refactor templates to simplify base/page/form structure
+
+### Fix
+
+- avoid deprecated reference to app db engine
+
+## v0.19.3 (2024-08-19)
+
+### Fix
+
+- add pager stats to all grid vue data (fixes view history)
+
+## v0.19.2 (2024-08-19)
+
+### Fix
+
+- sort on frontend for appinfo package listing grid
+- prefer attr over key lookup when getting model values
+- replace all occurrences of `component_studly` => `vue_component`
+
+## v0.19.1 (2024-08-19)
+
+### Fix
+
+- fix broken user auth for web API app
+
+## v0.19.0 (2024-08-18)
+
+### Feat
+
+- move multi-column grid sorting logic to wuttaweb
+- move single-column grid sorting logic to wuttaweb
+
+### Fix
+
+- fix misc. errors in grid template per wuttaweb
+- fix broken permission directives in web api startup
+
+## v0.18.0 (2024-08-16)
+
+### Feat
+
+- move "basic" grid pagination logic to wuttaweb
+- inherit from wutta base class for Grid
+- inherit most logic from wuttaweb, for GridAction
+
+### Fix
+
+- avoid route error in user view, when using wutta people view
+- fix some more wutta compat for base template
+
 ## v0.17.0 (2024-08-15)
 
 ### Feat

README.md

@@ -1,10 +1,8 @@
 
-Tailbone
-========
+# Tailbone
 
 Tailbone is an extensible web application based on Rattail.  It provides a
 "back-office network environment" (BONE) for use in managing retail data.
 
-Please see Rattail's `home page`_ for more information.
-
-.. _home page: http://rattailproject.org/
+Please see Rattail's [home page](http://rattailproject.org/) for more
+information.

docs/conf.py

@@ -27,10 +27,10 @@ templates_path = ['_templates']
 exclude_patterns = ['_build', 'Thumbs.db', '.DS_Store']
 
 intersphinx_mapping = {
-    'rattail': ('https://rattailproject.org/docs/rattail/', None),
+    'rattail': ('https://docs.wuttaproject.org/rattail/', None),
     'webhelpers2': ('https://webhelpers2.readthedocs.io/en/latest/', None),
-    'wuttaweb': ('https://rattailproject.org/docs/wuttaweb/', None),
-    'wuttjamaican': ('https://rattailproject.org/docs/wuttjamaican/', None),
+    'wuttaweb': ('https://docs.wuttaproject.org/wuttaweb/', None),
+    'wuttjamaican': ('https://docs.wuttaproject.org/wuttjamaican/', None),
 }
 
 # allow todo entries to show up

pyproject.toml

@@ -6,9 +6,9 @@ build-backend = "hatchling.build"
 
 [project]
 name = "Tailbone"
-version = "0.17.0"
+version = "0.22.7"
 description = "Backoffice Web Application for Rattail"
-readme = "README.rst"
+readme = "README.md"
 authors = [{name = "Lance Edgar", email = "lance@edbob.org"}]
 license = {text = "GNU GPL v3+"}
 classifiers = [
@@ -53,13 +53,13 @@ dependencies = [
         "pyramid_mako",
         "pyramid_retry",
         "pyramid_tm",
-        "rattail[db,bouncer]>=0.18.1",
+        "rattail[db,bouncer]>=0.20.1",
         "sa-filters",
         "simplejson",
         "transaction",
         "waitress",
         "WebHelpers2",
-        "WuttaWeb>=0.8.1",
+        "WuttaWeb>=0.21.0",
         "zope.sqlalchemy>=1.5",
 ]
 
@@ -84,9 +84,9 @@ tailbone = "tailbone.config:ConfigExtension"
 
 [project.urls]
 Homepage = "https://rattailproject.org"
-Repository = "https://kallithea.rattailproject.org/rattail-project/tailbone"
-Issues = "https://redmine.rattailproject.org/projects/tailbone/issues"
-Changelog = "https://kallithea.rattailproject.org/rattail-project/tailbone/files/master/CHANGELOG.md"
+Repository = "https://forgejo.wuttaproject.org/rattail/tailbone"
+Issues = "https://forgejo.wuttaproject.org/rattail/tailbone/issues"
+Changelog = "https://forgejo.wuttaproject.org/rattail/tailbone/src/branch/master/CHANGELOG.md"
 
 
 [tool.commitizen]

tailbone/api/auth.py

@@ -2,7 +2,7 @@
 ################################################################################
 #
 #  Rattail -- Retail Software Framework
-#  Copyright © 2010-2023 Lance Edgar
+#  Copyright © 2010-2024 Lance Edgar
 #
 #  This file is part of Rattail.
 #
@@ -24,8 +24,6 @@
 Tailbone Web API - Auth Views
 """
 
-from rattail.db.auth import set_user_password
-
 from cornice import Service
 
 from tailbone.api import APIView, api
@@ -42,11 +40,10 @@ class AuthenticationView(APIView):
         This will establish a server-side web session for the user if none
         exists.  Note that this also resets the user's session timer.
         """
-        data = {'ok': True}
+        data = {'ok': True, 'permissions': []}
         if self.request.user:
             data['user'] = self.get_user_info(self.request.user)
-
-        data['permissions'] = list(self.request.tailbone_cached_permissions)
+            data['permissions'] = list(self.request.user_permissions)
 
         # background color may be set per-request, by some apps
         if hasattr(self.request, 'background_color') and self.request.background_color:
@@ -176,7 +173,8 @@ class AuthenticationView(APIView):
             return {'error': "The current/old password you provided is incorrect"}
 
         # okay then, set new password
-        set_user_password(self.request.user, data['new_password'])
+        auth = self.app.get_auth_handler()
+        auth.set_user_password(self.request.user, data['new_password'])
         return {
             'ok': True,
             'user': self.get_user_info(self.request.user),

tailbone/api/batch/receiving.py

@@ -29,8 +29,7 @@ import logging
 import humanize
 import sqlalchemy as sa
 
-from rattail.db import model
-from rattail.util import pretty_quantity
+from rattail.db.model import PurchaseBatch, PurchaseBatchRow
 
 from cornice import Service
 from deform import widget as dfwidget
@@ -45,7 +44,7 @@ log = logging.getLogger(__name__)
 
 class ReceivingBatchViews(APIBatchView):
 
-    model_class = model.PurchaseBatch
+    model_class = PurchaseBatch
     default_handler_spec = 'rattail.batch.purchase:PurchaseBatchHandler'
     route_prefix = 'receivingbatchviews'
     permission_prefix = 'receiving'
@@ -55,7 +54,8 @@ class ReceivingBatchViews(APIBatchView):
     supports_execute = True
 
     def base_query(self):
-        query = super(ReceivingBatchViews, self).base_query()
+        model = self.app.model
+        query = super().base_query()
         query = query.filter(model.PurchaseBatch.mode == self.enum.PURCHASE_BATCH_MODE_RECEIVING)
         return query
 
@@ -85,7 +85,7 @@ class ReceivingBatchViews(APIBatchView):
 
         # assume "receive from PO" if given a PO key
         if data.get('purchase_key'):
-            data['receiving_workflow'] = 'from_po'
+            data['workflow'] = 'from_po'
 
         return super().create_object(data)
 
@@ -120,6 +120,7 @@ class ReceivingBatchViews(APIBatchView):
         return self._get(obj=batch)
 
     def eligible_purchases(self):
+        model = self.app.model
         uuid = self.request.params.get('vendor_uuid')
         vendor = self.Session.get(model.Vendor, uuid) if uuid else None
         if not vendor:
@@ -176,7 +177,7 @@ class ReceivingBatchViews(APIBatchView):
 
 class ReceivingBatchRowViews(APIBatchRowView):
 
-    model_class = model.PurchaseBatchRow
+    model_class = PurchaseBatchRow
     default_handler_spec = 'rattail.batch.purchase:PurchaseBatchHandler'
     route_prefix = 'receiving.rows'
     permission_prefix = 'receiving'
@@ -185,7 +186,8 @@ class ReceivingBatchRowViews(APIBatchRowView):
     supports_quick_entry = True
 
     def make_filter_spec(self):
-        filters = super(ReceivingBatchRowViews, self).make_filter_spec()
+        model = self.app.model
+        filters = super().make_filter_spec()
         if filters:
 
             # must translate certain convenience filters
@@ -296,11 +298,11 @@ class ReceivingBatchRowViews(APIBatchRowView):
         return filters
 
     def normalize(self, row):
-        data = super(ReceivingBatchRowViews, self).normalize(row)
+        data = super().normalize(row)
+        model = self.app.model
 
         batch = row.batch
-        app = self.get_rattail_app()
-        prodder = app.get_products_handler()
+        prodder = self.app.get_products_handler()
 
         data['product_uuid'] = row.product_uuid
         data['item_id'] = row.item_id
@@ -375,7 +377,7 @@ class ReceivingBatchRowViews(APIBatchRowView):
                 if accounted_for:
                     # some product accounted for; button should receive "remainder" only
                     if remainder:
-                        remainder = pretty_quantity(remainder)
+                        remainder = self.app.render_quantity(remainder)
                         data['quick_receive_quantity'] = remainder
                         data['quick_receive_text'] = "Receive Remainder ({} {})".format(
                             remainder, data['unit_uom'])
@@ -386,7 +388,7 @@ class ReceivingBatchRowViews(APIBatchRowView):
                 else: # nothing yet accounted for, button should receive "all"
                     if not remainder:
                         log.warning("quick receive remainder is empty for row %s", row.uuid)
-                    remainder = pretty_quantity(remainder)
+                    remainder = self.app.render_quantity(remainder)
                     data['quick_receive_quantity'] = remainder
                     data['quick_receive_text'] = "Receive ALL ({} {})".format(
                         remainder, data['unit_uom'])
@@ -414,7 +416,7 @@ class ReceivingBatchRowViews(APIBatchRowView):
             data['received_alert'] = None
             if self.batch_handler.get_units_confirmed(row):
                 msg = "You have already received some of this product; last update was {}.".format(
-                    humanize.naturaltime(app.make_utc() - row.modified))
+                    humanize.naturaltime(self.app.make_utc() - row.modified))
                 data['received_alert'] = msg
 
         return data
@@ -423,6 +425,8 @@ class ReceivingBatchRowViews(APIBatchRowView):
         """
         View which handles "receiving" against a particular batch row.
         """
+        model = self.app.model
+
         # first do basic input validation
         schema = ReceiveRow().bind(session=self.Session())
         form = forms.Form(schema=schema, request=self.request)

tailbone/api/master.py

@@ -26,7 +26,6 @@ Tailbone Web API - Master View
 
 import json
 
-from rattail.config import parse_bool
 from rattail.db.util import get_fieldnames
 
 from cornice import resource, Service
@@ -185,7 +184,7 @@ class APIMasterView(APIView):
             if sortcol:
                 spec = {
                     'field': sortcol.field_name,
-                    'direction': 'asc' if parse_bool(self.request.params['ascending']) else 'desc',
+                    'direction': 'asc' if self.config.parse_bool(self.request.params['ascending']) else 'desc',
                 }
                 if sortcol.model_name:
                     spec['model'] = sortcol.model_name

tailbone/app.py

@@ -25,19 +25,15 @@ Application Entry Point
 """
 
 import os
-import warnings
 
-import sqlalchemy as sa
 from sqlalchemy.orm import sessionmaker, scoped_session
 
 from wuttjamaican.util import parse_list
 
 from rattail.config import make_config
 from rattail.exceptions import ConfigurationError
-from rattail.db.types import GPCType
 
 from pyramid.config import Configurator
-from pyramid.authentication import SessionAuthenticationPolicy
 from zope.sqlalchemy import register
 
 import tailbone.db
@@ -66,9 +62,20 @@ def make_rattail_config(settings):
     # nb. this is for compaibility with wuttaweb
     settings['wutta_config'] = rattail_config
 
+    # must import all sqlalchemy models before things get rolling,
+    # otherwise can have errors about continuum TransactionMeta class
+    # not yet mapped, when relevant pages are first requested...
+    # cf. https://docs.pylonsproject.org/projects/pyramid_cookbook/en/latest/database/sqlalchemy.html#importing-all-sqlalchemy-models
+    # hat tip to https://stackoverflow.com/a/59241485
+    if getattr(rattail_config, 'tempmon_engine', None):
+        from rattail_tempmon.db import model as tempmon_model, Session as TempmonSession
+        tempmon_session = TempmonSession()
+        tempmon_session.query(tempmon_model.Appliance).first()
+        tempmon_session.close()
+
     # configure database sessions
-    if hasattr(rattail_config, 'rattail_engine'):
-        tailbone.db.Session.configure(bind=rattail_config.rattail_engine)
+    if hasattr(rattail_config, 'appdb_engine'):
+        tailbone.db.Session.configure(bind=rattail_config.appdb_engine)
     if hasattr(rattail_config, 'trainwreck_engine'):
         tailbone.db.TrainwreckSession.configure(bind=rattail_config.trainwreck_engine)
     if hasattr(rattail_config, 'tempmon_engine'):
@@ -325,7 +332,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')

tailbone/auth.py

@@ -27,20 +27,18 @@ Authentication & Authorization
 import logging
 import re
 
-from rattail.util import NOTSET
+from wuttjamaican.util import UNSPECIFIED
 
-from zope.interface import implementer
-from pyramid.authentication import SessionAuthenticationHelper
-from pyramid.request import RequestLocalCache
 from pyramid.security import remember, forget
 
+from wuttaweb.auth import WuttaSecurityPolicy
 from tailbone.db import Session
 
 
 log = logging.getLogger(__name__)
 
 
-def login_user(request, user, timeout=NOTSET):
+def login_user(request, user, timeout=UNSPECIFIED):
     """
     Perform the steps necessary to login the given user.  Note that this
     returns a ``headers`` dict which you should pass to the redirect.
@@ -49,7 +47,7 @@ def login_user(request, user, timeout=NOTSET):
     app = config.get_app()
     user.record_event(app.enum.USER_EVENT_LOGIN)
     headers = remember(request, user.uuid)
-    if timeout is NOTSET:
+    if timeout is UNSPECIFIED:
         timeout = session_timeout_for_user(config, user)
     log.debug("setting session timeout for '{}' to {}".format(user.username, timeout))
     set_session_timeout(request, timeout)
@@ -94,12 +92,12 @@ def set_session_timeout(request, timeout):
     request.session['_timeout'] = timeout or None
 
 
-class TailboneSecurityPolicy:
+class TailboneSecurityPolicy(WuttaSecurityPolicy):
 
-    def __init__(self, api_mode=False):
+    def __init__(self, db_session=None, api_mode=False, **kwargs):
+        kwargs['db_session'] = db_session or Session()
+        super().__init__(**kwargs)
         self.api_mode = api_mode
-        self.session_helper = SessionAuthenticationHelper()
-        self.identity_cache = RequestLocalCache(self.load_identity)
 
     def load_identity(self, request):
         config = request.registry.settings.get('rattail_config')
@@ -115,7 +113,7 @@ class TailboneSecurityPolicy:
                 if match:
                     token = match.group(1)
                     auth = app.get_auth_handler()
-                    user = auth.authenticate_user_token(Session(), token)
+                    user = auth.authenticate_user_token(self.db_session, token)
 
         if not user:
 
@@ -126,36 +124,10 @@ class TailboneSecurityPolicy:
 
             # fetch user object from db
             model = app.model
-            user = Session.get(model.User, uuid)
+            user = self.db_session.get(model.User, uuid)
             if not user:
                 return
 
         # this user is responsible for data changes in current request
-        Session().set_continuum_user(user)
+        self.db_session.set_continuum_user(user)
         return user
-
-    def identity(self, request):
-        return self.identity_cache.get_or_create(request)
-
-    def authenticated_userid(self, request):
-        user = self.identity(request)
-        if user is not None:
-            return user.uuid
-
-    def remember(self, request, userid, **kw):
-        return self.session_helper.remember(request, userid, **kw)
-
-    def forget(self, request, **kw):
-        return self.session_helper.forget(request, **kw)
-
-    def permits(self, request, context, permission):
-        # nb. root user can do anything
-        if request.is_root:
-            return True
-
-        config = request.registry.settings.get('rattail_config')
-        app = config.get_app()
-        auth = app.get_auth_handler()
-
-        user = self.identity(request)
-        return auth.has_permission(Session(), user, permission)

tailbone/diffs.py

@@ -2,7 +2,7 @@
 ################################################################################
 #
 #  Rattail -- Retail Software Framework
-#  Copyright © 2010-2023 Lance Edgar
+#  Copyright © 2010-2024 Lance Edgar
 #
 #  This file is part of Rattail.
 #
@@ -270,9 +270,21 @@ class VersionDiff(Diff):
         for field in self.fields:
             values[field] = {'before': self.render_old_value(field),
                              'after': self.render_new_value(field)}
+
+        operation = None
+        if self.version.operation_type == continuum.Operation.INSERT:
+            operation = 'INSERT'
+        elif self.version.operation_type == continuum.Operation.UPDATE:
+            operation = 'UPDATE'
+        elif self.version.operation_type == continuum.Operation.DELETE:
+            operation = 'DELETE'
+        else:
+            operation = self.version.operation_type
+
         return {
             'key': id(self.version),
             'model_title': self.title,
+            'operation': operation,
             'diff_class': self.nature,
             'fields': self.fields,
             'values': values,

tailbone/forms/core.py

@@ -47,7 +47,7 @@ from pyramid_deform import SessionFileUploadTempStore
 from pyramid.renderers import render
 from webhelpers2.html import tags, HTML
 
-from wuttaweb.util import get_form_data, make_json_safe
+from wuttaweb.util import FieldList, get_form_data, make_json_safe
 
 from tailbone.db import Session
 from tailbone.util import raw_datetime, render_markdown
@@ -401,6 +401,8 @@ class Form(object):
         self.edit_help_url = edit_help_url
         self.route_prefix = route_prefix
 
+        self.button_icon_submit = kwargs.get('button_icon_submit', 'save')
+
     def __iter__(self):
         return iter(self.fields)
 
@@ -905,7 +907,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:
@@ -1036,9 +1039,9 @@ class Form(object):
 
     def render_vue_tag(self, **kwargs):
         """ """
-        return self.render_vuejs_component()
+        return self.render_vuejs_component(**kwargs)
 
-    def render_vuejs_component(self):
+    def render_vuejs_component(self, **kwargs):
         """
         Render the Vue.js component HTML for the form.
 
@@ -1049,10 +1052,11 @@ class Form(object):
            <tailbone-form :configure-fields-help="configureFieldsHelp">
            </tailbone-form>
         """
-        kwargs = dict(self.vuejs_component_kwargs)
+        kw = dict(self.vuejs_component_kwargs)
+        kw.update(kwargs)
         if self.can_edit_help:
-            kwargs.setdefault(':configure-fields-help', 'configureFieldsHelp')
-        return HTML.tag(self.vue_tagname, **kwargs)
+            kw.setdefault(':configure-fields-help', 'configureFieldsHelp')
+        return HTML.tag(self.vue_tagname, **kw)
 
     def set_json_data(self, key, value):
         """
@@ -1220,6 +1224,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.
@@ -1359,12 +1375,19 @@ class Form(object):
 
     def obtain_value(self, record, field_name):
         if record:
+
+            if isinstance(record, dict):
+                return record[field_name]
+
+            try:
+                return getattr(record, field_name)
+            except AttributeError:
+                pass
+
             try:
                 return record[field_name]
-            except KeyError:
-                return None
             except TypeError:
-                return getattr(record, field_name, None)
+                pass
 
         # TODO: is this always safe to do?
         elif self.defaults and field_name in self.defaults:
@@ -1418,30 +1441,6 @@ class Form(object):
             return False
 
 
-class FieldList(list):
-    """
-    Convenience wrapper for a form's field list.
-    """
-
-    def insert_before(self, field, newfield):
-        if field in self:
-            i = self.index(field)
-            self.insert(i, newfield)
-        else:
-            log.warning("field '%s' not found, will append new field: %s",
-                        field, newfield)
-            self.append(newfield)
-
-    def insert_after(self, field, newfield):
-        if field in self:
-            i = self.index(field)
-            self.insert(i + 1, newfield)
-        else:
-            log.warning("field '%s' not found, will append new field: %s",
-                        field, newfield)
-            self.append(newfield)
-
-
 @colander.deferred
 def upload_widget(node, kw):
     request = kw['request']

tailbone/helpers.py

@@ -2,7 +2,7 @@
 ################################################################################
 #
 #  Rattail -- Retail Software Framework
-#  Copyright © 2010-2023 Lance Edgar
+#  Copyright © 2010-2024 Lance Edgar
 #
 #  This file is part of Rattail.
 #
@@ -24,6 +24,9 @@
 Template Context Helpers
 """
 
+# start off with all from wuttaweb
+from wuttaweb.helpers import *
+
 import os
 import datetime
 from decimal import Decimal
@@ -33,12 +36,7 @@ from rattail.time import localtime, make_utc
 from rattail.util import pretty_quantity, pretty_hours, hours_as_decimal
 from rattail.db.util import maxlen
 
-from webhelpers2.html import *
-from webhelpers2.html.tags import *
-
-from wuttaweb.util import get_liburl
-from tailbone.util import (csrf_token, get_csrf_token,
-                           pretty_datetime, raw_datetime,
+from tailbone.util import (pretty_datetime, raw_datetime,
                            render_markdown,
                            route_exists)
 

tailbone/menus.py

@@ -394,6 +394,11 @@ class TailboneMenuHandler(WuttaMenuHandler):
                     'route': 'products',
                     'perm': 'products.list',
                 },
+                {
+                    'title': "Product Costs",
+                    'route': 'product_costs',
+                    'perm': 'product_costs.list',
+                },
                 {
                     'title': "Departments",
                     'route': 'departments',
@@ -451,6 +456,11 @@ class TailboneMenuHandler(WuttaMenuHandler):
                     'route': 'vendors',
                     'perm': 'vendors.list',
                 },
+                {
+                    'title': "Product Costs",
+                    'route': 'product_costs',
+                    'perm': 'product_costs.list',
+                },
                 {'type': 'sep'},
                 {
                     'title': "Ordering",
@@ -703,7 +713,7 @@ class TailboneMenuHandler(WuttaMenuHandler):
             },
             {'type': 'sep'},
             {
-                'title': "App Details",
+                'title': "App Info",
                 'route': 'appinfo',
                 'perm': 'appinfo.list',
             },

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')

tailbone/templates/appinfo/configure.mako

@@ -1,250 +1,2 @@
 ## -*- coding: utf-8; -*-
-<%inherit file="/configure.mako" />
-
-<%def name="form_content()">
-
-  <h3 class="block is-size-3">Basics</h3>
-  <div class="block" style="padding-left: 2rem;">
-
-    <b-field grouped>
-
-      <b-field label="App Title">
-        <b-input name="rattail.app_title"
-                 v-model="simpleSettings['rattail.app_title']"
-                 @input="settingsNeedSaved = true">
-        </b-input>
-      </b-field>
-
-      <b-field label="Node Type">
-        ## TODO: should be a dropdown, app handler defines choices
-        <b-input name="rattail.node_type"
-                 v-model="simpleSettings['rattail.node_type']"
-                 @input="settingsNeedSaved = true">
-        </b-input>
-      </b-field>
-
-      <b-field label="Node Title">
-        <b-input name="rattail.node_title"
-                 v-model="simpleSettings['rattail.node_title']"
-                 @input="settingsNeedSaved = true">
-        </b-input>
-      </b-field>
-
-    </b-field>
-
-    <b-field>
-      <b-checkbox name="rattail.production"
-                  v-model="simpleSettings['rattail.production']"
-                  native-value="true"
-                  @input="settingsNeedSaved = true">
-        Production Mode
-      </b-checkbox>
-    </b-field>
-
-    <div class="level-left">
-      <div class="level-item">
-        <b-field>
-          <b-checkbox name="rattail.running_from_source"
-                      v-model="simpleSettings['rattail.running_from_source']"
-                      native-value="true"
-                      @input="settingsNeedSaved = true">
-            Running from Source
-          </b-checkbox>
-        </b-field>
-      </div>
-      <div class="level-item">
-        <b-field label="Top-Level Package" horizontal
-                 v-if="simpleSettings['rattail.running_from_source']">
-          <b-input name="rattail.running_from_source.rootpkg"
-                   v-model="simpleSettings['rattail.running_from_source.rootpkg']"
-                   @input="settingsNeedSaved = true">
-          </b-input>
-        </b-field>
-      </div>
-    </div>
-
-  </div>
-
-  <h3 class="block is-size-3">Display</h3>
-  <div class="block" style="padding-left: 2rem;">
-
-    <b-field grouped>
-
-      <b-field label="Background Color">
-        <b-input name="tailbone.background_color"
-                 v-model="simpleSettings['tailbone.background_color']"
-                 @input="settingsNeedSaved = true">
-        </b-input>
-      </b-field>
-
-    </b-field>
-
-  </div>
-
-  <h3 class="block is-size-3">Grids</h3>
-  <div class="block" style="padding-left: 2rem;">
-
-    <b-field grouped>
-
-      <b-field label="Default Page Size">
-        <b-input name="tailbone.grid.default_pagesize"
-                 v-model="simpleSettings['tailbone.grid.default_pagesize']"
-                 @input="settingsNeedSaved = true">
-        </b-input>
-      </b-field>
-
-    </b-field>
-
-  </div>
-
-  <h3 class="block is-size-3">Web Libraries</h3>
-  <div class="block" style="padding-left: 2rem;">
-
-    <${b}-table :data="weblibs">
-
-      <${b}-table-column field="title"
-                      label="Name"
-                      v-slot="props">
-        {{ props.row.title }}
-      </${b}-table-column>
-
-      <${b}-table-column field="configured_version"
-                      label="Version"
-                      v-slot="props">
-        {{ props.row.configured_version || props.row.default_version }}
-      </${b}-table-column>
-
-      <${b}-table-column field="configured_url"
-                      label="URL Override"
-                      v-slot="props">
-        {{ props.row.configured_url }}
-      </${b}-table-column>
-
-      <${b}-table-column field="live_url"
-                      label="Effective (Live) URL"
-                      v-slot="props">
-        <span v-if="props.row.modified"
-              class="has-text-warning">
-          save settings and refresh page to see new URL
-        </span>
-        <span v-if="!props.row.modified">
-          {{ props.row.live_url }}
-        </span>
-      </${b}-table-column>
-
-      <${b}-table-column field="actions"
-                      label="Actions"
-                      v-slot="props">
-        <a href="#"
-           @click.prevent="editWebLibraryInit(props.row)">
-          % if request.use_oruga:
-              <o-icon icon="edit" />
-          % else:
-              <i class="fas fa-edit"></i>
-          % endif
-          Edit
-        </a>
-      </${b}-table-column>
-
-    </${b}-table>
-
-    % for weblib in weblibs:
-        ${h.hidden('wuttaweb.libver.{}'.format(weblib['key']), **{':value': "simpleSettings['wuttaweb.libver.{}']".format(weblib['key'])})}
-        ${h.hidden('wuttaweb.liburl.{}'.format(weblib['key']), **{':value': "simpleSettings['wuttaweb.liburl.{}']".format(weblib['key'])})}
-    % endfor
-
-    <${b}-modal has-modal-card
-                % if request.use_oruga:
-                    v-model:active="editWebLibraryShowDialog"
-                % else:
-                    :active.sync="editWebLibraryShowDialog"
-                % endif
-                >
-      <div class="modal-card">
-
-        <header class="modal-card-head">
-          <p class="modal-card-title">Web Library: {{ editWebLibraryRecord.title }}</p>
-        </header>
-
-        <section class="modal-card-body">
-
-          <b-field grouped>
-            
-            <b-field label="Default Version">
-              <b-input v-model="editWebLibraryRecord.default_version"
-                       disabled>
-              </b-input>
-            </b-field>
-
-            <b-field label="Override Version">
-              <b-input v-model="editWebLibraryVersion">
-              </b-input>
-            </b-field>
-
-          </b-field>
-
-          <b-field label="Override URL">
-            <b-input v-model="editWebLibraryURL"
-                     expanded />
-          </b-field>
-
-          <b-field label="Effective URL (as of last page load)">
-            <b-input v-model="editWebLibraryRecord.live_url"
-                     disabled
-                     expanded />
-          </b-field>
-
-        </section>
-
-        <footer class="modal-card-foot">
-          <b-button type="is-primary"
-                    @click="editWebLibrarySave()"
-                    icon-pack="fas"
-                    icon-left="save">
-            Save
-          </b-button>
-          <b-button @click="editWebLibraryShowDialog = false">
-            Cancel
-          </b-button>
-        </footer>
-      </div>
-    </${b}-modal>
-
-  </div>
-</%def>
-
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
-
-    ThisPageData.weblibs = ${json.dumps(weblibs)|n}
-
-    ThisPageData.editWebLibraryShowDialog = false
-    ThisPageData.editWebLibraryRecord = {}
-    ThisPageData.editWebLibraryVersion = null
-    ThisPageData.editWebLibraryURL = null
-
-    ThisPage.methods.editWebLibraryInit = function(row) {
-        this.editWebLibraryRecord = row
-        this.editWebLibraryVersion = row.configured_version
-        this.editWebLibraryURL = row.configured_url
-        this.editWebLibraryShowDialog = true
-    }
-
-    ThisPage.methods.editWebLibrarySave = function() {
-        this.editWebLibraryRecord.configured_version = this.editWebLibraryVersion
-        this.editWebLibraryRecord.configured_url = this.editWebLibraryURL
-        this.editWebLibraryRecord.modified = true
-
-        this.simpleSettings[`wuttaweb.libver.${'$'}{this.editWebLibraryRecord.key}`] = this.editWebLibraryVersion
-        this.simpleSettings[`wuttaweb.liburl.${'$'}{this.editWebLibraryRecord.key}`] = this.editWebLibraryURL
-
-        this.settingsNeedSaved = true
-        this.editWebLibraryShowDialog = false
-    }
-
-  </script>
-</%def>
-
-
-${parent.body()}
+<%inherit file="wuttaweb:templates/appinfo/configure.mako" />

tailbone/templates/appinfo/index.mako

@@ -1,8 +1,7 @@
 ## -*- coding: utf-8; -*-
-<%inherit file="/master/index.mako" />
-
-<%def name="render_grid_component()">
+<%inherit file="wuttaweb:templates/appinfo/index.mako" />
 
+<%def name="page_content()">
   <div class="buttons">
 
     <once-button type="is-primary"
@@ -28,100 +27,5 @@
 
   </div>
 
-  <${b}-collapse class="panel" open>
-
-    <template #trigger="props">
-      <div class="panel-heading"
-           style="cursor: pointer;"
-           role="button">
-
-        ## TODO: for some reason buefy will "reuse" the icon
-        ## element in such a way that its display does not
-        ## refresh.  so to work around that, we use different
-        ## structure for the two icons, so buefy is forced to
-        ## re-draw
-
-        <b-icon v-if="props.open"
-                pack="fas"
-                icon="angle-down">
-        </b-icon>
-
-        <span v-if="!props.open">
-          <b-icon pack="fas"
-                  icon="angle-right">
-          </b-icon>
-        </span>
-
-        <span>Configuration Files</span>
-      </div>
-    </template>
-
-    <div class="panel-block">
-      <div style="width: 100%;">
-        <${b}-table :data="configFiles">
-          
-          <${b}-table-column field="priority"
-                          label="Priority"
-                          v-slot="props">
-            {{ props.row.priority }}
-          </${b}-table-column>
-
-          <${b}-table-column field="path"
-                          label="File Path"
-                          v-slot="props">
-            {{ props.row.path }}
-          </${b}-table-column>
-
-        </${b}-table>
-      </div>
-    </div>
-  </${b}-collapse>
-
-  <${b}-collapse class="panel"
-              :open="false">
-
-    <template #trigger="props">
-      <div class="panel-heading"
-           style="cursor: pointer;"
-           role="button">
-
-        ## TODO: for some reason buefy will "reuse" the icon
-        ## element in such a way that its display does not
-        ## refresh.  so to work around that, we use different
-        ## structure for the two icons, so buefy is forced to
-        ## re-draw
-
-        <b-icon v-if="props.open"
-                pack="fas"
-                icon="angle-down">
-        </b-icon>
-
-        <span v-if="!props.open">
-          <b-icon pack="fas"
-                  icon="angle-right">
-          </b-icon>
-        </span>
-
-        <strong>Installed Packages</strong>
-      </div>
-    </template>
-
-    <div class="panel-block">
-      <div style="width: 100%;">
-        ${parent.render_grid_component()}
-      </div>
-    </div>
-  </${b}-collapse>
+  ${parent.page_content()}
 </%def>
-
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
-
-    ThisPageData.configFiles = ${json.dumps([dict(path=p, priority=i) for i, p in enumerate(request.rattail_config.prioritized_files, 1)])|n}
-
-  </script>
-</%def>
-
-
-${parent.body()}

tailbone/templates/appsettings.mako

@@ -15,8 +15,8 @@
   <app-settings :groups="groups" :showing-group="showingGroup"></app-settings>
 </%def>
 
-<%def name="render_this_page_template()">
-  ${parent.render_this_page_template()}
+<%def name="render_vue_templates()">
+  ${parent.render_vue_templates()}
   <script type="text/x-template" id="app-settings-template">
 
     <div class="form">
@@ -150,19 +150,18 @@
   </script>
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
 
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
     ThisPageData.groups = ${json.dumps(settings_data)|n}
     ThisPageData.showingGroup = ${json.dumps(current_group or '')|n}
-
   </script>
 </%def>
 
-<%def name="make_this_page_component()">
-  ${parent.make_this_page_component()}
-  <script type="text/javascript">
+<%def name="make_vue_components()">
+  ${parent.make_vue_components()}
+  <script>
 
     Vue.component('app-settings', {
         template: '#app-settings-template',
@@ -193,6 +192,3 @@
 
   </script>
 </%def>
-
-
-${parent.body()}

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" />
@@ -34,17 +35,21 @@
   </head>
 
   <body>
-    ${declare_formposter_mixin()}
-
-    ${self.body()}
-
-    <div id="whole-page-app">
+    <div id="app" style="height: 100%;">
       <whole-page></whole-page>
     </div>
 
-    ${self.render_whole_page_template()}
-    ${self.make_whole_page_component()}
-    ${self.make_whole_page_app()}
+    ## TODO: this must come before the self.body() call..but why?
+    ${declare_formposter_mixin()}
+
+    ## content body from derived/child template
+    ${self.body()}
+
+    ## Vue app
+    ${self.render_vue_templates()}
+    ${self.modify_vue_vars()}
+    ${self.make_vue_components()}
+    ${self.make_vue_app()}
   </body>
 </html>
 
@@ -181,7 +186,7 @@
 
 <%def name="head_tags()"></%def>
 
-<%def name="render_whole_page_template()">
+<%def name="render_vue_template_whole_page()">
   <script type="text/x-template" id="whole-page-template">
     <div>
       <header>
@@ -280,7 +285,7 @@
                       <span class="header-text">
                         ${index_title}
                       </span>
-                      % if master.creatable and master.show_create_link and master.has_perm('create'):
+                      % if master.creatable and getattr(master, 'show_create_link', True) and master.has_perm('create'):
                           <once-button type="is-primary"
                                        tag="a" href="${url('{}.create'.format(route_prefix))}"
                                        icon-left="plus"
@@ -306,7 +311,7 @@
                           <span class="header-text">
                             ${h.link_to(instance_title, instance_url)}
                           </span>
-                      % elif master.creatable and master.show_create_link and master.has_perm('create'):
+                      % elif master.creatable and getattr(master, 'show_create_link', True) and master.has_perm('create'):
                           % if not request.matched_route.name.endswith('.create'):
                               <once-button type="is-primary"
                                            tag="a" href="${url('{}.create'.format(route_prefix))}"
@@ -627,9 +632,23 @@
         % endif
         <div class="navbar-dropdown">
           % if request.is_root:
-              ${h.link_to("Stop being root", url('stop_root'), class_='navbar-item root-user')}
+              ${h.form(url('stop_root'), ref='stopBeingRootForm')}
+              ${h.csrf_token(request)}
+              <input type="hidden" name="referrer" value="${request.current_route_url()}" />
+              <a @click="$refs.stopBeingRootForm.submit()"
+                 class="navbar-item root-user">
+                Stop being root
+              </a>
+              ${h.end_form()}
           % elif request.is_admin:
-              ${h.link_to("Become root", url('become_root'), class_='navbar-item root-user')}
+              ${h.form(url('become_root'), ref='startBeingRootForm')}
+              ${h.csrf_token(request)}
+              <input type="hidden" name="referrer" value="${request.current_route_url()}" />
+              <a @click="$refs.startBeingRootForm.submit()"
+                 class="navbar-item root-user">
+                Become root
+              </a>
+              ${h.end_form()}
           % endif
           % if messaging_enabled:
               ${h.link_to("Messages{}".format(" ({})".format(inbox_count) if inbox_count else ''), url('messages.inbox'), class_='navbar-item')}
@@ -637,7 +656,11 @@
           % if request.is_root or not request.user.prevent_password_change:
               ${h.link_to("Change Password", url('change_password'), class_='navbar-item')}
           % endif
-          ${h.link_to("Edit Preferences", url('my.preferences'), class_='navbar-item')}
+          % try:
+              ## nb. does not exist yet for wuttaweb
+              ${h.link_to("Edit Preferences", url('my.preferences'), class_='navbar-item')}
+          % except:
+          % endtry
           ${h.link_to("Logout", url('logout'), class_='navbar-item')}
         </div>
       </div>
@@ -658,19 +681,19 @@
       ## TODO: is there a better way to check if viewing parent?
       % if parent_instance is Undefined:
           % if master.editable and instance_editable and master.has_perm('edit'):
-              <once-button tag="a" href="${action_url('edit', instance)}"
+              <once-button tag="a" href="${master.get_action_url('edit', instance)}"
                            icon-left="edit"
                            text="Edit This">
               </once-button>
           % endif
-          % if master.cloneable and master.has_perm('clone'):
-              <once-button tag="a" href="${action_url('clone', instance)}"
+          % if getattr(master, 'cloneable', False) and not master.cloning and master.has_perm('clone'):
+              <once-button tag="a" href="${master.get_action_url('clone', instance)}"
                            icon-left="object-ungroup"
                            text="Clone This">
               </once-button>
           % endif
           % if master.deletable and instance_deletable and master.has_perm('delete'):
-              <once-button tag="a" href="${action_url('delete', instance)}"
+              <once-button tag="a" href="${master.get_action_url('delete', instance)}"
                            type="is-danger"
                            icon-left="trash"
                            text="Delete This">
@@ -679,7 +702,7 @@
       % else:
           ## viewing row
           % if instance_deletable and master.has_perm('delete_row'):
-              <once-button tag="a" href="${action_url('delete', instance)}"
+              <once-button tag="a" href="${master.get_action_url('delete', instance)}"
                            type="is-danger"
                            icon-left="trash"
                            text="Delete This">
@@ -688,13 +711,13 @@
       % endif
   % elif master and master.editing:
       % if master.viewable and master.has_perm('view'):
-          <once-button tag="a" href="${action_url('view', instance)}"
+          <once-button tag="a" href="${master.get_action_url('view', instance)}"
                        icon-left="eye"
                        text="View This">
           </once-button>
       % endif
       % if master.deletable and instance_deletable and master.has_perm('delete'):
-          <once-button tag="a" href="${action_url('delete', instance)}"
+          <once-button tag="a" href="${master.get_action_url('delete', instance)}"
                        type="is-danger"
                        icon-left="trash"
                        text="Delete This">
@@ -702,13 +725,13 @@
       % endif
   % elif master and master.deleting:
       % if master.viewable and master.has_perm('view'):
-          <once-button tag="a" href="${action_url('view', instance)}"
+          <once-button tag="a" href="${master.get_action_url('view', instance)}"
                        icon-left="eye"
                        text="View This">
           </once-button>
       % endif
       % if master.editable and instance_editable and master.has_perm('edit'):
-          <once-button tag="a" href="${action_url('edit', instance)}"
+          <once-button tag="a" href="${master.get_action_url('edit', instance)}"
                        icon-left="edit"
                        text="Edit This">
           </once-button>
@@ -749,11 +772,8 @@
   % endif
 </%def>
 
-<%def name="declare_whole_page_vars()">
-  ${page_help.declare_vars()}
-  ${multi_file_upload.declare_vars()}
-  ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.feedback.js') + '?ver={}'.format(tailbone.__version__))}
-  <script type="text/javascript">
+<%def name="render_vue_script_whole_page()">
+  <script>
 
     let WholePage = {
         template: '#whole-page-template',
@@ -889,57 +909,6 @@
   </script>
 </%def>
 
-<%def name="modify_whole_page_vars()">
-  <script type="text/javascript">
-
-    % if request.user:
-    FeedbackFormData.userUUID = ${json.dumps(request.user.uuid)|n}
-    FeedbackFormData.userName = ${json.dumps(str(request.user))|n}
-    % endif
-
-  </script>
-</%def>
-
-<%def name="finalize_whole_page_vars()">
-  ## NOTE: if you override this, must use <script> tags
-</%def>
-
-<%def name="make_whole_page_component()">
-
-  ${make_grid_filter_components()}
-
-  ${self.declare_whole_page_vars()}
-  ${self.modify_whole_page_vars()}
-  ${self.finalize_whole_page_vars()}
-
-  ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.autocomplete.js') + '?ver={}'.format(tailbone.__version__))}
-
-  ${page_help.make_component()}
-  ${multi_file_upload.make_component()}
-
-  <script type="text/javascript">
-
-    FeedbackForm.data = function() { return FeedbackFormData }
-
-    Vue.component('feedback-form', FeedbackForm)
-
-    WholePage.data = function() { return WholePageData }
-
-    Vue.component('whole-page', WholePage)
-
-  </script>
-</%def>
-
-<%def name="make_whole_page_app()">
-  <script type="text/javascript">
-
-    new Vue({
-        el: '#whole-page-app'
-    })
-
-  </script>
-</%def>
-
 <%def name="wtfield(form, name, **kwargs)">
   <div class="field-wrapper${' error' if form[name].errors else ''}">
     <label for="${name}">${form[name].label}</label>
@@ -961,3 +930,88 @@
     </div>
   </div>
 </%def>
+
+##############################
+## vue components + app
+##############################
+
+<%def name="render_vue_templates()">
+  ${page_help.declare_vars()}
+  ${multi_file_upload.declare_vars()}
+  ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.feedback.js') + '?ver={}'.format(tailbone.__version__))}
+  ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.buefy.autocomplete.js') + '?ver={}'.format(tailbone.__version__))}
+
+  ## DEPRECATED; called for back-compat
+  ${self.render_whole_page_template()}
+</%def>
+
+## DEPRECATED; remains for back-compat
+<%def name="render_whole_page_template()">
+  ${self.render_vue_template_whole_page()}
+  ${self.declare_whole_page_vars()}
+</%def>
+
+## DEPRECATED; remains for back-compat
+<%def name="declare_whole_page_vars()">
+  ${self.render_vue_script_whole_page()}
+</%def>
+
+<%def name="modify_vue_vars()">
+  ## DEPRECATED; called for back-compat
+  ${self.modify_whole_page_vars()}
+</%def>
+
+## DEPRECATED; remains for back-compat
+<%def name="modify_whole_page_vars()">
+  <script>
+
+    % if request.user:
+    FeedbackFormData.userUUID = ${json.dumps(request.user.uuid)|n}
+    FeedbackFormData.userName = ${json.dumps(str(request.user))|n}
+    % endif
+
+  </script>
+</%def>
+
+<%def name="make_vue_components()">
+  ${make_wutta_components()}
+  ${make_grid_filter_components()}
+  ${page_help.make_component()}
+  ${multi_file_upload.make_component()}
+  <script>
+    FeedbackForm.data = function() { return FeedbackFormData }
+    Vue.component('feedback-form', FeedbackForm)
+  </script>
+
+  ## DEPRECATED; called for back-compat
+  ${self.finalize_whole_page_vars()}
+  ${self.make_whole_page_component()}
+</%def>
+
+## DEPRECATED; remains for back-compat
+<%def name="make_whole_page_component()">
+  <script>
+    WholePage.data = function() { return WholePageData }
+    Vue.component('whole-page', WholePage)
+  </script>
+</%def>
+
+<%def name="make_vue_app()">
+  ## DEPRECATED; called for back-compat
+  ${self.make_whole_page_app()}
+</%def>
+
+## DEPRECATED; remains for back-compat
+<%def name="make_whole_page_app()">
+  <script>
+    new Vue({
+        el: '#app'
+    })
+  </script>
+</%def>
+
+##############################
+## DEPRECATED
+##############################
+
+<%def name="finalize_whole_page_vars()"></%def>

tailbone/templates/base_meta.mako

@@ -1,10 +1,7 @@
 ## -*- coding: utf-8; -*-
+<%inherit file="wuttaweb:templates/base_meta.mako" />
 
-<%def name="app_title()">${rattail_app.get_node_title()}</%def>
-
-<%def name="global_title()">${"[STAGE] " if not request.rattail_config.production() else ''}${self.app_title()}</%def>
-
-<%def name="extra_styles()"></%def>
+<%def name="app_title()">${app.get_node_title()}</%def>
 
 <%def name="favicon()">
   <link rel="icon" type="image/x-icon" href="${request.rattail_config.get('tailbone', 'favicon_url', default=request.static_url('tailbone:static/img/rattail.ico'))}" />
@@ -13,9 +10,3 @@
 <%def name="header_logo()">
   ${h.image(request.rattail_config.get('tailbone', 'header_image_url', default=request.static_url('tailbone:static/img/rattail.ico')), "Header Logo", style="height: 49px;")}
 </%def>
-
-<%def name="footer()">
-  <p class="has-text-centered">
-    powered by ${h.link_to("Rattail", url('about'))}
-  </p>
-</%def>

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>
@@ -64,10 +64,17 @@
   % endif
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
+<%def name="render_vue_templates()">
+  ${parent.render_vue_templates()}
+  % if master.results_executable and master.has_perm('execute_multiple'):
+      ${execute_form.render_vue_template(form_kwargs={'ref': 'actualExecuteForm'}, buttons=False)}
+  % endif
+</%def>
+
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
   % if master.results_refreshable and master.has_perm('refresh'):
-      <script type="text/javascript">
+      <script>
 
         TailboneGridData.refreshResultsButtonText = "Refresh Results"
         TailboneGridData.refreshResultsButtonDisabled = false
@@ -81,9 +88,9 @@
       </script>
   % endif
   % if master.results_executable and master.has_perm('execute_multiple'):
-      <script type="text/javascript">
+      <script>
 
-        ${execute_form.component_studly}.methods.submit = function() {
+        ${execute_form.vue_component}.methods.submit = function() {
             this.$refs.actualExecuteForm.submit()
         }
 
@@ -118,25 +125,9 @@
   % endif
 </%def>
 
-<%def name="make_this_page_component()">
-  ${parent.make_this_page_component()}
+<%def name="make_vue_components()">
+  ${parent.make_vue_components()}
   % if master.results_executable and master.has_perm('execute_multiple'):
-      <script type="text/javascript">
-
-        ${execute_form.component_studly}.data = function() { return ${execute_form.component_studly}Data }
-
-        Vue.component('${execute_form.component}', ${execute_form.component_studly})
-
-      </script>
+      ${execute_form.render_vue_finalize()}
   % endif
 </%def>
-
-<%def name="render_this_page_template()">
-  ${parent.render_this_page_template()}
-  % if master.results_executable and master.has_perm('execute_multiple'):
-      ${execute_form.render_deform(form_kwargs={'ref': 'actualExecuteForm'}, buttons=False)|n}
-  % endif
-</%def>
-
-
-${parent.body()}

tailbone/templates/batch/inventory/desktop_form.mako

@@ -147,7 +147,7 @@
 
   <script type="text/javascript">
 
-    let ${form.component_studly} = {
+    let ${form.vue_component} = {
         template: '#${form.component}-template',
         mixins: [SimpleRequestMixin],
 
@@ -278,7 +278,7 @@
         },
     }
 
-    let ${form.component_studly}Data = {
+    let ${form.vue_component}Data = {
         submitting: false,
 
         productUPC: null,
@@ -297,14 +297,9 @@
   </script>
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
-
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
     ThisPageData.toggleCompleteSubmitting = false
-
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/batch/pos/view.mako

@@ -1,13 +1,9 @@
 ## -*- coding: utf-8; -*-
 <%inherit file="/batch/view.mako" />
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
-
-    ${form.component_studly}Data.taxesData = ${json.dumps(taxes_data)|n}
-
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
+    ${form.vue_component}Data.taxesData = ${json.dumps(taxes_data)|n}
   </script>
 </%def>
-
-${parent.body()}

tailbone/templates/batch/vendorcatalog/configure.mako

@@ -39,14 +39,9 @@
   </div>
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
-
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
     ThisPageData.catalogParsers = ${json.dumps(catalog_parsers_data)|n}
-
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/batch/vendorcatalog/create.mako

@@ -1,16 +1,16 @@
 ## -*- coding: utf-8; -*-
 <%inherit file="/batch/create.mako" />
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
-    ${form.component_studly}Data.parsers = ${json.dumps(parsers_data)|n}
+    ${form.vue_component}Data.parsers = ${json.dumps(parsers_data)|n}
 
-    ${form.component_studly}Data.vendorName = null
-    ${form.component_studly}Data.vendorNameReplacement = null
+    ${form.vue_component}Data.vendorName = null
+    ${form.vue_component}Data.vendorNameReplacement = null
 
-    ${form.component_studly}.watch.field_model_parser_key = function(val) {
+    ${form.vue_component}.watch.field_model_parser_key = function(val) {
         let parser = this.parsers[val]
         if (parser.vendor_uuid) {
             if (this.field_model_vendor_uuid != parser.vendor_uuid) {
@@ -24,11 +24,11 @@
         }
     }
 
-    ${form.component_studly}.methods.vendorLabelChanging = function(label) {
+    ${form.vue_component}.methods.vendorLabelChanging = function(label) {
         this.vendorNameReplacement = label
     }
 
-    ${form.component_studly}.methods.vendorChanged = function(uuid) {
+    ${form.vue_component}.methods.vendorChanged = function(uuid) {
         if (uuid) {
             this.vendorName = this.vendorNameReplacement
             this.vendorNameReplacement = null
@@ -37,6 +37,3 @@
 
   </script>
 </%def>
-
-
-${parent.body()}

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">
@@ -149,12 +148,6 @@
   </nav>
 </%def>
 
-<%def name="render_form_template()">
-  ## TODO: should use self.render_form_buttons()
-  ## ${form.render_deform(form_id='batch-form', buttons=capture(self.render_form_buttons))|n}
-  ${form.render_deform(form_id='batch-form', buttons=capture(buttons))|n}
-</%def>
-
 <%def name="render_this_page()">
   ${parent.render_this_page()}
 
@@ -174,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">
@@ -197,16 +189,6 @@
 
 </%def>
 
-<%def name="render_this_page_template()">
-  ${parent.render_this_page_template()}
-  % 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}
-  % endif
-  % if master.handler.executable(batch) and master.has_perm('execute'):
-      ${execute_form.render_deform(form_kwargs={'ref': 'actualExecuteForm'}, buttons=False)|n}
-  % endif
-</%def>
-
 <%def name="render_form()">
   <div class="form">
     <${form.component} @show-upload="showUploadDialog = true">
@@ -267,9 +249,27 @@
   % endif
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%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_vue_template(buttons=False, form_kwargs={'ref': 'actualUploadForm'})}
+  % endif
+  % if master.handler.executable(batch) and master.has_perm('execute'):
+      ${execute_form.render_vue_template(form_kwargs={'ref': 'actualExecuteForm'}, buttons=False)}
+  % endif
+</%def>
+
+## DEPRECATED; remains for back-compat
+## nb. this is called by parent template, /form.mako
+<%def name="render_form_template()">
+  ## TODO: should use self.render_form_buttons()
+  ## ${form.render_deform(form_id='batch-form', buttons=capture(self.render_form_buttons))|n}
+  ${form.render_deform(form_id='batch-form', buttons=capture(buttons))|n}
+</%def>
+
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     ThisPageData.statusBreakdownData = ${json.dumps(status_breakdown_data)|n}
 
@@ -285,7 +285,7 @@
     }
 
     % if not batch.executed and master.has_perm('edit'):
-        ${form.component_studly}Data.togglingBatchComplete = false
+        ${form.vue_component}Data.togglingBatchComplete = false
     % endif
 
     % if master.has_worksheet_file and master.allow_worksheet(batch) and master.has_perm('worksheet'):
@@ -306,7 +306,7 @@
             form.submit()
         }
 
-        ${upload_worksheet_form.component_studly}.methods.submit = function() {
+        ${upload_worksheet_form.vue_component}.methods.submit = function() {
             this.$refs.actualUploadForm.submit()
         }
 
@@ -321,7 +321,7 @@
             this.$refs.executeBatchForm.submit()
         }
 
-        ${execute_form.component_studly}.methods.submit = function() {
+        ${execute_form.vue_component}.methods.submit = function() {
             this.$refs.actualExecuteForm.submit()
         }
 
@@ -329,9 +329,9 @@
 
     % if master.rows_bulk_deletable and not batch.executed and master.has_perm('delete_rows'):
 
-        ${rows_grid.component_studly}Data.deleteResultsShowDialog = false
+        ${rows_grid.vue_component}Data.deleteResultsShowDialog = false
 
-        ${rows_grid.component_studly}.methods.deleteResultsInit = function() {
+        ${rows_grid.vue_component}.methods.deleteResultsInit = function() {
             this.deleteResultsShowDialog = true
         }
 
@@ -340,28 +340,12 @@
   </script>
 </%def>
 
-<%def name="make_this_page_component()">
-  ${parent.make_this_page_component()}
+<%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 type="text/javascript">
-
-        ## UploadForm
-        ${upload_worksheet_form.component_studly}.data = function() { return ${upload_worksheet_form.component_studly}Data }
-        Vue.component('${upload_worksheet_form.component}', ${upload_worksheet_form.component_studly})
-
-      </script>
+      ${upload_worksheet_form.render_vue_finalize()}
   % endif
-
   % if execute_enabled and master.has_perm('execute'):
-      <script type="text/javascript">
-
-        ## ExecuteForm
-        ${execute_form.component_studly}.data = function() { return ${execute_form.component_studly}Data }
-        Vue.component('${execute_form.component}', ${execute_form.component_studly})
-
-      </script>
+      ${execute_form.render_vue_finalize()}
   % endif
 </%def>
-
-
-${parent.body()}

tailbone/templates/configure-menus.mako

@@ -208,9 +208,9 @@
   % endif
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     ThisPageData.menuSequence = ${json.dumps([m['key'] for m in menus])|n}
 
@@ -443,6 +443,3 @@
 
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/configure.mako

@@ -92,7 +92,7 @@
         <b-select name="${tmpl['setting_file']}"
                   v-model="inputFileTemplateSettings['${tmpl['setting_file']}']"
                   @input="settingsNeedSaved = true">
-          <option :value="null">-new-</option>
+          <option value="">-new-</option>
           <option v-for="option in inputFileTemplateFileOptions['${tmpl['key']}']"
                   :key="option"
                   :value="option">
@@ -104,22 +104,40 @@
       <b-field label="Upload"
                v-show="inputFileTemplateSettings['${tmpl['setting_mode']}'] == 'hosted' && !inputFileTemplateSettings['${tmpl['setting_file']}']">
 
-        <b-field class="file is-primary"
-                 :class="{'has-name': !!inputFileTemplateSettings['${tmpl['setting_file']}']}">
-          <b-upload name="${tmpl['setting_file']}.upload"
-                    v-model="inputFileTemplateUploads['${tmpl['key']}']"
-                    class="file-label"
-                    @input="settingsNeedSaved = true">
-            <span class="file-cta">
-              <b-icon class="file-icon" pack="fas" icon="upload"></b-icon>
-              <span class="file-label">Click to upload</span>
-            </span>
-          </b-upload>
-          <span v-if="inputFileTemplateUploads['${tmpl['key']}']"
-                class="file-name">
-            {{ inputFileTemplateUploads['${tmpl['key']}'].name }}
-          </span>
-        </b-field>
+        % if request.use_oruga:
+            <o-field class="file">
+              <o-upload name="${tmpl['setting_file']}.upload"
+                        v-model="inputFileTemplateUploads['${tmpl['key']}']"
+                        v-slot="{ onclick }"
+                        @input="settingsNeedSaved = true">
+                <o-button variant="primary"
+                          @click="onclick">
+                  <o-icon icon="upload" />
+                  <span>Click to upload</span>
+                </o-button>
+                <span class="file-name" v-if="inputFileTemplateUploads['${tmpl['key']}']">
+                  {{ inputFileTemplateUploads['${tmpl['key']}'].name }}
+                </span>
+              </o-upload>
+            </o-field>
+        % else:
+            <b-field class="file is-primary"
+                     :class="{'has-name': !!inputFileTemplateSettings['${tmpl['setting_file']}']}">
+              <b-upload name="${tmpl['setting_file']}.upload"
+                        v-model="inputFileTemplateUploads['${tmpl['key']}']"
+                        class="file-label"
+                        @input="settingsNeedSaved = true">
+                <span class="file-cta">
+                  <b-icon class="file-icon" pack="fas" icon="upload"></b-icon>
+                  <span class="file-label">Click to upload</span>
+                </span>
+              </b-upload>
+              <span v-if="inputFileTemplateUploads['${tmpl['key']}']"
+                    class="file-name">
+                {{ inputFileTemplateUploads['${tmpl['key']}'].name }}
+              </span>
+            </b-field>
+        % endif
 
       </b-field>
 
@@ -143,6 +161,85 @@
   </div>
 </%def>
 
+<%def name="output_file_template_field(key)">
+    <% tmpl = output_file_templates[key] %>
+    <b-field grouped>
+
+      <b-field label="${tmpl['label']}">
+        <b-select name="${tmpl['setting_mode']}"
+                  v-model="outputFileTemplateSettings['${tmpl['setting_mode']}']"
+                  @input="settingsNeedSaved = true">
+          <option value="default">use default</option>
+          <option value="hosted">use uploaded file</option>
+        </b-select>
+      </b-field>
+
+      <b-field label="File"
+               v-show="outputFileTemplateSettings['${tmpl['setting_mode']}'] == 'hosted'"
+               :message="outputFileTemplateSettings['${tmpl['setting_file']}'] ? 'This file lives on disk at: ${output_file_option_dirs[tmpl['key']]}' : null">
+        <b-select name="${tmpl['setting_file']}"
+                  v-model="outputFileTemplateSettings['${tmpl['setting_file']}']"
+                  @input="settingsNeedSaved = true">
+          <option value="">-new-</option>
+          <option v-for="option in outputFileTemplateFileOptions['${tmpl['key']}']"
+                  :key="option"
+                  :value="option">
+            {{ option }}
+          </option>
+        </b-select>
+      </b-field>
+
+      <b-field label="Upload"
+               v-show="outputFileTemplateSettings['${tmpl['setting_mode']}'] == 'hosted' && !outputFileTemplateSettings['${tmpl['setting_file']}']">
+
+        % if request.use_oruga:
+            <o-field class="file">
+              <o-upload name="${tmpl['setting_file']}.upload"
+                        v-model="outputFileTemplateUploads['${tmpl['key']}']"
+                        v-slot="{ onclick }"
+                        @input="settingsNeedSaved = true">
+                <o-button variant="primary"
+                          @click="onclick">
+                  <o-icon icon="upload" />
+                  <span>Click to upload</span>
+                </o-button>
+                <span class="file-name" v-if="outputFileTemplateUploads['${tmpl['key']}']">
+                  {{ outputFileTemplateUploads['${tmpl['key']}'].name }}
+                </span>
+              </o-upload>
+            </o-field>
+        % else:
+            <b-field class="file is-primary"
+                     :class="{'has-name': !!outputFileTemplateSettings['${tmpl['setting_file']}']}">
+              <b-upload name="${tmpl['setting_file']}.upload"
+                        v-model="outputFileTemplateUploads['${tmpl['key']}']"
+                        class="file-label"
+                        @input="settingsNeedSaved = true">
+                <span class="file-cta">
+                  <b-icon class="file-icon" pack="fas" icon="upload"></b-icon>
+                  <span class="file-label">Click to upload</span>
+                </span>
+              </b-upload>
+              <span v-if="outputFileTemplateUploads['${tmpl['key']}']"
+                    class="file-name">
+                {{ outputFileTemplateUploads['${tmpl['key']}'].name }}
+              </span>
+            </b-field>
+        % endif
+      </b-field>
+
+    </b-field>
+</%def>
+
+<%def name="output_file_templates_section()">
+  <h3 class="block is-size-3">Output File Templates</h3>
+  <div class="block" style="padding-left: 2rem;">
+    % for key in output_file_templates:
+        ${self.output_file_template_field(key)}
+    % endfor
+  </div>
+</%def>
+
 <%def name="form_content()"></%def>
 
 <%def name="page_content()">
@@ -183,15 +280,14 @@
         <b-button @click="purgeSettingsShowDialog = false">
           Cancel
         </b-button>
-        ${h.form(request.current_route_url())}
+        ${h.form(request.current_route_url(), **{'@submit': 'purgingSettings = true'})}
         ${h.csrf_token(request)}
         ${h.hidden('remove_settings', 'true')}
         <b-button type="is-danger"
                   native-type="submit"
                   :disabled="purgingSettings"
                   icon-pack="fas"
-                  icon-left="trash"
-                  @click="purgingSettings = true">
+                  icon-left="trash">
           {{ purgingSettings ? "Working, please wait..." : "Remove All Settings" }}
         </b-button>
         ${h.end_form()}
@@ -205,62 +301,42 @@
   ${h.end_form()}
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     % if simple_settings is not Undefined:
         ThisPageData.simpleSettings = ${json.dumps(simple_settings)|n}
     % endif
 
-    % if input_file_template_settings is not Undefined:
-        ThisPageData.inputFileTemplateSettings = ${json.dumps(input_file_template_settings)|n}
-        ThisPageData.inputFileTemplateFileOptions = ${json.dumps(input_file_options)|n}
-        ThisPageData.inputFileTemplateUploads = {
-            % for key in input_file_templates:
-                '${key}': null,
-            % endfor
-        }
-    % endif
-
     ThisPageData.purgeSettingsShowDialog = false
     ThisPageData.purgingSettings = false
 
     ThisPageData.settingsNeedSaved = false
     ThisPageData.undoChanges = false
     ThisPageData.savingSettings = false
+    ThisPageData.validators = []
 
     ThisPage.methods.purgeSettingsInit = function() {
         this.purgeSettingsShowDialog = true
     }
 
-    % if input_file_template_settings is not Undefined:
-        ThisPage.methods.validateInputFileTemplateSettings = function() {
-            % for tmpl in input_file_templates.values():
-                if (this.inputFileTemplateSettings['${tmpl['setting_mode']}'] == 'hosted') {
-                    if (!this.inputFileTemplateSettings['${tmpl['setting_file']}']) {
-                        if (!this.inputFileTemplateUploads['${tmpl['key']}']) {
-                            return "You must provide a file to upload for the ${tmpl['label']} template."
-                        }
-                    }
-                }
-            % endfor
-        }
-    % endif
-
-    ThisPage.methods.validateSettings = function() {
-        let msg
-
-        % if input_file_template_settings is not Undefined:
-            msg = this.validateInputFileTemplateSettings()
-            if (msg) {
-                return msg
-            }
-        % endif
-    }
+    ThisPage.methods.validateSettings = function() {}
 
     ThisPage.methods.saveSettings = function() {
-        let msg = this.validateSettings()
+        let msg
+
+        // nb. this is the future
+        for (let validator of this.validators) {
+            msg = validator.call(this)
+            if (msg) {
+                alert(msg)
+                return
+            }
+        }
+
+        // nb. legacy method
+        msg = this.validateSettings()
         if (msg) {
             alert(msg)
             return
@@ -291,8 +367,65 @@
         window.addEventListener('beforeunload', this.beforeWindowUnload)
     }
 
+    ##############################
+    ## input file templates
+    ##############################
+
+    % if input_file_template_settings is not Undefined:
+
+        ThisPageData.inputFileTemplateSettings = ${json.dumps(input_file_template_settings)|n}
+        ThisPageData.inputFileTemplateFileOptions = ${json.dumps(input_file_options)|n}
+        ThisPageData.inputFileTemplateUploads = {
+            % for key in input_file_templates:
+                '${key}': null,
+            % endfor
+        }
+
+        ThisPage.methods.validateInputFileTemplateSettings = function() {
+            % for tmpl in input_file_templates.values():
+                if (this.inputFileTemplateSettings['${tmpl['setting_mode']}'] == 'hosted') {
+                    if (!this.inputFileTemplateSettings['${tmpl['setting_file']}']) {
+                        if (!this.inputFileTemplateUploads['${tmpl['key']}']) {
+                            return "You must provide a file to upload for the ${tmpl['label']} template."
+                        }
+                    }
+                }
+            % endfor
+        }
+
+        ThisPageData.validators.push(ThisPage.methods.validateInputFileTemplateSettings)
+
+    % endif
+
+    ##############################
+    ## output file templates
+    ##############################
+
+    % if output_file_template_settings is not Undefined:
+
+        ThisPageData.outputFileTemplateSettings = ${json.dumps(output_file_template_settings)|n}
+        ThisPageData.outputFileTemplateFileOptions = ${json.dumps(output_file_options)|n}
+        ThisPageData.outputFileTemplateUploads = {
+            % for key in output_file_templates:
+                '${key}': null,
+            % endfor
+        }
+
+        ThisPage.methods.validateOutputFileTemplateSettings = function() {
+            % for tmpl in output_file_templates.values():
+                if (this.outputFileTemplateSettings['${tmpl['setting_mode']}'] == 'hosted') {
+                    if (!this.outputFileTemplateSettings['${tmpl['setting_file']}']) {
+                        if (!this.outputFileTemplateUploads['${tmpl['key']}']) {
+                            return "You must provide a file to upload for the ${tmpl['label']} template."
+                        }
+                    }
+                }
+            % endfor
+        }
+
+        ThisPageData.validators.push(ThisPage.methods.validateOutputFileTemplateSettings)
+
+    % endif
+
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/customers/configure.mako

@@ -88,9 +88,9 @@
 
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     ThisPage.methods.getLabelForKey = function(key) {
         switch (key) {
@@ -111,6 +111,3 @@
 
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/customers/pending/view.mako

@@ -106,9 +106,9 @@
   % endif
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     ThisPageData.resolvePersonShowDialog = false
     ThisPageData.resolvePersonUUID = null
@@ -139,5 +139,3 @@
 
   </script>
 </%def>
-
-${parent.body()}

tailbone/templates/customers/view.mako

@@ -16,15 +16,15 @@
   </div>
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     % if expose_shoppers:
-    ${form.component_studly}Data.shoppers = ${json.dumps(shoppers_data)|n}
+    ${form.vue_component}Data.shoppers = ${json.dumps(shoppers_data)|n}
     % endif
     % if expose_people:
-    ${form.component_studly}Data.peopleData = ${json.dumps(people_data)|n}
+    ${form.vue_component}Data.peopleData = ${json.dumps(people_data)|n}
     % endif
 
     ThisPage.methods.detachPerson = function(url) {
@@ -36,5 +36,3 @@
 
   </script>
 </%def>
-
-${parent.body()}

tailbone/templates/custorders/create.mako

@@ -47,10 +47,9 @@
   </div>
 </%def>
 
-<%def name="render_this_page_template()">
-  ${parent.render_this_page_template()}
+<%def name="render_vue_templates()">
+  ${parent.render_vue_templates()}
   ${product_lookup.tailbone_product_lookup_template()}
-
   <script type="text/x-template" id="customer-order-creator-template">
     <div>
 
@@ -1265,12 +1264,7 @@
 
     </div>
   </script>
-</%def>
-
-<%def name="make_this_page_component()">
-  ${parent.make_this_page_component()}
-  ${product_lookup.tailbone_product_lookup_component()}
-  <script type="text/javascript">
+  <script>
 
     const CustomerOrderCreator = {
         template: '#customer-order-creator-template',
@@ -2406,5 +2400,7 @@
   </script>
 </%def>
 
-
-${parent.body()}
+<%def name="make_vue_components()">
+  ${parent.make_vue_components()}
+  ${product_lookup.tailbone_product_lookup_component()}
+</%def>

tailbone/templates/custorders/items/view.mako

@@ -291,11 +291,11 @@
   % endif
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
-    ${form.component_studly}Data.eventsData = ${json.dumps(events_data)|n}
+    ${form.vue_component}Data.eventsData = ${json.dumps(events_data)|n}
 
     % if master.has_perm('confirm_price'):
 
@@ -392,9 +392,9 @@
             this.$refs.changeStatusForm.submit()
         }
 
-        ${form.component_studly}Data.changeFlaggedSubmitting = false
+        ${form.vue_component}Data.changeFlaggedSubmitting = false
 
-        ${form.component_studly}.methods.changeFlaggedSubmit = function() {
+        ${form.vue_component}.methods.changeFlaggedSubmit = function() {
             this.changeFlaggedSubmitting = true
         }
 
@@ -448,5 +448,3 @@
 
   </script>
 </%def>
-
-${parent.body()}

tailbone/templates/datasync/changes/index.mako

@@ -26,9 +26,9 @@
 
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     % if request.has_perm('datasync.restart'):
         TailboneGridData.restartDatasyncFormSubmitting = false
@@ -50,6 +50,3 @@
 
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/datasync/configure.mako

@@ -83,8 +83,8 @@
   </b-notification>
 
   <b-field>
-    <b-checkbox name="use_profile_settings"
-                v-model="useProfileSettings"
+    <b-checkbox name="rattail.datasync.use_profile_settings"
+                v-model="simpleSettings['rattail.datasync.use_profile_settings']"
                 native-value="true"
                 @input="settingsNeedSaved = true">
       Use these Settings to configure watchers and consumers
@@ -99,7 +99,7 @@
     </div>
     <div class="level-right">
       <div class="level-item"
-           v-show="useProfileSettings">
+           v-show="simpleSettings['rattail.datasync.use_profile_settings']">
         <b-button type="is-primary"
                   @click="newProfile()"
                   icon-pack="fas"
@@ -162,7 +162,7 @@
       </${b}-table-column>
       <${b}-table-column label="Actions"
                       v-slot="props"
-                      v-if="useProfileSettings">
+                      v-if="simpleSettings['rattail.datasync.use_profile_settings']">
         <a href="#"
            class="grid-action"
            @click.prevent="editProfile(props.row)">
@@ -580,18 +580,27 @@
   <b-field label="Supervisor Process Name"
            message="This should be the complete name, including group - e.g. poser:poser_datasync"
            expanded>
-    <b-input name="supervisor_process_name"
-             v-model="supervisorProcessName"
+    <b-input name="rattail.datasync.supervisor_process_name"
+             v-model="simpleSettings['rattail.datasync.supervisor_process_name']"
              @input="settingsNeedSaved = true"
              expanded>
     </b-input>
   </b-field>
 
+  <b-field label="Consumer Batch Size"
+           message="Max number of changes to be consumed at once."
+           expanded>
+    <numeric-input name="rattail.datasync.batch_size_limit"
+                   v-model="simpleSettings['rattail.datasync.batch_size_limit']"
+                   @input="settingsNeedSaved = true" />
+  </b-field>
+
+  <h3 class="is-size-3">Legacy</h3>
   <b-field label="Restart Command"
            message="This will run as '${system_user}' system user - please configure sudoers as needed.  Typical command is like:  sudo supervisorctl restart poser:poser_datasync"
            expanded>
-    <b-input name="restart_command"
-             v-model="restartCommand"
+    <b-input name="tailbone.datasync.restart"
+             v-model="simpleSettings['tailbone.datasync.restart']"
              @input="settingsNeedSaved = true"
              expanded>
     </b-input>
@@ -599,14 +608,13 @@
 
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     ThisPageData.showConfigFilesNote = false
     ThisPageData.profilesData = ${json.dumps(profiles_data)|n}
     ThisPageData.showDisabledProfiles = false
-    ThisPageData.useProfileSettings = ${json.dumps(use_profile_settings)|n}
 
     ThisPageData.editProfileShowDialog = false
     ThisPageData.editingProfile = null
@@ -631,9 +639,6 @@
     ThisPageData.editingConsumerRunas = null
     ThisPageData.editingConsumerEnabled = true
 
-    ThisPageData.supervisorProcessName = ${json.dumps(supervisor_process_name)|n}
-    ThisPageData.restartCommand = ${json.dumps(restart_command)|n}
-
     ThisPage.computed.updateConsumerDisabled = function() {
         if (!this.editingConsumerKey) {
             return true
@@ -982,6 +987,3 @@
 
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/datasync/status.mako

@@ -115,8 +115,9 @@
     </${b}-table>
 </%def>
 
-<%def name="modify_this_page_vars()">
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     ThisPageData.processInfo = ${json.dumps(process_info)|n}
 
@@ -171,6 +172,3 @@
 
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/deform/checked_password.pt

@@ -1,6 +1,7 @@
 <div i18n:domain="deform" tal:omit-tag=""
       tal:define="oid oid|field.oid;
                   name name|field.name;
+                  vmodel vmodel|'field_model_' + name;
                   css_class css_class|field.widget.css_class;
                   style style|field.widget.style;">
 
@@ -8,7 +9,7 @@
     ${field.start_mapping()}
     <b-input type="password"
              name="${name}"
-             value="${field.widget.redisplay and cstruct or ''}"
+             v-model="${vmodel}"
              tal:attributes="class string: form-control ${css_class or ''};
                              style style;
                              attributes|field.widget.attributes|{};"
@@ -18,7 +19,6 @@
     </b-input>
     <b-input type="password"
              name="${name}-confirm"
-             value="${field.widget.redisplay and confirm or ''}"
              tal:attributes="class string: form-control ${css_class or ''};
                              style style;
                              confirm_attributes|field.widget.confirm_attributes|{};"

tailbone/templates/departments/view.mako

@@ -1,13 +1,9 @@
 ## -*- coding: utf-8; -*-
 <%inherit file="/master/view.mako" />
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
-
-    ${form.component_studly}Data.employeesData = ${json.dumps(employees_data)|n}
-
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
+    ${form.vue_component}Data.employeesData = ${json.dumps(employees_data)|n}
   </script>
 </%def>
-
-${parent.body()}

tailbone/templates/form.mako

@@ -90,15 +90,15 @@
 
 <%def name="before_object_helpers()"></%def>
 
-<%def name="render_this_page_template()">
+<%def name="render_vue_templates()">
+  ${parent.render_vue_templates()}
   % if form is not Undefined:
       ${self.render_form_template()}
   % endif
-  ${parent.render_this_page_template()}
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
   % if main_form_collapsible:
       <script>
         ThisPageData.mainFormPanelOpen = ${'false' if main_form_autocollapse else 'true'}
@@ -106,18 +106,9 @@
   % endif
 </%def>
 
-<%def name="finalize_this_page_vars()">
-  ${parent.finalize_this_page_vars()}
+<%def name="make_vue_components()">
+  ${parent.make_vue_components()}
   % if form is not Undefined:
-      <script type="text/javascript">
-
-        ${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>
-
-
-${parent.body()}

tailbone/templates/formposter.mako

@@ -39,7 +39,7 @@
 
             simplePOST(action, params, success, failure) {
 
-                let csrftoken = ${json.dumps(request.session.get_csrf_token() or request.session.new_csrf_token())|n}
+                let csrftoken = ${json.dumps(h.get_csrf_token(request))|n}
 
                 let headers = {
                     '${csrf_header_name}': csrftoken,

tailbone/templates/forms/deform.mako

@@ -59,7 +59,7 @@
                       native-type="submit"
                       :disabled="${form.vue_component}Submitting"
                       icon-pack="fas"
-                      icon-left="save">
+                      icon-left="${form.button_icon_submit}">
               {{ ${form.vue_component}Submitting ? "Working, please wait..." : "${form.button_label_submit}" }}
             </b-button>
         % else:
@@ -180,7 +180,7 @@
   let ${form.vue_component}Data = {
 
       ## TODO: should find a better way to handle CSRF token
-      csrftoken: ${json.dumps(request.session.get_csrf_token() or request.session.new_csrf_token())|n},
+      csrftoken: ${json.dumps(h.get_csrf_token(request))|n},
 
       % if can_edit_help:
           fieldLabels: ${json.dumps(field_labels)|n},

tailbone/templates/generate_feature.mako

@@ -276,9 +276,9 @@
 
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     ThisPageData.featureType = ${json.dumps(feature_type)|n}
     ThisPageData.resultGenerated = ${json.dumps(bool(result))|n}
@@ -385,6 +385,3 @@
 
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/grids/b-table.mako

@@ -53,11 +53,11 @@
       </${b}-table-column>
   % endfor
 
-  % if grid.main_actions or grid.more_actions:
+  % if grid.actions:
       <${b}-table-column field="actions"
                       label="Actions"
                       v-slot="props">
-        % for action in grid.main_actions:
+        % for action in grid.actions:
             <a :href="props.row._action_url_${action.key}"
                % if action.link_class:
                class="${action.link_class}"
@@ -68,12 +68,7 @@
                @click.prevent="${action.click_handler}"
                % endif
                >
-              % if request.use_oruga:
-                  <o-icon icon="${action.icon}" />
-              % else:
-                  <i class="fas fa-${action.icon}"></i>
-              % endif
-              ${action.label}
+              ${action.render_icon_and_label()}
             </a>
             &nbsp;
         % endfor

tailbone/templates/grids/complete.mako

@@ -10,8 +10,70 @@
       <div style="display: flex; flex-direction: column; justify-content: end;">
         <div class="filters">
           % if getattr(grid, 'filterable', False):
-              ## TODO: stop using |n filter
-              ${grid.render_filters(allow_save_defaults=allow_save_defaults)|n}
+              <form method="GET" @submit.prevent="applyFilters()">
+
+                <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+                  <grid-filter v-for="key in filtersSequence"
+                               :key="key"
+                               :filter="filters[key]"
+                               ref="gridFilters">
+                  </grid-filter>
+                </div>
+
+                <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
+
+                  <b-button type="is-primary"
+                            native-type="submit"
+                            icon-pack="fas"
+                            icon-left="check">
+                    Apply Filters
+                  </b-button>
+
+                  <b-button v-if="!addFilterShow"
+                            icon-pack="fas"
+                            icon-left="plus"
+                            @click="addFilterInit()">
+                    Add Filter
+                  </b-button>
+
+                  <b-autocomplete v-if="addFilterShow"
+                                  ref="addFilterAutocomplete"
+                                  :data="addFilterChoices"
+                                  v-model="addFilterTerm"
+                                  placeholder="Add Filter"
+                                  field="key"
+                                  :custom-formatter="formatAddFilterItem"
+                                  open-on-focus
+                                  keep-first
+                                  icon-pack="fas"
+                                  clearable
+                                  clear-on-select
+                                  @select="addFilterSelect">
+                  </b-autocomplete>
+
+                  <b-button @click="resetView()"
+                            icon-pack="fas"
+                            icon-left="home">
+                    Default View
+                  </b-button>
+
+                  <b-button @click="clearFilters()"
+                            icon-pack="fas"
+                            icon-left="trash">
+                    No Filters
+                  </b-button>
+
+                  % if allow_save_defaults and request.user:
+                      <b-button @click="saveDefaults()"
+                                icon-pack="fas"
+                                icon-left="save"
+                                :disabled="savingDefaults">
+                        {{ savingDefaults ? "Working, please wait..." : "Save Defaults" }}
+                      </b-button>
+                  % endif
+
+                </div>
+              </form>
           % endif
         </div>
       </div>
@@ -81,38 +143,49 @@
        % endif
        % endif
 
-       % if getattr(grid, 'sortable', False):
-           backend-sorting
-           @sort="onSort"
-           @sorting-priority-removed="sortingPriorityRemoved"
-
-           ## TODO: there is a bug (?) which prevents the arrow from
-           ## displaying for simple default single-column sort.  so to
-           ## work around that, we *disable* multi-sort until the
-           ## component is mounted.  seems to work for now..see also
-           ## https://github.com/buefy/buefy/issues/2584
-           :sort-multiple="allowMultiSort"
-
-           ## nb. specify default sort only if single-column
-           :default-sort="backendSorters.length == 1 ? [backendSorters[0].field, backendSorters[0].order] : null"
-
-           ## nb. otherwise there may be default multi-column sort
-           :sort-multiple-data="sortingPriority"
-
-           ## user must ctrl-click column header to do multi-sort
-           sort-multiple-key="ctrlKey"
+       ## sorting
+       % if grid.sortable:
+           ## nb. buefy/oruga only support *one* default sorter
+           :default-sort="sorters.length ? [sorters[0].field, sorters[0].order] : null"
+           % if grid.sort_on_backend:
+               backend-sorting
+               @sort="onSort"
+           % endif
+           % if grid.sort_multiple:
+               % if grid.sort_on_backend:
+                   ## TODO: there is a bug (?) which prevents the arrow
+                   ## from displaying for simple default single-column sort,
+                   ## when multi-column sort is allowed for the table.  for
+                   ## now we work around that by waiting until mount to
+                   ## enable the multi-column support.  see also
+                   ## https://github.com/buefy/buefy/issues/2584
+                   :sort-multiple="allowMultiSort"
+                   :sort-multiple-data="sortingPriority"
+                   @sorting-priority-removed="sortingPriorityRemoved"
+               % else:
+                   sort-multiple
+               % endif
+               ## nb. user must ctrl-click column header for multi-sort
+               sort-multiple-key="ctrlKey"
+           % endif
        % endif
 
        % if getattr(grid, 'click_handlers', None):
        @cellclick="cellClick"
        % endif
 
-       :paginated="paginated"
-       :per-page="perPage"
-       :current-page="currentPage"
-       backend-pagination
-       :total="total"
-       @page-change="onPageChange"
+       ## paging
+       % if grid.paginated:
+           paginated
+           pagination-size="${'small' if request.use_oruga else 'is-small'}"
+           :per-page="perPage"
+           :current-page="currentPage"
+           @page-change="onPageChange"
+           % if grid.paginate_on_backend:
+               backend-pagination
+               :total="pagerStats.item_count"
+           % endif
+       % endif
 
        ## TODO: should let grid (or master view) decide how to set these?
        icon-pack="fas"
@@ -125,10 +198,8 @@
           <${b}-table-column field="${column['field']}"
                           label="${column['label']}"
                           v-slot="props"
-                          :sortable="${json.dumps(column.get('sortable', False))}"
-                          % if hasattr(grid, 'is_searchable') and grid.is_searchable(column['field']):
-                          searchable
-                          % endif
+                          :sortable="${json.dumps(column.get('sortable', False))|n}"
+                          :searchable="${json.dumps(column.get('searchable', False))|n}"
                           cell-class="c_${column['field']}"
                           :visible="${json.dumps(column.get('visible', True))}">
             % if hasattr(grid, 'raw_renderers') and column['field'] in grid.raw_renderers:
@@ -163,13 +234,7 @@
                    target="${action.target}"
                    % endif
                    >
-                  % if request.use_oruga:
-                      <o-icon icon="${action.icon}" />
-                      <span>${action.render_label()|n}</span>
-                  % else:
-                      ${action.render_icon()|n}
-                      ${action.render_label()|n}
-                  % endif
+                  ${action.render_icon_and_label()}
                 </a>
                 &nbsp;
             % endfor
@@ -209,13 +274,14 @@
               <div></div>
           % endif
 
-          % if getattr(grid, 'pageable', False):
-              <div v-if="firstItem"
+          % if grid.paginated:
+              <div v-if="pagerStats.first_item"
                    style="display: flex; gap: 0.5rem; align-items: center;">
                 <span>
                   showing
-                  {{ firstItem.toLocaleString('en') }} - {{ lastItem.toLocaleString('en') }}
-                  of {{ total.toLocaleString('en') }} results;
+                  {{ renderNumber(pagerStats.first_item) }}
+                  - {{ renderNumber(pagerStats.last_item) }}
+                  of {{ renderNumber(pagerStats.item_count) }} results;
                 </span>
                 <b-select v-model="perPage"
                           size="is-small"
@@ -245,12 +311,16 @@
 
 <script type="text/javascript">
 
-  let ${grid.vue_component}CurrentData = ${json.dumps(grid.get_vue_data())|n}
+  const ${grid.vue_component}Context = ${json.dumps(grid.get_vue_context())|n}
+  let ${grid.vue_component}CurrentData = ${grid.vue_component}Context.data
 
   let ${grid.vue_component}Data = {
       loading: false,
       ajaxDataUrl: ${json.dumps(getattr(grid, 'ajax_data_url', request.path_url))|n},
 
+      ## nb. this tracks whether grid.fetchFirstData() happened
+      fetchedFirstData: false,
+
       savingDefaults: false,
 
       data: ${grid.vue_component}CurrentData,
@@ -261,33 +331,36 @@
       checkedRows: ${grid_data['checked_rows_code']|n},
       % endif
 
-      paginated: ${json.dumps(getattr(grid, 'pageable', False))|n},
-      total: ${len(grid_data['data']) if static_data else (grid_data['total_items'] if grid_data is not Undefined else 0)},
-      perPage: ${json.dumps(grid.pagesize if getattr(grid, 'pageable', False) else None)|n},
-      currentPage: ${json.dumps(grid.page if getattr(grid, 'pageable', False) else None)|n},
-      firstItem: ${json.dumps(grid_data['first_item'] if getattr(grid, 'pageable', False) else None)|n},
-      lastItem: ${json.dumps(grid_data['last_item'] if getattr(grid, 'pageable', False) else None)|n},
-
-      % if getattr(grid, 'sortable', False):
-
-          ## TODO: there is a bug (?) which prevents the arrow from
-          ## displaying for simple default single-column sort.  so to
-          ## work around that, we *disable* multi-sort until the
-          ## component is mounted.  seems to work for now..see also
-          ## https://github.com/buefy/buefy/issues/2584
-          allowMultiSort: false,
-
-          ## nb. this contains all truly active sorters
-          backendSorters: ${json.dumps(grid.active_sorters)|n},
-
-          ## nb. whereas this will only contain multi-column sorters,
-          ## but will be *empty* for single-column sorting
-          % if len(grid.active_sorters) > 1:
-              sortingPriority: ${json.dumps(grid.active_sorters)|n},
-          % else:
-              sortingPriority: [],
+      ## paging
+      % if grid.paginated:
+          pageSizeOptions: ${json.dumps(grid.pagesize_options)|n},
+          perPage: ${json.dumps(grid.pagesize)|n},
+          currentPage: ${json.dumps(grid.page)|n},
+          % if grid.paginate_on_backend:
+              pagerStats: ${json.dumps(grid.get_vue_pager_stats())|n},
           % endif
+      % endif
 
+      ## sorting
+      % if grid.sortable:
+          sorters: ${json.dumps(grid.get_vue_active_sorters())|n},
+          % if grid.sort_multiple:
+              % if grid.sort_on_backend:
+                  ## TODO: there is a bug (?) which prevents the arrow
+                  ## from displaying for simple default single-column sort,
+                  ## when multi-column sort is allowed for the table.  for
+                  ## now we work around that by waiting until mount to
+                  ## enable the multi-column support.  see also
+                  ## https://github.com/buefy/buefy/issues/2584
+                  allowMultiSort: false,
+                  ## nb. this should be empty when current sort is single-column
+                  % if len(grid.active_sorters) > 1:
+                      sortingPriority: ${json.dumps(grid.get_vue_active_sorters())|n},
+                  % else:
+                      sortingPriority: [],
+                  % endif
+              % endif
+          % endif
       % endif
 
       ## filterable: ${json.dumps(grid.filterable)|n},
@@ -313,6 +386,32 @@
 
       computed: {
 
+          ## TODO: this should be temporary? but anyway 'total' is
+          ## still referenced in other places, e.g. "delete results"
+          % if grid.paginated:
+              total() { return this.pagerStats.item_count },
+          % endif
+
+          % if not grid.paginate_on_backend:
+
+              pagerStats() {
+                  const data = this.visibleData
+                  let last = this.currentPage * this.perPage
+                  let first = last - this.perPage + 1
+                  if (last > data.length) {
+                      last = data.length
+                  }
+                  return {
+                      'item_count': data.length,
+                      'items_per_page': this.perPage,
+                      'page': this.currentPage,
+                      'first_item': first,
+                      'last_item': last,
+                  }
+              },
+
+          % endif
+
           addFilterChoices() {
               // nb. this returns all choices available for "Add Filter" operation
 
@@ -364,17 +463,28 @@
           },
       },
 
-      mounted() {
-          ## TODO: there is a bug (?) which prevents the arrow from
-          ## displaying for simple default single-column sort.  so to
-          ## work around that, we *disable* multi-sort until the
-          ## component is mounted.  seems to work for now..see also
-          ## https://github.com/buefy/buefy/issues/2584
-          this.allowMultiSort = true
-      },
+      % if grid.sortable and grid.sort_multiple and grid.sort_on_backend:
+
+            ## TODO: there is a bug (?) which prevents the arrow
+            ## from displaying for simple default single-column sort,
+            ## when multi-column sort is allowed for the table.  for
+            ## now we work around that by waiting until mount to
+            ## enable the multi-column support.  see also
+            ## https://github.com/buefy/buefy/issues/2584
+            mounted() {
+                this.allowMultiSort = true
+            },
+
+      % endif
 
       methods: {
 
+          renderNumber(value) {
+              if (value != undefined) {
+                  return value.toLocaleString('en')
+              }
+          },
+
           formatAddFilterItem(filtr) {
               if (!filtr.key) {
                   filtr = this.filters[filtr]
@@ -438,17 +548,18 @@
           },
 
           getBasicParams() {
-              let params = {}
-              % if getattr(grid, 'sortable', False):
-                  for (let i = 1; i <= this.backendSorters.length; i++) {
-                      params['sort'+i+'key'] = this.backendSorters[i-1].field
-                      params['sort'+i+'dir'] = this.backendSorters[i-1].order
+              const params = {
+                  % if grid.paginated and grid.paginate_on_backend:
+                      pagesize: this.perPage,
+                      page: this.currentPage,
+                  % endif
+              }
+              % if grid.sortable and grid.sort_on_backend:
+                  for (let i = 1; i <= this.sorters.length; i++) {
+                      params['sort'+i+'key'] = this.sorters[i-1].field
+                      params['sort'+i+'dir'] = this.sorters[i-1].order
                   }
               % endif
-              % if getattr(grid, 'pageable', False):
-                  params.pagesize = this.perPage
-                  params.page = this.currentPage
-              % endif
               return params
           },
 
@@ -472,6 +583,17 @@
                       ...this.getFilterParams()}
           },
 
+          ## nb. this is meant to call for a grid which is hidden at
+          ## first, when it is first being shown to the user.  and if
+          ## it was initialized with empty data set.
+          async fetchFirstData() {
+              if (this.fetchedFirstData) {
+                  return
+              }
+              await this.loadAsyncData()
+              this.fetchedFirstData = true
+          },
+
           ## TODO: i noticed buefy docs show using `async` keyword here,
           ## so now i am too.  knowing nothing at all of if/how this is
           ## supposed to improve anything.  we shall see i guess
@@ -488,23 +610,23 @@
               params = params.toString()
 
               this.loading = true
-              this.$http.get(`${'$'}{this.ajaxDataUrl}?${'$'}{params}`).then(({ data }) => {
-                  if (!data.error) {
-                      ${grid.vue_component}CurrentData = data.data
+              this.$http.get(`${'$'}{this.ajaxDataUrl}?${'$'}{params}`).then(response => {
+                  if (!response.data.error) {
+                      ${grid.vue_component}CurrentData = response.data.data
                       this.data = ${grid.vue_component}CurrentData
-                      this.rowStatusMap = data.row_status_map
-                      this.total = data.total_items
-                      this.firstItem = data.first_item
-                      this.lastItem = data.last_item
+                      % if grid.paginated and grid.paginate_on_backend:
+                          this.pagerStats = response.data.pager_stats
+                      % endif
+                      this.rowStatusMap = response.data.row_status_map || {}
                       this.loading = false
                       this.savingDefaults = false
-                      this.checkedRows = this.locateCheckedRows(data.checked_rows)
+                      this.checkedRows = this.locateCheckedRows(response.data.checked_rows || [])
                       if (success) {
                           success()
                       }
                   } else {
                       this.$buefy.toast.open({
-                          message: data.error,
+                          message: response.data.error,
                           type: 'is-danger',
                           duration: 2000, // 4 seconds
                       })
@@ -516,8 +638,11 @@
                   }
               })
               .catch((error) => {
+                  ${grid.vue_component}CurrentData = []
                   this.data = []
-                  this.total = 0
+                  % if grid.paginated and grid.paginate_on_backend:
+                      this.pagerStats = {}
+                  % endif
                   this.loading = false
                   this.savingDefaults = false
                   if (failure) {
@@ -556,55 +681,72 @@
               })
           },
 
-          onSort(field, order, event) {
+          % if grid.sortable and grid.sort_on_backend:
 
-              // nb. buefy passes field name, oruga passes object
-              if (field.field) {
-                  field = field.field
-              }
+              onSort(field, order, event) {
 
-              if (event.ctrlKey) {
+                  ## nb. buefy passes field name; oruga passes field object
+                  % if request.use_oruga:
+                      field = field.field
+                  % endif
 
-                  // engage or enhance multi-column sorting
-                  let sorter = this.backendSorters.filter(i => i.field === field)[0]
-                  if (sorter) {
-                      sorter.order = sorter.order === 'desc' ? 'asc' : 'desc'
-                  } else {
-                      this.backendSorters.push({field, order})
-                  }
-                  this.sortingPriority = this.backendSorters
+                  % if grid.sort_multiple:
 
-              } else {
+                      // did user ctrl-click the column header?
+                      if (event.ctrlKey) {
+
+                          // toggle direction for existing, or add new sorter
+                          const sorter = this.sorters.filter(s => s.field === field)[0]
+                          if (sorter) {
+                              sorter.order = sorter.order === 'desc' ? 'asc' : 'desc'
+                          } else {
+                              this.sorters.push({field, order})
+                          }
+
+                          // apply multi-column sorting
+                          this.sortingPriority = this.sorters
+
+                      } else {
+
+                  % endif
 
                   // sort by single column only
-                  this.backendSorters = [{field, order}]
-                  this.sortingPriority = []
-              }
+                  this.sorters = [{field, order}]
 
-              // always reset to first page when changing sort options
-              // TODO: i mean..right? would we ever not want that?
-              this.currentPage = 1
-              this.loadAsyncData()
-          },
+                  % if grid.sort_multiple:
+                          // multi-column sort not engaged
+                          this.sortingPriority = []
+                      }
+                  % endif
 
-          sortingPriorityRemoved(field) {
+                  // nb. always reset to first page when sorting changes
+                  this.currentPage = 1
+                  this.loadAsyncData()
+              },
 
-              // prune field from active sorters
-              this.backendSorters = this.backendSorters.filter(
-                  (sorter) => sorter.field !== field)
+              % if grid.sort_multiple:
 
-              // nb. must keep active sorter list "as-is" even if
-              // there is only one sorter; buefy seems to expect it
-              this.sortingPriority = this.backendSorters
+                  sortingPriorityRemoved(field) {
 
-              this.loadAsyncData()
-          },
+                      // prune from active sorters
+                      this.sorters = this.sorters.filter(s => s.field !== field)
+
+                      // nb. even though we might have just one sorter
+                      // now, we are still technically in multi-sort mode
+                      this.sortingPriority = this.sorters
+
+                      this.loadAsyncData()
+                  },
+
+              % endif
+
+          % endif
 
           resetView() {
               this.loading = true
 
               // use current url proper, plus reset param
-              let url = '?reset-to-default-filters=true'
+              let url = '?reset-view=true'
 
               // add current hash, to preserve that in redirect
               if (location.hash) {

tailbone/templates/grids/filters.mako

@@ -1,67 +0,0 @@
-## -*- coding: utf-8; -*-
-
-<form action="${form.action_url}" method="GET" @submit.prevent="applyFilters()">
-
-  <div style="display: flex; flex-direction: column; gap: 0.5rem;">
-    <grid-filter v-for="key in filtersSequence"
-                 :key="key"
-                 :filter="filters[key]"
-                 ref="gridFilters">
-    </grid-filter>
-  </div>
-
-  <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
-
-    <b-button type="is-primary"
-              native-type="submit"
-              icon-pack="fas"
-              icon-left="check">
-      Apply Filters
-    </b-button>
-
-    <b-button v-if="!addFilterShow"
-              icon-pack="fas"
-              icon-left="plus"
-              @click="addFilterInit()">
-      Add Filter
-    </b-button>
-
-    <b-autocomplete v-if="addFilterShow"
-                    ref="addFilterAutocomplete"
-                    :data="addFilterChoices"
-                    v-model="addFilterTerm"
-                    placeholder="Add Filter"
-                    field="key"
-                    :custom-formatter="formatAddFilterItem"
-                    open-on-focus
-                    keep-first
-                    icon-pack="fas"
-                    clearable
-                    clear-on-select
-                    @select="addFilterSelect">
-    </b-autocomplete>
-
-    <b-button @click="resetView()"
-              icon-pack="fas"
-              icon-left="home">
-      Default View
-    </b-button>
-
-    <b-button @click="clearFilters()"
-              icon-pack="fas"
-              icon-left="trash">
-      No Filters
-    </b-button>
-
-    % if allow_save_defaults and request.user:
-        <b-button @click="saveDefaults()"
-                  icon-pack="fas"
-                  icon-left="save"
-                  :disabled="savingDefaults">
-          {{ savingDefaults ? "Working, please wait..." : "Save Defaults" }}
-        </b-button>
-    % endif
-
-  </div>
-
-</form>

tailbone/templates/home.mako

@@ -1,33 +1,7 @@
 ## -*- coding: utf-8; -*-
-<%inherit file="/page.mako" />
-<%namespace name="base_meta" file="/base_meta.mako" />
-
-<%def name="title()">Home</%def>
-
-<%def name="extra_styles()">
-  ${parent.extra_styles()}
-  <style type="text/css">
-    .logo {
-        text-align: center;
-    }
-    .logo img {
-        margin: 3em auto;
-        max-height: 350px;
-        max-width: 800px;
-    }
-  </style>
-</%def>
+<%inherit file="wuttaweb:templates/home.mako" />
 
+## DEPRECATED; remains for back-compat
 <%def name="render_this_page()">
   ${self.page_content()}
 </%def>
-
-<%def name="page_content()">
-  <div class="logo">
-    ${h.image(image_url, "{} logo".format(capture(base_meta.app_title)))}
-    <h1>Welcome to ${base_meta.app_title()}</h1>
-  </div>
-</%def>
-
-
-${parent.body()}

tailbone/templates/importing/configure.mako

@@ -144,9 +144,9 @@
   </b-modal>
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     ThisPageData.handlersData = ${json.dumps(handlers_data)|n}
 
@@ -203,6 +203,3 @@
 
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/importing/runjob.mako

@@ -63,28 +63,26 @@
   </div>
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
-    ${form.component_studly}Data.submittingRun = false
-    ${form.component_studly}Data.submittingExplain = false
-    ${form.component_studly}Data.runJob = false
+    ${form.vue_component}Data.submittingRun = false
+    ${form.vue_component}Data.submittingExplain = false
+    ${form.vue_component}Data.runJob = false
 
-    ${form.component_studly}.methods.submitRun = function() {
+    ${form.vue_component}.methods.submitRun = function() {
         this.submittingRun = true
         this.runJob = true
         this.$nextTick(() => {
-            this.$refs.${form.component_studly}.submit()
+            this.$refs.${form.vue_component}.submit()
         })
     }
 
-    ${form.component_studly}.methods.submitExplain = function() {
+    ${form.vue_component}.methods.submitExplain = function() {
         this.submittingExplain = true
-        this.$refs.${form.component_studly}.submit()
+        this.$refs.${form.vue_component}.submit()
     }
 
   </script>
 </%def>
-
-${parent.body()}

tailbone/templates/login.mako

@@ -1,86 +1,17 @@
 ## -*- coding: utf-8; -*-
-<%inherit file="/form.mako" />
-<%namespace name="base_meta" file="/base_meta.mako" />
-
-<%def name="title()">Login</%def>
+<%inherit file="wuttaweb:templates/auth/login.mako" />
 
+## TODO: this will not be needed with wuttaform
 <%def name="extra_styles()">
   ${parent.extra_styles()}
-  <style type="text/css">
-    .logo img {
-        display: block;
-        margin: 3rem auto;
-        max-height: 350px;
-        max-width: 800px;
-    }
-
-    /* must force a particular label with, in order to make sure */
-    /* the username and password inputs are the same size */
-    .field.is-horizontal .field-label .label {
-        text-align: left;
-        width: 6rem;
-    }
-
-    .buttons {
+  <style>
+    .card-content .buttons {
         justify-content: right;
     }
   </style>
 </%def>
 
-<%def name="logo()">
-  ${h.image(image_url, "{} logo".format(capture(base_meta.app_title)))}
-</%def>
-
-<%def name="login_form()">
-  <div class="form">
-    ${form.render_deform(form_kwargs={'data-ajax': 'false'})|n}
-  </div>
-</%def>
-
+## DEPRECATED; remains for back-compat
 <%def name="render_this_page()">
   ${self.page_content()}
 </%def>
-
-<%def name="page_content()">
-  <div class="logo">
-    ${self.logo()}
-  </div>
-
-  <div class="columns is-centered">
-    <div class="column is-narrow">
-      <div class="card">
-        <div class="card-content">
-          <tailbone-form></tailbone-form>
-        </div>
-      </div>
-    </div>
-  </div>
-</%def>
-
-<%def name="modify_this_page_vars()">
-  <script type="text/javascript">
-
-    ${form.component_studly}Data.usernameInput = null
-
-    ${form.component_studly}.mounted = function() {
-        this.$refs.username.focus()
-        this.usernameInput = this.$refs.username.$el.querySelector('input')
-        this.usernameInput.addEventListener('keydown', this.usernameKeydown)
-    }
-
-    ${form.component_studly}.beforeDestroy = function() {
-        this.usernameInput.removeEventListener('keydown', this.usernameKeydown)
-    }
-
-    ${form.component_studly}.methods.usernameKeydown = function(event) {
-        if (event.which == 13) {
-            event.preventDefault()
-            this.$refs.password.focus()
-        }
-    }
-
-  </script>
-</%def>
-
-
-${parent.body()}

tailbone/templates/luigi/configure.mako

@@ -297,9 +297,9 @@
 
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     ThisPageData.overnightTasks = ${json.dumps(overnight_tasks)|n}
     ThisPageData.overnightTaskShowDialog = false
@@ -425,6 +425,3 @@
 
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/luigi/index.mako

@@ -255,9 +255,9 @@
   </div>
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     % if master.has_perm('restart_scheduler'):
 
@@ -374,6 +374,3 @@
 
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/master/clone.mako

@@ -34,9 +34,9 @@
   ${h.end_form()}
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     TailboneFormData.formSubmitting = false
     TailboneFormData.submitButtonText = "Yes, please clone away"
@@ -48,6 +48,3 @@
 
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/master/delete.mako

@@ -33,8 +33,8 @@
   ${h.end_form()}
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
   <script>
 
     ${form.vue_component}Data.formSubmitting = false
@@ -45,6 +45,3 @@
 
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/master/form.mako

@@ -1,14 +1,14 @@
 ## -*- coding: utf-8; -*-
 <%inherit file="/form.mako" />
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     ## declare extra data needed by form
     % if form is not Undefined and getattr(form, 'json_data', None):
         % for key, value in form.json_data.items():
-            ${form.component_studly}Data.${key} = ${json.dumps(value)|n}
+            ${form.vue_component}Data.${key} = ${json.dumps(value)|n}
         % endfor
     % endif
 
@@ -28,6 +28,3 @@
   % endif
 
 </%def>
-
-
-${parent.body()}

tailbone/templates/master/index.mako

@@ -265,6 +265,11 @@
 
 </%def>
 
+## DEPRECATED; remains for back-compat
+<%def name="render_this_page()">
+  ${self.page_content()}
+</%def>
+
 <%def name="page_content()">
 
   % if download_results_path:
@@ -290,34 +295,28 @@
   % endif
 </%def>
 
-<%def name="make_grid_component()">
-  ${grid.render_vue_template(tools=capture(self.grid_tools).strip(), context_menu=capture(self.context_menu_items).strip())}
-</%def>
-
 <%def name="render_grid_component()">
   ${grid.render_vue_tag()}
 </%def>
 
-<%def name="make_this_page_component()">
+##############################
+## vue components
+##############################
 
-  ## define grid
+<%def name="render_vue_templates()">
+  ${parent.render_vue_templates()}
+
+  ## DEPRECATED; called for back-compat
   ${self.make_grid_component()}
-
-  ${parent.make_this_page_component()}
-
-  ## finalize grid
-  <script>
-    ${grid.vue_component}.data = function() { return ${grid.vue_component}Data }
-    Vue.component('${grid.vue_tagname}', ${grid.vue_component})
-  </script>
 </%def>
 
-<%def name="render_this_page()">
-  ${self.page_content()}
+## DEPRECATED; remains for back-compat
+<%def name="make_grid_component()">
+  ${grid.render_vue_template(tools=capture(self.grid_tools).strip(), context_menu=capture(self.context_menu_items).strip())}
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
   <script type="text/javascript">
 
     % if getattr(master, 'supports_grid_totals', False):
@@ -624,5 +623,10 @@
   </script>
 </%def>
 
-
-${parent.body()}
+<%def name="make_vue_components()">
+  ${parent.make_vue_components()}
+  <script>
+    ${grid.vue_component}.data = function() { return ${grid.vue_component}Data }
+    Vue.component('${grid.vue_tagname}', ${grid.vue_component})
+  </script>
+</%def>

tailbone/templates/master/merge.mako

@@ -109,8 +109,8 @@
   <merge-buttons></merge-buttons>
 </%def>
 
-<%def name="render_this_page_template()">
-  ${parent.render_this_page_template()}
+<%def name="render_vue_templates()">
+  ${parent.render_vue_templates()}
 
   <script type="text/x-template" id="merge-buttons-template">
     <div class="level" style="margin-top: 2em;">
@@ -147,11 +147,7 @@
       </div>
     </div>
   </script>
-</%def>
-
-<%def name="make_this_page_component()">
-  ${parent.make_this_page_component()}
-  <script type="text/javascript">
+  <script>
 
     const MergeButtons = {
         template: '#merge-buttons-template',
@@ -175,12 +171,13 @@
         }
     }
 
-    Vue.component('merge-buttons', MergeButtons)
-
-    <% request.register_component('merge-buttons', 'MergeButtons') %>
-
   </script>
 </%def>
 
-
-${parent.body()}
+<%def name="make_vue_components()">
+  ${parent.make_vue_components()}
+  <script>
+    Vue.component('merge-buttons', MergeButtons)
+    <% request.register_component('merge-buttons', 'MergeButtons') %>
+  </script>
+</%def>

tailbone/templates/master/versions.mako

@@ -16,27 +16,16 @@
   ${self.page_content()}
 </%def>
 
-<%def name="make_this_page_component()">
-  ${parent.make_this_page_component()}
-  <script type="text/javascript">
-
-    TailboneGrid.data = function() { return TailboneGridData }
-
-    Vue.component('tailbone-grid', TailboneGrid)
-
-  </script>
-</%def>
-
-<%def name="render_this_page_template()">
-  ${parent.render_this_page_template()}
-
-  ## TODO: stop using |n filter
-  ${grid.render_complete()|n}
-</%def>
-
 <%def name="page_content()">
-  <tailbone-grid :csrftoken="csrftoken">
-  </tailbone-grid>
+  ${grid.render_vue_tag(**{':csrftoken': 'csrftoken'})}
 </%def>
 
-${parent.body()}
+<%def name="render_vue_templates()">
+  ${parent.render_vue_templates()}
+  ${grid.render_vue_template()}
+</%def>
+
+<%def name="make_vue_components()">
+  ${parent.make_vue_components()}
+  ${grid.render_vue_finalize()}
+</%def>

tailbone/templates/master/view.mako

@@ -120,9 +120,7 @@
           </p>
         </div>
 
-        <versions-grid ref="versionsGrid"
-                       @view-revision="viewRevision">
-        </versions-grid>
+        ${versions_grid.render_vue_tag(ref='versionsGrid', **{'@view-revision': 'viewRevision'})}
 
         <${b}-modal :width="1200"
                     % if request.use_oruga:
@@ -198,6 +196,7 @@
 
                   <p class="block has-text-weight-bold">
                     {{ version.model_title }}
+                    ({{ version.operation }})
                   </p>
 
                   <table class="diff monospace is-size-7"
@@ -237,25 +236,37 @@
 </%def>
 
 <%def name="render_row_grid_component()">
-  <tailbone-grid ref="rowGrid" id="rowGrid"></tailbone-grid>
+  ${rows_grid.render_vue_tag(id='rowGrid', ref='rowGrid')}
 </%def>
 
-<%def name="render_this_page_template()">
+<%def name="render_vue_templates()">
+  ${parent.render_vue_templates()}
   % if getattr(master, 'has_rows', False):
-      ## TODO: stop using |n filter
-      ${rows_grid.render_complete(allow_save_defaults=False, tools=capture(self.render_row_grid_tools))|n}
+      ${rows_grid.render_vue_template(allow_save_defaults=False, tools=capture(self.render_row_grid_tools))}
   % endif
-  ${parent.render_this_page_template()}
   % if expose_versions:
-      ${versions_grid.render_complete()|n}
+      ${versions_grid.render_vue_template()}
   % endif
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  % if expose_versions:
-      <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
+    % if getattr(master, 'touchable', False) and master.has_perm('touch'):
+
+        WholePageData.touchSubmitting = false
+
+        WholePage.methods.touchRecord = function() {
+            this.touchSubmitting = true
+            location.href = '${master.get_action_url('touch', instance)}'
+        }
+
+    % endif
+
+    % if expose_versions:
+
+        WholePageData.viewingHistory = false
         ThisPage.props.viewingHistory = Boolean
 
         ThisPageData.gettingRevisions = false
@@ -310,48 +321,16 @@
             this.viewVersionShowAllFields = !this.viewVersionShowAllFields
         }
 
-      </script>
+    % endif
+  </script>
+</%def>
+
+<%def name="make_vue_components()">
+  ${parent.make_vue_components()}
+  % if getattr(master, 'has_rows', False):
+      ${rows_grid.render_vue_finalize()}
+  % endif
+  % if expose_versions:
+      ${versions_grid.render_vue_finalize()}
   % endif
 </%def>
-
-<%def name="modify_whole_page_vars()">
-  ${parent.modify_whole_page_vars()}
-  <script type="text/javascript">
-
-    % if getattr(master, 'touchable', False) and master.has_perm('touch'):
-
-        WholePageData.touchSubmitting = false
-
-        WholePage.methods.touchRecord = function() {
-            this.touchSubmitting = true
-            location.href = '${master.get_action_url('touch', instance)}'
-        }
-
-    % endif
-
-    % if expose_versions:
-        WholePageData.viewingHistory = false
-    % endif
-
-  </script>
-</%def>
-
-<%def name="finalize_this_page_vars()">
-  ${parent.finalize_this_page_vars()}
-  <script type="text/javascript">
-
-    % if getattr(master, 'has_rows', False):
-        TailboneGrid.data = function() { return TailboneGridData }
-        Vue.component('tailbone-grid', TailboneGrid)
-    % endif
-
-    % if expose_versions:
-        VersionsGrid.data = function() { return VersionsGridData }
-        Vue.component('versions-grid', VersionsGrid)
-    % endif
-
-  </script>
-</%def>
-
-
-${parent.body()}

tailbone/templates/members/configure.mako

@@ -52,9 +52,9 @@
   </div>
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     ThisPage.methods.getLabelForKey = function(key) {
         switch (key) {
@@ -75,6 +75,3 @@
 
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/messages/create.mako

@@ -32,14 +32,14 @@
   % endif
 </%def>
 
-<%def name="render_this_page_template()">
-  ${parent.render_this_page_template()}
+<%def name="render_vue_templates()">
+  ${parent.render_vue_templates()}
   ${message_recipients_template()}
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     TailboneFormData.possibleRecipients = new Map(${json.dumps(available_recipients)|n})
     TailboneFormData.recipientDisplayMap = ${json.dumps(recipient_display_map)|n}
@@ -59,6 +59,3 @@
 
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/messages/index.mako

@@ -22,15 +22,15 @@
   % endif
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
   % if request.matched_route.name in ('messages.inbox', 'messages.archive'):
-      <script type="text/javascript">
+      <script>
 
-        TailboneGridData.moveMessagesSubmitting = false
-        TailboneGridData.moveMessagesText = null
+        ${grid.vue_component}Data.moveMessagesSubmitting = false
+        ${grid.vue_component}Data.moveMessagesText = null
 
-        TailboneGrid.computed.moveMessagesTextCurrent = function() {
+        ${grid.vue_component}.computed.moveMessagesTextCurrent = function() {
             if (this.moveMessagesText) {
                 return this.moveMessagesText
             }
@@ -38,7 +38,7 @@
             return "Move " + count.toString() + " selected to ${'Archive' if request.matched_route.name == 'messages.inbox' else 'Inbox'}"
         }
 
-        TailboneGrid.methods.moveMessagesSubmit = function() {
+        ${grid.vue_component}.methods.moveMessagesSubmit = function() {
             this.moveMessagesSubmitting = true
             this.moveMessagesText = "Working, please wait..."
         }
@@ -46,6 +46,3 @@
       </script>
   % endif
 </%def>
-
-
-${parent.body()}

tailbone/templates/messages/view.mako

@@ -82,22 +82,19 @@
   </div>
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
-    TailboneFormData.showingAllRecipients = false
+    ${form.vue_component}Data.showingAllRecipients = false
 
-    TailboneForm.methods.showMoreRecipients = function() {
+    ${form.vue_component}.methods.showMoreRecipients = function() {
         this.showingAllRecipients = true
     }
 
-    TailboneForm.methods.hideMoreRecipients = function() {
+    ${form.vue_component}.methods.hideMoreRecipients = function() {
         this.showingAllRecipients = false
     }
 
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/ordering/configure.mako

@@ -0,0 +1,74 @@
+## -*- coding: utf-8; -*-
+<%inherit file="/configure.mako" />
+
+<%def name="form_content()">
+
+  <h3 class="block is-size-3">Workflows</h3>
+  <div class="block" style="padding-left: 2rem;">
+
+    <p class="block">
+      Users can only choose from the workflows enabled below.
+    </p>
+
+    <b-field>
+      <b-checkbox name="rattail.batch.purchase.allow_ordering_from_scratch"
+                  v-model="simpleSettings['rattail.batch.purchase.allow_ordering_from_scratch']"
+                  native-value="true"
+                  @input="settingsNeedSaved = true">
+        From Scratch
+      </b-checkbox>
+    </b-field>
+
+    <b-field>
+      <b-checkbox name="rattail.batch.purchase.allow_ordering_from_file"
+                  v-model="simpleSettings['rattail.batch.purchase.allow_ordering_from_file']"
+                  native-value="true"
+                  @input="settingsNeedSaved = true">
+        From Order File
+      </b-checkbox>
+    </b-field>
+
+  </div>
+
+  <h3 class="block is-size-3">Vendors</h3>
+  <div class="block" style="padding-left: 2rem;">
+
+    <b-field message="If not set, user must choose a &quot;supported&quot; vendor.">
+      <b-checkbox name="rattail.batch.purchase.allow_ordering_any_vendor"
+                  v-model="simpleSettings['rattail.batch.purchase.allow_ordering_any_vendor']"
+                  native-value="true"
+                  @input="settingsNeedSaved = true">
+        Allow ordering for <span class="has-text-weight-bold">any</span> vendor
+      </b-checkbox>
+    </b-field>
+
+  </div>
+
+  <h3 class="block is-size-3">Order Parsers</h3>
+  <div class="block" style="padding-left: 2rem;">
+
+    <p class="block">
+      Only the selected file parsers will be exposed to users.
+    </p>
+
+    % for Parser in order_parsers:
+        <b-field message="${Parser.key}">
+          <b-checkbox name="order_parser_${Parser.key}"
+                      v-model="orderParsers['${Parser.key}']"
+                      native-value="true"
+                      @input="settingsNeedSaved = true">
+            ${Parser.title}
+          </b-checkbox>
+        </b-field>
+    % endfor
+
+  </div>
+
+</%def>
+
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
+    ThisPageData.orderParsers = ${json.dumps(order_parsers_data)|n}
+  </script>
+</%def>

tailbone/templates/ordering/view.mako

@@ -21,8 +21,8 @@
   % endif
 </%def>
 
-<%def name="render_this_page_template()">
-  ${parent.render_this_page_template()}
+<%def name="render_vue_templates()">
+  ${parent.render_vue_templates()}
   % if not batch.executed and not batch.complete and master.has_perm('edit_row'):
       <script type="text/x-template" id="ordering-scanner-template">
         <div>
@@ -185,10 +185,10 @@
   % endif
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
   % if not batch.executed and not batch.complete and master.has_perm('edit_row'):
-      <script type="text/javascript">
+      <script>
 
         let OrderingScanner = {
             template: '#ordering-scanner-template',
@@ -204,7 +204,7 @@
                     saving: false,
 
                     ## TODO: should find a better way to handle CSRF token
-                    csrftoken: ${json.dumps(request.session.get_csrf_token() or request.session.new_csrf_token())|n},
+                    csrftoken: ${json.dumps(h.get_csrf_token(request))|n},
                 }
             },
             computed: {
@@ -408,16 +408,11 @@
   % endif
 </%def>
 
-<%def name="make_this_page_component()">
-  ${parent.make_this_page_component()}
+<%def name="make_vue_components()">
+  ${parent.make_vue_components()}
   % if not batch.executed and not batch.complete and master.has_perm('edit_row'):
-      <script type="text/javascript">
-
+      <script>
         Vue.component('ordering-scanner', OrderingScanner)
-
       </script>
   % endif
 </%def>
-
-
-${parent.body()}

tailbone/templates/ordering/worksheet.mako

@@ -199,9 +199,8 @@
   <ordering-worksheet></ordering-worksheet>
 </%def>
 
-<%def name="render_this_page_template()">
-  ${parent.render_this_page_template()}
-
+<%def name="render_vue_templates()">
+  ${parent.render_vue_templates()}
   <script type="text/x-template" id="ordering-worksheet-template">
     <div>
       <div class="form-wrapper">
@@ -239,11 +238,7 @@
       ${self.order_form_grid()}
     </div>
   </script>
-</%def>
-
-<%def name="make_this_page_component()">
-  ${parent.make_this_page_component()}
-  <script type="text/javascript">
+  <script>
 
     const OrderingWorksheet = {
         template: '#ordering-worksheet-template',
@@ -255,7 +250,7 @@
                 submitting: false,
 
                 ## TODO: should find a better way to handle CSRF token
-                csrftoken: ${json.dumps(request.session.get_csrf_token() or request.session.new_csrf_token())|n},
+                csrftoken: ${json.dumps(h.get_csrf_token(request))|n},
             }
         },
         methods: {
@@ -298,14 +293,12 @@
         },
     }
 
-    Vue.component('ordering-worksheet', OrderingWorksheet)
-
   </script>
 </%def>
 
-
-##############################
-## page body
-##############################
-
-${parent.body()}
+<%def name="make_vue_components()">
+  ${parent.make_vue_components()}
+  <script>
+    Vue.component('ordering-worksheet', OrderingWorksheet)
+  </script>
+</%def>

tailbone/templates/page.mako

@@ -1,42 +1,26 @@
 ## -*- coding: utf-8; -*-
 <%inherit file="/base.mako" />
 
-<%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 name="render_vue_templates()">
+  ${parent.render_vue_templates()}
+  ${self.render_vue_template_this_page()}
 </%def>
 
-<%def name="page_content()"></%def>
-
-<%def name="render_this_page()">
-  <div style="display: flex;">
-
-    <div class="this-page-content" style="flex-grow: 1;">
-      ${self.page_content()}
-    </div>
-
-    <ul id="context-menu">
-      ${self.context_menu_items()}
-    </ul>
-
-  </div>
+<%def name="render_vue_template_this_page()">
+  ## DEPRECATED; called for back-compat
+  ${self.render_this_page_template()}
 </%def>
 
 <%def name="render_this_page_template()">
   <script type="text/x-template" id="this-page-template">
     <div>
+      ## DEPRECATED; called for back-compat
       ${self.render_this_page()}
     </div>
   </script>
-</%def>
+  <script>
 
-<%def name="declare_this_page_vars()">
-  <script type="text/javascript">
-
-    let ThisPage = {
+    const ThisPage = {
         template: '#this-page-template',
         mixins: [SimpleRequestMixin],
         props: {
@@ -52,37 +36,71 @@
         },
     }
 
-    let ThisPageData = {
+    const ThisPageData = {
         ## TODO: should find a better way to handle CSRF token
-        csrftoken: ${json.dumps(request.session.get_csrf_token() or request.session.new_csrf_token())|n},
+        csrftoken: ${json.dumps(h.get_csrf_token(request))|n},
     }
 
   </script>
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ## NOTE: if you override this, must use <script> tags
+## 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>
 
-<%def name="finalize_this_page_vars()">
-  ## NOTE: if you override this, must use <script> tags
+## nb. this is the canonical block for page content!
+<%def name="page_content()"></%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()}
+
+  ## DEPRECATED; called for back-compat
+  ${self.declare_this_page_vars()}
+  ${self.modify_this_page_vars()}
+</%def>
+
+<%def name="make_vue_components()">
+  ${parent.make_vue_components()}
+
+  ## DEPRECATED; called for back-compat
+  ${self.make_this_page_component()}
 </%def>
 
 <%def name="make_this_page_component()">
-  ${self.declare_this_page_vars()}
-  ${self.modify_this_page_vars()}
   ${self.finalize_this_page_vars()}
-
-  <script type="text/javascript">
-
+  <script>
     ThisPage.data = function() { return ThisPageData }
-
     Vue.component('this-page', ThisPage)
     <% request.register_component('this-page', 'ThisPage') %>
-
   </script>
 </%def>
 
+##############################
+## DEPRECATED
+##############################
 
-${self.render_this_page_template()}
-${self.make_this_page_component()}
+<%def name="declare_this_page_vars()"></%def>
+
+<%def name="modify_this_page_vars()"></%def>
+
+<%def name="finalize_this_page_vars()"></%def>

tailbone/templates/people/index.mako

@@ -61,37 +61,37 @@
   ${parent.grid_tools()}
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     % if getattr(master, 'mergeable', False) and master.has_perm('request_merge'):
 
-        ${grid.component_studly}Data.mergeRequestShowDialog = false
-        ${grid.component_studly}Data.mergeRequestRows = []
-        ${grid.component_studly}Data.mergeRequestSubmitText = "Submit Merge Request"
-        ${grid.component_studly}Data.mergeRequestSubmitting = false
+        ${grid.vue_component}Data.mergeRequestShowDialog = false
+        ${grid.vue_component}Data.mergeRequestRows = []
+        ${grid.vue_component}Data.mergeRequestSubmitText = "Submit Merge Request"
+        ${grid.vue_component}Data.mergeRequestSubmitting = false
 
-        ${grid.component_studly}.computed.mergeRequestRemovingUUID = function() {
+        ${grid.vue_component}.computed.mergeRequestRemovingUUID = function() {
             if (this.mergeRequestRows.length) {
                 return this.mergeRequestRows[0].uuid
             }
             return null
         }
 
-        ${grid.component_studly}.computed.mergeRequestKeepingUUID = function() {
+        ${grid.vue_component}.computed.mergeRequestKeepingUUID = function() {
             if (this.mergeRequestRows.length) {
                 return this.mergeRequestRows[1].uuid
             }
             return null
         }
 
-        ${grid.component_studly}.methods.showMergeRequest = function() {
+        ${grid.vue_component}.methods.showMergeRequest = function() {
             this.mergeRequestRows = this.checkedRows
             this.mergeRequestShowDialog = true
         }
 
-        ${grid.component_studly}.methods.submitMergeRequest = function() {
+        ${grid.vue_component}.methods.submitMergeRequest = function() {
             this.mergeRequestSubmitting = true
             this.mergeRequestSubmitText = "Working, please wait..."
         }
@@ -100,5 +100,3 @@
 
   </script>
 </%def>
-
-${parent.body()}

tailbone/templates/people/merge-requests/view.mako

@@ -18,10 +18,10 @@
   % endif
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
   % if not instance.merged and request.has_perm('people.merge'):
-      <script type="text/javascript">
+      <script>
 
         ThisPageData.mergeFormButtonText = "Perform Merge"
         ThisPageData.mergeFormSubmitting = false
@@ -34,5 +34,3 @@
       </script>
   % endif
 </%def>
-
-${parent.body()}

tailbone/templates/people/view.mako

@@ -2,6 +2,16 @@
 <%inherit file="/master/view.mako" />
 <%namespace file="/util.mako" import="view_profiles_helper" />
 
+<%def name="page_content()">
+  ${parent.page_content()}
+  % if not instance.users and request.has_perm('users.create'):
+      ${h.form(url('people.make_user'), ref='makeUserForm')}
+      ${h.csrf_token(request)}
+      ${h.hidden('person_uuid', value=instance.uuid)}
+      ${h.end_form()}
+  % endif
+</%def>
+
 <%def name="object_helpers()">
   ${parent.object_helpers()}
   ${view_profiles_helper([instance])}
@@ -13,9 +23,9 @@
   </div>
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     ${form.vue_component}.methods.clickMakeUser = function(event) {
         this.$emit('make-user')
@@ -29,17 +39,3 @@
 
   </script>
 </%def>
-
-<%def name="page_content()">
-  ${parent.page_content()}
-  % if not instance.users and request.has_perm('users.create'):
-      ${h.form(url('people.make_user'), ref='makeUserForm')}
-      ${h.csrf_token(request)}
-      ${h.hidden('person_uuid', value=instance.uuid)}
-      ${h.end_form()}
-  % endif
-</%def>
-
-
-${parent.body()}
-

tailbone/templates/people/view_profile.mako

@@ -1966,30 +1966,97 @@
 
     </div>
   </script>
-</%def>
+  <script>
 
-<%def name="render_this_page_template()">
-  ${parent.render_this_page_template()}
-  ${self.render_personal_tab_template()}
+    let ProfileInfoData = {
+        activeTab: location.hash ? location.hash.substring(1) : 'personal',
+        tabchecks: ${json.dumps(tabchecks or {})|n},
+        today: '${rattail_app.today()}',
+        profileLastChanged: Date.now(),
+        person: ${json.dumps(person_data or {})|n},
+        phoneTypeOptions: ${json.dumps(phone_type_options or [])|n},
+        emailTypeOptions: ${json.dumps(email_type_options or [])|n},
+        maxLengths: ${json.dumps(max_lengths or {})|n},
 
-  % if expose_members:
-      ${self.render_member_tab_template()}
-  % endif
+        % if request.has_perm('people_profile.view_versions'):
+            loadingRevisions: false,
+            showingRevisionDialog: false,
+            revision: {},
+            revisionShowAllFields: false,
+        % endif
+    }
 
-  ${self.render_customer_tab_template()}
-  % if expose_customer_shoppers:
-      ${self.render_shopper_tab_template()}
-  % endif
-  ${self.render_employee_tab_template()}
-  ${self.render_notes_tab_template()}
+    let ProfileInfo = {
+        template: '#profile-info-template',
+        props: {
+            % if request.has_perm('people_profile.view_versions'):
+                viewingHistory: Boolean,
+                gettingRevisions: Boolean,
+                revisions: Array,
+                revisionVersionMap: null,
+            % endif
+        },
+        computed: {},
+        mounted() {
 
-  % if expose_transactions:
-      ${transactions_grid.render_complete(allow_save_defaults=False)|n}
-      ${self.render_transactions_tab_template()}
-  % endif
+            // auto-refresh whichever tab is shown first
+            ## TODO: how to not assume 'personal' is the default tab?
+            let tab = this.$refs['tab_' + (this.activeTab || 'personal')]
+            if (tab && tab.refreshTab) {
+                tab.refreshTab()
+            }
+        },
+        methods: {
 
-  ${self.render_user_tab_template()}
-  ${self.render_profile_info_template()}
+            profileChanged(data) {
+                this.$emit('change-content-title', data.person.dynamic_content_title)
+                this.person = data.person
+                this.tabchecks = data.tabchecks
+                this.profileLastChanged = Date.now()
+            },
+
+            activeTabChanged(value) {
+                location.hash = value
+                this.refreshTabIfNeeded(value)
+                this.activeTabChangedExtra(value)
+            },
+
+            refreshTabIfNeeded(key) {
+                // TODO: this is *always* refreshing, should be more selective (?)
+                let tab = this.$refs['tab_' + key]
+                if (tab && tab.refreshIfNeeded) {
+                    tab.refreshIfNeeded(this.profileLastChanged)
+                }
+            },
+
+            activeTabChangedExtra(value) {},
+
+            % if request.has_perm('people_profile.view_versions'):
+
+                viewRevision(row) {
+                    this.revision = this.revisionVersionMap[row.txnid]
+                    this.showingRevisionDialog = true
+                },
+
+                viewPrevRevision() {
+                    let txnid = this.revision.prev_txnid
+                    this.revision = this.revisionVersionMap[txnid]
+                },
+
+                viewNextRevision() {
+                    let txnid = this.revision.next_txnid
+                    this.revision = this.revisionVersionMap[txnid]
+                },
+
+                toggleVersionFields() {
+                    this.revisionShowAllFields = !this.revisionShowAllFields
+                },
+
+            % endif
+        },
+    }
+
+  </script>
 </%def>
 
 <%def name="declare_personal_tab_vars()">
@@ -3022,114 +3089,46 @@
   </script>
 </%def>
 
-<%def name="declare_profile_info_vars()">
-  <script type="text/javascript">
-
-    let ProfileInfoData = {
-        activeTab: location.hash ? location.hash.substring(1) : 'personal',
-        tabchecks: ${json.dumps(tabchecks or {})|n},
-        today: '${rattail_app.today()}',
-        profileLastChanged: Date.now(),
-        person: ${json.dumps(person_data or {})|n},
-        phoneTypeOptions: ${json.dumps(phone_type_options or [])|n},
-        emailTypeOptions: ${json.dumps(email_type_options or [])|n},
-        maxLengths: ${json.dumps(max_lengths or {})|n},
-
-        % if request.has_perm('people_profile.view_versions'):
-            loadingRevisions: false,
-            showingRevisionDialog: false,
-            revision: {},
-            revisionShowAllFields: false,
-        % endif
-    }
-
-    let ProfileInfo = {
-        template: '#profile-info-template',
-        props: {
-            % if request.has_perm('people_profile.view_versions'):
-                viewingHistory: Boolean,
-                gettingRevisions: Boolean,
-                revisions: Array,
-                revisionVersionMap: null,
-            % endif
-        },
-        computed: {},
-        mounted() {
-
-            // auto-refresh whichever tab is shown first
-            ## TODO: how to not assume 'personal' is the default tab?
-            let tab = this.$refs['tab_' + (this.activeTab || 'personal')]
-            if (tab && tab.refreshTab) {
-                tab.refreshTab()
-            }
-        },
-        methods: {
-
-            profileChanged(data) {
-                this.$emit('change-content-title', data.person.dynamic_content_title)
-                this.person = data.person
-                this.tabchecks = data.tabchecks
-                this.profileLastChanged = Date.now()
-            },
-
-            activeTabChanged(value) {
-                location.hash = value
-                this.refreshTabIfNeeded(value)
-                this.activeTabChangedExtra(value)
-            },
-
-            refreshTabIfNeeded(key) {
-                // TODO: this is *always* refreshing, should be more selective (?)
-                let tab = this.$refs['tab_' + key]
-                if (tab && tab.refreshIfNeeded) {
-                    tab.refreshIfNeeded(this.profileLastChanged)
-                }
-            },
-
-            activeTabChangedExtra(value) {},
-
-            % if request.has_perm('people_profile.view_versions'):
-
-                viewRevision(row) {
-                    this.revision = this.revisionVersionMap[row.txnid]
-                    this.showingRevisionDialog = true
-                },
-
-                viewPrevRevision() {
-                    let txnid = this.revision.prev_txnid
-                    this.revision = this.revisionVersionMap[txnid]
-                },
-
-                viewNextRevision() {
-                    let txnid = this.revision.next_txnid
-                    this.revision = this.revisionVersionMap[txnid]
-                },
-
-                toggleVersionFields() {
-                    this.revisionShowAllFields = !this.revisionShowAllFields
-                },
-
-            % endif
-        },
-    }
-
-  </script>
-</%def>
-
 <%def name="make_profile_info_component()">
-  ${self.declare_profile_info_vars()}
-  <script type="text/javascript">
 
+  ## DEPRECATED; called for back-compat
+  ${self.declare_profile_info_vars()}
+
+  <script>
     ProfileInfo.data = function() { return ProfileInfoData }
     Vue.component('profile-info', ProfileInfo)
     <% request.register_component('profile-info', 'ProfileInfo') %>
-
   </script>
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="render_vue_templates()">
+  ${parent.render_vue_templates()}
+
+  ${self.render_personal_tab_template()}
+
+  % if expose_members:
+      ${self.render_member_tab_template()}
+  % endif
+
+  ${self.render_customer_tab_template()}
+  % if expose_customer_shoppers:
+      ${self.render_shopper_tab_template()}
+  % endif
+  ${self.render_employee_tab_template()}
+  ${self.render_notes_tab_template()}
+
+  % if expose_transactions:
+      ${transactions_grid.render_complete(allow_save_defaults=False)|n}
+      ${self.render_transactions_tab_template()}
+  % endif
+
+  ${self.render_user_tab_template()}
+  ${self.render_profile_info_template()}
+</%def>
+
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     % if request.has_perm('people_profile.view_versions'):
         ThisPage.props.viewingHistory = Boolean
@@ -3177,45 +3176,8 @@
         },
     }
 
-  </script>
-</%def>
 
-<%def name="make_this_page_component()">
-  ${parent.make_this_page_component()}
-  ${self.make_personal_tab_component()}
-
-  % if expose_members:
-      ${self.make_member_tab_component()}
-  % endif
-
-  ${self.make_customer_tab_component()}
-  % if expose_customer_shoppers:
-      ${self.make_shopper_tab_component()}
-  % endif
-  ${self.make_employee_tab_component()}
-  ${self.make_notes_tab_component()}
-
-  % if expose_transactions:
-      <script type="text/javascript">
-
-        TransactionsGrid.data = function() { return TransactionsGridData }
-        Vue.component('transactions-grid', TransactionsGrid)
-        ## TODO: why is this line not needed?
-        ## <% request.register_component('transactions-grid', 'TransactionsGrid') %>
-
-      </script>
-      ${self.make_transactions_tab_component()}
-  % endif
-
-  ${self.make_user_tab_component()}
-  ${self.make_profile_info_component()}
-</%def>
-
-<%def name="modify_whole_page_vars()">
-  ${parent.modify_whole_page_vars()}
-
-  % if request.has_perm('people_profile.view_versions'):
-      <script type="text/javascript">
+    % if request.has_perm('people_profile.view_versions'):
 
         WholePageData.viewingHistory = false
         WholePageData.gettingRevisions = false
@@ -3251,9 +3213,44 @@
             })
         }
 
-      </script>
-  % endif
+    % endif
+  </script>
 </%def>
 
+<%def name="make_vue_components()">
+  ${parent.make_vue_components()}
 
-${parent.body()}
+  ${self.make_personal_tab_component()}
+
+  % if expose_members:
+      ${self.make_member_tab_component()}
+  % endif
+
+  ${self.make_customer_tab_component()}
+  % if expose_customer_shoppers:
+      ${self.make_shopper_tab_component()}
+  % endif
+  ${self.make_employee_tab_component()}
+  ${self.make_notes_tab_component()}
+
+  % if expose_transactions:
+      <script type="text/javascript">
+
+        TransactionsGrid.data = function() { return TransactionsGridData }
+        Vue.component('transactions-grid', TransactionsGrid)
+        ## TODO: why is this line not needed?
+        ## <% request.register_component('transactions-grid', 'TransactionsGrid') %>
+
+      </script>
+      ${self.make_transactions_tab_component()}
+  % endif
+
+  ${self.make_user_tab_component()}
+  ${self.make_profile_info_component()}
+</%def>
+
+##############################
+## DEPRECATED
+##############################
+
+<%def name="declare_profile_info_vars()"></%def>

tailbone/templates/poser/reports/view.mako

@@ -62,19 +62,13 @@
   <br />
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
   % if master.has_perm('replace'):
-  <script type="text/javascript">
-
-    ${form.component_studly}Data.showUploadForm = false
-
-    ${form.component_studly}Data.uploadFile = null
-
-    ${form.component_studly}Data.uploadSubmitting = false
-
-  </script>
+      <script>
+        ${form.vue_component}Data.showUploadForm = false
+        ${form.vue_component}Data.uploadFile = null
+        ${form.vue_component}Data.uploadSubmitting = false
+      </script>
   % endif
 </%def>
-
-${parent.body()}

tailbone/templates/poser/setup.mako

@@ -118,14 +118,9 @@
   % endif
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
-
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
     ThisPageData.setupSubmitting = false
-
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/principal/find_by_perm.mako

@@ -10,8 +10,16 @@
   </find-principals>
 </%def>
 
-<%def name="render_this_page_template()">
-  ${parent.render_this_page_template()}
+<%def name="principal_table()">
+  <div
+    style="width: 50%;"
+    >
+    ${grid.render_table_element(data_prop='principalsData')|n}
+  </div>
+</%def>
+
+<%def name="render_vue_templates()">
+  ${parent.render_vue_templates()}
   <script type="text/x-template" id="find-principals-template">
     <div>
 
@@ -90,28 +98,6 @@
 
     </div>
   </script>
-</%def>
-
-<%def name="principal_table()">
-  <div
-    style="width: 50%;"
-    >
-    ${grid.render_table_element(data_prop='principalsData')|n}
-  </div>
-</%def>
-
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
-
-    ThisPageData.permissionGroups = ${json.dumps(perms_data)|n}
-    ThisPageData.sortedGroups = ${json.dumps(sorted_groups_data)|n}
-
-  </script>
-</%def>
-
-<%def name="make_this_page_component()">
-  ${parent.make_this_page_component()}
   <script type="text/javascript">
 
     const FindPrincipals = {
@@ -240,12 +226,21 @@
         }
     }
 
-    Vue.component('find-principals', FindPrincipals)
-
-    <% request.register_component('find-principals', 'FindPrincipals') %>
-
   </script>
 </%def>
 
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
+    ThisPageData.permissionGroups = ${json.dumps(perms_data)|n}
+    ThisPageData.sortedGroups = ${json.dumps(sorted_groups_data)|n}
+  </script>
+</%def>
 
-${parent.body()}
+<%def name="make_vue_components()">
+  ${parent.make_vue_components()}
+  <script>
+    Vue.component('find-principals', FindPrincipals)
+    <% request.register_component('find-principals', 'FindPrincipals') %>
+  </script>
+</%def>

tailbone/templates/products/batch.mako

@@ -22,7 +22,7 @@
 </%def>
 
 <%def name="render_form_innards()">
-  ${h.form(request.current_route_url(), **{'@submit': 'submit{}'.format(form.component_studly)})}
+  ${h.form(request.current_route_url(), **{'@submit': 'submit{}'.format(form.vue_component)})}
   ${h.csrf_token(request)}
 
   <section>
@@ -43,8 +43,8 @@
   <div class="buttons">
     <b-button type="is-primary"
               native-type="submit"
-              :disabled="${form.component_studly}Submitting">
-      {{ ${form.component_studly}ButtonText }}
+              :disabled="${form.vue_component}Submitting">
+      {{ ${form.vue_component}ButtonText }}
     </b-button>
     <b-button tag="a" href="${url('products')}">
       Cancel
@@ -55,32 +55,33 @@
 </%def>
 
 <%def name="render_form_template()">
-  <script type="text/x-template" id="${form.component}-template">
+  <script type="text/x-template" id="${form.vue_tagname}-template">
     ${self.render_form_innards()}
   </script>
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <% request.register_component(form.vue_tagname, form.vue_component) %>
+  <script>
 
     ## TODO: ugh, an awful lot of duplicated code here (from /forms/deform.mako)
 
-    let ${form.component_studly} = {
-        template: '#${form.component}-template',
+    let ${form.vue_component} = {
+        template: '#${form.vue_tagname}-template',
         methods: {
 
             ## TODO: deprecate / remove the latter option here
             % if form.auto_disable_save or form.auto_disable:
-                submit${form.component_studly}() {
-                    this.${form.component_studly}Submitting = true
-                    this.${form.component_studly}ButtonText = "Working, please wait..."
+                submit${form.vue_component}() {
+                    this.${form.vue_component}Submitting = true
+                    this.${form.vue_component}ButtonText = "Working, please wait..."
                 }
             % endif
         }
     }
 
-    let ${form.component_studly}Data = {
+    let ${form.vue_component}Data = {
 
         ## TODO: ugh, this seems pretty hacky.  need to declare some data models
         ## for various field components to bind to...
@@ -95,8 +96,8 @@
 
         ## TODO: deprecate / remove the latter option here
         % if form.auto_disable_save or form.auto_disable:
-            ${form.component_studly}Submitting: false,
-            ${form.component_studly}ButtonText: ${json.dumps(getattr(form, 'submit_label', getattr(form, 'save_label', "Submit")))|n},
+            ${form.vue_component}Submitting: false,
+            ${form.vue_component}ButtonText: ${json.dumps(getattr(form, 'submit_label', getattr(form, 'save_label', "Submit")))|n},
         % endif
 
         ## TODO: more hackiness, this is for the sake of batch params
@@ -114,6 +115,3 @@
 
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/products/configure.mako

@@ -95,9 +95,9 @@
   </div>
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     ThisPage.methods.getTitleForKey = function(key) {
         switch (key) {
@@ -118,6 +118,3 @@
 
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/products/index.mako

@@ -36,16 +36,16 @@
   </${grid.component}>
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
   % if label_profiles and master.has_perm('print_labels'):
-      <script type="text/javascript">
+      <script>
 
-        ${grid.component_studly}Data.quickLabelProfile = ${json.dumps(label_profiles[0].uuid)|n}
-        ${grid.component_studly}Data.quickLabelQuantity = 1
-        ${grid.component_studly}Data.quickLabelSpeedbumpThreshold = ${json.dumps(quick_label_speedbump_threshold)|n}
+        ${grid.vue_component}Data.quickLabelProfile = ${json.dumps(label_profiles[0].uuid)|n}
+        ${grid.vue_component}Data.quickLabelQuantity = 1
+        ${grid.vue_component}Data.quickLabelSpeedbumpThreshold = ${json.dumps(quick_label_speedbump_threshold)|n}
 
-        ${grid.component_studly}.methods.quickLabelPrint = function(row) {
+        ${grid.vue_component}.methods.quickLabelPrint = function(row) {
 
             let quantity = parseInt(this.quickLabelQuantity)
             if (isNaN(quantity)) {
@@ -83,6 +83,3 @@
       </script>
   % endif
 </%def>
-
-
-${parent.body()}

tailbone/templates/products/pending/view.mako

@@ -2,11 +2,6 @@
 <%inherit file="/master/view.mako" />
 <%namespace name="product_lookup" file="/products/lookup.mako" />
 
-<%def name="render_this_page_template()">
-  ${parent.render_this_page_template()}
-  ${product_lookup.tailbone_product_lookup_template()}
-</%def>
-
 <%def name="page_content()">
   ${parent.page_content()}
 
@@ -67,9 +62,14 @@
   % endif
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="render_vue_templates()">
+  ${parent.render_vue_templates()}
+  ${product_lookup.tailbone_product_lookup_template()}
+</%def>
+
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     % if master.has_perm('ignore_product') and instance.status_code in (enum.PENDING_PRODUCT_STATUS_PENDING, enum.PENDING_PRODUCT_STATUS_READY):
 
@@ -124,10 +124,7 @@
   </script>
 </%def>
 
-<%def name="make_this_page_component()">
-  ${parent.make_this_page_component()}
+<%def name="make_vue_components()">
+  ${parent.make_vue_components()}
   ${product_lookup.tailbone_product_lookup_component()}
 </%def>
-
-
-${parent.body()}

tailbone/templates/products/view.mako

@@ -282,9 +282,9 @@
   % endif
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     ThisPageData.vendorSourcesData = ${json.dumps(vendor_sources['data'])|n}
     ThisPageData.lookupCodesData = ${json.dumps(lookup_codes['data'])|n}
@@ -411,6 +411,3 @@
     % endif
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/purchases/credits/index.mako

@@ -59,27 +59,24 @@
 
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
-    ${grid.component_studly}Data.changeStatusShowDialog = false
-    ${grid.component_studly}Data.changeStatusOptions = ${json.dumps(status_options)|n}
-    ${grid.component_studly}Data.changeStatusValue = null
-    ${grid.component_studly}Data.changeStatusSubmitting = false
+    ${grid.vue_component}Data.changeStatusShowDialog = false
+    ${grid.vue_component}Data.changeStatusOptions = ${json.dumps(status_options)|n}
+    ${grid.vue_component}Data.changeStatusValue = null
+    ${grid.vue_component}Data.changeStatusSubmitting = false
 
-    ${grid.component_studly}.methods.changeStatusInit = function() {
+    ${grid.vue_component}.methods.changeStatusInit = function() {
         this.changeStatusValue = null
         this.changeStatusShowDialog = true
     }
 
-    ${grid.component_studly}.methods.changeStatusSubmit = function() {
+    ${grid.vue_component}.methods.changeStatusSubmit = function() {
         this.changeStatusSubmitting = true
         this.$refs.changeStatusForm.submit()
     }
 
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/receiving/configure.mako

@@ -69,12 +69,12 @@
   <h3 class="block is-size-3">Vendors</h3>
   <div class="block" style="padding-left: 2rem;">
 
-    <b-field message="If set, user must choose a &quot;supported&quot; vendor; otherwise they may choose &quot;any&quot; vendor.">
-      <b-checkbox name="rattail.batch.purchase.supported_vendors_only"
-                  v-model="simpleSettings['rattail.batch.purchase.supported_vendors_only']"
+    <b-field message="If not set, user must choose a &quot;supported&quot; vendor.">
+      <b-checkbox name="rattail.batch.purchase.allow_receiving_any_vendor"
+                  v-model="simpleSettings['rattail.batch.purchase.allow_receiving_any_vendor']"
                   native-value="true"
                   @input="settingsNeedSaved = true">
-        Only allow batch for "supported" vendors
+        Allow receiving for <span class="has-text-weight-bold">any</span> vendor
       </b-checkbox>
     </b-field>
 

tailbone/templates/receiving/view.mako

@@ -139,9 +139,15 @@
   % endif
 </%def>
 
-<%def name="render_this_page_template()">
-  ${parent.render_this_page_template()}
+<%def name="object_helpers()">
+  ${self.render_status_breakdown()}
+  ${self.render_po_vs_invoice_helper()}
+  ${self.render_execute_helper()}
+  ${self.render_tools_helper()}
+</%def>
 
+<%def name="render_vue_templates()">
+  ${parent.render_vue_templates()}
   % if allow_edit_catalog_unit_cost or allow_edit_invoice_unit_cost:
       <script type="text/x-template" id="receiving-cost-editor-template">
         <div>
@@ -162,16 +168,9 @@
   % endif
 </%def>
 
-<%def name="object_helpers()">
-  ${self.render_status_breakdown()}
-  ${self.render_po_vs_invoice_helper()}
-  ${self.render_execute_helper()}
-  ${self.render_tools_helper()}
-</%def>
-
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     % if allow_confirm_all_costs:
 
@@ -318,13 +317,13 @@
 
     % if allow_edit_catalog_unit_cost:
 
-        ${rows_grid.component_studly}.methods.catalogUnitCostClicked = function(row) {
+        ${rows_grid.vue_component}.methods.catalogUnitCostClicked = function(row) {
 
             // start edit for clicked cell
             this.$refs['catalogUnitCost_' + row.uuid].startEdit()
         }
 
-        ${rows_grid.component_studly}.methods.catalogCostConfirmed = function(amount, index) {
+        ${rows_grid.vue_component}.methods.catalogCostConfirmed = function(amount, index) {
 
             // update display to indicate cost was confirmed
             this.addRowClass(index, 'catalog_cost_confirmed')
@@ -353,13 +352,13 @@
 
     % if allow_edit_invoice_unit_cost:
 
-        ${rows_grid.component_studly}.methods.invoiceUnitCostClicked = function(row) {
+        ${rows_grid.vue_component}.methods.invoiceUnitCostClicked = function(row) {
 
             // start edit for clicked cell
             this.$refs['invoiceUnitCost_' + row.uuid].startEdit()
         }
 
-        ${rows_grid.component_studly}.methods.invoiceCostConfirmed = function(amount, index) {
+        ${rows_grid.vue_component}.methods.invoiceCostConfirmed = function(amount, index) {
 
             // update display to indicate cost was confirmed
             this.addRowClass(index, 'invoice_cost_confirmed')
@@ -389,6 +388,3 @@
 
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/receiving/view_row.mako

@@ -484,9 +484,9 @@
   </div>
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
 ##     ThisPage.methods.editUnitCost = function() {
 ##         alert("TODO: not yet implemented")
@@ -720,6 +720,3 @@
 
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/reports/generated/choose.mako

@@ -53,13 +53,13 @@
   % endif
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
-    TailboneFormData.reportDescriptions = ${json.dumps(report_descriptions)|n}
+    ${form.vue_component}Data.reportDescriptions = ${json.dumps(report_descriptions)|n}
 
-    TailboneForm.methods.reportTypeChanged = function(reportType) {
+    ${form.vue_component}.methods.reportTypeChanged = function(reportType) {
         this.$emit('report-change', this.reportDescriptions[reportType])
     }
 
@@ -71,6 +71,3 @@
 
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/reports/generated/delete.mako

@@ -1,16 +1,11 @@
 ## -*- coding: utf-8; -*-
 <%inherit file="/master/delete.mako" />
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
-
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
     % if params_data is not Undefined:
-        ${form.component_studly}Data.paramsData = ${json.dumps(params_data)|n}
+        ${form.vue_component}Data.paramsData = ${json.dumps(params_data)|n}
     % endif
-
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/reports/generated/view.mako

@@ -23,16 +23,11 @@
   % endif
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
-
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
     % if params_data is not Undefined:
-        ${form.component_studly}Data.paramsData = ${json.dumps(params_data)|n}
+        ${form.vue_component}Data.paramsData = ${json.dumps(params_data)|n}
     % endif
-
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/reports/inventory.mako

@@ -48,15 +48,10 @@
   ${h.end_form()}
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
-
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
     ThisPageData.departments = ${json.dumps([{'uuid': d.uuid, 'name': d.name} for d in departments])|n}
     ThisPageData.excludeNotForSale = true
-
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/reports/ordering.mako

@@ -81,9 +81,9 @@
 
 <%def name="extra_fields()"></%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     ThisPageData.vendorUUID = null
     ThisPageData.departments = []
@@ -127,6 +127,3 @@
 
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/reports/problems/view.mako

@@ -45,11 +45,10 @@
             <b-button @click="runReportShowDialog = false">
               Cancel
             </b-button>
-            ${h.form(master.get_action_url('execute', instance))}
+            ${h.form(master.get_action_url('execute', instance), **{'@submit': 'runReportSubmitting = true'})}
             ${h.csrf_token(request)}
             <b-button type="is-primary"
                       native-type="submit"
-                      @click="runReportSubmitting = true"
                       :disabled="runReportSubmitting"
                       icon-pack="fas"
                       icon-left="arrow-circle-right">
@@ -62,12 +61,12 @@
   % endif
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     % if weekdays_data is not Undefined:
-        ${form.component_studly}Data.weekdaysData = ${json.dumps(weekdays_data)|n}
+        ${form.vue_component}Data.weekdaysData = ${json.dumps(weekdays_data)|n}
     % endif
 
     ThisPageData.runReportShowDialog = false
@@ -75,6 +74,3 @@
 
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/roles/create.mako

@@ -6,15 +6,11 @@
   ${h.stylesheet_link(request.static_url('tailbone:static/css/perms.css'))}
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
-
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
     // TODO: this variable name should be more dynamic (?) since this is
     // connected to (and only here b/c of) the permissions field
-    TailboneFormData.showingPermissionGroup = ''
-
+    ${form.vue_component}Data.showingPermissionGroup = ''
   </script>
 </%def>
-
-${parent.body()}

tailbone/templates/roles/edit.mako

@@ -6,15 +6,11 @@
   ${h.stylesheet_link(request.static_url('tailbone:static/css/perms.css'))}
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
-
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
     // TODO: this variable name should be more dynamic (?) since this is
     // connected to (and only here b/c of) the permissions field
-    TailboneFormData.showingPermissionGroup = ''
-
+    ${form.vue_component}Data.showingPermissionGroup = ''
   </script>
 </%def>
-
-${parent.body()}

tailbone/templates/roles/view.mako

@@ -6,12 +6,12 @@
   ${h.stylesheet_link(request.static_url('tailbone:static/css/perms.css'))}
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     % if users_data is not Undefined:
-        ${form.component_studly}Data.usersData = ${json.dumps(users_data)|n}
+        ${form.vue_component}Data.usersData = ${json.dumps(users_data)|n}
     % endif
 
     ThisPage.methods.detachPerson = function(url) {
@@ -23,5 +23,3 @@
 
   </script>
 </%def>
-
-${parent.body()}

tailbone/templates/settings/email/configure.mako

@@ -86,9 +86,9 @@
   </div>
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     ThisPageData.testRecipient = ${json.dumps(user_email_address)|n}
     ThisPageData.sendingTest = false
@@ -137,6 +137,3 @@
     % endif
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/settings/email/index.mako

@@ -15,10 +15,10 @@
   ${parent.render_grid_component()}
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
   % if master.has_perm('configure'):
-      <script type="text/javascript">
+      <script>
 
         ThisPageData.showEmails = 'available'
 
@@ -26,9 +26,9 @@
             this.$refs.grid.showEmails = this.showEmails
         }
 
-        ${grid.component_studly}Data.showEmails = 'available'
+        ${grid.vue_component}Data.showEmails = 'available'
 
-        ${grid.component_studly}.computed.visibleData = function() {
+        ${grid.vue_component}.computed.visibleData = function() {
 
             if (this.showEmails == 'available') {
                 return this.data.filter(email => email.hidden == 'No')
@@ -41,11 +41,11 @@
             return this.data
         }
 
-        ${grid.component_studly}.methods.renderLabelToggleHidden = function(row) {
+        ${grid.vue_component}.methods.renderLabelToggleHidden = function(row) {
             return row.hidden == 'Yes' ? "Un-hide" : "Hide"
         }
 
-        ${grid.component_studly}.methods.toggleHidden = function(row) {
+        ${grid.vue_component}.methods.toggleHidden = function(row) {
             let url = '${url('{}.toggle_hidden'.format(route_prefix))}'
             let params = {
                 key: row.key,
@@ -65,5 +65,3 @@
       </script>
   % endif
 </%def>
-
-${parent.body()}

tailbone/templates/settings/email/view.mako

@@ -6,8 +6,8 @@
   <email-preview-tools></email-preview-tools>
 </%def>
 
-<%def name="render_this_page_template()">
-  ${parent.render_this_page_template()}
+<%def name="render_vue_templates()">
+  ${parent.render_vue_templates()}
   <script type="text/x-template" id="email-preview-tools-template">
 
   ${h.form(url('email.preview'), **{'@submit': 'submitPreviewForm'})}
@@ -72,10 +72,6 @@
 
   ${h.end_form()}
   </script>
-</%def>
-
-<%def name="make_this_page_component()">
-  ${parent.make_this_page_component()}
   <script type="text/javascript">
 
     const EmailPreviewTools = {
@@ -100,12 +96,13 @@
         }
     }
 
-    Vue.component('email-preview-tools', EmailPreviewTools)
-
-    <% request.register_component('email-preview-tools', 'EmailPreviewTools') %>
-
   </script>
 </%def>
 
-
-${parent.body()}
+<%def name="make_vue_components()">
+  ${parent.make_vue_components()}
+  <script>
+    Vue.component('email-preview-tools', EmailPreviewTools)
+    <% request.register_component('email-preview-tools', 'EmailPreviewTools') %>
+  </script>
+</%def>

tailbone/templates/tables/create.mako

@@ -695,9 +695,9 @@
   </b-steps>
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     // nb. for warning user they may lose changes if leaving page
     ThisPageData.dirty = false
@@ -983,6 +983,3 @@
 
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/tempmon/appliances/view.mako

@@ -8,14 +8,9 @@
   % endif
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
-
-    ${form.component_studly}Data.probesData = ${json.dumps(probes_data)|n}
-
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
+    ${form.vue_component}Data.probesData = ${json.dumps(probes_data)|n}
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/tempmon/clients/view.mako

@@ -22,14 +22,9 @@
   % endif
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
-
-    ${form.component_studly}Data.probesData = ${json.dumps(probes_data)|n}
-
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
+    ${form.vue_component}Data.probesData = ${json.dumps(probes_data)|n}
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/tempmon/dashboard.mako

@@ -59,9 +59,9 @@
   % endif
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     ThisPageData.appliances = ${json.dumps(appliances_data)|n}
     ThisPageData.applianceUUID = ${json.dumps(appliance.uuid if appliance else None)|n}
@@ -118,6 +118,3 @@
 
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/tempmon/probes/graph.mako

@@ -66,9 +66,9 @@
   <canvas ref="tempchart" width="400" height="150"></canvas>
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  <script type="text/javascript">
+<%def name="modify_vue_vars()">
+  ${parent.modify_vue_vars()}
+  <script>
 
     ThisPageData.currentTimeRange = ${json.dumps(current_time_range)|n}
     ThisPageData.chart = null
@@ -128,6 +128,3 @@
 
   </script>
 </%def>
-
-
-${parent.body()}

tailbone/templates/themes/butterball/base.mako

@@ -20,38 +20,21 @@
   </head>
 
   <body>
-    <div id="app" style="height: 100%; display: flex; flex-direction: column; justify-content: space-between;">
+    <div id="app" style="height: 100%;">
       <whole-page></whole-page>
     </div>
 
     ## TODO: this must come before the self.body() call..but why?
     ${declare_formposter_mixin()}
 
-    ## global components used by various (but not all) pages
-    ${make_field_components()}
-    ${make_grid_filter_components()}
-
-    ## global components for buefy-based template compatibility
-    ${make_http_plugin()}
-    ${make_buefy_plugin()}
-    ${make_buefy_components()}
-
-    ## special global components, used by WholePage
-    ${self.make_menu_search_component()}
-    ${page_help.render_template()}
-    ${page_help.declare_vars()}
-    % if request.has_perm('common.feedback'):
-        ${self.make_feedback_component()}
-    % endif
-
-    ## WholePage component
-    ${self.make_whole_page_component()}
-
     ## content body from derived/child template
     ${self.body()}
 
     ## Vue app
-    ${self.make_whole_page_app()}
+    ${self.render_vue_templates()}
+    ${self.modify_vue_vars()}
+    ${self.make_vue_components()}
+    ${self.make_vue_app()}
   </body>
 </html>
 
@@ -596,7 +579,7 @@
   </script>
 </%def>
 
-<%def name="render_whole_page_template()">
+<%def name="render_vue_template_whole_page()">
   <script type="text/x-template" id="whole-page-template">
     <div id="whole-page" style="height: 100%; display: flex; flex-direction: column; justify-content: space-between;">
 
@@ -896,8 +879,6 @@
       </footer>
     </div>
   </script>
-
-##   ${multi_file_upload.render_template()}
 </%def>
 
 <%def name="render_this_page_component()">
@@ -928,7 +909,7 @@
               ${h.form(url('stop_root'), ref='stopBeingRootForm')}
               ${h.csrf_token(request)}
               <input type="hidden" name="referrer" value="${request.current_route_url()}" />
-              <a @click="stopBeingRoot()"
+              <a @click="$refs.stopBeingRootForm.submit()"
                  class="navbar-item has-background-danger has-text-white">
                 Stop being root
               </a>
@@ -937,7 +918,7 @@
               ${h.form(url('become_root'), ref='startBeingRootForm')}
               ${h.csrf_token(request)}
               <input type="hidden" name="referrer" value="${request.current_route_url()}" />
-              <a @click="startBeingRoot()"
+              <a @click="$refs.startBeingRootForm.submit()"
                  class="navbar-item has-background-danger has-text-white">
                 Become root
               </a>
@@ -1068,9 +1049,7 @@
   % endif
 </%def>
 
-<%def name="declare_whole_page_vars()">
-##   ${multi_file_upload.declare_vars()}
-
+<%def name="render_vue_script_whole_page()">
   <script>
 
     const WholePage = {
@@ -1124,18 +1103,6 @@
                 const key = 'menu_' + hash + '_shown'
                 this[key] = !this[key]
             },
-
-            % if request.is_admin:
-
-                startBeingRoot() {
-                    this.$refs.startBeingRootForm.submit()
-                },
-
-                stopBeingRoot() {
-                    this.$refs.stopBeingRootForm.submit()
-                },
-
-            % endif
         },
     }
 
@@ -1172,26 +1139,71 @@
   </script>
 </%def>
 
-<%def name="modify_whole_page_vars()"></%def>
+##############################
+## vue components + app
+##############################
 
-## TODO: do we really need this?
-## <%def name="finalize_whole_page_vars()"></%def>
+<%def name="render_vue_templates()">
+##   ${multi_file_upload.render_template()}
+##   ${multi_file_upload.declare_vars()}
 
-<%def name="make_whole_page_component()">
+  ## global components used by various (but not all) pages
+  ${make_field_components()}
+  ${make_grid_filter_components()}
+
+  ## global components for buefy-based template compatibility
+  ${make_http_plugin()}
+  ${make_buefy_plugin()}
+  ${make_buefy_components()}
+
+  ## special global components, used by WholePage
+  ${self.make_menu_search_component()}
+  ${page_help.render_template()}
+  ${page_help.declare_vars()}
+  % if request.has_perm('common.feedback'):
+      ${self.make_feedback_component()}
+  % endif
+
+  ## DEPRECATED; called for back-compat
   ${self.render_whole_page_template()}
+
+  ## DEPRECATED; called for back-compat
   ${self.declare_whole_page_vars()}
+</%def>
+
+## DEPRECATED; remains for back-compat
+<%def name="render_whole_page_template()">
+  ${self.render_vue_template_whole_page()}
+  ${self.render_vue_script_whole_page()}
+</%def>
+
+<%def name="modify_vue_vars()">
+  ## DEPRECATED; called for back-compat
   ${self.modify_whole_page_vars()}
-##   ${self.finalize_whole_page_vars()}
+</%def>
 
+<%def name="make_vue_components()">
   ${page_help.make_component()}
-##   ${multi_file_upload.make_component()}
+  ## ${multi_file_upload.make_component()}
 
+  ## DEPRECATED; called for back-compat (?)
+  ${self.make_whole_page_component()}
+</%def>
+
+## DEPRECATED; remains for back-compat
+<%def name="make_whole_page_component()">
   <script>
     WholePage.data = () => { return WholePageData }
   </script>
   <% request.register_component('whole-page', 'WholePage') %>
 </%def>
 
+<%def name="make_vue_app()">
+  ## DEPRECATED; called for back-compat
+  ${self.make_whole_page_app()}
+</%def>
+
+## DEPRECATED; remains for back-compat
 <%def name="make_whole_page_app()">
   <script type="module">
     import {createApp} from 'vue'
@@ -1223,3 +1235,11 @@
     app.mount('#app')
   </script>
 </%def>
+
+##############################
+## DEPRECATED
+##############################
+
+<%def name="declare_whole_page_vars()"></%def>
+
+<%def name="modify_whole_page_vars()"></%def>