Skip to content

Commit

Permalink
feat(admin-ui): Improve display of OrderLine customFields
Browse files Browse the repository at this point in the history
  • Loading branch information
@michaelbromley
michaelbromley committed Apr 8, 2021
1 parent cf31cbf commit fde3ffc
Show file tree
Hide file tree
Showing 4 changed files with 114 additions and 118 deletions.
21 changes: 19 additions & 2 deletions packages/admin-ui/src/lib/order/src/components/order-table/order-table-mixin.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@

@mixin order-table {

.is-cancelled td {
text-decoration: line-through;
background-color: var(--color-component-bg-200);
Expand All @@ -15,6 +13,25 @@
border-top: 1px dashed var(--color-component-border-200);
}

td.custom-fields-row {
border-top-style: dashed;
border-top-color: var(--color-grey-200);
}

.order-line-custom-fields {
display: flex;
flex-wrap: wrap;

.custom-field {
text-align: start;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 6px;
margin-right: 18px;
}
}

.order-line-custom-field {
background-color: var(--color-component-bg-100);

Expand Down
174 changes: 74 additions & 100 deletions packages/admin-ui/src/lib/order/src/components/order-table/order-table.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,109 +6,89 @@
<th>{{ 'order.product-sku' | translate }}</th>
<th>{{ 'order.unit-price' | translate }}</th>
<th>{{ 'order.quantity' | translate }}</th>
<ng-container *ngFor="let customField of visibleOrderLineCustomFields">
<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>
<tbody>
<tr *ngFor="let line of order.lines" class="order-line" [class.is-cancelled]="line.quantity === 0">
<td class="align-middle thumb">
<img *ngIf="line.featuredAsset" [src]="line.featuredAsset | assetPreview: 'tiny'" />
</td>
<td class="align-middle name">{{ line.productVariant.name }}</td>
<td class="align-middle sku">{{ line.productVariant.sku }}</td>
<td class="align-middle unit-price">
{{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}
<div class="net-price" [title]="'order.net-price' | translate">
{{ line.unitPrice | localeCurrency: 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 visibleOrderLineCustomFields">
<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] | localeDate: '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>
<ng-container *ngFor="let line of order.lines">
<tr class="order-line" [class.is-cancelled]="line.quantity === 0">
<td class="align-middle thumb">
<img *ngIf="line.featuredAsset" [src]="line.featuredAsset | assetPreview: 'tiny'" />
</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.linePriceWithTax | localeCurrency: order.currencyCode }}
<div class="net-price" [title]="'order.net-price' | translate">
{{ line.linePrice | localeCurrency: order.currencyCode }}
</div>
<td class="align-middle name">{{ line.productVariant.name }}</td>
<td class="align-middle sku">{{ line.productVariant.sku }}</td>
<td class="align-middle unit-price">
{{ line.unitPriceWithTax | localeCurrency: order.currencyCode }}
<div class="net-price" [title]="'order.net-price' | translate">
{{ line.unitPrice | localeCurrency: 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>
<td class="align-middle total">
{{ line.linePriceWithTax | localeCurrency: order.currencyCode }}
<div class="net-price" [title]="'order.net-price' | translate">
{{ line.linePrice | localeCurrency: order.currencyCode }}
</div>

<ng-container *ngIf="getLineDiscounts(line) as discounts">
<vdr-dropdown *ngIf="discounts.length">
<div class="promotions-label" vdrDropdownTrigger>
{{ 'order.promotions-applied' | translate }}
</div>
<vdr-dropdown-menu>
<div class="line-promotion" *ngFor="let discount of discounts">
<a class="promotion-name" [routerLink]="getPromotionLink(discount)">{{
discount.description
<ng-container *ngIf="getLineDiscounts(line) as discounts">
<vdr-dropdown *ngIf="discounts.length">
<div class="promotions-label" vdrDropdownTrigger>
{{ 'order.promotions-applied' | translate }}
</div>
<vdr-dropdown-menu>
<div class="line-promotion" *ngFor="let discount of discounts">
<a class="promotion-name" [routerLink]="getPromotionLink(discount)">{{
discount.description
}}</a>
<div class="promotion-amount">
{{ discount.amountWithTax | localeCurrency: order.currencyCode }}
<div class="net-price" [title]="'order.net-price' | translate">
{{ discount.amount | localeCurrency: order.currencyCode }}
<div class="promotion-amount">
{{ discount.amountWithTax | localeCurrency: order.currencyCode }}
<div class="net-price" [title]="'order.net-price' | translate">
{{ discount.amount | localeCurrency: order.currencyCode }}
</div>
</div>
</div>
</vdr-dropdown-menu>
</vdr-dropdown>
</ng-container>
</td>
</tr>
<ng-container *ngIf="getLineCustomFields(line) as customFields">
<tr *ngIf="customFields.length">
<td colspan="6" class="custom-fields-row">
<div class="order-line-custom-fields">
<div class="custom-field" *ngFor="let field of customFields">
<vdr-labeled-data [label]="field.config | customFieldLabel">
<div class="mt2" [ngSwitch]="field.config.type">
<ng-template [ngSwitchCase]="'datetime'">
<span [title]="field.value">{{ field.value }}</span>
</ng-template>
<ng-template [ngSwitchCase]="'boolean'">
<ng-template [ngIf]="field.value === true">
<clr-icon shape="check"></clr-icon>
</ng-template>
<ng-template [ngIf]="field.value === false">
<clr-icon shape="times"></clr-icon>
</ng-template>
</ng-template>
<ng-template ngSwitchDefault>
{{ field.value }}
</ng-template>
</div>
</vdr-labeled-data>
</div>
</vdr-dropdown-menu>
</vdr-dropdown>
</ng-container>
</td>
</tr>
</div>
</td>
</tr>
</ng-container>
</ng-container>
<tr class="surcharge" *ngFor="let surcharge of order.surcharges">
<td class="align-middle name left" colspan="2">{{ surcharge.description }}</td>
<td class="align-middle sku">{{ surcharge.sku }}</td>
<td class="align-middle"></td>
<td [attr.colspan]="1 + visibleOrderLineCustomFields.length"></td>
<ng-container *ngIf="showElided"><td></td></ng-container>
<td class="align-middle" colspan="2"></td>
<td class="align-middle total">
{{ surcharge.priceWithTax | localeCurrency: order.currencyCode }}
<div class="net-price" [title]="'order.net-price' | translate">
Expand All @@ -117,13 +97,12 @@
</td>
</tr>
<tr class="order-adjustment" *ngFor="let discount of order.discounts">
<td [attr.colspan]="5 + visibleOrderLineCustomFields.length" class="left clr-align-middle">
<td colspan="5" class="left clr-align-middle">
<a [routerLink]="getPromotionLink(discount)">{{ discount.description }}</a>
<vdr-chip *ngIf="getCouponCodeForAdjustment(order, discount) as couponCode">{{
couponCode
}}</vdr-chip>
</td>
<ng-container *ngIf="showElided"><td></td></ng-container>
<td class="clr-align-middle">
{{ discount.amountWithTax | localeCurrency: order.currencyCode }}
<div class="net-price" [title]="'order.net-price' | translate">
Expand All @@ -133,9 +112,7 @@
</tr>
<tr class="sub-total">
<td class="left clr-align-middle">{{ 'order.sub-total' | translate }}</td>
<td></td>
<td [attr.colspan]="3 + visibleOrderLineCustomFields.length"></td>
<ng-container *ngIf="showElided"><td></td></ng-container>
<td colspan="4"></td>
<td class="clr-align-middle">
{{ order.subTotalWithTax | localeCurrency: order.currencyCode }}
<div class="net-price" [title]="'order.net-price' | translate">
Expand All @@ -146,8 +123,7 @@
<tr class="shipping">
<td class="left clr-align-middle">{{ 'order.shipping' | translate }}</td>
<td class="clr-align-middle">{{ order.shippingLines[0]?.shippingMethod?.name }}</td>
<td [attr.colspan]="3 + visibleOrderLineCustomFields.length"></td>
<ng-container *ngIf="showElided"><td></td></ng-container>
<td colspan="3"></td>
<td class="clr-align-middle">
{{ order.shippingWithTax | localeCurrency: order.currencyCode }}
<div class="net-price" [title]="'order.net-price' | translate">
Expand All @@ -157,9 +133,7 @@
</tr>
<tr class="total">
<td class="left clr-align-middle">{{ 'order.total' | translate }}</td>
<td></td>
<td [attr.colspan]="3 + visibleOrderLineCustomFields.length"></td>
<ng-container *ngIf="showElided"><td></td></ng-container>
<td colspan="4"></td>
<td class="clr-align-middle">
{{ order.totalWithTax | localeCurrency: order.currencyCode }}
<div class="net-price" [title]="'order.net-price' | translate">
Expand Down
23 changes: 7 additions & 16 deletions packages/admin-ui/src/lib/order/src/components/order-table/order-table.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,16 @@
@import "order-table-mixin";
@import 'order-table-mixin';

.order-table {
@include order-table;
}

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

::ng-deep .line-promotion {
display: flex;
justify-content: space-between;
padding: 6px 12px;
.promotion-amount {
margin-left: 12px;
}
display: flex;
justify-content: space-between;
padding: 6px 12px;
.promotion-amount {
margin-left: 12px;
}
.net-price {
font-size: 11px;
color: var(--color-text-300);
Expand Down
14 changes: 14 additions & 0 deletions packages/admin-ui/src/lib/order/src/components/order-table/order-table.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,20 @@ export class OrderTableComponent implements OnInit {
return line.discounts.filter(a => a.type === AdjustmentType.PROMOTION);
}

getLineCustomFields(line: OrderDetail.Lines): Array<{ config: CustomFieldConfig; value: any }> {
return this.orderLineCustomFields
.map(config => {
const value = (line as any).customFields[config.name];
return {
config,
value,
};
})
.filter(field => {
return this.orderLineCustomFieldsVisible ? true : field.value != null;
});
}

getPromotionLink(promotion: OrderDetail.Discounts): any[] {
const id = promotion.adjustmentSource.split(':')[1];
return ['/marketing', 'promotions', id];
Expand Down

0 comments on commit fde3ffc

Please sign in to comment.