birbcontrol/src/views/Models.vue

<template>
  <b-row>
    <b-col>
      <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.id)"><b-icon icon="info"/></b-button>
          <b-button class="mx-1" size="sm" variant="danger" @click="actionDelete(data.id)"><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>
</template>

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

}
</script>

<style scoped>

</style>