feat(admin-ui): Add support for tabbed custom fields

Relates to #724
vendure-ecommerce · Nov 26, 2021 · b6cb16f · b6cb16f
1 parent cee9809
commit b6cb16f
Show file tree

Hide file tree

Showing 57 changed files with 294 additions and 274 deletions.
diff --git a/packages/admin-ui/i18n-coverage.json b/packages/admin-ui/i18n-coverage.json
@@ -1,69 +1,69 @@
 {
-  "generatedOn": "2021-10-07T12:23:24.068Z",
-  "lastCommit": "0eadedef0bfaacd2838befc67f75c14a5e7a6606",
+  "generatedOn": "2021-11-26T11:42:42.094Z",
+  "lastCommit": "cee98091eeb0fedc5b5269bdee8a8b237f0c7c8e",
   "translationStatus": {
     "cs": {
-      "tokenCount": 627,
+      "tokenCount": 628,
       "translatedCount": 591,
       "percentage": 94
     },
     "de": {
-      "tokenCount": 627,
+      "tokenCount": 628,
       "translatedCount": 570,
       "percentage": 91
     },
     "en": {
-      "tokenCount": 627,
-      "translatedCount": 626,
+      "tokenCount": 628,
+      "translatedCount": 627,
       "percentage": 100
     },
     "es": {
-      "tokenCount": 627,
+      "tokenCount": 628,
       "translatedCount": 623,
       "percentage": 99
     },
     "fr": {
-      "tokenCount": 627,
+      "tokenCount": 628,
       "translatedCount": 613,
       "percentage": 98
     },
     "it": {
-      "tokenCount": 627,
+      "tokenCount": 628,
       "translatedCount": 621,
       "percentage": 99
     },
     "pl": {
-      "tokenCount": 627,
+      "tokenCount": 628,
       "translatedCount": 405,
-      "percentage": 65
+      "percentage": 64
     },
     "pt_BR": {
-      "tokenCount": 627,
+      "tokenCount": 628,
       "translatedCount": 588,
       "percentage": 94
     },
     "pt_PT": {
-      "tokenCount": 627,
+      "tokenCount": 628,
       "translatedCount": 622,
       "percentage": 99
     },
     "ru": {
-      "tokenCount": 627,
+      "tokenCount": 628,
       "translatedCount": 621,
       "percentage": 99
     },
     "uk": {
-      "tokenCount": 627,
+      "tokenCount": 628,
       "translatedCount": 621,
       "percentage": 99
     },
     "zh_Hans": {
-      "tokenCount": 627,
+      "tokenCount": 628,
       "translatedCount": 558,
       "percentage": 89
     },
     "zh_Hant": {
-      "tokenCount": 627,
+      "tokenCount": 628,
       "translatedCount": 385,
       "percentage": 61
     }

diff --git a/...dmin-ui/src/lib/catalog/src/components/collection-detail/collection-detail.component.html b/...dmin-ui/src/lib/catalog/src/components/collection-detail/collection-detail.component.html
@@ -79,14 +79,12 @@
 
             <section formGroupName="customFields" *ngIf="customFields.length">
                 <label>{{ 'common.custom-fields' | translate }}</label>
-                <ng-container *ngFor="let customField of customFields">
-                    <vdr-custom-field-control
-                        *ngIf="customFieldIsSet(customField.name)"
-                        entityName="Collection"
-                        [customFieldsFormGroup]="detailForm.get(['customFields'])"
-                        [customField]="customField"
-                    ></vdr-custom-field-control>
-                </ng-container>
+                <vdr-tabbed-custom-fields
+                    entityName="Collection"
+                    [customFields]="customFields"
+                    [customFieldsFormGroup]="detailForm.get(['customFields'])"
+                    [readonly]="!(updatePermission | hasPermission)"
+                ></vdr-tabbed-custom-fields>
             </section>
         </div>
         <div class="clr-col-md-auto">

diff --git a/.../admin-ui/src/lib/catalog/src/components/collection-detail/collection-detail.component.ts b/.../admin-ui/src/lib/catalog/src/components/collection-detail/collection-detail.component.ts
@@ -94,10 +94,6 @@ export class CollectionDetailComponent
         return this.allFilters.find(f => f.code === filter.code);
     }
 
-    customFieldIsSet(name: string): boolean {
-        return !!this.detailForm.get(['customFields', name]);
-    }
-
     assetsChanged(): boolean {
         return !!Object.values(this.assetChanges).length;
     }

diff --git a/packages/admin-ui/src/lib/catalog/src/components/facet-detail/facet-detail.component.html b/packages/admin-ui/src/lib/catalog/src/components/facet-detail/facet-detail.component.html
@@ -73,14 +73,12 @@
 
         <section formGroupName="customFields" *ngIf="customFields.length">
             <label>{{ 'common.custom-fields' | translate }}</label>
-            <ng-container *ngFor="let customField of customFields">
-                <vdr-custom-field-control
-                    *ngIf="customFieldIsSet(customField.name)"
-                    entityName="Facet"
-                    [customFieldsFormGroup]="detailForm.get(['facet', 'customFields'])"
-                    [customField]="customField"
-                ></vdr-custom-field-control>
-            </ng-container>
+            <vdr-tabbed-custom-fields
+                entityName="Facet"
+                [customFields]="customFields"
+                [customFieldsFormGroup]="detailForm.get(['facet', 'customFields'])"
+                [readonly]="!(updatePermission | hasPermission)"
+            ></vdr-tabbed-custom-fields>
         </section>
     </section>
 
@@ -93,8 +91,8 @@
                     <th></th>
                     <th>{{ 'common.name' | translate }}</th>
                     <th>{{ 'common.code' | translate }}</th>
-                    <ng-container *ngFor="let customField of customValueFields">
-                        <th>{{ customField.name }}</th>
+                    <ng-container *ngIf="customValueFields.length">
+                        <th>{{ 'common.custom-fields' | translate }}</th>
                     </ng-container>
                     <th></th>
                 </tr>
@@ -117,17 +115,26 @@
                         />
                     </td>
                     <td class="align-middle"><input type="text" formControlName="code" readonly /></td>
-                    <ng-container *ngFor="let customField of customValueFields">
-                        <td class="align-middle">
-                            <vdr-custom-field-control
-                                *ngIf="customValueFieldIsSet(i, customField.name)"
-                                entityName="FacetValue"
-                                [showLabel]="false"
-                                [customFieldsFormGroup]="detailForm.get(['values', i, 'customFields'])"
-                                [customField]="customField"
-                            ></vdr-custom-field-control>
-                        </td>
-                    </ng-container>
+                    <td class="" *ngIf="customValueFields.length">
+<!--                    <ng-container *ngFor="let customField of customValueFields">-->
+<!--                       -->
+<!--                            <vdr-custom-field-control-->
+<!--                                *ngIf="customValueFieldIsSet(i, customField.name)"-->
+<!--                                entityName="FacetValue"-->
+<!--                                [showLabel]="false"-->
+<!--                                [customFieldsFormGroup]="detailForm.get(['values', i, 'customFields'])"-->
+<!--                                [customField]="customField"-->
+<!--                            ></vdr-custom-field-control>-->
+<!--                      -->
+<!--                    </ng-container>-->
+                        <vdr-tabbed-custom-fields
+                            entityName="FacetValue"
+                            [customFields]="customFields"
+                            [compact]="true"
+                            [customFieldsFormGroup]="detailForm.get(['values', i, 'customFields'])"
+                            [readonly]="!(updatePermission | hasPermission)"
+                        ></vdr-tabbed-custom-fields>
+                    </td>
                     <td class="align-middle">
                         <vdr-dropdown>
                             <button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger>

diff --git a/packages/admin-ui/src/lib/catalog/src/components/facet-detail/facet-detail.component.ts b/packages/admin-ui/src/lib/catalog/src/components/facet-detail/facet-detail.component.ts
@@ -93,10 +93,6 @@ export class FacetDetailComponent
         }
     }
 
-    customFieldIsSet(name: string): boolean {
-        return !!this.detailForm.get(['facet', 'customFields', name]);
-    }
-
     customValueFieldIsSet(index: number, name: string): boolean {
         return !!this.detailForm.get(['values', index, 'customFields', name]);
     }

diff --git a/...ages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.html b/...ages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.html
@@ -130,15 +130,12 @@
 
                             <section formGroupName="customFields" *ngIf="customFields.length">
                                 <label>{{ 'common.custom-fields' | translate }}</label>
-                                <ng-container *ngFor="let customField of customFields">
-                                    <vdr-custom-field-control
-                                        *ngIf="customFieldIsSet(customField.name)"
-                                        entityName="Product"
-                                        [customFieldsFormGroup]="detailForm.get(['product', 'customFields'])"
-                                        [customField]="customField"
-                                        [readonly]="!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)"
-                                    ></vdr-custom-field-control>
-                                </ng-container>
+                                <vdr-tabbed-custom-fields
+                                    entityName="Product"
+                                    [customFields]="customFields"
+                                    [customFieldsFormGroup]="detailForm.get(['product', 'customFields'])"
+                                    [readonly]="!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)"
+                                ></vdr-tabbed-custom-fields>
                             </section>
 
                             <div class="facets">

diff --git a/packages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.ts b/packages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.ts
@@ -366,10 +366,6 @@ export class ProductDetailComponent
             );
     }
 
-    customFieldIsSet(name: string): boolean {
-        return !!this.detailForm.get(['product', 'customFields', name]);
-    }
-
     assetsChanged(): boolean {
         return !!Object.values(this.assetChanges).length;
     }

diff --git a/...src/lib/catalog/src/components/product-variants-list/product-variants-list.component.html b/...src/lib/catalog/src/components/product-variants-list/product-variants-list.component.html
@@ -1,7 +1,11 @@
 <div class="variants-list">
     <div
         class="variant-container card"
-        *ngFor="let variant of variants | paginate: paginationConfig || { itemsPerPage: 10, currentPage: 1 }; trackBy: trackById; let i = index"
+        *ngFor="
+            let variant of variants | paginate: paginationConfig || { itemsPerPage: 10, currentPage: 1 };
+            trackBy: trackById;
+            let i = index
+        "
         [class.disabled]="!formGroupMap.get(variant.id)?.get('enabled')?.value"
     >
         <ng-container *ngIf="formGroupMap.get(variant.id) as formGroup" [formGroup]="formGroup">
@@ -43,7 +47,9 @@
                         <vdr-product-assets
                             [compact]="true"
                             [assets]="pendingAssetChanges[variant.id]?.assets || variant.assets"
-                            [featuredAsset]="pendingAssetChanges[variant.id]?.featuredAsset || variant.featuredAsset"
+                            [featuredAsset]="
+                                pendingAssetChanges[variant.id]?.featuredAsset || variant.featuredAsset
+                            "
                             (change)="onAssetChange(variant.id, $event)"
                         ></vdr-product-assets>
                     </div>
@@ -209,17 +215,13 @@
                         <div class="custom-fields">
                             <div class="variant-form-input-row">
                                 <section formGroupName="customFields" *ngIf="customFields.length">
-                                    <!--<label>{{ 'common.custom-fields' | translate }}</label>-->
-                                    <ng-container *ngFor="let customField of customFields">
-                                        <vdr-custom-field-control
-                                            *ngIf="formGroup.get(['customFields', customField.name])"
-                                            entityName="ProductVariant"
-                                            [compact]="true"
-                                            [customFieldsFormGroup]="formGroup.get('customFields')"
-                                            [readonly]="!(updatePermission | hasPermission)"
-                                            [customField]="customField"
-                                        ></vdr-custom-field-control>
-                                    </ng-container>
+                                    <vdr-tabbed-custom-fields
+                                        entityName="ProductVariant"
+                                        [customFields]="customFields"
+                                        [compact]="true"
+                                        [customFieldsFormGroup]="formGroup.get('customFields')"
+                                        [readonly]="!(updatePermission | hasPermission)"
+                                    ></vdr-tabbed-custom-fields>
                                 </section>
                             </div>
                         </div>
@@ -241,7 +243,9 @@
                                 <span class="option-group-name">{{ optionGroupName(option.groupId) }}</span>
                                 {{ optionName(option) }}
                             </vdr-chip>
-                            <a [routerLink]="['./', 'options']" class="btn btn-link btn-sm">{{ 'catalog.edit-options' | translate }}...</a>
+                            <a [routerLink]="['./', 'options']" class="btn btn-link btn-sm"
+                                >{{ 'catalog.edit-options' | translate }}...</a
+                            >
                         </div>
                     </div>
                     <div class="flex-spacer"></div>

diff --git a/...g/src/components/update-product-option-dialog/update-product-option-dialog.component.html b/...g/src/components/update-product-option-dialog/update-product-option-dialog.component.html
@@ -18,15 +18,12 @@
 </clr-checkbox-wrapper>
 <section *ngIf="customFields.length">
     <label>{{ 'common.custom-fields' | translate }}</label>
-    <ng-container *ngFor="let customField of customFields">
-        <vdr-custom-field-control
-            *ngIf="customFieldsForm.get(customField.name)"
-            entityName="ProductOption"
-            [customFieldsFormGroup]="customFieldsForm"
-            [customField]="customField"
-            [readonly]="!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)"
-        ></vdr-custom-field-control>
-    </ng-container>
+    <vdr-tabbed-custom-fields
+        entityName="ProductOption"
+        [customFields]="customFields"
+        [customFieldsFormGroup]="customFieldsForm"
+        [readonly]="!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)"
+    ></vdr-tabbed-custom-fields>
 </section>
 
 <ng-template vdrDialogButtons>

diff --git a/...ages/admin-ui/src/lib/core/src/shared/components/address-form/address-form.component.html b/...ages/admin-ui/src/lib/core/src/shared/components/address-form/address-form.component.html
@@ -1,42 +1,42 @@
 <form [formGroup]="formGroup">
     <clr-input-container>
         <label>{{ 'customer.full-name' | translate }}</label>
-        <input formControlName="fullName" type="text" clrInput />
+        <input formControlName="fullName" type="text" clrInput/>
     </clr-input-container>
 
     <div class="clr-row">
         <div class="clr-col-md-4">
             <clr-input-container>
                 <label>{{ 'customer.street-line-1' | translate }}</label>
-                <input formControlName="streetLine1" type="text" clrInput />
+                <input formControlName="streetLine1" type="text" clrInput/>
             </clr-input-container>
         </div>
         <div class="clr-col-md-4">
             <clr-input-container>
                 <label>{{ 'customer.street-line-2' | translate }}</label>
-                <input formControlName="streetLine2" type="text" clrInput />
+                <input formControlName="streetLine2" type="text" clrInput/>
             </clr-input-container>
         </div>
     </div>
     <div class="clr-row">
         <div class="clr-col-md-4">
             <clr-input-container>
                 <label>{{ 'customer.city' | translate }}</label>
-                <input formControlName="city" type="text" clrInput />
+                <input formControlName="city" type="text" clrInput/>
             </clr-input-container>
         </div>
         <div class="clr-col-md-4">
             <clr-input-container>
                 <label>{{ 'customer.province' | translate }}</label>
-                <input formControlName="province" type="text" clrInput />
+                <input formControlName="province" type="text" clrInput/>
             </clr-input-container>
         </div>
     </div>
     <div class="clr-row">
         <div class="clr-col-md-4">
             <clr-input-container>
                 <label>{{ 'customer.postal-code' | translate }}</label>
-                <input formControlName="postalCode" type="text" clrInput />
+                <input formControlName="postalCode" type="text" clrInput/>
             </clr-input-container>
         </div>
         <div class="clr-col-md-4">
@@ -52,16 +52,14 @@
     </div>
     <clr-input-container>
         <label>{{ 'customer.phone-number' | translate }}</label>
-        <input formControlName="phoneNumber" type="text" clrInput />
+        <input formControlName="phoneNumber" type="text" clrInput/>
     </clr-input-container>
     <section formGroupName="customFields" *ngIf="formGroup.get('customFields') as customFieldsGroup">
         <label>{{ 'common.custom-fields' | translate }}</label>
-        <ng-container *ngFor="let customField of customFields">
-            <vdr-custom-field-control
-                entityName="Address"
-                [customFieldsFormGroup]="customFieldsGroup"
-                [customField]="customField"
-            ></vdr-custom-field-control>
-        </ng-container>
+        <vdr-tabbed-custom-fields
+            entityName="Address"
+            [customFields]="customFields"
+            [customFieldsFormGroup]="customFieldsGroup"
+        ></vdr-tabbed-custom-fields>
     </section>
 </form>