birbcontrol/src/views/Models.vue

<template>
  <div>
    <b-row>
      <b-col class="my-2 text-right">
        <b-button @click="updateModelList" variant="primary" :disabled="actionPending">Update</b-button>
      </b-col>
    </b-row>
    <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>
          </template>

          <template #table-busy>
            <div class="text-center my-2">
              <b-spinner class="align-middle mx-2"/>
              <strong>Loading...</strong>
            </div>
          </template>

        </b-table>
      </b-col>
    </b-row>
  </div>
</template>

<script>
import ModelModalInfo from "@/components/ModelModalInfo";

export default {
  name: "Models",
  components: {
    ModelModalInfo
  },
  data() {
    return {
      actionPending: false,
      models: [],
      fields: [
        {
          key: 'type',
          sortable: true
        },
        {
          key: 'id',
          sortable: true
        },
        "actions"
      ],
      infoModal: {
        id: "",
        type: "",
        show: false
      },
      confirmModal: {
        id: "",
        type: ""
      }
    }
  },
  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'
    },
    actionDelete({item}) {
      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}) {
      this.infoModal.id = item.id
      this.infoModal.type = item.type
      this.infoModal.show = true
    }
  },
  mounted() {
    this.updateModelList()
  }

}
</script>

<style scoped>

</style>