Implemented model delete

src/components/ModelModalInfo.vue

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