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) {