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>

src/views/Models.vue

@@ -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="primary" @click="actionInfo(data)">
-          <b-button class="mx-1" size="sm" variant="danger" @click="actionDelete(data)"><b-icon icon="trash"/></b-button>
+            <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() {