Moved list view to own component

frontend/src/components/AuthorOverview.vue

@@ -14,16 +14,7 @@
         <span v-lang.general.edit></span>
       </router-link>
 
-      <div class="ui list">
-        <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>
+      <list :infos="authorList"/>
     </div>
   </div>
 </template>
@@ -38,7 +29,8 @@
       return {
         user: auth.user,
         author: {},
-        authorID: this.$route.params.id
+        authorID: this.$route.params.id,
+        authorList: []
       }
     },
     created () {
@@ -55,6 +47,19 @@
         HTTP.get(`authors/` + this.authorID)
           .then(response => {
             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
           })
           .catch(e => {

frontend/src/components/BookOverview.vue

@@ -14,39 +14,7 @@
         <span v-lang.general.edit></span>
       </router-link>
 
-      <div class="ui list">
-        <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>
+      <list :infos="bookList" />
     </div>
   </div>
 </template>
@@ -63,7 +31,9 @@
         user: auth.user,
         book: {},
         allStatus: [],
-        bookID: this.$route.params.id
+        bookID: this.$route.params.id,
+        bookList: {},
+        AuthorList: []
       }
     },
     created () {
@@ -96,18 +66,57 @@
           .then(response => {
             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
             for (const au in authors) {
-              this.book.Author += authors[au].Forename + ' ' + authors[au].Lastname
-              if (authors.length > au + 1) {
-                this.book.Author += ', '
-              }
+              this.AuthorList.push({
+                content: authors[au].Forename + ' ' + authors[au].Lastname,
+                link: {
+                  name: 'author-show',
+                  params: {
+                    id: authors[au].ID
+                  }
+                }
+              })
             }
 
             // Make Status a name, not an id
             this.book.Status = this.getStatusByID(this.book.Status)
             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 => {
             this.loading = false

frontend/src/components/List.vue

@@ -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>

frontend/src/components/PublisherOverview.vue

@@ -13,12 +13,7 @@
         <span v-lang.general.edit></span>
       </router-link>
 
-      <div class="ui list">
-        <div class="item">
-          <div class="header" v-lang.general.name></div>
-          {{ publisher.Name }}
-        </div>
-      </div>
+      <list :infos="publisherList"/>
     </div>
   </div>
 </template>
@@ -33,7 +28,8 @@
       return {
         user: auth.user,
         publisher: {},
-        publisherID: this.$route.params.id
+        publisherID: this.$route.params.id,
+        publisherList: []
       }
     },
     created () {
@@ -50,6 +46,15 @@
         HTTP.get(`publishers/` + this.publisherID)
           .then(response => {
             this.publisher = response.data
+
+            // Make a list
+            this.publisherList = [
+              {
+                header: this.translate('general').name,
+                content: this.publisher.Name
+              }
+            ]
+
             this.loading = false
           })
           .catch(e => {

frontend/src/main.js

@@ -31,6 +31,9 @@ import language from './lang/lang'
 // Notifications
 import Notifications from 'vue-notification'
 
+// List Component
+import List from './components/List'
+
 // Notifications
 Vue.use(Notifications)
 
@@ -49,6 +52,9 @@ Vue.component('grid', Grid)
 // Register Grid component
 Vue.component('modal', Modal)
 
+// List Component Setup
+Vue.component('list', List)
+
 // Paginate setup
 Vue.use(VuePaginate)