From 47e045dde3c8c540fb5c44f4860aa6499d3d8297 Mon Sep 17 00:00:00 2001
From: Tobias Zoghaib <tobias.zoghaib@stud.uni-hannover.de>
Date: Thu, 7 Nov 2024 17:18:49 +0100
Subject: [PATCH] OrderStore

---
 software/backend/routes/order.routes.ts       |   9 +
 software/backend/scripts/databaseHelper.ts    |   2 +-
 software/src/data/api/orderApi.ts             |   4 +
 software/src/locales/de.json                  |   6 +-
 software/src/locales/en.json                  |   6 +-
 .../src/pages/account/ordersPage/index.vue    |   7 +-
 .../admin/dashboardPage/dashboardCard.vue     |  42 ++++
 .../src/pages/admin/dashboardPage/index.vue   | 236 ++++++------------
 .../homePage/upcomingConcertsSection.vue      |   9 +-
 software/src/stores/account.store.ts          |   8 +-
 software/src/stores/feedback.store.ts         |   2 +-
 software/src/stores/order.store.ts            |  39 +++
 12 files changed, 196 insertions(+), 174 deletions(-)
 create mode 100644 software/src/pages/admin/dashboardPage/dashboardCard.vue
 create mode 100644 software/src/stores/order.store.ts

diff --git a/software/backend/routes/order.routes.ts b/software/backend/routes/order.routes.ts
index ea11673..319bd3e 100644
--- a/software/backend/routes/order.routes.ts
+++ b/software/backend/routes/order.routes.ts
@@ -13,6 +13,15 @@ import { SeatGroup } from "../models/locations/seatGroup.model";
 
 export const order = Router()
 
+// Get all orders
+order.get("/", (req: Request, res: Response) => {
+  Order.findAll()
+    .then(orders => {
+      res.status(200).json(orders)
+    })
+})
+
+
 // Get all orders of one account by it's user id
 order.get("/:id", (req: Request, res: Response) => {
   Order.findAll({
diff --git a/software/backend/scripts/databaseHelper.ts b/software/backend/scripts/databaseHelper.ts
index b8e06de..1fa8d13 100644
--- a/software/backend/scripts/databaseHelper.ts
+++ b/software/backend/scripts/databaseHelper.ts
@@ -272,7 +272,7 @@ export async function prepopulateDatabase() {
                   date: concert.date,
                   name: concertGroup.name,
                   price: concert.price,
-                  image: concertGroup.image,
+                  image: "http://localhost:3000/static/" + concertGroup.image,
                   inStock: concert.inStock,
                   offered: true,
                   bandId: dataset.dataValues.id,
diff --git a/software/src/data/api/orderApi.ts b/software/src/data/api/orderApi.ts
index 2109f94..4c75c21 100644
--- a/software/src/data/api/orderApi.ts
+++ b/software/src/data/api/orderApi.ts
@@ -31,4 +31,8 @@ export async function createOrder(
     paymentId: paymentId,
     addressId: addressId
   })
+}
+
+export async function fetchAllOrders() {
+  return axios.get(BASE_URL)
 }
\ No newline at end of file
diff --git a/software/src/locales/de.json b/software/src/locales/de.json
index 63f150f..cc3c2a7 100644
--- a/software/src/locales/de.json
+++ b/software/src/locales/de.json
@@ -58,7 +58,8 @@
     "imageMember": "Bilder Mitglieder",
     "addNewGenre": "Neues Genre hinzufügen",
     "editGenre": "Genre bearbeiten",
-    "bandDetails": "Band Details"
+    "bandDetails": "Band Details",
+    "withoutConcert": "ohne Konzert"
   },
   "ticket": {
     "tickets": "Ticket | Tickets"
@@ -107,7 +108,8 @@
     },
     "addNewAccount": "Neuen Account hinzufügen",
     "accountRole": "Account Rolle",
-    "noRealPaymentsNeeded": "Keine echten Kontodaten nötig!"
+    "noRealPaymentsNeeded": "Keine echten Kontodaten nötig!",
+    "administrator": "Administrator | Administratoren"
   },
   "order": {
     "orders": "Bestellung | Bestellungen",
diff --git a/software/src/locales/en.json b/software/src/locales/en.json
index 1a14195..16f60bf 100644
--- a/software/src/locales/en.json
+++ b/software/src/locales/en.json
@@ -58,7 +58,8 @@
     "imageMember": "Images Members",
     "addNewGenre": "Add new Genre",
     "editGenre": "Edit Genre",
-    "bandDetails": "Band Details"
+    "bandDetails": "Band Details",
+    "withoutConcert": "without concert"
   },
   "ticket": {
     "tickets": "Ticket | Tickets"
@@ -107,7 +108,8 @@
     },
     "addNewAccount": "Add new account",
     "accountRole": "Account Role",
-    "noRealPaymentsNeeded": "No real payment data required!"
+    "noRealPaymentsNeeded": "No real payment data required!",
+    "administrator": "Administrator"
   },
   "order": {
     "orders": "Order | Orders",
diff --git a/software/src/pages/account/ordersPage/index.vue b/software/src/pages/account/ordersPage/index.vue
index e7311e4..27be1dd 100644
--- a/software/src/pages/account/ordersPage/index.vue
+++ b/software/src/pages/account/ordersPage/index.vue
@@ -3,10 +3,13 @@ import { useAccountStore } from '@/stores/account.store';
 import orderItem from './orderItem.vue';
 import accountSubPageLayout from '@/layouts/accountSubPageLayout.vue';
 import circularProgressIndeterminate from '@/components/basics/circularProgressIndeterminate.vue';
+import { useOrderStore } from '@/stores/order.store';
 
 const accountStore = useAccountStore()
+const orderStore = useOrderStore()
 
 accountStore.refreshOrders()
+orderStore.getOrdersOfAccount(accountStore.userAccount)
 </script>
 
 <template>
@@ -22,8 +25,8 @@ accountStore.refreshOrders()
 
     <!-- Display all orders -->
     <v-row
-      v-else-if="accountStore.orders.length > 0"
-      v-for="order in accountStore.orders"
+      v-else-if="orderStore.orders.length > 0"
+      v-for="order in orderStore.orders"
     >
       <v-col>
         <order-item
diff --git a/software/src/pages/admin/dashboardPage/dashboardCard.vue b/software/src/pages/admin/dashboardPage/dashboardCard.vue
new file mode 100644
index 0000000..418423e
--- /dev/null
+++ b/software/src/pages/admin/dashboardPage/dashboardCard.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import cardView from '@/components/basics/cardView.vue';
+import { useRouter } from 'vue-router';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
+
+const router = useRouter()
+
+defineProps({
+  title: String,
+  icon: String,
+  firstLine: String,
+  secondLine: String,
+  buttonRoute: String,
+  loading: Boolean
+})
+</script>
+
+<template>
+  <v-col cols="12" md="6" lg="4">
+    <card-view
+      :title="title"
+      :icon="icon"
+    >
+      <div class="text-h4 text-center">
+        {{ firstLine }}
+      </div>
+
+      <div class="text-h6 text-center text-disabled">
+        {{ secondLine }}
+      </div>
+
+      <template #actions>
+        <outlined-button
+          @click="router.push(buttonRoute)"
+          :loading="loading"
+        >
+          {{ $t('misc.actions.more') }}
+        </outlined-button>
+      </template>
+    </card-view>
+  </v-col>
+</template>
\ No newline at end of file
diff --git a/software/src/pages/admin/dashboardPage/index.vue b/software/src/pages/admin/dashboardPage/index.vue
index a850479..e117e3b 100644
--- a/software/src/pages/admin/dashboardPage/index.vue
+++ b/software/src/pages/admin/dashboardPage/index.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { useRouter } from 'vue-router';
-import outlinedButton from '@/components/basics/outlinedButton.vue';
-import cardView from '@/components/basics/cardView.vue';
 import { useConcertStore } from '@/stores/concert.store';
 import { useBandStore } from '@/stores/band.store';
 import { useAccountStore } from '@/stores/account.store';
@@ -9,8 +6,9 @@ import { useLocationStore } from '@/stores/location.store';
 import { useExerciseStore } from '@/stores/exercise.store';
 import { useGenreStore } from '@/stores/genre.store';
 import { usePreferencesStore } from '@/stores/preferences.store';
+import dashboardCard from './dashboardCard.vue';
+import { useOrderStore } from '@/stores/order.store';
 
-const router = useRouter()
 const concertStore = useConcertStore()
 const bandStore = useBandStore()
 const accountStore = useAccountStore()
@@ -18,6 +16,7 @@ const genreStore = useGenreStore()
 const locationStore = useLocationStore()
 const exerciseStore = useExerciseStore()
 const preferencesStore = usePreferencesStore()
+const orderStore = useOrderStore()
 
 exerciseStore.solveExercise(2, 1)
 
@@ -27,171 +26,94 @@ locationStore.getLocations()
 genreStore.getGenres()
 accountStore.getAllAccounts()
 concertStore.getConcerts()
+orderStore.getAllOrders()
 </script>
 
 <template>
   <v-container>
     <v-row>
-      <v-col>
-        <card-view
-          :title="$t('band.band', 2)"
-          icon="mdi-guitar-electric"
-        >
-          <div class="text-h4 text-center">
-            {{ bandStore.bands.length }} {{ $t('band.band', 2) }}
-          </div>
+      <dashboard-card
+        :title="$t('band.band', 2)"
+        icon="mdi-guitar-electric"
+        :first-line="bandStore.bands.length + ' ' + $t('band.band', 2)"
+        :second-line="bandStore.bands.reduce((counter, band) => {
+          return band.concerts.length == 0 ? counter += 1 : counter
+        }, 0) + ' ' + $t('band.withoutConcert', 2)"
+        button-route="/admin/bands"
+        :loading="bandStore.fetchInProgress"
+      />
 
-          <template #actions>
-            <outlined-button
-              @click="router.push('/admin/bands')"
-              :loading="bandStore.fetchInProgress"
-            >
-              {{ $t('misc.actions.more') }}
-            </outlined-button>
-          </template>
-        </card-view>
-      </v-col>
+      <dashboard-card
+        :title="$t('concert.concert', 2)"
+        icon="mdi-ticket"
+        :first-line="concertStore.concerts.length + ' ' + $t('concert.concert', 2)"
+        :second-line="concertStore.concerts.reduce((counter, obj) => {
+          if (obj.inStock == 0) {
+            counter += 1
+          }
 
-      <v-col>
-        <card-view
-          :title="$t('concert.concert', 2)"
-          icon="mdi-ticket"
-        >
-          <div class="text-h4 text-center">
-            {{ concertStore.concerts.length }} {{ $t('concert.concert', 2) }}
-          </div>
-
-          <div class="text-h6 text-disabled text-center">
-            {{ concertStore.concerts.reduce((counter, obj) => {
-              if (obj.inStock == 0) {
-                counter += 1
-              }
-
-              return counter
-            }, 0) }} {{ $t('concert.concertSoldOut') }}
-          </div>
-
-          <template #actions>
-            <outlined-button
-              @click="router.push('/admin/concerts')"
-              :loading="concertStore.fetchInProgress"
-            >
-              {{ $t('misc.actions.more') }}
-            </outlined-button>
-          </template>
-        </card-view>
-      </v-col>
+          return counter
+        }, 0) + ' ' + $t('concert.concertSoldOut')"
+        button-route="/admin/concerts"
+        :loading="concertStore.fetchInProgress"
+      />
 
 
-      <v-col>
-        <card-view
-          :title="$t('location.location', 2)"
-          icon="mdi-city"
-        >
-          <div class="text-h4 text-center">
-            {{ locationStore.locations.length }} {{ $t('location.location', 2) }}
-          </div>
+      <dashboard-card
+        :title="$t('location.location', 2)"
+        icon="mdi-city"
+        :first-line="locationStore.locations.length + ' ' + $t('location.location', 2)"
+        :second-line="locationStore.locations.reduce((city, obj) => {
+          city[obj.city.name] = 
+            city[obj.city.name] === undefined ? city.push(obj.city.name) : city[obj.city.name] += 1
 
-          <div class="text-h6 text-disabled text-center">
-            {{ 
-              locationStore.locations.reduce((city, obj) => {
-                city[obj.city.name] = 
-                  city[obj.city.name] === undefined ? city.push(obj.city.name) : city[obj.city.name] += 1
+          return city
+        }, []).length + ' ' + $t('location.city', 2)"
+        button-route="/admin/locations"
+        :loading="locationStore.fetchInProgress"
+      />
 
-                return city
-              }, []).length 
-          }}
-            {{ $t('location.city', 2) }}
-          </div>
+      <dashboard-card
+        :title="$t('account.account', 2)"
+        icon="mdi-account"
+        :first-line="accountStore.accounts.length + ' ' + $t('account.account', 2)"
+        :second-line="accountStore.accounts.reduce((counter, obj) => {
+          return obj.accountRole.privilegeAdminPanel ? counter += 1 : counter
+          }, 0) + ' ' + $t('account.administrator', 2)"
+        button-route="/admin/accounts"
+        :loading="accountStore.fetchInProgress"
+      />
 
-          <template #actions>
-            <outlined-button
-              @click="router.push('/admin/locations')"
-              :loading="locationStore.fetchInProgress"
-            >
-              {{ $t('misc.actions.more') }}
-            </outlined-button>
-          </template>
-        </card-view>
-      </v-col>
+      <dashboard-card
+        :title="$t('band.genre', 2)"
+        icon="mdi-music-clef-treble"
+        :first-line="genreStore.genres.length + ' ' + $t('band.genre', 2)"
+        :second-line="genreStore.genres.reduce((counter, obj) => {
+            return obj.bands.length == 0 ? counter += 1 : counter
+          }, 0) + ' ' + $t('genre.withoutBand', 2)"
+        button-route="/admin/genres"
+        :loading="genreStore.fetchInProgress"
+      />
+
+      <dashboard-card
+        :title="$t('misc.file', 2)"
+        icon="mdi-file"
+        :first-line="preferencesStore.staticFiles.reduce((counter, obj) => {
+            return counter += obj.files.length
+          }, 0) + ' ' + $t('misc.file', 2)"
+        :second-line="preferencesStore.staticFiles.length + ' ' + $t('misc.folder', 2)"
+        button-route="/admin/files"
+        :loading="preferencesStore.fetchInProgress"
+      />
+
+      <dashboard-card
+        :title="$t('order.orders', 2)"
+        icon="mdi-basket"
+        :first-line="orderStore.orders.length + ' ' + $t('order.orders', 2)"
+        second-line="todo"
+        button-route="/admin/orders"
+        :loading="orderStore.fetchInProgress"
+      />
     </v-row>
-    
-
-    <v-row>
-      <v-col>
-        <card-view
-          :title="$t('account.account', 2)"
-          icon="mdi-account"
-        >
-          <div class="text-h4 text-center">
-            {{ accountStore.accounts.length }} {{ $t('account.account', accountStore.accounts.length) }}
-          </div>
-
-          <template #actions>
-            <outlined-button
-              @click="router.push('/admin/accounts')"
-              :loading="accountStore.fetchInProgress"
-            >
-              {{ $t('misc.actions.more') }}
-            </outlined-button>
-          </template>
-        </card-view>
-      </v-col>
-
-      <v-col>
-        <card-view
-          :title="$t('band.genre', 2)"
-          icon="mdi-music-clef-treble"
-        >
-          <div class="text-h4 text-center">
-            {{ genreStore.genres.length }} {{ $t('band.genre', 2) }}
-          </div>
-
-          <div class="text-h6 text-center text-disabled">
-            {{ genreStore.genres.reduce((counter, obj) => {
-              return obj.bands.length == 0 ? counter += 1 : counter
-            }, 0) }} {{ $t('genre.withoutBand') }}
-          </div>
-
-          <template #actions>
-            <outlined-button
-              @click="router.push('/admin/genres')"
-              :loading="genreStore.fetchInProgress"
-            >
-              {{ $t('misc.actions.more') }}
-            </outlined-button>
-          </template>
-        </card-view>
-      </v-col>
-
-      <v-col>
-        <card-view
-          :title="$t('misc.file', 2)"
-          icon="mdi-file"
-        >
-          <div class="text-h4 text-center">
-            {{ preferencesStore.staticFiles.reduce((counter, obj) => {
-              return counter += obj.files.length
-            }, 0) }} {{ $t('misc.file', 2) }}
-          </div>
-
-          <div class="text-h6 text-center text-disabled">
-            {{ preferencesStore.staticFiles.length }} {{ $t('misc.folder', 2) }}
-          </div>
-
-          <template #actions>
-            <outlined-button
-              @click="router.push('/admin/files')"
-              :loading="preferencesStore.fetchInProgress"
-            >
-              {{ $t('misc.actions.more') }}
-            </outlined-button>
-          </template>
-        </card-view>
-      </v-col>
-    </v-row>
-
-    <!-- todo: Orders -->
-      
   </v-container>
 </template>
\ No newline at end of file
diff --git a/software/src/pages/homePage/upcomingConcertsSection.vue b/software/src/pages/homePage/upcomingConcertsSection.vue
index ab6f19a..ce83cb1 100644
--- a/software/src/pages/homePage/upcomingConcertsSection.vue
+++ b/software/src/pages/homePage/upcomingConcertsSection.vue
@@ -25,12 +25,17 @@ const router = useRouter()
     <v-col v-else v-for="concert in concertStore.upcomingConcerts" cols="3">
       <card-view-top-image
         :image="concert.image"
-        :title="concert.band.name"
+        :title="moment(concert.date).format('DD.MM.YYYY')"
         smaller-title
         @click="router.push('/bands/details/' + concert.band.name.replaceAll(' ', '-').toLowerCase())"
         :loading="concertStore.fetchInProgress"
       >
-        {{ moment(concert.date).format("DD.MM.YYYY") }},
+        <div>
+          {{ concert.name }}
+        </div>
+        <div>
+          {{ concert.band.name }}
+        </div>
         {{ $t("misc.from") }} {{ (concert.price).toPrecision(4) }} €
       </card-view-top-image>
     </v-col>
diff --git a/software/src/stores/account.store.ts b/software/src/stores/account.store.ts
index 7dba419..bd56931 100644
--- a/software/src/stores/account.store.ts
+++ b/software/src/stores/account.store.ts
@@ -1,7 +1,5 @@
 import { useLocalStorage } from "@vueuse/core";
-import { acceptHMRUpdate, defineStore } from "pinia";
 import { AccountModel } from "../data/models/user/accountModel";
-import { OrderModel } from "../data/models/ordering/orderModel";
 import { useFeedbackStore } from "./feedback.store";
 import { deleteAccount, fetchAllAccounts, loginAccount, registerAccount, updateAccount } from "../data/api/accountApi";
 import { fetchUserOrders } from "../data/api/orderApi";
@@ -10,8 +8,7 @@ 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/apiEndpoints/orderApiModel";
-import { LocationApiModel } from "@/data/models/locations/locationApiModel";
+import { defineStore } from "pinia";
 
 export const useAccountStore = defineStore("accountStore", {
   state: () => ({
@@ -30,9 +27,6 @@ export const useAccountStore = defineStore("accountStore", {
     /** Buffer for register data */
     registerData: ref<AccountModel>(new AccountModel()),
 
-    /** All orders of the user */
-    orders: ref<Array<OrderApiModel>>([]),
-
     /** Request to server sent, waiting for data response */
     fetchInProgress: ref(false)
   }),
diff --git a/software/src/stores/feedback.store.ts b/software/src/stores/feedback.store.ts
index fcb721b..4c1e3b1 100644
--- a/software/src/stores/feedback.store.ts
+++ b/software/src/stores/feedback.store.ts
@@ -308,7 +308,7 @@ export const useFeedbackStore = defineStore("feedbackStore", {
         case BannerStateEnum.GENREDELETESUCCESSFUL:
         case BannerStateEnum.GENRESAVEDERROR:
         case BannerStateEnum.GENRESAVEDSUCCESSFUL:
-          this.icon = "mdi-music"
+          this.icon = "mdi-music-clef-treble"
           break;
       }
 
diff --git a/software/src/stores/order.store.ts b/software/src/stores/order.store.ts
new file mode 100644
index 0000000..d5904ce
--- /dev/null
+++ b/software/src/stores/order.store.ts
@@ -0,0 +1,39 @@
+import { fetchAllOrders, fetchUserOrders } from "@/data/api/orderApi";
+import { OrderApiModel } from "@/data/models/apiEndpoints/orderApiModel";
+import { AccountModel } from "@/data/models/user/accountModel";
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useOrderStore = defineStore("orderStore", {
+  state: () => ({
+    /** All orders of one/all users */
+    orders: ref<Array<OrderApiModel>>([]),
+
+    /** Request to server sent, waiting for data response */
+    fetchInProgress: ref(false)
+  }),
+
+  actions: {
+    /**
+     * Get all orders from all accounts from server
+     */
+    async getAllOrders() {
+      fetchAllOrders()
+        .then(res => {
+          this.orders = res.data
+        })
+    },
+
+    /**
+     * Get all orders from one account from server
+     * 
+     * @param user User to request orders from
+     */
+    async getOrdersOfAccount(user: AccountModel) {
+      fetchUserOrders(user.id)
+        .then(res => {
+          this.orders = res.data
+        })
+    }
+  }
+})
\ No newline at end of file