Refactory Buefy templates to use WholePage and ThisPage components

plus add `GridFilter.set_choices()` method

tailbone/templates/themes/falafel/base.mako

@@ -258,7 +258,20 @@
           % endfor
       % endif
 
+      ## ##############################
+      ## whole page
+      ## ##############################
+
       ${self.body()}
+
+      <div id="whole-page-app">
+        <whole-page></whole-page>
+      </div>
+
+      ${self.render_whole_page_template()}
+      ${self.make_whole_page_component()}
+      ${self.make_whole_page_app()}
+
     </section>
 
     ## Footer
@@ -411,6 +424,59 @@
 
 <%def name="head_tags()"></%def>
 
+<%def name="render_whole_page_template()">
+  <script type="text/x-template" id="whole-page-template">
+    <div>
+      <this-page></this-page>
+    </div>
+  </script>
+</%def>
+
+<%def name="declare_whole_page_vars()">
+  <script type="text/javascript">
+
+    let WholePage = {
+        template: '#whole-page-template',
+        methods: {}
+    }
+
+    let WholePageData = {}
+
+  </script>
+</%def>
+
+<%def name="modify_whole_page_vars()">
+  ## NOTE: if you override this, must use <script> tags
+</%def>
+
+<%def name="finalize_whole_page_vars()">
+  ## NOTE: if you override this, must use <script> tags
+</%def>
+
+<%def name="make_whole_page_component()">
+  ${self.declare_whole_page_vars()}
+  ${self.modify_whole_page_vars()}
+  ${self.finalize_whole_page_vars()}
+
+  <script type="text/javascript">
+
+    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>