CoursewareBlockComments.vue

<template>
    <section class="cw-block-comments" :class="[emptyComments ? 'cw-block-comments-empty' : '']">
        <div class="cw-block-features-content">
            <div class="cw-block-comments-items" v-show="!emptyComments" ref="commentsRef">
                <courseware-talk-bubble
                    v-for="comment in comments"
                    :key="comment.id"
                    :payload="buildPayload(comment)"
                />
            </div>
            <div class="cw-block-comment-create">
                <textarea v-model="createComment" :placeholder="placeHolder" spellcheck="true"></textarea>
                <button class="button" @click="postComment"><translate>Senden</translate></button>
            </div>
        </div>
    </section>
</template>

<script>
import CoursewareTalkBubble from './CoursewareTalkBubble.vue';
import { mapActions, mapGetters } from 'vuex';

export default {
    name: 'courseware-block-comments',
    components: {
        CoursewareTalkBubble,
    },
    props: {
        block: Object,
    },
    data() {
        return {
            createComment: '',
            placeHolder: this.$gettext('Stellen Sie eine Frage oder kommentieren Sie...'),
        };
    },
    computed: {
        ...mapGetters({
            relatedUser: 'users/related',
            userId: 'userId',
            getComments: 'courseware-block-comments/related',
        }),
        comments() {
            const parent = {
                type: this.block.type,
                id: this.block.id,
            };

            return this.getComments({ parent, relationship: 'comments' });
        },
        emptyComments() {
            if (this.comments === null || this.comments.length === 0) {
                return true;
            }

            return false;
        }
    },
    methods: {
        ...mapActions({
            createComments: 'courseware-block-comments/create',
            loadRelatedComments: 'courseware-block-comments/loadRelated'
        }),
        async loadComments() {
            const parent = {
                type: this.block.type,
                id: this.block.id,
            };
            await this.loadRelatedComments({
                parent,
                relationship: 'comments',
                options: {
                    include: 'user',
                },
            });
        },
        async postComment() {
            const data = {
                attributes: {
                    comment: this.createComment
                },
                relationships: {
                    block: {
                        data: {
                            id: this.block.id,
                            type: this.block.type
                        }
                    }
                }
            };

            await this.createComments(data);
            this.loadComments();
            this.createComment = '';
        },
        buildPayload(comment) {
            const commenter = this.relatedUser({
                parent: { id: comment.id, type: comment.type },
                relationship: 'user',
            });

            const payload = {
                id: comment.id,
                own: comment.relationships.user.data.id === this.userId,
                content: comment.attributes.comment,
                chdate: comment.attributes.chdate,
                mkdate: comment.attributes.mkdate,
                user_id: commenter.id,
                user_name: commenter.attributes['formatted-name'],
                user_avatar: commenter.meta.avatar.small,
            };

            return payload;
        },
    },
    mounted() {
        this.loadComments();
    },
    updated() {
        let ref = this.$refs["commentsRef"];
        ref.scrollTop = ref.scrollHeight;
    },
    watch: {
        comments() {
            if (this.comments && this.comments.length > 0) {
                this.$emit('hasComments');
            }
        }
    }
};
</script>