Merge branch 'main' of https://github.com/Sybit-Education/bk2wi-2023

components.d.ts

@@ -32,8 +32,8 @@ declare module 'vue' {
     BPlaceholderWrapper: typeof import('bootstrap-vue-next')['BPlaceholderWrapper']
     BRow: typeof import('bootstrap-vue-next')['BRow']
     ContentItem: typeof import('./src/components/ContentItem.vue')['default']
-    EventItem: typeof import('./src/components/events/EventItem.vue')['default']
-    EventList: typeof import('./src/components/events/EventList.vue')['default']
+    EventItem: typeof import('./src/components/event/EventItem.vue')['default']
+    EventList: typeof import('./src/components/event/EventList.vue')['default']
     FilterSidebar: typeof import('./src/components/FilterSidebar.vue')['default']
     HomeContent: typeof import('./src/components/HomeContent.vue')['default']
     LocaleeHeader: typeof import('./src/components/LocaleeHeader.vue')['default']

src/components/HomeContent.vue

@@ -24,9 +24,10 @@
 </template>
 
 <script setup lang="ts">
-import EventList from './events/EventList.vue'
+
 import VerleihList from './verleih/VerleihList.vue'
 import BarList from './bar/BarList.vue'
+import EventList from './event/EventList.vue'
 
 
 const props = defineProps(['foundEntry', 'entries'])

src/components/event/EventItem.vue

@@ -0,0 +1,33 @@
+<template>
+    <b-card :img-src="image" img-top>
+        <b-card-title>{{ event.name }}</b-card-title>
+        <!-- <b-card-text>{{event.beschreibung}} </b-card-text> -->
+    </b-card>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { mapState } from "pinia";
+import { useEventItemStore } from '@/stores/eventItem'
+
+
+export default defineComponent({
+    name: 'EventItem',
+    props: {
+        event: {
+            type: Object,
+            required: true,
+        }
+    },
+    computed: {
+        ...mapState(useEventItemStore, {
+            imageById: (state) => state.imageById
+        }),    
+        image() : string {
+            return this.imageById(this.event.id) as string;
+        },
+        detailUrl () {
+            return '/event/' + this.event.id
+        }
+    }
+})
+</script>

src/components/events/EventList.vue → src/components/event/EventList.vue

@@ -15,9 +15,9 @@
     </b-card-group>
 </template>
 <script lang="ts">
-import type EventItem from '@/models/EventItem';
-import { useEventItemStore } from '@/stores/eventItem';
-import { useLoadingStore } from '@/stores/loading';
+import type EventItem from '../../models/EventItem';
+import { useEventItemStore } from '../../stores/eventItem';
+import { useLoadingStore } from '../../stores/loading';
 import { mapState } from 'pinia';
 import { defineComponent } from 'vue';
 

src/models/EventItem.ts

@@ -2,7 +2,7 @@ export default interface EventItem {
     id: string;
     name: string;
     bild: any;
-    beschreinung: string;
+    beschreibung: string;
     adresse: string;
     ort: string;
     plz: string;

src/router/index.ts

@@ -34,6 +34,16 @@ const router = createRouter({
       path: '/bar/:id',
       name: 'bar-detail',
       component: () => import('../views/BarDetailView.vue')
+    },
+    {
+      path: '/event',
+      name: 'event',
+      component: () => import('../views/EventListView.vue')
+    },
+    {
+      path: '/event/:id',
+      name: 'event-detail',
+      component: () => import('../views/EventDetailView.vue')
     }
   ]
 })

src/services/event.service.ts

@@ -21,7 +21,7 @@ const eventService = {
                 id: partialRecord.id,
                 name: partialRecord.get('Name') as string,
                 bild: partialRecord.get('Bild') as any,
-                beschreinung: partialRecord.get('Beschreibung') as string,
+                beschreibung: partialRecord.get('Beschreibung') as string,
                 adresse: partialRecord.get('Adresse') as string,
                 ort: partialRecord.get('Ort') as string,
                 plz: partialRecord.get('PLZ') as string,

src/views/EventDetailView.vue

@@ -9,7 +9,7 @@
       <div>
         <h1>{{ events.name }}</h1>
         <b-img :src="image" fluid-grow />
-        <p>{{ events.notes }}</p>
+
 
         <h3>Adresse</h3>
         <address>

src/views/EventListView.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import EventList from '../components/event/EventList.vue'
+
+</script>
+
+<template>
+
+<BContainer>
+  <BRow>
+    <!-- <BCol>
+      <FilterSidebar />
+    </BCol > -->
+      <!-- <BCol>
+        <SearchBar :searchQuery="searchQuery" @searchQuery="searchQuery = $event" />
+    </BCol> -->
+    <!-- <BCol>
+      icon
+    </BCol > -->
+  </BRow>
+  <BRow>
+<HomeContent :entries="entries" :foundEntry="searchQuery" />
+  </BRow>
+</BContainer>
+
+</template>