Moved list view to own component
the build was successful
Details
the build was successful
Details
This commit is contained in:
parent
47454d23a5
commit
326e44e3a7
|
@ -14,16 +14,7 @@
|
||||||
<span v-lang.general.edit></span>
|
<span v-lang.general.edit></span>
|
||||||
</router-link>
|
</router-link>
|
||||||
|
|
||||||
<div class="ui list">
|
<list :infos="authorList"/>
|
||||||
<div class="item">
|
|
||||||
<div class="header" v-lang.authors.forename></div>
|
|
||||||
{{ author.Forename }}
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="header" v-lang.authors.lastname></div>
|
|
||||||
{{ author.Lastname }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -38,7 +29,8 @@
|
||||||
return {
|
return {
|
||||||
user: auth.user,
|
user: auth.user,
|
||||||
author: {},
|
author: {},
|
||||||
authorID: this.$route.params.id
|
authorID: this.$route.params.id,
|
||||||
|
authorList: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
|
@ -55,6 +47,19 @@
|
||||||
HTTP.get(`authors/` + this.authorID)
|
HTTP.get(`authors/` + this.authorID)
|
||||||
.then(response => {
|
.then(response => {
|
||||||
this.author = response.data
|
this.author = response.data
|
||||||
|
|
||||||
|
// Make a list
|
||||||
|
this.authorList = [
|
||||||
|
{
|
||||||
|
header: this.translate('authors').forename,
|
||||||
|
content: this.author.Forename
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: this.translate('authors').lastname,
|
||||||
|
content: this.author.Lastname
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
this.loading = false
|
this.loading = false
|
||||||
})
|
})
|
||||||
.catch(e => {
|
.catch(e => {
|
||||||
|
|
|
@ -14,39 +14,7 @@
|
||||||
<span v-lang.general.edit></span>
|
<span v-lang.general.edit></span>
|
||||||
</router-link>
|
</router-link>
|
||||||
|
|
||||||
<div class="ui list">
|
<list :infos="bookList" />
|
||||||
<div class="item">
|
|
||||||
<div class="header" v-lang.books.gridColumns.isbn></div>
|
|
||||||
{{ book.Isbn }}
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="header" v-lang.books.gridColumns.year></div>
|
|
||||||
{{ book.Year }}
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="header" v-lang.books.gridColumns.price></div>
|
|
||||||
{{ book.Price }}
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="header" v-lang.books.gridColumns.status></div>
|
|
||||||
{{ book.Status }}
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="header" v-lang.books.gridColumns.publisher></div>
|
|
||||||
<router-link :to="{ name: 'publisher-show', params: { id: book.PublisherFull.ID} }">
|
|
||||||
{{ book.PublisherFull.Name }}
|
|
||||||
</router-link>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="header" v-lang.books.gridColumns.authors></div>
|
|
||||||
<template v-for="(author, index) in book.Authors">
|
|
||||||
<router-link :to="{ name: 'author-show', params: { id: author.ID} }">
|
|
||||||
{{ author.Lastname }} {{ author.Lastname }}
|
|
||||||
</router-link>
|
|
||||||
<template v-if="book.Authors.length > (index + 1)">, </template>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -63,7 +31,9 @@
|
||||||
user: auth.user,
|
user: auth.user,
|
||||||
book: {},
|
book: {},
|
||||||
allStatus: [],
|
allStatus: [],
|
||||||
bookID: this.$route.params.id
|
bookID: this.$route.params.id,
|
||||||
|
bookList: {},
|
||||||
|
AuthorList: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
|
@ -96,18 +66,57 @@
|
||||||
.then(response => {
|
.then(response => {
|
||||||
this.book = response.data
|
this.book = response.data
|
||||||
|
|
||||||
// Get all authors and concat them into one singe string
|
// Get all authors and build an array with them
|
||||||
let authors = this.book.Authors
|
let authors = this.book.Authors
|
||||||
for (const au in authors) {
|
for (const au in authors) {
|
||||||
this.book.Author += authors[au].Forename + ' ' + authors[au].Lastname
|
this.AuthorList.push({
|
||||||
if (authors.length > au + 1) {
|
content: authors[au].Forename + ' ' + authors[au].Lastname,
|
||||||
this.book.Author += ', '
|
link: {
|
||||||
}
|
name: 'author-show',
|
||||||
|
params: {
|
||||||
|
id: authors[au].ID
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// Make Status a name, not an id
|
// Make Status a name, not an id
|
||||||
this.book.Status = this.getStatusByID(this.book.Status)
|
this.book.Status = this.getStatusByID(this.book.Status)
|
||||||
this.loading = false
|
this.loading = false
|
||||||
|
|
||||||
|
// Build the list object
|
||||||
|
this.bookList = [
|
||||||
|
{
|
||||||
|
header: this.translate('books').gridColumns.isbn,
|
||||||
|
content: this.book.Isbn
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: this.translate('books').gridColumns.year,
|
||||||
|
content: this.book.Year
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: this.translate('books').gridColumns.price,
|
||||||
|
content: this.book.Price
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: this.translate('books').gridColumns.status,
|
||||||
|
content: this.book.Status
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: this.translate('books').gridColumns.publisher,
|
||||||
|
content: this.book.PublisherFull.Name,
|
||||||
|
link: {
|
||||||
|
name: 'publisher-show',
|
||||||
|
params: {
|
||||||
|
id: this.book.PublisherFull.ID
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: this.translate('books').gridColumns.authors,
|
||||||
|
content: this.AuthorList
|
||||||
|
}
|
||||||
|
]
|
||||||
})
|
})
|
||||||
.catch(e => {
|
.catch(e => {
|
||||||
this.loading = false
|
this.loading = false
|
||||||
|
|
|
@ -0,0 +1,47 @@
|
||||||
|
<template>
|
||||||
|
<div class="ui list">
|
||||||
|
<!-- Loop through the infos -->
|
||||||
|
<div class="item" v-for="info in infos">
|
||||||
|
<div class="header">{{ info.header }}</div>
|
||||||
|
<!-- if we have a link, make it a clickable object -->
|
||||||
|
<template v-if="info.link">
|
||||||
|
<router-link :to="info.link">
|
||||||
|
{{ info.content }}
|
||||||
|
</router-link>
|
||||||
|
</template>
|
||||||
|
<!-- if our content object is an array, loop through it and show its content -->
|
||||||
|
<template v-else-if="Array.isArray(info.content)">
|
||||||
|
<template v-for="(infoitem, index) in info.content">
|
||||||
|
<!-- if we have a link, make it a clickable object -->
|
||||||
|
<template v-if="infoitem.link">
|
||||||
|
<router-link :to="infoitem.link">
|
||||||
|
{{ infoitem.content }}
|
||||||
|
</router-link>
|
||||||
|
</template>
|
||||||
|
<!-- Otherwise show its content -->
|
||||||
|
<template v-else>
|
||||||
|
{{infoitem.content}}
|
||||||
|
</template>
|
||||||
|
<template v-if="info.content.length > (index + 1)">, </template>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<!-- Otherwise show its content -->
|
||||||
|
<template v-else>
|
||||||
|
{{ info.content }}
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'List',
|
||||||
|
props: {
|
||||||
|
infos: Array
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
|
@ -13,12 +13,7 @@
|
||||||
<span v-lang.general.edit></span>
|
<span v-lang.general.edit></span>
|
||||||
</router-link>
|
</router-link>
|
||||||
|
|
||||||
<div class="ui list">
|
<list :infos="publisherList"/>
|
||||||
<div class="item">
|
|
||||||
<div class="header" v-lang.general.name></div>
|
|
||||||
{{ publisher.Name }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -33,7 +28,8 @@
|
||||||
return {
|
return {
|
||||||
user: auth.user,
|
user: auth.user,
|
||||||
publisher: {},
|
publisher: {},
|
||||||
publisherID: this.$route.params.id
|
publisherID: this.$route.params.id,
|
||||||
|
publisherList: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
|
@ -50,6 +46,15 @@
|
||||||
HTTP.get(`publishers/` + this.publisherID)
|
HTTP.get(`publishers/` + this.publisherID)
|
||||||
.then(response => {
|
.then(response => {
|
||||||
this.publisher = response.data
|
this.publisher = response.data
|
||||||
|
|
||||||
|
// Make a list
|
||||||
|
this.publisherList = [
|
||||||
|
{
|
||||||
|
header: this.translate('general').name,
|
||||||
|
content: this.publisher.Name
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
this.loading = false
|
this.loading = false
|
||||||
})
|
})
|
||||||
.catch(e => {
|
.catch(e => {
|
||||||
|
|
|
@ -31,6 +31,9 @@ import language from './lang/lang'
|
||||||
// Notifications
|
// Notifications
|
||||||
import Notifications from 'vue-notification'
|
import Notifications from 'vue-notification'
|
||||||
|
|
||||||
|
// List Component
|
||||||
|
import List from './components/List'
|
||||||
|
|
||||||
// Notifications
|
// Notifications
|
||||||
Vue.use(Notifications)
|
Vue.use(Notifications)
|
||||||
|
|
||||||
|
@ -49,6 +52,9 @@ Vue.component('grid', Grid)
|
||||||
// Register Grid component
|
// Register Grid component
|
||||||
Vue.component('modal', Modal)
|
Vue.component('modal', Modal)
|
||||||
|
|
||||||
|
// List Component Setup
|
||||||
|
Vue.component('list', List)
|
||||||
|
|
||||||
// Paginate setup
|
// Paginate setup
|
||||||
Vue.use(VuePaginate)
|
Vue.use(VuePaginate)
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue