feat(admin-ui): Implement custom fields on newly-supported entities

Relates to #1185
vendure-ecommerce · Nov 24, 2021 · 2da2ec9 · 2da2ec9
1 parent cd8b93d
commit 2da2ec9
Show file tree

Hide file tree

Showing 21 changed files with 589 additions and 99 deletions.
diff --git a/packages/admin-ui/src/lib/core/src/common/generated-types.ts b/packages/admin-ui/src/lib/core/src/common/generated-types.ts
diff --git a/packages/admin-ui/src/lib/core/src/data/definitions/customer-definitions.ts b/packages/admin-ui/src/lib/core/src/data/definitions/customer-definitions.ts
@@ -48,6 +48,15 @@ export const CUSTOMER_FRAGMENT = gql`
     ${ADDRESS_FRAGMENT}
 `;
 
+export const CUSTOMER_GROUP_FRAGMENT = gql`
+    fragment CustomerGroup on CustomerGroup {
+        id
+        createdAt
+        updatedAt
+        name
+    }
+`;
+
 export const GET_CUSTOMER_LIST = gql`
     query GetCustomerList($options: CustomerListOptions) {
         customers(options: $options) {
@@ -145,23 +154,19 @@ export const UPDATE_CUSTOMER_ADDRESS = gql`
 export const CREATE_CUSTOMER_GROUP = gql`
     mutation CreateCustomerGroup($input: CreateCustomerGroupInput!) {
         createCustomerGroup(input: $input) {
-            id
-            createdAt
-            updatedAt
-            name
+            ...CustomerGroup
         }
     }
+    ${CUSTOMER_GROUP_FRAGMENT}
 `;
 
 export const UPDATE_CUSTOMER_GROUP = gql`
     mutation UpdateCustomerGroup($input: UpdateCustomerGroupInput!) {
         updateCustomerGroup(input: $input) {
-            id
-            createdAt
-            updatedAt
-            name
+            ...CustomerGroup
         }
     }
+    ${CUSTOMER_GROUP_FRAGMENT}
 `;
 
 export const DELETE_CUSTOMER_GROUP = gql`
@@ -177,23 +182,18 @@ export const GET_CUSTOMER_GROUPS = gql`
     query GetCustomerGroups($options: CustomerGroupListOptions) {
         customerGroups(options: $options) {
             items {
-                id
-                createdAt
-                updatedAt
-                name
+                ...CustomerGroup
             }
             totalItems
         }
     }
+    ${CUSTOMER_GROUP_FRAGMENT}
 `;
 
 export const GET_CUSTOMER_GROUP_WITH_CUSTOMERS = gql`
     query GetCustomerGroupWithCustomers($id: ID!, $options: CustomerListOptions) {
         customerGroup(id: $id) {
-            id
-            createdAt
-            updatedAt
-            name
+            ...CustomerGroup
             customers(options: $options) {
                 items {
                     id
@@ -207,28 +207,25 @@ export const GET_CUSTOMER_GROUP_WITH_CUSTOMERS = gql`
             }
         }
     }
+    ${CUSTOMER_GROUP_FRAGMENT}
 `;
 
 export const ADD_CUSTOMERS_TO_GROUP = gql`
     mutation AddCustomersToGroup($groupId: ID!, $customerIds: [ID!]!) {
         addCustomersToGroup(customerGroupId: $groupId, customerIds: $customerIds) {
-            id
-            createdAt
-            updatedAt
-            name
+            ...CustomerGroup
         }
     }
+    ${CUSTOMER_GROUP_FRAGMENT}
 `;
 
 export const REMOVE_CUSTOMERS_FROM_GROUP = gql`
     mutation RemoveCustomersFromGroup($groupId: ID!, $customerIds: [ID!]!) {
         removeCustomersFromGroup(customerGroupId: $groupId, customerIds: $customerIds) {
-            id
-            createdAt
-            updatedAt
-            name
+            ...CustomerGroup
         }
     }
+    ${CUSTOMER_GROUP_FRAGMENT}
 `;
 
 export const GET_CUSTOMER_HISTORY = gql`

diff --git a/packages/admin-ui/src/lib/core/src/data/definitions/settings-definitions.ts b/packages/admin-ui/src/lib/core/src/data/definitions/settings-definitions.ts
@@ -88,6 +88,8 @@ export const DELETE_COUNTRY = gql`
 export const ZONE_FRAGMENT = gql`
     fragment Zone on Zone {
         id
+        createdAt
+        updatedAt
         name
         members {
             ...Country
@@ -99,10 +101,7 @@ export const ZONE_FRAGMENT = gql`
 export const GET_ZONES = gql`
     query GetZones {
         zones {
-            id
-            createdAt
-            updatedAt
-            name
+            ...Zone
             members {
                 createdAt
                 updatedAt
@@ -113,6 +112,7 @@ export const GET_ZONES = gql`
             }
         }
     }
+    ${ZONE_FRAGMENT}
 `;
 
 export const GET_ZONE = gql`
@@ -647,9 +647,15 @@ export const GET_SERVER_CONFIG = gql`
                     Collection {
                         ...CustomFields
                     }
+                    Country {
+                        ...CustomFields
+                    }
                     Customer {
                         ...CustomFields
                     }
+                    CustomerGroup {
+                        ...CustomFields
+                    }
                     Facet {
                         ...CustomFields
                     }
@@ -668,6 +674,9 @@ export const GET_SERVER_CONFIG = gql`
                     OrderLine {
                         ...CustomFields
                     }
+                    PaymentMethod {
+                        ...CustomFields
+                    }
                     Product {
                         ...CustomFields
                     }
@@ -680,12 +689,24 @@ export const GET_SERVER_CONFIG = gql`
                     ProductVariant {
                         ...CustomFields
                     }
+                    Promotion {
+                        ...CustomFields
+                    }
                     ShippingMethod {
                         ...CustomFields
                     }
+                    TaxCategory {
+                        ...CustomFields
+                    }
+                    TaxRate {
+                        ...CustomFields
+                    }
                     User {
                         ...CustomFields
                     }
+                    Zone {
+                        ...CustomFields
+                    }
                 }
             }
         }

diff --git a/packages/admin-ui/src/lib/core/src/data/providers/settings-data.service.ts b/packages/admin-ui/src/lib/core/src/data/providers/settings-data.service.ts
@@ -131,13 +131,13 @@ export class SettingsDataService {
 
     createCountry(input: CreateCountryInput) {
         return this.baseDataService.mutate<CreateCountry.Mutation, CreateCountry.Variables>(CREATE_COUNTRY, {
-            input: pick(input, ['code', 'enabled', 'translations']),
+            input: pick(input, ['code', 'enabled', 'translations', 'customFields']),
         });
     }
 
     updateCountry(input: UpdateCountryInput) {
         return this.baseDataService.mutate<UpdateCountry.Mutation, UpdateCountry.Variables>(UPDATE_COUNTRY, {
-            input: pick(input, ['id', 'code', 'enabled', 'translations']),
+            input: pick(input, ['id', 'code', 'enabled', 'translations', 'customFields']),
         });
     }
 

diff --git a/...r/src/components/customer-group-detail-dialog/customer-group-detail-dialog.component.html b/...r/src/components/customer-group-detail-dialog/customer-group-detail-dialog.component.html
@@ -2,11 +2,27 @@
     <span *ngIf="group.id">{{ 'customer.update-customer-group' | translate }}</span>
     <span *ngIf="!group.id">{{ 'customer.create-customer-group' | translate }}</span>
 </ng-template>
-
-<vdr-form-field [label]="'common.name' | translate" for="name">
-    <input id="name" type="text" [(ngModel)]="group.name" [readonly]="!(['CreateCustomerGroup', 'UpdateCustomerGroup'] | hasPermission)" />
-</vdr-form-field>
-
+<form [formGroup]="form">
+    <vdr-form-field [label]="'common.name' | translate" for="name">
+        <input
+            id="name"
+            type="text"
+            formControlName="name"
+            [readonly]="!(['CreateCustomerGroup', 'UpdateCustomerGroup'] | hasPermission)"
+        />
+    </vdr-form-field>
+    <section formGroupName="customFields" *ngIf="customFields.length">
+        <label>{{ 'common.custom-fields' | translate }}</label>
+        <ng-container *ngFor="let customField of customFields">
+            <vdr-custom-field-control
+                *ngIf="customField.name"
+                entityName="CustomerGroup"
+                [customFieldsFormGroup]="form.get(['customFields'])"
+                [customField]="customField"
+            ></vdr-custom-field-control>
+        </ng-container>
+    </section>
+</form>
 <ng-template vdrDialogButtons>
     <button type="button" class="btn" (click)="cancel()">{{ 'common.cancel' | translate }}</button>
     <button type="submit" (click)="save()" [disabled]="!group.name" class="btn btn-primary">

diff --git a/...mer/src/components/customer-group-detail-dialog/customer-group-detail-dialog.component.ts b/...mer/src/components/customer-group-detail-dialog/customer-group-detail-dialog.component.ts
@@ -1,21 +1,55 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { Dialog } from '@vendure/admin-ui/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import {
+    CreateCustomerGroupInput,
+    CustomFieldConfig,
+    Dialog,
+    ServerConfigService,
+    UpdateCustomerGroupInput,
+} from '@vendure/admin-ui/core';
 
 @Component({
     selector: 'vdr-customer-group-detail-dialog',
     templateUrl: './customer-group-detail-dialog.component.html',
     styleUrls: ['./customer-group-detail-dialog.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CustomerGroupDetailDialogComponent implements Dialog<string> {
-    group: { id?: string; name: string };
-    resolveWith: (result?: string) => void;
+export class CustomerGroupDetailDialogComponent implements Dialog<CreateCustomerGroupInput>, OnInit {
+    group: { id?: string; name: string; customFields?: { [name: string]: any } };
+    resolveWith: (result?: CreateCustomerGroupInput) => void;
+    customFields: CustomFieldConfig[];
+    form: FormGroup;
+
+    constructor(private serverConfigService: ServerConfigService, private formBuilder: FormBuilder) {
+        this.customFields = this.serverConfigService.getCustomFieldsFor('CustomerGroup');
+    }
+
+    ngOnInit() {
+        this.form = this.formBuilder.group({
+            name: [this.group.name, Validators.required],
+            customFields: this.formBuilder.group(
+                this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {}),
+            ),
+        });
+        if (this.customFields.length) {
+            const customFieldsGroup = this.form.get('customFields') as FormGroup;
+
+            for (const fieldDef of this.customFields) {
+                const key = fieldDef.name;
+                const value = this.group.customFields?.[key];
+                const control = customFieldsGroup.get(key);
+                if (control) {
+                    control.patchValue(value);
+                }
+            }
+        }
+    }
 
     cancel() {
         this.resolveWith();
     }
 
     save() {
-        this.resolveWith(this.group.name);
+        this.resolveWith(this.form.value);
     }
 }