OrderDetailDialog

software/src/components/basics/actionDialog.vue

@@ -23,14 +23,10 @@ defineProps({
       :icon="icon"
       :tonal="false"
     >
-      <template #default v-if="$slots.default">
+      <template #borderless>
         <slot></slot>
       </template>
 
-      <template #borderless v-if="$slots.borderless">
-        <slot name="borderless"></slot>
-      </template>
-
       <template #actions v-if="$slots.actions">
         <slot name="actions"></slot>
       </template>

software/src/layouts/adminDataLayout.vue

@@ -7,6 +7,10 @@ const router = useRouter()
 
 defineProps({
   addButtonString: String,
+  hideAddButton: {
+    type: Boolean,
+    default: false
+  },
   onAddClick: {
     type: Function,
     default: () => {}
@@ -28,6 +32,7 @@ defineProps({
 
       <v-col class="text-end">
         <outlined-button
+          v-if="!hideAddButton"
           prepend-icon="mdi-plus"
           color="green"
           :disabled="fetchInProgress"

software/src/locales/de.json

@@ -62,7 +62,7 @@
     "withoutConcert": "ohne Konzert"
   },
   "ticket": {
-    "tickets": "Ticket | Tickets"
+    "ticket": "Ticket | Tickets"
   },
   "account": {
     "account": "Account | Accounts",
@@ -112,7 +112,6 @@
     "administrator": "Administrator | Administratoren"
   },
   "order": {
-    "orders": "Bestellung | Bestellungen",
     "oclock": "Uhr",
     "ordering": "Bestellabschluss",
     "orderSummary": "Bestellübersicht",
@@ -120,7 +119,8 @@
     "noOrders": "Keine Bestellungen gefunden",
     "orderedAt": "Bestellt am",
     "noOrdersText": "Bisher wurden keine Bestellungen von diesem Account getätigt. Gehe zum Warenkorb und bestelle!",
-    "ordersDescription": "Übersicht aller getätigten Bestellungen"
+    "ordersDescription": "Übersicht aller getätigten Bestellungen",
+    "order": "Bestellung | Bestellungen"
   },
   "basket": {
     "addToBasket": "Zum Warenkorb hinzufügen",

software/src/locales/en.json

@@ -62,7 +62,7 @@
     "withoutConcert": "without concert"
   },
   "ticket": {
-    "tickets": "Ticket | Tickets"
+    "ticket": "Ticket | Tickets"
   },
   "account": {
     "account": "Account | Accounts",
@@ -112,7 +112,6 @@
     "administrator": "Administrator"
   },
   "order": {
-    "orders": "Order | Orders",
     "oclock": "o'clock",
     "ordering": "Finish order process",
     "orderSummary": "Order overview",
@@ -120,7 +119,8 @@
     "noOrders": "No orders found",
     "orderedAt": "Ordered at",
     "noOrdersText": "Bisher wurden keine Bestellungen von diesem Account getätigt. Gehe zum Warenkorb und bestelle!",
-    "ordersDescription": "Overview of all placed orders"
+    "ordersDescription": "Overview of all placed orders",
+    "order": "Order | Orders"
   },
   "basket": {
     "addToBasket": "Add to basket",

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>

software/src/scripts/validationRules.ts

@@ -3,9 +3,11 @@ import { useFeedbackStore } from "@/stores/feedback.store"
 /**
  * Check a string for no numbers and more than four digits
  * 
+ * @param [minChars=4] Minimal number of characters
+ * 
  * @returns Array of rules
  */
-export function getStringRules() {
+export function getStringRules(minChars = 4) {
   const feedbackStore = useFeedbackStore()
 
   return [
@@ -24,7 +26,7 @@ export function getStringRules() {
       }
     },
     value => {
-      if (value?.length >= 4) {
+      if (value?.length >= minChars) {
         return true
       } else {
         return feedbackStore.i18n.t('misc.validation.notEnoughChars')

software/src/stores/order.store.ts

@@ -9,6 +9,10 @@ export const useOrderStore = defineStore("orderStore", {
     /** All orders of one/all users */
     orders: ref<Array<OrderApiModel>>([]),
 
+    order: ref<OrderApiModel>(new OrderApiModel),
+
+    showDetailDialog: ref<boolean>(false),
+
     /** Request to server sent, waiting for data response */
     fetchInProgress: ref(false)
   }),
@@ -42,6 +46,11 @@ export const useOrderStore = defineStore("orderStore", {
         })
     },
 
+    openDetails(order: OrderApiModel) {
+      this.order = order
+      this.showDetailDialog = true
+    },
+
     async deleteOrder(order: OrderApiModel) {
       // todo
     }