Add support for "row status" in Buefy grid tables

This commit is contained in:
Lance Edgar 2019-03-28 23:09:10 -05:00
parent 24547b4fc5
commit 05b8ed7153
4 changed files with 30 additions and 1 deletions

View file

@ -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:

View file

@ -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;
}

View file

@ -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

View file

@ -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__))}