feat: add functionality to create and save new contacts

src/app/components/contacts/contact-detail/contact-detail.component.html

@@ -84,7 +84,7 @@
         <a [href]="'tel:' + selectedUser.phone">
           <span>{{ selectedUser.phone }}</span>
         </a>
-        } @if(selectedUser.uId !== "") {
+        } @if(selectedUser.id !== "") {
         <p>{{ "contacts.contactLastOnline" | translate }}</p>
         @if(selectedUser.isOnline) {
         <span>{{ "contacts.contactLastOnlineTxt" | translate }}</span>

src/app/interfaces/user.interface.ts

@@ -1,6 +1,5 @@
 export interface User {
   id?: string;
-  uId: string;
   firstName: string;
   lastName: string;
   email: string;
@@ -9,7 +8,7 @@ export interface User {
   color: string;
   isOnline: boolean;
   isContactOnly: boolean;
-  lastLogin: number;
+  lastLogin: number | null;
 }
 
 export interface UserSummary {

src/app/services/api.service.ts

@@ -77,4 +77,8 @@ export class ApiService {
   deleteUserById(userId: string): Observable<User> {
     return this.request<User>('DELETE', `/api/users/${userId}/`);
   }
+
+  saveNewUser(user: User): Observable<User> {
+    return this.request<User>('POST', '/api/users/', user);
+  }
 }

src/app/services/firebase.service.ts

@@ -243,7 +243,7 @@ export class FirebaseService implements OnDestroy {
    * @returns An array of User objects with the given userUid.
    */
   getUserDataFromUid(userUid: string): User[] {
-    return this.getAllUsers().filter((user) => user.uId === userUid);
+    return this.getAllUsers().filter((user) => user.id === userUid);
   }
 
   /**

src/app/services/login.service.ts

@@ -107,7 +107,6 @@ export class LoginService {
         const user = userCredential.user;
 
         const userDataToSave: User = {
-          uId: user.uid,
           email: user.email || '',
           firstName: registerData.firstName
             ? registerData.firstName.charAt(0).toUpperCase() +
@@ -161,7 +160,6 @@ export class LoginService {
             const displayName = user.displayName || '';
             const [firstName = '', lastName = ''] = displayName.split(' ');
             this.createUserInFirestore({
-              uId: user.uid,
               email: user.email || 'no mail',
               firstName: firstName.charAt(0).toUpperCase() + firstName.slice(1),
               lastName: lastName.charAt(0).toUpperCase() + lastName.slice(1),
@@ -190,7 +188,6 @@ export class LoginService {
    */
   async createUserInFirestore(user: User) {
     const userDataToSave: User = {
-      uId: user.uId,
       email: user.email,
       firstName: user.firstName || '',
       lastName: user.lastName || '',
@@ -204,7 +201,7 @@ export class LoginService {
     const usersCollection = collection(this.firestore, 'users');
     try {
       const docRef = await addDoc(usersCollection, userDataToSave);
-      this.ifExistUser(user.uId);
+      //this.ifExistUser(user.uId);
     } catch (error) {
       console.error(error);
     }

src/app/shared/components/overlay/contact-overlay/contact-form/contact-form.component.ts

@@ -10,9 +10,14 @@ import {
 import { FormsModule, NgForm } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
 import { FormBtnComponent } from '../../../buttons/form-btn/form-btn.component';
-import { User } from '@sentry/angular';
+
 import { FirebaseService } from '../../../../../services/firebase.service';
 import { ResizeService } from '../../../../../services/resize.service';
+import { lastValueFrom } from 'rxjs';
+import { ApiService } from '../../../../../services/api.service';
+import { ToastNotificationService } from '../../../../../services/toast-notification.servic';
+import { UpdateNotifierService } from '../../../../../services/update-notifier.service';
+import { User } from '../../../../../interfaces/user.interface';
 
 @Component({
   selector: 'app-contact-form',
@@ -31,7 +36,10 @@ export class ContactFormComponent implements OnInit, OnChanges {
 
   constructor(
     public firebaseService: FirebaseService,
-    public resizeService: ResizeService
+    public resizeService: ResizeService,
+    private apiService: ApiService,
+    private toastNotificationService: ToastNotificationService,
+    private updateNotifierService: UpdateNotifierService
   ) {}
 
   contactData = {
@@ -44,7 +52,6 @@ export class ContactFormComponent implements OnInit, OnChanges {
   };
 
   userData: User = {
-    uId: '',
     firstName: '',
     lastName: '',
     email: '',
@@ -63,7 +70,7 @@ export class ContactFormComponent implements OnInit, OnChanges {
    * properties of the userData object.
    */
   ngOnInit() {
-    if (this.selectedUserExists) {
+    if (!this.selectedUserExists) {
       this.userData = {
         ...this.userData,
         color: this.randomColor,
@@ -212,14 +219,50 @@ export class ContactFormComponent implements OnInit, OnChanges {
    */
   onSubmit(ngForm: NgForm) {
     if (ngForm.submitted && ngForm.form.valid) {
-      this.newColor !== ''
-        ? (this.contactData.color = this.newColor)
-        : (this.contactData.color = this.currentColor);
-      console.log('Save');
-      this.closeDialog();
+      this.contactData.color =
+        this.newColor && this.newColor !== ''
+          ? this.newColor
+          : this.currentColor || this.randomColor;
+      this.saveContact();
     }
   }
 
+  async saveContact() {
+    try {
+      const userData: User = {
+        firstName: this.contactData.firstName,
+        lastName: this.contactData.lastName,
+        email: this.contactData.email,
+        phone: this.contactData.phone,
+        initials: this.contactData.initials,
+        color: this.contactData.color || this.randomColor,
+        isContactOnly: true,
+        isOnline: false,
+        lastLogin: null,
+      };
+
+      const snakeCaseUserData = this.convertCamelToSnake(userData);
+      await lastValueFrom(this.apiService.saveNewUser(snakeCaseUserData));
+      this.toastNotificationService.createContactSuccessToast();
+      this.updateNotifierService.notifyUpdate('contact');
+      this.closeDialog();
+    } catch (error) {
+      console.error('Fehler beim Speichern des Kontakts:', error);
+    }
+  }
+
+  convertCamelToSnake(obj: any): any {
+    const newObj: any = {};
+    Object.keys(obj).forEach((key) => {
+      const snakeKey = key.replace(
+        /[A-Z]/g,
+        (match) => `_${match.toLowerCase()}`
+      );
+      newObj[snakeKey] = obj[key];
+    });
+    return newObj;
+  }
+
   closeDialog() {
     this.closeDialogEmitter.emit('');
   }

src/app/shared/components/overlay/contact-overlay/contact-overlay.component.html

@@ -57,6 +57,7 @@
       <div class="form">
         <app-contact-form
           (initialsEmitter)="initialsEmitter($event)"
+          (closeDialogEmitter)="closeDialog()"
           [randomColor]="randomColor"
           [newColor]="newColor"
         ></app-contact-form>