Creating Band edit page

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

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+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';
+
+const bandStore = useBandStore()
+
+function itemProps(item: GenreModel) {
+  return {
+    title: item.name
+  }
+}
+</script>
+
+<template>
+  <action-dialog
+    v-model="bandStore.showBandEditDialog"
+    :title="$t('band.editBand')"
+    icon="mdi-pencil"
+  >
+    <v-container>
+      <v-row>
+        <v-col>
+          <v-text-field
+            :label="$t('band.name')"
+            v-model="bandStore.band.name"
+            variant="outlined"
+            hide-details
+          />
+        </v-col>
+
+        <v-col>
+          <v-text-field
+            :label="$t('band.foundingYear')"
+            v-model="bandStore.band.foundingYear"
+            variant="outlined"
+            hide-details
+          />
+        </v-col>
+
+        <v-col>
+          <v-select
+            :label="$t('band.genre', 2)"
+            v-model="bandStore.band.genres"
+            :items="bandStore.availableGenres"
+            :item-props="itemProps"
+            variant="outlined"
+            hide-details
+            chips
+            multiple
+          />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-textarea
+            :label="$t('band.descriptionDe')"
+            v-model="bandStore.band.descriptionDe"
+            variant="outlined"
+            hide-details
+          />
+        </v-col>
+
+        <v-col>
+          <v-textarea
+            :label="$t('band.descriptionEn')"
+            v-model="bandStore.band.descriptionEn"
+            variant="outlined"
+            hide-details
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+    
+    <template #actions>
+      <outlined-button
+        color="green"
+        @click="bandStore.saveBand"
+        :loading="bandStore.fetchInProgress"
+      >
+        {{ $t('misc.actions.save') }}
+      </outlined-button>
+    </template>
+  </action-dialog>
+</template>

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

@@ -1,6 +1,102 @@
 <script setup lang="ts">
+import { useBandStore } from '@/stores/band.store';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
+import bandEditDialog from './bandEditDialog.vue';
+import { useRouter } from 'vue-router';
+import { useFeedbackStore } from '@/stores/feedback.store';
+
+const bandStore = useBandStore()
+const router = useRouter()
+const feedbackStore = useFeedbackStore()
+
+const headers = [
+  { title: feedbackStore.i18n.t('band.name'), value: "name" },
+  { title: feedbackStore.i18n.t('band.foundingYear'), value: "foundingYear" },
+  { title: feedbackStore.i18n.t('band.genre', 2), value: "genres" },
+  { title: feedbackStore.i18n.t('band.logo', 2), value: "logo" },
+  { 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 },
+]
+
+bandStore.getBands()
 </script>
 
 <template>
-  Bands Admin Page
+  <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="bandStore.fetchInProgress"
+          @click="bandStore.newBand"
+        >
+          {{ $t('band.addNewBand') }}
+        </outlined-button>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <v-data-table
+          :items="bandStore.bands"
+          :headers="headers"
+          :loading="bandStore.fetchInProgress"
+        >
+          <template #item.genres="{ item }">
+            <v-chip v-for="genre of item.genres" class="mx-1">
+              {{ genre.name }}
+            </v-chip>
+          </template>
+
+          <template #item.logo="{ item }">
+            <v-icon
+              :icon="item.logo != '' ? 'mdi-check' : 'mdi-close'"
+              :color="item.logo != '' ? 'green' : 'red'"
+            />
+          </template>
+
+          <template #item.imageMembers="{ item }">
+            <v-icon
+              :icon="item.imageMembers != '' ? 'mdi-check' : 'mdi-close'"
+              :color="item.imageMembers != '' ? 'green' : 'red'"
+            />
+          </template>
+
+          <template #item.images="{ item }">
+            {{ item.images.length }} {{ $t('band.image', item.images.length) }}
+          </template>
+
+          <template #item.edit="{ item }">
+            <v-btn
+              icon="mdi-pencil"
+              variant="plain"
+              color="orange"
+              @click="bandStore.editBand(item.name)"
+            />
+
+            <v-btn
+              icon="mdi-delete"
+              variant="plain"
+              color="red"
+              @click="bandStore.deleteBand(item.id)"
+            />
+          </template>
+        </v-data-table>
+      </v-col>
+    </v-row>
+  </v-container>
+
+  <band-edit-dialog />
 </template>