Added authors overview

frontend/src/components/Authors.vue

@@ -0,0 +1,231 @@
+<template>
+  <div v-if="user.authenticated">
+    <h1>Authors overview</h1>
+
+    <div class="ui info message" v-if="loading">
+      <icon name="refresh" spin></icon>&nbsp;&nbsp;
+      Loading...
+    </div>
+
+    <div class="ui negative message" v-if="error">
+      <div class="header">
+        An error occured.
+      </div>
+      {{ error.message }}
+      <p v-if="error.response.data">
+      {{ error.response.data.Message }}
+      </p>
+    </div>
+
+    <div class="ui positive message" v-if="success">
+      <div class="header">
+        Success
+      </div>
+      {{ success }}
+    </div>
+
+    <div v-if="!loading && !error">
+
+      <router-link to="/authors/add" class="ui green labeled icon button" style="float: right;">
+        <i class="plus icon"></i>
+        Add a author
+      </router-link>
+
+      <button @click="loadauthors()" class="ui teal labeled icon button" style="float: right;">
+        <i class="refresh icon"></i>
+        Refresh
+      </button>
+
+      <form id="search">
+        <div class="ui icon input">
+          <input placeholder="Search for anything..." type="text" v-model="searchQuery">
+          <i class="search icon"></i>
+        </div>
+      </form>
+      <paginate
+        name="authors"
+        :list="filteredData"
+        :per="35"
+        tag="div"
+      >
+        <grid
+          :data="paginated('authors')"
+          :columns="gridColumns"
+          :buttons="gridButtons"
+          :btnclick="gridBtnClicked"
+        >
+        </grid>
+      </paginate>
+      <div class="pagination-container">
+        <paginate-links
+          tag="div"
+          for="authors"
+          :hide-single-page="true"
+          :classes="{
+            'ul': ['ui', 'pagination', 'menu'],
+            'li': 'item',
+            'li a': 'pagination-link'
+          }"
+        >
+        </paginate-links>
+        <div v-if="$refs.paginator">
+          Viewing {{$refs.paginator.pageItemsCount}} results
+        </div>
+      </div>
+    </div>
+    <modal
+      v-if="showModal"
+      @close="showModal = false"
+      v-on:submit="deleteBtnSuccess()">
+      <span slot="header">Delete this author</span>
+      <p slot="text">Are you sure you want to delete this author? This cannot be undone!</p>
+    </modal>
+  </div>
+</template>
+
+<script>
+import auth from '../auth'
+import {HTTP} from '../http-common'
+import router from '../router'
+
+export default {
+  name: 'Authors',
+  data () {
+    return {
+      user: auth.user,
+      authors: [],
+      searchQuery: '',
+      gridColumns: ['Name'],
+      gridButtons: [
+        {
+          text: 'Delete',
+          icon: 'trash',
+          action: this.deleteauthor,
+          css: 'ui red icon button'
+        },
+        {
+          text: '',
+          icon: 'edit',
+          action: this.editauthor,
+          css: 'ui blue icon button'
+        }
+      ],
+      loading: false,
+      paginate: ['authors'],
+      error: '',
+      success: '',
+      allStatus: [],
+      showModal: false
+    }
+  },
+  created () {
+    this.loadAuthors()
+  },
+  watch: {
+    // call again the method if the route changes
+    '$route': 'loadAuthors'
+  },
+  computed: {
+    filteredData: function () {
+      var filterKey = this.searchQuery && this.searchQuery.toLowerCase()
+      var data = this.authors
+      if (filterKey) {
+        data = data.filter(function (row) {
+          return Object.keys(row).some(function (key) {
+            if (row[key].content) {
+              return String(row[key].content).toLowerCase().indexOf(filterKey) > -1
+            } else {
+              return String(row[key]).toLowerCase().indexOf(filterKey) > -1
+            }
+          })
+        })
+      }
+      return data
+    }
+  },
+  methods: {
+    loadAuthors () {
+      this.loading = true
+      this.authors = []
+      HTTP.get(`authors`)
+        .then(response => {
+          let bs = response.data
+          let i = 0
+
+          // Loop throught the data we got from our API and prepare an array to display all authors
+          for (const b in bs) {
+            this.authors[i] = {
+              ID: {content: bs[b].ID, hide: true}, // Don't show the ID
+              Name: {content: bs[b].Forename + ' ' + bs[b].Lastname, link: '/author/' + bs[b].ID} // Add a link to the element
+            }
+
+            // increment dat shit
+            i++
+          }
+          this.loading = false
+        })
+        .catch(e => {
+          this.loading = false
+          this.error = e
+        })
+    },
+    gridBtnClicked (opt, gridObject) {
+      opt.action(gridObject)
+    },
+    deleteBtnSuccess () { // Event helper function
+      this.$emit('delete-submit')
+    },
+    deleteauthor (obj) {
+      this.showModal = true
+      this.$on('delete-submit', function () {
+        HTTP.delete('authors/' + obj.ID.content)
+          .then(response => {
+            console.log(response)
+            if (response.status === 200 && response.data.Message === 'success') {
+              this.success = 'The author was deleted successfully.'
+              this.loadauthors()
+            }
+          })
+          .catch(e => {
+            this.error = e
+          })
+        this.showModal = false
+      })
+    },
+    editauthor (author) {
+      router.push({ name: 'author-edit', params: { id: author.ID.content } })
+    }
+  }
+}
+</script>
+
+<style>
+  a.pagination-link{
+    margin: -5px -1.14286em -18px;
+    display: block;
+    position: absolute;
+    cursor: pointer;
+    padding: 0.928571em 1.14286em;
+    color: rgba(0,0,0,.87);
+
+    -webkit-transition: background-color 200ms; /* Safari */
+    transition: background-color 200ms;
+  }
+
+  a.pagination-link:hover{
+    background: rgba(0,0,0,.02);
+  }
+
+  .pagination{
+    padding: 0;
+  }
+
+  .pagination-container{
+    margin-top: 1rem;
+    text-align: center;
+  }
+
+  #search{
+    margin-bottom: 1rem;
+  }
+</style>

frontend/src/components/Books.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="user.authenticated">
-    <h1>{{ booksTitle }}</h1>
+    <h1>Books Overview</h1>
 
     <div class="ui info message" v-if="loading">
       <icon name="refresh" spin></icon>&nbsp;&nbsp;
@@ -89,11 +89,10 @@ import {HTTP} from '../http-common'
 import router from '../router'
 
 export default {
-  name: 'Home',
+  name: 'Books',
   data () {
     return {
       user: auth.user,
-      booksTitle: 'Books Overview',
       books: [],
       searchQuery: '',
       gridColumns: ['Title', 'ISBN', 'Year', 'Price', 'Author', 'Publisher', 'Quantity', 'Status'],

frontend/src/router/index.js

@@ -4,6 +4,7 @@ import Home from '@/components/Home'
 import Login from '@/components/Login'
 import Books from '@/components/Books'
 import BooksAddEdit from '@/components/BooksAddEdit'
+import Authors from '@/components/Authors'
 
 Vue.use(Router)
 
@@ -33,6 +34,11 @@ export default new Router({
       path: '/books/:id/edit',
       name: 'book-edit',
       component: BooksAddEdit
+    },
+    {
+      path: '/authors',
+      name: 'authors',
+      component: Authors
     }
   ],
   linkActiveClass: 'active'