fix: add render_vue_finalize() methods for grids, forms

to make the templates just that much cleaner

src/wuttaweb/forms/base.py

@@ -918,19 +918,42 @@ class Form:
 
         return HTML.tag('b-field', c=[html], **attrs)
 
+    def render_vue_finalize(self):
+        """
+        Render the Vue "finalize" script for the form.
+
+        By default this simply returns:
+
+        .. code-block:: html
+
+           <script>
+             WuttaForm.data = function() { return WuttaFormData }
+             Vue.component('wutta-form', WuttaForm)
+           </script>
+
+        The actual output may depend on various form attributes, in
+        particular :attr:`vue_tagname`.
+        """
+        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 get_vue_model_data(self):
         """
         Returns a dict with form model data.  Values may be nested
         depending on the types of fields contained in the form.
 
-        Note that the values need not be "converted" (to be
+        This collects the ``cstruct`` values for all fields which are
-        JSON-compatible) at this stage, for instance ``colander.null``
+        present both in :attr:`fields` as well as the Deform schema.
-        is not a problem here.  The point is to collect the raw data.
 
-        The dict should have a key/value for each field in the form.
+        It also converts each as needed, to ensure it is
+        JSON-serializable.
 
-        This method is called by :meth:`render_vue_model_data()` which
+        :returns: Dict of field/value items.
-        is responsible for ensuring JSON compatibility.
         """
         dform = self.get_deform()
         model_data = {}

src/wuttaweb/grids/base.py

@@ -1278,6 +1278,30 @@ class Grid:
         output = render(template, context)
         return HTML.literal(output)
 
+    def render_vue_finalize(self):
+        """
+        Render the Vue "finalize" script for the grid.
+
+        By default this simply returns:
+
+        .. code-block:: html
+
+           <script>
+             WuttaGrid.data = function() { return WuttaGridData }
+             Vue.component('wutta-grid', WuttaGrid)
+           </script>
+
+        The actual output may depend on various grid attributes, in
+        particular :attr:`vue_tagname`.
+        """
+        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 get_vue_columns(self):
         """
         Returns a list of Vue-compatible column definitions.

src/wuttaweb/templates/form.mako

@@ -3,7 +3,9 @@
 
 <%def name="page_content()">
   <div style="margin-top: 2rem; width: 50%;">
+    % if form is not Undefined:
         ${form.render_vue_tag()}
+    % endif
   </div>
 </%def>
 
@@ -17,10 +19,7 @@
 <%def name="finalize_this_page_vars()">
   ${parent.finalize_this_page_vars()}
   % if form is not Undefined:
-      <script>
+      ${form.render_vue_finalize()}
-        ${form.vue_component}.data = function() { return ${form.vue_component}Data }
-        Vue.component('${form.vue_tagname}', ${form.vue_component})
-      </script>
   % endif
 </%def>
 

src/wuttaweb/templates/grids/vue_template.mako

@@ -37,7 +37,7 @@
               ## paging
               % if grid.paginated:
                   paginated
-                  pagination-size="is-small"
+                  pagination-size="${'small' if request.use_oruga else 'is-small'}"
                   :per-page="perPage"
                   :current-page="currentPage"
                   @page-change="onPageChange"

src/wuttaweb/templates/master/index.mako

@@ -22,10 +22,7 @@
 <%def name="finalize_this_page_vars()">
   ${parent.finalize_this_page_vars()}
   % if grid is not Undefined:
-      <script>
+      ${grid.render_vue_finalize()}
-        ${grid.vue_component}.data = function() { return ${grid.vue_component}Data }
-        Vue.component('${grid.vue_tagname}', ${grid.vue_component})
-      </script>
   % endif
 </%def>
 

tests/forms/test_base.py

@@ -405,6 +405,12 @@ class TestForm(TestCase):
         self.assertIn('<script type="text/x-template" id="wutta-form-template">', html)
         self.assertNotIn('@submit', html)
 
+    def test_render_vue_finalize(self):
+        form = self.make_form()
+        html = form.render_vue_finalize()
+        self.assertIn('<script>', html)
+        self.assertIn("Vue.component('wutta-form', WuttaForm)", html)
+
     def test_render_vue_field(self):
         self.pyramid_config.include('pyramid_deform')
         schema = self.make_schema()

tests/grids/test_base.py

@@ -855,6 +855,12 @@ class TestGrid(WebTestCase):
         html = grid.render_vue_template()
         self.assertIn('<script type="text/x-template" id="wutta-grid-template">', html)
 
+    def test_render_vue_finalize(self):
+        grid = self.make_grid()
+        html = grid.render_vue_finalize()
+        self.assertIn('<script>', html)
+        self.assertIn("Vue.component('wutta-grid', WuttaGrid)", html)
+
     def test_get_vue_columns(self):
 
         # error if no columns are set