src/main/resources/static/js/app-config.js

@@ -19,7 +19,7 @@
     var getTables = basePath + "/get-tables";
     var makeIntegration = basePath + "/make-integration";
     var paperList = basePath + "/papers";
-    var paperDashboard = basePath + "/dashboard";
+    var paperDashboard = basePath + "/papers/dashboard";
 
     return {
         version: appVersion,

src/main/resources/static/papers/paper-dashboard-item.vue

@@ -0,0 +1,46 @@
+<template>
+    <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-3 dashboard-card">
+        <div class="row">
+            <div class="col-2">
+                <paper-status :status="paper.status"
+                              :key="paper.id">
+                </paper-status>
+            </div>
+            <div class="col col-10 text-right">
+                <p v-if="hasUrl">
+                    <a target="_blank" v-bind:href="paper.url"><i
+                        class="fa fa-external-link fa-1x"
+                        aria-hidden="true"></i></a>
+                </p>
+                <p v-else>
+                    <i class="fa fa-fw fa-2x" aria-hidden="true"></i>
+                </p>
+                <router-link :to="{ path: 'papers/paper', query: { id: paper.id }}" class="portfolio-link">
+                    <span class="h6">{{ paper.title }}</span>
+                </router-link>
+                <p class="text-muted"> {{ getAuthors }}</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    module.exports = {
+        props: ['paper'],
+        components: {
+            "paper-status": httpVueLoaderEx("/papers/paper-status.vue")
+        },
+        computed: {
+            getAuthors: function () {
+                var authorsResult = [];
+                this.paper.authors.forEach(function (author) {
+                    authorsResult.push(author.lastName + " " + author.firstName);
+                });
+                return authorsResult.join(',')
+            },
+            hasUrl: function () {
+                return this.paper.url !== null && this.paper.url !== '';
+            }
+        }
+    }
+</script>

src/main/resources/static/papers/paper-dashboard.vue

@@ -3,12 +3,10 @@
         <paper-navigation>
         </paper-navigation>
         <div class="row">
-            <div class="col-md-9 col-sm-12">
+            <paper-dashboard-item v-for="paper in papers"
-                <paper-item v-for="paper in papers"
                         :key="paper.id"
                         :paper="paper">
-                </paper-item>
+            </paper-dashboard-item>
-            </div>
         </div>
     </div>
 </template>
@@ -16,7 +14,7 @@
 <script>
     module.exports = {
         components: {
-            "paper-item": httpVueLoaderEx("/papers/paper-item.vue"),
+            "paper-dashboard-item": httpVueLoaderEx("/papers/paper-dashboard-item.vue"),
             "paper-navigation": httpVueLoaderEx("/papers/paper-navigation.vue"),
         },
         data: function () {
@@ -27,7 +25,7 @@
         mounted: function () {
             var self = this;
             axiosEx.get(
-                appConfig.paperList,
+                appConfig.paperDashboard,
                 function (data) {
                     self.papers = data;
                 });

src/main/resources/static/papers/paper-item.vue

@@ -14,7 +14,7 @@
                     <i class="fa fa-circle fa-stack-2x" style="color: white"></i>
                 </div>
                 <i class="fa fa-file-text-o fa-stack-1x fa-inverse"></i></span>
-            <span class="text-muted" v-for="author in getAuthors">{{ author }}</span>
+            <span class="text-muted">{{ getAuthors }}</span>
         </div>
     </div>
 </template>
@@ -31,7 +31,6 @@
                 this.paper.authors.forEach(function (author) {
                     authorsResult.push(author.lastName + " " + author.firstName);
                 });
-                debugger;
                 return authorsResult.join(', ')
             }
         }