juice-shop/juice-shop

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

<mat-card [class.div-boundary]="!addNewAddressDiv" class="mat-elevation-z6">
  <h1 translate *ngIf="showNextButton">TITLE_SELECT_ADDRESS</h1>
  <h1 translate *ngIf="!showNextButton">MY_SAVED_ADRESSES</h1>
  <mat-table [dataSource]="dataSource" *ngIf="addressExist">
    <ng-container matColumnDef="Selection">
      <mat-header-cell *matHeaderCellDef fxFlex="20%"></mat-header-cell>
      <mat-cell *matCellDef="let element; let row" fxFlex="20%">
        <mat-radio-button (click)="emitSelectionToParent(element.id)" [checked]="selection.isSelected(row)"
                          (change)="$event ? selection.toggle(row) : null"></mat-radio-button>
      </mat-cell>
    </ng-container>
    <ng-container matColumnDef="Name">
      <mat-header-cell *matHeaderCellDef style="display: none;"></mat-header-cell>
      <mat-cell *matCellDef="let element" fxFlex="20%">{{ element?.fullName }}
      </mat-cell>
    </ng-container>
    <ng-container matColumnDef="Address">
      <mat-header-cell *matHeaderCellDef style="display: none;"></mat-header-cell>
      <mat-cell *matCellDef="let element" fxFlex="40%"> {{element?.streetAddress}}, {{element?.city}},
        {{element?.state}}, {{element?.zipCode}}
      </mat-cell>
    </ng-container>
    <ng-container matColumnDef="Country">
      <mat-header-cell *matHeaderCellDef style="display: none;"></mat-header-cell>
      <mat-cell *matCellDef="let element" fxFlex="20%">{{ element?.country }}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="Edit">
      <mat-header-cell *matHeaderCellDef style="display: none;"></mat-header-cell>
      <mat-cell *matCellDef="let element" fxflex="10%">
        <button mat-icon-button routerLink='/address/edit/{{ element.id }}'><i class="far fa-edit"></i></button>
      </mat-cell>
    </ng-container>
    <ng-container matColumnDef="Remove">
      <mat-header-cell *matHeaderCellDef style="display: none;"></mat-header-cell>
      <mat-cell *matCellDef="let element" fxflex="10%">
        <button mat-icon-button (click)="deleteAddress(element.id)"><i class="far fa-trash-alt"></i></button>
      </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns; let element"
             (click)="selection.toggle(row); emitSelectionToParent(element.id)"></mat-row>

  </mat-table>
  <div style="margin-top: 20px;" *ngIf="addNewAddressDiv">
    <button mat-raised-button mat-button class="btn btn-new-address" color="primary" aria-label="Add a new address"
            routerLink="/address/create">
      <mat-icon>
        add
      </mat-icon>
      <span translate>ADD_NEW_ADDRESS</span>
    </button>
  </div>
  <button mat-raised-button mat-button class="btn btn-next" color="primary"
          aria-label="Proceed to payment selection" [disabled]="addressId === undefined" (click)="chooseAddress()"
          *ngIf="showNextButton">
    <mat-icon>
      navigate_next
    </mat-icon>
    <span translate>LABEL_CONTINUE</span>
  </button>
</mat-card>