Added authors overview
This commit is contained in:
parent
5d0165a099
commit
76dd5807f6
|
@ -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>
|
||||||
|
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>
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div v-if="user.authenticated">
|
<div v-if="user.authenticated">
|
||||||
<h1>{{ booksTitle }}</h1>
|
<h1>Books Overview</h1>
|
||||||
|
|
||||||
<div class="ui info message" v-if="loading">
|
<div class="ui info message" v-if="loading">
|
||||||
<icon name="refresh" spin></icon>
|
<icon name="refresh" spin></icon>
|
||||||
|
@ -89,11 +89,10 @@ import {HTTP} from '../http-common'
|
||||||
import router from '../router'
|
import router from '../router'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Home',
|
name: 'Books',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
user: auth.user,
|
user: auth.user,
|
||||||
booksTitle: 'Books Overview',
|
|
||||||
books: [],
|
books: [],
|
||||||
searchQuery: '',
|
searchQuery: '',
|
||||||
gridColumns: ['Title', 'ISBN', 'Year', 'Price', 'Author', 'Publisher', 'Quantity', 'Status'],
|
gridColumns: ['Title', 'ISBN', 'Year', 'Price', 'Author', 'Publisher', 'Quantity', 'Status'],
|
||||||
|
|
|
@ -4,6 +4,7 @@ import Home from '@/components/Home'
|
||||||
import Login from '@/components/Login'
|
import Login from '@/components/Login'
|
||||||
import Books from '@/components/Books'
|
import Books from '@/components/Books'
|
||||||
import BooksAddEdit from '@/components/BooksAddEdit'
|
import BooksAddEdit from '@/components/BooksAddEdit'
|
||||||
|
import Authors from '@/components/Authors'
|
||||||
|
|
||||||
Vue.use(Router)
|
Vue.use(Router)
|
||||||
|
|
||||||
|
@ -33,6 +34,11 @@ export default new Router({
|
||||||
path: '/books/:id/edit',
|
path: '/books/:id/edit',
|
||||||
name: 'book-edit',
|
name: 'book-edit',
|
||||||
component: BooksAddEdit
|
component: BooksAddEdit
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/authors',
|
||||||
|
name: 'authors',
|
||||||
|
component: Authors
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
linkActiveClass: 'active'
|
linkActiveClass: 'active'
|
||||||
|
|
Loading…
Reference in New Issue