From 7ad74b139863ba518ec74d24fcded15c873a681d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 7 Jun 2023 14:06:28 +0200
Subject: [PATCH 01/11] Move date time range to an own component

---
 .../ContributionForm/ContributionForm.vue     |  15 ++-
 webapp/components/DateRange/DateRange.vue     | 114 ++++++++++++++++++
 webapp/components/PostTeaser/PostTeaser.vue   |  23 ++--
 webapp/pages/post/_id/_slug/index.vue         |  56 ++-------
 4 files changed, 146 insertions(+), 62 deletions(-)
 create mode 100644 webapp/components/DateRange/DateRange.vue

diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index ae1a7654bd..b1b9b3935a 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -286,7 +286,7 @@ export default {
           },
         },
         eventStart: { required: !!this.createEvent },
-        eventVenue: { 
+        eventVenue: {
           required: !!this.createEvent,
           min: 3,
           max: 100,
@@ -295,10 +295,13 @@ export default {
               return [new Error(this.$t('common.validations.eventVenueNotEmpty'))]
             }
             if (value.length < 3 || value.length > 100) {
-              return [new Error(this.$t('common.validations.eventVenueLength', { min: 3, max: 100 }))]
+              return [
+                new Error(this.$t('common.validations.eventVenueLength', { min: 3, max: 100 })),
+              ]
             }
             return []
-          }, },
+          },
+        },
         eventLocationName: {
           required: !!this.createEvent && !this.formData.eventIsOnline,
           min: 3,
@@ -308,7 +311,11 @@ export default {
               return [new Error(this.$t('common.validations.eventLocationNameNotEmpty'))]
             }
             if (value.length < 3 || value.length > 100) {
-              return [new Error(this.$t('common.validations.eventLocationNameLength', { min: 3, max: 100 }))]
+              return [
+                new Error(
+                  this.$t('common.validations.eventLocationNameLength', { min: 3, max: 100 }),
+                ),
+              ]
             }
             return []
           },
diff --git a/webapp/components/DateRange/DateRange.vue b/webapp/components/DateRange/DateRange.vue
new file mode 100644
index 0000000000..be895f31a7
--- /dev/null
+++ b/webapp/components/DateRange/DateRange.vue
@@ -0,0 +1,114 @@
+<template>
+  <ds-text class="date-range" align="left" color="soft" :size="size">
+    <div>
+      <div>
+        <base-icon name="calendar" data-test="calendar" />
+        {{ getStartDateString }}
+      </div>
+      <div>
+        <base-icon name="clock" data-test="calendar" />
+        {{
+          getStartTimeString +
+          (this.endDateAsDate && isSameDateButMayHaveTimeDifference
+            ? '&mdash;' + getEndTimeString
+            : '')
+        }}
+      </div>
+    </div>
+    <template v-if="!isSameDateButMayHaveTimeDifference">
+      &nbsp;&mdash;&nbsp;
+      <div>
+        <div>
+          <base-icon name="calendar" data-test="calendar" />
+          {{ getEndDateString }}
+        </div>
+        <div>
+          <base-icon name="clock" data-test="calendar" />
+          {{ getEndTimeString }}
+        </div>
+      </div>
+    </template>
+  </ds-text>
+</template>
+
+<script>
+import { format } from 'date-fns'
+
+export default {
+  name: 'DateRange',
+  props: {
+    /**
+     * The size used for the text.
+     * @options small|base|large|x-large|xx-large|xxx-large
+     */
+    size: {
+      type: String,
+      default: null,
+      validator: (value) => {
+        return value.match(/(small|base|large|x-large|xx-large|xxx-large)/)
+      },
+    },
+    startDate: {
+      type: String,
+      require: true,
+    },
+    endDate: {
+      type: String,
+      default: null,
+    },
+  },
+  computed: {
+    startDateAsDate() {
+      return new Date(this.startDate)
+    },
+    endDateAsDate() {
+      return this.endDate ? new Date(this.endDate) : null
+    },
+    isSameDateButMayHaveTimeDifference() {
+      return (
+        !this.endDateAsDate ||
+        (this.endDateAsDate.getYear() === this.startDateAsDate.getYear() &&
+          this.endDateAsDate.getMonth() === this.startDateAsDate.getMonth() &&
+          this.endDateAsDate.getDay() === this.startDateAsDate.getDay())
+      )
+    },
+    // isSameYear() {
+    //   return this.isSameDate || (!this.endDateAsDate || this.endDateAsDate.getYear() === this.startDateAsDate.getYear())
+    // },
+    getStartDateString() {
+      const isSameYear =
+        this.isSameDateButMayHaveTimeDifference ||
+        !this.endDateAsDate ||
+        this.endDateAsDate.getYear() === this.startDateAsDate.getYear()
+      const isSameMonth =
+        isSameYear &&
+        (!this.endDateAsDate || this.endDateAsDate.getMonth() === this.startDateAsDate.getMonth())
+      const startDateFormat = this.isSameDateButMayHaveTimeDifference
+        ? 'dd.MM.yyyy'
+        : isSameMonth
+        ? 'dd.'
+        : isSameYear
+        ? 'dd.MM.'
+        : 'dd.MM.yyyy'
+      return format(this.startDateAsDate, startDateFormat)
+    },
+    getStartTimeString() {
+      return format(new Date(this.startDate), 'HH:mm')
+    },
+    getEndDateString() {
+      return this.endDate ? format(new Date(this.endDate), 'dd.MM.yyyy') : ''
+    },
+    getEndTimeString() {
+      return this.endDate ? format(new Date(this.endDate), 'HH:mm') : ''
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.date-range {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+</style>
diff --git a/webapp/components/PostTeaser/PostTeaser.vue b/webapp/components/PostTeaser/PostTeaser.vue
index 604fb121fb..5f18d5d5ba 100644
--- a/webapp/components/PostTeaser/PostTeaser.vue
+++ b/webapp/components/PostTeaser/PostTeaser.vue
@@ -44,10 +44,12 @@
             </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>
+            <date-range
+              class="event-info"
+              size="small"
+              :startDate="post.eventStart"
+              :endDate="post.eventEnd"
+            />
           </ds-flex-item>
         </ds-flex>
       </ds-space>
@@ -113,12 +115,12 @@
 import Category from '~/components/Category'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
+import DateRange from '~/components/DateRange/DateRange'
 import HcRibbon from '~/components/Ribbon'
 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',
@@ -126,6 +128,7 @@ export default {
     Category,
     ContentMenu,
     CounterIcon,
+    DateRange,
     HcRibbon,
     UserTeaser,
   },
@@ -185,15 +188,6 @@ 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() {
@@ -228,6 +222,7 @@ export default {
   },
 }
 </script>
+
 <style lang="scss">
 .post-teaser,
 .post-teaser:hover,
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index 4e6476220c..2791402710 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -54,7 +54,7 @@
             </section>
             <ds-space margin-bottom="small" />
             <h2 class="title hyphenate-text">{{ post.title }}</h2>
-            <!-- Eventdata -->
+            <!-- event data -->
             <ds-space
               v-if="post && post.postType[0] === 'Event'"
               margin-bottom="small"
@@ -63,46 +63,24 @@
               <ds-text align="left" color="soft">
                 <base-icon name="map-marker" data-test="map-marker" />
                 <span v-if="post.eventVenue">{{ post.eventVenue }}</span>
+                <span v-if="post.eventVenue">&mdash;</span>
                 <span v-if="!post.eventIsOnline">
-                  <span v-if="post.eventVenue">&mdash;</span>
                   {{ post.eventLocationName }}
                 </span>
                 <span v-else>
-                  <span v-if="post.eventVenue">&mdash;</span>
                   {{ $t('post.viewEvent.eventIsOnline') }}
                 </span>
               </ds-text>
-              <ds-text align="left" color="soft" class="event-info">
-                <div>
-                  <div>
-                    <base-icon name="calendar" data-test="calendar" />
-                    <span>{{ getEventStartDateString }}</span>
-                  </div>
-                  <div>
-                    <base-icon name="clock" data-test="calendar" />
-                    <span>{{ getEventStartTimeString }}</span>
-                  </div>
-                </div>
-                <div v-if="getEventEndDateString">&nbsp;&mdash;&nbsp;</div>
-                <div v-if="getEventEndDateString">
-                  <div>
-                    <base-icon name="calendar" data-test="calendar" />
-                    <span>{{ getEventEndDateString }}</span>
-                  </div>
-                  <div>
-                    <base-icon name="clock" data-test="calendar" />
-                    <span>{{ getEventEndTimeString }}</span>
-                  </div>
-                </div>
-              </ds-text>
-              <!--ds-text v-if="getEventTimeString" align="left" color="soft" class="event-info">
-                <base-icon name="clock" data-test="calendar" />
-                <span>{{ getEventTimeString }}</span>
-              </ds-text-->
+              <date-range
+                class="event-info"
+                :startDate="post.eventStart"
+                :endDate="post.eventEnd"
+              />
             </ds-space>
             <ds-space margin-bottom="small" />
+            <!-- content -->
             <content-viewer class="content hyphenate-text" :content="post.content" />
-            <!-- Categories -->
+            <!-- categories -->
             <div v-if="categoriesActive" class="categories">
               <ds-space margin="xx-large" />
               <ds-space margin="xx-small" />
@@ -178,6 +156,7 @@ import ContentViewer from '~/components/Editor/ContentViewer'
 import HcCategory from '~/components/Category'
 import HcHashtag from '~/components/Hashtag/Hashtag'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
+import DateRange from '~/components/DateRange/DateRange'
 import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import HcShoutButton from '~/components/ShoutButton.vue'
 import CommentForm from '~/components/CommentForm/CommentForm'
@@ -193,7 +172,6 @@ import { groupQuery } from '~/graphql/groups'
 import PostMutations from '~/graphql/PostMutations'
 import links from '~/constants/links.js'
 import SortCategories from '~/mixins/sortCategoriesMixin.js'
-import { format } from 'date-fns'
 
 export default {
   name: 'PostSlug',
@@ -206,6 +184,7 @@ export default {
     CommentForm,
     CommentList,
     ContentViewer,
+    DateRange,
     HcCategory,
     HcHashtag,
     HcShoutButton,
@@ -310,18 +289,6 @@ export default {
         !this.post.group || (this.group && ['usual', 'admin', 'owner'].includes(this.group.myRole))
       )
     },
-    getEventStartDateString() {
-      return format(new Date(this.post.eventStart), 'dd.MM.yyyy')
-    },
-    getEventStartTimeString() {
-      return format(new Date(this.post.eventStart), 'HH:mm')
-    },
-    getEventEndDateString() {
-      return this.post.eventEnd ? format(new Date(this.post.eventEnd), 'dd.MM.yyyy') : ''
-    },
-    getEventEndTimeString() {
-      return this.post.eventEnd ? format(new Date(this.post.eventEnd), 'HH:mm') : ''
-    },
   },
   methods: {
     reply(message) {
@@ -403,6 +370,7 @@ export default {
   },
 }
 </script>
+
 <style lang="scss">
 .post-side-navigation {
   position: sticky;

From a7fc5536c5ce061f9109052a6a407f0ec2ac6eab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 7 Jun 2023 14:49:47 +0200
Subject: [PATCH 02/11] Use iSameDate

---
 webapp/components/DateRange/DateRange.vue | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/webapp/components/DateRange/DateRange.vue b/webapp/components/DateRange/DateRange.vue
index be895f31a7..f653cee2b8 100644
--- a/webapp/components/DateRange/DateRange.vue
+++ b/webapp/components/DateRange/DateRange.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script>
-import { format } from 'date-fns'
+import { format, isSameDay } from 'date-fns'
 
 export default {
   name: 'DateRange',
@@ -65,16 +65,8 @@ export default {
       return this.endDate ? new Date(this.endDate) : null
     },
     isSameDateButMayHaveTimeDifference() {
-      return (
-        !this.endDateAsDate ||
-        (this.endDateAsDate.getYear() === this.startDateAsDate.getYear() &&
-          this.endDateAsDate.getMonth() === this.startDateAsDate.getMonth() &&
-          this.endDateAsDate.getDay() === this.startDateAsDate.getDay())
-      )
+      return !this.endDateAsDate || isSameDay(this.endDateAsDate, this.startDateAsDate)
     },
-    // isSameYear() {
-    //   return this.isSameDate || (!this.endDateAsDate || this.endDateAsDate.getYear() === this.startDateAsDate.getYear())
-    // },
     getStartDateString() {
       const isSameYear =
         this.isSameDateButMayHaveTimeDifference ||

From 9346a6b543998122b124c75b7bd672ecb6ff3d72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 7 Jun 2023 15:34:17 +0200
Subject: [PATCH 03/11] Refine date time range

---
 webapp/components/DateRange/DateRange.vue | 32 ++++++++---------------
 1 file changed, 11 insertions(+), 21 deletions(-)

diff --git a/webapp/components/DateRange/DateRange.vue b/webapp/components/DateRange/DateRange.vue
index f653cee2b8..e05249e9a1 100644
--- a/webapp/components/DateRange/DateRange.vue
+++ b/webapp/components/DateRange/DateRange.vue
@@ -8,14 +8,11 @@
       <div>
         <base-icon name="clock" data-test="calendar" />
         {{
-          getStartTimeString +
-          (this.endDateAsDate && isSameDateButMayHaveTimeDifference
-            ? '&mdash;' + getEndTimeString
-            : '')
+          getStartTimeString + (this.endDateAsDate && isSameDay ? '&mdash;' + getEndTimeString : '')
         }}
       </div>
     </div>
-    <template v-if="!isSameDateButMayHaveTimeDifference">
+    <template v-if="!isSameDay">
       &nbsp;&mdash;&nbsp;
       <div>
         <div>
@@ -32,7 +29,7 @@
 </template>
 
 <script>
-import { format, isSameDay } from 'date-fns'
+import { format, isSameDay, isSameYear } from 'date-fns'
 
 export default {
   name: 'DateRange',
@@ -64,24 +61,17 @@ export default {
     endDateAsDate() {
       return this.endDate ? new Date(this.endDate) : null
     },
-    isSameDateButMayHaveTimeDifference() {
+    isSameDay() {
       return !this.endDateAsDate || isSameDay(this.endDateAsDate, this.startDateAsDate)
     },
+    isSameYear() {
+      return !this.endDateAsDate || isSameYear(this.endDateAsDate, this.startDateAsDate)
+    },
     getStartDateString() {
-      const isSameYear =
-        this.isSameDateButMayHaveTimeDifference ||
-        !this.endDateAsDate ||
-        this.endDateAsDate.getYear() === this.startDateAsDate.getYear()
-      const isSameMonth =
-        isSameYear &&
-        (!this.endDateAsDate || this.endDateAsDate.getMonth() === this.startDateAsDate.getMonth())
-      const startDateFormat = this.isSameDateButMayHaveTimeDifference
-        ? 'dd.MM.yyyy'
-        : isSameMonth
-        ? 'dd.'
-        : isSameYear
-        ? 'dd.MM.'
-        : 'dd.MM.yyyy'
+      let startDateFormat = 'dd.MM.yyyy'
+      if (!this.isSameDay && this.isSameYear) {
+        startDateFormat = 'dd.MM.'
+      }
       return format(this.startDateAsDate, startDateFormat)
     },
     getStartTimeString() {

From 52cf19d5fc1f7ad02bc2b392b19e2da22440cc73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 7 Jun 2023 15:46:18 +0200
Subject: [PATCH 04/11] Rename component 'DateRange' to 'DateTimeRange'

---
 .../DateRange.vue => DateTimeRange/DateTimeRange.vue}       | 2 +-
 webapp/components/PostTeaser/PostTeaser.vue                 | 6 +++---
 webapp/pages/post/_id/_slug/index.vue                       | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)
 rename webapp/components/{DateRange/DateRange.vue => DateTimeRange/DateTimeRange.vue} (98%)

diff --git a/webapp/components/DateRange/DateRange.vue b/webapp/components/DateTimeRange/DateTimeRange.vue
similarity index 98%
rename from webapp/components/DateRange/DateRange.vue
rename to webapp/components/DateTimeRange/DateTimeRange.vue
index e05249e9a1..87423e65f0 100644
--- a/webapp/components/DateRange/DateRange.vue
+++ b/webapp/components/DateTimeRange/DateTimeRange.vue
@@ -32,7 +32,7 @@
 import { format, isSameDay, isSameYear } from 'date-fns'
 
 export default {
-  name: 'DateRange',
+  name: 'DateTimeRange',
   props: {
     /**
      * The size used for the text.
diff --git a/webapp/components/PostTeaser/PostTeaser.vue b/webapp/components/PostTeaser/PostTeaser.vue
index 5f18d5d5ba..5e44de744f 100644
--- a/webapp/components/PostTeaser/PostTeaser.vue
+++ b/webapp/components/PostTeaser/PostTeaser.vue
@@ -44,7 +44,7 @@
             </ds-text>
           </ds-flex-item>
           <ds-flex-item>
-            <date-range
+            <date-time-range
               class="event-info"
               size="small"
               :startDate="post.eventStart"
@@ -115,7 +115,7 @@
 import Category from '~/components/Category'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
-import DateRange from '~/components/DateRange/DateRange'
+import DateTimeRange from '~/components/DateTimeRange/DateTimeRange'
 import HcRibbon from '~/components/Ribbon'
 import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import { mapGetters } from 'vuex'
@@ -128,7 +128,7 @@ export default {
     Category,
     ContentMenu,
     CounterIcon,
-    DateRange,
+    DateTimeRange,
     HcRibbon,
     UserTeaser,
   },
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index 2791402710..82c1decec1 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -71,7 +71,7 @@
                   {{ $t('post.viewEvent.eventIsOnline') }}
                 </span>
               </ds-text>
-              <date-range
+              <date-time-range
                 class="event-info"
                 :startDate="post.eventStart"
                 :endDate="post.eventEnd"
@@ -156,7 +156,7 @@ import ContentViewer from '~/components/Editor/ContentViewer'
 import HcCategory from '~/components/Category'
 import HcHashtag from '~/components/Hashtag/Hashtag'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
-import DateRange from '~/components/DateRange/DateRange'
+import DateTimeRange from '~/components/DateTimeRange/DateTimeRange'
 import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import HcShoutButton from '~/components/ShoutButton.vue'
 import CommentForm from '~/components/CommentForm/CommentForm'
@@ -184,7 +184,7 @@ export default {
     CommentForm,
     CommentList,
     ContentViewer,
-    DateRange,
+    DateTimeRange,
     HcCategory,
     HcHashtag,
     HcShoutButton,

From 2a4046555b6e06d7df538e0f1b4e02daa9633f1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 7 Jun 2023 15:47:34 +0200
Subject: [PATCH 05/11] Cleanup

---
 webapp/components/PostTeaser/PostTeaser.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/webapp/components/PostTeaser/PostTeaser.vue b/webapp/components/PostTeaser/PostTeaser.vue
index 5e44de744f..615b180548 100644
--- a/webapp/components/PostTeaser/PostTeaser.vue
+++ b/webapp/components/PostTeaser/PostTeaser.vue
@@ -11,7 +11,6 @@
       }"
       :highlight="isPinned"
     >
-      <!-- {{ post }} -->
       <template v-if="post.image" #heroImage>
         <img :src="post.image | proxyApiUrl" class="image" />
       </template>

From ed2cdff8309a911668088d2cc182f8e2fe11a2fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 7 Jun 2023 16:12:39 +0200
Subject: [PATCH 06/11] Fix class namimg

---
 webapp/components/DateTimeRange/DateTimeRange.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/components/DateTimeRange/DateTimeRange.vue b/webapp/components/DateTimeRange/DateTimeRange.vue
index 87423e65f0..8d318709a4 100644
--- a/webapp/components/DateTimeRange/DateTimeRange.vue
+++ b/webapp/components/DateTimeRange/DateTimeRange.vue
@@ -1,5 +1,5 @@
 <template>
-  <ds-text class="date-range" align="left" color="soft" :size="size">
+  <ds-text class="date-time-range" align="left" color="soft" :size="size">
     <div>
       <div>
         <base-icon name="calendar" data-test="calendar" />
@@ -88,7 +88,7 @@ export default {
 </script>
 
 <style lang="scss">
-.date-range {
+.date-time-range {
   display: flex;
   align-items: center;
   gap: 2px;

From 04290921fc2c968420a7dce449df19c4b3a6c90d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 7 Jun 2023 16:40:51 +0200
Subject: [PATCH 07/11] Move event location name to an own component

---
 .../LocationTeaser/LocationTeaser.vue         | 52 +++++++++++++++++++
 webapp/components/PostTeaser/PostTeaser.vue   | 18 +++----
 webapp/pages/post/_id/_slug/index.vue         | 23 ++++----
 3 files changed, 71 insertions(+), 22 deletions(-)
 create mode 100644 webapp/components/LocationTeaser/LocationTeaser.vue

diff --git a/webapp/components/LocationTeaser/LocationTeaser.vue b/webapp/components/LocationTeaser/LocationTeaser.vue
new file mode 100644
index 0000000000..ede0457ab9
--- /dev/null
+++ b/webapp/components/LocationTeaser/LocationTeaser.vue
@@ -0,0 +1,52 @@
+<template>
+  <ds-text class="location-teaser" align="left" color="soft" :size="size">
+    <base-icon name="map-marker" data-test="map-marker" />
+    <span v-if="venue">{{ venue }}</span>
+    <span v-if="venue">&nbsp;&mdash;&nbsp;</span>
+    <span v-if="!isOnline">
+      {{ locationName }}
+    </span>
+    <span v-else>
+      {{ $t('post.viewEvent.eventIsOnline') }}
+    </span>
+  </ds-text>
+</template>
+
+<script>
+export default {
+  name: 'LocationTeaser',
+  props: {
+    /**
+     * The size used for the text.
+     * @options small|base|large|x-large|xx-large|xxx-large
+     */
+    size: {
+      type: String,
+      default: null,
+      validator: (value) => {
+        return value.match(/(small|base|large|x-large|xx-large|xxx-large)/)
+      },
+    },
+    venue: {
+      type: String,
+      default: null,
+    },
+    locationName: {
+      type: String,
+      default: null,
+    },
+    isOnline: {
+      type: Boolean,
+      default: false,
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.location-teaser {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+</style>
diff --git a/webapp/components/PostTeaser/PostTeaser.vue b/webapp/components/PostTeaser/PostTeaser.vue
index 615b180548..c76ebfc7b0 100644
--- a/webapp/components/PostTeaser/PostTeaser.vue
+++ b/webapp/components/PostTeaser/PostTeaser.vue
@@ -32,15 +32,13 @@
       >
         <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>
+            <location-teaser
+              class="event-info"
+              size="small"
+              :venue="post.eventVenue"
+              :locationName="post.eventLocationName"
+              :isOnline="post.eventIsOnline"
+            />
           </ds-flex-item>
           <ds-flex-item>
             <date-time-range
@@ -116,6 +114,7 @@ import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
 import DateTimeRange from '~/components/DateTimeRange/DateTimeRange'
 import HcRibbon from '~/components/Ribbon'
+import LocationTeaser from '~/components/LocationTeaser/LocationTeaser'
 import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import { mapGetters } from 'vuex'
 import PostMutations from '~/graphql/PostMutations'
@@ -129,6 +128,7 @@ export default {
     CounterIcon,
     DateTimeRange,
     HcRibbon,
+    LocationTeaser,
     UserTeaser,
   },
   props: {
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index 82c1decec1..884ddb6c29 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -60,17 +60,12 @@
               margin-bottom="small"
               style="padding: 10px"
             >
-              <ds-text align="left" color="soft">
-                <base-icon name="map-marker" data-test="map-marker" />
-                <span v-if="post.eventVenue">{{ post.eventVenue }}</span>
-                <span v-if="post.eventVenue">&mdash;</span>
-                <span v-if="!post.eventIsOnline">
-                  {{ post.eventLocationName }}
-                </span>
-                <span v-else>
-                  {{ $t('post.viewEvent.eventIsOnline') }}
-                </span>
-              </ds-text>
+              <location-teaser
+                class="event-info"
+                :venue="post.eventVenue"
+                :locationName="post.eventLocationName"
+                :isOnline="post.eventIsOnline"
+              />
               <date-time-range
                 class="event-info"
                 :startDate="post.eventStart"
@@ -155,12 +150,13 @@
 import ContentViewer from '~/components/Editor/ContentViewer'
 import HcCategory from '~/components/Category'
 import HcHashtag from '~/components/Hashtag/Hashtag'
+import CommentForm from '~/components/CommentForm/CommentForm'
+import CommentList from '~/components/CommentList/CommentList'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import DateTimeRange from '~/components/DateTimeRange/DateTimeRange'
 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 LocationTeaser from '~/components/LocationTeaser/LocationTeaser'
 import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
 import {
   postMenuModalsData,
@@ -188,6 +184,7 @@ export default {
     HcCategory,
     HcHashtag,
     HcShoutButton,
+    LocationTeaser,
     PageParamsLink,
     UserTeaser,
   },

From 2f87ea0de7a05896af9d71018806989ca1ee1fa3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 7 Jun 2023 17:21:06 +0200
Subject: [PATCH 08/11] Fix linting in backend

---
 backend/src/schema/resolvers/helpers/events.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/src/schema/resolvers/helpers/events.js b/backend/src/schema/resolvers/helpers/events.js
index bb573021f1..835088d8c6 100644
--- a/backend/src/schema/resolvers/helpers/events.js
+++ b/backend/src/schema/resolvers/helpers/events.js
@@ -11,7 +11,7 @@ export const validateEventParams = (params) => {
       validateEventEnd(eventInput.eventStart, eventInput.eventEnd)
       params.eventEnd = eventInput.eventEnd
     } else {
-      params.eventEnd = null 
+      params.eventEnd = null
     }
 
     if (eventInput.eventLocationName && !eventInput.eventVenue) {

From 9ee47c13625295842b882aac681f87d06442e213 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 7 Jun 2023 20:10:10 +0200
Subject: [PATCH 09/11] Fulfill Mogges suggestions

Co-Authored-By: Mogge <moriz.wahl@gmx.de>
---
 .../DateTimeRange/DateTimeRange.vue           | 25 +++++++++++--------
 webapp/locales/de.json                        |  5 ++++
 webapp/locales/en.json                        |  5 ++++
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/webapp/components/DateTimeRange/DateTimeRange.vue b/webapp/components/DateTimeRange/DateTimeRange.vue
index 8d318709a4..de9b442c56 100644
--- a/webapp/components/DateTimeRange/DateTimeRange.vue
+++ b/webapp/components/DateTimeRange/DateTimeRange.vue
@@ -8,11 +8,12 @@
       <div>
         <base-icon name="clock" data-test="calendar" />
         {{
-          getStartTimeString + (this.endDateAsDate && isSameDay ? '&mdash;' + getEndTimeString : '')
+          getStartTimeString +
+          (this.endDateAsDate && isSameDayLocal ? '&mdash;' + getEndTimeString : '')
         }}
       </div>
     </div>
-    <template v-if="!isSameDay">
+    <template v-if="!isSameDayLocal">
       &nbsp;&mdash;&nbsp;
       <div>
         <div>
@@ -61,27 +62,31 @@ export default {
     endDateAsDate() {
       return this.endDate ? new Date(this.endDate) : null
     },
-    isSameDay() {
+    isSameDayLocal() {
       return !this.endDateAsDate || isSameDay(this.endDateAsDate, this.startDateAsDate)
     },
-    isSameYear() {
+    isSameYearLocal() {
       return !this.endDateAsDate || isSameYear(this.endDateAsDate, this.startDateAsDate)
     },
     getStartDateString() {
-      let startDateFormat = 'dd.MM.yyyy'
-      if (!this.isSameDay && this.isSameYear) {
-        startDateFormat = 'dd.MM.'
+      let startDateFormat = this.$t('components.dateTimeRange.yearMonthDay')
+      if (!this.isSameDayLocal && this.isSameYearLocal) {
+        startDateFormat = this.$t('components.dateTimeRange.monthDay')
       }
       return format(this.startDateAsDate, startDateFormat)
     },
     getStartTimeString() {
-      return format(new Date(this.startDate), 'HH:mm')
+      return format(new Date(this.startDate), this.$t('components.dateTimeRange.hourMinute'))
     },
     getEndDateString() {
-      return this.endDate ? format(new Date(this.endDate), 'dd.MM.yyyy') : ''
+      return this.endDate
+        ? format(new Date(this.endDate), this.$t('components.dateTimeRange.yearMonthDay'))
+        : ''
     },
     getEndTimeString() {
-      return this.endDate ? format(new Date(this.endDate), 'HH:mm') : ''
+      return this.endDate
+        ? format(new Date(this.endDate), this.$t('components.dateTimeRange.hourMinute'))
+        : ''
     },
   },
 }
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 1ce7d2f613..68472840aa 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -124,6 +124,11 @@
     "versus": "Versus"
   },
   "components": {
+    "dateTimeRange": {
+      "hourMinute": "HH:mm",
+      "monthDay": "dd.MM.",
+      "yearMonthDay": "dd.MM.yyyy"
+    },
     "password-reset": {
       "change-password": {
         "error": "Passwort Änderung fehlgeschlagen. Möglicherweise falscher Sicherheitscode?",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index f25cc85752..7d49c6e214 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -124,6 +124,11 @@
     "versus": "Versus"
   },
   "components": {
+    "dateTimeRange": {
+      "hourMinute": "HH:mm",
+      "monthDay": "MM/dd/",
+      "yearMonthDay": "MM/dd/yyyy"
+    },
     "password-reset": {
       "change-password": {
         "error": "Changing your password failed. Maybe the security code was not correct?",

From 45f3ec743e4337a8dcd9f19eed1897b2bb73d9ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 8 Jun 2023 16:28:22 +0200
Subject: [PATCH 10/11] =?UTF-8?q?Remove=20on=20locale=20'eventIsOnline'=20?=
 =?UTF-8?q?part=20'=E2=80=A6=20event'=20to=20have=20just=20'Online'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/locales/de.json | 2 +-
 webapp/locales/en.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 68472840aa..29448fa10e 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -757,7 +757,7 @@
     },
     "viewEvent": {
       "eventEnd": "Ende",
-      "eventIsOnline": "Online Veranstaltung",
+      "eventIsOnline": "Online",
       "eventLocationName": "Stadt",
       "eventStart": "Beginn",
       "eventVenue": "Veranstaltungsort",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 7d49c6e214..13a040d36e 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -757,7 +757,7 @@
     },
     "viewEvent": {
       "eventEnd": "End",
-      "eventIsOnline": "Online Event",
+      "eventIsOnline": "Online",
       "eventLocationName": "City",
       "eventStart": "Start",
       "eventVenue": "Venue",

From 1390e4ff361d03a9a4cf3355c723bbe8ab99fac3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Thu, 8 Jun 2023 16:42:35 +0200
Subject: [PATCH 11/11] Change date time range on post teaser to be under
 eachother

---
 webapp/components/PostTeaser/PostTeaser.vue | 32 +++++++++------------
 1 file changed, 13 insertions(+), 19 deletions(-)

diff --git a/webapp/components/PostTeaser/PostTeaser.vue b/webapp/components/PostTeaser/PostTeaser.vue
index c76ebfc7b0..d852d9e23d 100644
--- a/webapp/components/PostTeaser/PostTeaser.vue
+++ b/webapp/components/PostTeaser/PostTeaser.vue
@@ -30,25 +30,19 @@
         margin-bottom="small"
         style="padding: 5px"
       >
-        <ds-flex>
-          <ds-flex-item>
-            <location-teaser
-              class="event-info"
-              size="small"
-              :venue="post.eventVenue"
-              :locationName="post.eventLocationName"
-              :isOnline="post.eventIsOnline"
-            />
-          </ds-flex-item>
-          <ds-flex-item>
-            <date-time-range
-              class="event-info"
-              size="small"
-              :startDate="post.eventStart"
-              :endDate="post.eventEnd"
-            />
-          </ds-flex-item>
-        </ds-flex>
+        <location-teaser
+          class="event-info"
+          size="small"
+          :venue="post.eventVenue"
+          :locationName="post.eventLocationName"
+          :isOnline="post.eventIsOnline"
+        />
+        <date-time-range
+          class="event-info"
+          size="small"
+          :startDate="post.eventStart"
+          :endDate="post.eventEnd"
+        />
       </ds-space>
       <!-- TODO: replace editor content with tiptap render view -->
       <!-- eslint-disable-next-line vue/no-v-html -->