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] 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 000000000..ede0457ab
--- /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 615b18054..c76ebfc7b 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 82c1decec..884ddb6c2 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,
   },