LocationsAdminPage data table

software/src/locales/de.json

@@ -14,7 +14,15 @@
       "seatPlan": "Saalplan | Saalpläne",
       "seatSelection": "Sitzauswahl",
       "standingArea": "Stehbereich"
-    }
+    },
+    "nrOfConcerts": "Konzerte",
+    "capacity": "Kapazität",
+    "layoutNr": "Layout Nr",
+    "name": "Location Name",
+    "address": "Adresse",
+    "imageIndoor": "Bild Innenraum",
+    "imageOutdoor": "Bild Außen",
+    "addLocation": "Neue Location hinzufügen"
   },
   "concert": {
     "concert": "Konzert | Konzerte",

software/src/locales/en.json

@@ -14,7 +14,15 @@
       "seatPlan": "Seat plan | Seat plans",
       "seatSelection": "Seat selection",
       "standingArea": "Seat area"
-    }
+    },
+    "nrOfConcerts": "Concerts",
+    "capacity": "Capacity",
+    "layoutNr": "Layout Nr",
+    "name": "Location Name",
+    "address": "Adress",
+    "imageIndoor": "Image Indoor",
+    "imageOutdoor": "Image Outdoor",
+    "addLocation": "Add new Location"
   },
   "concert": {
     "concert": "Concert | Concerts",

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

@@ -2,6 +2,7 @@
 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';
 
@@ -24,31 +25,11 @@ bandStore.getBands()
 </script>
 
 <template>
-  <v-container>
-    <v-row>
-      <v-col>
-        <outlined-button
-          prepend-icon="mdi-arrow-left"
-          @click="router.go(-1)"
+  <admin-data-layout
+    :add-button-string="$t('band.addNewBand')"
+    :fetch-in-progress="bandStore.fetchInProgress"
+    :on-add-click="() => bandStore.newBand()"
   >
-          {{ $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"
@@ -94,9 +75,7 @@ bandStore.getBands()
         />
       </template>
     </v-data-table>
-      </v-col>
-    </v-row>
-  </v-container>
+  </admin-data-layout>
 
   <band-edit-dialog />
 </template>

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

@@ -1,6 +1,70 @@
 <script setup lang="ts">
+import adminDataLayout from '@/layouts/adminDataLayout.vue';
+import { useFeedbackStore } from '@/stores/feedback.store';
+import { useLocationStore } from '@/stores/location.store';
+
+const locationStore = useLocationStore()
+const feedbackStore = useFeedbackStore()
+
+const headers = [
+  { title: feedbackStore.i18n.t('location.name'), value: "name" },
+  { title: feedbackStore.i18n.t('location.address'), value: "address" },
+  { title: feedbackStore.i18n.t('location.imageIndoor'), value: "imageIndoor" },
+  { title: feedbackStore.i18n.t('location.imageOutdoor'), value: "imageOutdoor" },
+  { title: feedbackStore.i18n.t('location.layoutNr'), value: "layout" },
+  { title: feedbackStore.i18n.t('location.capacity'), value: "capacity" },
+  { title: feedbackStore.i18n.t('location.city'), value: "city" },
+  { title: feedbackStore.i18n.t('location.nrOfConcerts'), value: "nrOfConcerts" },
+  { title: "", value: "edit", width: 130 }
+]
+
+locationStore.getLocations()
 </script>
 
 <template>
-  Locations Admin Page
+  <admin-data-layout
+    :fetch-in-progress="locationStore.fetchInProgress"
+    :add-button-string="$t('location.addLocation')"
+    :on-add-click="() => { locationStore.newLocation() }"
+  >
+    <v-data-table
+      :items="locationStore.locations"
+      :headers="headers"
+      :loading="locationStore.fetchInProgress"
+    >
+      <template #item.imageIndoor="{ item }">
+        <v-icon
+          :icon="item.imageIndoor != '' ? 'mdi-check' : 'mdi-close'"
+          :color="item.imageIndoor != '' ? 'green' : 'red'"
+        />
+      </template>
+
+      <template #item.imageOutdoor="{ item }">
+        <v-icon
+          :icon="item.imageOutdoor != '' ? 'mdi-check' : 'mdi-close'"
+          :color="item.imageOutdoor != '' ? 'green' : 'red'"
+        />
+      </template>
+      
+      <template #item.city="{ item }">
+        {{ item.city.name }}
+      </template>
+
+      <template #item.edit="{ item }">
+        <v-btn
+          icon="mdi-pencil"
+          variant="plain"
+          color="orange"
+          @click="locationStore.editLocation(item)"
+        />
+
+        <v-btn
+          icon="mdi-delete"
+          variant="plain"
+          color="red"
+          @click="locationStore.deleteLocation(item)"
+        />
+      </template>
+    </v-data-table>
+  </admin-data-layout>
 </template>

software/src/stores/location.store.ts

@@ -21,7 +21,9 @@ export const useLocationStore = defineStore("locationStore", {
     cities: ref<Array<CityModel>>([]),
 
     /** Request to server sent, waiting for data response */
-    fetchInProgress: ref(false)
+    fetchInProgress: ref(false),
+
+    showEditLocation: ref(false)
   }),
 
   actions: {
@@ -75,6 +77,21 @@ export const useLocationStore = defineStore("locationStore", {
         .then(result => {
           this.topLocations = result.data
         })
+    },
+
+
+    newLocation() {
+      this.location = new LocationDetailsApiModel()
+      this.showEditLocation = true
+    },
+
+    editLocation(item: LocationApiModel) {
+      this.location = item
+      this.showEditLocation = true
+    },
+
+    async deleteLocation(item: LocationApiModel) {
+      // todo
     }
   },
 })