feat(core): Implement customer group form input

Relates to #400

packages/admin-ui/src/lib/core/src/public_api.ts

@@ -131,6 +131,7 @@ export * from './shared/components/modal-dialog/modal-dialog.component';
 export * from './shared/components/object-tree/object-tree.component';
 export * from './shared/components/order-state-label/order-state-label.component';
 export * from './shared/components/pagination-controls/pagination-controls.component';
+export * from './shared/components/product-selector/product-selector.component';
 export * from './shared/components/rich-text-editor/external-image-dialog/external-image-dialog.component';
 export * from './shared/components/rich-text-editor/link-dialog/link-dialog.component';
 export * from './shared/components/rich-text-editor/prosemirror/inputrules';
@@ -156,10 +157,12 @@ export * from './shared/directives/if-multichannel.directive';
 export * from './shared/directives/if-permissions.directive';
 export * from './shared/dynamic-form-inputs/boolean-form-input/boolean-form-input.component';
 export * from './shared/dynamic-form-inputs/currency-form-input/currency-form-input.component';
+export * from './shared/dynamic-form-inputs/customer-group-form-input/customer-group-form-input.component';
 export * from './shared/dynamic-form-inputs/date-form-input/date-form-input.component';
 export * from './shared/dynamic-form-inputs/dynamic-form-input/dynamic-form-input.component';
 export * from './shared/dynamic-form-inputs/facet-value-form-input/facet-value-form-input.component';
 export * from './shared/dynamic-form-inputs/number-form-input/number-form-input.component';
+export * from './shared/dynamic-form-inputs/product-selector-form-input/product-selector-form-input.component';
 export * from './shared/dynamic-form-inputs/register-dynamic-input-components';
 export * from './shared/dynamic-form-inputs/select-form-input/select-form-input.component';
 export * from './shared/dynamic-form-inputs/text-form-input/text-form-input.component';

packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/customer-group-form-input/customer-group-form-input.component.html

@@ -0,0 +1,18 @@
+<ng-select
+    [items]="customerGroups$ | async"
+    appendTo="body"
+    [addTag]="false"
+    [multiple]="false"
+    bindValue="id"
+    [clearable]="true"
+    [searchable]="false"
+    [ngModel]="formControl.value"
+    (change)="selectGroup($event)"
+>
+    <ng-template ng-label-tmp let-item="item" let-clear="clear">
+        <vdr-chip [colorFrom]="item.id">{{ item.name }}</vdr-chip>
+    </ng-template>
+    <ng-template ng-option-tmp let-item="item">
+        <vdr-chip [colorFrom]="item.id">{{ item.name }}</vdr-chip>
+    </ng-template>
+</ng-select>

packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/customer-group-form-input/customer-group-form-input.component.ts

@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { DefaultFormComponentConfig, DefaultFormComponentId } from '@vendure/common/lib/shared-types';
+import { Observable } from 'rxjs';
+import { startWith } from 'rxjs/operators';
+
+import { FormInputComponent } from '../../../common/component-registry-types';
+import { GetCustomerGroups } from '../../../common/generated-types';
+import { DataService } from '../../../data/providers/data.service';
+
+@Component({
+    selector: 'vdr-customer-group-form-input',
+    templateUrl: './customer-group-form-input.component.html',
+    styleUrls: ['./customer-group-form-input.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CustomerGroupFormInputComponent implements FormInputComponent, OnInit {
+    static readonly id: DefaultFormComponentId = 'customer-group-form-input';
+    @Input() readonly: boolean;
+    formControl: FormControl;
+    customerGroups$: Observable<GetCustomerGroups.Items[]>;
+    config: DefaultFormComponentConfig<'customer-group-form-input'>;
+
+    constructor(private dataService: DataService) {}
+
+    ngOnInit() {
+        this.customerGroups$ = this.dataService.customer
+            .getCustomerGroupList({
+                take: 9999,
+            })
+            .mapSingle(res => res.customerGroups.items)
+            .pipe(startWith([]));
+    }
+
+    selectGroup(group: GetCustomerGroups.Items) {
+        this.formControl.setValue(group.id);
+    }
+}

packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/register-dynamic-input-components.ts

@@ -10,6 +10,7 @@ import {
 
 import { BooleanFormInputComponent } from './boolean-form-input/boolean-form-input.component';
 import { CurrencyFormInputComponent } from './currency-form-input/currency-form-input.component';
+import { CustomerGroupFormInputComponent } from './customer-group-form-input/customer-group-form-input.component';
 import { DateFormInputComponent } from './date-form-input/date-form-input.component';
 import { FacetValueFormInputComponent } from './facet-value-form-input/facet-value-form-input.component';
 import { NumberFormInputComponent } from './number-form-input/number-form-input.component';
@@ -26,6 +27,7 @@ export const defaultFormInputs = [
     SelectFormInputComponent,
     TextFormInputComponent,
     ProductSelectorFormInputComponent,
+    CustomerGroupFormInputComponent,
 ];
 
 /**

packages/admin-ui/src/lib/core/src/shared/shared.module.ts

@@ -78,6 +78,7 @@ import { IfMultichannelDirective } from './directives/if-multichannel.directive'
 import { IfPermissionsDirective } from './directives/if-permissions.directive';
 import { BooleanFormInputComponent } from './dynamic-form-inputs/boolean-form-input/boolean-form-input.component';
 import { CurrencyFormInputComponent } from './dynamic-form-inputs/currency-form-input/currency-form-input.component';
+import { CustomerGroupFormInputComponent } from './dynamic-form-inputs/customer-group-form-input/customer-group-form-input.component';
 import { DateFormInputComponent } from './dynamic-form-inputs/date-form-input/date-form-input.component';
 import { DynamicFormInputComponent } from './dynamic-form-inputs/dynamic-form-input/dynamic-form-input.component';
 import { FacetValueFormInputComponent } from './dynamic-form-inputs/facet-value-form-input/facet-value-form-input.component';
@@ -202,7 +203,7 @@ const DYNAMIC_FORM_INPUTS = [
 @NgModule({
     imports: [IMPORTS],
     exports: [...IMPORTS, ...DECLARATIONS, ...DYNAMIC_FORM_INPUTS],
-    declarations: [...DECLARATIONS, ...DYNAMIC_FORM_INPUTS],
+    declarations: [...DECLARATIONS, ...DYNAMIC_FORM_INPUTS, CustomerGroupFormInputComponent],
     providers: [
         // This needs to be shared, since lazy-loaded
         // modules have their own entryComponents which