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

const GridFilter = {
    template: '#grid-filter-template',
    props: {
        filter: Object
    },

    methods: {

        changeVerb() {
            // set focus to value input, "as quickly as we can"
            this.$nextTick(function() {
                this.focusValue()
            })
        },

        focusValue: function() {
            this.$refs.valueInput.focus()
            // this.$refs.valueInput.select()
        }
    }
}

Vue.component('grid-filter', GridFilter)


let TailboneGrid = {
    template: '#tailbone-grid-template',

    methods: {

        getRowClass(row, index) {
            return this.rowStatusMap[index]
        },

        loadAsyncData(params) {

            if (params === undefined) {
                params = [
                    'partial=true',
                    `sortkey=${this.sortField}`,
                    `sortdir=${this.sortOrder}`,
                    `pagesize=${this.perPage}`,
                    `page=${this.page}`
                ].join('&')
            }

            this.loading = true
            this.$http.get(`?${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
                this.loading = false
            })
            .catch((error) => {
                this.data = []
                this.total = 0
                this.loading = false
                throw error
            })
        },

        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)
        },

        deleteResults(event) {

            // submit form if user confirms
            // TODO: how/where to get/show "plural model title" here?
            // if (confirm("You are about to delete " + this.total + " ${grid.model_title_plural}.\n\nAre you sure?")) {
            if (confirm("You are about to delete " + this.total + " objects.\n\nAre you sure?")) {
                event.target.form.submit()
            }
        },

        checkedRowUUIDs() {
            var uuids = [];
            for (var row of this.$data.checkedRows) {
                uuids.push(row.uuid)
            }
            return uuids
        }
    }
}