fix: improve grid display when data is empty

src/wuttaweb/grids/base.py

@@ -594,6 +594,14 @@ class Grid:
 
         This method is called by :meth:`get_visible_data()`.
         """
+        # nb. empty data should never have a page number > 1
+        if not data:
+            self.page = 1
+            # nb. must also update user session if applicable
+            key = f'grid.{self.key}.page'
+            if key in self.request.session:
+                self.request.session[key] = self.page
+
         pager = paginate.Page(data,
                               items_per_page=self.pagesize,
                               page=self.page)

src/wuttaweb/templates/grids/vue_template.mako

@@ -51,11 +51,27 @@
         </${b}-table-column>
     % endif
 
+    <template #empty>
+      <section class="section">
+        <div class="content has-text-grey has-text-centered">
+          <p>
+            <b-icon
+               pack="fas"
+               icon="sad-tear"
+               size="is-large">
+            </b-icon>
+          </p>
+          <p>Nothing here.</p>
+        </div>
+      </section>
+    </template>
+
     % if grid.paginated:
         <template #footer>
           <div style="display: flex; justify-content: space-between;">
             <div></div>
-            <div style="display: flex; gap: 0.5rem; align-items: center;">
+            <div v-if="pagerStats.first_item"
+                 style="display: flex; gap: 0.5rem; align-items: center;">
               <span>
                 showing
                 {{ renderNumber(pagerStats.first_item) }}
@@ -109,13 +125,14 @@
           % if not grid.paginate_on_backend:
 
               pagerStats() {
+                  const data = this.data
                   let last = this.currentPage * this.perPage
                   let first = last - this.perPage + 1
-                  if (last > this.data.length) {
-                      last = this.data.length
+                  if (last > data.length) {
+                      last = data.length
                   }
                   return {
-                      'item_count': this.data.length,
+                      'item_count': data.length,
                       'items_per_page': this.perPage,
                       'page': this.currentPage,
                       'first_item': first,
@@ -156,8 +173,6 @@
 
               this.loading = true
               this.$http.get(`${request.path_url}?${'$'}{params}`).then(response => {
-                  console.log(response)
-                  console.log(response.data)
                   if (!response.data.error) {
                       ${grid.vue_component}CurrentData = response.data.data
                       this.data = ${grid.vue_component}CurrentData

src/wuttaweb/views/people.py

@@ -67,6 +67,12 @@ class PersonView(MasterView):
         # full_name
         g.set_link('full_name')
 
+        # first_name
+        g.set_link('first_name')
+
+        # last_name
+        g.set_link('last_name')
+
     # TODO: master should handle this?
     def configure_form(self, f):
         """ """

tests/grids/test_base.py

@@ -264,6 +264,17 @@ class TestGrid(WebTestCase):
         pager = grid.paginate_data([])
         self.assertIsInstance(pager, Page)
 
+        # page is reset to 1 for empty data
+        self.request.session['grid.foo.page'] = 2
+        grid = self.make_grid(key='foo', paginated=True, paginate_on_backend=True)
+        grid.load_settings()
+        self.assertEqual(grid.page, 2)
+        self.assertEqual(self.request.session['grid.foo.page'], 2)
+        pager = grid.paginate_data([])
+        self.assertEqual(pager.page, 1)
+        self.assertEqual(grid.page, 1)
+        self.assertEqual(self.request.session['grid.foo.page'], 1)
+
     ##############################
     # rendering methods
     ##############################