From 44a771f2f9bb1d89487fdcc7aafa5d90e3f6383e Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Fri, 5 Apr 2019 00:15:39 +0300
Subject: [PATCH] Add message when there are no notes to show

---
 src/lang/en.js                                |  3 ++-
 src/views/reports/components/TimelineItem.vue | 27 ++++++++++++-------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/lang/en.js b/src/lang/en.js
index 48e59f5e..8e0e71b0 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -211,6 +211,7 @@ export default {
     delete: 'Delete',
     cancel: 'Cancel',
     deleteCompleted: 'Delete comleted',
-    deleteCanceled: 'Delete canceled'
+    deleteCanceled: 'Delete canceled',
+    noNotes: 'No notes to display'
   }
 }
diff --git a/src/views/reports/components/TimelineItem.vue b/src/views/reports/components/TimelineItem.vue
index 250bf35e..60ab7aa9 100644
--- a/src/views/reports/components/TimelineItem.vue
+++ b/src/views/reports/components/TimelineItem.vue
@@ -8,15 +8,20 @@
       <p>{{ item.content }}</p>
       <el-collapse v-model="showNotes">
         <el-collapse-item :title="$t('reports.showNotes')" name="showNotes">
-          <div v-for="note in item.notes" :key="note.id">
-            <el-card :body-style="{ padding: '6px 14px 0 14px' }" class="note">
-              <div class="header-container">
-                <h4>{{ $t('reports.from') }} {{ note.author }}</h4>
-                <i class="el-icon-close" @click="deleteNote(item.id, note.id)"/>
-              </div>
-              <p class="timestamp">{{ note.timestamp }}</p>
-              <p>{{ note.text }}</p>
-            </el-card>
+          <div v-if="item.notes.length > 0">
+            <div v-for="note in item.notes" :key="note.id">
+              <el-card :body-style="{ padding: '6px 14px 0 14px' }" class="note">
+                <div class="header-container">
+                  <h4>{{ $t('reports.from') }} {{ note.author }}</h4>
+                  <i class="el-icon-close" @click="deleteNote(item.id, note.id)"/>
+                </div>
+                <p class="timestamp">{{ note.timestamp }}</p>
+                <p>{{ note.text }}</p>
+              </el-card>
+            </div>
+          </div>
+          <div v-else>
+            <p class="no-notes">{{ $t('reports.noNotes') }}</p>
           </div>
         </el-collapse-item>
         <div v-show="showNewNoteInput" class="new-note">
@@ -129,6 +134,10 @@ export default {
     box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);
     margin-bottom: 10px;
   }
+  .no-notes {
+    font-style: italic;
+    color: gray;
+  }
   .submit-button {
     display: block;
     margin: 7px 0 17px auto;