feat(admin-ui): Improve display of OrderLine customFields

packages/admin-ui/src/lib/order/src/components/order-table/order-table-mixin.scss

@@ -1,6 +1,4 @@
-
 @mixin order-table {
-
     .is-cancelled td {
         text-decoration: line-through;
         background-color: var(--color-component-bg-200);
@@ -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);
 

packages/admin-ui/src/lib/order/src/components/order-table/order-table.component.html

@@ -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">
@@ -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">
@@ -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">
@@ -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">
@@ -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">

packages/admin-ui/src/lib/order/src/components/order-table/order-table.component.scss

@@ -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);

packages/admin-ui/src/lib/order/src/components/order-table/order-table.component.ts

@@ -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];