juice-shop/juice-shop

View on GitHub
frontend/src/app/order-history/order-history.component.ts

Summary

Maintainability
A
0 mins
Test Coverage
B
86%
/*
 * Copyright (c) 2014-2024 Bjoern Kimminich & the OWASP Juice Shop contributors.
 * SPDX-License-Identifier: MIT
 */

import { Component, NgZone, type OnInit } from '@angular/core'
import { OrderHistoryService } from '../Services/order-history.service'
import { MatTableDataSource } from '@angular/material/table'
import { BasketService } from '../Services/basket.service'
import { ProductDetailsComponent } from '../product-details/product-details.component'
import { MatDialog } from '@angular/material/dialog'
import { type Product } from '../Models/product.model'
import { ProductService } from '../Services/product.service'
import { Router } from '@angular/router'

export interface StrippedProduct {
  id: number
  name: string
  price: number
  quantity: number
  total: number
}

export interface Order {
  orderId: string
  totalPrice: number
  bonus: number
  products: MatTableDataSource<StrippedProduct>
  delivered: boolean
}

@Component({
  selector: 'app-order-history',
  templateUrl: './order-history.component.html',
  styleUrls: ['./order-history.component.scss']
})
export class OrderHistoryComponent implements OnInit {
  public tableColumns = ['product', 'price', 'quantity', 'total price', 'review']
  public orders: Order[] = []
  public emptyState: boolean = true

  constructor (private readonly router: Router, private readonly dialog: MatDialog, private readonly orderHistoryService: OrderHistoryService, private readonly basketService: BasketService, private readonly productService: ProductService, private readonly ngZone: NgZone) { }

  ngOnInit () {
    this.orderHistoryService.get().subscribe((orders) => {
      orders = orders.reverse()
      if (orders.length === 0) {
        this.emptyState = true
      } else {
        this.emptyState = false
      }
      for (const order of orders) {
        const products: StrippedProduct[] = []
        for (const product of order.products) {
          products.push({
            id: product.id,
            name: product.name,
            price: product.price,
            quantity: product.quantity,
            total: product.total
          })
        }
        this.orders.push({
          orderId: order.orderId,
          totalPrice: order.totalPrice,
          bonus: order.bonus,
          products: new MatTableDataSource<StrippedProduct>(products),
          delivered: order.delivered
        })
      }
    }, (err) => { console.log(err) })
  }

  showDetail (id: number) {
    this.productService.get(id).subscribe((product) => {
      const element: Product = {
        id: product.id,
        name: product.name,
        description: product.description,
        image: product.image,
        price: product.price,
        points: Math.round(product.price / 10)
      }
      this.dialog.open(ProductDetailsComponent, {
        width: '500px',
        height: 'max-content',
        data: {
          productData: element
        }
      })
    }, (err) => { console.log(err) })
  }

  openConfirmationPDF (orderId: string) {
    const redirectUrl = `${this.basketService.hostServer}/ftp/order_${orderId}.pdf`
    window.open(redirectUrl, '_blank')
  }

  trackOrder (orderId) {
    this.ngZone.run(async () => await this.router.navigate(['/track-result'], {
      queryParams: {
        id: orderId
      }
    }))
  }
}