Let each grid component have a custom name, if needed

tailbone/templates/grids/buefy.mako

@@ -85,7 +85,7 @@
 
 </script>
 
-<script type="text/x-template" id="tailbone-grid-template">
+<script type="text/x-template" id="${grid.component}-template">
   <div>
 
     <div style="display: flex; justify-content: space-between; margin-bottom: 0.5em;">
@@ -236,14 +236,14 @@
 
 <script type="text/javascript">
 
-  let TailboneGridCurrentData = ${json.dumps(grid_data['data'])|n}
+  let ${grid.component_studly}CurrentData = ${json.dumps(grid_data['data'])|n}
 
-  let TailboneGridData = {
+  let ${grid.component_studly}Data = {
       loading: false,
       selectedFilter: null,
       ajaxDataUrl: ${json.dumps(grid.ajax_data_url)|n},
 
-      data: TailboneGridCurrentData,
+      data: ${grid.component_studly}CurrentData,
       rowStatusMap: ${json.dumps(grid_data['row_status_map'])|n},
 
       checkable: ${json.dumps(grid.checkboxes)|n},
@@ -267,4 +267,179 @@
       selectedFilter: null,
   }
 
+  let ${grid.component_studly} = {
+      template: '#${grid.component}-template',
+
+      props: {
+          csrftoken: String,
+      },
+
+      computed: {
+          // note, can use this with v-model for hidden 'uuids' fields
+          selected_uuids: function() {
+              return this.checkedRowUUIDs().join(',')
+          },
+      },
+
+      methods: {
+
+          getRowClass(row, index) {
+              return this.rowStatusMap[index]
+          },
+
+          loadAsyncData(params, callback) {
+
+              if (params === undefined || params === null) {
+                  params = [
+                      'partial=true',
+                      `sortkey=${'$'}{this.sortField}`,
+                      `sortdir=${'$'}{this.sortOrder}`,
+                      `pagesize=${'$'}{this.perPage}`,
+                      `page=${'$'}{this.page}`
+                  ].join('&')
+              }
+
+              this.loading = true
+              this.$http.get(`${'$'}{this.ajaxDataUrl}?${'$'}{params}`).then(({ data }) => {
+                  ${grid.component_studly}CurrentData = data.data
+                  this.data = ${grid.component_studly}CurrentData
+                  this.rowStatusMap = data.row_status_map
+                  this.total = data.total_items
+                  this.firstItem = data.first_item
+                  this.lastItem = data.last_item
+                  this.loading = false
+                  this.checkedRows = this.locateCheckedRows(data.checked_rows)
+                  if (callback) {
+                      callback()
+                  }
+              })
+              .catch((error) => {
+                  this.data = []
+                  this.total = 0
+                  this.loading = false
+                  throw error
+              })
+          },
+
+          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()
+          },
+
+          onSort(field, order) {
+              this.sortField = field
+              this.sortOrder = order
+              // always reset to first page when changing sort options
+              // TODO: i mean..right? would we ever not want that?
+              this.page = 1
+              this.loadAsyncData()
+          },
+
+          resetView() {
+              this.loading = true
+              location.href = '?reset-to-default-filters=true'
+          },
+
+          addFilter(filter_key) {
+
+              // reset dropdown so user again sees "Add Filter" placeholder
+              this.$nextTick(function() {
+                  this.selectedFilter = null
+              })
+
+              // show corresponding grid filter
+              this.filters[filter_key].visible = true
+              this.filters[filter_key].active = true
+
+              // track down the component
+              var gridFilter = null
+              for (var gf of this.$refs.gridFilters) {
+                  if (gf.filter.key == filter_key) {
+                      gridFilter = gf
+                      break
+                  }
+              }
+
+              // tell component to focus the value field, ASAP
+              this.$nextTick(function() {
+                  gridFilter.focusValue()
+              })
+
+          },
+
+          applyFilters(params) {
+              if (params === undefined) {
+                  params = []
+              }
+
+              params.push('partial=true')
+              params.push('filter=true')
+
+              for (var key in this.filters) {
+                  var filter = this.filters[key]
+                  if (filter.active) {
+                      params.push(key + '=' + encodeURIComponent(filter.value))
+                      params.push(key + '.verb=' + encodeURIComponent(filter.verb))
+                  } else {
+                      filter.visible = false
+                  }
+              }
+
+              this.loadAsyncData(params.join('&'))
+          },
+
+          clearFilters() {
+
+              // explicitly deactivate all filters
+              for (var key in this.filters) {
+                  this.filters[key].active = false
+              }
+
+              // then just "apply" as normal
+              this.applyFilters()
+          },
+
+          saveDefaults() {
+
+              // apply current filters as normal, but add special directive
+              const params = ['save-current-filters-as-defaults=true']
+              this.applyFilters(params)
+          },
+
+          deleteObject(event) {
+              // we let parent component/app deal with this, in whatever way makes sense...
+              // TODO: should we ever provide anything besides the URL for this?
+              this.$emit('deleteActionClicked', event.target.href)
+          },
+
+          checkedRowUUIDs() {
+              let uuids = []
+              for (let row of this.$data.checkedRows) {
+                  uuids.push(row.uuid)
+              }
+              return uuids
+          },
+
+          allRowUUIDs() {
+              let uuids = []
+              for (let row of this.data) {
+                  uuids.push(row.uuid)
+              }
+              return uuids
+          },
+      }
+  }
+
 </script>