UI Bugfixes

software/src/components/basics/cardViewHorizontal.vue

@@ -3,6 +3,8 @@ defineProps({
   /** Image to display on the left side (if prepend slot is not in use) */
   image: String,
 
+  title: String,
+
   /** Make the CardView click- and hoverable */
   link: {
     type: Boolean,
@@ -16,9 +18,7 @@ defineProps({
   height: {
     type: Number,
     default: 140
-  },
-
-  colorHeader: String
+  }
 })
 </script>
 
@@ -76,7 +76,15 @@ defineProps({
           <v-sheet
             :height="height"
           >
-            <slot name="content" />
+            <div>
+              <div class="text-h4 font-weight-black pt-2 h-100">
+                {{ title }}
+              </div>
+
+              <div class="text-disabled">
+                <slot name="content" />
+              </div>
+            </div>
           </v-sheet>
         </v-skeleton-loader>
       </v-col>

software/src/components/pageParts/concertListItem.vue

@@ -1,20 +1,43 @@
 <script setup lang="ts">
 import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
-import { ConcertModel } from '@/data/models/acts/concertModel';
 
 defineProps({
-  concert: ConcertModel,
+  /** Date of the concert */
   date: String,
+
+  /** Card title */
   title: String,
-  description: String,
+
+  /** Name of the event */
   eventName: String,
+
+  /** Price of the cheapest ticket option */
   price: Number,
-  loading: Boolean
+
+  /** Number of available tickets, important to mark a concert as "sold out" */
+  inStock: Number,
+
+  /** Display text parts as skeleton */
+  loading: Boolean,
+
+  /** Show or hide the button on the right side */
+  showButton: {
+    type: Boolean,
+    default: true
+  },
+
+  /** Behaviour if user clicks on button or card */
+  onClick: Function
 })
 </script>
 
 <template>
-  <card-view-horizontal v-if="!loading">
+  <card-view-horizontal
+    :title="title"
+    v-if="!loading"
+    :link="showButton && inStock > 0"
+    @click="showButton && inStock > 0 ? onClick() : () => {}"
+  >
     <template #prepend>
       <div>
         <div class="text-h4">
@@ -32,28 +55,25 @@ defineProps({
     </template>
 
     <template #content>
-      <div>
-        <div class="text-h4 font-weight-black pt-2 h-100">
-          {{ title }}
-        </div>
-
-        <div class="text-disabled">
-          <slot name="description" />
-        </div>
-      </div>
+      <slot name="description" />
     </template>
 
     <template #append>
       <div>
-        <div class="text-secondary font-weight-medium text-body-1 pb-1">
+        <div class="text-secondary font-weight-medium text-h6 pb-1">
           {{ $t('from') + ' ' + price.toFixed(2) + ' €' }}
         </div>
 
-        <div>
+        <div v-if="inStock == 0 && showButton" class="text-h6">
+          {{ $t('soldOut') }}
+        </div>
+
+        <div v-else-if="showButton">
           <v-btn variant="flat" color="secondary">
             {{ $t('goToTheConcert') }}
           </v-btn>
         </div>
+
       </div>
     </template>
   </card-view-horizontal>

software/src/components/pageParts/eventListItem.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { createDateRangeString, lowestTicketPrice } from '@/scripts/concertScripts';
+import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
+import { EventModel } from '@/data/models/acts/eventModel';
+import { useRouter } from 'vue-router';
+
+const router = useRouter()
+
+defineProps({
+  /** Event to display */
+  event: EventModel,
+
+  /** Display text parts as skeleton */
+  loading: Boolean
+})
+</script>
+
+<template>
+  <card-view-horizontal
+    v-if="!loading"
+    :title="event.band.name + ' - ' + event.name"
+    :image="'http://localhost:3000/static/' + event.image"
+    @click="router.push('/bands/' + event.band.name.replaceAll(' ', '-').toLowerCase())"
+  >
+    <template #content>
+      <div class="oneLine my-2 pr-4 text-disabled" >
+        {{ event.band.descriptionDe }}
+        <!-- todo: Englisch text -->
+      </div>
+
+      <div class="text-disabled oneLine">
+        {{ createDateRangeString(event) }} - {{ event.concerts.length }} 
+          {{ $t('concert', event.concerts.length) }}
+      </div>
+    </template>
+
+    <template #append>
+      <div>
+        <div class="text-secondary font-weight-medium text-h6 pb-1">
+          {{ $t('from') + ' ' + lowestTicketPrice(event) + ' €' }}
+        </div>
+
+        <div>
+          <v-btn variant="flat" color="secondary">
+            {{ event.concerts.length }} {{ $t('concert', event.concerts.length) }}
+          </v-btn>
+        </div>
+      </div>
+    </template>
+  </card-view-horizontal>
+
+  <card-view-horizontal
+    :loading="loading"
+    v-else
+  >
+    <v-skeleton-loader
+      type="text" />
+  </card-view-horizontal>
+</template>
+
+<style scoped>
+.oneLine {
+   overflow: hidden;
+   display: -webkit-box;
+   -webkit-line-clamp: 1; /* number of lines to show */
+           line-clamp: 1; 
+   -webkit-box-orient: vertical;
+}
+</style>