div(v-intersect.once='onIntersect')
v-textarea#discussion-new(
outlined
flat
:placeholder='$t(`common:comments.newPlaceholder`)'
auto-grow
dense
rows='3'
hide-details
v-model='newcomment'
color='blue-grey darken-2'
:background-color='$vuetify.theme.dark ? `grey darken-5` : `white`'
v-if='permissions.write'
)
v-row.mt-2(dense, v-if='!isAuthenticated && permissions.write')
v-col(cols='12', lg='6')
v-text-field(
outlined
color='blue-grey darken-2'
:background-color='$vuetify.theme.dark ? `grey darken-5` : `white`'
:placeholder='$t(`common:comments.fieldName`)'
hide-details
dense
autocomplete='name'
v-model='guestName'
)
v-col(cols='12', lg='6')
v-text-field(
outlined
color='blue-grey darken-2'
:background-color='$vuetify.theme.dark ? `grey darken-5` : `white`'
:placeholder='$t(`common:comments.fieldEmail`)'
hide-details
type='email'
dense
autocomplete='email'
v-model='guestEmail'
)
.d-flex.align-center.pt-3(v-if='permissions.write')
v-icon.mr-1(color='blue-grey') mdi-language-markdown-outline
.caption.blue-grey--text {{$t('common:comments.markdownFormat')}}
v-spacer
.caption.mr-3(v-if='isAuthenticated')
i18next(tag='span', path='common:comments.postingAs')
strong(place='bold') {{userDisplayName}}
v-btn(
dark
color='blue-grey darken-2'
@click='postComment'
depressed
)
v-icon(left) mdi-comment
span.text-none {{$t('common:comments.postComment')}}
v-divider.mt-3(v-if='permissions.write')
.pa-5.d-flex.align-center.justify-center(v-if='isLoading && !hasLoadedOnce')
v-progress-circular(
indeterminate
size='20'
width='1'
color='blue-grey'
)
.caption.blue-grey--text.pl-3: em {{$t('common:comments.loading')}}
v-timeline(
dense
v-else-if='comments && comments.length > 0'
)
v-timeline-item.comments-post(
color='pink darken-4'
large
v-for='cm of comments'
:key='`comment-` + cm.id'
:id='`comment-post-id-` + cm.id'
)
template(v-slot:icon)
v-avatar(color='blue-grey')
//- v-img(src='http://i.pravatar.cc/64')
span.white--text.title {{cm.initials}}
v-card.elevation-1
v-card-text
.comments-post-actions(v-if='permissions.manage && !isBusy && commentEditId === 0')
v-icon.mr-3(small, @click='editComment(cm)') mdi-pencil
v-icon(small, @click='deleteCommentConfirm(cm)') mdi-delete
.comments-post-name.caption: strong {{cm.authorName}}
.comments-post-date.overline.grey--text {{cm.createdAt | moment('from') }} #[em(v-if='cm.createdAt !== cm.updatedAt') - {{$t('common:comments.modified', { reldate: $options.filters.moment(cm.updatedAt, 'from') })}}]
.comments-post-content.mt-3(v-if='commentEditId !== cm.id', v-html='cm.render')
.comments-post-editcontent.mt-3(v-else)
v-textarea(
outlined
flat
auto-grow
dense
rows='3'
hide-details
v-model='commentEditContent'
color='blue-grey darken-2'
:background-color='$vuetify.theme.dark ? `grey darken-5` : `white`'
)
.d-flex.align-center.pt-3
v-spacer
v-btn.mr-3(
dark
color='blue-grey darken-2'
@click='editCommentCancel'
outlined
)
v-icon(left) mdi-close
span.text-none {{$t('common:action.cancel')}}
v-btn(
dark
color='blue-grey darken-2'
@click='updateComment'
depressed
)
v-icon(left) mdi-comment
span.text-none {{$t('common:comments.updateComment')}}
.pt-5.text-center.body-2.blue-grey--text(v-else-if='permissions.write') {{$t('common:comments.beFirst')}}
.text-center.body-2.blue-grey--text(v-else) {{$t('common:comments.none')}}
v-dialog(v-model='deleteCommentDialogShown', max-width='500')
v-card
.dialog-header.is-red {{$t('common:comments.deleteConfirmTitle')}}
v-card-text.pt-5
span {{$t('common:comments.deleteWarn')}}
.caption: strong {{$t('common:comments.deletePermanentWarn')}}
v-card-chin
v-spacer
v-btn(text, @click='deleteCommentDialogShown = false') {{$t('common:actions.cancel')}}
v-btn(color='red', dark, @click='deleteComment') {{$t('common:actions.delete')}}