Skip to content

Commit

Permalink
feat(admin-ui): Improve layout of OrderDetailComponent
Browse files Browse the repository at this point in the history
  • Loading branch information
@michaelbromley
michaelbromley committed Jun 25, 2019
1 parent fa7203d commit c1d8664
Show file tree
Hide file tree
Showing 13 changed files with 220 additions and 157 deletions.
6 changes: 4 additions & 2 deletions admin-ui/src/app/common/base-detail.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { ServerConfigService } from '../data/server-config';
import { LanguageCode } from './generated-types';
import { getDefaultLanguage } from './utilities/get-default-language';

export abstract class BaseDetailComponent<Entity extends { id: string }> {
export abstract class BaseDetailComponent<Entity extends { id: string; updatedAt?: string }> {
entity$: Observable<Entity>;
availableLanguages$: Observable<LanguageCode[]>;
languageCode$: Observable<LanguageCode>;
Expand All @@ -27,7 +27,9 @@ export abstract class BaseDetailComponent<Entity extends { id: string }> {
init() {
this.entity$ = this.route.data.pipe(
switchMap(data => data.entity as Observable<Entity>),
distinctUntilChanged((a, b) => a.id === b.id),
distinctUntilChanged((a, b) => {
return a.id === b.id && a.updatedAt === b.updatedAt;
}),
tap(entity => (this.id = entity.id)),
shareReplay(1),
);
Expand Down
1 change: 1 addition & 0 deletions admin-ui/src/app/data/definitions/facet-definitions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export const FACET_VALUE_FRAGMENT = gql`
export const FACET_WITH_VALUES_FRAGMENT = gql`
fragment FacetWithValues on Facet {
id
updatedAt
languageCode
isPrivate
code
Expand Down
246 changes: 106 additions & 140 deletions admin-ui/src/app/order/components/order-detail/order-detail.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,154 +1,120 @@
<vdr-action-bar>
<vdr-ab-left></vdr-ab-left>
<vdr-action-bar *ngIf="entity$ | async as order">
<vdr-ab-left>
<div class="clr-row clr-flex-column">
<vdr-order-state-label [state]="order.state"></vdr-order-state-label>
<div class="date-detail">
<clr-icon shape="calendar"></clr-icon>
{{ 'common.updated' | translate }}:
<strong>{{ order.updatedAt | date: 'medium' }}</strong>
</div>
</div>
</vdr-ab-left>

<vdr-ab-right></vdr-ab-right>
</vdr-action-bar>

<div *ngIf="entity$ | async as order">
<div class="clr-row">
<div class="clr-col-md-4">
<table class="table table-vertical">
<tbody>
<tr>
<th>{{ 'order.order-code' | translate }}</th>
<td>{{ order.code }}</td>
</tr>
<tr>
<th>{{ 'order.state' | translate }}</th>
<td>{{ order.state }}</td>
</tr>
<tr>
<th>{{ 'common.created' | translate }}</th>
<td>{{ order.createdAt | date: 'medium' }}</td>
</tr>
<div class="clr-col-lg-8">
<table class="order-lines table">
<thead>
<tr>
<th>{{ 'common.updated' | translate }}</th>
<td>{{ order.updatedAt | date: 'medium' }}</td>
<th></th>
<th>{{ 'order.product-name' | translate }}</th>
<th>{{ 'order.product-sku' | translate }}</th>
<th>{{ 'order.unit-price' | translate }}</th>
<th>{{ 'order.quantity' | translate }}</th>
<th>{{ 'order.total' | translate }}</th>
</tr>
</tbody>
</thead>
<tr *ngFor="let line of order.lines" class="order-line">
<td class="thumb"><img [src]="line.featuredAsset.preview + '?preset=tiny'" /></td>
<td class="name">{{ line.productVariant.name }}</td>
<td class="sku">{{ line.productVariant.sku }}</td>
<td class="unit-price">
{{ line.unitPriceWithTax / 100 | currency: order.currencyCode }}
</td>
<td class="quantity">{{ line.quantity }}</td>
<td class="total">{{ line.totalPrice / 100 | currency: order.currencyCode }}</td>
</tr>
<tr class="sub-total">
<td class="left">{{ 'order.sub-total' | translate }}</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>{{ order.subTotal / 100 | currency: order.currencyCode }}</td>
</tr>
<tr class="order-ajustment" *ngFor="let adjustment of order.adjustments">
<td colspan="5" class="left">{{ adjustment.description }}</td>
<td>{{ adjustment.amount / 100 | currency: order.currencyCode }}</td>
</tr>
<tr class="shipping">
<td class="left">{{ 'order.shipping' | translate }}</td>
<td>{{ order.shippingMethod?.description }}</td>
<td colspan="3"></td>
<td>{{ order.shipping / 100 | currency: order.currencyCode }}</td>
</tr>
<tr class="total">
<td class="left">{{ 'order.total' | translate }}</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>{{ order.total / 100 | currency: order.currencyCode }}</td>
</tr>
</table>
</div>
<div class="clr-col-md-4">
<table class="table table-vertical">
<tbody>
<tr>
<th>{{ 'order.customer' | translate }}</th>
<td><vdr-customer-label [customer]="order.customer"></vdr-customer-label></td>
</tr>
<tr>
<th>{{ 'order.shipping-address' | translate }}</th>
<td>
<div
class="address-line"
*ngFor="let line of getShippingAddressLines(order.shippingAddress)"
>
<div class="clr-col-lg-4 order-cards">
<div class="card">
<div class="card-header">
{{ 'order.customer' | translate }}
</div>
<div class="card-block">
<div class="card-text">
<vdr-customer-label [customer]="order.customer"></vdr-customer-label>
<h6 *ngIf="getShippingAddressLines(order.shippingAddress).length">
{{ 'order.shipping-address' | translate }}
</h6>
<ul class="shipping-address">
<li *ngFor="let line of getShippingAddressLines(order.shippingAddress)">
{{ line }}
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="clr-col-md-4" *ngIf="order.payments && order.payments.length">
<table class="table table-vertical">
<tbody>
<ng-container *ngFor="let payment of order.payments">
<tr>
<th>{{ 'order.payment-state' | translate }}</th>
<td>
{{ payment.state }}
<ng-container *ngIf="payment.state === 'Authorized'">
<vdr-dropdown>
<button class="icon-button" vdrDropdownTrigger>
<clr-icon shape="ellipsis-vertical"></clr-icon>
</button>
<vdr-dropdown-menu vdrPosition="bottom-right">
<button
type="button"
vdrDropdownItem
[disabled]="i === 0"
(click)="settlePayment(payment)"
>
{{ 'order.settle-payment' | translate }}
</button>
</vdr-dropdown-menu>
</vdr-dropdown>
</ng-container>
</td>
</tr>
<tr>
<th>{{ 'order.payment-method' | translate }}</th>
<td>{{ payment.method }}</td>
</tr>
<tr>
<th>{{ 'order.amount' | translate }}</th>
<td>{{ payment.amount / 100 | currency: order.currencyCode }}</td>
</tr>
<tr>
<th>{{ 'order.transaction-id' | translate }}</th>
<td>{{ payment.transactionId }}</td>
</tr>
<tr>
<th>{{ 'order.payment-metadata' | translate }}</th>
<td>
<ul class="payment-metadata">
<li *ngFor="let entry of getPaymentMetadata(payment)">
<strong>{{ entry[0] }}</strong>
: {{ entry[1] }}
</li>
</ul>
</td>
</tr>
</ng-container>
</tbody>
</table>
</li>
</ul>
</div>
</div>
</div>
<ng-container *ngIf="order.payments && order.payments.length">
<div class="card" *ngFor="let payment of order.payments">
<div class="card-header">
{{ 'order.payment' | translate }}
</div>
<div class="card-block">
<h6>{{ 'order.payment-state' | translate }}</h6>
{{ payment.state }}
<h6>{{ 'order.payment-method' | translate }}</h6>
{{ payment.method }}
<h6>{{ 'order.amount' | translate }}</h6>
{{ payment.amount / 100 | currency: order.currencyCode }}
<h6>{{ 'order.transaction-id' | translate }}</h6>
{{ payment.transactionId }}
<h6>{{ 'order.payment-metadata' | translate }}</h6>
<ul class="payment-metadata">
<li *ngFor="let entry of getPaymentMetadata(payment)">
<span class="metadata-prop">{{ entry[0] }}:</span>
{{ entry[1] }}
</li>
</ul>
</div>
<div class="card-footer">
<ng-container *ngIf="payment.state === 'Authorized'">
<button class="btn btn-sm btn-link" (click)="settlePayment(payment)">
{{ 'order.settle-payment' | translate }}
</button>
</ng-container>
</div>
</div>
</ng-container>
</div>
</div>

<table class="order-lines table">
<thead>
<tr>
<th></th>
<th>{{ 'order.product-name' | translate }}</th>
<th>{{ 'order.product-sku' | translate }}</th>
<th>{{ 'order.unit-price' | translate }}</th>
<th>{{ 'order.quantity' | translate }}</th>
<th>{{ 'order.total' | translate }}</th>
</tr>
</thead>
<tr *ngFor="let line of order.lines" class="order-line">
<td class="thumb"><img [src]="line.featuredAsset.preview + '?preset=tiny'" /></td>
<td class="name">{{ line.productVariant.name }}</td>
<td class="sku">{{ line.productVariant.sku }}</td>
<td class="unit-price">{{ line.unitPriceWithTax / 100 | currency: order.currencyCode }}</td>
<td class="quantity">{{ line.quantity }}</td>
<td class="total">{{ line.totalPrice / 100 | currency: order.currencyCode }}</td>
</tr>
<tr class="sub-total">
<td class="left">{{ 'order.sub-total' | translate }}</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>{{ order.subTotal / 100 | currency: order.currencyCode }}</td>
</tr>
<tr class="order-ajustment" *ngFor="let adjustment of order.adjustments">
<td colspan="5" class="left">{{ adjustment.description }}</td>
<td>{{ adjustment.amount / 100 | currency: order.currencyCode }}</td>
</tr>
<tr class="shipping">
<td class="left">{{ 'order.shipping' | translate }}</td>
<td>{{ order.shippingMethod?.description }}</td>
<td colspan="3"></td>
<td>{{ order.shipping / 100 | currency: order.currencyCode }}</td>
</tr>
<tr class="total">
<td class="left">{{ 'order.total' | translate }}</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>{{ order.total / 100 | currency: order.currencyCode }}</td>
</tr>
</table>
</div>
20 changes: 20 additions & 0 deletions admin-ui/src/app/order/components/order-detail/order-detail.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,21 @@
@import "variables";

.date-detail {
color: $color-grey-500;
padding-left: 6px;
}

ul.payment-metadata {
list-style-type: none;
}
.metadata-prop {
color: $color-grey-500;
}

.shipping-address {
list-style-type: none;
line-height: 1.3em;
}

.order-lines {

Expand All @@ -15,3 +28,10 @@ ul.payment-metadata {
border-top: 1px dashed $color-grey-300;
}
}

.order-cards {
h6 {
margin-top: 6px;
color: $color-grey-500;
}
}
7 changes: 4 additions & 3 deletions admin-ui/src/app/order/components/order-detail/order-detail.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,9 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderWithLines.Fra
if (!shippingAddress) {
return [];
}
return Object.values(shippingAddress).filter(val => val !== 'ShippingAddress');
return Object.values(shippingAddress)
.filter(val => val !== 'OrderAddress')
.filter(line => !!line);
}

getPaymentMetadata(payment: OrderWithLines.Payments) {
Expand All @@ -56,8 +58,7 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderWithLines.Fra
} else {
this.notificationService.error(_('order.settle-payment-error'));
}
payment.state = settlePayment.state;
this.changeDetector.markForCheck();
this.dataService.order.getOrder(this.id).single$.subscribe();
}
});
}
Expand Down
18 changes: 11 additions & 7 deletions admin-ui/src/app/order/components/order-list/order-list.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,17 @@
<vdr-dt-column>{{ 'common.updated-at' | translate }}</vdr-dt-column>
<vdr-dt-column></vdr-dt-column>
<ng-template let-order="item">
<td class="left">{{ order.id }}</td>
<td class="left">{{ order.code }}</td>
<td class="left"><vdr-customer-label [customer]="order.customer"></vdr-customer-label></td>
<td class="left">{{ order.state }}</td>
<td class="left">{{ order.total / 100 | currency: order.currencyCode }}</td>
<td class="left">{{ order.updatedAt | date: 'medium' }}</td>
<td class="right">
<td class="left align-middle">{{ order.id }}</td>
<td class="left align-middle">{{ order.code }}</td>
<td class="left align-middle">
<vdr-customer-label [customer]="order.customer"></vdr-customer-label>
</td>
<td class="left align-middle">
<vdr-order-state-label [state]="order.state"></vdr-order-state-label>
</td>
<td class="left align-middle">{{ order.total / 100 | currency: order.currencyCode }}</td>
<td class="left align-middle">{{ order.updatedAt | date: 'medium' }}</td>
<td class="right align-middle">
<vdr-table-row-action
iconShape="shopping-cart"
[label]="'common.open' | translate"
Expand Down
4 changes: 2 additions & 2 deletions admin-ui/src/app/shared/components/action-bar/action-bar.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,6 @@ export class ActionBarRightComponent {
styleUrls: ['./action-bar.component.scss'],
})
export class ActionBarComponent {
@ContentChild(ActionBarLeftComponent, { static: true }) left: ActionBarLeftComponent;
@ContentChild(ActionBarRightComponent, { static: true }) right: ActionBarRightComponent;
@ContentChild(ActionBarLeftComponent, { static: false }) left: ActionBarLeftComponent;
@ContentChild(ActionBarRightComponent, { static: false }) right: ActionBarRightComponent;
}
1 change: 1 addition & 0 deletions admin-ui/src/app/shared/components/order-state-label/order-state-label.component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<vdr-chip [ngClass]="state">{{ stateToken | translate }}</vdr-chip>
Loading

0 comments on commit c1d8664

Please sign in to comment.