OrderDetailDialog

software/src/pages/account/accountHomePage/index.vue

@@ -19,7 +19,7 @@ const router = useRouter()
             <v-row>
               <v-col>
                 <card-view
-                  :title="$t('order.orders', 2)"
+                  :title="$t('order.order', 2)"
                   icon="mdi-basket-check"
                   @click="router.push('/account/orders')"
                 >

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

@@ -107,9 +107,9 @@ orderStore.getAllOrders()
       />
 
       <dashboard-card
-        :title="$t('order.orders', 2)"
+        :title="$t('order.order', 2)"
         icon="mdi-basket"
-        :first-line="orderStore.orders.length + ' ' + $t('order.orders', 2)"
+        :first-line="orderStore.orders.length + ' ' + $t('order.order', 2)"
         second-line="todo"
         button-route="/admin/orders"
         :loading="orderStore.fetchInProgress"

software/src/pages/admin/genresAdminPage/genreEditDialog.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import actionDialog from '@/components/basics/actionDialog.vue';
 import outlinedButton from '@/components/basics/outlinedButton.vue';
+import { getStringRules } from '@/scripts/validationRules';
 import { useGenreStore } from '@/stores/genre.store';
+import { ref } from 'vue';
+
+const valid = ref(false)
 
 const genreStore = useGenreStore()
 </script>
@@ -13,23 +17,27 @@ const genreStore = useGenreStore()
     icon="mdi-pencil"
     max-width="500"
   >
-    <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>
+    <v-form v-model="valid">
+      <v-container>
+        <v-row>
+          <v-col>
+            <v-text-field
+              :label="$t('band.genre')"
+              v-model="genreStore.genre.name"
+              variant="outlined"
+              hide-details
+              :rules="getStringRules(3)"
+            />
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-form>
 
     <template #actions>
       <outlined-button
         color="green"
         @click="genreStore.saveGenre"
+        :disabled="!valid"
         :loading="genreStore.fetchInProgress"
       >
         {{ $t('misc.actions.save') }}

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

@@ -2,7 +2,7 @@
 import adminDataLayout from '@/layouts/adminDataLayout.vue';
 import { useOrderStore } from '@/stores/order.store';
 import moment from 'moment';
-import { title } from 'process';
+import OrderDetailDialog from './orderDetailDialog.vue';
 
 const orderStore = useOrderStore()
 
@@ -20,7 +20,9 @@ orderStore.getAllOrders()
 </script>
 
 <template>
-  <admin-data-layout>
+  <admin-data-layout
+    :hide-add-button="true"
+  >
     <v-data-table
       :headers="headers"
       :items="orderStore.orders"
@@ -52,6 +54,7 @@ orderStore.getAllOrders()
         <v-btn
           icon="mdi-eye"
           variant="plain"
+          @click="orderStore.openDetails(item)"
         />
 
         <v-btn
@@ -64,4 +67,6 @@ orderStore.getAllOrders()
 
     </v-data-table>
   </admin-data-layout>
+
+  <order-detail-dialog />
 </template>

software/src/pages/admin/ordersAdminPage/orderDetailDialog.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import actionDialog from '@/components/basics/actionDialog.vue';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
+import { useOrderStore } from '@/stores/order.store';
+import moment from 'moment';
+
+const orderStore = useOrderStore()
+</script>
+
+<template>
+  <action-dialog
+    v-model="orderStore.showDetailDialog"
+    :title="$t('order.order')"
+    icon="mdi-basket"
+  >
+    <v-list>
+      <v-list-subheader>
+        {{ $t('ticket.ticket', 2) }}
+      </v-list-subheader>
+
+      <v-list-item v-for="ticket of orderStore.order.tickets">
+        {{ moment(ticket.concert.date).format("DD.MM.YYYY") }} - 
+        {{ ticket.concert.band.name }} - {{ ticket.concert.name }}
+      </v-list-item>
+    </v-list>
+  </action-dialog>
+</template>