byjove/src/components/model-index/ByjoveModelIndex.vue

<template>
  <div class="model-index" :class="getModelSlug()">

    <nav class="breadcrumb" aria-label="breadcrumbs">
      <ul>
        <li>{{ getModelIndexTitle() }}</li>
      </ul>
    </nav>

    <b-button v-if="allowCreate && hasModelPerm('create')"
              class="new-object"
              type="is-primary"
              tag="router-link"
              :to="getModelPathPrefix() + '/new'">
      New {{ getModelTitle() }}
    </b-button>

    <slot></slot>

    <b-menu>
      <b-menu-list>
        <b-menu-item v-for="obj in data.data"
                     :key="obj.uuid"
                     :label="renderLabel(obj)"
                     :tag="hasModelPerm('view') ? 'router-link' : 'a'"
                     :to="getModelPathPrefix() + '/' + obj.uuid">
        </b-menu-item>
      </b-menu-list>
    </b-menu>

    <b-pagination v-if="paginated"
                  :total="data.total"
                  :current.sync="page"
                  :per-page="perPage"
                  @change="changePagination"
                  >
                  <!-- icon-pack="fas" -->
    </b-pagination>

  </div>
</template>

<script>
export default {
    name: 'ByjoveModelIndex',
    props: {
        modelName: String,
        modelSlug: String,
        modelTitle: String,
        modelTitlePlural: String,
        modelIndexTitle: String,
        modelPermissionPrefix: String,
        modelPathPrefix: String,
        labelRenderer: Function,
        apiIndexUrl: String,
        apiIndexSort: Object,
        apiIndexFilters: Array,
        allowCreate: {
            type: Boolean,
            default: true,
        },
        paginated: {
            type: Boolean,
            default: true,
        },
        perPage: {
            type: Number,
            default: 20,
        },
    },
    data: function() {
        return {
            data: {},
            page: 1,
        }
    },
    mounted() {
        this.fetchData()
    },
    watch: {
        'apiIndexFilters' (to, from) {
            this.fetchData()
        },
    },
    methods: {

        changePagination(value) {
            this.fetchData()
        },

        fetchData() {
            let params = {
                filters: JSON.stringify(this.apiIndexFilters),
                orderBy: this.apiIndexSort.field,
                ascending: (this.apiIndexSort.dir == 'asc') ? 1 : 0,
            }
            if (this.paginated) {
                params.per_page = this.perPage
                params.page = this.page || 1
            }
            this.$http.get(this.getApiIndexUrl(), {params: params}).then(response => {
                this.data = response.data

            }, response => {
                if (response.status == 403) { // forbidden; redirect to home page
                    this.$buefy.toast.open({
                        message: "You do not have permission to access that page.",
                        type: 'is-danger',
                        position: 'is-bottom',
                    })
                    this.$router.push('/')
                } else {
                    this.$buefy.toast.open({
                        message: "Failed to fetch page data!",
                        type: 'is-danger',
                        position: 'is-bottom',
                    })
                }
            })
        },

        getModelSlug() {
            if (this.modelSlug) {
                return this.modelSlug
            }
            return this.modelName.toLowerCase() + 's'
        },

        getModelTitle() {
            if (this.modelTitle) {
                return this.modelTitle
            }
            return this.modelName
        },

        getModelTitlePlural() {
            if (this.modelTitlePlural) {
                return this.modelTitlePlural
            }
            return this.getModelTitle() + 's'
        },

        getModelIndexTitle() {
            if (this.modelIndexTitle) {
                return this.modelIndexTitle
            }
            return this.getModelTitlePlural()
        },

        getModelPathPrefix() {
            if (this.modelPathPrefix) {
                return this.modelPathPrefix
            }
            return '/' + this.getModelSlug()
        },

        getApiIndexUrl() {
            if (this.apiIndexUrl) {
                return this.apiIndexUrl
            }
            return '/api/' + this.getModelSlug()
        },

        getModelPermissionPrefix() {
            if (this.modelPermissionPrefix) {
                return this.modelPermissionPrefix
            }
            return this.getModelSlug()
        },

        hasModelPerm(perm) {

            // do normal check, but first add prefix
            let prefix = this.getModelPermissionPrefix()
            return this.$hasPerm(prefix + '.' + perm)
        },

        renderLabel(obj) {
            if (this.labelRenderer) {
                return this.labelRenderer(obj)
            }
            return obj._str
        },
    },
}
</script>

<style>
.new-object {
    margin-bottom: 0.5rem;
}
</style>