added new user to firebase

src/app/components/contacts/contact-edit-new/contact-edit-new.component.html

@@ -50,6 +50,7 @@
       <div class="form">
         <app-contact-form
           (inititalsEmitter)="inititalsEmitter($event)"
+          [randomColor]="randomColor"
         ></app-contact-form>
       </div>
     </div>

src/app/components/contacts/contact-edit-new/contact-edit-new.component.ts

@@ -20,22 +20,10 @@ import { User } from '../../../interfaces/user.interface';
   styleUrl: './contact-edit-new.component.scss',
 })
 export class ContactEditNewComponent implements OnInit {
-  @Input() currentUserId: string | undefined;
+  @Input() currentUserId: string = '';
   randomColor: string = '';
   userInitials: string = '';
 
-  userData: User = {
-    uId: '',
-    firstName: '',
-    lastName: '',
-    email: '',
-    phone: '',
-    initials: '',
-    color: this.randomColor,
-    status: false,
-    lastLogin: 0,
-  };
-
   constructor(
     public firebaseService: FirebaseService,
     public sharedService: SharedService

src/app/components/contacts/contact-edit-new/contact-form/contact-form.component.html

@@ -1,6 +1,7 @@
 <section>
   <form
     (ngSubmit)="onSubmit(contactForm)"
+    (keyup)="updateFormData()"
     #contactForm="ngForm"
     onsubmit="return false"
     class="contact-formular"
@@ -19,7 +20,6 @@
         }}"
         [(ngModel)]="contactData.firstName"
         autocomplete="off"
-        (keyup)="updateFormData()"
         required
       />
       @if (sharedService.isContactViewMedia) {
@@ -42,7 +42,6 @@
         }}"
         [(ngModel)]="contactData.lastName"
         autocomplete="off"
-        (keyup)="updateFormData()"
         required
       />
     </div>

src/app/components/contacts/contact-edit-new/contact-form/contact-form.component.ts

@@ -3,6 +3,7 @@ import {
   EventEmitter,
   Input,
   OnChanges,
+  OnInit,
   Output,
   SimpleChanges,
 } from '@angular/core';
@@ -11,6 +12,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { SharedService } from '../../../../services/shared.service';
 import { FirebaseService } from '../../../../services/firebase.service';
 import { FormBtnComponent } from '../../../../shared/components/buttons/form-btn/form-btn.component';
+import { User } from '../../../../interfaces/user.interface';
 
 @Component({
   selector: 'app-contact-form',
@@ -19,8 +21,9 @@ import { FormBtnComponent } from '../../../../shared/components/buttons/form-btn
   templateUrl: './contact-form.component.html',
   styleUrl: './contact-form.component.scss',
 })
-export class ContactFormComponent implements OnChanges {
+export class ContactFormComponent implements OnInit, OnChanges {
-  @Input() currentUserId: string | undefined;
+  @Input() currentUserId: string = '';
+  @Input() randomColor: string = '';
   @Output() inititalsEmitter = new EventEmitter<string>();
 
   constructor(
@@ -37,32 +40,66 @@ export class ContactFormComponent implements OnChanges {
     phone: '',
   };
 
+  userData: User = {
+    uId: '',
+    firstName: '',
+    lastName: '',
+    email: '',
+    phone: '',
+    initials: '',
+    color: '',
+    status: false,
+    lastLogin: 0,
+  };
+
+  ngOnInit() {
+    this.userData = {
+      ...this.userData,
+      color: this.randomColor,
+      lastLogin: new Date().getTime(),
+    };
+  }
+
   ngOnChanges(changes: SimpleChanges) {
     if (changes['currentUserId']) {
       this.updateContactData();
     }
   }
 
-  addInitials() {
+  updateFormData() {
-    const initials = this.contactData
+    if (!this.currentUserId) {
-      ? this.contactData.firstName.slice(0, 1) +
+      this.updateInitials();
-        this.contactData.lastName.slice(0, 1)
+      this.updateUserData();
-      : '';
+    }
-    this.inititalsEmitter.emit(initials);
   }
 
-  updateFormData() {
+  updateInitials() {
-    console.log(this.contactData);
-    this.addInitials();
     const initials = this.contactData
       ? this.contactData.firstName.slice(0, 1).toUpperCase() +
         this.contactData.lastName.slice(0, 1).toUpperCase()
       : '';
-    console.log(initials);
+    this.userData = {
+      ...this.userData,
+      initials: initials,
+    };
+    this.inititalsEmitter.emit(initials);
+  }
+
+  updateUserData() {
+    this.userData = {
+      ...this.userData,
+      firstName:
+        this.contactData.firstName.charAt(0).toUpperCase() +
+        this.contactData.firstName.slice(1).toLowerCase(),
+      lastName:
+        this.contactData.lastName.charAt(0).toUpperCase() +
+        this.contactData.lastName.slice(1).toLowerCase(),
+      email: this.contactData.email,
+      phone: this.contactData.phone,
+    };
   }
 
   private updateContactData() {
-    if (this.currentUserId) {
     this.contactData.firstName = this.firebaseService
       .getUserDetails(this.currentUserId, 'firstName')
       .join(', ');
@@ -76,7 +113,6 @@ export class ContactFormComponent implements OnChanges {
       .getUserDetails(this.currentUserId, 'phone')
       .join(', ');
   }
-  }
 
   onSubmit(ngForm: NgForm) {
     if (ngForm.submitted && ngForm.form.valid) {
@@ -86,7 +122,9 @@ export class ContactFormComponent implements OnChanges {
           this.contactData
         );
       } else {
-        console.log('new contact');
+        const { id, ...taskWithoutIds } = this.userData;
+        this.firebaseService.addNewUser(taskWithoutIds);
+        console.log('add new contact');
       }
       this.closeEditDialog();
     }

src/app/services/firebase.service.ts

@@ -144,6 +144,12 @@ export class FirebaseService implements OnDestroy {
     });
   }
 
+  async addNewUser(userData: User) {
+    await addDoc(collection(this.firestore, 'users'), userData).catch((err) => {
+      console.error(err);
+    });
+  }
+
   ngOnDestroy() {
     this.unsubTask();
     this.unsubUser();