Implemented model delete
This commit is contained in:
parent
ee438b8449
commit
4474c59e1e
|
|
@ -0,0 +1,144 @@
|
|||
<template>
|
||||
<b-modal id="modal-model-info" size="lg" scrollable centered :title="id" @show="updateInfo" @close="onClose" v-model="showModal">
|
||||
<div id="modal-model-info-content">
|
||||
|
||||
</div>
|
||||
|
||||
<template #modal-footer>
|
||||
|
||||
<b-button
|
||||
variant="success"
|
||||
class="float-right"
|
||||
size="sm"
|
||||
@click="onClickDownloadModel"
|
||||
>
|
||||
<b-icon icon="download"/>
|
||||
Download model
|
||||
</b-button>
|
||||
|
||||
<b-button
|
||||
variant="success"
|
||||
class="float-right"
|
||||
size="sm"
|
||||
@click="onClickDownloadExtra"
|
||||
>
|
||||
<b-icon icon="download"/>
|
||||
Download weights
|
||||
</b-button>
|
||||
|
||||
<b-button
|
||||
variant="warning"
|
||||
class="float-right"
|
||||
size="sm"
|
||||
:disabled="info.default"
|
||||
@click="onClickSetAsDefault"
|
||||
>
|
||||
<b-icon icon="pencil"/>
|
||||
Set as default SVM model
|
||||
</b-button>
|
||||
|
||||
<b-button
|
||||
variant="danger"
|
||||
class="float-right"
|
||||
size="sm"
|
||||
@click="onClickDelete"
|
||||
>
|
||||
<b-icon icon="trash"/>
|
||||
Delete
|
||||
</b-button>
|
||||
|
||||
<b-button
|
||||
variant="secondary"
|
||||
class="float-right"
|
||||
size="sm"
|
||||
@click="showModal=false"
|
||||
>
|
||||
<b-icon icon="door-closed"/>
|
||||
Close
|
||||
</b-button>
|
||||
|
||||
</template>
|
||||
</b-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ModelModalInfo",
|
||||
model: {
|
||||
prop: "show",
|
||||
event: "change"
|
||||
},
|
||||
props: {
|
||||
id: {
|
||||
type: String
|
||||
},
|
||||
type: {
|
||||
type: String
|
||||
},
|
||||
show: {
|
||||
default: false,
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
actionPending: false,
|
||||
info: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateInfo() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.actionPending = true
|
||||
this.$api.get(`/model/${this.type}/${this.id}`).then(({data}) => {
|
||||
this.info = 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()
|
||||
})
|
||||
});
|
||||
},
|
||||
onClose() {
|
||||
this.showModal = false;
|
||||
},
|
||||
onClickDownloadModel() {
|
||||
|
||||
},
|
||||
onClickDownloadExtra() {
|
||||
|
||||
},
|
||||
onClickSetAsDefault() {
|
||||
|
||||
},
|
||||
onClickDelete() {
|
||||
this.$emit("delete", {type: this.type, id: this.id})
|
||||
this.showModal = false;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showModal: {
|
||||
get() {
|
||||
return this.show
|
||||
},
|
||||
set(v) {
|
||||
this.$emit("change", v)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,12 +1,29 @@
|
|||
<template>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-modal id="delete-confirm-modal" @ok="performDelete(confirmModal.type, confirmModal.id)" title="Confirmation">
|
||||
<p>
|
||||
Are you sure you want to <b>delete</b> the following model?
|
||||
</p>
|
||||
<p>
|
||||
<b>type:</b> {{ confirmModal.type }}
|
||||
</p>
|
||||
<p>
|
||||
<b>id:</b> {{ confirmModal.id }}
|
||||
</p>
|
||||
</b-modal>
|
||||
<model-modal-info v-model="infoModal.show" :id="infoModal.id" :type="infoModal.type" @refresh="updateModelList"
|
||||
@delete="childActionDelete"/>
|
||||
<b-table striped hover :items="models" :fields="fields" :tbody-tr-class="rowClass" :busy="actionPending">
|
||||
|
||||
<!-- A virtual column -->
|
||||
<template #cell(actions)="data">
|
||||
<b-button class="mx-1" size="sm" variant="primary" @click="actionInfo(data)"><b-icon icon="info"/></b-button>
|
||||
<b-button class="mx-1" size="sm" variant="danger" @click="actionDelete(data)"><b-icon icon="trash"/></b-button>
|
||||
<b-button class="mx-1" size="sm" variant="primary" @click="actionInfo(data)">
|
||||
<b-icon icon="info"/>
|
||||
</b-button>
|
||||
<b-button class="mx-1" size="sm" variant="danger" @click="actionDelete(data)">
|
||||
<b-icon icon="trash"/>
|
||||
</b-button>
|
||||
</template>
|
||||
|
||||
<template #table-busy>
|
||||
|
|
@ -22,8 +39,13 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import ModelModalInfo from "@/components/ModelModalInfo";
|
||||
|
||||
export default {
|
||||
name: "Models",
|
||||
components: {
|
||||
ModelModalInfo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
actionPending: false,
|
||||
|
|
@ -37,8 +59,17 @@ export default {
|
|||
key: 'id',
|
||||
sortable: true
|
||||
},
|
||||
"actions"
|
||||
]
|
||||
"actions"
|
||||
],
|
||||
infoModal: {
|
||||
id: "",
|
||||
type: "",
|
||||
show: false
|
||||
},
|
||||
confirmModal: {
|
||||
id: "",
|
||||
type: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -69,10 +100,49 @@ export default {
|
|||
if (item.default) return 'table-info'
|
||||
},
|
||||
actionDelete({item}) {
|
||||
console.log(item.id);
|
||||
this.askDelete(item.type, item.id)
|
||||
},
|
||||
childActionDelete({type, id}) {
|
||||
this.askDelete(type, id)
|
||||
},
|
||||
askDelete(type, id) {
|
||||
this.confirmModal = {id, type}
|
||||
this.$bvModal.show("delete-confirm-modal")
|
||||
},
|
||||
performDelete(type, id) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.actionPending = true
|
||||
this.$api.delete(`/model/${type}/${id}`).then(() => { // this resets actionPending
|
||||
this.updateModelList().then(() => {
|
||||
this.$showToast("Model deleted.", "success")
|
||||
resolve()
|
||||
}, (error) => {
|
||||
if (!error.response) {
|
||||
this.$showToast("Some network error happened.\nCheck logs!")
|
||||
} else {
|
||||
this.$showToast(`The server returned error: ${error.response.status} ${error.response.statusText}\n${error.response.data}`)
|
||||
}
|
||||
reject()
|
||||
})
|
||||
}).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()
|
||||
})
|
||||
});
|
||||
},
|
||||
actionInfo({item}) {
|
||||
console.log(item.id);
|
||||
this.infoModal.id = item.id
|
||||
this.infoModal.type = item.type
|
||||
this.infoModal.show = true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue