File
Implements
Metadata
selector |
app-order-detail |
styleUrls |
order-detail.component.scss |
templateUrl |
./order-detail.component.html |
Methods
ngOnInit
|
ngOnInit()
|
|
Returns: void
|
getProductImageUrl
|
getProductImageUrl(line_item: LineItem)
|
|
Returns: void
|
ngOnDestroy
|
ngOnDestroy()
|
|
Returns: void
|
orderNumber
|
orderNumber: String
|
|
orderSubscription$
|
orderSubscription$: Subscription
|
|
routeSubscription$
|
routeSubscription$: Subscription
|
|
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Store } from '@ngrx/store';
import { AppState } from '../../../../interfaces';
import { UserActions } from '../../../actions/user.actions';
import { UserService } from '../../../services/user.service';
import { Order } from '../../../../core/models/order';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
import { Observable } from 'rxjs/Observable';
import { environment } from '../../../../../environments/environment';
import { LineItem } from '../../../../core/models/line_item';
@Component({
selector: 'app-order-detail',
templateUrl: './order-detail.component.html',
styleUrls: ['./order-detail.component.scss']
})
export class OrderDetailComponent implements OnInit, OnDestroy {
routeSubscription$: Subscription;
orderSubscription$: Subscription;
orderNumber: String;
order: Order;
constructor(
private userService: UserService,
private route: ActivatedRoute
) {
}
ngOnInit() {
this.routeSubscription$ = this.route.params.subscribe(
(params: any) => {
this.orderNumber = params['number'];
this.orderSubscription$ =
this.userService
.getOrderDetail(this.orderNumber)
.subscribe(order => this.order = order);
}
);
}
getProductImageUrl(line_item: LineItem) {
const image_url = line_item.variant.images[0].small_url;
return environment.API_ENDPOINT + image_url;
}
ngOnDestroy() {
this.routeSubscription$.unsubscribe();
this.orderSubscription$.unsubscribe();
}
}
<div *ngIf="order">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="active col-md-6">
<div class="row">
<div class="col-md-4">
<small>SHIPMENT</small>
<h5>
<i class="fa fa-{{order.currency | lowercase}}" aria-hidden="true"></i>
{{order.total}}
</h5>
</div>
<div class="col-md-4">
<small>STATUS</small>
<h5 class="status">
{{order.shipment_state | uppercase}}
</h5>
</div>
<div class="col-md-4">
<small>ITEMS</small>
<h5>
{{order.line_items.length}}
</h5>
</div>
</div>
</div>
</div>
<hr>
<div class='row' *ngFor="let line_item of order.line_items">
<br>
<div class="col-md-2">
<img class="line_item_image" [src]="getProductImageUrl(line_item)" alt="Line Item">
</div>
<div class="col-md-3">
<h5 class="ptitle">
<a [routerLink]="['/product', line_item.variant.slug]">
<span class="text-uppercase text-primary">{{line_item.variant.name}}</span>
</a>
</h5>
</div>
<div class="col-md-3">
<h5 class="strong">
<i class="fa fa-{{order.currency | lowercase}}" aria-hidden="true"></i>
{{line_item.total}}
</h5>
<small>
MRP:
<i class="fa fa-{{order.currency | lowercase}}" aria-hidden="true"></i>
{{line_item.price}}
</small><br/>
<small class="text-warning">
VAT/CST:
<i class="fa fa-{{order.currency | lowercase}}" aria-hidden="true"></i>
{{line_item.total - line_item.price}}
</small>
</div>
<div class="col-md-4">
<p>
<strong class="text-warning">Please note:</strong> You can return or exchange this within 30 days.
</p>
</div>
</div>
</div>
</div>
<br>
<h5>SHIPPING DETAILS</h5>
<div class="panel panel-default">
<div class="row panel-body">
<div class="col-md-12">
<h5>Order No: {{order.number}}</h5>
</div>
<div class="col-md-12">
<address>
<strong>{{order.ship_address.full_name}}.</strong><br>
{{order.ship_address.address1}}<br>
{{order.ship_address.address2}}<br>
{{order.ship_address.city}}, {{order.ship_address.zipcode}}<br>
<abbr title="Phone">P:</abbr> {{order.ship_address.phone}}
</address>
</div>
<dl class="col-md-12">
<dt>
Total Amount:
<i class="fa fa-{{order.currency | lowercase}}" aria-hidden="true"></i>
{{order.total}}
</dt>
<dd>
MRP:
<i class="fa fa-{{order.currency | lowercase}}" aria-hidden="true"></i>
{{order.item_total}}
</dd>
<dd>
Shipping:
<i class="fa fa-{{order.currency | lowercase}}" aria-hidden="true"></i>
{{order.ship_total}}
</dd>
<dd>
Adjustment:
<i class="fa fa-{{order.currency | lowercase}}" aria-hidden="true"></i>
{{order.adjustment_total}}
</dd>
</dl>
<dl class="col-md-12">
<dt>
Payment: {{order.payment_state | humanize | uppercase}}
</dt>
</dl>
</div>
</div>
</div>
Legend
Html element with directive