Move date time range to an own component

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 []
           },

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>

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">
+            <date-range
-              <base-icon name="calendar" data-test="calendar" />
+              class="event-info"
-              <span>{{ getEventDateString }}</span>
+              size="small"
-            </ds-text>
+              :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,

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">
+              <date-range
-                <div>
+                class="event-info"
-                  <div>
+                :startDate="post.eventStart"
-                    <base-icon name="calendar" data-test="calendar" />
+                :endDate="post.eventEnd"
-                    <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-->
             </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;