#1441 Kundendaten erfassen Validierung für Name, Phone und Ausgabe der Server Errors

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

@@ -5,7 +5,7 @@ import { ApplicationService } from '@core/application';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { CrmCustomerService } from '@domain/crm';
 import { CustomerDTO } from '@swagger/crm';
-import { UiModalService } from '@ui/modal';
+import { UiMessageModalComponent, UiModalService } from '@ui/modal';
 import { AddressSelectionModalService } from '../modals/address-selection-modal/address-selection-modal.service';
 import { CustomerCreateComponentBase } from './customer-create.component';
 import { validateEmail } from '../validators/email-validator';
@@ -69,8 +69,8 @@ export class CustomerCreateB2BComponent extends CustomerCreateComponentBase impl
       }),
       gender: fb.control(customer?.gender || 0),
       title: fb.control(customer?.title),
-      firstName: fb.control(customer?.firstName),
-      lastName: fb.control(customer?.lastName),
+      firstName: fb.control(customer?.firstName, [Validators.pattern(this.NAME_PATTERN)]),
+      lastName: fb.control(customer?.lastName, [Validators.pattern(this.NAME_PATTERN)]),
       address: fb.group({
         street: fb.control(customer?.address?.street, [Validators.required]),
         streetNumber: fb.control(customer?.address?.streetNumber, [Validators.required]),
@@ -81,8 +81,8 @@ export class CustomerCreateB2BComponent extends CustomerCreateComponentBase impl
       }),
       communicationDetails: fb.group({
         email: fb.control(customer?.communicationDetails?.email, [validateEmail]),
-        phone: fb.control(customer?.communicationDetails?.phone),
-        mobile: fb.control(customer?.communicationDetails?.mobile),
+        phone: fb.control(customer?.communicationDetails?.phone, [Validators.pattern(this.PHONE_PATTERN)]),
+        mobile: fb.control(customer?.communicationDetails?.mobile, [Validators.pattern(this.PHONE_PATTERN)]),
       }),
       differentShippingAddress: fb.control(false),
       shippingAddress: fb.group({
@@ -143,21 +143,26 @@ export class CustomerCreateB2BComponent extends CustomerCreateComponentBase impl
             throw new Error(shippingResponse.message);
           }
         } catch (error) {
-          this.control.enable();
           console.error(error);
-          return;
         }
       }
 
       if (response.error) {
+        this.control.enable();
         throw new Error(response.message);
       } else {
         this.removeBreadcrumb();
         this.router.navigate(['/customer', response.result.id]);
       }
     } catch (error) {
-      this.control.enable();
       console.error(error);
+      this.modal.open({
+        content: UiMessageModalComponent,
+        data: { title: 'Es ist ein Fehler aufgetreten', message: Object.values(error.error.invalidProperties).join(', ') },
+      });
     }
+
+    this.control.enable();
+    this.control.reset(this.control.value);
   }
 }

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

@@ -5,7 +5,7 @@ import { ApplicationService } from '@core/application';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { CrmCustomerService } from '@domain/crm';
 import { CustomerDTO } from '@swagger/crm';
-import { UiModalService } from '@ui/modal';
+import { UiMessageModalComponent, UiModalService } from '@ui/modal';
 import { AddressSelectionModalService } from '../modals/address-selection-modal/address-selection-modal.service';
 import { CustomerCreateComponentBase } from './customer-create.component';
 import { validateEmail } from '../validators/email-validator';
@@ -82,8 +82,8 @@ export class CustomerCreateBranchComponent extends CustomerCreateComponentBase i
       }),
       gender: fb.control(customer?.gender || 0),
       title: fb.control(customer?.title),
-      firstName: fb.control(customer?.firstName, [Validators.required]),
-      lastName: fb.control(customer?.lastName, [Validators.required]),
+      firstName: fb.control(customer?.firstName, [Validators.required, Validators.pattern(this.NAME_PATTERN)]),
+      lastName: fb.control(customer?.lastName, [Validators.required, Validators.pattern(this.NAME_PATTERN)]),
       dateOfBirth: fb.control(customer?.dateOfBirth, [UiValidators.date]),
       address: fb.group({
         street: fb.control(customer?.address?.street),
@@ -95,8 +95,8 @@ export class CustomerCreateBranchComponent extends CustomerCreateComponentBase i
       }),
       communicationDetails: fb.group({
         email: fb.control(customer?.communicationDetails?.email, [validateEmail]),
-        phone: fb.control(customer?.communicationDetails?.phone),
-        mobile: fb.control(customer?.communicationDetails?.mobile),
+        phone: fb.control(customer?.communicationDetails?.phone, [Validators.pattern(this.PHONE_PATTERN)]),
+        mobile: fb.control(customer?.communicationDetails?.mobile, [Validators.pattern(this.PHONE_PATTERN)]),
       }),
       differentShippingAddress: fb.control(false),
       shippingAddress: fb.group({
@@ -152,9 +152,7 @@ export class CustomerCreateBranchComponent extends CustomerCreateComponentBase i
             throw new Error(shippingResponse.message);
           }
         } catch (error) {
-          this.control.enable();
           console.error(error);
-          return;
         }
       }
 
@@ -165,8 +163,14 @@ export class CustomerCreateBranchComponent extends CustomerCreateComponentBase i
         this.router.navigate(['/customer', response.result.id]);
       }
     } catch (error) {
-      this.control.enable();
       console.error(error);
+      this.modal.open({
+        content: UiMessageModalComponent,
+        data: { title: 'Es ist ein Fehler aufgetreten', message: Object.values(error.error.invalidProperties).join(', ') },
+      });
     }
+
+    this.control.enable();
+    this.control.reset(this.control.value);
   }
 }

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

@@ -6,7 +6,7 @@ import { BreadcrumbService } from '@core/breadcrumb';
 import { CrmCustomerService } from '@domain/crm';
 import { CustomerDTO } from '@swagger/crm';
 import { UiValidators } from '@ui/common';
-import { UiModalService } from '@ui/modal';
+import { UiMessageModalComponent, UiModalService } from '@ui/modal';
 import { AddressSelectionModalService } from '../modals/address-selection-modal/address-selection-modal.service';
 import { CustomerCreateComponentBase } from './customer-create.component';
 import { validateEmail } from '../validators/email-validator';
@@ -83,8 +83,8 @@ export class CustomerCreateGuestComponent extends CustomerCreateComponentBase im
       }),
       gender: fb.control(customer?.gender || 0, [Validators.required]),
       title: fb.control(customer?.title),
-      firstName: fb.control(customer?.firstName, [Validators.required]),
-      lastName: fb.control(customer?.lastName, [Validators.required]),
+      firstName: fb.control(customer?.firstName, [Validators.required, Validators.pattern(this.NAME_PATTERN)]),
+      lastName: fb.control(customer?.lastName, [Validators.required, Validators.pattern(this.NAME_PATTERN)]),
       dateOfBirth: fb.control(customer?.dateOfBirth, [UiValidators.date]),
       address: fb.group({
         street: fb.control(customer?.address?.street, [Validators.required]),
@@ -96,8 +96,8 @@ export class CustomerCreateGuestComponent extends CustomerCreateComponentBase im
       }),
       communicationDetails: fb.group({
         email: fb.control(customer?.communicationDetails?.email, [Validators.required, validateEmail]),
-        phone: fb.control(customer?.communicationDetails?.phone),
-        mobile: fb.control(customer?.communicationDetails?.mobile),
+        phone: fb.control(customer?.communicationDetails?.phone, [Validators.pattern(this.PHONE_PATTERN)]),
+        mobile: fb.control(customer?.communicationDetails?.mobile, [Validators.pattern(this.PHONE_PATTERN)]),
       }),
       differentShippingAddress: fb.control(false),
       shippingAddress: fb.group({
@@ -164,9 +164,7 @@ export class CustomerCreateGuestComponent extends CustomerCreateComponentBase im
             throw new Error(shippingResponse.message);
           }
         } catch (error) {
-          this.control.enable();
           console.error(error);
-          return;
         }
       }
 
@@ -177,8 +175,14 @@ export class CustomerCreateGuestComponent extends CustomerCreateComponentBase im
         this.router.navigate(['/customer', response.result.id]);
       }
     } catch (error) {
-      this.control.enable();
       console.error(error);
+      this.modal.open({
+        content: UiMessageModalComponent,
+        data: { title: 'Es ist ein Fehler aufgetreten', message: Object.values(error.error.invalidProperties).join(', ') },
+      });
     }
+
+    this.control.enable();
+    this.control.reset(this.control.value);
   }
 }

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

@@ -7,7 +7,7 @@ import { CheckoutService } from '@domain/checkout';
 import { CrmCustomerService } from '@domain/crm';
 import { CustomerDTO } from '@swagger/crm';
 import { UiValidators } from '@ui/common';
-import { UiModalService } from '@ui/modal';
+import { UiMessageModalComponent, UiModalService } from '@ui/modal';
 import { map } from 'rxjs/operators';
 import { AddressSelectionModalService } from '../modals/address-selection-modal/address-selection-modal.service';
 import { validateEmail } from '../validators/email-validator';
@@ -100,8 +100,8 @@ export class CustomerCreateOnlineComponent extends CustomerCreateComponentBase i
       }),
       gender: fb.control(customer?.gender || undefined, [Validators.required, Validators.min(2)]),
       title: fb.control(customer?.title),
-      firstName: fb.control(customer?.firstName, [Validators.required]),
-      lastName: fb.control(customer?.lastName, [Validators.required]),
+      firstName: fb.control(customer?.firstName, [Validators.required, Validators.pattern(this.NAME_PATTERN)]),
+      lastName: fb.control(customer?.lastName, [Validators.required, Validators.pattern(this.NAME_PATTERN)]),
       dateOfBirth: fb.control(customer?.dateOfBirth, [UiValidators.date]),
       address: fb.group({
         street: fb.control(customer?.address?.street, [Validators.required]),
@@ -113,8 +113,8 @@ export class CustomerCreateOnlineComponent extends CustomerCreateComponentBase i
       }),
       communicationDetails: fb.group({
         email: fb.control(customer?.communicationDetails?.email, [Validators.required, validateEmail], [this.emailExistsValidator]),
-        phone: fb.control(customer?.communicationDetails?.phone),
-        mobile: fb.control(customer?.communicationDetails?.mobile),
+        phone: fb.control(customer?.communicationDetails?.phone, [Validators.pattern(this.PHONE_PATTERN)]),
+        mobile: fb.control(customer?.communicationDetails?.mobile, [Validators.pattern(this.PHONE_PATTERN)]),
       }),
       differentShippingAddress: fb.control(false),
       shippingAddress: fb.group({
@@ -183,8 +183,14 @@ export class CustomerCreateOnlineComponent extends CustomerCreateComponentBase i
         this.router.navigate(['/customer', response.result.id]);
       }
     } catch (error) {
-      this.control.enable();
       console.error(error);
+      this.modal.open({
+        content: UiMessageModalComponent,
+        data: { title: 'Es ist ein Fehler aufgetreten', message: Object.values(error.error.invalidProperties).join(', ') },
+      });
     }
+
+    this.control.enable();
+    this.control.reset(this.control.value);
   }
 }

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

@@ -14,6 +14,9 @@ import { ChangeDetectorRef } from '@angular/core';
 import { isBoolean } from '@utils/common';
 
 export abstract class CustomerCreateComponentBase {
+  readonly PHONE_PATTERN = '^[0-9]+$';
+  readonly NAME_PATTERN = '^[A-Za-zäÄöÖüÜßñÑáéíóúÁÉÍÓÚàèìòùÀÈÌÒÙ ]+$';
+
   emailExistsValidator: AsyncValidatorFn = async (control): Promise<ValidationErrors | null> => {
     if (control.value) {
       if ((await this.customerService.emailExists(control.value).toPromise())?.result) {

apps/ui/form-control/src/lib/ui-form-first-error.pipe.ts

@@ -15,6 +15,8 @@ export class UiFormControlFirstErrorPipe implements PipeTransform {
           return `${label} wird benötigt`;
         case 'email':
           return `${label} ist ungültig`;
+        case 'pattern':
+          return `${label} ist ungültig`;
         default:
           return errors[error];
       }

apps/ui/modal/src/lib/index.ts

@@ -2,6 +2,7 @@
 export * from './defs';
 export * from './modal.component';
 export * from './debug-modal.component';
+export * from './message-modal.component';
 export * from './modal.module';
 export * from './modal.service';
 // end:ng42.barrel

apps/ui/modal/src/lib/message-modal.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+import { UiModalRef } from './defs';
+
+@Component({
+  selector: 'ui-message-modal',
+  template: `
+    <h1 class="title">{{ modalRef.data.title }}</h1>
+    <p class="message">{{ modalRef.data.message }}</p>
+
+    <div class="actions">
+      <button (click)="modalRef.close()">Schließen</button>
+    </div>
+  `,
+  styleUrls: ['./modal.component.scss'],
+})
+export class UiMessageModalComponent implements OnInit {
+  constructor(public modalRef: UiModalRef) {}
+
+  ngOnInit() {}
+}

apps/ui/modal/src/lib/modal.component.scss

@@ -1,3 +1,20 @@
 :host {
   @apply flex flex-col box-border bg-white p-4 w-full rounded-card;
 }
+
+.title {
+  @apply text-card-sub font-bold text-center;
+}
+
+.message {
+  @apply text-center font-semibold;
+}
+
+.actions {
+  @apply text-center mt-3;
+
+  button {
+    @apply bg-brand rounded-full text-white text-center text-cta-l font-bold cursor-pointer border-none outline-none;
+    padding: 12px 25px;
+  }
+}

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

@@ -4,11 +4,12 @@ import { ModuleWithProviders, NgModule } from '@angular/core';
 import { UiModalComponent } from './modal.component';
 import { UiModalService } from './modal.service';
 import { UiDebugModalComponent } from './debug-modal.component';
+import { UiMessageModalComponent } from './message-modal.component';
 
 @NgModule({
   imports: [CommonModule, OverlayModule],
-  declarations: [UiModalComponent, UiDebugModalComponent],
-  exports: [UiModalComponent, UiDebugModalComponent],
+  declarations: [UiModalComponent, UiDebugModalComponent, UiMessageModalComponent],
+  exports: [UiModalComponent, UiDebugModalComponent, UiMessageModalComponent],
 })
 export class UiModalModule {
   static forRoot(): ModuleWithProviders<UiModalModule> {