Finish order admin page with detail dialog and actions

src/pages/admin/ordersAdminPage/index.vue

@@ -13,7 +13,7 @@ const headers = [
   { title: "Adresse", value: "street" },
   { title: "Stadt", value: "city" },
   { title: "Versendet", value: "shipped" },
-  { title: "", value: "edit", width: 130 }
+  { title: "Aktionen", value: "edit", width: 130 }
 ]
 
 orderStore.getAllOrders()
@@ -26,6 +26,8 @@ orderStore.getAllOrders()
     <v-data-table
       :headers="headers"
       :items="orderStore.orders"
+      :loading="orderStore.fetchInProgress"
+      :items-per-page="100"
     >
       <template #item.account="{ item }">
         {{ item.account.firstName }} {{ item.account.lastName }}
@@ -46,23 +48,23 @@ orderStore.getAllOrders()
       <template #item.shipped="{ item }">
         <v-icon
           :icon="item.shipped ? 'mdi-check' : 'mdi-close'"
-          :color="item.shipped ? 'green' : 'red'"
+          :color="item.shipped ? 'success' : 'error'"
         />
       </template>
 
       <template #item.edit="{ item }">
-        <!-- todo <v-btn
+        <v-btn
           icon="mdi-eye"
           variant="plain"
           @click="orderStore.openDetails(item)"
-        /> -->
+        />
 
-        <!-- todo <v-btn
-          icon="mdi-delete"
+        <v-btn
+          :icon="item.shipped ? 'mdi-close-circle-outline' : 'mdi-check-circle-outline'"
           variant="plain"
-          color="red"
-          @click="orderStore.deleteOrder(item)"
-        /> -->
+          :color="item.shipped ? 'error' : 'success'"
+          @click="orderStore.changeOrderShippedState(item, !item.shipped)"
+        />
       </template>
 
     </v-data-table>

src/pages/admin/ordersAdminPage/orderDetailDialog.vue

@@ -12,15 +12,67 @@ const orderStore = useOrderStore()
     v-model="orderStore.showDetailDialog"
     :title="$t('order.order')"
     icon="mdi-basket"
+    max-width="800"
   >
     <v-list>
       <v-list-subheader>
-        {{ $t('ticket.ticket', 2) }}
+        {{ $t('account.account') }}
       </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 prepend-icon="mdi-account">
+        {{ orderStore.order.account.username }}
+      </v-list-item>
+
+      <v-list-item prepend-icon="mdi-card-account-details">
+        {{ orderStore.order.account.firstName }} {{ orderStore.order.account.lastName }}
+      </v-list-item>
+
+      <v-list-item prepend-icon="mdi-home">
+        {{ orderStore.order.address.street }} {{ orderStore.order.address.houseNumber }}
+      </v-list-item>
+
+      <v-list-item prepend-icon="mdi-city">
+        {{ orderStore.order.address.postalCode }} {{ orderStore.order.address.city }}
+      </v-list-item>
+
+      <v-list-subheader>
+        {{ $t('order.order') }}
+      </v-list-subheader>
+
+      <v-list-item prepend-icon="mdi-calendar">
+        {{ moment(orderStore.order.orderedAt).format("DD.MM.YYYY, HH:mm:ss") }}
+      </v-list-item>
+
+      <v-list-item prepend-icon="mdi-truck">
+        {{ orderStore.order.shipped ? 'Versendet' : 'Nicht versendet' }}
+      </v-list-item>
+
+      <v-list-item>
+        <v-table>
+          <thead>
+            <tr>
+              <th>{{ $t('concert.date') }}</th>
+              <th>{{ $t('concert.name') }}</th>
+              <th>{{ $t('band.name') }}</th>
+              <th>{{ $t('location.name') }}</th>
+              <th>{{ $t('location.seat.seatGroup') }}</th>
+              <th>{{ $t('location.seat.seatRow') }}</th>
+              <th>{{ $t('location.seat.seat') }}</th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr v-for="ticket of orderStore.order.tickets">
+              <td>{{ moment(ticket.concert.date).format("DD.MM.YYYY") }}</td>
+              <td>{{ ticket.concert.name }}</td>
+              <td>{{ ticket.concert.band.name }}</td>
+              <td>{{ ticket.concert.location.name }}</td>
+              <td>{{ ticket.seat.seatRow.seatGroup.name }}</td>
+              <td>{{ ticket.seat.seatRow.row }}</td>
+              <td>{{ ticket.seat.seatNr }}</td>
+            </tr>
+          </tbody>
+        </v-table>
       </v-list-item>
     </v-list>
   </action-dialog>