Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

comment in accompanying course: add loader + fix when resetting to empty string

Browse Source
This commit is contained in:
nobohan 2022-03-10 18:12:42 +01:00
parent ded2ac7d48
commit a8b6609dbf
1 changed files with 47 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
View File

@ -21,12 +21,17 @@
tag-name="textarea"> tag-name="textarea">
</ckeditor> </ckeditor>
<div v-if="pinnedComment" class="metadata"> <div class="sub-comment">
{{ $t('comment.created_by', [ <div v-if="pinnedComment" class="metadata">
pinnedComment.creator.text, {{ $t('comment.created_by', [
$d(pinnedComment.updatedAt.datetime, 'long') pinnedComment.creator.text,
]) $d(pinnedComment.updatedAt.datetime, 'long')
}} ])
}}
</div>
<div class="loading">
<i v-if="loading" class="fa fa-circle-o-notch fa-spin" :title="$t('loading')"></i>
</div>
</div> </div>
<div> <div>
@ -62,7 +67,8 @@ export default {
formData: { formData: {
type: "accompanying_period_comment", type: "accompanying_period_comment",
content: '' content: ''
} },
loading: false
} }
}, },
computed: { computed: {
@ -83,33 +89,37 @@ export default {
}, },
methods: { methods: {
onContentChange() { onContentChange() {
this.loading = true;
let lastRecordedContent = this.formData.content; let lastRecordedContent = this.formData.content;
setTimeout(() => { setTimeout(() => {
if (lastRecordedContent === this.formData.content) { if (this.formData.content !== '') {
if (this.pinnedComment) { if (lastRecordedContent === this.formData.content) {
let body = this.formData; if (this.pinnedComment) {
Object.assign(body, {id: this.pinnedComment.id}); let body = this.formData;
Object.assign(body, {id: this.pinnedComment.id});
this.$store.dispatch('updatePinnedComment', body) this.$store.dispatch('updatePinnedComment', body)
.catch(({name, violations}) => { .catch(({name, violations}) => {
if (name === 'ValidationException' || name === 'AccessException') { if (name === 'ValidationException' || name === 'AccessException') {
violations.forEach((violation) => this.$toast.open({message: violation})); violations.forEach((violation) => this.$toast.open({message: violation}));
} else { } else {
this.$toast.open({message: 'An error occurred'}) this.$toast.open({message: 'An error occurred'})
} }
}); });
} else { } else {
this.$store.dispatch('addPinnedComment', this.formData) this.$store.dispatch('addPinnedComment', this.formData)
.catch(({name, violations}) => { .catch(({name, violations}) => {
if (name === 'ValidationException' || name === 'AccessException') { if (name === 'ValidationException' || name === 'AccessException') {
violations.forEach((violation) => this.$toast.open({message: violation})); violations.forEach((violation) => this.$toast.open({message: violation}));
} else { } else {
this.$toast.open({message: 'An error occurred'}) this.$toast.open({message: 'An error occurred'})
} }
}); });
}
lastRecordedContent = null;
} }
lastRecordedContent = null;
} }
this.loading = false;
}, 3000); }, 3000);
}, },
removeComment() { removeComment() {
@ -130,4 +140,12 @@ export default {
div.ck-editor.ck-reset { div.ck-editor.ck-reset {
margin: 0.6em 0; margin: 0.6em 0;
} }
div.sub-comment {
display: flex;
justify-content: space-between;
div.loading {
margin-right: 6px;
margin-left: 6px;
}
}
</style> </style>