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',
cancel: 'Cancel',
deleteCompleted: 'Delete comleted',
deleteCanceled: 'Delete canceled'
deleteCanceled: 'Delete canceled',
noNotes: 'No notes to display'
}
}

View file

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