Fixed Account pages

software/src/stores/account.store.ts

@@ -0,0 +1,137 @@
+import { useLocalStorage } from "@vueuse/core";
+import { defineStore } from "pinia";
+import { AccountModel } from "../data/models/user/accountModel";
+import { OrderModel } from "../data/models/ordering/orderModel";
+import { useFeedbackStore } from "./feedbackStore";
+import { loginAccount, registerAccount, updateAccount } from "../data/api/accountApi";
+import { getUserOrders } from "../data/api/orderApi";
+import { BannerStateEnum } from "../data/enums/bannerStateEnum";
+import { AddressModel } from "../data/models/user/addressModel";
+import { PaymentModel } from "../data/models/user/paymentModel";
+import { AccountApiModel } from "../data/models/user/accountApiModel";
+import { ref } from "vue";
+import { OrderApiModel } from "@/data/models/ordering/orderApiModel";
+
+export const useAccountStore = defineStore("accountStore", {
+  state: () => ({
+    /** Useraccount which is currently logged in */
+    userAccount: useLocalStorage("hackmycart/accountStore/userAccount", new AccountApiModel()),
+
+    /** All orders of the user */
+    orders: ref<Array<OrderApiModel>>([])
+  }),
+
+  actions: {
+    /**
+     * Start the login process
+     * 
+     * @param username Account username
+     * @param password Account password
+     */
+    async login(username: string, password: string) {
+      const feedbackStore = useFeedbackStore()
+
+      await loginAccount(username, password)
+        .then(async result => {
+          this.userAccount = result.data
+
+          feedbackStore.changeBanner(BannerStateEnum.ACCOUNTLOGINSUCCESSFUL)
+
+          this.refreshOrders()
+        })
+        .catch(error => {
+          if (error.status == 400) {
+            feedbackStore.changeBanner(BannerStateEnum.ACCOUNTLOGINERROR)
+          } else if (error.status == 401) {
+            feedbackStore.changeBanner(BannerStateEnum.ACCOUNTLOGINWRONGLOGIN)
+          }
+        })
+    },
+
+    /**
+     * Register a new account to the database
+     * 
+     * @param userAccount New account dataset
+     */
+    async registerAccount(userAccount: AccountModel) {
+      const feedbackStore = useFeedbackStore()
+
+      await registerAccount(userAccount)
+        .then(res => {
+          if (res.status == 201) {
+            feedbackStore.changeBanner(BannerStateEnum.ACCOUNTREGISTERSUCCESSFUL)
+          }
+        })
+        .catch((error) => {
+          if (error.status == 400) {
+            feedbackStore.changeBanner(BannerStateEnum.ACCOUNTREGISTERERROR)
+          } else if (error.status == 409) {
+            feedbackStore.changeBanner(BannerStateEnum.ACCOUNTREGISTERUSERNAMEINUSE)
+          }
+        })
+    },
+
+    async updateAccount() {
+      const feedbackStore = useFeedbackStore()
+
+      await updateAccount(this.userAccount)
+        .then(res => {
+          if (res.status == 200) {
+            feedbackStore.changeBanner(BannerStateEnum.ACCOUNTUPDATESUCCESSFUL)
+          }
+        })
+    },
+
+    logout() {
+      const feedbackStore = useFeedbackStore()
+
+      this.userAccount = new AccountModel()
+      this.loggedIn = false
+      
+      feedbackStore.changeBanner(BannerStateEnum.ACCOUNTLOGOUTSUCCESSFUL)
+    },
+
+    /**
+     * Get all orders from current user
+     */
+    async refreshOrders() {
+      await getUserOrders(this.userAccount.id)
+        .then(result => {
+          this.orders = result.data
+        })
+    },
+
+    getOrderTotalPrice(orderId: number) {
+      let totalPrice = 0
+      let order: OrderModel = this.orders.find((order: OrderModel) => order.id == orderId)
+      
+      // for (let item of order.orderItems) {
+      //   totalPrice += calcPrice(item.orderPrice, 0, item.quantity)
+      // }
+
+      return Math.round(totalPrice * 100) / 100
+    },
+
+    /**
+     * Remove an address from the user model
+     * 
+     * @param address Address dataset to remove
+     */
+    removeAddress(address: AddressModel) {
+      this.userAccount.addresses = this.userAccount.addresses.filter((addr: AddressModel) => 
+        addr != address
+      )
+    },
+
+    /**
+     * Remove an payment from the user model
+     * 
+     * @param address Payment dataset to remove
+     */
+    removePayment(payment: PaymentModel) {
+      this.userAccount.payments = this.userAccount.payments.filter((paym: PaymentModel) =>
+        paym != payment
+      )
+    }
+  }
+})

software/src/stores/bandStore.ts

@@ -0,0 +1,35 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { BandApiModel } from "../data/models/acts/bandApiModel";
+import { fetchAllBands, getBand } from "../data/api/bandApi";
+import { BandDetailsApiModel } from "../data/models/acts/bandDetailsApiModel";
+
+export const useBandStore = defineStore("bandStore", {
+  state: () => ({
+    bands: ref<Array<BandApiModel>>([]),
+    band: ref<BandDetailsApiModel>(new BandDetailsApiModel()),
+    fetchInProgress: ref(false)
+  }),
+
+  actions: {
+    async getBands() {
+      this.fetchInProgress = true
+
+      fetchAllBands()
+        .then(result => {
+          this.bands = result.data
+          this.fetchInProgress = false
+        })
+    },
+
+    async getBand(name: string) {
+      this.fetchInProgress = true
+
+      getBand(name)
+        .then(result => {
+          this.band = result.data
+          this.fetchInProgress = false
+        })
+    } 
+  }
+})

software/src/stores/basketStore.ts

@@ -0,0 +1,102 @@
+import { defineStore } from "pinia";
+import { useLocalStorage } from "@vueuse/core";
+import { BasketItemModel } from "../data/models/ordering/basketItemModel";
+import { useFeedbackStore } from "./feedbackStore";
+import { BannerStateEnum } from "../data/enums/bannerStateEnum";
+import { AddressModel } from "../data/models/user/addressModel";
+import { PaymentModel } from "../data/models/user/paymentModel";
+import { ref } from "vue";
+import { SelectedSeatModel } from "../data/models/ordering/selectedSeatModel";
+import { calcPrice } from "@/scripts/concertScripts";
+import { BandModel } from "../data/models/acts/bandModel";
+import { ConcertModel } from "../data/models/acts/concertModel";
+
+export const useBasketStore = defineStore('basketStore', {
+  state: () => ({
+    itemsInBasket: useLocalStorage<Array<BasketItemModel>>("hackmycart/basketStore/productsInBasket", []),
+    usedAddress: useLocalStorage("hackmycart/basketStore/usedAddress", new AddressModel()),
+    usedPayment: useLocalStorage("hackmycart/basketStore/usedPayment", new PaymentModel()),
+    selectedSeats: ref<Array<SelectedSeatModel>>([])
+  }),
+
+  getters: {
+    /**
+     * Calculate price of all items in the basket with discount
+     * 
+     * @returns Total price of basket
+     */
+    getTotalPrice() {
+      let result = 0
+
+      for (let item of this.itemsInBasket) {
+        result += calcPrice(item.price, item.seats.length)
+      }
+
+      return Math.round(result * 100) / 100
+    }
+  },
+
+  actions: {
+    /**
+     * Remove an item from the basket
+     * 
+     * @param item Item to remove
+     */
+    removeItemFromBasket(item: BasketItemModel) {
+      const feedbackStore = useFeedbackStore()
+      feedbackStore.changeBanner(BannerStateEnum.BASKETPRODUCTREMOVED)
+
+      this.itemsInBasket = this.itemsInBasket.filter((basketItemModel: BasketItemModel) => 
+        basketItemModel.concert.id != item.concert.id
+      )
+    },
+
+    moveSeatSelectionsToBasket(concert: ConcertModel, band: BandModel) {
+      // todo
+      // for (let selectedSeat of this.selectedSeats) {
+      //   let itemInBasket: BasketItemModel = this.itemsInBasket.find((basketItem: BasketItemModel) => {
+      //     return basketItem.concert.id == selectedSeat.concert.id
+      //   })
+
+      //   if (itemInBasket != undefined) {
+      //     itemInBasket.seats.push(selectedSeat.seat)
+      //   } else {
+      //     this.itemsInBasket.push(
+      //       new BasketItemModel(
+      //         selectedSeat.concert,
+      //         event,
+      //         band,
+      //         selectedSeat.seat,
+      //         selectedSeat.concert.price
+      //       )
+      //     )
+      //   }
+      // }
+
+      // this.selectedSeats = []
+    },
+
+    /**
+     * Take an order to the server. Sends all articles in the basket and creates an order entry in the backend database
+     */
+    async takeOrder() {
+      // todo
+      // const accountStore = useAccountStore()
+      // const productStore = useProductStore()
+      // const feedbackStore = useFeedbackStore()
+
+      // await addOrder(accountStore.userAccount.id, this.itemsInBasket, this.usedPayment.id, this.usedAddress.id)
+      //   .then(async result => {
+      //     if (result.status == 201) {
+      //       await accountStore.refreshOrders()
+      //       await productStore.fetchAllProducts()
+
+      //       this.itemsInBasket = []
+      //       feedbackStore.changeBanner(BannerStateEnum.ORDERPLACESUCCESSFUL)
+      //     } else {
+      //       feedbackStore.changeBanner(BannerStateEnum.ERROR)
+      //     }
+      //   })
+    }
+  }
+})

software/src/stores/concertStore.ts

@@ -0,0 +1,49 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { ConcertApiModel } from "../data/models/acts/concertApiModel";
+import { fetchConcert, fetchConcerts, fetchUpcomingConcerts } from "../data/api/concertApi";
+import { ConcertDetailsApiModel } from "../data/models/acts/concertDetailsApiModel";
+
+export const useConcertStore = defineStore("concertStore", {
+  state: () => ({
+    concerts: ref<Array<ConcertApiModel>>([]),
+    upcomingConcerts: ref<Array<ConcertApiModel>>([]),
+    concert: ref<ConcertDetailsApiModel>(new ConcertDetailsApiModel()),
+    fetchInProgress: ref(false)
+  }),
+
+  actions: {
+    /**
+     * Download all concerts from server
+     */
+    async getConcerts() {
+      this.fetchInProgress = true
+
+      fetchConcerts()
+        .then(result => {
+          this.concerts = result.data
+          this.fetchInProgress = false
+        })
+    },
+
+    async getConcert(id: number) {
+      this.fetchInProgress = true
+
+      fetchConcert(id)
+        .then(result => {
+          this.concert = result.data
+          this.fetchInProgress = false
+        })
+    },
+
+    async getUpcomingConcerts() {
+      this.fetchInProgress = true
+
+      fetchUpcomingConcerts(4)
+        .then(result => {
+          this.upcomingConcerts = result.data
+          this.fetchInProgress = false
+        })
+    }
+  }
+})

software/src/stores/feedbackStore.ts

@@ -0,0 +1,210 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { BannerStateEnum } from "../data/enums/bannerStateEnum";
+import { Composer } from 'vue-i18n';
+
+export const useFeedbackStore = defineStore("feedbackStore", {
+  state: () => ({
+    showBanner: ref(false),
+    title: ref(""),
+    color: ref(""),
+    icon: ref(""),
+    fetchDataFromServerInProgress: ref(false),
+    $i18n: {}
+  }),
+
+  getters: {
+    i18n(): Composer {
+      return this.$i18n.global as Composer
+    }
+  },
+
+  actions: {
+    changeBanner(bannerState: BannerStateEnum) {
+      // Banner message
+      switch (bannerState) {
+        ////////// System feedback //////////
+
+        case BannerStateEnum.ERROR: {
+          this.title = this.i18n.t('bannerMessages.error'); break;
+        }
+
+        case BannerStateEnum.BASKETPRODUCTADDED: {
+          this.title = this.i18n.t('bannerMessages.basketProductAdded'); break;
+        }
+
+        case BannerStateEnum.BASKETPRODUCTREMOVED: {
+          this.title = this.i18n.t("bannerMessages.basketProductRemoved"); break;
+        }
+
+
+        ////////// API Endpoint /api //////////
+
+        case BannerStateEnum.DATABASERESETSUCCESSFUL: {
+          this.title = this.i18n.t('bannerMessages.databaseResetSuccessful'); break;
+        }
+
+
+        ////////// API Endpoint /accounts //////////
+
+        case BannerStateEnum.ACCOUNTLOGINSUCCESSFUL: {
+          this.title = this.i18n.t('bannerMessages.loginSuccessful'); break;
+        }
+        case BannerStateEnum.ACCOUNTLOGINWRONGLOGIN: {
+          this.title = this.i18n.t('bannerMessages.wrongLogin'); break;
+        }
+        case BannerStateEnum.ACCOUNTLOGINERROR: {
+          this.title = this.i18n.t('bannerMessages.error'); break;
+        }
+        case BannerStateEnum.ACCOUNTREGISTERSUCCESSFUL: {
+          this.title = this.i18n.t("bannerMessages.registerSuccessful"); break;
+        }
+        case BannerStateEnum.ACCOUNTREGISTERUSERNAMEINUSE: {
+          this.title = this.i18n.t("bannerMessages.usernameInUse"); break;
+        }
+        case BannerStateEnum.ACCOUNTUPDATESUCCESSFUL: {
+          this.title = this.i18n.t("bannerMessages.accountUpdated"); break;
+        }
+        case BannerStateEnum.ACCOUNTLOGOUTSUCCESSFUL: {
+          this.title = this.i18n.t('bannerMessages.logoutSuccessful'); break;
+        }
+
+
+        ////////// API Endpoint /categories //////////
+
+        case BannerStateEnum.CATEGORYCREATESUCCESSFUL: {
+          this.title = this.i18n.t('bannerMessages.categoryCreateSuccessful'); break;
+        }
+        case BannerStateEnum.CATEGORYDELETESUCESSFUL: {
+          this.title = this.i18n.t('bannerMessages.categoryDeleteSuccessful'); break;
+        }
+        case BannerStateEnum.CATEGORYCREATEERROR: {
+          this.title = this.i18n.t('bannerMessages.categoryCreateError'); break;
+        }
+        case BannerStateEnum.CATEGORYDELETEERROR: {
+          this.title = this.i18n.t('bannerMessages.categoryDeleteError'); break;
+        }
+
+
+        ////////// API Endpoint /orders //////////
+
+        case BannerStateEnum.ORDERPLACESUCCESSFUL: {
+          this.title = this.i18n.t('bannerMessages.orderPlaceSuccessfull'); break;
+        }
+
+
+        ////////// API Endpoint /products //////////
+
+        case BannerStateEnum.PRODUCTCREATESUCCESSFUL: {
+          this.title = this.i18n.t('bannerMessages.productCreateSuccessful'); break;
+        }
+        case BannerStateEnum.PRODUCTCREATEERROR: {
+          this.title = this.i18n.t('bannerMessages.productCreateError'); break;
+        }
+        case BannerStateEnum.PRODUCTDELETESUCCESSFUL: {
+          this.title = this.i18n.t('bannerMessages.productDeleteSuccessful'); break;
+        }
+        case BannerStateEnum.PRODUCTDELETEERROR: {
+          this.title = this.i18n.t('bannerMessages.productDeleteError'); break;
+        }
+      }
+
+      // Banner color
+
+      switch (bannerState) {
+        case BannerStateEnum.ERROR:
+        case BannerStateEnum.ACCOUNTLOGINERROR:
+        case BannerStateEnum.ACCOUNTLOGINWRONGLOGIN:
+        case BannerStateEnum.ACCOUNTREGISTERERROR:
+        case BannerStateEnum.ACCOUNTREGISTERUSERNAMEINUSE:
+        case BannerStateEnum.CATEGORYCREATEERROR:
+        case BannerStateEnum.CATEGORYDELETEERROR:
+        case BannerStateEnum.PRODUCTDELETESUCCESSFUL:
+        case BannerStateEnum.PRODUCTDELETEERROR:
+          this.color = "red"
+          break;
+        
+        case BannerStateEnum.BASKETPRODUCTADDED:
+        case BannerStateEnum.DATABASERESETSUCCESSFUL:
+        case BannerStateEnum.ACCOUNTLOGINSUCCESSFUL:
+        case BannerStateEnum.ACCOUNTREGISTERSUCCESSFUL:
+        case BannerStateEnum.ACCOUNTUPDATESUCCESSFUL:
+        case BannerStateEnum.ACCOUNTLOGOUTSUCCESSFUL:
+        case BannerStateEnum.CATEGORYCREATESUCCESSFUL:
+        case BannerStateEnum.CATEGORYDELETESUCESSFUL:
+        case BannerStateEnum.ORDERPLACESUCCESSFUL:
+        case BannerStateEnum.PRODUCTCREATESUCCESSFUL:
+        case BannerStateEnum.PRODUCTCREATEERROR:
+          this.color = "green"
+          break;
+
+        case BannerStateEnum.BASKETPRODUCTREMOVED:
+          this.color = "blue"
+      }
+
+
+      // Banner icon
+
+      switch (bannerState) {
+        case BannerStateEnum.ERROR:
+          this.icon = "mdi-alert-circle"
+          break;
+
+        case BannerStateEnum.ACCOUNTLOGINERROR:
+        case BannerStateEnum.ACCOUNTLOGINWRONGLOGIN:
+        case BannerStateEnum.ACCOUNTREGISTERERROR:
+        case BannerStateEnum.ACCOUNTREGISTERUSERNAMEINUSE:
+          this.icon = "mdi-account"
+          break;
+
+        case BannerStateEnum.CATEGORYCREATEERROR:
+        case BannerStateEnum.CATEGORYDELETEERROR:
+        case BannerStateEnum.CATEGORYCREATESUCCESSFUL:
+        case BannerStateEnum.CATEGORYDELETESUCESSFUL:
+          this.icon = "mdi-label"
+          break;
+
+        case BannerStateEnum.PRODUCTDELETESUCCESSFUL:
+        case BannerStateEnum.PRODUCTDELETEERROR:
+        case BannerStateEnum.PRODUCTCREATESUCCESSFUL:
+        case BannerStateEnum.PRODUCTCREATEERROR:
+          this.icon = "mdi-store"
+          break;
+        
+        case BannerStateEnum.DATABASERESETSUCCESSFUL:
+          this.icon = "mdi-database-refresh"
+          break;
+        
+        case BannerStateEnum.BASKETPRODUCTADDED:
+        case BannerStateEnum.BASKETPRODUCTREMOVED:
+          this.icon = "mdi-basket"
+          break;
+
+        case BannerStateEnum.ORDERPLACESUCCESSFUL:
+          this.icon = "mdi-basket-check"
+          break;
+
+        case BannerStateEnum.ACCOUNTLOGOUTSUCCESSFUL:
+          this.icon = "mdi-logout"
+          break;
+
+        case BannerStateEnum.ACCOUNTLOGINSUCCESSFUL:
+          this.icon = "mdi-login"
+          break;
+
+        case BannerStateEnum.ACCOUNTREGISTERSUCCESSFUL:
+          this.icon = "mdi-account-plus"
+          break;
+        
+        case BannerStateEnum.ACCOUNTUPDATESUCCESSFUL:
+          this.icon = "mdi-account-reactivate"
+          break;
+      }
+
+      
+      
+
+      this.showBanner = true
+    }
+  }
+})

software/src/stores/locationStore.ts

@@ -0,0 +1,56 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { fetchAllLocations, fetchTopLocations } from "../data/api/locationApi";
+import { LocationApiModel } from "../data/models/locations/locationApiModel";
+import { CityModel } from "../data/models/locations/cityModel";
+import { fetchAllCities } from "../data/api/cityApi";
+
+export const useLocationStore = defineStore("locationStore", {
+  state: () => ({
+    locations: ref<Array<LocationApiModel>>([]),
+    topLocations: ref<Array<LocationApiModel>>([]),
+    cities: ref<Array<CityModel>>([]),
+    fetchInProgress: ref(false)
+  }),
+
+  actions: {
+    /**
+     * Download all cities/locations from server
+     */
+    async getLocations() {
+      this.fetchInProgress = true
+
+      await fetchAllLocations()
+        .then(result => {
+          this.locations = result.data
+        })
+
+      await fetchAllCities()
+        .then(result => {
+          this.cities = result.data
+          this.fetchInProgress = false
+        })
+    },
+
+    /**
+     * Get all locations in a specific city
+     * 
+     * @param city City to filter for
+     * 
+     * @returns Array of cities which are in the target city
+     */
+    getLocationsByCity(city: string): Array<LocationApiModel> {
+      return this.locations.filter((location: LocationApiModel) => {
+        return location.city.name == city
+      })
+    },
+
+
+    async getTopLocations() {
+      await fetchTopLocations(8)
+        .then(result => {
+          this.topLocations = result.data
+        })
+    }
+  },
+})

software/src/stores/preferencesStore.ts

@@ -0,0 +1,11 @@
+import { defineStore } from "pinia";
+import { useLocalStorage } from "@vueuse/core";
+import { ThemeEnum } from "../data/enums/themeEnums";
+import { LanguageEnum } from "../data/enums/languageEnum";
+
+export const usePreferencesStore = defineStore('preferencesStore', {
+  state: () => ({
+    theme: useLocalStorage<ThemeEnum>("hackmycart/preferencesStore/theme", ThemeEnum.DARKBLUE),
+    language: useLocalStorage<LanguageEnum>("hackmycart/preferencesStore/language", LanguageEnum.GERMAN)
+  }),
+})

software/src/stores/searchStore.ts

@@ -0,0 +1,43 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { searchBand } from "../data/api/bandApi";
+import { searchLocation } from "../data/api/locationApi";
+import { searchConcert } from "../data/api/concertApi";
+
+export const useSearchStore = defineStore("searchStore", {
+  state: () => ({
+    searchTerm: ref(""),
+    bands: ref(),
+    locations: ref(),
+    concerts: ref(),
+    alreadySearched: ref(false),
+    searchInProgress: ref(false)
+  }),
+
+  actions: {
+    /**
+     * Search for the termin in all bands, locations, events 
+     */
+    async startSearch() {
+      this.alreadySearched = true
+      this.searchInProgress = true
+
+      await searchBand(this.searchTerm)
+        .then(result => {
+          this.bands = result.data
+        })
+
+      await searchLocation(this.searchTerm)
+        .then(result => {
+          this.locations = result.data
+        })
+
+      await searchConcert(this.searchTerm)
+        .then(result => {
+          this.concerts = result.data
+        })
+
+      this.searchInProgress = false
+    }
+  }
+})

software/src/stores/shopStore.ts

@@ -0,0 +1,60 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { ConcertApiModel } from "../data/models/acts/concertApiModel";
+import { BandApiModel } from "../data/models/acts/bandApiModel";
+import { CityApiModel } from "../data/models/locations/cityApiModel";
+import { GenreApiModel } from "../data/models/acts/genreApiModel";
+import { searchBand } from "../data/api/bandApi";
+import { searchLocation } from "../data/api/locationApi";
+import { fetchConcerts, searchConcert } from "../data/api/concertApi";
+import { useFeedbackStore } from "./feedbackStore";
+
+export const useShopStore = defineStore("shopStore", {
+  state: () => ({
+    concertsFiltered: ref<Array<ConcertApiModel>>([]),
+    bandsFiltered: ref<Array<BandApiModel>>([]),
+    cities: ref<Array<CityApiModel>>([]),
+    cityFilterName: ref<string>(),
+    genreFilterName: ref<string>(),
+    genres: ref<Array<GenreApiModel>>([]),
+    alreadySearched: ref(false),
+    searchInProgress: ref(false)
+  }),
+  
+  actions: {
+    /**
+     * Search for the termin in all bands, locations, events 
+     */
+    async startSearch() {
+      this.alreadySearched = true
+      this.searchInProgress = true
+
+      await searchBand(this.searchTerm)
+        .then(result => {
+          this.bands = result.data
+        })
+
+      await searchLocation(this.searchTerm)
+        .then(result => {
+          this.locations = result.data
+        })
+
+      await searchConcert(this.searchTerm)
+        .then(result => {
+          this.concerts = result.data
+        })
+
+      this.searchInProgress = false
+    },
+
+    async getConcerts() {
+      const feedbackStore = useFeedbackStore()
+      feedbackStore.fetchDataFromServerInProgress = true
+
+      await fetchConcerts()
+        .then(result => {
+          this.concerts = result.data
+        })
+    }
+  }
+})

software/src/stores/shoppingStore.ts

@@ -0,0 +1,48 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { fetchAllCities } from "../data/api/cityApi";
+import { fetchAllGenres } from "../data/api/genreApi";
+import { useFeedbackStore } from "./feedbackStore";
+import { CityApiModel } from "../data/models/locations/cityApiModel";
+import { GenreApiModel } from "../data/models/acts/genreApiModel";
+
+/**
+ * @deprecated
+ */
+export const useShoppingStore = defineStore("shoppingStore", {
+  state: () => ({
+    cities: ref<Array<CityApiModel>>([]),
+    genres: ref<Array<GenreApiModel>>([]),
+    cityFilterName: ref<string>(),
+    genreFilterName: ref<string>()
+  }),
+
+  actions: {
+    async getEvents() {
+      const feedbackStore = useFeedbackStore()
+      feedbackStore.fetchDataFromServerInProgress = true
+    },
+
+    async getCities() {
+      const feedbackStore = useFeedbackStore()
+      feedbackStore.fetchDataFromServerInProgress = true
+
+      await fetchAllCities()
+        .then(result => {
+          this.cities = result.data
+          feedbackStore.fetchDataFromServerInProgress = false
+        })
+    },
+
+    async getGenres() {
+      const feedbackStore = useFeedbackStore()
+      feedbackStore.fetchDataFromServerInProgress = true
+
+      await fetchAllGenres()
+        .then(result => {
+          this.genres = result.data
+          feedbackStore.fetchDataFromServerInProgress = false
+        })
+    }
+  }
+})