commit
96b405135f
@ -0,0 +1,79 @@ |
|||||||
|
<template> |
||||||
|
<q-item bordered> |
||||||
|
<q-item-section avatar top> |
||||||
|
<q-avatar> |
||||||
|
<img :src="comment.sender.illustrationUrl"> |
||||||
|
</q-avatar> |
||||||
|
</q-item-section> |
||||||
|
|
||||||
|
<q-item-section> |
||||||
|
<q-item-label class="font-bold" lines="1">{{ comment.sender.username }}</q-item-label> |
||||||
|
<q-item-label v-html="comment.content" /> |
||||||
|
<q-item-label caption>{{ $filters.relativeDatetime(comment.sendDate) }}</q-item-label> |
||||||
|
</q-item-section> |
||||||
|
|
||||||
|
<q-item-section side top> |
||||||
|
<q-btn |
||||||
|
v-if="enableMessagesFeedbackConfig" |
||||||
|
:label="comment.countLikes" |
||||||
|
:title="$t('Like')" |
||||||
|
dense |
||||||
|
flat |
||||||
|
icon="mdi-heart-plus" |
||||||
|
/> |
||||||
|
<q-btn |
||||||
|
v-if="enableMessagesFeedbackConfig && !disableDislikeOption" |
||||||
|
:label="comment.countDislikes" |
||||||
|
:title="$t('Dislike')" |
||||||
|
dense |
||||||
|
flat |
||||||
|
icon="mdi-heart-remove" |
||||||
|
/> |
||||||
|
<q-btn |
||||||
|
v-if="isOwner" |
||||||
|
:title="$t('Delete comment')" |
||||||
|
dense |
||||||
|
flat |
||||||
|
icon="delete" |
||||||
|
@click="deleteComment" |
||||||
|
/> |
||||||
|
</q-item-section> |
||||||
|
</q-item> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import {useStore} from "vuex"; |
||||||
|
import {ref} from "vue"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "SocialNetworkPostComment", |
||||||
|
props: { |
||||||
|
comment: { |
||||||
|
type: Object, |
||||||
|
required: true |
||||||
|
} |
||||||
|
}, |
||||||
|
emits: ['deleted'], |
||||||
|
setup(props, context) { |
||||||
|
const store = useStore(); |
||||||
|
|
||||||
|
const currentUser = store.getters['security/getUser']; |
||||||
|
|
||||||
|
function deleteComment() { |
||||||
|
store |
||||||
|
.dispatch('message/del', props.comment) |
||||||
|
.then(() => context.emit('deleted')); |
||||||
|
} |
||||||
|
|
||||||
|
const enableMessagesFeedbackConfig = ref(window.config['social.social_enable_messages_feedback'] === 'true'); |
||||||
|
const disableDislikeOption = ref(window.config['social.disable_dislike_option'] === 'true'); |
||||||
|
|
||||||
|
return { |
||||||
|
deleteComment, |
||||||
|
isOwner: currentUser['@id'] === props.comment.sender['@id'], |
||||||
|
enableMessagesFeedbackConfig, |
||||||
|
disableDislikeOption, |
||||||
|
}; |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
@ -0,0 +1,56 @@ |
|||||||
|
<template> |
||||||
|
<q-form class="q-gutter-md p-4 pt-0"> |
||||||
|
<q-input |
||||||
|
v-model="comment" |
||||||
|
:label="$t('Write new comment')" |
||||||
|
autogrow |
||||||
|
/> |
||||||
|
<div class="row justify-end"> |
||||||
|
<q-btn |
||||||
|
:label="$t('Post')" |
||||||
|
icon="send" |
||||||
|
@click="sendComment" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</q-form> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import {ref} from "vue"; |
||||||
|
import {useStore} from "vuex"; |
||||||
|
import {MESSAGE_TYPE_WALL} from "../message/constants"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "SocialNetworkPostForm", |
||||||
|
props: { |
||||||
|
post: { |
||||||
|
type: Object, |
||||||
|
required: true, |
||||||
|
} |
||||||
|
}, |
||||||
|
setup(props) { |
||||||
|
const store = useStore(); |
||||||
|
|
||||||
|
const currentUser = store.getters['security/getUser']; |
||||||
|
|
||||||
|
const comment = ref(''); |
||||||
|
|
||||||
|
async function sendComment() { |
||||||
|
await store.dispatch('message/create', { |
||||||
|
title: 'Comment', |
||||||
|
content: comment.value, |
||||||
|
msgType: MESSAGE_TYPE_WALL, |
||||||
|
sender: currentUser['@id'], |
||||||
|
parent: props.post['@id'], |
||||||
|
}); |
||||||
|
|
||||||
|
comment.value = ''; |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
sendComment, |
||||||
|
comment |
||||||
|
}; |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
Loading…
Reference in new issue