121 lines
4.3 KiB
HTML
121 lines
4.3 KiB
HTML
<div id="orders" class="page-layout carded fullwidth inner-scroll">
|
|
|
|
<!-- TOP BACKGROUND -->
|
|
<div class="top-bg accent"></div>
|
|
<!-- / TOP BACKGROUND -->
|
|
|
|
<!-- CENTER -->
|
|
<div class="center">
|
|
|
|
<!-- HEADER -->
|
|
<div class="header accent" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
|
|
fxLayoutAlign.gt-xs="space-between center">
|
|
|
|
<!-- APP TITLE -->
|
|
<div class="logo mb-24 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
|
|
<mat-icon class="logo-icon s-32 mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
|
|
shopping_basket
|
|
</mat-icon>
|
|
<span class="logo-text h1" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Orders</span>
|
|
</div>
|
|
<!-- / APP TITLE -->
|
|
|
|
<!-- SEARCH -->
|
|
<div class="search-wrapper ml-sm-32">
|
|
<div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
|
<mat-icon>search</mat-icon>
|
|
<input #filter placeholder="Search for an order">
|
|
</div>
|
|
</div>
|
|
<!-- / SEARCH -->
|
|
|
|
</div>
|
|
<!-- / HEADER -->
|
|
|
|
<!-- CONTENT CARD -->
|
|
<div class="content-card">
|
|
|
|
<mat-table class="orders-table" matSort [@animateStagger]="{value:'50'}" fusePerfectScrollbar>
|
|
|
|
<!-- ID Column -->
|
|
<ng-container matColumnDef="id">
|
|
<mat-header-cell *matHeaderCellDef mat-sort-header>ID</mat-header-cell>
|
|
<mat-cell *matCellDef="let order">
|
|
<p class="text-truncate">{{order.id}}</p>
|
|
</mat-cell>
|
|
</ng-container>
|
|
|
|
<!-- Reference Column -->
|
|
<ng-container matColumnDef="reference">
|
|
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Reference</mat-header-cell>
|
|
<mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
|
|
<p class="text-truncate">{{order.reference}}</p>
|
|
</mat-cell>
|
|
</ng-container>
|
|
|
|
<!-- Name Column -->
|
|
<ng-container matColumnDef="customer">
|
|
<mat-header-cell *matHeaderCellDef mat-sort-header>Customer</mat-header-cell>
|
|
<mat-cell *matCellDef="let order">
|
|
<p class="text-truncate">
|
|
{{order.customer.firstName}}
|
|
{{order.customer.lastName}}
|
|
</p>
|
|
</mat-cell>
|
|
</ng-container>
|
|
|
|
<!-- Total Price Column -->
|
|
<ng-container matColumnDef="total">
|
|
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md>Total</mat-header-cell>
|
|
<mat-cell *matCellDef="let order" fxHide fxShow.gt-md>
|
|
<p class="total-price text-truncate">
|
|
{{order.total | currency:'USD':'symbol'}}
|
|
</p>
|
|
</mat-cell>
|
|
</ng-container>
|
|
|
|
<!-- Payment Column -->
|
|
<ng-container matColumnDef="payment">
|
|
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Payment</mat-header-cell>
|
|
<mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
|
|
<p class="text-truncate">
|
|
{{order.payment.method}}
|
|
</p>
|
|
</mat-cell>
|
|
</ng-container>
|
|
|
|
<!-- Status Column -->
|
|
<ng-container matColumnDef="status">
|
|
<mat-header-cell *matHeaderCellDef mat-sort-header>Status</mat-header-cell>
|
|
<mat-cell *matCellDef="let order">
|
|
<p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
|
|
{{order.status[0].name}}
|
|
</p>
|
|
</mat-cell>
|
|
</ng-container>
|
|
|
|
<!-- Date Column -->
|
|
<ng-container matColumnDef="date">
|
|
<mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Date</mat-header-cell>
|
|
<mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
|
|
<p class="text-truncate">
|
|
{{order.date}}
|
|
</p>
|
|
</mat-cell>
|
|
</ng-container>
|
|
|
|
<mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></mat-header-row>
|
|
|
|
<mat-row *matRowDef="let order; columns: displayedColumns;" class="order" matRipple
|
|
[routerLink]="'/apps/e-commerce/orders/'+order.id">
|
|
</mat-row>
|
|
</mat-table>
|
|
|
|
<mat-paginator #paginator [pageIndex]="0" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]">
|
|
</mat-paginator>
|
|
|
|
</div>
|
|
<!-- / CONTENT CARD -->
|
|
</div>
|
|
<!-- / CENTER -->
|
|
</div> |