AccountsAdminPage, ConcertsAdminPage

software/src/locales/de.json

@@ -31,7 +31,14 @@
     "goToTheConcert": "Zum Konzert",
     "noConcertsFound": "Keine Konzerte gefunden",
     "selectedConcert": "Ausgewähltes Konzert",
-    "concertSoldOut": "Ausverkauft"
+    "concertSoldOut": "Ausverkauft",
+    "addNewConcert": "Neues Konzert hinzufügen",
+    "date": "Datum",
+    "name": "Name des Konzertes",
+    "offered": "Angeboten",
+    "image": "Veranstaltungsbild",
+    "price": "Preis",
+    "inStock": "Übrige Tickets"
   },
   "band": {
     "band": "Band | Bands",
@@ -96,7 +103,9 @@
         "title": "Account löschen?",
         "description": "Soll der Account wirklich gelöscht werden? Dieser kann nicht mehr wiederhergestellt werden!"
       }
-    }
+    },
+    "addNewAccount": "Neuen Account hinzufügen",
+    "accountRole": "Account Rolle"
   },
   "order": {
     "orders": "Bestellung | Bestellungen",

software/src/locales/en.json

@@ -31,7 +31,14 @@
     "goToTheConcert": "Go to concert",
     "noConcertsFound": "No Concerts found",
     "selectedConcert": "Selected Concert",
-    "concertSoldOut": "Sold out"
+    "concertSoldOut": "Sold out",
+    "addNewConcert": "Add new concert",
+    "date": "Date",
+    "name": "Name of concert",
+    "offered": "Offered",
+    "image": "Image of concert",
+    "price": "Price",
+    "inStock": "Open tickets"
   },
   "band": {
     "band": "Band | Bands",
@@ -96,7 +103,9 @@
         "title": "Delete Account?",
         "description": "Do you really want to delete this account? This is permanent!"
       }
-    }
+    },
+    "addNewAccount": "Add new account",
+    "accountRole": "Account Role"
   },
   "order": {
     "orders": "Order | Orders",

software/src/pages/admin/accountsAdminPage/index.vue

@@ -1,6 +1,48 @@
 <script setup lang="ts">
+import { useAccountStore } from '@/stores/account.store';
+import adminDataLayout from '@/layouts/adminDataLayout.vue';
+import { useFeedbackStore } from '@/stores/feedback.store';
+
+const accountStore = useAccountStore()
+const feedbackStore = useFeedbackStore()
+
+const headers = [
+  { title: feedbackStore.i18n.t('account.userData.username'), value: "username" },
+  { title: feedbackStore.i18n.t('account.userData.email'), value: "email" },
+  { title: feedbackStore.i18n.t('account.userData.firstName'), value: "firstName" },
+  { title: feedbackStore.i18n.t('account.userData.lastName'), value: "lastName" },
+  { title: feedbackStore.i18n.t('account.accountRole'), value: "accountRole.name" },
+  { title: "", value: "edit", width: 130 }
+]
+
+accountStore.getAllAccounts()
 </script>
 
 <template>
-  Accounts Admin Page
+  <admin-data-layout
+    :add-button-string="$t('account.addNewAccount')"
+    :fetch-in-progress="accountStore.fetchInProgress"
+  >
+    <v-data-table
+      :items="accountStore.accounts"
+      :loading="accountStore.fetchInProgress"
+      :headers="headers"
+    >
+      <template #item.edit="{ item }">
+        <v-btn
+          icon="mdi-pencil"
+          variant="plain"
+          color="orange"
+          @click="accountStore.editAccount(item)"
+        />
+
+        <v-btn
+          icon="mdi-delete"
+          variant="plain"
+          color="red"
+          @click="accountStore.deleteAccount(item)"
+        />
+      </template>
+    </v-data-table>
+  </admin-data-layout>
 </template>

software/src/pages/admin/bandsAdminPage/index.vue

@@ -1,13 +1,10 @@
 <script setup lang="ts">
 import { useBandStore } from '@/stores/band.store';
-import outlinedButton from '@/components/basics/outlinedButton.vue';
 import bandEditDialog from './bandEditDialog.vue';
 import adminDataLayout from '@/layouts/adminDataLayout.vue';
-import { useRouter } from 'vue-router';
 import { useFeedbackStore } from '@/stores/feedback.store';
 
 const bandStore = useBandStore()
-const router = useRouter()
 const feedbackStore = useFeedbackStore()
 
 const headers = [
@@ -18,7 +15,7 @@ const headers = [
   { title: feedbackStore.i18n.t('band.imageMember', 2), value: "imageMembers" },
   { title: feedbackStore.i18n.t('band.image', 2), value: "images" },
   { title: feedbackStore.i18n.t('concert.concert', 2), value: "nrOfConcerts" },
-  { title: "", value: "edit", width: 130 },
+  { title: "", value: "edit", width: 130 }
 ]
 
 bandStore.getBands()

software/src/pages/admin/concertsAdminPage/index.vue

@@ -1,6 +1,77 @@
 <script setup lang="ts">
+import { useBandStore } from '@/stores/band.store';
+import { useConcertStore } from '@/stores/concert.store';
+import { useFeedbackStore } from '@/stores/feedback.store';
+import adminDataLayout from '@/layouts/adminDataLayout.vue';
+import moment from 'moment';
+
+const concertStore = useConcertStore()
+const bandStore = useBandStore()
+const feedbackStore = useFeedbackStore()
+
+const headers = [
+  { title: feedbackStore.i18n.t('concert.date'), value: "date" },
+  { title: feedbackStore.i18n.t('concert.name'), value: "name" },
+  { title: feedbackStore.i18n.t('band.name'), value: "band.name" },
+  { title: feedbackStore.i18n.t('location.name'), value: "location.name" },
+  { title: feedbackStore.i18n.t('concert.inStock'), value: "inStock" },
+  { title: feedbackStore.i18n.t('concert.offered'), value: "offered" },
+  { title: feedbackStore.i18n.t('concert.image'), value: "image" },
+  { title: feedbackStore.i18n.t('concert.price'), value: "price" },
+  { title: "", value: "edit", width: 130 }
+]
+
+concertStore.getConcerts()
 </script>
 
 <template>
-  Concerts Admin Page
+  <admin-data-layout
+    :add-button-string="$t('concert.addNewConcert')"
+    :fetch-in-progress="concertStore.fetchInProgress"
+    :on-add-click="() => concertStore.newConcert()"
+  >
+    <v-data-table
+      :items="concertStore.concerts"
+      :loading="concertStore.fetchInProgress"
+      :headers="headers"
+    >
+      <template #item.date="{ item }">
+        {{ moment(item.date).format("dd, DD.MM.YYYY") }}
+      </template>
+
+      <template #item.price="{ item }">
+        {{ item.price.toFixed(2) }} €
+      </template>
+
+      <template #item.image="{ item }">
+        <v-icon
+          :icon="item.image != '' ? 'mdi-check' : 'mdi-close'"
+          :color="item.image != '' ? 'green' : 'red'"
+        />
+      </template>
+
+      <template #item.offered="{ item }">
+        <v-icon
+          :icon="item.offered ? 'mdi-check' : 'mdi-close'"
+          :color="item.offered ? 'green' : 'red'"
+        />
+      </template>
+
+      <template #item.edit="{ item }">
+        <v-btn
+          icon="mdi-pencil"
+          variant="plain"
+          color="orange"
+          @click="concertStore.editConcert(item)"
+        />
+
+        <v-btn
+          icon="mdi-delete"
+          variant="plain"
+          color="red"
+          @click="concertStore.deleteConcert(item)"
+        />
+      </template>
+    </v-data-table>
+  </admin-data-layout>
 </template>

software/src/stores/account.store.ts

@@ -16,7 +16,7 @@ import { LocationApiModel } from "@/data/models/locations/locationApiModel";
 export const useAccountStore = defineStore("accountStore", {
   state: () => ({
     /** All accounts */
-    accounts: ref<Array<LocationApiModel>>([]),
+    accounts: ref<Array<AccountApiModel>>([]),
 
     /** Useraccount which is currently logged in */
     userAccount: useLocalStorage("hackmycart/accountStore/userAccount", new AccountApiModel()),
@@ -165,17 +165,6 @@ export const useAccountStore = defineStore("accountStore", {
         })
     },
 
-    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
      * 
@@ -196,6 +185,14 @@ export const useAccountStore = defineStore("accountStore", {
       this.userAccount.payments = this.userAccount.payments.filter((paym: PaymentModel) =>
         paym != payment
       )
+    },
+
+    editAccount(item: AccountModel) {
+      // todo
+    },
+
+    async deleteAccount(item: AccountModel) {
+      // todo
     }
   }
 })

software/src/stores/band.store.ts

@@ -18,7 +18,7 @@ export const useBandStore = defineStore("bandStore", {
     /** Request to server sent, waiting for data response */
     fetchInProgress: ref(false),
 
-    /** Show or hide the edit dialog for edit a band or genre */
+    /** Show or hide the edit dialog for edit a band */
     showEditDialog: ref(false)
   }),
 

software/src/stores/concert.store.ts

@@ -4,6 +4,7 @@ import { ConcertApiModel } from "../data/models/acts/concertApiModel";
 import { fetchConcertById, fetchAllConcerts, fetchUpcomingConcerts } from "../data/api/concertApi";
 import { ConcertDetailsApiModel } from "../data/models/acts/concertDetailsApiModel";
 import { CityModel } from "@/data/models/locations/cityModel";
+import { ConcertModel } from "@/data/models/acts/concertModel";
 
 export const useConcertStore = defineStore("concertStore", {
   state: () => ({
@@ -20,7 +21,10 @@ export const useConcertStore = defineStore("concertStore", {
     filteredCities: ref<Array<CityModel>>([]),
 
     /** Request to server sent, waiting for data response */
-    fetchInProgress: ref(false)
+    fetchInProgress: ref(false),
+
+    /** Show or hide the edit dialog for edit a concert */
+    showEditDialog: ref(false)
   }),
 
   actions: {
@@ -76,6 +80,19 @@ export const useConcertStore = defineStore("concertStore", {
           this.upcomingConcerts = result.data
           this.fetchInProgress = false
         })
+    },
+
+    newConcert() {
+      this.concert = new ConcertDetailsApiModel()
+      this.showEditDialog = true
+    },
+
+    editConcert(concert: ConcertModel) {
+      // todo
+    },
+
+    async deleteConcert(item: ConcertModel) {
+      // todo
     }
   }
 })