<template> <el-timeline-item :timestamp="item.timestamp" placement="top" class="timeline-item-container"> <el-card> <div class="header-container"> <h4>{{ item.header }}</h4> <el-button plain size="small" @click="toggleNoteInput">{{ $t('reports.reply') }}</el-button> </div> <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 class="note"> <h4>{{ $t('reports.from') }} {{ note.author }}</h4> <p class="timestamp">{{ note.timestamp }}</p> <p class="note-text">{{ note.text }}</p> </el-card> </div> </el-collapse-item> <div v-show="showNewNoteInput" class="new-note"> <div class="header-container"> <p>{{ $t('reports.newNote') }}</p> <i class="el-icon-close" @click="toggleNoteInput"/> </div> <el-input v-model="note" :rows="2" type="textarea" autofocus/> <el-button class="submit-button" plain size="small" @click="addNewNote(item.id)">{{ $t('reports.submit') }}</el-button> </div> </el-collapse> </el-card> </el-timeline-item> </template> <script> export default { name: 'TimelineItem', props: { item: { type: Object, required: true } }, data() { return { showNotes: [], showNewNoteInput: false, note: '' } }, methods: { toggleNoteInput() { this.$data.showNewNoteInput = !this.$data.showNewNoteInput }, addNewNote(reportId) { const currentUserNickname = this.$store.state.user.name const note = { author: currentUserNickname, text: this.$data.note, timestamp: '2019/04/01' } this.$store.dispatch('AddNote', { reportId, note }) this.$data.note = '' } } } </script> <style rel='stylesheet/scss' lang='scss'> .el-card__body { padding: 17px 17px 0; } .el-collapse { border-bottom: none; } .el-collapse-item__header { height: 46px; } .el-collapse-item__content { padding-bottom: 7px; } .el-icon-arrow-right { margin-right: 6px; } .el-icon-close { padding: 10px 5px 10px 10px; cursor: pointer; } h4 { margin: 0; height: 17px; } .header-container { display: flex; justify-content: space-between; align-items: baseline; } .new-note { p { font-size: 13px; font-weight: 500; height: 17px; margin: 13px 0 7px; } } .note { box-shadow: 0 2px 5px 0 rgba(0,0,0,.1); margin-bottom: 10px; } .note-text { margin-bottom: 14px; } .submit-button { display: block; margin: 7px 0 17px auto; } .timestamp { margin: 0; font-style: italic; color: gray; } @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {} </style>