Skip to content

Commit

Permalink
feat(admin-ui): Display CustomFields for OrderLines in order detail view
Browse files Browse the repository at this point in the history 
Closes #227
  • Loading branch information
@michaelbromley
michaelbromley committed Dec 18, 2019
1 parent 3141e63 commit c33f1f6
Show file tree
Hide file tree
Showing 5 changed files with 175 additions and 50 deletions.
63 changes: 35 additions & 28 deletions packages/admin-ui/src/app/data/definitions/order-definitions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,39 @@ export const FULFILLMENT_FRAGMENT = gql`
}
`;

export const ORDER_LINE_FRAGMENT = gql`
fragment OrderLine on OrderLine {
id
featuredAsset {
preview
}
productVariant {
id
name
sku
}
adjustments {
...Adjustment
}
unitPrice
unitPriceWithTax
quantity
items {
id
unitPrice
unitPriceIncludesTax
unitPriceWithTax
taxRate
refundId
cancelled
fulfillment {
...Fulfillment
}
}
totalPrice
}
`;

export const ORDER_DETAIL_FRAGMENT = gql`
fragment OrderDetail on Order {
id
Expand All @@ -76,34 +109,7 @@ export const ORDER_DETAIL_FRAGMENT = gql`
lastName
}
lines {
id
featuredAsset {
preview
}
productVariant {
id
name
sku
}
adjustments {
...Adjustment
}
unitPrice
unitPriceWithTax
quantity
items {
id
unitPrice
unitPriceIncludesTax
unitPriceWithTax
taxRate
refundId
cancelled
fulfillment {
...Fulfillment
}
}
totalPrice
...OrderLine
}
adjustments {
...Adjustment
Expand Down Expand Up @@ -159,6 +165,7 @@ export const ORDER_DETAIL_FRAGMENT = gql`
${ADJUSTMENT_FRAGMENT}
${SHIPPING_ADDRESS_FRAGMENT}
${FULFILLMENT_FRAGMENT}
${ORDER_LINE_FRAGMENT}
`;

export const GET_ORDERS_LIST = gql`
Expand Down
127 changes: 105 additions & 22 deletions packages/admin-ui/src/app/order/components/order-detail/order-detail.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,31 @@
<th>{{ 'order.product-sku' | translate }}</th>
<th>{{ 'order.unit-price' | translate }}</th>
<th>{{ 'order.quantity' | translate }}</th>
<ng-container *ngFor="let customField of visibileOrderLineCustomFields">
<th class="order-line-custom-field">
<button
class="custom-field-header-button"
(click)="toggleOrderLineCustomFields()"
[title]="'common.hide-custom-fields' | translate"
>
{{ customField | customFieldLabel }}
</button>
</th>
</ng-container>
<ng-container *ngIf="showElided">
<th>
<button
class="custom-field-header-button"
(click)="toggleOrderLineCustomFields()"
[title]="'common.display-custom-fields' | translate"
>
<clr-icon
shape="ellipsis-horizontal"
class="custom-field-ellipsis"
></clr-icon>
</button>
</th>
</ng-container>
<th>{{ 'order.total' | translate }}</th>
</tr>
</thead>
Expand All @@ -68,67 +93,123 @@
<td class="align-middle sku">{{ line.productVariant.sku }}</td>
<td class="align-middle unit-price">
{{ line.unitPriceWithTax / 100 | currency: order.currencyCode }}
<div class="net-price" [title]="'order.net-price' | translate">{{ line.unitPrice / 100 | currency: order.currencyCode }}</div>
<div class="net-price" [title]="'order.net-price' | translate">
{{ line.unitPrice / 100 | currency: order.currencyCode }}
</div>
</td>
<td class="align-middle quantity">
{{ line.quantity }}
<vdr-line-refunds [line]="line"></vdr-line-refunds>
<vdr-line-fulfillment [line]="line" [orderState]="order.state"></vdr-line-fulfillment>
</td>
<ng-container *ngFor="let customField of visibileOrderLineCustomFields">
<td class="order-line-custom-field align-middle">
<ng-container [ngSwitch]="customField.type">
<ng-template [ngSwitchCase]="'datetime'">
<span [title]="line.customFields[customField.name]">{{
line.customFields[customField.name] | date: 'short'
}}</span>
</ng-template>
<ng-template [ngSwitchCase]="'boolean'">
<ng-template [ngIf]="line.customFields[customField.name] === true">
<clr-icon shape="check"></clr-icon>
</ng-template>
<ng-template [ngIf]="line.customFields[customField.name] === false">
<clr-icon shape="times"></clr-icon>
</ng-template>
</ng-template>
<ng-template ngSwitchDefault>
{{ line.customFields[customField.name] }}
</ng-template>
</ng-container>
</td>
</ng-container>
<ng-container *ngIf="showElided"
><td class="order-line-custom-field align-middle">
<clr-icon
shape="ellipsis-horizontal"
class="custom-field-ellipsis"
></clr-icon></td
></ng-container>
<td class="align-middle total">
{{ line.totalPrice / 100 | currency: order.currencyCode }}
<div class="net-price" [title]="'order.net-price' | translate">{{ (line.unitPrice * line.quantity) / 100 | currency: order.currencyCode }}</div>
<div class="net-price" [title]="'order.net-price' | translate">
{{ (line.unitPrice * line.quantity) / 100 | currency: order.currencyCode }}
</div>

<ng-container *ngIf="getLinePromotions(line) as promotions">
<vdr-dropdown *ngIf="promotions.length">
<div class="promotions-label" vdrDropdownTrigger>{{ 'order.promotions-applied' | translate }}</div>
<div class="promotions-label" vdrDropdownTrigger>
{{ 'order.promotions-applied' | translate }}
</div>
<vdr-dropdown-menu>
<div class="line-promotion" *ngFor="let promotion of getLinePromotions(line)">
<a class="promotion-name" [routerLink]="getPromotionLink(promotion)">{{ promotion.description }}</a>
<div class="promotion-amount">{{ promotion.amount / 100 | currency: order.currencyCode }}</div>
<div
class="line-promotion"
*ngFor="let promotion of getLinePromotions(line)"
>
<a
class="promotion-name"
[routerLink]="getPromotionLink(promotion)"
>{{ promotion.description }}</a
>
<div class="promotion-amount">
{{ promotion.amount / 100 | currency: order.currencyCode }}
</div>
</div>
</vdr-dropdown-menu>
</vdr-dropdown>
</ng-container>

</td>
</tr>
<tr class="sub-total">
<td class="left clr-align-middle">{{ 'order.sub-total' | translate }}</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td [attr.colspan]="3 + visibileOrderLineCustomFields.length"></td>
<ng-container *ngIf="showElided"><td></td></ng-container>
<td class="clr-align-middle">
{{ order.subTotal / 100 | currency: order.currencyCode }}
<div class="net-price" [title]="'order.net-price' | translate">{{ order.subTotalBeforeTax / 100 | currency: order.currencyCode }}</div>
<div class="net-price" [title]="'order.net-price' | translate">
{{ order.subTotalBeforeTax / 100 | currency: order.currencyCode }}
</div>
</td>
</tr>
<tr class="order-ajustment" *ngFor="let adjustment of order.adjustments">
<td colspan="5" class="left clr-align-middle">
<td
[attr.colspan]="5 + visibileOrderLineCustomFields.length"
class="left clr-align-middle"
>
<a [routerLink]="getPromotionLink(adjustment)">{{ adjustment.description }}</a>
<vdr-chip *ngIf="getCouponCodeForAdjustment(order, adjustment) as couponCode">{{ couponCode }}</vdr-chip>
<vdr-chip *ngIf="getCouponCodeForAdjustment(order, adjustment) as couponCode">{{
couponCode
}}</vdr-chip>
</td>
<ng-container *ngIf="showElided"><td></td></ng-container>
<td class="clr-align-middle">
{{ adjustment.amount / 100 | currency: order.currencyCode }}
</td>
<td class="clr-align-middle">{{ adjustment.amount / 100 | currency: order.currencyCode }}</td>
</tr>
<tr class="shipping">
<td class="left clr-align-middle">{{ 'order.shipping' | translate }}</td>
<td class="clr-align-middle">{{ order.shippingMethod?.description }}</td>
<td colspan="3"></td>
<td [attr.colspan]="3 + visibileOrderLineCustomFields.length"></td>
<ng-container *ngIf="showElided"><td></td></ng-container>
<td class="clr-align-middle">
{{ order.shippingWithTax / 100 | currency: order.currencyCode }}
<div class="net-price" [title]="'order.net-price' | translate">{{ order.shipping / 100 | currency: order.currencyCode }}</div>
<div class="net-price" [title]="'order.net-price' | translate">
{{ order.shipping / 100 | currency: order.currencyCode }}
</div>
</td>
</tr>
<tr class="total">
<td class="left clr-align-middle">{{ 'order.total' | translate }}</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td [attr.colspan]="3 + visibileOrderLineCustomFields.length"></td>
<ng-container *ngIf="showElided"><td></td></ng-container>
<td class="clr-align-middle">
{{ order.total / 100 | currency: order.currencyCode }}
<div class="net-price" [title]="'order.net-price' | translate">{{ order.totalBeforeTax / 100 | currency: order.currencyCode }}</div>
<div class="net-price" [title]="'order.net-price' | translate">
{{ order.totalBeforeTax / 100 | currency: order.currencyCode }}
</div>
</td>
</tr>
</table>
Expand All @@ -140,8 +221,10 @@
></vdr-order-history>
</div>
<div class="clr-col-lg-4 order-cards">
<vdr-order-custom-fields-card [customFieldsConfig]="customFields"
[customFieldValues]="order.customFields"></vdr-order-custom-fields-card>
<vdr-order-custom-fields-card
[customFieldsConfig]="customFields"
[customFieldValues]="order.customFields"
></vdr-order-custom-fields-card>
<div class="card">
<div class="card-header">
{{ 'order.customer' | translate }}
Expand Down
17 changes: 17 additions & 0 deletions packages/admin-ui/src/app/order/components/order-detail/order-detail.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,23 @@
}
}

.custom-field-header-button {
background: none;
margin: 0;
padding: 0;
border: none;
cursor: pointer;
color: $color-primary-600;
}

.order-line-custom-field {
background-color: $color-grey-100;

.custom-field-ellipsis {
color: $color-grey-300;
}
}

.net-price {
font-size: 11px;
color: $color-grey-400;
Expand Down
16 changes: 16 additions & 0 deletions packages/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 @@ -36,6 +36,8 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
history$: Observable<GetOrderHistory.Items[] | null>;
fetchHistory = new Subject<void>();
customFields: CustomFieldConfig[];
orderLineCustomFields: CustomFieldConfig[];
orderLineCustomFieldsVisible = false;
constructor(
router: Router,
route: ActivatedRoute,
Expand All @@ -48,9 +50,19 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
super(route, router, serverConfigService);
}

get visibileOrderLineCustomFields(): CustomFieldConfig[] {
return this.orderLineCustomFieldsVisible ? this.orderLineCustomFields : [];
}

get showElided(): boolean {
return !this.orderLineCustomFieldsVisible && 0 < this.orderLineCustomFields.length;
}

ngOnInit() {
this.init();
this.customFields = this.getCustomFieldConfig('Order');
this.orderLineCustomFields = this.getCustomFieldConfig('OrderLine');
this.orderLineCustomFieldsVisible = this.orderLineCustomFields.length < 2;
this.history$ = this.fetchHistory.pipe(
startWith(null),
switchMap(() => {
Expand All @@ -69,6 +81,10 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
this.destroy();
}

toggleOrderLineCustomFields() {
this.orderLineCustomFieldsVisible = !this.orderLineCustomFieldsVisible;
}

getLinePromotions(line: OrderDetail.Lines) {
return line.adjustments.filter(a => a.type === AdjustmentType.PROMOTION);
}
Expand Down
2 changes: 2 additions & 0 deletions packages/admin-ui/src/i18n-messages/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,12 +136,14 @@
"description": "Description",
"disabled": "Disabled",
"discard-changes": "Discard changes",
"display-custom-fields": "Display custom fields",
"done": "Done",
"edit": "Edit",
"edit-field": "Edit field",
"enabled": "Enabled",
"extension-running-in-separate-window": "Extension is running in a separate window",
"guest": "Guest",
"hide-custom-fields": "Hide custom fields",
"items-per-page-option": "{ count } per page",
"jobs-in-progress": "{ count } {count, plural, one {job} other {jobs}} in progress",
"language": "Language",
Expand Down

0 comments on commit c33f1f6

Please sign in to comment.