Merge branch '6267-eventteaser-design-optimization' into event-master

webapp/components/PostTeaser/PostTeaser.vue

@@ -25,6 +25,31 @@
         </div>
       </client-only>
       <h2 class="title hyphenate-text">{{ post.title }}</h2>
+      <ds-space
+        v-if="post && post.postType[0] === 'Event'"
+        margin-bottom="small"
+        style="padding: 5px"
+      >
+        <ds-flex>
+          <ds-flex-item>
+            <ds-text align="left" size="small" color="soft" class="event-info">
+              <base-icon name="map-marker" data-test="map-marker" />
+              <span v-if="post.eventIsOnline">
+                {{ $t('post.viewEvent.eventIsOnline') }}
+              </span>
+              <span v-else-if="post.eventLocationName">
+                {{ post.eventLocationName }}
+              </span>
+            </ds-text>
+          </ds-flex-item>
+          <ds-flex-item>
+            <ds-text align="left" color="soft" size="small" class="event-info">
+              <base-icon name="calendar" data-test="calendar" />
+              <span>{{ getEventDateString }}</span>
+            </ds-text>
+          </ds-flex-item>
+        </ds-flex>
+      </ds-space>
       <!-- TODO: replace editor content with tiptap render view -->
       <!-- eslint-disable-next-line vue/no-v-html -->
       <div class="content hyphenate-text" v-html="excerpt" />
@@ -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;

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