Add message when there are no notes to show

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'
   }
 }

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;