Merged PR 680: #1822 Pflichtfelder Lieferadresse B2B

#1822 Pflichtfelder Lieferadresse B2B

apps/page/customer/src/lib/customer-create/customer-create-b2b.component.html

@@ -106,7 +106,16 @@
 
       <div *ngIf="control.value.differentShippingAddress" formGroupName="shippingAddress">
         <ng-container formGroupName="organisation">
-          <ui-form-control label="Firmenname">
+          <ui-form-control
+            label="Firmenname"
+            [requiredMark]="
+              control.get('shippingAddress').value.lastName &&
+              control.get('shippingAddress').value.firstName &&
+              control.get('shippingAddress').value.gender
+                ? ''
+                : '*'
+            "
+          >
             <input uiInput type="text" formControlName="name" tabindex="18" />
           </ui-form-control>
           <div class="control-row">
@@ -120,7 +129,11 @@
         </ng-container>
 
         <div class="control-row">
-          <ui-form-control label="Anrede" [clearable]="false" requiredMark="*">
+          <ui-form-control
+            label="Anrede"
+            [clearable]="false"
+            [requiredMark]="control.get('shippingAddress').get('organisation').value.name ? '' : '*'"
+          >
             <ui-select formControlName="gender" tabindex="21">
               <ui-select-option [value]="2" label="Herr"></ui-select-option>
               <ui-select-option [value]="4" label="Frau"></ui-select-option>
@@ -139,10 +152,10 @@
         </div>
 
         <div class="control-row">
-          <ui-form-control label="Nachname" requiredMark="*">
+          <ui-form-control label="Nachname" [requiredMark]="control.get('shippingAddress').get('organisation').value.name ? '' : '*'">
             <input uiInput type="text" formControlName="lastName" tabindex="23" />
           </ui-form-control>
-          <ui-form-control label="Vorname" requiredMark="*">
+          <ui-form-control label="Vorname" [requiredMark]="control.get('shippingAddress').get('organisation').value.name ? '' : '*'">
             <input uiInput type="text" formControlName="firstName" tabindex="24" />
           </ui-form-control>
         </div>

apps/page/customer/src/lib/customer-create/customer-create-b2b.component.ts

@@ -13,6 +13,7 @@ import { DomainCheckoutService } from '@domain/checkout';
 import { Subscription } from 'rxjs';
 import { genderLastNameValidator } from '../validators/gender-b2b-validator';
 import { setInvalidPropertyErrors, UiValidators } from '@ui/validators';
+import { organisationB2bDeliveryValidator } from '../validators/organisation-delivery-b2b-validator';
 
 @Component({
   selector: 'page-customer-create-b2b',
@@ -43,6 +44,22 @@ export class CustomerCreateB2BComponent extends CustomerCreateComponentBase impl
 
     this.control.get('shippingAddress').disable();
 
+    // this.subscription = this.control.get('shippingAddress').valueChanges.subscribe(() => {
+    //   console.log(
+    //     !!this.control.get('shippingAddress').value.lastName &&
+    //       !!this.control.get('shippingAddress').value.firstName &&
+    //       !!this.control.get('shippingAddress').value.gender
+    //   );
+    //   !!this.control.get('shippingAddress').value.lastName &&
+    //   !!this.control.get('shippingAddress').value.firstName &&
+    //   !!this.control.get('shippingAddress').value.gender
+    //     ? this.control.get('shippingAddress').get('organisation').get('name').setValidators(null)
+    //     : this.control.get('shippingAddress').get('organisation').get('name').setValidators(Validators.required);
+
+    //   // this.control.get('shippingAddress').get('organisation').value.name ? '' : '*'"
+    //   this.control.updateValueAndValidity();
+    // });
+
     this.subscription = this.control.get('differentShippingAddress').valueChanges.subscribe((isChecked) => {
       if (isChecked) {
         this.control.get('shippingAddress').enable();
@@ -94,10 +111,10 @@ export class CustomerCreateB2BComponent extends CustomerCreateComponentBase impl
             department: fb.control(''),
             vatId: fb.control(''),
           }),
-          gender: fb.control(undefined, [Validators.required]),
+          gender: fb.control(undefined),
           title: fb.control(''),
-          firstName: fb.control('', [Validators.required]),
-          lastName: fb.control('', [Validators.required]),
+          firstName: fb.control(''),
+          lastName: fb.control(''),
           address: fb.group({
             street: fb.control('', [Validators.required]),
             streetNumber: fb.control('', [Validators.required]),
@@ -113,7 +130,7 @@ export class CustomerCreateB2BComponent extends CustomerCreateComponentBase impl
           }),
         }),
       },
-      { validators: genderLastNameValidator(true) }
+      { validators: [genderLastNameValidator(true), organisationB2bDeliveryValidator()] }
     );
   }
 

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

@@ -5,7 +5,10 @@
 
   <form [formGroup]="control" (ngSubmit)="submit()">
     <ng-container formGroupName="organisation">
-      <ui-form-control label="Firmenname">
+      <ui-form-control
+        label="Firmenname"
+        [requiredMark]="control.value.lastName && control.value.firstName && control.value.gender ? '' : '*'"
+      >
         <input uiInput type="text" formControlName="name" tabindex="1" />
       </ui-form-control>
       <div class="control-row">
@@ -19,7 +22,7 @@
     </ng-container>
 
     <div class="control-row">
-      <ui-form-control label="Anrede" [clearable]="false" requiredMark="*">
+      <ui-form-control label="Anrede" [clearable]="false" [requiredMark]="control.get('organisation').value.name ? '' : '*'">
         <ui-select formControlName="gender" tabindex="4">
           <ui-select-option [value]="2" label="Herr"></ui-select-option>
           <ui-select-option [value]="4" label="Frau"></ui-select-option>
@@ -38,10 +41,10 @@
     </div>
 
     <div class="control-row">
-      <ui-form-control label="Nachname" requiredMark="*">
+      <ui-form-control label="Nachname" [requiredMark]="control.get('organisation').value.name ? '' : '*'">
         <input uiInput type="text" formControlName="lastName" tabindex="6" />
       </ui-form-control>
-      <ui-form-control label="Vorname" requiredMark="*">
+      <ui-form-control label="Vorname" [requiredMark]="control.get('organisation').value.name ? '' : '*'">
         <input uiInput type="text" formControlName="firstName" tabindex="7" />
       </ui-form-control>
     </div>

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

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, Validators } from '@angular/forms';
 import { validateEmail } from '../../../validators/email-validator';
+import { organisationB2bDeliveryValidator } from '../../../validators/organisation-delivery-b2b-validator';
 import { ShippingCreateComponent } from './shipping-create.component';
 
 @Component({
@@ -12,30 +13,33 @@ export class ShippingCreateB2BComponent extends ShippingCreateComponent {
   initForm(): FormGroup {
     const fb = this.fb;
 
-    return fb.group({
-      gender: fb.control(undefined, [Validators.required, Validators.min(1)]),
-      title: fb.control(''),
-      firstName: fb.control('', [Validators.required]),
-      lastName: fb.control('', [Validators.required]),
-      organisation: fb.group({
-        name: fb.control(''),
-        department: fb.control(''),
-        vatId: fb.control(''),
-      }),
-      address: fb.group({
-        street: fb.control('', [Validators.required]),
-        streetNumber: fb.control('', [Validators.required]),
-        zipCode: fb.control('', [Validators.required]),
-        city: fb.control('', [Validators.required]),
-        info: fb.control(''),
-        country: fb.control('DEU', [Validators.required]),
-      }),
-      communicationDetails: fb.group({
-        email: fb.control('', [validateEmail]),
-        phone: fb.control(''),
-        mobile: fb.control(''),
-      }),
-      isDefault: fb.control(false),
-    });
+    return fb.group(
+      {
+        gender: fb.control(undefined, [Validators.required, Validators.min(1)]),
+        title: fb.control(''),
+        firstName: fb.control('', [Validators.required]),
+        lastName: fb.control('', [Validators.required]),
+        organisation: fb.group({
+          name: fb.control(''),
+          department: fb.control(''),
+          vatId: fb.control(''),
+        }),
+        address: fb.group({
+          street: fb.control('', [Validators.required]),
+          streetNumber: fb.control('', [Validators.required]),
+          zipCode: fb.control('', [Validators.required]),
+          city: fb.control('', [Validators.required]),
+          info: fb.control(''),
+          country: fb.control('DEU', [Validators.required]),
+        }),
+        communicationDetails: fb.group({
+          email: fb.control('', [validateEmail]),
+          phone: fb.control(''),
+          mobile: fb.control(''),
+        }),
+        isDefault: fb.control(false),
+      },
+      { validators: organisationB2bDeliveryValidator() }
+    );
   }
 }

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

@@ -5,7 +5,10 @@
 
   <form *ngIf="control" [formGroup]="control" (ngSubmit)="submit()">
     <ng-container formGroupName="organisation">
-      <ui-form-control label="Firmenname">
+      <ui-form-control
+        label="Firmenname"
+        [requiredMark]="control.value.lastName && control.value.firstName && control.value.gender ? '' : '*'"
+      >
         <input uiInput type="text" formControlName="name" tabindex="1" />
       </ui-form-control>
       <div class="control-row">
@@ -19,7 +22,7 @@
     </ng-container>
 
     <div class="control-row">
-      <ui-form-control label="Anrede" [clearable]="false" requiredMark="*">
+      <ui-form-control label="Anrede" [clearable]="false" [requiredMark]="control.get('organisation').value.name ? '' : '*'">
         <ui-select formControlName="gender" tabindex="4">
           <ui-select-option [value]="2" label="Herr"></ui-select-option>
           <ui-select-option [value]="4" label="Frau"></ui-select-option>
@@ -38,10 +41,10 @@
     </div>
 
     <div class="control-row">
-      <ui-form-control label="Nachname" requiredMark="*">
+      <ui-form-control label="Nachname" [requiredMark]="control.get('organisation').value.name ? '' : '*'">
         <input uiInput type="text" formControlName="lastName" tabindex="6" />
       </ui-form-control>
-      <ui-form-control label="Vorname" requiredMark="*">
+      <ui-form-control label="Vorname" [requiredMark]="control.get('organisation').value.name ? '' : '*'">
         <input uiInput type="text" formControlName="firstName" tabindex="7" />
       </ui-form-control>
     </div>

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

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { FormGroup, Validators } from '@angular/forms';
 import { validateEmail } from '../../../validators/email-validator';
+import { organisationB2bDeliveryValidator } from '../../../validators/organisation-delivery-b2b-validator';
 import { ShippingEditComponent } from './shipping-edit.component';
 
 @Component({
@@ -14,31 +15,34 @@ export class ShippingEditB2BComponent extends ShippingEditComponent {
     const shippingAddressDTO = await this.shippingAddress$.toPromise();
     const isDefault = await this.isDefault$.toPromise();
 
-    this.control = fb.group({
-      gender: fb.control(shippingAddressDTO?.gender || undefined, [Validators.required, Validators.min(1)]),
-      title: fb.control(shippingAddressDTO?.title),
-      firstName: fb.control(shippingAddressDTO?.firstName, [Validators.required]),
-      lastName: fb.control(shippingAddressDTO?.lastName, [Validators.required]),
-      organisation: fb.group({
-        name: fb.control(shippingAddressDTO?.organisation?.name),
-        department: fb.control(shippingAddressDTO?.organisation?.department),
-        vatId: fb.control(shippingAddressDTO?.organisation?.vatId),
-      }),
-      address: fb.group({
-        street: fb.control(shippingAddressDTO?.address?.street, [Validators.required]),
-        streetNumber: fb.control(shippingAddressDTO?.address?.streetNumber, [Validators.required]),
-        zipCode: fb.control(shippingAddressDTO?.address?.zipCode, [Validators.required]),
-        city: fb.control(shippingAddressDTO?.address?.city, [Validators.required]),
-        info: fb.control(shippingAddressDTO?.address?.info),
-        country: fb.control(shippingAddressDTO?.address?.country || 'DEU', [Validators.required]),
-      }),
-      communicationDetails: fb.group({
-        email: fb.control(shippingAddressDTO?.communicationDetails?.email, [validateEmail]),
-        phone: fb.control(shippingAddressDTO?.communicationDetails?.phone),
-        mobile: fb.control(shippingAddressDTO?.communicationDetails?.mobile),
-      }),
-      isDefault: fb.control(isDefault),
-    });
+    this.control = fb.group(
+      {
+        gender: fb.control(shippingAddressDTO?.gender || undefined, [Validators.required, Validators.min(1)]),
+        title: fb.control(shippingAddressDTO?.title),
+        firstName: fb.control(shippingAddressDTO?.firstName, [Validators.required]),
+        lastName: fb.control(shippingAddressDTO?.lastName, [Validators.required]),
+        organisation: fb.group({
+          name: fb.control(shippingAddressDTO?.organisation?.name),
+          department: fb.control(shippingAddressDTO?.organisation?.department),
+          vatId: fb.control(shippingAddressDTO?.organisation?.vatId),
+        }),
+        address: fb.group({
+          street: fb.control(shippingAddressDTO?.address?.street, [Validators.required]),
+          streetNumber: fb.control(shippingAddressDTO?.address?.streetNumber, [Validators.required]),
+          zipCode: fb.control(shippingAddressDTO?.address?.zipCode, [Validators.required]),
+          city: fb.control(shippingAddressDTO?.address?.city, [Validators.required]),
+          info: fb.control(shippingAddressDTO?.address?.info),
+          country: fb.control(shippingAddressDTO?.address?.country || 'DEU', [Validators.required]),
+        }),
+        communicationDetails: fb.group({
+          email: fb.control(shippingAddressDTO?.communicationDetails?.email, [validateEmail]),
+          phone: fb.control(shippingAddressDTO?.communicationDetails?.phone),
+          mobile: fb.control(shippingAddressDTO?.communicationDetails?.mobile),
+        }),
+        isDefault: fb.control(isDefault),
+      },
+      { validators: organisationB2bDeliveryValidator() }
+    );
     this.cdr.markForCheck();
   }
 }

apps/page/customer/src/lib/validators/organisation-delivery-b2b-validator.ts

@@ -0,0 +1,82 @@
+import { AbstractControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
+
+export function organisationB2bDeliveryValidator(): ValidatorFn | null {
+  return (control: FormGroup): ValidationErrors | null => {
+    let gender: AbstractControl;
+    let firstName: AbstractControl;
+    let lastName: AbstractControl;
+    let organisation: AbstractControl;
+    let isOrganisationSet: boolean;
+    let isNameSet: boolean;
+
+    // For Customer Create Form with Different Shipping Address
+    if (control.get('differentShippingAddress') !== null) {
+      gender = control.get('shippingAddress').get('gender');
+      firstName = control.get('shippingAddress').get('firstName');
+      lastName = control.get('shippingAddress').get('lastName');
+      organisation = control.get('shippingAddress').get('organisation').get('name');
+      isOrganisationSet = !!organisation.value;
+      isNameSet = gender.value !== 0 && !!firstName.value && !!lastName.value;
+
+      if (control.get('differentShippingAddress').value === true) {
+        return validate(gender, firstName, lastName, organisation, isOrganisationSet, isNameSet);
+      }
+    } else {
+      // Customer Shipping Create or Shipping Edit Forms
+      gender = control.get('gender');
+      firstName = control.get('firstName');
+      lastName = control.get('lastName');
+      organisation = control.get('organisation').get('name');
+      isOrganisationSet = !!organisation.value;
+      isNameSet = gender.value !== 0 && !!firstName.value && !!lastName.value;
+      return validate(gender, firstName, lastName, organisation, isOrganisationSet, isNameSet);
+    }
+  };
+}
+
+function setNameValidation(gender: AbstractControl, firstName: AbstractControl, lastName: AbstractControl) {
+  gender.setValidators([Validators.required, Validators.min(1)]);
+  firstName.setValidators([Validators.required]);
+  lastName.setValidators([Validators.required]);
+}
+
+function resetNameValidation(gender: AbstractControl, firstName: AbstractControl, lastName: AbstractControl) {
+  gender.setValidators(null);
+  firstName.setValidators(null);
+  lastName.setValidators(null);
+  gender.setErrors(null);
+  firstName.setErrors(null);
+  lastName.setErrors(null);
+}
+
+function setOrganisationValidation(organisation: AbstractControl) {
+  organisation.setValidators([Validators.required]);
+}
+
+function resetOrganisationValidation(organisation: AbstractControl) {
+  organisation.setValidators(null);
+  organisation.setErrors(null);
+}
+
+function validate(
+  gender: AbstractControl,
+  firstName: AbstractControl,
+  lastName: AbstractControl,
+  organisation: AbstractControl,
+  isOrganisationSet: boolean,
+  isNameSet: boolean
+): ValidationErrors | null {
+  if (!isOrganisationSet && !isNameSet) {
+    setNameValidation(gender, firstName, lastName);
+    setOrganisationValidation(organisation);
+    return { namesNotSet: true };
+  } else if (!isOrganisationSet && isNameSet) {
+    resetOrganisationValidation(organisation);
+    return null;
+  } else if (isOrganisationSet && !isNameSet) {
+    resetNameValidation(gender, firstName, lastName);
+    return null;
+  } else if (isOrganisationSet && isNameSet) {
+    return null;
+  }
+}