Genre Admin page, new Genre store

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>