Genre Admin page, new Genre store

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

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>

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>

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>

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"