Finish order admin page with detail dialog and actions

backend/routes/order.routes.ts

@@ -10,17 +10,15 @@ import { City } from "../models/locations/city.model";
 import { Seat } from "../models/locations/seat.model";
 import { SeatRow } from "../models/locations/seatRow.model";
 import { SeatGroup } from "../models/locations/seatGroup.model";
+import { verifyToken } from "../middlewares/auth.middleware";
 import { Account } from "../models/user/account.model";
-import { Exercise } from "backend/models/exercises/exercise.model";
 
 export const order = Router()
 
 // Get all orders
-order.get("/", (req: Request, res: Response) => {
+order.get("/", verifyToken, (req: Request, res: Response) => {
   Order.findAll({
     include: [
-      Account,
-      Address,
       {
         model: Ticket,
         include: [
@@ -35,10 +33,22 @@ order.get("/", (req: Request, res: Response) => {
                 include: [ City ]
               }
             ]
+          },
+          {
+            model: Seat,
+            include: [
+              {
+                model: SeatRow,
+                include: [ SeatGroup ]
               }
             ]
           }
         ]
+      },
+      Address,
+      Payment,
+      Account
+    ]
   })
     .then(orders => {
       res.status(200).json(orders)
@@ -126,3 +136,17 @@ order.post("/", (req: Request, res: Response) => {
       res.status(500).send()
     })
 })
+
+order.patch("/", (req: Request, res: Response) => {
+  Order.update(req.body, {
+    where: {
+      id: req.body.id
+    }
+  })
+    .then(affectedCount => {
+      res.status(200).send()
+    })
+    .catch(error => {
+      res.status(500).send()
+    })
+})

src/data/api/orderApi.ts

@@ -1,5 +1,6 @@
 import axios from "axios"
 import { BasketItemModel } from "../models/ordering/basketItemModel"
+import { OrderApiModel } from "../models/apiEndpoints/orderApiModel"
 
 const BASE_URL = "http://localhost:3000/orders"
 
@@ -25,13 +26,6 @@ export async function createOrder(
     }
   }
 
-  console.log({
-    accountId: accountId,
-    tickets: tickets,
-    paymentId: paymentId,
-    addressId: addressId
-  })
-
   return axios.post(BASE_URL, {
     accountId: accountId,
     tickets: tickets,
@@ -40,6 +34,14 @@ export async function createOrder(
   })
 }
 
-export async function fetchAllOrders() {
-  return axios.get(BASE_URL)
+export async function fetchAllOrders(token: string) {
+  return axios.get(BASE_URL, {
+    headers: {
+      "Authorization": token
+    }
+  })
+}
+
+export async function patchOrder(order: OrderApiModel) {
+  return axios.patch(BASE_URL, order)
 }

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>

src/stores/order.store.ts

@@ -1,16 +1,19 @@
-import { fetchAllOrders, fetchUserOrders } from "@/data/api/orderApi";
+import { fetchAllOrders, fetchUserOrders, patchOrder } from "@/data/api/orderApi";
 import { OrderApiModel } from "@/data/models/apiEndpoints/orderApiModel";
 import { AccountModel } from "@/data/models/user/accountModel";
 import { defineStore } from "pinia";
 import { ref } from "vue";
+import { useAccountStore } from "./account.store";
 
 export const useOrderStore = defineStore("orderStore", {
   state: () => ({
     /** All orders of one/all users */
     orders: ref<Array<OrderApiModel>>([]),
 
+    /** Current selected order */
     order: ref<OrderApiModel>(new OrderApiModel),
 
+    /** Show detail dialog on admin page */
     showDetailDialog: ref<boolean>(false),
 
     /** Request to server sent, waiting for data response */
@@ -22,9 +25,10 @@ export const useOrderStore = defineStore("orderStore", {
      * Get all orders from all accounts from server
      */
     async getAllOrders() {
+      const accountStore = useAccountStore()
       this.fetchInProgress = true
 
-      fetchAllOrders()
+      fetchAllOrders(accountStore.userAccountToken)
         .then(res => {
           this.orders = res.data
           this.fetchInProgress = false
@@ -46,13 +50,31 @@ export const useOrderStore = defineStore("orderStore", {
         })
     },
 
+    /**
+     * Open detail dialog
+     * 
+     * @param order Order to view
+     */
     openDetails(order: OrderApiModel) {
       this.order = order
       this.showDetailDialog = true
     },
 
-    async deleteOrder(order: OrderApiModel) {
-      // todo
+
+    /**
+     * 
+     * @param order 
+     * @param shipped 
+     */
+    async changeOrderShippedState(order: OrderApiModel, shipped: boolean) {
+      this.fetchInProgress = true
+
+      order.shipped = shipped
+
+      patchOrder(order)
+        .then(res => {
+          this.getAllOrders()
+        })
     }
   }
 })