143 lines
3 KiB
Vue
143 lines
3 KiB
Vue
<template>
|
|
<div class="card note-wrap">
|
|
<div class="header">
|
|
<div class="meta">
|
|
<thumbnail
|
|
:title="noteAuthorName"
|
|
:src="noteAuthor.thumbnail"
|
|
:username="noteAuthorName"
|
|
size="20px"
|
|
/>
|
|
<div class="date-wrap">
|
|
<span class="fw-medium"> {{ noteAuthorName }} </span>
|
|
<span> {{ $t('NOTES.LIST.LABEL') }} </span>
|
|
<span class="fw-medium"> {{ readableTime }} </span>
|
|
</div>
|
|
</div>
|
|
<div class="actions">
|
|
<woot-button
|
|
v-tooltip="$t('NOTES.CONTENT_HEADER.DELETE')"
|
|
variant="smooth"
|
|
size="tiny"
|
|
icon="delete"
|
|
color-scheme="secondary"
|
|
@click="toggleDeleteModal"
|
|
/>
|
|
</div>
|
|
<woot-delete-modal
|
|
v-if="showDeleteModal"
|
|
:show.sync="showDeleteModal"
|
|
:on-close="closeDelete"
|
|
:on-confirm="confirmDeletion"
|
|
:title="$t('DELETE_NOTE.CONFIRM.TITLE')"
|
|
:message="$t('DELETE_NOTE.CONFIRM.MESSAGE')"
|
|
:confirm-text="$t('DELETE_NOTE.CONFIRM.YES')"
|
|
:reject-text="$t('DELETE_NOTE.CONFIRM.NO')"
|
|
/>
|
|
</div>
|
|
<p v-dompurify-html="formatMessage(note || '')" class="note__content" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Thumbnail from 'dashboard/components/widgets/Thumbnail';
|
|
import timeMixin from 'dashboard/mixins/time';
|
|
import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
|
|
|
|
export default {
|
|
components: {
|
|
Thumbnail,
|
|
},
|
|
|
|
mixins: [timeMixin, messageFormatterMixin],
|
|
|
|
props: {
|
|
id: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
note: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
user: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
createdAt: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
showDeleteModal: false,
|
|
};
|
|
},
|
|
computed: {
|
|
readableTime() {
|
|
return this.dynamicTime(this.createdAt);
|
|
},
|
|
noteAuthor() {
|
|
return this.user || {};
|
|
},
|
|
noteAuthorName() {
|
|
return this.noteAuthor.name || this.$t('APP_GLOBAL.DELETED_USER');
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
toggleDeleteModal() {
|
|
this.showDeleteModal = !this.showDeleteModal;
|
|
},
|
|
onDelete() {
|
|
this.$emit('delete', this.id);
|
|
},
|
|
confirmDeletion() {
|
|
this.onDelete();
|
|
this.closeDelete();
|
|
},
|
|
closeDelete() {
|
|
this.showDeleteModal = false;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.note__content {
|
|
margin-top: var(--space-normal);
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
font-size: var(--font-size-mini);
|
|
|
|
.meta {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.date-wrap {
|
|
margin-left: var(--space-smaller);
|
|
padding: var(--space-micro);
|
|
color: var(--color-body);
|
|
}
|
|
}
|
|
.actions {
|
|
display: flex;
|
|
visibility: hidden;
|
|
|
|
.button {
|
|
margin-left: var(--space-small);
|
|
}
|
|
}
|
|
}
|
|
|
|
.note-wrap:hover {
|
|
.actions {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
</style>
|