birbcontrol/src/views/Models.vue

81 lines
1.9 KiB
Vue
Raw Normal View History

2021-08-09 16:15:55 +02:00
<template>
2021-08-09 17:42:08 +02:00
<b-row>
<b-col>
<b-table striped hover :items="models" :fields="fields" :tbody-tr-class="rowClass" :busy="actionPending">
2021-08-09 17:45:45 +02:00
<!-- A virtual column -->
2021-08-09 17:42:08 +02:00
<template #cell(actions)="data">
<b-button class="mx-1" size="sm" variant="primary" @click="actionInfo(data.id)"><b-icon icon="info"/></b-button>
<b-button class="mx-1" size="sm" variant="danger" @click="actionDelete(data.id)"><b-icon icon="trash"/></b-button>
</template>
2021-08-09 17:45:45 +02:00
<template #table-busy>
<div class="text-center my-2">
<b-spinner class="align-middle mx-2"/>
<strong>Loading...</strong>
</div>
</template>
2021-08-09 17:42:08 +02:00
</b-table>
</b-col>
</b-row>
2021-08-09 16:15:55 +02:00
</template>
<script>
export default {
2021-08-09 17:42:08 +02:00
name: "Models",
data() {
return {
actionPending: false,
models: [],
fields: [
{
key: 'type',
sortable: true
},
{
key: 'id',
sortable: true
},
"actions"
]
}
},
methods: {
updateModelList() {
return new Promise((resolve, reject) => {
this.actionPending = true
this.$api.get("/model").then(({data}) => {
this.models = data
this.actionPending = false
resolve()
}).catch((error) => {
if (!error.response) {
// network error happened
this.$showToast("Some network error happened.\nCheck logs!")
} else {
// server returned bruh moment
this.$showToast(`The server returned error: ${error.response.status} ${error.response.statusText}\n${error.response.data}`)
}
this.actionPending = false
reject()
})
});
},
rowClass(item, type) {
if (!item || type !== 'row') return
if (item.default) return 'table-info'
}
},
mounted() {
this.updateModelList()
}
2021-08-09 16:15:55 +02:00
}
</script>
<style scoped>
</style>