diff --git a/webapp/components/utils/PostHelpers.js b/webapp/components/utils/PostHelpers.js
index 5ff912a97..403e49622 100644
--- a/webapp/components/utils/PostHelpers.js
+++ b/webapp/components/utils/PostHelpers.js
@@ -33,3 +33,18 @@ export function deletePostMutation(postId) {
},
}
}
+
+export function sortTagsAlphabetically(tags) {
+ // Make sure the property is valid.
+ if (!tags || !tags.length) return false
+ /* Using .slice(0) to make a shallow copy. Otherwise a vue/no-side-effects-in-computed-properties error
+ would be thrown because sort() sorts in place. A shallow copy is fine because only first level objects are
+ affected by the sort, the original tags object remains unchanged.
+ */
+ return tags.slice(0).sort(function (a, b) {
+ // Converting to lowercase to make sort case insensitive.
+ const tagA = a.id.toLowerCase()
+ const tagB = b.id.toLowerCase()
+ return tagA < tagB ? -1 : tagA > tagB ? 1 : 0
+ })
+}
diff --git a/webapp/pages/post/_id/_slug/index.spec.js b/webapp/pages/post/_id/_slug/index.spec.js
index 12a84d4a6..bc54edf53 100644
--- a/webapp/pages/post/_id/_slug/index.spec.js
+++ b/webapp/pages/post/_id/_slug/index.spec.js
@@ -3,6 +3,7 @@ import Vuex from 'vuex'
import Vue from 'vue'
import PostSlug from './index.vue'
import CommentList from '~/components/CommentList/CommentList'
+import HcHashtag from '~/components/Hashtag/Hashtag'
config.stubs['client-only'] = ''
config.stubs['nuxt-link'] = ''
@@ -143,5 +144,48 @@ describe('PostSlug', () => {
})
})
})
+
+ describe('tags shown in tag cloud', () => {
+ beforeEach(async () => {
+ // Create backendData with tags, not alphabetically sorted.
+ backendData.post.tags = [
+ { id: 'c' },
+ { id: 'qw' },
+ { id: 'BQ' },
+ { id: '42' },
+ { id: 'Bw' },
+ { id: 'a' },
+ ]
+
+ wrapper = await Wrapper()
+ })
+
+ it('are present', async () => {
+ // Get length from backendData and compare against number of tags present in component.
+ expect(wrapper.findAll(HcHashtag).length).toBe(backendData.post.tags.length)
+ })
+
+ it('are alphabetically ordered', async () => {
+ // Get all HcHastag components
+ const wrappers = wrapper.findAll(HcHashtag).wrappers
+ // Exctract ID properties (tag names) from component.
+ const ids = []
+ wrappers.forEach((x) => {
+ ids.push({
+ id: x.props().id,
+ })
+ })
+ // Compare extracted IDs with solution.
+ const idsAlphabetically = [
+ { id: '42' },
+ { id: 'a' },
+ { id: 'BQ' },
+ { id: 'Bw' },
+ { id: 'c' },
+ { id: 'qw' },
+ ]
+ expect(ids).toStrictEqual(idsAlphabetically)
+ })
+ })
})
})
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index 9a4a796e1..e3f82e5ce 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -64,7 +64,7 @@
-
+
@@ -116,7 +116,11 @@ import UserTeaser from '~/components/UserTeaser/UserTeaser'
import HcShoutButton from '~/components/ShoutButton.vue'
import CommentForm from '~/components/CommentForm/CommentForm'
import CommentList from '~/components/CommentList/CommentList'
-import { postMenuModalsData, deletePostMutation } from '~/components/utils/PostHelpers'
+import {
+ postMenuModalsData,
+ deletePostMutation,
+ sortTagsAlphabetically,
+} from '~/components/utils/PostHelpers'
import PostQuery from '~/graphql/PostQuery'
import HcEmotions from '~/components/Emotions/Emotions'
import PostMutations from '~/graphql/PostMutations'
@@ -179,6 +183,9 @@ export default {
if (!author) return false
return this.$store.getters['auth/user'].id === author.id
},
+ sortedTags() {
+ return sortTagsAlphabetically(this.post.tags)
+ },
},
methods: {
reply(message) {
diff --git a/webapp/pages/post/_id/_slug/more-info.vue b/webapp/pages/post/_id/_slug/more-info.vue
index 702de29ed..b99552667 100644
--- a/webapp/pages/post/_id/_slug/more-info.vue
+++ b/webapp/pages/post/_id/_slug/more-info.vue
@@ -14,7 +14,7 @@
{{ $t('post.moreInfo.titleOfHashtagsSection') }}
-
+
{{ $t('post.moreInfo.titleOfRelatedContributionsSection') }}
@@ -44,6 +44,7 @@ import HcHashtag from '~/components/Hashtag/Hashtag'
import { relatedContributions } from '~/graphql/PostQuery'
import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
+import { sortTagsAlphabetically } from '~/components/utils/PostHelpers'
export default {
transition: {
@@ -62,6 +63,9 @@ export default {
post() {
return this.Post ? this.Post[0] || {} : {}
},
+ sortedTags() {
+ return sortTagsAlphabetically(this.post.tags)
+ },
},
methods: {
removePostFromList(deletedPost) {