Bugfix genre store

CHANGELOG.md

@@ -1,4 +1,4 @@
-# v.0.4.0 (2025-08-30)
+# v.0.4.0 MuC-Edition (2025-09-01)
 
 ## 🚀 Features
 
@@ -12,7 +12,13 @@
 - Icons on exercise groups on help page
 - Welcome dialog: New page for look and feel, merge database and exercise creation in one step
 - Add links to GitHub and project page on settings
+- New section on homepage for popular genres
 
+## 🐛 Bugfixes
+
+- Filter on band page changes visible bands on homepage
+- No startup after packaging
+- Infinity loading on concert booking page is user comes from band page
 
 # v.0.3.0 (2025-02-28)
 ## 🚀 Features

backend/server.ts

@@ -36,7 +36,7 @@ app.use("/files", files)
 
 // Add delay for more realistic response times
 app.use((req, res, next) => {
-  setTimeout(next, Math.floor((Math.random() * 1000) + 100))
+  setTimeout(next, Math.floor((Math.random() * 500) + 100))
 })
 
 // Routes

electron-builder.json

@@ -37,7 +37,6 @@
     "!dist",
     "!out",
     "!misc",
-    "!database.sqlite",
-    "!node_modules"
+    "!database.sqlite"
   ]
 }

src/components/pageParts/concertListItem.vue

@@ -1,27 +1,27 @@
 <script setup lang="ts">
-import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
-import { BandModel } from '@/data/models/acts/bandModel';
-import { ConcertModel } from '@/data/models/acts/concertModel';
-import { LocationModel } from '@/data/models/locations/locationModel';
-import { useRouter } from 'vue-router';
+import cardViewHorizontal from "@/components/basics/cardViewHorizontal.vue";
+import { BandModel } from "@/data/models/acts/bandModel";
+import { ConcertModel } from "@/data/models/acts/concertModel";
+import { LocationModel } from "@/data/models/locations/locationModel";
+import { useRouter } from "vue-router";
 
-const router = useRouter()
+const router = useRouter();
 
 defineProps({
   /** Concert to display */
   concert: {
     type: ConcertModel,
-    required: true
+    required: true,
   },
 
   band: {
     type: BandModel,
-    required: true
+    required: true,
   },
 
   location: {
     type: LocationModel,
-    required: true
+    required: true,
   },
 
   /** Display text parts as skeleton */
@@ -30,9 +30,9 @@ defineProps({
   /** Show or hide the button on the right side */
   showButton: {
     type: Boolean,
-    default: true
-  }
-})
+    default: true,
+  },
+});
 </script>
 
 <template>
@@ -40,7 +40,13 @@ defineProps({
     :title="concert.name"
     v-if="!loading"
     :link="showButton && concert.inStock > 0"
-    @click="showButton && concert.inStock > 0 ? router.push('/concerts/booking/' + location.urlName + '/' + concert.date) : () => {}"
+    @click="console.log(concert.date);
+      showButton && concert.inStock > 0
+        ? router.push(
+            '/concerts/booking/' + location.urlName + '/' + concert.date
+          )
+        : () => {}
+    "
   >
     <template #prepend>
       <div>
@@ -49,7 +55,9 @@ defineProps({
         </div>
 
         <div class="text-h6">
-          {{ new Date(concert.date).toLocaleString('default', { month: 'long' }) }}
+          {{
+            new Date(concert.date).toLocaleString("default", { month: "long" })
+          }}
         </div>
 
         <div class="text-h6">
@@ -71,28 +79,23 @@ defineProps({
     <template #append>
       <div>
         <div class="text-secondary font-weight-medium text-h6 pb-1">
-          {{ $t('misc.from') + ' ' + concert.price.toFixed(2) + ' €' }}
+          {{ $t("misc.from") + " " + concert.price.toFixed(2) + " €" }}
         </div>
 
         <div v-if="concert.inStock == 0 && showButton" class="text-h6">
-          {{ $t('concert.concertSoldOut') }}
+          {{ $t("concert.concertSoldOut") }}
         </div>
 
         <div v-else-if="showButton">
           <v-btn variant="flat" color="secondary">
-            {{ $t('concert.goToTheConcert') }}
+            {{ $t("concert.goToTheConcert") }}
           </v-btn>
         </div>
-
       </div>
     </template>
   </card-view-horizontal>
 
-  <card-view-horizontal 
-    v-else
-    :loading="loading"
-  >
-    <v-skeleton-loader
-      type="text" />
+  <card-view-horizontal v-else :loading="loading">
+    <v-skeleton-loader type="text" />
   </card-view-horizontal>
 </template>

src/locales/de.json

@@ -297,7 +297,8 @@
   },
   "genre": {
     "withoutBand": "ohne Band",
-    "popular": "Beliebte Genres"
+    "popular": "Beliebte Genres",
+    "allGenres": "Alle Genres"
   },
   "admin": {
     "adminpanel": "Admin Panel"

src/locales/en.json

@@ -297,7 +297,8 @@
   },
   "genre": {
     "withoutBand": "without Band",
-    "popular": "Popular Genres"
+    "popular": "Popular Genres",
+    "allGenres": "All Genres"
   },
   "admin": {
     "adminpanel": "Admin Panel"

src/pages/bands/bandDetailPage/index.vue

@@ -7,9 +7,13 @@ import concertSection from './concertSection.vue';
 import heroImage from '@/components/pageParts/heroImage.vue';
 import { useBandStore } from '@/stores/band.store';
 import { onMounted, watch } from 'vue';
+import { useConcertStore } from '@/stores/concert.store';
 
 const router = useRouter()
 const bandStore = useBandStore()
+const concertStore = useConcertStore()
+
+concertStore.getConcerts()
 
 onMounted(async () => {
   bandStore.getBand(String(router.currentRoute.value.params.name).replaceAll('-', ' '))

src/pages/bands/bandsPage/index.vue

@@ -39,8 +39,8 @@ watch(() => router.currentRoute.value.query, () => {
         </v-row>
 
         <v-row
-          v-else-if="bandStore.bands.length > 0"
-          v-for="band in bandStore.bands"
+          v-else-if="bandStore.filteredBands.length > 0"
+          v-for="band in bandStore.filteredBands"
         >
           <v-col>
             <band-list-item

src/pages/concerts/concertsPage/concertsListSection.vue

@@ -1,17 +1,15 @@
 <script setup lang="ts">
-import { useConcertStore } from '@/stores/concert.store';
-import concertListItem from '@/components/pageParts/concertListItem.vue';
-import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
-import sectionDivider from '@/components/basics/sectionDivider.vue';
-import concertFilterbar from './concertFilterbar.vue';
+import { useConcertStore } from "@/stores/concert.store";
+import concertListItem from "@/components/pageParts/concertListItem.vue";
+import cardViewHorizontal from "@/components/basics/cardViewHorizontal.vue";
+import sectionDivider from "@/components/basics/sectionDivider.vue";
+import concertFilterbar from "./concertFilterbar.vue";
 
-const concertStore = useConcertStore()
+const concertStore = useConcertStore();
 </script>
 
 <template>
-  <div
-    v-if="concertStore.fetchInProgress"
-  >
+  <div v-if="concertStore.fetchInProgress">
     <section-divider :loading="true" />
     <v-row v-for="i in 3">
       <v-col>
@@ -26,13 +24,21 @@ const concertStore = useConcertStore()
   >
     <div v-if="concert.offered">
       <v-row
-        v-if="index == 0 || 
-        new Date(concertStore.concerts[index - 1].date).getMonth() != 
-        new Date(concertStore.concerts[index].date).getMonth()"
+        v-if="
+          index == 0 ||
+          new Date(concertStore.concerts[index - 1].date).getMonth() !=
+            new Date(concertStore.concerts[index].date).getMonth()
+        "
       >
         <v-col>
           <section-divider
-            :title="new Date(concert.date).toLocaleString('default', { month: 'long' }) + ' ' + new Date(concert.date).getFullYear()"
+            :title="
+              new Date(concert.date).toLocaleString('default', {
+                month: 'long',
+              }) +
+              ' ' +
+              new Date(concert.date).getFullYear()
+            "
           />
         </v-col>
       </v-row>

src/pages/misc/homePage/index.vue

@@ -7,7 +7,7 @@ import TopLocationsSection from "./topLocationsSection.vue";
 import { usePreferencesStore } from "@/stores/preferences.store";
 import welcomeDialog from "./welcomeDialog/dialog.vue";
 import { ref } from "vue";
-import genresSection from "./genresSection.vue";
+import genresSection from "./topGenresSection.vue";
 
 const concertStore = useConcertStore();
 const locationStore = useLocationStore();

src/pages/misc/homePage/topGenresSection.vue

@@ -6,6 +6,7 @@ import { GenreApiModel } from "@/data/models/acts/genreApiModel";
 import { useGenreStore } from "@/stores/genre.store";
 import { ref, watch } from "vue";
 import { useRouter } from "vue-router";
+import outlinedButton from "@/components/basics/outlinedButton.vue";
 
 const genreStore = useGenreStore();
 const genresByNumberOfBands = ref<Array<GenreApiModel>>([]);
@@ -37,7 +38,7 @@ watch(
       <v-skeleton-loader :loading="true" type="card" />
     </v-col>
 
-    <v-col v-else v-for="genre in genresByNumberOfBands" cols="6" md="3">
+    <v-col v-else v-for="genre in genreStore.topGenres" cols="6" md="3">
       <card-view
         @click="router.push({ path: '/bands', query: { genreName: genre.name }})"
         :title="genre.name"
@@ -45,4 +46,17 @@ watch(
       />
     </v-col>
   </v-row>
+
+  <!-- todo?
+  <v-row>
+    <v-col>
+      <outlined-button
+        append-icon="mdi-chevron-right"
+        @click="router.push('/')"
+        block
+      >
+        {{ $t('genre.allGenres') }}
+      </outlined-button>
+    </v-col>
+  </v-row> -->
 </template>

src/stores/band.store.ts

@@ -12,6 +12,9 @@ export const useBandStore = defineStore("bandStore", {
     /** All available bands */
     bands: ref<Array<BandApiModel>>([]),
 
+    /** Available bands filtered by parameters */
+    filteredBands: ref<Array<BandApiModel>>([]),
+
     /** All information about a single band */
     band: ref<BandDetailsApiModel>(new BandDetailsApiModel()),
 
@@ -32,7 +35,9 @@ export const useBandStore = defineStore("bandStore", {
 
       await fetchAllBands()
         .then(result => {
-          this.bands = result.data.filter((band: BandApiModel) => {
+          this.bands = result.data
+
+          this.filteredBands = result.data.filter((band: BandApiModel) => {
             if (genreStore.genre == null) {
               return true
             }

src/stores/concert.store.ts

@@ -64,6 +64,9 @@ export const useConcertStore = defineStore("concertStore", {
       const feedbackStore = useFeedbackStore()
       this.fetchInProgress = true
 
+      console.log("LOcation & Date:")
+      console.log(this.concerts)
+
       let id = this.concerts.find((concert: ConcertApiModel) => {
         return (concert.location.urlName == location && concert.date == date)
       }).id
@@ -75,6 +78,7 @@ export const useConcertStore = defineStore("concertStore", {
         })
         .catch(res => {
           feedbackStore.notFound = true
+          this.fetchInProgress = false
         })
     },
 

src/stores/genre.store.ts

@@ -1,4 +1,9 @@
-import { deleteGenre, fetchAllGenres, patchGenre, postGenre } from "@/data/api/genreApi";
+import {
+  deleteGenre,
+  fetchAllGenres,
+  patchGenre,
+  postGenre,
+} from "@/data/api/genreApi";
 import { GenreApiModel } from "@/data/models/acts/genreApiModel";
 import { defineStore } from "pinia";
 import { ref } from "vue";
@@ -10,6 +15,8 @@ export const useGenreStore = defineStore("genreStore", {
     /** All available genres from server */
     genres: ref<Array<GenreApiModel>>([]),
 
+    topGenres: ref<Array<GenreApiModel>>([]),
+
     /** Currently selected genre */
     genre: ref<GenreApiModel>(null),
 
@@ -17,7 +24,7 @@ export const useGenreStore = defineStore("genreStore", {
     showEditDialog: ref(false),
 
     /** Request to server sent, waiting for data response */
-    fetchInProgress: ref(false)
+    fetchInProgress: ref(false),
   }),
 
   actions: {
@@ -25,21 +32,29 @@ export const useGenreStore = defineStore("genreStore", {
      * Get all genres from the database
      */
     getGenres() {
-      this.fetchInProgress = true
+      this.fetchInProgress = true;
 
-      fetchAllGenres()
-        .then(response => {
-          this.genres = response.data
-          this.fetchInProgress = false
-        })
+      fetchAllGenres().then((response) => {
+        this.genres = response.data;
+
+        let genresByNumberOfBands = this.genres.slice();
+
+        genresByNumberOfBands.sort((a, b) => {
+          return b.bands.length - a.bands.length;
+        });
+
+        this.topGenres = genresByNumberOfBands.splice(0, 8)
+
+        this.fetchInProgress = false;
+      });
     },
 
     /**
      * Prepare edit dialog for new genre, opens it
      */
     newGenre() {
-      this.genre = new GenreApiModel()
-      this.showEditDialog = true
+      this.genre = new GenreApiModel();
+      this.showEditDialog = true;
     },
 
     /**
@@ -48,41 +63,39 @@ export const useGenreStore = defineStore("genreStore", {
      * @param genre Selected Genre object
      */
     editGenre(genre: GenreApiModel) {
-      this.genre = genre
-      this.showEditDialog = true
+      this.genre = genre;
+      this.showEditDialog = true;
     },
 
     /**
      * Save edited genre to the backend server
      */
     saveGenre() {
-      const feedbackStore = useFeedbackStore()
-      this.fetchInProgress = true
+      const feedbackStore = useFeedbackStore();
+      this.fetchInProgress = true;
 
       if (this.genre.id == undefined) {
         // Creating new Genre
-        postGenre(this.genre)
-          .then(response => {
-            if (response.status == 200) {
-              feedbackStore.addSnackbar(BannerStateEnum.GENRESAVEDSUCCESSFUL)
-              this.getGenres()
-              this.showEditDialog = false
-            } else {
-              feedbackStore.addSnackbar(BannerStateEnum.GENRESAVEDERROR)
-            }
-          })
+        postGenre(this.genre).then((response) => {
+          if (response.status == 200) {
+            feedbackStore.addSnackbar(BannerStateEnum.GENRESAVEDSUCCESSFUL);
+            this.getGenres();
+            this.showEditDialog = false;
+          } else {
+            feedbackStore.addSnackbar(BannerStateEnum.GENRESAVEDERROR);
+          }
+        });
       } else {
         // Update existing Genre
-        patchGenre(this.genre)
-          .then(response => {
-            if (response.status == 200) {
-              feedbackStore.addSnackbar(BannerStateEnum.GENRESAVEDSUCCESSFUL)
-              this.getGenres()
-              this.showEditDialog = false
-            } else {
-              feedbackStore.addSnackbar(BannerStateEnum.GENRESAVEDERROR)
-            }
-          })
+        patchGenre(this.genre).then((response) => {
+          if (response.status == 200) {
+            feedbackStore.addSnackbar(BannerStateEnum.GENRESAVEDSUCCESSFUL);
+            this.getGenres();
+            this.showEditDialog = false;
+          } else {
+            feedbackStore.addSnackbar(BannerStateEnum.GENRESAVEDERROR);
+          }
+        });
       }
     },
 
@@ -92,31 +105,30 @@ export const useGenreStore = defineStore("genreStore", {
      * @param genre Genre to delete
      */
     deleteGenre(genre: GenreApiModel) {
-      const feedbackStore = useFeedbackStore()
-      this.fetchInProgress = true
+      const feedbackStore = useFeedbackStore();
+      this.fetchInProgress = true;
 
-      deleteGenre(genre)
-        .then(response => {
-          if (response.status == 200) {
-            feedbackStore.addSnackbar(BannerStateEnum.GENREDELETESUCCESSFUL)
-            this.getGenres()
-          } else {
-            feedbackStore.addSnackbar(BannerStateEnum.GENREDELETEERROR)
-          }
-        })
+      deleteGenre(genre).then((response) => {
+        if (response.status == 200) {
+          feedbackStore.addSnackbar(BannerStateEnum.GENREDELETESUCCESSFUL);
+          this.getGenres();
+        } else {
+          feedbackStore.addSnackbar(BannerStateEnum.GENREDELETEERROR);
+        }
+      });
     },
 
     setGenreByName(name: string) {
-      this.genre = null
-      name = name.replace("+", " ")
+      this.genre = null;
+      name = name.replace("+", " ");
 
-      let newGenre = this.genres.find(genre => {
-        return genre.name == name
-      })
+      let newGenre = this.genres.find((genre) => {
+        return genre.name == name;
+      });
 
       if (newGenre != undefined) {
-        this.genre = newGenre
+        this.genre = newGenre;
       }
-    }
-  }
-})
+    },
+  },
+});