AccountsAdminPage, ConcertsAdminPage

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>