ayan.poddar
/
eShopOnContainers
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 19 Wiki Activity
Browse Source

FIX all views 

1. FIXED all views: orders, order-detail, basket.
2. This is a good candidate for merge onto dev
pull/443/head
Adrian MIHAILESCU 7 years ago
parent
a241fb2a1e
commit
069fec5ab0
6 changed files with 258 additions and 112 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -1
      src/Web/WebSPA/.gitignore
  2. +100
    -47
      src/Web/WebSPA/Client/modules/basket/basket.component.html
  3. +2
    -4
      src/Web/WebSPA/Client/modules/basket/basket.component.scss
  4. +36
    -14
      src/Web/WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html
  5. +76
    -30
      src/Web/WebSPA/Client/modules/orders/orders-new/orders-new.component.html
  6. +44
    -16
      src/Web/WebSPA/Client/modules/orders/orders.component.html

+ 0
- 1
src/Web/WebSPA/.gitignore View File

@ -11,7 +11,6 @@ npm-debug.log*
*.user *.user
*.userosscache *.userosscache
*.sln.docstates *.sln.docstates
package.lock.json
# User-specific files (MonoDevelop/Xamarin Studio) # User-specific files (MonoDevelop/Xamarin Studio)
*.userprefs *.userprefs


+ 100
- 47
src/Web/WebSPA/Client/modules/basket/basket.component.html View File

@ -8,53 +8,106 @@
</div> </div>
</div> </div>
<article class="esh-basket-titles row">
<section class="esh-basket-title col-xs-3">Product</section>
<section class="esh-basket-title col-xs-3 hidden-lg-down"></section>
<section class="esh-basket-title col-xs-2">Price</section>
<section class="esh-basket-title col-xs-2">Quantity</section>
<section class="esh-basket-title col-xs-2">Cost</section>
</article>
<div *ngFor="let item of basket?.items" class="esh-basket-items--border">
<article class="esh-basket-items row">
<section class="esh-basket-item esh-basket-item--middle col-lg-3 hidden-lg-down">
<img class="esh-basket-image" src="{{item.pictureUrl}}" />
<div>{{item.productName}}</div>
</section>
<section class="esh-basket-item esh-basket-item--middle col-xs-2">$ {{item.unitPrice | number:'.2-2'}}</section>
<section class="esh-basket-item esh-basket-item--middle col-xs-2">
<input id="quantity" class="esh-basket-input" type="number" min="1" [(ngModel)]="item.quantity" (change)="itemQuantityChanged(item)" />
</section>
<section class="esh-basket-item esh-basket-item--middle esh-basket-item--mark col-xs-2">$ {{(item.unitPrice * item.quantity) | number:'.2-2'}}</section>
</article>
<br/>
<div class="esh-basket-items-margin-left1 row">
<div class="alert alert-warning" role="alert" *ngIf="item.oldUnitPrice > 0">&nbsp;Note that the price of this article changed in our Catalog. The old price when you originally added it to the basket was $ {{item.oldUnitPrice}} </div>
</div>
<div>
<table class="table">
<thead>
<tr>
<th scope="col">
<section class="esh-basket-title col-xs-3">Product</section>
</th>
<th scope="col">
<section class="esh-basket-title col-xs-3 hidden-lg-down"></section>
</th>
<th scope="col">
<section class="esh-basket-title col-xs-2">Price</section>
</th>
<th scope="col">
<section class="esh-basket-title col-xs-2">Quantity</section>
</th>
<th scope="col">
<section class="esh-basket-title col-xs-2">Cost</section>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of basket?.items">
<th scope="row">
<section class="esh-basket-item esh-basket-item--middle col-lg-3 hidden-lg-down">
<img class="esh-basket-image" src="{{item.pictureUrl}}" />
</section>
</th>
<td>
<section class="esh-basket-item esh-basket-item--middle col-xs-2">{{item.productName}}</section>
</td>
<td>
<section class="esh-basket-item esh-basket-item--middle col-xs-2">$ {{item.unitPrice | number:'.2-2'}}</section>
</td>
<td>
<section class="esh-basket-item esh-basket-item--middle col-xs-2">
<input id="quantity" class="esh-basket-input" type="number" min="1" [(ngModel)]="item.quantity" (change)="itemQuantityChanged(item)" />
</section>
</td>
<td>
<section class="esh-basket-item esh-basket-item--middle esh-basket-item--mark col-xs-2">$ {{(item.unitPrice * item.quantity) | number:'.2-2'}}</section>
</td>
<div class="esh-basket-items-margin-left1 row">
<div class="alert alert-warning" role="alert" *ngIf="item.oldUnitPrice > 0">&nbsp;Note that the price of this article changed in our Catalog. The old price when you originally added it to the basket was $ {{item.oldUnitPrice}} </div>
</div>
</tr>
<tr>
<th scope="row">
<section class="esh-basket-item esh-basket-item--middle col-lg-3 hidden-lg-down"></section>
</th>
<td>
<section class="esh-basket-item esh-basket-item--middle col-xs-2"></section>
</td>
<td>
<section class="esh-basket-item esh-basket-item--middle col-xs-2"></section>
</td>
<td>
<section class="esh-basket-item esh-basket-item--middle col-xs-2"></section>
</td>
<td>
<section class="esh-basket-title col-xs-2">Total</section>
</td>
</tr>
<tr>
<th scope="row">
<section class="esh-basket-item esh-basket-item--middle col-lg-3 hidden-lg-down"></section>
</th>
<td>
<section class="esh-basket-item esh-basket-item--middle col-xs-2"></section>
</td>
<td>
<section class="esh-basket-item esh-basket-item--middle col-xs-2"></section>
</td>
<td>
<section class="esh-basket-item esh-basket-item--middle col-xs-2"></section>
</td>
<td>
<section class="esh-basket-item esh-basket-item--mark col-xs-2">$ {{totalPrice | number:'.2-2'}}</section>
</td>
</tr>
<tr>
<th scope="row">
<section class="esh-basket-item esh-basket-item--middle col-lg-3 hidden-lg-down"></section>
</th>
<td>
<section class="esh-basket-item esh-basket-item--middle col-xs-2"></section>
</td>
<td>
<section class="esh-basket-item col-xs-2">
<button class="btn esh-basket-checkout" (click)="update($event)">[ Update ]</button>
</section>
</td>
<td colspan="2">
<section class="esh-basket-item col-xs-4">
<button class="btn esh-basket-checkout" (click)="checkOut($event)">[ Checkout ]</button>
</section>
</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
<div class="container">
<article class="esh-basket-titles esh-basket-titles--clean row">
<section class="esh-basket-title col-xs-9"></section>
<section class="esh-basket-title col-xs-2">Total</section>
</article>
<article class="esh-basket-items row">
<section class="esh-basket-item col-xs-9"></section>
<section class="esh-basket-item esh-basket-item--mark col-xs-2">$ {{totalPrice | number:'.2-2'}}</section>
</article>
<article class="esh-basket-items row">
<section class="esh-basket-item col-xs-7"></section>
<section class="esh-basket-item col-xs-2">
<button class="btn esh-basket-checkout" (click)="update($event)">[ Update ]</button>
</section>
<section class="esh-basket-item col-xs-3">
<div (click)="checkOut($event)" class="btn esh-basket-checkout">[ Checkout ]</div>
</section>
</article>
</div>
</div> </div>

+ 2
- 4
src/Web/WebSPA/Client/modules/basket/basket.component.scss View File

@ -8,15 +8,13 @@
&-titles { &-titles {
padding-bottom: 1rem; padding-bottom: 1rem;
padding-top: 2rem; padding-top: 2rem;
justify-content: space-between;
align-items: right;
&--clean { &--clean {
padding-bottom: 0; padding-bottom: 0;
padding-top: 0; padding-top: 0;
} }
} }
&-titles {
justify-content: space-between;
align-items: right;
}
&-title { &-title {
text-transform: uppercase; text-transform: uppercase;
justify-content: space-between; justify-content: space-between;


+ 36
- 14
src/Web/WebSPA/Client/modules/orders/orders-detail/orders-detail.component.html View File

@ -2,21 +2,43 @@
<esh-header url="/orders">Back to list</esh-header> <esh-header url="/orders">Back to list</esh-header>
<div class="container"> <div class="container">
<section class="esh-orders_detail-section">
<article class="esh-orders_detail-titles row">
<section class="esh-orders_detail-title col-xs-3">Order number</section>
<section class="esh-orders_detail-title col-xs-3">Date</section>
<section class="esh-orders_detail-title col-xs-3">Total</section>
<section class="esh-orders_detail-title col-xs-3">Status</section>
</article>
<article class="esh-orders_detail-items row">
<section class="esh-orders_detail-item col-xs-3">{{order.ordernumber}}</section>
<section class="esh-orders_detail-item col-xs-3">{{order.date | date:'short'}}</section>
<section class="esh-orders_detail-item col-xs-3">$ {{order.total}}</section>
<section class="esh-orders_detail-item col-xs-3">{{order.status}}</section>
</article>
</section>
<div>
<table class="table">
<thead>
<tr>
<th scope="col">
<section class="esh-orders_detail-title col-xs-3">Order number</section>
</th>
<th scope="col">
<section class="esh-orders_detail-title col-xs-3">Date</section>
</th>
<th scope="col">
<section class="esh-orders_detail-title col-xs-3">Total</section>
</th>
<th scope="col">
<section class="esh-orders_detail-title col-xs-3">Status</section>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<section class="esh-orders_detail-item col-xs-3">{{order.ordernumber}}</section>
</th>
<td>
<section class="esh-orders_detail-item col-xs-3">{{order.date | date:'short'}}</section>
</td>
<td>
<section class="esh-orders_detail-item col-xs-3">$ {{order.total}}</section>
</td>
<td>
<section class="esh-orders_detail-item col-xs-3">{{order.status}}</section>
</td>
</tr>
</tbody>
</table>
</div>
<section class="esh-orders_detail-section"> <section class="esh-orders_detail-section">
<article class="esh-orders_detail-titles row"> <article class="esh-orders_detail-titles row">


+ 76
- 30
src/Web/WebSPA/Client/modules/orders/orders-new/orders-new.component.html View File

@ -80,36 +80,82 @@
<section class="esh-orders_new-title col-xs-12">Order details</section> <section class="esh-orders_new-title col-xs-12">Order details</section>
</article> </article>
<article class="esh-orders_new-items esh-orders_new-items--border row" *ngFor="let item of order.orderItems">
<section class="esh-orders_new-item col-md-4 hidden-md-down">
<img class="esh-orders_new-image" src="{{item.pictureurl}}">
</section>
<section class="esh-orders_new-item esh-orders_new-item--middle col-xs-4">{{item.productname}}</section>
<section class="esh-orders_new-item esh-orders_new-item--middle col-xs-1">$ {{item.unitprice | number:'.2-2'}}</section>
<section class="esh-orders_new-item esh-orders_new-item--middle col-xs-1">{{item.units}}</section>
<section class="esh-orders_new-item esh-orders_new-item--middle col-xs-2">$ {{(item.units * item.unitprice) | number:'.2-2'}}</section>
</article>
</section>
<section class="esh-orders_new-section esh-orders_new-section--right">
<article class="esh-orders_new-titles row">
<section class="esh-orders_new-title col-xs-9"></section>
<section class="esh-orders_new-title col-xs-2">Total</section>
</article>
<article class="esh-orders_new-items row">
<section class="esh-orders_new-item col-xs-9"></section>
<section class="esh-orders_new-item esh-orders_new-item--mark col-xs-2">$ {{order.total | number:'.2-2'}}</section>
</article>
</section>
<section class="esh-orders_new-section">
<div class="form-group">
<div class="col-md-9">
</div>
<div class="col-md-2">
<button type="submit" class="btn esh-orders_new-placeOrder" [disabled]="!newOrderForm.valid || isOrderProcessing">[ Place Order ]</button>
</div>
</div>
<table>
<tbody>
<tr *ngFor="let item of order.orderItems">
<th scope="row">
<section class="esh-orders_new-item col-md-4 hidden-md-down">
<img class="esh-orders_new-image" src="{{item.pictureurl}}">
</section>
</th>
<td>
<section class="esh-orders_new-item esh-orders_new-item--middle col-xs-3">{{item.productname}}</section>
</td>
<td>
<section class="esh-orders_new-item esh-orders_new-item--middle col-xs-2">$ {{item.unitprice | number:'.2-2'}}</section>
</td>
<td>
<section class="esh-orders_new-item esh-orders_new-item--middle col-xs-1">{{item.units}}</section>
</td>
<td>
<section class="esh-orders_new-item esh-orders_new-item--middle col-xs-2">$ {{(item.units * item.unitprice) | number:'.2-2'}}</section>
</td>
</tr>
<tr>
<th scope="row">
<section class="esh-orders_new-item col-md-4 hidden-md-down"></section>
</th>
<td>
<section class="esh-orders_new-item esh-orders_new-item--middle col-xs-3"></section>
</td>
<td>
<section class="esh-orders_new-item esh-orders_new-item--middle col-xs-2"></section>
</td>
<td>
<section class="esh-orders_new-item esh-orders_new-item--middle col-xs-1"></section>
</td>
<td>
<section class="esh-orders_new-title col-xs-2">Total</section>
</td>
</tr>
<tr>
<th scope="row">
<section class="esh-orders_new-item col-md-4 hidden-md-down"></section>
</th>
<td>
<section class="esh-orders_new-item esh-orders_new-item--middle col-xs-3"></section>
</td>
<td>
<section class="esh-orders_new-item esh-orders_new-item--middle col-xs-2"></section>
</td>
<td>
<section class="esh-orders_new-item esh-orders_new-item--middle col-xs-1"></section>
</td>
<td>
<section class="esh-orders_new-item esh-orders_new-item--mark col-xs-2">$ {{order.total | number:'.2-2'}}</section>
</td>
</tr>
<tr>
<th scope="row">
<section class="esh-orders_new-item col-md-4 hidden-md-down"></section>
</th>
<td>
<section class="esh-orders_new-item esh-orders_new-item--middle col-xs-2"></section>
</td>
<td colspan="2">
<section class="esh-orders_new-section">
<div class="form-group">
<div class="col-md-9">
</div>
<div class="col-md-2">
<button type="submit" class="btn esh-orders_new-placeOrder" [disabled]="!newOrderForm.valid || isOrderProcessing">[ Place Order ]</button>
</div>
</div>
</section>
</td>
</tr>
</tbody>
</table>
</section> </section>
</form> </form>
</div> </div>

+ 44
- 16
src/Web/WebSPA/Client/modules/orders/orders.component.html View File

@ -5,22 +5,50 @@
<div class="alert alert-warning esh-orders-alert" role="alert" [hidden]="!errorReceived"> <div class="alert alert-warning esh-orders-alert" role="alert" [hidden]="!errorReceived">
Error requesting order list, please try later on Error requesting order list, please try later on
</div> </div>
<article class="esh-orders-titles row">
<section class="esh-orders-title col-xs-2">Order number</section>
<section class="esh-orders-title col-xs-4">Date</section>
<section class="esh-orders-title col-xs-2">Total</section>
<section class="esh-orders-title col-xs-2">Status</section>
<section class="esh-orders-title col-xs-2"></section>
</article>
<article class="esh-orders-items row" *ngFor="let order of orders">
<section class="esh-orders-item col-xs-2">{{order.ordernumber}}</section>
<section class="esh-orders-item col-xs-4">{{order.date | date:'short'}}</section>
<section class="esh-orders-item col-xs-2">$ {{order.total}}</section>
<section class="esh-orders-item col-xs-2">{{order.status}}</section>
<section class="esh-orders-item col-xs-2">
<a class="esh-orders-link" routerLink="/orders/{{order.ordernumber}}">Detail</a>
</section>
</article>
<div>
<table class="table">
<thead>
<tr>
<th scope="col">
<section class="esh-orders-title col-xs-2">Order number</section>
</th>
<th scope="col">
<section class="esh-orders-title col-xs-4">Date</section>
</th>
<th scope="col">
<section class="esh-orders-title col-xs-2">Total</section>
</th>
<th scope="col">
<section class="esh-orders-title col-xs-2">Status</section>
</th>
<th scope="col">
<section class="esh-orders-title col-xs-2"></section>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let order of orders">
<th scope="row">
<section class="esh-orders-item col-xs-2">{{order.ordernumber}}</section>
</th>
<td>
<section class="esh-orders-item col-xs-4">{{order.date | date:'short'}}</section>
</td>
<td>
<section class="esh-orders-item col-xs-2">$ {{order.total}}</section>
</td>
<td>
<section class="esh-orders-item col-xs-2">{{order.status}}</section>
</td>
<td>
<section class="esh-orders-item col-xs-2">
<a class="esh-orders-link" routerLink="/orders/{{order.ordernumber}}">Detail</a>
</section>
</td>
</tr>
</tbody>
</table>
</div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save