123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298 |
- <!--
- - @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>
- -
- - @author John Molakvoæ <skjnldsv@protonmail.com>
- -
- - @license GNU AGPL version 3 or any later version
- -
- - This program is free software: you can redistribute it and/or modify
- - it under the terms of the GNU Affero General Public License as
- - published by the Free Software Foundation, either version 3 of the
- - License, or (at your option) any later version.
- -
- - This program is distributed in the hope that it will be useful,
- - but WITHOUT ANY WARRANTY; without even the implied warranty of
- - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- - GNU Affero General Public License for more details.
- -
- - You should have received a copy of the GNU Affero General Public License
- - along with this program. If not, see <http://www.gnu.org/licenses/>.
- -
- -->
- <template>
- <div v-show="!deleted"
- :class="{'comment--loading': loading}"
- class="comment">
- <!-- Comment header toolbar -->
- <div class="comment__header">
- <!-- Author -->
- <Avatar class="comment__avatar"
- :display-name="actorDisplayName"
- :user="actorId"
- :size="32" />
- <span class="comment__author">{{ actorDisplayName }}</span>
-
- <!-- Comment actions,
- show if we have a message id and current user is author -->
- <Actions v-if="isOwnComment && id && !loading" class="comment__actions">
- <template v-if="!editing">
- <ActionButton
- :close-after-click="true"
- icon="icon-rename"
- @click="onEdit">
- {{ t('comments', 'Edit comment') }}
- </ActionButton>
- <ActionSeparator />
- <ActionButton
- :close-after-click="true"
- icon="icon-delete"
- @click="onDeleteWithUndo">
- {{ t('comments', 'Delete comment') }}
- </ActionButton>
- </template>
-
- <ActionButton v-else
- icon="icon-close"
- @click="onEditCancel">
- {{ t('comments', 'Cancel edit') }}
- </ActionButton>
- </Actions>
-
- <!-- Show loading if we're editing or deleting, not on new ones -->
- <div v-if="id && loading" class="comment_loading icon-loading-small" />
-
- <!-- Relative time to the comment creation -->
- <Moment v-else-if="creationDateTime" class="comment__timestamp" :timestamp="timestamp" />
- </div>
-
- <!-- Message editor -->
- <div class="comment__message" v-if="editor || editing">
- <RichContenteditable v-model="localMessage"
- :auto-complete="autoComplete"
- :contenteditable="!loading"
- @submit="onSubmit" />
- <input v-tooltip="t('comments', 'Post comment')"
- :class="loading ? 'icon-loading-small' :'icon-confirm'"
- class="comment__submit"
- type="submit"
- :disabled="isEmptyMessage"
- value=""
- @click="onSubmit">
- </div>
-
- <!-- Message content -->
- <!-- The html is escaped and sanitized before rendering -->
- <!-- eslint-disable-next-line vue/no-v-html-->
- <div v-else class="comment__message" v-html="renderedContent" />
- </div>
- </template>
-
- <script>
- import { getCurrentUser } from '@nextcloud/auth'
- import moment from 'moment'
-
- import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
- import Actions from '@nextcloud/vue/dist/Components/Actions'
- import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator'
- import Avatar from '@nextcloud/vue/dist/Components/Avatar'
- import RichContenteditable from '@nextcloud/vue/dist/Components/RichContenteditable'
- import RichEditorMixin from '@nextcloud/vue/dist/Mixins/richEditor'
-
- import Moment from './Moment'
- import CommentMixin from '../mixins/CommentMixin'
-
- export default {
- name: 'Comment',
-
- components: {
- ActionButton,
- Actions,
- ActionSeparator,
- Avatar,
- Moment,
- RichContenteditable,
- },
- mixins: [RichEditorMixin, CommentMixin],
-
- inheritAttrs: false,
-
- props: {
- source: {
- type: Object,
- default: () => ({}),
- },
- actorDisplayName: {
- type: String,
- required: true,
- },
- actorId: {
- type: String,
- required: true,
- },
- creationDateTime: {
- type: String,
- default: null,
- },
-
- /**
- * Force the editor display
- */
- editor: {
- type: Boolean,
- default: false,
- },
-
- /**
- * Provide the autocompletion data
- */
- autoComplete: {
- type: Function,
- required: true,
- },
- },
-
- data() {
- return {
- // Only change data locally and update the original
- // parent data when the request is sent and resolved
- localMessage: '',
- }
- },
-
- computed: {
-
- /**
- * Is the current user the author of this comment
- * @returns {boolean}
- */
- isOwnComment() {
- return getCurrentUser().uid === this.actorId
- },
-
- /**
- * Rendered content as html string
- * @returns {string}
- */
- renderedContent() {
- if (this.isEmptyMessage) {
- return ''
- }
- return this.renderContent(this.localMessage)
- },
-
- isEmptyMessage() {
- return !this.localMessage || this.localMessage.trim() === ''
- },
-
- timestamp() {
- // seconds, not milliseconds
- return parseInt(moment(this.creationDateTime).format('x'), 10) / 1000
- },
- },
-
- watch: {
- // If the data change, update the local value
- message(message) {
- this.updateLocalMessage(message)
- },
- },
-
- beforeMount() {
- // Init localMessage
- this.updateLocalMessage(this.message)
- },
-
- methods: {
- /**
- * Update local Message on outer change
- * @param {string} message the message to set
- */
- updateLocalMessage(message) {
- this.localMessage = message.toString()
- },
-
- /**
- * Dispatch message between edit and create
- */
- onSubmit() {
- if (this.editor) {
- this.onNewComment(this.localMessage)
- return
- }
- this.onEditComment(this.localMessage)
- },
- },
-
- }
- </script>
-
- <style lang="scss" scoped>
- $comment-padding: 10px;
-
- .comment {
- position: relative;
- padding: $comment-padding 0 $comment-padding * 1.5;
-
- &__header {
- display: flex;
- align-items: center;
- min-height: 44px;
- padding: $comment-padding / 2 0;
- }
-
- &__author,
- &__actions {
- margin-left: $comment-padding !important;
- }
-
- &__author {
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- color: var(--color-text-maxcontrast);
- }
-
- &_loading,
- &__timestamp {
- margin-left: auto;
- color: var(--color-text-maxcontrast);
- }
-
- &__message {
- position: relative;
- // Avatar size, align with author name
- padding-left: 32px + $comment-padding;
- }
-
- &__submit {
- position: absolute;
- right: 0;
- bottom: 0;
- width: 44px;
- height: 44px;
- // Align with input border
- margin: 1px;
- cursor: pointer;
- opacity: .7;
- border: none;
- background-color: transparent !important;
-
- &:disabled {
- cursor: not-allowed;
- opacity: .5;
- }
-
- &:focus,
- &:hover {
- opacity: 1;
- }
- }
- }
-
- .rich-contenteditable__input {
- margin: 0;
- padding: $comment-padding;
- min-height: 44px;
- }
-
- </style>
|