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