Add support for "row status" in Buefy grid tables

tailbone/grids/core.py

@@ -1027,6 +1027,7 @@ class Grid(object):
         # filter / sort / paginate to get "visible" data
         raw_data = self.make_visible_data()
         data = []
+        status_map = {}
 
         # iterate over data rows
         for i in range(len(raw_data)):
@@ -1049,10 +1050,15 @@ class Grid(object):
             # set action URL(s) for row, as needed
             self.set_action_urls(row, rowobj, i)
 
+            status = self.extra_row_class(rowobj, i)
+            if status:
+                status_map[i] = status
+
             data.append(row)
 
         results = {
             'data': data,
+            'row_status_map': status_map,
         }
 
         if self.pageable and self.pager is not None:

tailbone/static/themes/falafel/css/grids.rowstatus.css

@@ -0,0 +1,14 @@
+
+/********************************************************************************
+ * grids.rowstatus.css
+ *
+ * Add "row status" styles for Buefy grid tables.
+ ********************************************************************************/
+
+tr.warning {
+    background-color: #fcc;
+}
+
+tr.notice {
+    background-color: #fe8;
+}

tailbone/templates/grids/buefy.mako

@@ -5,6 +5,7 @@
      :data="data"
      :columns="columns"
      :loading="loading"
+     :row-class="getRowClass"
 
      :default-sort="[sortField, sortOrder]"
      backend-sorting
@@ -21,7 +22,8 @@
 
      ## TODO: should let grid (or master view) decide how to set these?
      icon-pack="fas"
-     :striped="true"
+     ## note that :striped="true" was interfering with row status (e.g. warning) styles
+     :striped="false"
      :hoverable="true"
      :narrowed="true">
 
@@ -81,6 +83,7 @@
               loading: false,
               sortField: '${grid.sortkey}',
               sortOrder: '${grid.sortdir}',
+              rowStatusMap: ${json.dumps(grid_data['row_status_map'])|n},
               % if grid.pageable:
               % if static_data:
               total: ${len(grid_data['data'])},
@@ -96,6 +99,10 @@
       },
       methods: {
 
+          getRowClass(row, index) {
+              return this.rowStatusMap[index]
+          },
+
           loadAsyncData() {
 
               const params = [
@@ -109,6 +116,7 @@
               this.loading = true
               this.$http.get(`${request.current_route_url(_query=None)}?${'$'}{params}`).then(({ data }) => {
                   this.data = data.data
+                  this.rowStatusMap = data.row_status_map
                   this.total = data.total_items
                   this.firstItem = data.first_item
                   this.lastItem = data.last_item

tailbone/templates/themes/falafel/base.mako

@@ -324,6 +324,7 @@
   ${h.stylesheet_link(request.static_url('tailbone:static/themes/bobcat/css/base.css') + '?ver={}'.format(tailbone.__version__))}
   ${h.stylesheet_link(request.static_url('tailbone:static/themes/falafel/css/layout.css') + '?ver={}'.format(tailbone.__version__))}
   ${h.stylesheet_link(request.static_url('tailbone:static/css/grids.css') + '?ver={}'.format(tailbone.__version__))}
+  ${h.stylesheet_link(request.static_url('tailbone:static/themes/falafel/css/grids.rowstatus.css') + '?ver={}'.format(tailbone.__version__))}
 ##   ${h.stylesheet_link(request.static_url('tailbone:static/css/filters.css') + '?ver={}'.format(tailbone.__version__))}
   ${h.stylesheet_link(request.static_url('tailbone:static/themes/bobcat/css/forms.css') + '?ver={}'.format(tailbone.__version__))}
   ${h.stylesheet_link(request.static_url('tailbone:static/css/diffs.css') + '?ver={}'.format(tailbone.__version__))}