Customer Data, Address, Payer Add/Update

Co-authored-by: n.righi@paragon-data.de <n.righi@paragon-data.de>

Dockerfile

@@ -1,5 +1,5 @@
 #stage 1
-FROM node:12-stretch as node
+FROM node:14-basta as node
 ARG IS_PRODUCTION=false
 ARG SEMVERSION=1.0.0
 WORKDIR /app

angular.json

@@ -1536,6 +1536,46 @@
           }
         }
       }
+    },
+    "@ui/radio": {
+      "projectType": "library",
+      "root": "apps/ui/radio",
+      "sourceRoot": "apps/ui/radio/src",
+      "prefix": "ui",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "tsConfig": "apps/ui/radio/tsconfig.lib.json",
+            "project": "apps/ui/radio/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "apps/ui/radio/tsconfig.lib.prod.json"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "apps/ui/radio/src/test.ts",
+            "tsConfig": "apps/ui/radio/tsconfig.spec.json",
+            "karmaConfig": "apps/ui/radio/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "apps/ui/radio/tsconfig.lib.json",
+              "apps/ui/radio/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
     }
   },
   "defaultProject": "sales"

apps/core/application/src/lib/process.service.ts

@@ -4,9 +4,7 @@ import { Injectable } from '@angular/core';
 export class ProcessService {
   constructor() {}
 
-  addData(processId: string, key: string, data: any) {}
-
-  updateData(processId: string, key: string, data: any) {}
+  setData(processId: string, key: string, data: any) {}
 
   removeData(processId: string, key: string) {}
 

apps/domain/crm/src/lib/crm-customer.service.spec.ts

@@ -1,13 +1,14 @@
 import { TestBed } from '@angular/core/testing';
 import { CrmCustomerService } from '@domain/crm';
 import { Result } from '@domain/defs';
-import { AutocompleteDTO, CustomerInfoDTO, CustomerService, InputDTO, InputOptionsDTO } from '@swagger/crm';
+import { AutocompleteDTO, CustomerInfoDTO, CustomerService, InputDTO, InputOptionsDTO, PayerService } from '@swagger/crm';
 import { of } from 'rxjs';
 import { take } from 'rxjs/operators';
 
 describe('CrmCustomerService', () => {
   let service: CrmCustomerService;
   let customerService: jasmine.SpyObj<CustomerService>;
+  let payerService: jasmine.SpyObj<PayerService>;
 
   const testQueryString = 'Unit Test';
 
@@ -22,11 +23,16 @@ describe('CrmCustomerService', () => {
             'CustomerQueryCustomerFilter',
           ]),
         },
+        {
+          provide: PayerService,
+          useValue: jasmine.createSpyObj('payerService', ['PayerCreatePayer', 'PayerUpdatePayer', 'PayerGetPayer']),
+        },
       ],
     });
 
-    service = TestBed.get(CrmCustomerService);
-    customerService = TestBed.get(CustomerService);
+    service = TestBed.inject(CrmCustomerService);
+    customerService = TestBed.inject(CustomerService) as any;
+    payerService = TestBed.inject(PayerService) as any;
   });
 
   it('should be created', () => {
@@ -63,6 +69,7 @@ describe('CrmCustomerService', () => {
         input: { qs: testQueryString },
         take: 20,
         skip: 0,
+        filter: {},
       });
       expect(result).toEqual(mockResponse);
     });
@@ -79,6 +86,7 @@ describe('CrmCustomerService', () => {
         input: { qs: testQueryString },
         take: takeTest,
         skip: skipTest,
+        filter: {},
       });
       expect(result).toEqual(mockResponse);
     });

apps/domain/crm/src/lib/crm-customer.service.ts

@@ -24,7 +24,7 @@ export class CrmCustomerService {
   complete(queryString: string, filter?: StringDictionary<string>): Observable<Result<AutocompleteDTO[]>> {
     return this.customerService.CustomerCustomerAutocomplete({
       input: queryString,
-      filter,
+      filter: filter || {},
       take: 5,
     });
   }
@@ -37,7 +37,7 @@ export class CrmCustomerService {
       input: !!queryString ? { qs: queryString } : undefined,
       take: options.take,
       skip: options.skip,
-      filter: options.filter,
+      filter: options.filter || {},
     });
   }
 
@@ -101,7 +101,7 @@ export class CrmCustomerService {
     return this.customerService.CustomerEmailExists(email);
   }
 
-  createPayer(customerId: number, payer: PayerDTO, isDefault: boolean = false): Observable<[Result<PayerDTO>, Result<AssignedPayerDTO>]> {
+  createPayer(customerId: number, payer: PayerDTO, isDefault?: boolean): Observable<[Result<PayerDTO>, Result<AssignedPayerDTO>]> {
     return this.getCustomer(customerId).pipe(
       mergeMap((customerResponse) =>
         this.payerService
@@ -119,34 +119,57 @@ export class CrmCustomerService {
     );
   }
 
-  updatePayer(payerId: number, payer: PayerDTO): Observable<Result<PayerDTO>> {
-    return this.payerService.PayerUpdatePayer({ payerId, payer });
+  updatePayer(customerId: number, payerId: number, payer: PayerDTO, isDefault?: boolean): Observable<Result<PayerDTO>> {
+    return this.payerService
+      .PayerUpdatePayer({ payerId, payer })
+      .pipe(mergeMap((response) => this.setDefaultPayer(payerId, customerId, isDefault).pipe(map(() => response))));
   }
 
   getAssignedPayers(customerId: number): Observable<Result<AssignedPayerDTO[]>> {
     return this.customerService.CustomerGetAssignedPayersByCustomerId(customerId);
   }
 
-  setDefaultPayer(payerId: number, customerId: number): Observable<Result<AssignedPayerDTO>> {
-    return this.customerService.CustomerModifyPayerReference({ payerId, customerId, isDefault: true });
+  setDefaultPayer(payerId: number, customerId: number, isDefault = true): Observable<Result<AssignedPayerDTO>> {
+    return this.customerService.CustomerModifyPayerReference({ payerId, customerId, isDefault });
   }
 
-  createShippingAddress(customerId: number, shippingAddress: ShippingAddressDTO): Observable<Result<ShippingAddressDTO>> {
-    return this.customerService.CustomerCreateShippingAddress({ customerId, shippingAddress });
+  createShippingAddress(
+    customerId: number,
+    shippingAddress: ShippingAddressDTO,
+    isDefault?: boolean
+  ): Observable<Result<ShippingAddressDTO>> {
+    const data: ShippingAddressDTO = { ...shippingAddress };
+    if (isDefault) {
+      data.isDefault = new Date().toJSON();
+    }
+    return this.customerService.CustomerCreateShippingAddress({ customerId, shippingAddress: data });
   }
 
   updateShippingAddress(
     customerId: number,
     shippingAddressId: number,
-    shippingAddress: ShippingAddressDTO
+    shippingAddress: ShippingAddressDTO,
+    isDefault?: boolean
   ): Observable<Result<ShippingAddressDTO>> {
-    return this.customerService.CustomerUpdateShippingAddress({ shippingAddressId, shippingAddress, customerId });
+    const data: ShippingAddressDTO = { ...shippingAddress };
+
+    if (isDefault) {
+      data.isDefault = new Date().toJSON();
+    } else {
+      delete data.isDefault;
+    }
+
+    return this.customerService.CustomerUpdateShippingAddress({ shippingAddressId, shippingAddress: data, customerId });
   }
 
   getShippingAddress(shippingAddressId: number): Observable<Result<ShippingAddressDTO>> {
     return this.customerService.CustomerGetShippingaddress(shippingAddressId);
   }
 
+  getShippingAddresses(customerId: number): Observable<Result<ShippingAddressDTO[]>> {
+    return this.customerService.CustomerGetShippingAddresses(customerId);
+  }
+
   getPayer(payerId: number): Observable<Result<PayerDTO>> {
     return this.payerService.PayerGetPayer(payerId);
   }

apps/domain/crm/src/lib/helpers/address.helper.spec.ts

@@ -0,0 +1,30 @@
+import { AddressHelper } from './address.helper';
+
+describe('AddressHelper', () => {
+  describe('hasRequiredProperties', () => {
+    it('should return true', () => {
+      const result = AddressHelper.hasRequiredProperties({ city: 'Teststadt', street: 'Teststr.', zipCode: '12345', country: 'DEU' });
+      expect(result).toBeTruthy();
+    });
+
+    it('should return false if city is undefined', () => {
+      const result = AddressHelper.hasRequiredProperties({ street: 'Teststr.', zipCode: '12345', country: 'DEU' });
+      expect(result).toBeFalsy();
+    });
+
+    it('should return false if street is undefined', () => {
+      const result = AddressHelper.hasRequiredProperties({ city: 'Teststadt', zipCode: '12345', country: 'DEU' });
+      expect(result).toBeFalsy();
+    });
+
+    it('should return false if zipCode is undefined', () => {
+      const result = AddressHelper.hasRequiredProperties({ city: 'Teststadt', street: 'Teststr.', country: 'DEU' });
+      expect(result).toBeFalsy();
+    });
+
+    it('should return false if country is undefined', () => {
+      const result = AddressHelper.hasRequiredProperties({ city: 'Teststadt', street: 'Teststr.', zipCode: '12345' });
+      expect(result).toBeFalsy();
+    });
+  });
+});

apps/domain/crm/src/lib/helpers/address.helper.ts

@@ -0,0 +1,9 @@
+import { AddressDTO } from '@swagger/crm';
+
+function hasRequiredProperties(address: AddressDTO) {
+  return !!address?.street && !!address?.city && !!address?.zipCode && !!address?.country;
+}
+
+export const AddressHelper = {
+  hasRequiredProperties,
+};

apps/domain/crm/src/lib/helpers/assigned-payer.helper.spec.ts

@@ -0,0 +1,27 @@
+import { AssignedPayerDTO, EntityDTOContainerOfPayerDTO } from '@swagger/crm';
+import { AssignedPayerHelper } from './assigned-payer.helper';
+
+describe('AssignedPayerHelper', () => {
+  describe('getDefaultAssignedPayer', () => {
+    it('should return undefined if the parameter is not an array', () => {
+      let result = AssignedPayerHelper.getDefaultAssignedPayer(undefined);
+      expect(result).toBeUndefined();
+    });
+
+    it('should return undefined if it is called with an empty array', () => {
+      let result = AssignedPayerHelper.getDefaultAssignedPayer([]);
+      expect(result).toBeUndefined();
+    });
+
+    it('should return the object with the latest Date in the isDefault Property', () => {
+      let assignedPayers: AssignedPayerDTO[] = [
+        { payer: { data: { id: 1 } } as EntityDTOContainerOfPayerDTO, isDefault: '2021-01-12T13:32:55.295Z' },
+        { payer: { data: { id: 2 } } as EntityDTOContainerOfPayerDTO },
+        { payer: { data: { id: 3 } } as EntityDTOContainerOfPayerDTO, isDefault: '2021-01-12T13:34:42.336Z' },
+      ];
+
+      let result = AssignedPayerHelper.getDefaultAssignedPayer(assignedPayers);
+      expect(result.payer.data.id).toBe(3);
+    });
+  });
+});

apps/domain/crm/src/lib/helpers/assigned-payer.helper.ts

@@ -0,0 +1,17 @@
+import { AssignedPayerDTO } from '@swagger/crm';
+
+function getDefaultAssignedPayer(payers: AssignedPayerDTO[]): AssignedPayerDTO {
+  if (Array.isArray(payers)) {
+    const defaults = payers.filter((f) => !!f.isDefault).map((f) => new Date(f.isDefault));
+    if (defaults.length > 0) {
+      const latest = Math.max(...defaults.map((d) => d.getTime()));
+      return payers.find((p) => new Date(p.isDefault).getTime() === latest);
+    }
+  }
+
+  return undefined;
+}
+
+export const AssignedPayerHelper = {
+  getDefaultAssignedPayer,
+};

apps/domain/crm/src/lib/helpers/index.ts

@@ -0,0 +1,5 @@
+// start:ng42.barrel
+export * from './address.helper';
+export * from './assigned-payer.helper';
+export * from './shipping-address.helper';
+// end:ng42.barrel

apps/domain/crm/src/lib/helpers/shipping-address.helper.spec.ts

@@ -0,0 +1,16 @@
+import { ShippingAddressDTO } from '@swagger/crm';
+import { ShippingAddressHelper } from './shipping-address.helper';
+
+describe('ShippingAddressHelper', () => {
+  describe('getDefaultShippingAddress', () => {
+    it('should return undefined if function gets called with invalid arguments', () => {
+      const shippingAdress = undefined;
+      expect(ShippingAddressHelper.getDefaultShippingAddress(shippingAdress)).toEqual(undefined);
+    });
+
+    it('should return the latest default shippingAdress', () => {
+      const shippingAdress: ShippingAddressDTO[] = [{ isDefault: new Date().toJSON() }, { isDefault: new Date(2020, 5, 15).toJSON() }, {}];
+      expect(ShippingAddressHelper.getDefaultShippingAddress(shippingAdress)).toEqual(shippingAdress[0]);
+    });
+  });
+});

apps/domain/crm/src/lib/helpers/shipping-address.helper.ts

@@ -0,0 +1,17 @@
+import { ShippingAddressDTO } from '@swagger/crm';
+
+function getDefaultShippingAddress(shippingAddresses: ShippingAddressDTO[]): ShippingAddressDTO {
+  if (Array.isArray(shippingAddresses)) {
+    const defaults = shippingAddresses.filter((f) => f.isDefault).map((f) => new Date(f.isDefault));
+
+    if (defaults.length > 0) {
+      const latest = Math.max(...defaults.map((f) => f.getTime()));
+      return shippingAddresses.find((p) => new Date(p.isDefault).getTime() === latest);
+    }
+  }
+  return undefined;
+}
+
+export const ShippingAddressHelper = {
+  getDefaultShippingAddress,
+};

apps/domain/crm/src/public-api.ts

@@ -1,6 +1,6 @@
 /*
  * Public API Surface of crm
  */
-
+export * from './lib/helpers';
 export * from './lib/crm-customer.service';
 export * from './lib/crm.module';

apps/page/customer/src/lib/customer-details/address/payer-create/payer-create-b2c.component.ts

@@ -29,7 +29,7 @@ export class PayerCreateB2CComponent extends PayerCreateComponent {
         info: fb.control(''),
         country: fb.control('DEU', [Validators.required]),
       }),
-      isDefault: fb.control(false),
+      isDefault: fb.control(undefined),
     });
   }
 }

apps/page/customer/src/lib/customer-details/address/payer-edit/payer-edit-b2b.component.ts

@@ -11,6 +11,7 @@ export class PayerEditB2BComponent extends PayerEditComponent {
   async initForm() {
     const fb = this.fb;
     let payerDTO = await this.payer$.toPromise();
+    let isDefault = await this.isDefault$.toPromise();
 
     this.control = fb.group({
       gender: fb.control(payerDTO?.gender || undefined, [Validators.required]),
@@ -30,7 +31,7 @@ export class PayerEditB2BComponent extends PayerEditComponent {
         info: fb.control(payerDTO?.address?.info),
         country: fb.control(payerDTO?.address?.country || 'DEU', [Validators.required]),
       }),
-      isDefault: fb.control(false),
+      isDefault: fb.control(isDefault),
     });
     this.cdr.markForCheck();
   }

apps/page/customer/src/lib/customer-details/address/payer-edit/payer-edit-b2c.component.html

@@ -82,7 +82,6 @@
     <ui-form-control class="default-address" label="Als Standardadresse verwenden">
       <input uiInput type="checkbox" formControlName="isDefault" />
     </ui-form-control>
-
     <div class="center">
       <button class="create-customer-submit" type="submit" [disabled]="control.invalid || control.disabled" [ngSwitch]="control.enabled">
         <ng-container *ngSwitchCase="true">

apps/page/customer/src/lib/customer-details/address/payer-edit/payer-edit-b2c.component.ts

@@ -11,6 +11,7 @@ export class PayerEditB2CComponent extends PayerEditComponent {
   async initForm() {
     const fb = this.fb;
     let payerDTO = await this.payer$.toPromise();
+    let isDefault = await this.isDefault$.toPromise();
 
     this.control = fb.group({
       gender: fb.control(payerDTO?.gender || undefined, [Validators.required]),
@@ -30,7 +31,7 @@ export class PayerEditB2CComponent extends PayerEditComponent {
         info: fb.control(payerDTO?.address?.info),
         country: fb.control(payerDTO?.address?.country || 'DEU', [Validators.required]),
       }),
-      isDefault: fb.control(false),
+      isDefault: fb.control(isDefault),
     });
     this.cdr.markForCheck();
   }

apps/page/customer/src/lib/customer-details/address/payer-edit/payer-edit.component.ts

@@ -4,11 +4,12 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { CrmCustomerService } from '@domain/crm';
 import { AddressDTO, CountryDTO, PayerDTO } from '@swagger/crm';
-import { Observable, of } from 'rxjs';
+import { combineLatest, Observable, of } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { AddressSelectionModalService } from '../../../modals/address-selection-modal.service';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { ApplicationService } from '@core/application';
+import { AssignedPayerHelper } from '@domain/crm';
 
 @Component({ template: '' })
 export abstract class PayerEditComponent implements OnInit {
@@ -39,8 +40,13 @@ export abstract class PayerEditComponent implements OnInit {
   ngOnInit() {
     this.countries$ = this.customerService.getCountries().pipe(map((p) => p.result));
     this.payer$ = this.customerService.getPayer(this.payerId).pipe(map((p) => p.result));
-    this.isDefault$ = of(false);
-    //this.isDefault$ = this.customerService.getPayerReference(this.payerId, this.customerId).pipe(map((p) => p.result.isDefault != ''));
+
+    this.isDefault$ = combineLatest([this.payer$, this.customerService.getAssignedPayers(this.customerId)]).pipe(
+      map(([payer, assignedPayers]) => {
+        const currentDefaultPayer = AssignedPayerHelper.getDefaultAssignedPayer(assignedPayers.result);
+        return payer?.id === currentDefaultPayer?.payer?.id;
+      })
+    );
 
     this.initForm();
 
@@ -68,10 +74,10 @@ export abstract class PayerEditComponent implements OnInit {
 
     try {
       let payer = await this.payer$.toPromise();
-      await this.customerService.updatePayer(this.payerId, { ...payer, ...this.control.value }).toPromise();
-      if (this.control.value.isDefault) {
-        await this.customerService.setDefaultPayer(this.payerId, this.customerId).toPromise();
-      }
+      await this.customerService
+        .updatePayer(this.customerId, this.payerId, { ...payer, ...this.control.value }, this.control.value.isDefault)
+        .toPromise();
+
       this.location.back();
     } catch (err) {
       this.control.enable();

apps/page/customer/src/lib/customer-details/address/shipping-create/shipping-create.component.ts

@@ -56,7 +56,7 @@ export abstract class ShippingCreateComponent implements OnInit {
     }
 
     try {
-      await this.customerService.createShippingAddress(this.customerId, this.control.value).toPromise();
+      await this.customerService.createShippingAddress(this.customerId, this.control.value, this.control.value.isDefault).toPromise();
       this.location.back();
     } catch (err) {
       this.control.enable();

apps/page/customer/src/lib/customer-details/address/shipping-edit/shipping-edit-b2b.component.ts

@@ -11,6 +11,7 @@ export class ShippingEditB2BComponent extends ShippingEditComponent {
   async initForm() {
     const fb = this.fb;
     const shippingAddressDTO = await this.shippingAddress$.toPromise();
+    const isDefault = await this.isDefault$.toPromise();
 
     this.control = fb.group({
       gender: fb.control(shippingAddressDTO?.gender || undefined, [Validators.required]),
@@ -35,7 +36,7 @@ export class ShippingEditB2BComponent extends ShippingEditComponent {
         phone: fb.control(shippingAddressDTO?.communicationDetails?.phone),
         mobile: fb.control(shippingAddressDTO?.communicationDetails?.mobile),
       }),
-      isDefault: fb.control(false),
+      isDefault: fb.control(isDefault),
     });
     this.cdr.markForCheck();
   }

apps/page/customer/src/lib/customer-details/address/shipping-edit/shipping-edit-b2c.component.ts

@@ -10,7 +10,8 @@ import { ShippingEditComponent } from './shipping-edit.component';
 export class ShippingEditB2CComponent extends ShippingEditComponent {
   async initForm() {
     const fb = this.fb;
-    let shippingAddressDTO = await this.shippingAddress$.toPromise();
+    const shippingAddressDTO = await this.shippingAddress$.toPromise();
+    const isDefault = await this.isDefault$.toPromise();
 
     this.control = fb.group({
       gender: fb.control(shippingAddressDTO?.gender || undefined, [Validators.required]),
@@ -30,7 +31,7 @@ export class ShippingEditB2CComponent extends ShippingEditComponent {
         info: fb.control(shippingAddressDTO?.address?.info),
         country: fb.control(shippingAddressDTO?.address?.country || 'DEU', [Validators.required]),
       }),
-      isDefault: fb.control(false),
+      isDefault: fb.control(isDefault),
     });
     this.cdr.markForCheck();
   }

apps/page/customer/src/lib/customer-details/address/shipping-edit/shipping-edit.component.ts

@@ -4,17 +4,19 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { CrmCustomerService } from '@domain/crm';
 import { CountryDTO, ShippingAddressDTO } from '@swagger/crm';
-import { Observable } from 'rxjs';
+import { combineLatest, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { AddressSelectionModalService } from '../../../modals/address-selection-modal.service';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { ApplicationService } from '@core/application';
+import { ShippingAddressHelper } from '@domain/crm';
 
 @Component({ template: '' })
 export abstract class ShippingEditComponent implements OnInit {
   control: FormGroup;
   countries$: Observable<CountryDTO[]>;
   shippingAddress$: Observable<ShippingAddressDTO>;
+  isDefault$: Observable<boolean>;
 
   get customerId(): number {
     return Number(this.activatedRoute.snapshot.params['customerId']);
@@ -38,6 +40,12 @@ export abstract class ShippingEditComponent implements OnInit {
   ngOnInit() {
     this.countries$ = this.customerService.getCountries().pipe(map((p) => p.result));
     this.shippingAddress$ = this.customerService.getShippingAddress(this.shippingAddressId).pipe(map((p) => p.result));
+    this.isDefault$ = combineLatest([this.shippingAddress$, this.customerService.getShippingAddresses(this.customerId)]).pipe(
+      map(([shippingAddress, shippingAddresses]) => {
+        const address = ShippingAddressHelper.getDefaultShippingAddress(shippingAddresses.result);
+        return address?.id === shippingAddress?.id;
+      })
+    );
 
     this.initForm();
 
@@ -64,7 +72,9 @@ export abstract class ShippingEditComponent implements OnInit {
     }
 
     try {
-      await this.customerService.updateShippingAddress(this.customerId, this.shippingAddressId, this.control.value).toPromise();
+      await this.customerService
+        .updateShippingAddress(this.customerId, this.shippingAddressId, this.control.value, this.control.value.isDefault)
+        .toPromise();
       this.location.back();
     } catch (err) {
       this.control.enable();

apps/page/customer/src/lib/customer-details/customer-details.component.html

@@ -61,35 +61,29 @@
         >Hinzufügen</a
       >
     </div>
-    <ul class="card-customer-address">
-      <li *ngIf="customer | address as defaultPayerAddress">
-        <ui-form-control *ngIf="(isB2b$ | async) === false" [label]="defaultPayerAddress">
-          <input name="payerAddress" uiInput type="radio" [value]="undefined" [(ngModel)]="selectedPayer" />
-        </ui-form-control>
-        <span *ngIf="(isB2b$ | async) === true">{{ defaultPayerAddress }}</span>
-
-        <a
-          *ngIf="canEdit$ | async"
-          class="button-edit-address"
-          [routerLink]="['/customer', customerId$ | async, 'edit', (isB2b$ | async) ? 'b2b' : 'b2c']"
-          >Bearbeiten</a
-        >
-      </li>
-
-      <ng-container *ngIf="(isB2b$ | async) === false">
-        <li *ngFor="let payer of customer.payers">
-          <ui-form-control [label]="payer?.payer?.data | address">
-            <input name="payerAddress" uiInput type="radio" [value]="payer?.payer?.id" [(ngModel)]="selectedPayer" />
-          </ui-form-control>
+    <ng-container [ngSwitch]="isB2b$ | async">
+      <div *ngSwitchCase="true" class="address-row">
+        <span> {{ customer | address }} </span>
+        <a *ngIf="canEdit$ | async" class="button-edit-address" [routerLink]="['/customer', customer?.id, 'edit', 'b2b']">Bearbeiten</a>
+      </div>
+      <ui-radio-group *ngSwitchDefault class="card-customer-address" [(ngModel)]="selectedPayer">
+        <div *ngIf="customer | address as defaultPayerAddress" class="address-row">
+          <ui-radio-button>{{ defaultPayerAddress }}</ui-radio-button>
+          <a *ngIf="canEdit$ | async" class="button-edit-address" [routerLink]="['/customer', customer?.id, 'edit', 'b2c']">Bearbeiten</a>
+        </div>
+        <div *ngFor="let payer of customer.payers" class="address-row">
+          <ui-radio-button [value]="payer?.payer?.id">
+            {{ payer?.payer?.data | address }}
+          </ui-radio-button>
           <a
             *ngIf="canEdit$ | async"
             class="button-edit-address"
-            [routerLink]="['/customer', customerId$ | async, 'payer', payer?.payer?.id, 'edit', (isB2b$ | async) ? 'b2b' : 'b2c']"
+            [routerLink]="['/customer', customer?.id, 'payer', payer?.payer?.id, 'edit', 'b2c']"
             >Bearbeiten</a
           >
-        </li>
-      </ng-container>
-    </ul>
+        </div>
+      </ui-radio-group>
+    </ng-container>
 
     <div class="card-section-title">
       <h3>Lieferadresse</h3>
@@ -99,31 +93,29 @@
         >Hinzufügen</a
       >
     </div>
-    <ul class="card-customer-address">
-      <li *ngIf="customer | address as defaultShippingAddress">
-        <ui-form-control [label]="defaultShippingAddress">
-          <input name="shippingAddress" uiInput type="radio" [value]="undefined" [(ngModel)]="selectedAddress" />
-        </ui-form-control>
-        <a
-          *ngIf="canEdit$ | async"
-          class="button-edit-address"
-          [routerLink]="['/customer', customerId$ | async, 'edit', (isB2b$ | async) ? 'b2b' : 'b2c']"
-          >Bearbeiten</a
-        >
-      </li>
 
-      <li *ngFor="let address of customer.shippingAddresses">
-        <ui-form-control [label]="address?.data | address">
-          <input name="shippingAddress" uiInput type="radio" [value]="address?.id" [(ngModel)]="selectedAddress" />
-        </ui-form-control>
+    <ui-radio-group class="card-customer-address" [(ngModel)]="selectedAddress">
+      <div *ngIf="customer | address as defaultShippingAddress" class="address-row">
+        <ui-radio-button>{{ defaultShippingAddress }}</ui-radio-button>
         <a
           *ngIf="canEdit$ | async"
           class="button-edit-address"
-          [routerLink]="['/customer', customerId$ | async, 'shipping', address?.id, 'edit', (isB2b$ | async) ? 'b2b' : 'b2c']"
+          [routerLink]="['/customer', customer?.id, 'edit', (isB2b$ | async) ? 'b2b' : 'b2c']"
           >Bearbeiten</a
         >
-      </li>
-    </ul>
+      </div>
+      <div *ngFor="let address of customer.shippingAddresses" class="address-row">
+        <ui-radio-button [value]="address?.id">
+          {{ address?.data | address }}
+        </ui-radio-button>
+        <a
+          *ngIf="canEdit$ | async"
+          class="button-edit-address"
+          [routerLink]="['/customer', customer?.id, 'shipping', address?.id, 'edit', (isB2b$ | async) ? 'b2b' : 'b2c']"
+          >Bearbeiten</a
+        >
+      </div>
+    </ui-radio-group>
   </div>
 
   <div class="card-customer-footer">

apps/page/customer/src/lib/customer-details/customer-details.component.scss

@@ -22,16 +22,12 @@
   @apply flex flex-col gap-px-2;
 }
 
-.card-customer-address {
-  @apply flex flex-col gap-px-2 list-none font-bold p-0 m-0;
+ui-radio-group {
+  @apply flex flex-col gap-px-2;
+}
 
-  li {
-    @apply bg-white flex flex-row justify-between p-4;
-  }
-
-  li:last-child() {
-    @apply mb-px-2;
-  }
+.address-row {
+  @apply bg-white flex flex-row justify-between p-4 font-bold;
 }
 
 .card-customer-orders .title {

apps/page/customer/src/lib/customer-details/customer-details.component.ts

@@ -1,9 +1,10 @@
-import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
+import { Component, ChangeDetectionStrategy, OnInit, ChangeDetectorRef } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ApplicationService, ProcessService } from '@core/application';
 import { Breadcrumb, BreadcrumbService } from '@core/breadcrumb';
-import { CrmCustomerService } from '@domain/crm';
-import { AddressDTO, AssignedPayerDTO, CustomerDTO, ShippingAddressDTO } from '@swagger/crm';
+import { AddressHelper, AssignedPayerHelper, CrmCustomerService } from '@domain/crm';
+import { CustomerDTO } from '@swagger/crm';
+import { ShippingAddressHelper } from 'apps/domain/crm/src/lib/helpers/shipping-address.helper';
 import { Observable } from 'rxjs';
 import { first, map, shareReplay, switchMap } from 'rxjs/operators';
 
@@ -34,7 +35,8 @@ export class CustomerDetailsComponent implements OnInit {
     private breadcrumb: BreadcrumbService,
     private application: ApplicationService,
     private process: ProcessService,
-    private router: Router
+    private router: Router,
+    private cdr: ChangeDetectorRef
   ) {}
 
   ngOnInit() {
@@ -43,21 +45,30 @@ export class CustomerDetailsComponent implements OnInit {
     this.customer$ = this.customerId$.pipe(
       switchMap((customerId) => this.customerDetailsService.getCustomer(customerId, 2)),
       map(({ result }) => result),
-      shareReplay(),
       map((customer) => {
         this.updateBreadcrumbName(customer);
-        if (!this.hasAddress(customer?.address)) {
-          if (customer.payers.length > 0) {
+
+        const defaultPayer = AssignedPayerHelper.getDefaultAssignedPayer(customer.payers);
+        const defaultShippingAddress = ShippingAddressHelper.getDefaultShippingAddress(customer.shippingAddresses.map((a) => a.data));
+
+        this.selectedPayer = defaultPayer?.payer?.id;
+        this.selectedAddress = defaultShippingAddress?.id;
+
+        if (!AddressHelper.hasRequiredProperties(customer?.address)) {
+          if (!this.selectedPayer && customer.payers.length > 0) {
             this.selectedPayer = customer.payers[0].payer?.id;
           }
 
-          if (customer.shippingAddresses.length > 0) {
+          if (!this.selectedAddress && customer.shippingAddresses.length > 0) {
             this.selectedAddress = customer.shippingAddresses[0].id;
           }
         }
 
+        this.cdr.markForCheck();
+
         return customer;
-      })
+      }),
+      shareReplay()
     );
 
     this.customerType$ = this.customer$.pipe(
@@ -86,15 +97,43 @@ export class CustomerDetailsComponent implements OnInit {
   }
 
   updateBreadcrumbName(customer: CustomerDTO) {
-    this.breadcrumb.patchBreadcrumb(this.currentBreadcrumb.id, { name: `${customer?.firstName} ${customer?.lastName}` });
-  }
+    const isB2b = customer.features.some((s) => s.key === 'b2b');
 
-  hasAddress(address: AddressDTO): boolean {
-    return !!address?.street && !!address?.city && !!address?.zipCode && !!address?.country;
+    const name: string[] = [];
+
+    if (isB2b && customer?.organisation?.name) {
+      name.push(customer.organisation.name);
+    }
+
+    if (name.length === 0) {
+      name.push(customer.firstName);
+      name.push(customer.lastName);
+    }
+
+    this.breadcrumb.patchBreadcrumb(this.currentBreadcrumb.id, { name: name.filter((n) => !!n).join(' ') });
   }
 
   async continueToCart() {
     let customer = await this.customer$.pipe(first()).toPromise();
+
+    // Set Process Name
     this.process.updateName(this.application.activatedProcessId, customer.lastName);
+
+    // Set Customer For Process
+    this.process.setData(this.application.activatedProcessId, 'customer', customer.id);
+
+    // Set Invoice Address If Selected
+    if (!!this.selectedPayer) {
+      this.process.setData(this.application.activatedProcessId, 'billingAddress', this.selectedPayer);
+    }
+
+    // Set Shipping Address If Selected
+    if (!!this.selectedAddress) {
+      this.process.setData(this.application.activatedProcessId, 'shippingAddress', this.selectedAddress);
+    }
+
+    // Navigate To Catalog Or Cart
+    // TODO: Add Cart Navigation
+    this.router.navigate(['/product/search']);
   }
 }

apps/page/customer/src/lib/customer-details/customer-details.module.ts

@@ -21,7 +21,7 @@ import { CustomerDataB2CComponent } from './customer-data/customer-data-b2c.comp
 import { CustomerDataB2BComponent } from './customer-data/customer-data-b2b.component';
 import { CustomerDataEditB2CComponent } from './customer-data-edit/customer-data-edit-b2c.component';
 import { CustomerDataEditB2BComponent } from './customer-data-edit/customer-data-edit-b2b.component';
-
+import { UiRadioModule } from '@ui/radio';
 @NgModule({
   imports: [
     CommonModule,
@@ -33,6 +33,7 @@ import { CustomerDataEditB2BComponent } from './customer-data-edit/customer-data
     UiInputModule,
     UiSelectModule,
     FormsModule,
+    UiRadioModule,
   ],
   exports: [CustomerDetailsComponent],
   declarations: [

apps/page/customer/src/lib/customer-search/customer-search.service.ts

@@ -195,8 +195,8 @@ export abstract class CustomerSearch implements OnInit, OnDestroy {
     });
   }
 
-  startSearch() {
-    if (!this.queryFilter.query || (!this.queryFilter.query.length && this.environmentService.isMobile())) {
+  async startSearch() {
+    if (!this.queryFilter.query && (await this.environmentService.isMobile())) {
       return this.scan();
     }
 

apps/sales/src/app/core/models/process.model.ts

@@ -24,6 +24,8 @@ export interface Process {
   customerIds: number[];
   activeCustomer: number;
   detailsCustomer: number;
+  activeBillingAddress?: number;
+  activeShippingAddress?: number;
   finishedOrderCustomer: number;
   customerSearch: CustomerSearch;
   cartId: number;

apps/sales/src/app/core/store/actions/process.actions.ts

@@ -233,3 +233,13 @@ export class SetCustomerNotificationFlag {
 
   constructor(public flag: boolean) {}
 }
+
+export class SetActiveBillingAddress {
+  static readonly type = '[PROCESS] Set Active Billing Address';
+  constructor(public activeBillingAddress: number) {}
+}
+
+export class SetActiveShippingAddress {
+  static readonly type = '[PROCESS] Set Active Shipping Address';
+  constructor(public activeShippingAddress: number) {}
+}

apps/sales/src/app/core/store/state/customer.state.ts

@@ -366,6 +366,7 @@ export class CustomerState {
     if (!state) {
       return;
     }
+    console.log({ customerId, invoiceAddress });
     const currentCustomers = state.customers;
     const address = { ...invoiceAddress, synced: true };
     return this.customerService.addInvoiceAddress(customerId, address).pipe(

apps/sales/src/app/core/store/state/process.state.ts

@@ -840,6 +840,42 @@ export class ProcessState {
     this.syncApiState(currentProcessId, processes, recentArticles);
   }
 
+  @Action(actions.SetActiveBillingAddress)
+  setActiveBillingAddress(ctx: StateContext<ProcessStateModel>, action: actions.SetActiveBillingAddress) {
+    const state = ctx.getState();
+    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
+
+    const currentProcess = state.processes[currentProcessId];
+
+    if (!currentProcess) {
+      return;
+    }
+
+    const process = { ...currentProcess };
+
+    process.activeBillingAddress = action.activeBillingAddress;
+
+    ctx.setState(this.updateProcess(process));
+  }
+
+  @Action(actions.SetActiveBillingAddress)
+  setActiveShippingAddress(ctx: StateContext<ProcessStateModel>, action: actions.SetActiveShippingAddress) {
+    const state = ctx.getState();
+    const currentProcessId = this.store.selectSnapshot(AppState.getCurrentProcessId);
+
+    const currentProcess = state.processes[currentProcessId];
+
+    if (!currentProcess) {
+      return;
+    }
+
+    const process = { ...currentProcess };
+
+    process.activeShippingAddress = action.activeShippingAddress;
+
+    ctx.setState(this.updateProcess(process));
+  }
+
   updateProcess<T extends Process>(process: T) {
     if (process.id === undefined) {
       return;

apps/sales/src/app/refact-imp/process.refact-imp.ts

@@ -1,79 +1,33 @@
 import { Injectable } from '@angular/core';
-import { ApplicationProcess, ProcessService } from '@core/application';
+import { ProcessService } from '@core/application';
 import { Store } from '@ngxs/store';
-import { Observable } from 'rxjs';
-import { Address } from '../core/models/user.model';
-import { AddNewInvoiceAddress, AddNewShippingAddress } from '../core/store/actions/customer.actions';
-import { SetActiveCustomer, UpdateProcessName } from '../core/store/actions/process.actions';
+import {
+  SetActiveBillingAddress,
+  SetActiveCustomer,
+  SetActiveShippingAddress,
+  UpdateProcessName,
+} from '../core/store/actions/process.actions';
 
 @Injectable()
 export class ProcessRefactImp implements ProcessService {
   constructor(private store: Store) {}
 
-  addData(processId: string, key: string, data: any): void {
+  setData(processId: string, key: string, data: any): void {
     switch (key) {
       case 'customer':
-        this.store.dispatch(new SetActiveCustomer(data?.id));
-        break;
-      case 'payer':
-        this.store.dispatch(
-          new AddNewInvoiceAddress(
-            data?.customerId,
-            new Address(
-              null,
-              data?.payer?.firstName,
-              data?.payer?.lastName,
-              data?.payer?.address?.street,
-              data?.payer?.address?.streetNumber,
-              data?.payer?.address?.zipCode,
-              data?.payer?.address?.city,
-              data?.payer?.address?.country,
-              data?.payer?.organisation?.name,
-              data?.payer?.organisation?.department,
-              data?.payer?.address?.info,
-              data?.payer?.organisation?.vatId,
-              data?.payer?.title,
-              data?.payer?.gender,
-              data?.payer?.payerNumber,
-              data?.payer?.payerStatus,
-              data?.payer?.payerType,
-              undefined,
-              false
-            )
-          )
-        );
+        this.store.dispatch(new SetActiveCustomer(data));
         break;
       case 'shippingAddress':
-        this.store.dispatch(
-          new AddNewShippingAddress(
-            data?.customerId,
-            new Address(
-              null,
-              data?.shippingAddress?.firstName,
-              data?.shippingAddress?.lastName,
-              data?.shippingAddress?.address?.street,
-              data?.shippingAddress?.address?.streetNumber,
-              data?.shippingAddress?.address?.zipCode,
-              data?.shippingAddress?.address?.city,
-              data?.shippingAddress?.address?.country,
-              data?.shippingAddress?.organisation?.name,
-              data?.shippingAddress?.organisation?.department,
-              data?.shippingAddress?.address?.info,
-              data?.shippingAddress?.organisation?.vatId,
-              data?.shippingAddress?.title,
-              data?.shippingAddress?.gender,
-              undefined,
-              undefined,
-              undefined,
-              undefined,
-              false
-            )
-          )
-        );
+        this.store.dispatch(new SetActiveShippingAddress(data));
+        break;
+      case 'billingAddress':
+        this.store.dispatch(new SetActiveBillingAddress(data));
         break;
     }
   }
+
   updateData(processId: string, key: string, data: any): void {}
+
   removeData(processId: string, key: string): void {}
 
   updateName(processId: string, name: string): void {

apps/ui/input/src/lib/ui-checkbox-input.directive.ts

@@ -0,0 +1,92 @@
+import { Directive, ElementRef, forwardRef, HostBinding, HostListener, Input } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { UiFormControlDirective } from '@ui/form-control';
+import { isBoolean } from '@utils/common';
+
+@Directive({
+  selector: 'input[uiInput][type="checkbox"]',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => UiCheckboxInputDirective),
+      multi: true,
+    },
+    {
+      provide: UiFormControlDirective,
+      useExisting: UiCheckboxInputDirective,
+    },
+  ],
+  exportAs: 'uiInput',
+})
+export class UiCheckboxInputDirective extends UiFormControlDirective<any> implements ControlValueAccessor {
+  readonly type = 'checkbox';
+
+  @Input()
+  value: any = true;
+
+  private selectedValue: any;
+
+  @HostBinding('checked')
+  checked: boolean;
+
+  @HostBinding('disabled')
+  isDisabled: boolean;
+
+  private onChange = (_: any) => {};
+  private onTouched = () => {};
+
+  constructor(private elementRef: ElementRef) {
+    super();
+  }
+
+  get valueEmpty(): boolean {
+    return false;
+  }
+
+  clear(): void {
+    this.checked = false;
+  }
+
+  focus(): void {
+    this.elementRef.nativeElement.focus();
+  }
+
+  writeValue(obj: any): void {
+    this.selectedValue = obj;
+    this.updateChecked();
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.isDisabled = isDisabled;
+  }
+
+  @HostListener('click')
+  check() {
+    if (isBoolean(this.selectedValue)) {
+      this.selectedValue = !this.selectedValue;
+    } else {
+      if (this.selectedValue === this.value) {
+        this.selectedValue = undefined;
+      } else {
+        this.selectedValue = this.value;
+      }
+    }
+
+    this.updateChecked();
+
+    this.onChange(this.selectedValue);
+    this.onTouched();
+  }
+
+  updateChecked() {
+    this.checked = isBoolean(this.selectedValue) ? this.selectedValue : this.value == this.selectedValue;
+  }
+}

apps/ui/input/src/lib/ui-input.directive.ts

@@ -3,7 +3,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { UiFormControlDirective } from '@ui/form-control';
 
 @Directive({
-  selector: 'input[uiInput]:not([type=radio]):not([type=checkbox])',
+  selector: 'input[uiInput]:not([type=checkbox])',
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,

apps/ui/input/src/lib/ui-input.module.ts

@@ -3,12 +3,12 @@ import { NgModule } from '@angular/core';
 import { UiDateInputDirective } from './ui-date-input.directive';
 
 import { UiInputDirective } from './ui-input.directive';
-import { UiRadioInputDirective } from './ui-radio-input.directive';
+import { UiCheckboxInputDirective } from './ui-checkbox-input.directive';
 
 @NgModule({
   imports: [CommonModule],
-  exports: [UiInputDirective, UiRadioInputDirective, UiDateInputDirective],
-  declarations: [UiInputDirective, UiRadioInputDirective, UiDateInputDirective],
+  exports: [UiInputDirective, UiCheckboxInputDirective, UiDateInputDirective],
+  declarations: [UiInputDirective, UiCheckboxInputDirective, UiDateInputDirective],
   providers: [],
 })
 export class UiInputModule {}

apps/ui/input/src/lib/ui-radio-input.directive.ts

@@ -1,9 +1,26 @@
-import { Directive, ElementRef, EventEmitter, forwardRef, HostBinding, HostListener, Input, Output, Renderer2 } from '@angular/core';
+import {
+  Directive,
+  ElementRef,
+  EventEmitter,
+  forwardRef,
+  HostBinding,
+  HostListener,
+  Inject,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Output,
+  Renderer2,
+  SimpleChanges,
+} from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { UiFormControlDirective } from '@ui/form-control';
+import { fromEvent, Subscription } from 'rxjs';
+import { DOCUMENT } from '@angular/common';
 
 @Directive({
-  selector: 'input[uiInput][type="radio"], input[uiInput][type="checkbox"]',
+  selector: 'input[uiInput][type="checkbox"]',
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -17,14 +34,18 @@ import { UiFormControlDirective } from '@ui/form-control';
   ],
   exportAs: 'uiInput',
 })
-export class UiRadioInputDirective extends UiFormControlDirective<any> implements ControlValueAccessor {
+export class UiRadioInputDirective extends UiFormControlDirective<any> implements ControlValueAccessor, OnChanges, OnDestroy {
   @Input()
-  value: string;
+  value: any;
+
+  selectedValue: any;
 
   @Input()
   @HostBinding('attr.type')
   type: string;
 
+  private uiInputCheckedSubscription: Subscription;
+
   private onChange = (value: any) => {};
   private onTouched = () => {};
 
@@ -36,12 +57,36 @@ export class UiRadioInputDirective extends UiFormControlDirective<any> implement
     return this.elementRef.nativeElement.checked;
   }
 
-  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
+  constructor(private elementRef: ElementRef, private renderer: Renderer2, @Inject(DOCUMENT) private document: Document) {
     super();
   }
 
+  private registerUiInputChecked() {
+    if (this.uiInputCheckedSubscription) {
+      this.uiInputCheckedSubscription.unsubscribe();
+    }
+
+    this.uiInputCheckedSubscription = fromEvent(
+      this.document.querySelectorAll(`input[name=${this.name}]`),
+      'uiInputChecked'
+    ).subscribe(() => this.render());
+  }
+
+  ngOnChanges({ name }: SimpleChanges): void {
+    if (name) {
+      this.registerUiInputChecked();
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.uiInputCheckedSubscription) {
+      this.uiInputCheckedSubscription.unsubscribe();
+    }
+  }
+
   writeValue(obj: any): void {
-    this.check(this.value == obj, false);
+    this.selectedValue = obj;
+    this.check(this.selectedValue == obj, false);
   }
 
   registerOnChange(fn: any): void {
@@ -68,19 +113,27 @@ export class UiRadioInputDirective extends UiFormControlDirective<any> implement
 
   @HostListener('click')
   click(): void {
-    this.check(this.checked);
+    this.check(this.type === 'radio' ? true : !this.checked);
   }
 
-  check(value: boolean, emitEvent = true) {
-    if (value) {
-      this.renderer.setAttribute(this.elementRef.nativeElement, 'checked', '');
+  check(check: boolean, emitEvent = true) {
+    if (emitEvent) {
+      this.onChange(check);
+    }
+    this.onTouched();
+    this.render();
+  }
+
+  render() {
+    if (this.value == this.selectedValue) {
+      console.log(this.value, this.selectedValue, this.checked);
+      if (!this.checked) {
+        this.renderer.setAttribute(this.elementRef.nativeElement, 'checked', '');
+        const ele: HTMLElement = this.elementRef.nativeElement;
+        ele.dispatchEvent(new Event('uiInputChecked'));
+      }
     } else {
       this.renderer.removeAttribute(this.elementRef.nativeElement, 'checked');
     }
-
-    if (emitEvent) {
-      this.onChange(value ? this.value : undefined);
-    }
-    this.onTouched();
   }
 }

apps/ui/radio/README.md

@@ -0,0 +1,25 @@
+# Radio
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.1.2.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project radio` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project radio`.
+
+> Note: Don't forget to add `--project radio` or else it will be added to the default project in your `angular.json` file.
+
+## Build
+
+Run `ng build radio` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build radio`, go to the dist folder `cd dist/radio` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test radio` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

apps/ui/radio/karma.conf.js

@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma'),
+    ],
+    client: {
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../../coverage/ui/radio'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true,
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true,
+  });
+};

apps/ui/radio/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/ui/radio",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

apps/ui/radio/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@ui/radio",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^10.1.2",
+    "@angular/core": "^10.1.2"
+  },
+  "dependencies": {
+    "tslib": "^2.0.0"
+  }
+}

apps/ui/radio/src/lib/radio-button.component.html

@@ -0,0 +1,2 @@
+<ui-icon [icon]="icon"></ui-icon>
+<ng-content></ng-content>

apps/ui/radio/src/lib/radio-button.component.scss

@@ -0,0 +1,3 @@
+:host {
+  @apply flex flex-row box-border items-center gap-2;
+}

apps/ui/radio/src/lib/radio-button.component.ts

@@ -0,0 +1,35 @@
+import { Component, ChangeDetectionStrategy, Input, HostListener, ChangeDetectorRef } from '@angular/core';
+
+@Component({
+  selector: 'ui-radio-button',
+  templateUrl: 'radio-button.component.html',
+  styleUrls: ['radio-button.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UiRadioButtonComponent {
+  @Input() value: any;
+
+  get icon() {
+    return this.checked ? 'radio_checked' : 'radio';
+  }
+
+  checked: boolean;
+
+  private onChange = (v: any) => {};
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  registerOnChange(fn: any) {
+    this.onChange = fn;
+  }
+
+  valueChanged(value: any) {
+    this.checked = value == this.value;
+    this.cdr.markForCheck();
+  }
+
+  @HostListener('click')
+  select() {
+    this.onChange(this.value);
+  }
+}

apps/ui/radio/src/lib/radio-group.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

apps/ui/radio/src/lib/radio-group.component.ts

@@ -0,0 +1,90 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ContentChildren,
+  QueryList,
+  Input,
+  HostBinding,
+  forwardRef,
+  ChangeDetectorRef,
+  OnInit,
+  AfterContentInit,
+  OnDestroy,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Subscription } from 'rxjs';
+import { UiRadioButtonComponent } from './radio-button.component';
+
+@Component({
+  selector: 'ui-radio-group',
+  templateUrl: 'radio-group.component.html',
+  styleUrls: ['radio-group.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => UiRadioGroupComponent),
+      multi: true,
+    },
+  ],
+})
+export class UiRadioGroupComponent implements ControlValueAccessor, AfterContentInit, OnDestroy {
+  value: any;
+
+  disabled: boolean;
+
+  @ContentChildren(UiRadioButtonComponent, { read: UiRadioButtonComponent, descendants: true })
+  radios: QueryList<UiRadioButtonComponent>;
+
+  private onChange = (v) => {};
+  private onTouched = () => {};
+
+  private subscription = new Subscription();
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  ngAfterContentInit() {
+    this.subscription.add(
+      this.radios.changes.subscribe(() => {
+        this.registerRadioButtonOnChange();
+        this.updateRadios();
+      })
+    );
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
+
+  private registerRadioButtonOnChange() {
+    this.radios.forEach((radio) => radio.registerOnChange((v) => this.selectValue(v)));
+  }
+
+  writeValue(obj: any): void {
+    this.selectValue(obj);
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  selectValue(value: any) {
+    this.value = value;
+    this.onChange(this.value);
+    this.onTouched();
+    this.updateRadios();
+    this.cdr.markForCheck();
+  }
+
+  updateRadios() {
+    this.radios?.forEach((radio) => radio.valueChanged(this.value));
+  }
+}

apps/ui/radio/src/lib/radio.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { UiIconModule } from '@ui/icon';
+import { UiRadioButtonComponent } from './radio-button.component';
+import { UiRadioGroupComponent } from './radio-group.component';
+
+@NgModule({
+  declarations: [UiRadioGroupComponent, UiRadioButtonComponent],
+  imports: [CommonModule, UiIconModule],
+  exports: [UiRadioGroupComponent, UiRadioButtonComponent],
+})
+export class UiRadioModule {}

apps/ui/radio/src/public-api.ts

@@ -0,0 +1,7 @@
+/*
+ * Public API Surface of radio
+ */
+
+export * from './lib/radio-group.component';
+export * from './lib/radio-button.component';
+export * from './lib/radio.module';

apps/ui/radio/src/test.ts

@@ -0,0 +1,24 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(
+    path: string,
+    deep?: boolean,
+    filter?: RegExp
+  ): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

apps/ui/radio/tsconfig.lib.json

@@ -0,0 +1,25 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

apps/ui/radio/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "enableIvy": false
+  }
+}

apps/ui/radio/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

apps/ui/radio/tslint.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ui",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ui",
+      "kebab-case"
+    ]
+  }
+}

debug.log

@@ -0,0 +1 @@
+[0112/142456.599:ERROR:directory_reader_win.cc(43)] FindFirstFile: Das System kann den angegebenen Pfad nicht finden. (0x3)

package-lock.json

@@ -3718,7 +3718,7 @@
     },
     "@isa/catsearch-api": {
       "version": "0.0.56",
-      "resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel/npm/registry/@isa/catsearch-api/-/catsearch-api-0.0.56.tgz",
+      "resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel@Local/npm/registry/@isa/catsearch-api/-/catsearch-api-0.0.56.tgz",
       "integrity": "sha1-VQWugpfYeSER3UnIsYOQVtnd5FA=",
       "requires": {
         "tslib": "^1.9.0"
@@ -3733,7 +3733,7 @@
     },
     "@isa/print-api": {
       "version": "0.0.56",
-      "resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel/npm/registry/@isa/print-api/-/print-api-0.0.56.tgz",
+      "resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel@Local/npm/registry/@isa/print-api/-/print-api-0.0.56.tgz",
       "integrity": "sha1-8cSMtEczwDnSe/C8piozLDmVYMA=",
       "requires": {
         "tslib": "^1.9.0"
@@ -3748,7 +3748,7 @@
     },
     "@isa/remi-api": {
       "version": "0.0.56",
-      "resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel/npm/registry/@isa/remi-api/-/remi-api-0.0.56.tgz",
+      "resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel@Local/npm/registry/@isa/remi-api/-/remi-api-0.0.56.tgz",
       "integrity": "sha1-bQBbsKL7D+j+nrB26qIOaobBjmc=",
       "requires": {
         "tslib": "^1.9.0"

tsconfig.json

@@ -152,6 +152,9 @@
       "@domain/cart": [
         "dist/domain/cart/domain-cart",
         "dist/domain/cart"
+      ],
+      "@ui/radio": [
+        "apps/ui/radio/src/public-api.ts"
       ]
     }
   }