Add message when there are no notes to show

This commit is contained in:
Angelina Filippova 2019-04-05 00:15:39 +03:00
parent 340a970846
commit 44a771f2f9
2 changed files with 20 additions and 10 deletions

View file

@ -211,6 +211,7 @@ export default {
delete: 'Delete', delete: 'Delete',
cancel: 'Cancel', cancel: 'Cancel',
deleteCompleted: 'Delete comleted', deleteCompleted: 'Delete comleted',
deleteCanceled: 'Delete canceled' deleteCanceled: 'Delete canceled',
noNotes: 'No notes to display'
} }
} }

View file

@ -8,15 +8,20 @@
<p>{{ item.content }}</p> <p>{{ item.content }}</p>
<el-collapse v-model="showNotes"> <el-collapse v-model="showNotes">
<el-collapse-item :title="$t('reports.showNotes')" name="showNotes"> <el-collapse-item :title="$t('reports.showNotes')" name="showNotes">
<div v-for="note in item.notes" :key="note.id"> <div v-if="item.notes.length > 0">
<el-card :body-style="{ padding: '6px 14px 0 14px' }" class="note"> <div v-for="note in item.notes" :key="note.id">
<div class="header-container"> <el-card :body-style="{ padding: '6px 14px 0 14px' }" class="note">
<h4>{{ $t('reports.from') }} {{ note.author }}</h4> <div class="header-container">
<i class="el-icon-close" @click="deleteNote(item.id, note.id)"/> <h4>{{ $t('reports.from') }} {{ note.author }}</h4>
</div> <i class="el-icon-close" @click="deleteNote(item.id, note.id)"/>
<p class="timestamp">{{ note.timestamp }}</p> </div>
<p>{{ note.text }}</p> <p class="timestamp">{{ note.timestamp }}</p>
</el-card> <p>{{ note.text }}</p>
</el-card>
</div>
</div>
<div v-else>
<p class="no-notes">{{ $t('reports.noNotes') }}</p>
</div> </div>
</el-collapse-item> </el-collapse-item>
<div v-show="showNewNoteInput" class="new-note"> <div v-show="showNewNoteInput" class="new-note">
@ -129,6 +134,10 @@ export default {
box-shadow: 0 2px 5px 0 rgba(0,0,0,.1); box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);
margin-bottom: 10px; margin-bottom: 10px;
} }
.no-notes {
font-style: italic;
color: gray;
}
.submit-button { .submit-button {
display: block; display: block;
margin: 7px 0 17px auto; margin: 7px 0 17px auto;