fix: minor bug fixes & migrated contact deletion to Django REST framework

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

@@ -7,12 +7,12 @@
         {{ "contacts.headlineDescription" | translate }}
       </div>
     </div>
-    <div class="btn-back">
+    <div
-      <img
+      class="btn-back"
       [ngClass]="{ 'd-none': !selectedUserId }"
       (click)="closeUserDetails()"
-        src="./../../../../assets/img/arrow-left.svg"
+    >
-      />
+      <img src="./../../../../assets/img/arrow-left.svg" />
     </div>
   </div>
   @if (selectedUser && selectedUserId) {
@@ -57,7 +57,7 @@
           </div>
           @if (selectedUser.isContactOnly || currentUser && selectedUser.id !==
           currentUser.id) {
-          <div class="btn btn-delete" (click)="openDeleteContactDialog()">
+          <div class="btn btn-delete" (click)="deleteContact(selectedUserId)">
             <img src="./../../../../assets/img/contact/delete.svg" alt="" />
             <p>
               {{ "contacts.btnDelete0" | translate }}

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

@@ -177,6 +177,10 @@
   }
 }
 
+.d-none {
+  display: none;
+}
+
 /*------------- ANIMATION -------------*/
 
 .animation-coming-in {

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

@@ -9,9 +9,11 @@ import { CommonModule } from '@angular/common';
 import { FirebaseService } from '../../../services/firebase.service';
 import { TranslateModule } from '@ngx-translate/core';
 import { UserService } from '../../../services/user.service';
-import { finalize } from 'rxjs';
+import { finalize, lastValueFrom } from 'rxjs';
 import { User } from '../../../interfaces/user.interface';
 import { OverlayService } from '../../../services/overlay.service';
+import { ApiService } from '../../../services/api.service';
+import { ToastNotificationService } from '../../../services/toast-notification.servic';
 
 @Component({
   selector: 'app-contact-detail',
@@ -32,7 +34,9 @@ export class ContactDetailComponent {
   constructor(
     public firebaseService: FirebaseService,
     private overlayService: OverlayService,
-    private userService: UserService
+    private userService: UserService,
+    private apiService: ApiService,
+    private toastNotificationService: ToastNotificationService
   ) {}
 
   ngOnChanges(changes: SimpleChanges) {
@@ -97,8 +101,13 @@ export class ContactDetailComponent {
    * Opens the delete contact dialog by setting the appropriate flags in the shared service.
    * This method is used by the contact details component to open the delete contact dialog when the user clicks the delete button.
    */
-  openDeleteContactDialog() {
+  async deleteContact(userId: string) {
-    // TODO
+    try {
-    this.isMobileNavbarOpen = false;
+      await lastValueFrom(this.apiService.deleteUserById(userId));
+      this.toastNotificationService.deleteContactSuccessToast();
+      this.closeUserDetails();
+    } catch (error) {
+      console.error(error);
+    }
   }
 }

src/app/services/api.service.ts

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

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

@@ -35,6 +35,16 @@ export class ToastNotificationService {
     this.createInfoToast('Task successfully moved!', 'Task Moved');
   }
 
+  // Contacts
+
+  createContactSuccessToast(): void {
+    this.createSuccessToast('Contact created successfully!', 'Contact Created');
+  }
+
+  deleteContactSuccessToast(): void {
+    this.createSuccessToast('Contact deleted successfully!', 'Contact Deleted');
+  }
+
   // Helperfunctions
 
   createSuccessToast(message: string, title: string = 'Success'): void {

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

@@ -121,7 +121,7 @@
       }
     </div>
     <div class="btns">
-      @if (selectedUser && selectedUser !== firebaseService.getCurrentUserId()){
+      @if (selectedUserExists) {
       <app-form-btn
         class="btn-delete"
         type="button"

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

@@ -22,7 +22,7 @@ import { ResizeService } from '../../../../../services/resize.service';
   styleUrl: './contact-form.component.scss',
 })
 export class ContactFormComponent implements OnInit, OnChanges {
-  @Input() selectedUser: any = [];
+  @Input() selectedUser: any = {};
   @Input() randomColor: string = '';
   @Input() newColor: string = '';
   @Input() currentColor: string = '';
@@ -63,8 +63,7 @@ export class ContactFormComponent implements OnInit, OnChanges {
    * properties of the userData object.
    */
   ngOnInit() {
-    this.updateContactData();
+    if (this.selectedUserExists) {
-    if (!this.selectedUser) {
       this.userData = {
         ...this.userData,
         color: this.randomColor,
@@ -73,6 +72,10 @@ export class ContactFormComponent implements OnInit, OnChanges {
     }
   }
 
+  get selectedUserExists() {
+    return !!this.selectedUser && Object.keys(this.selectedUser).length > 0;
+  }
+
   /**
    * Lifecycle hook that is called whenever the input properties of the component change.
    *
@@ -101,10 +104,12 @@ export class ContactFormComponent implements OnInit, OnChanges {
    * Finally, it emits an event containing the initials.
    */
   updateInitials() {
-    const initials = this.contactData
+    const firstName = this.contactData?.firstName || '';
-      ? this.contactData.firstName.slice(0, 1).toUpperCase() +
+    const lastName = this.contactData?.lastName || '';
-        this.contactData.lastName.slice(0, 1).toUpperCase()
+    const initials = (
-      : '';
+      firstName.slice(0, 1) + lastName.slice(0, 1)
+    ).toUpperCase();
+
     if (!this.selectedUser) {
       this.userData = {
         ...this.userData,
@@ -150,7 +155,8 @@ export class ContactFormComponent implements OnInit, OnChanges {
    * @param {string} name - The string to modify.
    * @return {string} The modified string.
    */
-  capitalizeFirstLetter(name: string) {
+  capitalizeFirstLetter(name?: string): string {
+    if (!name) return ''; // Return an empty string if name is undefined or null
     return name.charAt(0).toUpperCase() + name.slice(1).toLowerCase();
   }
 

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

@@ -24,20 +24,13 @@ export class ContactOverlayComponent implements OnInit {
   @Input() overlayType: string = '';
   @Output() closeDialogEmitter = new EventEmitter<string>();
 
-  randomColor: string = '';
+  randomColor: string = this.getRandomColor();
   userInitials: string = '';
   newColor: string = '';
 
   constructor(public firebaseService: FirebaseService) {}
 
-  /**
+  ngOnInit() {}
-   * Lifecycle hook that is called after data-bound properties of a directive are
-   * initialized.
-   * This method sets a random color for the user to be edited.
-   */
-  ngOnInit() {
-    this.randomColor = this.getRandomColor();
-  }
 
   getRandomColor(): string {
     const letters = '0123456789ABCDEF';