feat: implemented editing functionality for Contact; optimized data initialization in ContactsComponent

src/app/components/contacts/contacts.component.ts

@@ -5,7 +5,7 @@ import { ContactDetailComponent } from './contact-detail/contact-detail.componen
 import { FirebaseService } from '../../services/firebase.service';
 import { TranslateModule } from '@ngx-translate/core';
 import { UserService } from '../../services/user.service';
-import { finalize, Subject, takeUntil } from 'rxjs';
+import { finalize, firstValueFrom, Subject, takeUntil } from 'rxjs';
 import { OverlayService } from '../../services/overlay.service';
 import { UpdateNotifierService } from '../../services/update-notifier.service';
 
@@ -32,44 +32,57 @@ export class ContactsComponent {
     private updateNotifierService: UpdateNotifierService
   ) {}
 
-  /**
-   * Trigger onResize when the component is initialized
-   */
   ngOnInit(): void {
     this.onResize();
-    this.loadAllUsers();
-    this.loadCurrentUser();
-    this.subscribeToUserUpdates();
+    this.initializeData();
   }
 
-  loadAllUsers(): void {
-    this.isLoading = true;
+  private async initializeData(): Promise<void> {
+    try {
+      await this.loadAllUsers();
+      this.loadCurrentUser();
+      this.subscribeToUserUpdates();
+    } catch (error) {
+      console.error('Error during initialization:', error);
+    }
+  }
 
+  private async loadAllUsers(): Promise<void> {
+    this.isLoading = true;
+    try {
+      const response = await firstValueFrom(
         this.userService
           .getUsers()
           .pipe(finalize(() => (this.isLoading = false)))
-      .subscribe({
-        next: (response) => {
+      );
       this.allUsers = response;
-        },
-        error: (err) => {
-          console.error('Error loading the tasks:', err);
-        },
-      });
+    } catch (err) {
+      console.error('Error loading the users:', err);
+    }
   }
 
-  private subscribeToUserUpdates() {
+  private async subscribeToUserUpdates(): Promise<void> {
     this.updateNotifierService.contactUpdated$
       .pipe(takeUntil(this.destroy$))
-      .subscribe((userId: string) => {
+      .subscribe(async (userId: string) => {
+        this.selectedUserId = null;
+        try {
+          await this.loadAllUsers();
           this.selectedUserId = userId;
-        this.loadAllUsers();
+        } catch (error) {
+          console.error('Error while waiting for user load:', error);
+        }
       });
   }
 
-  loadCurrentUser(): void {
-    this.userService.getCurrentUser().subscribe((userData) => {
+  private loadCurrentUser(): void {
+    this.userService.getCurrentUser().subscribe({
+      next: (userData) => {
         this.currentUser = userData;
+      },
+      error: (err) => {
+        console.error('Error loading current user:', err);
+      },
     });
   }
 
@@ -119,4 +132,9 @@ export class ContactsComponent {
       this.showAllUsers = true;
     }
   }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }

src/app/services/api.service.ts

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

src/app/services/toast-notification.servic.ts

@@ -45,6 +45,10 @@ export class ToastNotificationService {
     this.createSuccessToast('Contact deleted successfully!', 'Contact Deleted');
   }
 
+  updateContactSuccessToast(): void {
+    this.createSuccessToast('Contact updated successfully!', 'Contact Updated');
+  }
+
   // Helperfunctions
 
   createSuccessToast(message: string, title: string = 'Success'): void {

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

@@ -223,11 +223,30 @@ export class ContactFormComponent implements OnInit, OnChanges {
         this.newColor && this.newColor !== ''
           ? this.newColor
           : this.currentColor || this.randomColor;
-      this.saveContact();
+
+      if (this.selectedUserExists) {
+        this.updateContact();
+      } else {
+        this.saveNewContact();
+      }
     }
   }
 
-  async saveContact() {
+  async updateContact() {
+    try {
+      const snakeCaseUserData = this.convertCamelToSnake(this.contactData);
+      const updatedUser = await lastValueFrom(
+        this.apiService.updateUser(snakeCaseUserData, this.selectedUser.id)
+      );
+      this.toastNotificationService.updateContactSuccessToast();
+      this.updateNotifierService.notifyUpdate('contact', updatedUser.id);
+      this.closeDialog();
+    } catch (error) {
+      console.error('Error updating the contact:', error);
+    }
+  }
+
+  async saveNewContact() {
     try {
       const userData: User = {
         firstName: this.contactData.firstName,
@@ -249,7 +268,7 @@ export class ContactFormComponent implements OnInit, OnChanges {
       this.updateNotifierService.notifyUpdate('contact', savedUser.id);
       this.closeDialog();
     } catch (error) {
-      console.error('Fehler beim Speichern des Kontakts:', error);
+      console.error('Error saving the contact:', error);
     }
   }