diff --git a/webapp/components/PostTeaser/PostTeaser.vue b/webapp/components/PostTeaser/PostTeaser.vue index 5c4cc787b..183e366d3 100644 --- a/webapp/components/PostTeaser/PostTeaser.vue +++ b/webapp/components/PostTeaser/PostTeaser.vue @@ -25,6 +25,31 @@

{{ post.title }}

+ + + + + + + {{ $t('post.viewEvent.eventIsOnline') }} + + + {{ post.eventLocationName }} + + + + + + + {{ getEventDateString }} + + + +
@@ -92,6 +117,7 @@ import UserTeaser from '~/components/UserTeaser/UserTeaser' import { mapGetters } from 'vuex' import PostMutations from '~/graphql/PostMutations' import { postMenuModalsData, deletePostMutation } from '~/components/utils/PostHelpers' +import { format } from 'date-fns' export default { name: 'PostTeaser', @@ -158,6 +184,15 @@ export default { if (this.post.postType[0] === 'Event') return this.$t('post.event') return this.$t('post.name') }, + getEventDateString() { + if (this.post.eventEnd) { + const eventStart = format(new Date(this.post.eventStart), 'dd.MM.') + const eventEnd = format(new Date(this.post.eventEnd), 'dd.MM.yyyy') + return eventStart + ' - ' + eventEnd + } else { + return format(new Date(this.post.eventStart), 'dd.MM.yyyy') + } + }, }, methods: { async deletePostCallback() { @@ -241,6 +276,12 @@ export default { margin-bottom: $space-small; } + & .event-info { + display: flex; + align-items: center; + gap: 2px; + } + > .footer { display: flex; justify-content: space-between; diff --git a/webapp/graphql/PostQuery.js b/webapp/graphql/PostQuery.js index 1857cc1d7..83eec2a30 100644 --- a/webapp/graphql/PostQuery.js +++ b/webapp/graphql/PostQuery.js @@ -74,8 +74,10 @@ export const filterPosts = (i18n) => { Post(filter: $filter, first: $first, offset: $offset, orderBy: $orderBy) { postType eventStart + eventEnd eventVenue eventLocationName + eventIsOnline ...post ...postCounts ...tagsCategoriesAndPinned