Added the ability to add buttons to the table

frontend/src/components/Books.vue

@@ -18,6 +18,12 @@
     </div>
 
     <div v-if="!loading">
+
+      <router-link to="/books/add" class="ui green labeled icon button" style="float: right;">
+        <i class="plus icon"></i>
+        Add a book
+      </router-link>
+
       <form id="search">
         <div class="ui icon input">
           <input placeholder="Search for anything..." type="text" v-model="searchQuery">
@@ -27,12 +33,14 @@
       <paginate
         name="books"
         :list="filteredData"
-        :per="25"
+        :per="35"
         tag="div"
       >
         <grid
           :data="paginated('books')"
           :columns="gridColumns"
+          :buttons="gridButtons"
+          :btnclick="gridBtnClicked"
         >
         </grid>
       </paginate>
@@ -69,6 +77,20 @@ export default {
       books: [],
       searchQuery: '',
       gridColumns: ['Title', 'ISBN', 'Year', 'Price', 'Author', 'Publisher', 'Status'],
+      gridButtons: [
+        {
+          text: 'Delete',
+          icon: 'trash',
+          action: this.deleteBook,
+          css: 'ui red icon button'
+        },
+        {
+          text: '',
+          icon: 'edit',
+          action: this.editBook,
+          css: 'ui blue icon button'
+        }
+      ],
       loading: false,
       paginate: ['books'],
       error: ''
@@ -106,8 +128,9 @@ export default {
           // Loop throught the data we got from our API and prepare an array to display all books
           for (const b in bs) {
             this.books[i] = {
-              Title: bs[b].Title,
-              ISBN: bs[b].Isbn,
+              ID: {content: bs[b].ID, hide: true}, // Don't show the ID
+              Title: {content: bs[b].Title, link: '/book/' + bs[b].ID}, // Add a link to the element
+              ISBN: {content: bs[b].Isbn}, // We can also just use the content column
               Year: bs[b].Year,
               Price: bs[b].Price + '€',
               Author: '',
@@ -131,6 +154,15 @@ export default {
           console.log(e)
           this.error = e
         })
+    },
+    gridBtnClicked (opt, gridObject) {
+      opt.action(gridObject)
+    },
+    deleteBook (obj) {
+      console.log(obj.ID.content, 'delete')
+    },
+    editBook (id) {
+      console.log(id, 'edit')
     }
   }
 }

frontend/src/components/Grid.vue

@@ -9,12 +9,31 @@
             
           <icon :name="sortOrders[key] > 0 ? 'sort-asc' : 'sort-desc'"></icon>
         </th>
+        <th v-if="buttons">Action</th>
       </tr>
     </thead>
     <tbody>
       <tr v-for="entry in filteredData">
-        <td v-for="key in columns">
-          {{entry[key]}}
+        <td v-for="key in columns" v-if="!entry[key].hide">
+          <template v-if="entry[key].content">
+            <template v-if="entry[key].link">
+              <router-link v-bind:to="entry[key].link">{{entry[key].content}}</router-link>
+            </template>
+            <template v-else>
+              {{entry[key].content}}
+            </template>
+          </template>
+          <template v-else>
+            {{entry[key]}}
+          </template>
+        </td>
+        <td v-if="buttons">
+          <span v-for="btn in buttons">
+            <button v-bind:class="btn.css" @click="btnclick(btn, entry)">
+              <i v-if="btn.icon" :class="btn.icon" class="icon"></i>
+              <span v-if="btn.text">{{ btn.text }}</span>
+            </button>
+          </span>
         </td>
       </tr>
     </tbody>
@@ -30,7 +49,10 @@
     props: {
       data: Array,
       columns: Array,
-      filterKey: String
+      filterKey: String,
+      buttons: Array,
+      context: Object,
+      btnclick: Function
     },
     data: function () {
       var sortOrders = {}