From c570a04052bb1b60d7c7a2995f60c47000cf7f40 Mon Sep 17 00:00:00 2001
From: Tobias Zoghaib <tobias.zoghaib@stud.uni-hannover.de>
Date: Sat, 26 Oct 2024 16:23:00 +0200
Subject: [PATCH] Genre Admin page, new Genre store

---
 software/backend/routes/genre.routes.ts       |  5 +-
 software/src/layouts/adminDataLayout.vue      | 47 ++++++++++++++++
 software/src/locales/de.json                  |  4 +-
 software/src/locales/en.json                  |  4 +-
 .../admin/bandsAdminPage/bandEditDialog.vue   |  6 ++-
 .../src/pages/admin/dashboardPage/index.vue   |  5 +-
 .../admin/genresAdminPage/genreEditDialog.vue | 38 +++++++++++++
 .../src/pages/admin/genresAdminPage/index.vue | 49 ++++++++++++++++-
 .../pages/bands/bandsPage/bandFilterbar.vue   |  6 ++-
 software/src/stores/band.store.ts             | 33 ++++--------
 software/src/stores/genre.store.ts            | 53 +++++++++++++++++++
 11 files changed, 218 insertions(+), 32 deletions(-)
 create mode 100644 software/src/layouts/adminDataLayout.vue
 create mode 100644 software/src/pages/admin/genresAdminPage/genreEditDialog.vue
 create mode 100644 software/src/stores/genre.store.ts

diff --git a/software/backend/routes/genre.routes.ts b/software/backend/routes/genre.routes.ts
index 131367d..91273be 100644
--- a/software/backend/routes/genre.routes.ts
+++ b/software/backend/routes/genre.routes.ts
@@ -1,4 +1,3 @@
-import { Rating } from "../models/acts/rating.model";
 import { Band } from "../models/acts/band.model";
 import { Genre } from "../models/acts/genre.model";
 import { Request, Response, Router } from "express";
@@ -9,7 +8,9 @@ export const genre = Router()
  * Get all available Genres
  */
 genre.get("/", (req: Request, res: Response) => {
-  Genre.findAll()
+  Genre.findAll({
+    include: [ Band ]
+  })
     .then(genres => {
       res.status(200).json(genres)
     })
diff --git a/software/src/layouts/adminDataLayout.vue b/software/src/layouts/adminDataLayout.vue
new file mode 100644
index 0000000..40ba558
--- /dev/null
+++ b/software/src/layouts/adminDataLayout.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import outlinedButton from '@/components/basics/outlinedButton.vue';
+import { useRouter } from 'vue-router';
+
+const fetchInProgress = defineModel("fetchInProgress", { default: false })
+const router = useRouter()
+
+defineProps({
+  addButtonString: String,
+  onAddClick: {
+    type: Function,
+    default: () => {}
+  }
+})
+</script>
+
+<template>
+  <v-container>
+    <v-row>
+      <v-col>
+        <outlined-button
+          prepend-icon="mdi-arrow-left"
+          @click="router.go(-1)"
+        >
+          {{ $t('misc.onePageBack') }}
+        </outlined-button>
+      </v-col>
+
+      <v-col class="text-end">
+        <outlined-button
+          prepend-icon="mdi-plus"
+          color="green"
+          :disabled="fetchInProgress"
+          @click="onAddClick()"
+        >
+          {{ addButtonString }}
+        </outlined-button>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <slot></slot>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
\ No newline at end of file
diff --git a/software/src/locales/de.json b/software/src/locales/de.json
index b3ae09a..0f52f0a 100644
--- a/software/src/locales/de.json
+++ b/software/src/locales/de.json
@@ -40,7 +40,9 @@
     "descriptionEn": "Beschreibung Englisch",
     "addNewBand": "Neue Band hinzufügen",
     "logo": "Band Logo",
-    "imageMember": "Bilder Mitglieder"
+    "imageMember": "Bilder Mitglieder",
+    "addNewGenre": "Neues Genre hinzufügen",
+    "editGenre": "Genre bearbeiten"
   },
   "ticket": {
     "tickets": "Ticket | Tickets"
diff --git a/software/src/locales/en.json b/software/src/locales/en.json
index c82e4f8..aa17ea5 100644
--- a/software/src/locales/en.json
+++ b/software/src/locales/en.json
@@ -40,7 +40,9 @@
     "descriptionEn": "Description English",
     "addNewBand": "Add new Band",
     "logo": "Band logo",
-    "imageMember": "Images Members"
+    "imageMember": "Images Members",
+    "addNewGenre": "Add new Genre",
+    "editGenre": "Edit Genre"
   },
   "ticket": {
     "tickets": "Ticket | Tickets"
diff --git a/software/src/pages/admin/bandsAdminPage/bandEditDialog.vue b/software/src/pages/admin/bandsAdminPage/bandEditDialog.vue
index f5fa188..8d8acd9 100644
--- a/software/src/pages/admin/bandsAdminPage/bandEditDialog.vue
+++ b/software/src/pages/admin/bandsAdminPage/bandEditDialog.vue
@@ -3,8 +3,10 @@ import actionDialog from '@/components/basics/actionDialog.vue';
 import OutlinedButton from '@/components/basics/outlinedButton.vue';
 import { GenreModel } from '@/data/models/acts/genreModel';
 import { useBandStore } from '@/stores/band.store';
+import { useGenreStore } from '@/stores/genre.store';
 
 const bandStore = useBandStore()
+const genreStore = useGenreStore()
 
 function itemProps(item: GenreModel) {
   return {
@@ -15,7 +17,7 @@ function itemProps(item: GenreModel) {
 
 <template>
   <action-dialog
-    v-model="bandStore.showBandEditDialog"
+    v-model="bandStore.showEditDialog"
     :title="$t('band.editBand')"
     icon="mdi-pencil"
   >
@@ -43,7 +45,7 @@ function itemProps(item: GenreModel) {
           <v-select
             :label="$t('band.genre', 2)"
             v-model="bandStore.band.genres"
-            :items="bandStore.availableGenres"
+            :items="genreStore.genres"
             :item-props="itemProps"
             variant="outlined"
             hide-details
diff --git a/software/src/pages/admin/dashboardPage/index.vue b/software/src/pages/admin/dashboardPage/index.vue
index 1caedac..717f88e 100644
--- a/software/src/pages/admin/dashboardPage/index.vue
+++ b/software/src/pages/admin/dashboardPage/index.vue
@@ -8,11 +8,13 @@ import { useAccountStore } from '@/stores/account.store';
 import { useLocationStore } from '@/stores/location.store';
 import { ref } from 'vue';
 import { useExerciseStore } from '@/stores/exercise.store';
+import { useGenreStore } from '@/stores/genre.store';
 
 const router = useRouter()
 const concertStore = useConcertStore()
 const bandStore = useBandStore()
 const accountStore = useAccountStore()
+const genreStore = useGenreStore()
 const locationStore = useLocationStore()
 const soldOutConcerts = ref(0)
 const exerciseStore = useExerciseStore()
@@ -21,6 +23,7 @@ exerciseStore.solveExercise(2, 1)
 
 bandStore.getBands()
 locationStore.getLocations()
+genreStore.getGenres()
 concertStore.getConcerts()
   .then(result => {
     for(let concert of concertStore.concerts) {
@@ -112,7 +115,7 @@ concertStore.getConcerts()
           icon="mdi-account"
         >
           <div class="text-h4 text-center">
-            {{ bandStore.availableGenres.length }} {{ $t('band.genre', 2) }}
+            {{ genreStore.genres.length }} {{ $t('band.genre', 2) }}
           </div>
 
           <template #actions>
diff --git a/software/src/pages/admin/genresAdminPage/genreEditDialog.vue b/software/src/pages/admin/genresAdminPage/genreEditDialog.vue
new file mode 100644
index 0000000..7df2c62
--- /dev/null
+++ b/software/src/pages/admin/genresAdminPage/genreEditDialog.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import actionDialog from '@/components/basics/actionDialog.vue';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
+import { useGenreStore } from '@/stores/genre.store';
+
+const genreStore = useGenreStore()
+</script>
+
+<template>
+  <action-dialog
+    v-model="genreStore.showEditDialog"
+    :title="$t('band.editGenre')"
+    icon="mdi-pencil"
+  >
+    <v-container>
+      <v-row>
+        <v-col>
+          <v-text-field
+            :label="$t('band.genre')"
+            v-model="genreStore.genre.name"
+            variant="outlined"
+            hide-details
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <template #actions>
+      <outlined-button
+        color="green"
+        @click="genreStore.saveGenre"
+        :loading="genreStore.fetchInProgress"
+      >
+        {{ $t('misc.actions.save') }}
+      </outlined-button>
+    </template>
+  </action-dialog>
+</template>
\ No newline at end of file
diff --git a/software/src/pages/admin/genresAdminPage/index.vue b/software/src/pages/admin/genresAdminPage/index.vue
index 67cbbec..47c060d 100644
--- a/software/src/pages/admin/genresAdminPage/index.vue
+++ b/software/src/pages/admin/genresAdminPage/index.vue
@@ -1,6 +1,53 @@
 <script setup lang="ts">
+import adminDataLayout from '@/layouts/adminDataLayout.vue';
+import genreEditDialog from './genreEditDialog.vue';
+import { useGenreStore } from '@/stores/genre.store';
+
+const genreStore = useGenreStore()
+
+const headers = [
+  { title: "Name", value: "name" },
+  { title: "Bands", value: "bands" },
+  { title: "", value: "edit", width: 130 }
+]
+
+genreStore.getGenres()
 </script>
 
 <template>
-  Genres Admin Page
+  <admin-data-layout
+    :add-button-string="$t('band.addNewGenre')"
+    :fetch-in-progress="genreStore.fetchInProgress"
+    :on-add-click="() => { genreStore.newGenre() }"
+  >
+    <v-data-table
+      :loading="genreStore.fetchInProgress"
+      :items="genreStore.genres"
+      :headers="headers"
+    >
+      <template #item.bands="{ item }">
+        <v-chip v-for="band of item.bands" class="mx-1">
+          {{ band.name }}
+        </v-chip>
+      </template>
+
+      <template #item.edit="{ item }">
+        <v-btn
+          icon="mdi-pencil"
+          variant="plain"
+          color="orange"
+          @click="genreStore.editGenre(item)"
+        />
+
+        <v-btn
+          icon="mdi-delete"
+          variant="plain"
+          color="red"
+          @click="genreStore.deleteGenre(item)"
+        />
+      </template>
+    </v-data-table>
+  </admin-data-layout>
+
+  <genre-edit-dialog />
 </template>
\ No newline at end of file
diff --git a/software/src/pages/bands/bandsPage/bandFilterbar.vue b/software/src/pages/bands/bandsPage/bandFilterbar.vue
index d43d2f7..09c221c 100644
--- a/software/src/pages/bands/bandsPage/bandFilterbar.vue
+++ b/software/src/pages/bands/bandsPage/bandFilterbar.vue
@@ -3,8 +3,10 @@ import cardView from '@/components/basics/cardView.vue';
 import { useBandStore } from '@/stores/band.store';
 import outlinedButton from '@/components/basics/outlinedButton.vue';
 import { GenreModel } from '@/data/models/acts/genreModel';
+import { useGenreStore } from '@/stores/genre.store';
 
 const bandStore = useBandStore()
+const genreStore = useGenreStore()
 
 function itemProps(item: GenreModel) {
   return {
@@ -21,8 +23,8 @@ function itemProps(item: GenreModel) {
     <v-row>
       <v-col>
         <v-select
-          v-model="bandStore.filteredGenres"
-          :items="bandStore.availableGenres"
+          v-model="genreStore.filteredGenres"
+          :items="genreStore.genres"
           variant="outlined"
           :label="$t('band.genre', 2)"
           :item-props="itemProps"
diff --git a/software/src/stores/band.store.ts b/software/src/stores/band.store.ts
index c595a13..e4074c0 100644
--- a/software/src/stores/band.store.ts
+++ b/software/src/stores/band.store.ts
@@ -3,10 +3,9 @@ import { ref } from "vue";
 import { BandApiModel } from "../data/models/acts/bandApiModel";
 import { fetchAllBands, fetchBandByName, patchBand, postBand } from "../data/api/bandApi";
 import { BandDetailsApiModel } from "../data/models/acts/bandDetailsApiModel";
-import { GenreModel } from "@/data/models/acts/genreModel";
-import { fetchAllGenres } from "@/data/api/genreApi";
 import { useFeedbackStore } from "./feedback.store";
 import { BannerStateEnum } from "@/data/enums/bannerStateEnum";
+import { useGenreStore } from "./genre.store";
 
 export const useBandStore = defineStore("bandStore", {
   state: () => ({
@@ -16,17 +15,11 @@ export const useBandStore = defineStore("bandStore", {
     /** All information about a single band */
     band: ref<BandDetailsApiModel>(new BandDetailsApiModel()),
 
-    /** Genres to filter bands for */
-    filteredGenres: ref<Array<GenreModel>>([]),
-
-    /** All available genres from server */
-    availableGenres: ref<Array<GenreModel>>([]),
-    
     /** Request to server sent, waiting for data response */
     fetchInProgress: ref(false),
 
-    /** Show or hide the edit dialog for edit a band */
-    showBandEditDialog: ref(false)
+    /** Show or hide the edit dialog for edit a band or genre */
+    showEditDialog: ref(false)
   }),
 
   actions: {
@@ -34,17 +27,18 @@ export const useBandStore = defineStore("bandStore", {
      * Get all bands from server
      */
     async getBands() {
+      const genreStore = useGenreStore()
       this.fetchInProgress = true
 
       await fetchAllBands()
         .then(result => {
           this.bands = result.data.filter((band: BandApiModel) => {
-            if (this.filteredGenres.length == 0) {
+            if (genreStore.filteredGenres.length == 0) {
               return true
             }
 
             for (let bandGenre of band.genres) {
-              for (let filteredGenres of this.filteredGenres) {
+              for (let filteredGenres of genreStore.filteredGenres) {
                 if (bandGenre.name == filteredGenres.name) {
                   return true
                 }
@@ -55,11 +49,6 @@ export const useBandStore = defineStore("bandStore", {
           })
         })
 
-      await fetchAllGenres()
-        .then(result => {
-          this.availableGenres = result.data
-        })
-
       this.fetchInProgress = false
     },
 
@@ -83,10 +72,10 @@ export const useBandStore = defineStore("bandStore", {
      */
     newBand() {
       this.band = new BandDetailsApiModel()
-
-      this.showBandEditDialog = true
+      this.showEditDialog = true
     },
 
+    
     /**
      * Edit a band. Fetch all information about the band, opens the edit dialog
      * 
@@ -95,7 +84,7 @@ export const useBandStore = defineStore("bandStore", {
     async editBand(name: string) {
       await this.getBand(name)
       
-      this.showBandEditDialog = true
+      this.showEditDialog = true
     },
 
     /**
@@ -112,7 +101,7 @@ export const useBandStore = defineStore("bandStore", {
               feedbackStore.changeBanner(BannerStateEnum.BANDSAVEDSUCCESSFUL)
 
               this.getBands()
-              this.showBandEditDialog = false
+              this.showEditDialog = false
             } else {
               feedbackStore.changeBanner(BannerStateEnum.BANDSAVEDERROR)
             }
@@ -124,7 +113,7 @@ export const useBandStore = defineStore("bandStore", {
               feedbackStore.changeBanner(BannerStateEnum.BANDSAVEDSUCCESSFUL)
 
               this.getBands()
-              this.showBandEditDialog = false
+              this.showEditDialog = false
             } else {
               feedbackStore.changeBanner(BannerStateEnum.BANDSAVEDERROR)
             }
diff --git a/software/src/stores/genre.store.ts b/software/src/stores/genre.store.ts
new file mode 100644
index 0000000..5874cd3
--- /dev/null
+++ b/software/src/stores/genre.store.ts
@@ -0,0 +1,53 @@
+import { fetchAllGenres } from "@/data/api/genreApi";
+import { GenreApiModel } from "@/data/models/acts/genreApiModel";
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useGenreStore = defineStore("genreStore", {
+  state: () => ({
+    /** All available genres from server */
+    genres: ref<Array<GenreApiModel>>([]),
+
+    /** Currently edited genre */
+    genre: ref<GenreApiModel>(new GenreApiModel()),
+
+    /** Genres to filter bands for */
+    filteredGenres: ref<Array<GenreApiModel>>([]),
+
+    showEditDialog: ref(false),
+    fetchInProgress: ref(false)
+  }),
+
+  actions: {
+    getGenres() {
+      this.fetchInProgress = true
+
+      fetchAllGenres()
+        .then(response => {
+          this.genres = response.data
+          this.fetchInProgress = false
+        })
+    },
+
+    /**
+     * Prepare edit dialog for new genre, opens it
+     */
+    newGenre() {
+      this.genre = new GenreApiModel()
+      this.showEditDialog = true
+    },
+
+    editGenre(genre: GenreApiModel) {
+      this.genre = genre
+      this.showEditDialog = true
+    },
+
+    saveGenre() {
+      // todo
+    },
+
+    deleteGenre(genre: GenreApiModel) {
+      // todo
+    }
+  }
+})
\ No newline at end of file