Get status dynamically in Books

frontend/src/components/Books.vue

@@ -36,6 +36,10 @@
         Refresh
       </button>
 
+      <pre>
+        {{allStatus}}
+      </pre>
+
       <form id="search">
         <div class="ui icon input">
           <input placeholder="Search for anything..." type="text" v-model="searchQuery">
@@ -106,10 +110,12 @@ export default {
       loading: false,
       paginate: ['books'],
       error: '',
-      success: ''
+      success: '',
+      allStatus: []
     }
   },
   created () {
+    this.loadStatus()
     this.loadBooks()
   },
   watch: {
@@ -163,6 +169,11 @@ export default {
                 this.books[i].Author += ', '
               }
             }
+
+            // Make Status a name, not an id
+            this.books[i].Status = this.getStatusByID(this.books[i].Status)
+
+            // increment dat shit
             i++
           }
           this.loading = false
@@ -172,6 +183,23 @@ export default {
           this.error = e
         })
     },
+    loadStatus: function () {
+      HTTP.get('status')
+        .then(response => {
+          this.allStatus = response.data
+        })
+        .catch(e => {
+          this.error = e
+        })
+    },
+    getStatusByID: function (id) {
+      for (const i in this.allStatus) {
+        if (this.allStatus[i].ID === id) {
+          return this.allStatus[i].Name
+        }
+      }
+      return ''
+    },
     gridBtnClicked (opt, gridObject) {
       opt.action(gridObject)
     },