src/app/user/components/orders/order-list-item/order-list-item.component.ts
selector | app-order-list-item |
styleUrls | order-list-item.component.scss |
templateUrl | ./order-list-item.component.html |
order
|
Type: |
constructor()
|
ngOnInit |
ngOnInit()
|
Returns:
void
|
getProductImageUrl |
getProductImageUrl(url: any)
|
Returns:
void
|
import { Component, OnInit, Input } from '@angular/core';
import { Order } from '../../../../core/models/order';
import { environment } from '../../../../../environments/environment';
@Component({
selector: 'app-order-list-item',
templateUrl: './order-list-item.component.html',
styleUrls: ['./order-list-item.component.scss']
})
export class OrderListItemComponent implements OnInit {
@Input() order: Order;
constructor() { }
ngOnInit() {
}
getProductImageUrl(url) {
return environment.API_ENDPOINT + url;
}
}
<div class="panel panel-default">
<div class="panel-body">
<h5 class="active">{{order.shipment_state | uppercase}}</h5>
<small>
Placed on {{order.created_at | date:'fullDate'}} /
<i
class="fa fa-{{order.currency | lowercase}}"
aria-hidden="true">
</i>{{order.total}} /
{{order.line_items.length}} items /
Payment: {{order.payment_state | humanize | uppercase}}
</small>
<hr>
<h5 class="strong">
Shipment: {{order.line_items.length}} items |
{{order.shipment_state | uppercase}} on {{order.updated_at | date:'fullDate'}}
<div class="pull-right">
<a [routerLink]="['detail', order.number]" class="view-details-link strong">View Details</a>
</div>
</h5>
<div *ngFor="let line_item of order.line_items">
<img class="line_item_image" [src]="getProductImageUrl(line_item.image_url)" alt="Line Item">
</div>
</div>
</div>