feat(reactions): add reacting to comments in the frontend
This commit is contained in:
parent
23e5f2478d
commit
d51d682b3b
|
@ -154,7 +154,7 @@ async function toggleReaction(value: string) {
|
||||||
v-if="showEmojiPicker"
|
v-if="showEmojiPicker"
|
||||||
class="emoji-picker"
|
class="emoji-picker"
|
||||||
:style="{left: emojiPickerPosition?.left + 'px'}"
|
:style="{left: emojiPickerPosition?.left + 'px'}"
|
||||||
@emojiClick.stop="detail => addReaction(detail.unicode)"
|
@emojiClick="detail => addReaction(detail.unicode)"
|
||||||
ref="emojiPickerRef"
|
ref="emojiPickerRef"
|
||||||
/>
|
/>
|
||||||
</CustomTransition>
|
</CustomTransition>
|
||||||
|
|
|
@ -97,6 +97,12 @@
|
||||||
editComment()
|
editComment()
|
||||||
}"
|
}"
|
||||||
/>
|
/>
|
||||||
|
<Reactions
|
||||||
|
class="mt-2"
|
||||||
|
entity-kind="comments"
|
||||||
|
:entity-id="c.id"
|
||||||
|
v-model="c.reactions"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
@ -190,6 +196,7 @@ import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
|
||||||
import {getAvatarUrl, getDisplayName} from '@/models/user'
|
import {getAvatarUrl, getDisplayName} from '@/models/user'
|
||||||
import {useConfigStore} from '@/stores/config'
|
import {useConfigStore} from '@/stores/config'
|
||||||
import {useAuthStore} from '@/stores/auth'
|
import {useAuthStore} from '@/stores/auth'
|
||||||
|
import Reactions from '@/components/input/Reactions.vue'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
taskId: {
|
taskId: {
|
||||||
|
|
|
@ -1,12 +1,15 @@
|
||||||
import type {IAbstract} from './IAbstract'
|
import type {IAbstract} from './IAbstract'
|
||||||
import type {IUser} from './IUser'
|
import type {IUser} from './IUser'
|
||||||
import type {ITask} from './ITask'
|
import type {ITask} from './ITask'
|
||||||
|
import type {IReactionPerEntity} from '@/modelTypes/IReaction'
|
||||||
|
|
||||||
export interface ITaskComment extends IAbstract {
|
export interface ITaskComment extends IAbstract {
|
||||||
id: number
|
id: number
|
||||||
taskId: ITask['id']
|
taskId: ITask['id']
|
||||||
comment: string
|
comment: string
|
||||||
author: IUser
|
author: IUser
|
||||||
|
|
||||||
|
reactions: IReactionPerEntity
|
||||||
|
|
||||||
created: Date
|
created: Date
|
||||||
updated: Date
|
updated: Date
|
||||||
|
|
|
@ -10,6 +10,8 @@ export default class TaskCommentModel extends AbstractModel<ITaskComment> implem
|
||||||
taskId: ITask['id'] = 0
|
taskId: ITask['id'] = 0
|
||||||
comment = ''
|
comment = ''
|
||||||
author: IUser = UserModel
|
author: IUser = UserModel
|
||||||
|
|
||||||
|
reactions = {}
|
||||||
|
|
||||||
created: Date = null
|
created: Date = null
|
||||||
updated: Date = null
|
updated: Date = null
|
||||||
|
@ -21,5 +23,11 @@ export default class TaskCommentModel extends AbstractModel<ITaskComment> implem
|
||||||
this.author = new UserModel(this.author)
|
this.author = new UserModel(this.author)
|
||||||
this.created = new Date(this.created)
|
this.created = new Date(this.created)
|
||||||
this.updated = new Date(this.updated)
|
this.updated = new Date(this.updated)
|
||||||
|
|
||||||
|
// We can't convert emojis to camel case, hence we do this manually
|
||||||
|
this.reactions = {}
|
||||||
|
Object.keys(data.reactions || {}).forEach(reaction => {
|
||||||
|
this.reactions[reaction] = data.reactions[reaction].map(u => new UserModel(u))
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user