fix(admin-ui): Improved support for modifying OrderLine custom fields

Relates to #2641
vendure-ecommerce · Jan 26, 2024 · 0750fb1 · 0750fb1
1 parent 2314ff6
commit 0750fb1
Show file tree

Hide file tree

Showing 28 changed files with 100 additions and 66 deletions.
diff --git a/packages/admin-ui/i18n-coverage.json b/packages/admin-ui/i18n-coverage.json
@@ -1,20 +1,20 @@
 {
-  "generatedOn": "2024-01-19T11:46:08.674Z",
-  "lastCommit": "fc1f6490bddbc225b4824007088596372fb9958f",
+  "generatedOn": "2024-01-26T08:34:41.984Z",
+  "lastCommit": "2314ff6a392488179cd3e3c553a445bd0fd8202d",
   "translationStatus": {
     "ar": {
       "tokenCount": 769,
-      "translatedCount": 766,
+      "translatedCount": 767,
       "percentage": 100
     },
     "cs": {
       "tokenCount": 769,
-      "translatedCount": 578,
+      "translatedCount": 579,
       "percentage": 75
     },
     "de": {
       "tokenCount": 769,
-      "translatedCount": 766,
+      "translatedCount": 767,
       "percentage": 100
     },
     "en": {
@@ -24,77 +24,77 @@
     },
     "es": {
       "tokenCount": 769,
-      "translatedCount": 766,
+      "translatedCount": 767,
       "percentage": 100
     },
     "fa": {
       "tokenCount": 769,
-      "translatedCount": 766,
+      "translatedCount": 767,
       "percentage": 100
     },
     "fr": {
       "tokenCount": 769,
-      "translatedCount": 764,
+      "translatedCount": 765,
       "percentage": 99
     },
     "he": {
       "tokenCount": 769,
-      "translatedCount": 766,
+      "translatedCount": 767,
       "percentage": 100
     },
     "hr": {
       "tokenCount": 769,
-      "translatedCount": 765,
-      "percentage": 99
+      "translatedCount": 766,
+      "percentage": 100
     },
     "it": {
       "tokenCount": 769,
-      "translatedCount": 766,
+      "translatedCount": 767,
       "percentage": 100
     },
     "nb": {
       "tokenCount": 769,
-      "translatedCount": 763,
+      "translatedCount": 764,
       "percentage": 99
     },
     "ne": {
       "tokenCount": 769,
-      "translatedCount": 755,
+      "translatedCount": 756,
       "percentage": 98
     },
     "pl": {
       "tokenCount": 769,
-      "translatedCount": 408,
+      "translatedCount": 409,
       "percentage": 53
     },
     "pt_BR": {
       "tokenCount": 769,
-      "translatedCount": 765,
-      "percentage": 99
+      "translatedCount": 766,
+      "percentage": 100
     },
     "pt_PT": {
       "tokenCount": 769,
-      "translatedCount": 613,
+      "translatedCount": 614,
       "percentage": 80
     },
     "ru": {
       "tokenCount": 769,
-      "translatedCount": 766,
+      "translatedCount": 767,
       "percentage": 100
     },
     "uk": {
       "tokenCount": 769,
-      "translatedCount": 601,
-      "percentage": 78
+      "translatedCount": 767,
+      "percentage": 100
     },
     "zh_Hans": {
       "tokenCount": 769,
-      "translatedCount": 548,
+      "translatedCount": 549,
       "percentage": 71
     },
     "zh_Hant": {
       "tokenCount": 769,
-      "translatedCount": 395,
+      "translatedCount": 396,
       "percentage": 51
     }
   }

diff --git a/...src/lib/core/src/shared/components/custom-field-control/custom-field-control.component.ts b/...src/lib/core/src/shared/components/custom-field-control/custom-field-control.component.ts
@@ -1,4 +1,4 @@
-import { Component, ComponentFactory, Input, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -8,7 +8,6 @@ import { CustomFieldConfig, CustomFieldsFragment, LanguageCode } from '../../../
 import { DataService } from '../../../data/providers/data.service';
 import {
     CustomFieldComponentService,
-    CustomFieldControl,
     CustomFieldEntityName,
 } from '../../../providers/custom-field-component/custom-field-component.service';
 
@@ -29,10 +28,6 @@ export class CustomFieldControlComponent implements OnInit {
     @Input() showLabel = true;
     @Input() readonly = false;
     hasCustomControl = false;
-    @ViewChild('customComponentPlaceholder', { read: ViewContainerRef })
-    private customComponentPlaceholder: ViewContainerRef;
-
-    private customComponentFactory: ComponentFactory<CustomFieldControl> | undefined;
     uiLanguage$: Observable<LanguageCode>;
 
     constructor(

diff --git a/...c/lib/core/src/shared/components/data-table-2/data-table-custom-field-column.component.ts b/...c/lib/core/src/shared/components/data-table-2/data-table-custom-field-column.component.ts
@@ -4,8 +4,11 @@ import { map } from 'rxjs/operators';
 import { CustomFieldConfig, LanguageCode } from '../../../common/generated-types';
 import { DataService } from '../../../data/providers/data.service';
 import { DataTableSortCollection } from '../../../providers/data-table/data-table-sort-collection';
+import { CustomFieldLabelPipe } from '../../pipes/custom-field-label.pipe';
 import { DataTable2ColumnComponent } from './data-table-column.component';
 
+const labelPipe = new CustomFieldLabelPipe();
+
 @Component({
     selector: 'vdr-dt2-custom-field-column',
     templateUrl: './data-table-custom-field-column.component.html',
@@ -35,6 +38,7 @@ export class DataTableCustomFieldColumnComponent<T> extends DataTable2ColumnComp
         this.hiddenByDefault = true;
         this.sort = this.sorts?.get(this.customField.name);
         this.id = this.customField.name;
+        this.heading = labelPipe.transform(this.customField, null);
         super.ngOnInit();
     }
 }
diff --git a/...in-ui/src/lib/order/src/components/modification-detail/modification-detail.component.html b/...in-ui/src/lib/order/src/components/modification-detail/modification-detail.component.html
@@ -12,3 +12,6 @@
 <vdr-labeled-data *ngIf="getRemovedItems().length" [label]="'order.removed-items' | translate">
     <vdr-simple-item-list [items]="getRemovedItems()"></vdr-simple-item-list>
 </vdr-labeled-data>
+<vdr-labeled-data *ngIf="getModifiedItems().length" [label]="'order.modified-items' | translate">
+    <vdr-simple-item-list [items]="getModifiedItems()"></vdr-simple-item-list>
+</vdr-labeled-data>
diff --git a/...dmin-ui/src/lib/order/src/components/modification-detail/modification-detail.component.ts b/...dmin-ui/src/lib/order/src/components/modification-detail/modification-detail.component.ts
@@ -12,11 +12,13 @@ export class ModificationDetailComponent implements OnChanges {
     @Input() modification: OrderDetailFragment['modifications'][number];
     private addedItems = new Map<OrderDetailFragment['lines'][number], number>();
     private removedItems = new Map<OrderDetailFragment['lines'][number], number>();
+    private modifiedItems = new Set<OrderDetailFragment['lines'][number]>();
 
     ngOnChanges(): void {
-        const { added, removed } = this.getModifiedLines();
+        const { added, removed, modified } = this.getModifiedLines();
         this.addedItems = added;
         this.removedItems = removed;
+        this.modifiedItems = modified;
     }
 
     getSurcharge(id: string) {
@@ -37,20 +39,29 @@ export class ModificationDetailComponent implements OnChanges {
         }));
     }
 
+    getModifiedItems() {
+        return [...this.modifiedItems].map(line => ({
+            name: line.productVariant.name,
+        }));
+    }
+
     private getModifiedLines() {
         const added = new Map<OrderDetailFragment['lines'][number], number>();
         const removed = new Map<OrderDetailFragment['lines'][number], number>();
+        const modified = new Set<OrderDetailFragment['lines'][number]>();
         for (const modificationLine of this.modification.lines || []) {
             const line = this.order.lines.find(l => l.id === modificationLine.orderLineId);
             if (!line) {
                 continue;
             }
-            if (modificationLine.quantity < 0) {
+            if (modificationLine.quantity === 0) {
+                modified.add(line);
+            } else if (modificationLine.quantity < 0) {
                 removed.set(line, -modificationLine.quantity);
             } else {
                 added.set(line, modificationLine.quantity);
             }
         }
-        return { added, removed };
+        return { added, removed, modified };
     }
 }
diff --git a/packages/admin-ui/src/lib/order/src/components/order-editor/order-editor.component.html b/packages/admin-ui/src/lib/order/src/components/order-editor/order-editor.component.html
@@ -191,6 +191,21 @@
                         ></vdr-line-fulfillment>
                     </ng-template>
                 </vdr-dt2-column>
+                <vdr-dt2-column
+                    *ngFor="let customField of orderLineCustomFields"
+                    [id]="customField.name"
+                    [heading]="customField | customFieldLabel:(uiLanguage$ | async)"
+                    [hiddenByDefault]="true"
+                >
+                    <ng-template let-line="item" let-index="index">
+                        <vdr-custom-field-control
+                                [compact]="true"
+                            [entityName]="'OrderLine'"
+                            [customField]="customField"
+                            [customFieldsFormGroup]="orderLineCustomFieldsFormArray.at(index)"
+                        />
+                    </ng-template>
+                </vdr-dt2-column>
             </vdr-data-table-2>
         </vdr-card>
         <vdr-card [title]="'order.add-item-to-order' | translate">
@@ -215,15 +230,17 @@
                             </div>
                         </div>
                     </div>
-                    <ng-container *ngFor="let customField of orderLineCustomFields">
-                        <vdr-custom-field-control
-                            [readonly]="!addItemSelectedVariant"
-                            [customField]="customField"
-                            [customFieldsFormGroup]="addItemCustomFieldsForm"
-                            entityName="OrderLine"
-                            [compact]="true"
-                        ></vdr-custom-field-control>
-                    </ng-container>
+                    <div class="form-grid" *ngIf="addItemSelectedVariant">
+                        <ng-container *ngFor="let customField of orderLineCustomFields">
+                            <vdr-custom-field-control
+                                [readonly]="!addItemSelectedVariant"
+                                [customField]="customField"
+                                [customFieldsFormGroup]="addItemCustomFieldsForm"
+                                entityName="OrderLine"
+                                [compact]="true"
+                            ></vdr-custom-field-control>
+                        </ng-container>
+                    </div>
                 </div>
                 <div class="flex-spacer"></div>
                 <div>

diff --git a/packages/admin-ui/src/lib/order/src/components/order-editor/order-editor.component.ts b/packages/admin-ui/src/lib/order/src/components/order-editor/order-editor.component.ts
@@ -28,7 +28,7 @@ import {
 import { assertNever, notNullOrUndefined } from '@vendure/common/lib/shared-utils';
 import { simpleDeepClone } from '@vendure/common/lib/simple-deep-clone';
 import { EMPTY, Observable, of } from 'rxjs';
-import { mapTo, shareReplay, switchMap, take, takeUntil } from 'rxjs/operators';
+import { map, mapTo, shareReplay, switchMap, take, takeUntil } from 'rxjs/operators';
 import {
     AddedLine,
     ModifyOrderData,
@@ -54,6 +54,7 @@ export class OrderEditorComponent
 {
     availableCountries$: Observable<GetAvailableCountriesQuery['countries']['items']>;
     addressCustomFields: CustomFieldConfig[];
+    uiLanguage$: Observable<LanguageCode>;
     detailForm = new UntypedFormGroup({});
     couponCodesControl = new FormControl<string[]>([]);
     orderLineCustomFieldsFormArray: UntypedFormArray;
@@ -183,6 +184,9 @@ export class OrderEditorComponent
             .single$.subscribe(({ order }) => {
                 this.previousState = order?.history.items[0].data.from;
             });
+        this.uiLanguage$ = this.dataService.client
+            .uiState()
+            .stream$.pipe(map(({ uiState }) => uiState.language));
     }
 
     ngOnDestroy(): void {

diff --git a/...es/admin-ui/src/lib/order/src/components/simple-item-list/simple-item-list.component.html b/...es/admin-ui/src/lib/order/src/components/simple-item-list/simple-item-list.component.html
@@ -1,8 +1,8 @@
 <div class="items-list">
     <ul>
         <li *ngFor="let item of items" [title]="item.name">
-            <div class="quantity">{{ item.quantity }}</div>
-            <clr-icon shape="times" size="12"></clr-icon>
+            <div class="quantity" *ngIf="item.quantity != null">{{ item.quantity }}</div>
+            <clr-icon shape="times" size="12" *ngIf="item.quantity != null"></clr-icon>
             {{ item.name }}
         </li>
     </ul>

diff --git a/...ages/admin-ui/src/lib/order/src/components/simple-item-list/simple-item-list.component.ts b/...ages/admin-ui/src/lib/order/src/components/simple-item-list/simple-item-list.component.ts
@@ -7,5 +7,5 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SimpleItemListComponent {
-    @Input() items: Array<{ name: string; quantity: number }>;
+    @Input() items: Array<{ name: string; quantity?: number }>;
 }
diff --git a/packages/admin-ui/src/lib/static/i18n-messages/ar.json b/packages/admin-ui/src/lib/static/i18n-messages/ar.json
@@ -601,6 +601,7 @@
     "modification-summary": "ملخص التعديلات",
     "modification-updating-billing-address": "تحديث عنوان الفواتير",
     "modification-updating-shipping-address": "تحديث عنوان الشحن",
+    "modified-items": "العناصر المعدلة",
     "modify-order": "تعديل الترتيب",
     "modify-order-price-difference": "فرق السعر",
     "net-price": "السعر الصافي",
@@ -625,7 +626,6 @@
     "payment-metadata": "بيانات تعريف الدفع",
     "payment-method": "طريقة الدفع او السداد",
     "payment-state": "وضع الأداء",
-    "payment-to-refund": "الدفع لاسترداد",
     "payments": "المدفوعات",
     "placed-at": "وضعت في",
     "preview-changes": "تغييرات المعاينة",

diff --git a/packages/admin-ui/src/lib/static/i18n-messages/cs.json b/packages/admin-ui/src/lib/static/i18n-messages/cs.json
@@ -601,6 +601,7 @@
     "modification-summary": "Souhrn úprav",
     "modification-updating-billing-address": "Upravování fakturační adresy",
     "modification-updating-shipping-address": "Upravování dodací adresy",
+    "modified-items": "Upravené položky",
     "modify-order": "Upravit objednávku",
     "modify-order-price-difference": "Cenový rozdíl",
     "net-price": "Čistá cena",
@@ -625,7 +626,6 @@
     "payment-metadata": "Data platby",
     "payment-method": "Platební metoda",
     "payment-state": "Stav",
-    "payment-to-refund": "Platba k refundaci",
     "payments": "",
     "placed-at": "Datum objednávky",
     "preview-changes": "Náhled změn",

diff --git a/packages/admin-ui/src/lib/static/i18n-messages/de.json b/packages/admin-ui/src/lib/static/i18n-messages/de.json
@@ -601,6 +601,7 @@
     "modification-summary": "Zusammenfassung der Änderungen",
     "modification-updating-billing-address": "Rechnungsadresse aktualisieren",
     "modification-updating-shipping-address": "Versandadresse aktualisieren",
+    "modified-items": "Geänderte Artikel",
     "modify-order": "Bestellung ändern",
     "modify-order-price-difference": "Preisunterschied",
     "net-price": "Nettopreis",
@@ -625,7 +626,6 @@
     "payment-metadata": "Metadaten zur Bezahlung",
     "payment-method": "Zahlungsart",
     "payment-state": "Status",
-    "payment-to-refund": "Zu erstattende Zahlung",
     "payments": "Zahlungen",
     "placed-at": "Aufgegeben um",
     "preview-changes": "Änderungsvorschau",

diff --git a/packages/admin-ui/src/lib/static/i18n-messages/en.json b/packages/admin-ui/src/lib/static/i18n-messages/en.json
@@ -601,6 +601,7 @@
     "modification-summary": "Summary of modifications",
     "modification-updating-billing-address": "Updating billing address",
     "modification-updating-shipping-address": "Updating shipping address",
+    "modified-items": "Modified items",
     "modify-order": "Modify order",
     "modify-order-price-difference": "Price difference",
     "net-price": "Net price",
@@ -625,7 +626,6 @@
     "payment-metadata": "Payment metadata",
     "payment-method": "Payment method",
     "payment-state": "State",
-    "payment-to-refund": "Payment to refund",
     "payments": "Payments",
     "placed-at": "Placed at",
     "preview-changes": "Preview changes",

diff --git a/packages/admin-ui/src/lib/static/i18n-messages/es.json b/packages/admin-ui/src/lib/static/i18n-messages/es.json
@@ -601,6 +601,7 @@
     "modification-summary": "Resumen de modificaciones",
     "modification-updating-billing-address": "Actualizando dirección de facturación",
     "modification-updating-shipping-address": "Actualizando dirección de envío",
+    "modified-items": "Artículos modificados",
     "modify-order": "Modificar pedido",
     "modify-order-price-difference": "Diferencia de precio",
     "net-price": "Precio neto",
@@ -625,7 +626,6 @@
     "payment-metadata": "Metadatos de pago",
     "payment-method": "Método de pago",
     "payment-state": "Estado",
-    "payment-to-refund": "Pago por reembolso",
     "payments": "Pagos",
     "placed-at": "Realizado en",
     "preview-changes": "Previsualizar cambios",