Implemented model delete

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="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() {