diff --git a/extensions/tags/js/src/forum/components/DiscussionTaggedPost.js b/extensions/tags/js/src/forum/components/DiscussionTaggedPost.js index de89f0ee37..852e8149a6 100644 --- a/extensions/tags/js/src/forum/components/DiscussionTaggedPost.js +++ b/extensions/tags/js/src/forum/components/DiscussionTaggedPost.js @@ -2,18 +2,47 @@ import EventPost from 'flarum/forum/components/EventPost'; import tagsLabel from '../../common/helpers/tagsLabel'; export default class DiscussionTaggedPost extends EventPost { - static initAttrs(attrs) { - super.initAttrs(attrs); + oninit(vnode) { + super.oninit(vnode); - const oldTags = attrs.post.content()[0]; - const newTags = attrs.post.content()[1]; + const oldTags = this.attrs.post.content()[0]; + const newTags = this.attrs.post.content()[1]; - function diffTags(tags1, tags2) { - return tags1.filter((tag) => tags2.indexOf(tag) === -1).map((id) => app.store.getById('tags', id)); + this.tagsAdded = []; + this.tagsRemoved = []; + + this.fetchRequired = false; + this.loading = true; + + const tagsMutation = [...this.diffTags(newTags, oldTags), ...this.diffTags(oldTags, newTags)]; + if (tagsMutation.includes(undefined)) { + this.fetchRequired = true; } - attrs.tagsAdded = diffTags(newTags, oldTags); - attrs.tagsRemoved = diffTags(oldTags, newTags); + const afterFetch = () => { + this.tagsAdded = this.diffTags(newTags, oldTags); + this.tagsRemoved = this.diffTags(oldTags, newTags); + + this.loading = false; + m.redraw(); + }; + + if (this.fetchRequired) { + app.store + .find('tags') + .then(afterFetch) + .catch(() => { + this.loading = false; + m.redraw(); + }); + } else { + afterFetch(); + } + } + + diffTags(tags1, tags2) { + return tags1.filter((tag) => tags2.indexOf(tag) === -1).map((id) => app.store.getById('tags', id)); + // .filter(Boolean); } icon() { @@ -21,8 +50,8 @@ export default class DiscussionTaggedPost extends EventPost { } descriptionKey() { - if (this.attrs.tagsAdded.length) { - if (this.attrs.tagsRemoved.length) { + if (this.tagsAdded.length) { + if (this.tagsRemoved.length) { return 'flarum-tags.forum.post_stream.added_and_removed_tags_text'; } @@ -35,17 +64,17 @@ export default class DiscussionTaggedPost extends EventPost { descriptionData() { const data = {}; - if (this.attrs.tagsAdded.length) { + if (this.tagsAdded.length) { data.tagsAdded = app.translator.trans('flarum-tags.forum.post_stream.tags_text', { - tags: tagsLabel(this.attrs.tagsAdded, { link: true }), - count: this.attrs.tagsAdded.length, + tags: tagsLabel(this.tagsAdded, { link: true }), + count: this.tagsAdded.length, }); } - if (this.attrs.tagsRemoved.length) { + if (this.tagsRemoved.length) { data.tagsRemoved = app.translator.trans('flarum-tags.forum.post_stream.tags_text', { - tags: tagsLabel(this.attrs.tagsRemoved, { link: true }), - count: this.attrs.tagsRemoved.length, + tags: tagsLabel(this.tagsRemoved, { link: true }), + count: this.tagsRemoved.length, }); } diff --git a/extensions/tags/less/forum.less b/extensions/tags/less/forum.less index 3c5466f802..7dcbaffa00 100644 --- a/extensions/tags/less/forum.less +++ b/extensions/tags/less/forum.less @@ -2,6 +2,7 @@ @import "forum/TagCloud"; @import "forum/TagHero"; +@import "forum/TagPost"; @import "forum/TagTiles"; @import "forum/ToggleButton"; diff --git a/extensions/tags/less/forum/TagPost.less b/extensions/tags/less/forum/TagPost.less new file mode 100644 index 0000000000..8206c2e5ae --- /dev/null +++ b/extensions/tags/less/forum/TagPost.less @@ -0,0 +1,6 @@ +.EventPost.DiscussionTaggedPost.Post.Post--loading { + height: 62px; +} +.DiscussionTaggedPost .LoadingIndicator-container--block { + height: auto; +}