Improve checkbox click handling support for grids

i.e. let custom use define click handlers

tailbone/grids/core.py

@@ -73,7 +73,8 @@ class Grid(object):
                  joiners={}, filterable=False, filters={}, use_byte_string_filters=False,
                  sortable=False, sorters={}, default_sortkey=None, default_sortdir='asc',
                  pageable=False, default_pagesize=20, default_page=1,
-                 checkboxes=False, checked=None, main_actions=[], more_actions=[], delete_speedbump=False,
+                 checkboxes=False, checked=None, check_handler=None, check_all_handler=None,
+                 main_actions=[], more_actions=[], delete_speedbump=False,
                  ajax_data_url=None,
                  **kwargs):
 
@@ -124,6 +125,9 @@ class Grid(object):
         self.checked = checked
         if self.checked is None:
             self.checked = lambda item: False
+        self.check_handler = check_handler
+        self.check_all_handler = check_all_handler
+
         self.main_actions = main_actions or []
         self.more_actions = more_actions or []
         self.delete_speedbump = delete_speedbump
@@ -1155,6 +1159,7 @@ class Grid(object):
         raw_data = self.make_visible_data()
         data = []
         status_map = {}
+        checked = []
 
         # iterate over data rows
         for i in range(len(raw_data)):
@@ -1197,6 +1202,11 @@ class Grid(object):
                 if status:
                     status_map[i] = status
 
+            # set checked flag if applicable
+            if self.checkboxes:
+                if self.checked(rowobj):
+                    checked.append(i)
+
             data.append(row)
 
         results = {
@@ -1204,6 +1214,13 @@ class Grid(object):
             'row_status_map': status_map,
         }
 
+        if self.checkboxes:
+            results['checked_rows'] = checked
+            # TODO: this seems a bit hacky, but is required for now to
+            # initialize things on the client side...
+            results['checked_rows_code'] = '[{}]'.format(
+                ', '.join(['TailboneGridCurrentData[{}]'.format(i) for i in checked]))
+
         if self.pageable and self.pager is not None:
             results['total_items'] = self.pager.item_count
             results['per_page'] = self.pager.items_per_page

tailbone/static/js/tailbone.buefy.grid.js

@@ -93,6 +93,10 @@ Vue.component('grid-filter', GridFilter)
 let TailboneGrid = {
     template: '#tailbone-grid-template',
 
+    props: {
+        csrftoken: String,
+    },
+
     computed: {
         // note, can use this with v-model for hidden 'uuids' fields
         selected_uuids: function() {
@@ -120,14 +124,14 @@ let TailboneGrid = {
 
             this.loading = true
             this.$http.get(`${this.ajaxDataUrl}?${params}`).then(({ data }) => {
-                this.data = data.data
+                TailboneGridCurrentData = data.data
+                this.data = TailboneGridCurrentData
                 this.rowStatusMap = data.row_status_map
                 this.total = data.total_items
                 this.firstItem = data.first_item
                 this.lastItem = data.last_item
                 this.loading = false
-                // TODO: should "merge" checked results from server?
-                this.checkedRows = []
+                this.checkedRows = this.locateCheckedRows(data.checked_rows)
             })
             .catch((error) => {
                 this.data = []
@@ -137,6 +141,18 @@ let TailboneGrid = {
             })
         },
 
+        locateCheckedRows(checked) {
+            let rows = []
+            if (checked) {
+                for (let i = 0; i < this.data.length; i++) {
+                    if (checked.includes(i)) {
+                        rows.push(this.data[i])
+                    }
+                }
+            }
+            return rows
+        },
+
         onPageChange(page) {
             this.page = page
             this.loadAsyncData()
@@ -244,6 +260,14 @@ let TailboneGrid = {
                 uuids.push(row.uuid)
             }
             return uuids
+        },
+
+        allRowUUIDs() {
+            let uuids = []
+            for (let row of this.data) {
+                uuids.push(row.uuid)
             }
+            return uuids
+        },
     }
 }

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

@@ -5,10 +5,45 @@
  * Add "row status" styles for Buefy grid tables.
  ********************************************************************************/
 
+/**************************************************
+ * grid rows with "warning" status
+ **************************************************/
+
 tr.warning {
     background-color: #fcc;
 }
 
+
+/**************************************************
+ * grid rows with "notice" status
+ **************************************************/
+
 tr.notice {
     background-color: #fe8;
 }
+
+
+/**************************************************
+ * grid rows which are "checked" (selected)
+ **************************************************/
+
+/* TODO: this references some color values, whereas it would be preferable
+ * to refer to some sort of "state" instead, color of which was
+ * configurable.  b/c these are just the default Buefy theme colors. */
+
+tr.is-checked {
+    background-color: #7957d5;
+    color: white;
+}
+
+tr.is-checked:hover {
+    color: #363636;
+}
+
+tr.is-checked a {
+    color: white;
+}
+
+tr.is-checked:hover a {
+    color: #7957d5;
+}

tailbone/templates/grids/buefy.mako

@@ -131,7 +131,15 @@
        :row-class="getRowClass"
 
        :checkable="checkable"
+       % if grid.checkboxes:
        :checked-rows.sync="checkedRows"
+       % endif
+       % if grid.check_handler:
+       @check="${grid.check_handler}"
+       % endif
+       % if grid.check_all_handler:
+       @check-all="${grid.check_all_handler}"
+       % endif
        ## TODO: definitely will be wanting this...
        ## :is-row-checkable=""
 
@@ -228,18 +236,20 @@
 
 <script type="text/javascript">
 
+  let TailboneGridCurrentData = ${json.dumps(grid_data['data'])|n}
+
   let TailboneGridData = {
       loading: false,
-      checkedRows: [],
       selectedFilter: null,
       ajaxDataUrl: ${json.dumps(grid.ajax_data_url)|n},
 
-      data: ${json.dumps(grid_data['data'])|n},
+      data: TailboneGridCurrentData,
       rowStatusMap: ${json.dumps(grid_data['row_status_map'])|n},
 
       checkable: ${json.dumps(grid.checkboxes)|n},
-      ## TODO: should be dumping json from server here?
-      ## checkedRows: [],
+      % if grid.checkboxes:
+      checkedRows: ${grid_data['checked_rows_code']|n},
+      % endif
 
       paginated: ${json.dumps(grid.pageable)|n},
       total: ${len(grid_data['data']) if static_data else grid_data['total_items']},

tailbone/templates/master/index.mako

@@ -253,7 +253,7 @@
 </%def>
 
 <%def name="page_content()">
-  <tailbone-grid
+  <tailbone-grid :csrftoken="csrftoken"
      % if master.deletable and request.has_perm('{}.delete'.format(permission_prefix)) and master.delete_confirm == 'simple':
      @deleteActionClicked="deleteObject"
      % endif