feat(admin-ui): Support tabbed custom fields in Order detail view

Closes #1562

packages/admin-ui/i18n-coverage.json

@@ -1,70 +1,70 @@
 {
-  "generatedOn": "2022-06-01T19:29:13.019Z",
-  "lastCommit": "e0960018daaaa3331e5ae079c1e34a0a6aef415e",
+  "generatedOn": "2022-07-22T10:22:58.599Z",
+  "lastCommit": "5a93bf0853c6ec2d2aa88915afaf1e72fa17b2b1",
   "translationStatus": {
     "cs": {
-      "tokenCount": 650,
-      "translatedCount": 591,
+      "tokenCount": 653,
+      "translatedCount": 592,
       "percentage": 91
     },
     "de": {
-      "tokenCount": 650,
-      "translatedCount": 570,
-      "percentage": 88
+      "tokenCount": 653,
+      "translatedCount": 571,
+      "percentage": 87
     },
     "en": {
-      "tokenCount": 650,
-      "translatedCount": 649,
+      "tokenCount": 653,
+      "translatedCount": 651,
       "percentage": 100
     },
     "es": {
-      "tokenCount": 650,
-      "translatedCount": 623,
+      "tokenCount": 653,
+      "translatedCount": 624,
       "percentage": 96
     },
     "fr": {
-      "tokenCount": 650,
-      "translatedCount": 613,
+      "tokenCount": 653,
+      "translatedCount": 614,
       "percentage": 94
     },
     "it": {
-      "tokenCount": 650,
-      "translatedCount": 621,
-      "percentage": 96
+      "tokenCount": 653,
+      "translatedCount": 622,
+      "percentage": 95
     },
     "pl": {
-      "tokenCount": 650,
-      "translatedCount": 405,
+      "tokenCount": 653,
+      "translatedCount": 406,
       "percentage": 62
     },
     "pt_BR": {
-      "tokenCount": 650,
-      "translatedCount": 589,
-      "percentage": 91
+      "tokenCount": 653,
+      "translatedCount": 590,
+      "percentage": 90
     },
     "pt_PT": {
-      "tokenCount": 650,
-      "translatedCount": 634,
-      "percentage": 98
+      "tokenCount": 653,
+      "translatedCount": 635,
+      "percentage": 97
     },
     "ru": {
-      "tokenCount": 650,
-      "translatedCount": 620,
+      "tokenCount": 653,
+      "translatedCount": 621,
       "percentage": 95
     },
     "uk": {
-      "tokenCount": 650,
-      "translatedCount": 620,
+      "tokenCount": 653,
+      "translatedCount": 621,
       "percentage": 95
     },
     "zh_Hans": {
-      "tokenCount": 650,
-      "translatedCount": 557,
-      "percentage": 86
+      "tokenCount": 653,
+      "translatedCount": 558,
+      "percentage": 85
     },
     "zh_Hant": {
-      "tokenCount": 650,
-      "translatedCount": 385,
+      "tokenCount": 653,
+      "translatedCount": 386,
       "percentage": 59
     }
   }

packages/admin-ui/src/lib/order/src/components/order-custom-fields-card/order-custom-fields-card.component.html

@@ -4,15 +4,13 @@
     </div>
     <div class="card-block">
         <div class="card-text custom-field-form" [class.editable]="editable">
-            <ng-container *ngFor="let customField of customFieldsConfig">
-                <vdr-custom-field-control
-                    entityName="Order"
-                    [customFieldsFormGroup]="customFieldForm"
-                    [compact]="true"
-                    [readonly]="customField.readonly || !editable"
-                    [customField]="customField"
-                ></vdr-custom-field-control>
-            </ng-container>
+            <vdr-tabbed-custom-fields
+                entityName="Order"
+                [customFields]="customFieldsConfig"
+                [customFieldsFormGroup]="customFieldForm"
+                [readonly]="!editable"
+                [compact]="true"
+            ></vdr-tabbed-custom-fields>
         </div>
     </div>
     <div class="card-footer">
@@ -29,5 +27,13 @@
             <clr-icon shape="check"></clr-icon>
             {{ 'common.update' | translate }}
         </button>
+        <button
+            class="btn btn-sm btn-secondary"
+            (click)="onCancelClick()"
+            *ngIf="editable"
+        >
+            <clr-icon shape="times"></clr-icon>
+            {{ 'common.cancel' | translate }}
+        </button>
     </div>
 </div>

packages/admin-ui/src/lib/order/src/components/order-custom-fields-card/order-custom-fields-card.component.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { CustomFieldConfig } from '@vendure/admin-ui/core';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { CustomFieldConfig, ModalService } from '@vendure/admin-ui/core';
 
 @Component({
     selector: 'vdr-order-custom-fields-card',
@@ -14,7 +15,7 @@ export class OrderCustomFieldsCardComponent implements OnInit {
     @Output() updateClick = new EventEmitter<any>();
     customFieldForm: FormGroup;
     editable = false;
-    constructor(private formBuilder: FormBuilder) {}
+    constructor(private formBuilder: FormBuilder, private modalService: ModalService) {}
 
     ngOnInit() {
         this.customFieldForm = this.formBuilder.group({});
@@ -31,4 +32,26 @@ export class OrderCustomFieldsCardComponent implements OnInit {
         this.customFieldForm.markAsPristine();
         this.editable = false;
     }
+
+    onCancelClick() {
+        if (this.customFieldForm.dirty) {
+            this.modalService
+                .dialog({
+                    title: _('catalog.confirm-cancel'),
+                    buttons: [
+                        { type: 'secondary', label: _('common.keep-editing') },
+                        { type: 'danger', label: _('common.discard-changes'), returnValue: true },
+                    ],
+                })
+                .subscribe(result => {
+                    if (result) {
+                        this.customFieldForm.reset();
+                        this.customFieldForm.markAsPristine();
+                        this.editable = false;
+                    }
+                });
+        } else {
+            this.editable = false;
+        }
+    }
 }

packages/admin-ui/src/lib/static/i18n-messages/cs.json

@@ -66,6 +66,7 @@
     "auto-update-product-variant-name": "Automaticky aktualizovat jména variant",
     "channel-price-preview": "Náhled ceny v kanálu",
     "collection-contents": "Obsah kolekce",
+    "confirm-cancel": "",
     "confirm-delete-administrator": "Smazat administrátora?",
     "confirm-delete-assets": "Smazat {count} {count, plural, one {médium} few {média} other {médií}}?",
     "confirm-delete-channel": "Smazat kanál?",
@@ -209,6 +210,7 @@
     "guest": "Host",
     "items-per-page-option": "{ count } na stránku",
     "items-selected-count": "",
+    "keep-editing": "",
     "language": "Jazyk",
     "launch-extension": "Spustit rozšíření",
     "live-update": "Živé aktualizace",
@@ -682,4 +684,4 @@
     "job-result": "Výsledek úlohy",
     "job-state": "Stav úlohy"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/de.json

@@ -66,6 +66,7 @@
     "auto-update-product-variant-name": "Automatisch Namen der Produktvariante aktualisieren",
     "channel-price-preview": "Kanal-Preisvorschau",
     "collection-contents": "Inhalt der Sammlung",
+    "confirm-cancel": "",
     "confirm-delete-administrator": "Administrator löschen?",
     "confirm-delete-assets": "{count} {count, plural, one {Asset} other {Assets}} löschen?",
     "confirm-delete-channel": "Kanal löschen?",
@@ -209,6 +210,7 @@
     "guest": "Gast",
     "items-per-page-option": "{ count } pro Seite",
     "items-selected-count": "",
+    "keep-editing": "",
     "language": "Sprache",
     "launch-extension": "Erweiterung starten",
     "live-update": "Live-Aktualisierung",
@@ -682,4 +684,4 @@
     "job-result": "Job-Ergebnis",
     "job-state": "Job-Status"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/en.json

@@ -66,6 +66,7 @@
     "auto-update-product-variant-name": "Automatically update the names of ProductVariants",
     "channel-price-preview": "Channel price preview",
     "collection-contents": "Collection contents",
+    "confirm-cancel": "Cancel?",
     "confirm-delete-administrator": "Delete administrator?",
     "confirm-delete-assets": "Delete {count} {count, plural, one {asset} other {assets}}?",
     "confirm-delete-channel": "Delete channel?",
@@ -209,6 +210,7 @@
     "guest": "Guest",
     "items-per-page-option": "{ count } per page",
     "items-selected-count": "{ count } {count, plural, one {item} other {items}} selected",
+    "keep-editing": "Keep editing",
     "language": "Language",
     "launch-extension": "Launch extension",
     "live-update": "Live update",

packages/admin-ui/src/lib/static/i18n-messages/es.json

@@ -66,6 +66,7 @@
     "auto-update-product-variant-name": "Actualiza los nombres de las variantes de producto automáticamente",
     "channel-price-preview": "Vista previa de precio para el canal de ventas",
     "collection-contents": "Contenidos de la colección",
+    "confirm-cancel": "",
     "confirm-delete-administrator": "¿Eliminar administrador?",
     "confirm-delete-assets": "¿Eliminar recurso?",
     "confirm-delete-channel": "¿Eliminar canal de ventas?",
@@ -209,6 +210,7 @@
     "guest": "Invitado",
     "items-per-page-option": "{ count } por página",
     "items-selected-count": "",
+    "keep-editing": "",
     "language": "Idioma",
     "launch-extension": "Ejecutar extensión",
     "live-update": "Actualización en vivo",
@@ -682,4 +684,4 @@
     "job-result": "Resultado",
     "job-state": "Estado"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/fr.json

@@ -66,6 +66,7 @@
     "auto-update-product-variant-name": "Mettre à jour automatiquement les noms de variations du produit ",
     "channel-price-preview": "Prévisualisation du prix du canal",
     "collection-contents": "Contenu de la Collection",
+    "confirm-cancel": "",
     "confirm-delete-administrator": "Supprimer administrateur?",
     "confirm-delete-assets": "Supprimer {count} {count, plural, one {fichier} other {fichiers}} ?",
     "confirm-delete-channel": "Supprimer canal ?",
@@ -209,6 +210,7 @@
     "guest": "Invité",
     "items-per-page-option": "{ count } par page",
     "items-selected-count": "",
+    "keep-editing": "",
     "language": "Langue",
     "launch-extension": "Lancer extension",
     "live-update": "Mise à jour automatique",
@@ -682,4 +684,4 @@
     "job-result": "Résultat de la tâche",
     "job-state": "Etat de la tâche"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/it.json

@@ -66,6 +66,7 @@
     "auto-update-product-variant-name": "Aggiorna automaticamente i nomi delle Varianti",
     "channel-price-preview": "Anteprima prezzo canale",
     "collection-contents": "Contenuti della Collezione",
+    "confirm-cancel": "",
     "confirm-delete-administrator": "Eliminare l'amministratore?",
     "confirm-delete-assets": "Eliminare {count} {count, plural, one {media} other {media}}?",
     "confirm-delete-channel": "Eliminare il canale?",
@@ -209,6 +210,7 @@
     "guest": "Ospite",
     "items-per-page-option": "{ count } per pagina",
     "items-selected-count": "",
+    "keep-editing": "",
     "language": "Lingua",
     "launch-extension": "Lancia estensione",
     "live-update": "Aggiornamenti live",
@@ -682,4 +684,4 @@
     "job-result": "Risultato operazione",
     "job-state": "Stato operazione"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/pl.json

@@ -66,6 +66,7 @@
     "auto-update-product-variant-name": "",
     "channel-price-preview": "Podgląd cen kanału",
     "collection-contents": "Zawartość kolekcji",
+    "confirm-cancel": "",
     "confirm-delete-administrator": "",
     "confirm-delete-assets": "",
     "confirm-delete-channel": "Usunąć kanał?",
@@ -209,6 +210,7 @@
     "guest": "Gość",
     "items-per-page-option": "{ count } na stronę",
     "items-selected-count": "",
+    "keep-editing": "",
     "language": "Język",
     "launch-extension": "Uruchom rozszerzenie",
     "live-update": "Aktualizacja live",
@@ -682,4 +684,4 @@
     "job-result": "Rezultat zlecenia",
     "job-state": "Status zlecenia"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/pt_BR.json

@@ -66,6 +66,7 @@
     "auto-update-product-variant-name": "Atualizar automaticamente os nomes das variações do produto",
     "channel-price-preview": "Visualizar preço do canal",
     "collection-contents": "Conteúdo da categoria",
+    "confirm-cancel": "",
     "confirm-delete-administrator": "Excluir administrador?",
     "confirm-delete-assets": "Excluir {count} {count, plural, one {asset} other {assets}}?",
     "confirm-delete-channel": "Exluir canal?",
@@ -209,6 +210,7 @@
     "guest": "Convidado",
     "items-per-page-option": "{ count } por página",
     "items-selected-count": "",
+    "keep-editing": "",
     "language": "Idioma",
     "launch-extension": "Iniciar extensão",
     "live-update": "Atualização ao vivo",
@@ -682,4 +684,4 @@
     "job-result": "Resultado do trabalho",
     "job-state": "Estado do trabalho"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/pt_PT.json

@@ -66,6 +66,7 @@
     "auto-update-product-variant-name": "Actualizar automaticamente os nomes das variantes do produto",
     "channel-price-preview": "Visualizar preço do canal",
     "collection-contents": "Conteúdo da categoria",
+    "confirm-cancel": "",
     "confirm-delete-administrator": "Eliminar administrador?",
     "confirm-delete-assets": "Eliminar {count} {count, plural, one {imagem} other {imagens}}?",
     "confirm-delete-channel": "Exluir canal?",
@@ -209,6 +210,7 @@
     "guest": "Convidado",
     "items-per-page-option": "{ count } por página",
     "items-selected-count": "",
+    "keep-editing": "",
     "language": "Idioma",
     "launch-extension": "Iniciar extensão",
     "live-update": "Actualização em tempo real",
@@ -682,4 +684,4 @@
     "job-result": "Resultado do trabalho",
     "job-state": "Estado do trabalho"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/ru.json

@@ -66,6 +66,7 @@
     "auto-update-product-variant-name": "Автоматически обновлять названия вариантов товара",
     "channel-price-preview": "Предварительный просмотр цен канала",
     "collection-contents": "Содержание коллекции",
+    "confirm-cancel": "",
     "confirm-delete-administrator": "Удалить администратора?",
     "confirm-delete-assets": "Удалить {count} {count, plural, one {медиа-объект} other {медиа-объектов}}?",
     "confirm-delete-channel": "Удалить канал?",
@@ -209,6 +210,7 @@
     "guest": "Гость",
     "items-per-page-option": "{ count } на странице",
     "items-selected-count": "",
+    "keep-editing": "",
     "language": "Язык",
     "launch-extension": "Запуск расширения",
     "live-update": "Обновление в режиме реального времени",
@@ -682,4 +684,4 @@
     "job-result": "Результат задания",
     "job-state": "Состояние задания"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/uk.json

@@ -66,6 +66,7 @@
     "auto-update-product-variant-name": "Автоматично оновлювати назви варіантів товару",
     "channel-price-preview": "Попередній перегляд цін каналу",
     "collection-contents": "Зміст колекції",
+    "confirm-cancel": "",
     "confirm-delete-administrator": "Видалити адміністратора?",
     "confirm-delete-assets": "Видалити {count} {count, plural, one {медіа-об'єкт} other {медіа-об'єктів}}?",
     "confirm-delete-channel": "Видалити канал?",
@@ -209,6 +210,7 @@
     "guest": "Гість",
     "items-per-page-option": "{ count } на сторінці",
     "items-selected-count": "",
+    "keep-editing": "",
     "language": "Мова",
     "launch-extension": "Запуск розширення",
     "live-update": "Оновлення в режимі реального часу",
@@ -682,4 +684,4 @@
     "job-result": "Результат завдання",
     "job-state": "Стан завдання"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/zh_Hans.json

@@ -66,6 +66,7 @@
     "auto-update-product-variant-name": "自动更新不同商品变体名称",
     "channel-price-preview": "渠道价格预览",
     "collection-contents": "系列产品",
+    "confirm-cancel": "",
     "confirm-delete-administrator": "确认删除管理员吗?",
     "confirm-delete-assets": "确认删除{count}个资源吗？",
     "confirm-delete-channel": "确认删除销售渠道?",
@@ -209,6 +210,7 @@
     "guest": "游客",
     "items-per-page-option": "每页显示 { count } 条",
     "items-selected-count": "",
+    "keep-editing": "",
     "language": "语言",
     "launch-extension": "启动扩展插件",
     "live-update": "在线更新",
@@ -682,4 +684,4 @@
     "job-result": "任务结果",
     "job-state": "任务状态"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/zh_Hant.json

@@ -66,6 +66,7 @@
     "auto-update-product-variant-name": "",
     "channel-price-preview": "渠道價格覽",
     "collection-contents": "系列產品",
+    "confirm-cancel": "",
     "confirm-delete-administrator": "",
     "confirm-delete-assets": "",
     "confirm-delete-channel": "確認移除渠道?",
@@ -209,6 +210,7 @@
     "guest": "游客",
     "items-per-page-option": "每页顯示 { count } 條",
     "items-selected-count": "",
+    "keep-editing": "",
     "language": "語言",
     "launch-extension": "启動扩展插件",
     "live-update": "",
@@ -682,4 +684,4 @@
     "job-result": "",
     "job-state": ""
   }
-}
+}