juice-shop/juice-shop

<!--
  ~ Copyright (c) 2014-2024 Bjoern Kimminich & the OWASP Juice Shop contributors.
  ~ SPDX-License-Identifier: MIT
  -->

<mat-card class="card1">
  <div class="mat-card-cvr">
    <mat-card-title>
      {{"LABEL_ORDER_HISTORY" | translate}}
    </mat-card-title>
        <div *ngIf="!emptyState; else emptyResult" fxLayout="column" fxLayoutGap="20px">
           <div *ngFor="let order of orders">
              <div class="table-container mat-elevation-z4 custom-slate">
                 <div class="heading">
                       <div fxLayout="row">
                          <div fxFlex="40%" fxLayout="column">
                                <div translate>LABEL_ORDER_ID</div>
                                <div>#{{ order.orderId }}</div>
                          </div>
                          <div fxFlex="15%" fxLayout="column">
                             <div translate>LABEL_TOTAL_PRICE</div>
                             <div>{{ order.totalPrice.toFixed(2) }}&curren;</div>
                          </div>
                          <div fxFlex="15%" fxLayout="column">
                                <div translate>LABEL_BONUS</div>
                                <div>{{ order.bonus }}</div>
                          </div>
                          <div fxFlex="20%">
                             <div *ngIf="!order.delivered" class="error" translate>LABEL_IN_TRANSIT</div>
                             <div *ngIf="order.delivered" class="confirmation" translate>LABEL_DELIVERED</div>
                          </div>
                          <div fxFlex="5%" fxLayoutAlign="end">
                                <button mat-icon-button aria-label="Track Your Order" matTooltip="{{ 'LABEL_TRACK_ORDER' | translate }}" matTooltipPosition="below" (click)= "trackOrder(order.orderId)">
                                   <mat-icon>
                                      local_shipping
                                   </mat-icon>
                                </button>
                             </div>
                          <div fxFlex="5%" fxLayoutAlign="end">
                             <button mat-icon-button aria-label="Print order confirmation" matTooltip="{{ 'PRINT_ORDER_CONFIRMATION' | translate }}" matTooltipPosition="below" (click)= "openConfirmationPDF(order.orderId)">
                                <mat-icon>
                                   note
                                </mat-icon>
                             </button>
                            </div>
                          </div>
                          <div class="border"></div>
                        </div>
                 <mat-table [dataSource]="order.products">
                  <ng-container matColumnDef="product">
                       <mat-header-cell *matHeaderCellDef translate fxFlex="40%">LABEL_PRODUCT</mat-header-cell>
                       <mat-cell *matCellDef="let element" fxFlex="40%">{{element.name}} </mat-cell>
                    </ng-container>
                    <ng-container matColumnDef="price">
                       <mat-header-cell *matHeaderCellDef translate fxFlex="15%">LABEL_PRICE</mat-header-cell>
                       <mat-cell *matCellDef="let element" fxFlex="15%">{{element.price}}&curren;</mat-cell>
                    </ng-container>
                    <ng-container matColumnDef="quantity">
                       <mat-header-cell *matHeaderCellDef translate fxFlex="15%">LABEL_QUANTITY</mat-header-cell>
                       <mat-cell *matCellDef="let element" fxFlex="15%">
                          <span>{{element.quantity}}</span>
                       </mat-cell>
                    </ng-container>
                    <ng-container matColumnDef="total price">
                       <mat-header-cell *matHeaderCellDef translate fxFlex="15%">LABEL_TOTAL_PRICE</mat-header-cell>
                       <mat-cell *matCellDef="let element" class="price-align" fxFlex="15%">{{ (element.total).toFixed(2) }}&curren;</mat-cell>
                    </ng-container>
                    <ng-container matColumnDef="review">
                          <mat-header-cell *matHeaderCellDef translate fxFlex="15%"></mat-header-cell>
                          <mat-cell *matCellDef="let element" fxFlex="15%">
                                <button mat-icon-button aria-label="Print order confirmation" matTooltip="{{ 'WRITE_REVIEW' | translate }}" matTooltipPosition="below"
                                (click)= "showDetail(element.id)">
                                   <mat-icon>
                                      rate_review
                                   </mat-icon>
                                </button>
                          </mat-cell>
                       </ng-container>
                    <mat-header-row *matHeaderRowDef="tableColumns"></mat-header-row>
                    <mat-row *matRowDef="let row; columns: tableColumns;"></mat-row>
                 </mat-table>
              </div>
           </div>
        </div>
        <ng-template #emptyResult>
           <mat-card class="mat-elevation-z6 emptyState">
             <img alt=" No results found"
                  class="img-responsive noResult"
                  src="assets/public/images/products/no-results.png">
             <mat-card-title>
               <span class="noResultText" translate>
                 NO_SEARCH_RESULT
               </span>
             </mat-card-title>
             <mat-card-content>
               <span class="noResultText" translate>
                 NO_ORDERS_PLACED
               </span>
             </mat-card-content>
           </mat-card>
        </ng-template>
  </div>
</mat-card>