diff --git a/webapp/pages/post/_id/_slug/index.spec.js b/webapp/pages/post/_id/_slug/index.spec.js
index 12a84d4a6..176041ecb 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
+ let wrappers = wrapper.findAll(HcHashtag).wrappers
+ // Exctract ID properties (tag names) from component.
+ let ids = []
+ wrappers.forEach((x) => {
+ ids.push({
+ id: x.props().id,
+ })
+ })
+ // Compare extracted IDs with solution.
+ let 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..2082cea0c 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -64,7 +64,7 @@
-
+
@@ -179,6 +179,17 @@ export default {
if (!author) return false
return this.$store.getters['auth/user'].id === author.id
},
+ sortedTags() {
+ // Make sure the property is valid.
+ if (!this.post.tags || !this.post.tags.length) return false
+ // Sorting actually happens in place but that should not be a problem.
+ return this.post.tags.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
+ })
+ },
},
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..5dcaf4029 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') }}
@@ -62,6 +62,17 @@ export default {
post() {
return this.Post ? this.Post[0] || {} : {}
},
+ sortedTags() {
+ // Make sure the property is valid.
+ if (!this.post.tags || !this.post.tags.length) return false
+ // Sorting actually happens in place but that should not be a problem.
+ return this.post.tags.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
+ })
+ },
},
methods: {
removePostFromList(deletedPost) {