Merge pull request #2 from Sybit-Education/feature/club-detail

Sybit-Education · Nov 27, 2023 · a6d5501 · a6d5501
2 parents 875cd6e + 2acd770
commit a6d5501
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 25 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -18,6 +18,7 @@ declare module 'vue' {
     BContainer: typeof import('bootstrap-vue-next')['BContainer']
     BFormGroup: typeof import('bootstrap-vue-next')['BFormGroup']
     BFormInput: typeof import('bootstrap-vue-next')['BFormInput']
+    BImg: typeof import('bootstrap-vue-next')['BImg']
     BInputGroup: typeof import('bootstrap-vue-next')['BInputGroup']
     BPlaceholder: typeof import('bootstrap-vue-next')['BPlaceholder']
     BPlaceholderCard: typeof import('bootstrap-vue-next')['BPlaceholderCard']

diff --git a/src/components/HomeContent.vue b/src/components/HomeContent.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="contentbox">
+    <div>
 
       <!--
       <div class="item entry" v-for="entry in filteredList()" :key="entry">
@@ -38,10 +38,5 @@ function filteredList() {
 </script>
 
 <style scoped>
-#contentbox {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
 
-  border: 1px solid;
-}
 </style>
diff --git a/src/components/club/ClubItem.vue b/src/components/club/ClubItem.vue
@@ -1,12 +1,15 @@
 <template>
-    <b-card img-src="https://picsum.photos/300/200" img-top>
-        <b-card-title>{{ club.name }}</b-card-title>
-        <b-card-text>Lore ipsum </b-card-text>
-    </b-card>
+    <router-link :to="detailUrl">
+        <b-card :img-src="image" img-top>
+            <b-card-title>{{ club.name }}</b-card-title>
+            <b-card-text>Lore ipsum </b-card-text>
+        </b-card>
+    </router-link>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
-
+import { mapState } from "pinia";
+import { useClubItemStore } from '@/stores/clubItem'
 
 export default defineComponent({
     name: 'ClubItem',
@@ -15,6 +18,17 @@ export default defineComponent({
             type: Object,
             required: true,
         }
+    },
+    computed: {
+        ...mapState(useClubItemStore, {
+            imageById: (state) => state.imageById
+        }),    
+        image() : string {
+            return this.imageById(this.club.id) as string;
+        },
+        detailUrl () {
+            return '/club/' + this.club.id
+        }
     }
 })
 </script>
diff --git a/src/models/ClubItem.ts b/src/models/ClubItem.ts
@@ -1,7 +1,8 @@
 export default interface ClubItem {
     id: string;
     name: string;
-    // bild: bild;
+    notes: string;
+    bild: any;
     adresse: string;
     plz: string;
     ort: string;

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -16,6 +16,11 @@ const router = createRouter({
       // this generates a separate chunk (About.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
       component: () => import('../views/AboutView.vue')
+    },
+    {
+      path: '/club/:id',
+      name: 'club-detail',
+      component: () => import('../views/ClubDetailView.vue')
     }
   ]
 })

diff --git a/src/services/club.service.ts b/src/services/club.service.ts
@@ -18,19 +18,19 @@ const clubService = {
               // This function (`page`) will get called for each page of records.
               partialRecords.forEach((partialRecord) => {
                   resultList.push({
-                  id: partialRecord.id,
-                  name: partialRecord.get('Name') as string,
-                  // bild: partialRecord.get('Bild') as bild,
-                  adresse: partialRecord.get('Adresse') as string,
-                  ort: partialRecord.get('Ort') as string,
-                  plz: partialRecord.get('PLZ') as string,
-                  email: partialRecord.get('E-Mail') as string,
-                  telefon: partialRecord.get('Telefon') as string,
-                  oeffnungstage: partialRecord('Öffnungstage') as string,
-                  oeffnungszeite: partialRecord('Öffnungszieten') as string,
-                  webseite: partialRecord('Webseite') as string,
-
-
+                    id: partialRecord.id,
+                    name: partialRecord.get('Name') as string,
+                    bild: partialRecord.get('Bild') as string,
+                    notes: partialRecord.get('Notes') as string,
+                    // bild: partialRecord.get('Bild') as bild,
+                    adresse: partialRecord.get('Adresse') as string,
+                    ort: partialRecord.get('Ort') as string,
+                    plz: partialRecord.get('PLZ') as string,
+                    email: partialRecord.get('E-Mail') as string,
+                    telefon: partialRecord.get('Telefon') as string,
+                    oeffnungstage: partialRecord.get('Öffnungstage') as string,
+                    oeffnungszeite: partialRecord.get('Öffnungszieten') as string,
+                    webseite: partialRecord.get('Webseite') as string,                                                   
                   })
               })
               // To fetch the next page of records, call `fetchNextPage`.

diff --git a/src/stores/clubItem.ts b/src/stores/clubItem.ts
@@ -16,6 +16,14 @@ export const useClubItemStore = defineStore('club', {
     getAll: (state) => state.clubItemList,
     getById: (state) => (id: string) =>
       state.clubItemList.find((club: ClubItem) => club.id === id),
+    imageById: (state) => (id: string) => {
+        const item = state.clubItemList.find((club: ClubItem) => club.id === id)
+        if (item && item.bild) {
+            return item.bild[0].thumbnails.large.url
+        } else {
+            return ''
+        }
+    }
   },
   actions: {
     async load() {

diff --git a/src/views/ClubDetailView.vue b/src/views/ClubDetailView.vue
@@ -0,0 +1,33 @@
+<template>
+    <div v-if="club">
+        <h1>{{ club.name }}</h1>
+        <b-img :src="image" />
+        <p>{{ club.notes }}</p>
+
+    </div>
+</template>
+<script lang="ts">
+import { mapState } from "pinia";
+import { useClubItemStore } from '@/stores/clubItem'
+import { defineComponent } from 'vue'
+import type ClubItem from "@/models/ClubItem"
+
+export default defineComponent({
+  name: 'ClubDetailView',
+  computed: {
+    ...mapState(useClubItemStore, {
+      getById: (state) => state.getById,
+      imageById: (state) => state.imageById
+    }),
+    club(): ClubItem {
+      return this.getById(this.$route.params.id as string) as ClubItem;
+    },
+    image() : string {
+      return this.imageById(this.$route.params.id as string) as string;
+    }
+  }
+})
+</script>
+<style>
+
+</style>