fix: fix misc. errors in grid template per wuttaweb

tailbone/templates/grids/complete.mako

@@ -107,13 +107,17 @@
        @cellclick="cellClick"
        % endif
 
+       ## paging
        % if grid.paginated:
-       :paginated="paginated"
+           paginated
-       :per-page="perPage"
+           pagination-size="is-small"
-       :current-page="currentPage"
+           :per-page="perPage"
-       backend-pagination
+           :current-page="currentPage"
-       :total="total"
+           @page-change="onPageChange"
-       @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?
@@ -206,12 +210,13 @@
           % endif
 
           % if grid.paginated:
-              <div v-if="firstItem"
+              <div v-if="pagerStats.first_item"
                    style="display: flex; gap: 0.5rem; align-items: center;">
                 <span>
                   showing
-                  {{ firstItem.toLocaleString('en') }} - {{ lastItem.toLocaleString('en') }}
+                  {{ renderNumber(pagerStats.first_item) }}
-                  of {{ total.toLocaleString('en') }} results;
+                  - {{ renderNumber(pagerStats.last_item) }}
+                  of {{ renderNumber(pagerStats.item_count) }} results;
                 </span>
                 <b-select v-model="perPage"
                           size="is-small"
@@ -257,13 +262,14 @@
       checkedRows: ${grid_data['checked_rows_code']|n},
       % endif
 
+      ## paging
       % if grid.paginated:
-      paginated: ${json.dumps(grid.paginated)|n},
+          pageSizeOptions: ${json.dumps(grid.pagesize_options)|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)|n},
-      perPage: ${json.dumps(grid.pagesize if grid.paginated else None)|n},
+          currentPage: ${json.dumps(grid.page)|n},
-      currentPage: ${json.dumps(grid.page if grid.paginated else None)|n},
+          % if grid.paginate_on_backend:
-      firstItem: ${json.dumps(grid_data['first_item'] if grid.paginated else None)|n},
+              pagerStats: ${json.dumps(grid.get_vue_pager_stats())|n},
-      lastItem: ${json.dumps(grid_data['last_item'] if grid.paginated else None)|n},
+          % endif
       % endif
 
       % if getattr(grid, 'sortable', False):
@@ -311,6 +317,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
 
@@ -373,6 +405,12 @@
 
       methods: {
 
+          renderNumber(value) {
+              if (value != undefined) {
+                  return value.toLocaleString('en')
+              }
+          },
+
           formatAddFilterItem(filtr) {
               if (!filtr.key) {
                   filtr = this.filters[filtr]
@@ -486,23 +524,23 @@
               params = params.toString()
 
               this.loading = true
-              this.$http.get(`${'$'}{this.ajaxDataUrl}?${'$'}{params}`).then(({ data }) => {
+              this.$http.get(`${'$'}{this.ajaxDataUrl}?${'$'}{params}`).then(response => {
-                  if (!data.error) {
+                  if (!response.data.error) {
-                      ${grid.vue_component}CurrentData = data.data
+                      ${grid.vue_component}CurrentData = response.data.data.data
                       this.data = ${grid.vue_component}CurrentData
-                      this.rowStatusMap = data.row_status_map
+                      % if grid.paginated and grid.paginate_on_backend:
-                      this.total = data.total_items
+                          this.pagerStats = response.data.pager_stats
-                      this.firstItem = data.first_item
+                      % endif
-                      this.lastItem = data.last_item
+                      this.rowStatusMap = response.data.data.row_status_map
                       this.loading = false
                       this.savingDefaults = false
-                      this.checkedRows = this.locateCheckedRows(data.checked_rows)
+                      this.checkedRows = this.locateCheckedRows(response.data.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
                       })
@@ -514,8 +552,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) {

tailbone/views/master.py

@@ -346,7 +346,10 @@ class MasterView(View):
 
         # return grid data only, if partial page was requested
         if self.request.params.get('partial'):
-            return self.json_response(grid.get_table_data())
+            context = {'data': grid.get_table_data()}
+            if grid.paginated and grid.paginate_on_backend:
+                context['pager_stats'] = grid.get_vue_pager_stats()
+            return self.json_response(context)
 
         context = {
             'grid': grid,

tailbone/views/wutta/people.py

@@ -45,10 +45,6 @@ class PersonView(wutta.PersonView):
     model_class = Person
     Session = Session
 
-    # TODO: /grids/complete.mako is too aggressive for the
-    # limited support we have in wuttaweb thus far
-    paginated = False
-
     labels = {
         'display_name': "Full Name",
     }
@@ -91,12 +87,6 @@ class PersonView(wutta.PersonView):
         # display_name
         g.set_link('display_name')
 
-        # first_name
-        g.set_link('first_name')
-
-        # last_name
-        g.set_link('last_name')
-
         # merge_requested
         g.set_label('merge_requested', "MR")
         g.set_renderer('merge_requested', self.render_merge_requested)