docs: add comments to ContactDetailComponent for better code understanding

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

@@ -10,11 +10,13 @@
     <div
       class="btn-back"
       [ngClass]="{ 'd-none': !selectedUserId }"
-      (click)="closeUserDetails()"
+      (click)="emitCloseContact()"
     >
       <img src="./../../../../assets/img/arrow-left.svg" />
     </div>
   </div>
+
+  <!--  Show contact details if a user is selected -->
   @if (selectedUser && selectedUserId) {
   <div
     class="contact-details"
@@ -29,6 +31,7 @@
           'background-color': selectedUser.color
         }"
       >
+        <!--  Show online icon if user is online, else offline icon -->
         @if(selectedUser.isOnline) {
         <img src="./../../../assets/img/online.svg" alt="" />
         } @else {
@@ -42,10 +45,14 @@
         <div class="name">
           {{ selectedUser.firstName }}
           {{ selectedUser.lastName }}
+
+          <!-- Show "you" if contact is logged in user -->
           @if (currentUser && selectedUser.id === currentUser.id) {
           {{ "contacts.you" | translate }}
           }
         </div>
+
+        <!-- Show edit and delete buttons if user is not contact only -->
         @if(selectedUser.isContactOnly || currentUser && selectedUser.id ===
         currentUser.id) {
         <div class="btns">
@@ -55,6 +62,8 @@
               {{ "contacts.btnEdit0" | translate }}
             </p>
           </div>
+
+          <!-- Show delete button if user is not contact only -->
           @if (selectedUser.isContactOnly || currentUser && selectedUser.id !==
           currentUser.id) {
           <div class="btn btn-delete" (click)="toggleConfirmDialog()">
@@ -78,16 +87,23 @@
         <a [href]="'mail:' + selectedUser.email">
           {{ selectedUser.email }}
         </a>
+
+        <!-- Show phone number if it exists -->
+        @if(selectedUser.phone) {
         <p>{{ "contacts.contactPhone" | translate }}</p>
-        @if(selectedUser.phone === '') {
-        <span>{{ "contacts.contactPhoneTxT" | translate }}</span> } @else {
         <a [href]="'tel:' + selectedUser.phone">
           <span>{{ selectedUser.phone }}</span>
         </a>
-        } @if(selectedUser.id !== "") {
+        }
+        <!-- Show last login if user is not contact only -->
+        @if(!selectedUser.isContactOnly) {
         <p>{{ "contacts.contactLastOnline" | translate }}</p>
+
+        <!-- Show last login if user is online, else if user has never logged in, else show last login -->
         @if(selectedUser.isOnline) {
-        <span>{{ "contacts.contactLastOnlineTxt" | translate }}</span>
+        <span>{{ "contacts.contactCurrentlyOnline" | translate }}</span>
+        } @else if (!selectedUser.lastLogin ) {
+        <span>{{ "contacts.contactNeverSeenOnline" | translate }}</span>
         } @else {
         <span
           >{{ selectedUser.lastLogin | date : "dd. MMM yyyy, HH:mm:ss" }}
@@ -96,10 +112,12 @@
       </div>
     </div>
   </div>
-  } @if (isMobileNavbarOpen) {
+  } @if (showMobileNavbar) {
   <!-- TODO -->
   }
 </section>
+
+<!-- Confirm dialog -->
 <app-confirm-dialog
   *ngIf="showConfirmDialog"
   [message]="'confirmDialogComponent.deleteContact' | translate"

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

@@ -26,11 +26,11 @@ import { ConfirmDialogComponent } from '../../../shared/components/confirm-dialo
 export class ContactDetailComponent {
   @Input() selectedUserId: string | null = null;
   @Input() currentUser: User | null = null;
-  @Output() closeContactEmitter = new EventEmitter<boolean>();
+  @Output() contactClosed = new EventEmitter<boolean>();
 
-  isLoading: boolean = false;
   selectedUser: User | null = null;
-  isMobileNavbarOpen: boolean = false;
+  isLoading = false;
+  showMobileNavbar = false;
   showConfirmDialog = false;
 
   constructor(
@@ -41,11 +41,15 @@ export class ContactDetailComponent {
     private updateNotifierService: UpdateNotifierService
   ) {}
 
-  ngOnChanges(changes: SimpleChanges) {
+  /**
-    if (
+   * If the `selectedUserId` input property changes and has a current value,
-      changes['selectedUserId'] !== undefined &&
+   * it loads the user data. Otherwise, it resets the `selectedUser` to null.
-      changes['selectedUserId'].currentValue !== ''
+   *
-    ) {
+   * @param changes An object of key-value pairs representing the changed properties.
+   */
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['selectedUserId']?.currentValue) {
       this.loadUser();
     } else {
       this.selectedUser = null;
@@ -53,13 +57,56 @@ export class ContactDetailComponent {
   }
 
   /**
-   * Closes the contact details view by resetting the current user id in the
+   * Emits an event with the value false to trigger the contact list to close.
-   * shared service and emitting the closeContactEmitter event.
    */
-  closeUserDetails() {
+  emitCloseContact() {
-    this.closeContactEmitter.emit();
+    this.contactClosed.emit(false);
   }
 
+  /**
+   * Toggles the visibility of the mobile contact details navbar.
+   */
+  toggleNav(): void {
+    this.showMobileNavbar = !this.showMobileNavbar;
+  }
+
+  /**
+   * Toggles the visibility of the confirmation dialog.
+   * This method switches the `showConfirmDialog` boolean state.
+   */
+  toggleConfirmDialog(): void {
+    this.showConfirmDialog = !this.showConfirmDialog;
+  }
+
+  /**
+   * Sets the overlay data for the contact overlay to the given user data,
+   * and hides the mobile contact details navbar.
+   *
+   * @param userData The user data to be edited.
+   */
+  editContact(userData: User) {
+    this.overlayService.setOverlayData('contactOverlay', userData);
+    this.showMobileNavbar = false;
+  }
+
+  /**
+   * Deletes the contact with the given id, shows a success toast, triggers an update of the contact list,
+   * and closes the contact details component.
+   */
+  async deleteContact() {
+    try {
+      await lastValueFrom(this.apiService.deleteUserById(this.selectedUserId!));
+      this.toastNotificationService.deleteContactSuccessToast();
+      this.updateNotifierService.notifyUpdate('contact');
+      this.emitCloseContact();
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  /**
+   * Loads the user data with the given id and sets it to the `selectedUser` property.
+   */
   loadUser(): void {
     this.isLoading = true;
 
@@ -80,37 +127,4 @@ export class ContactDetailComponent {
         },
       });
   }
-
-  /**
-   * Toggles the mobile navigation bar on and off.
-   * @remarks This method is used by the contact details component to toggle
-   * the mobile navigation bar when the user clicks the three points icon.
-   */
-  toggleNav() {
-    this.isMobileNavbarOpen = !this.isMobileNavbarOpen;
-  }
-
-  /**
-   * Opens the edit contact dialog by setting the appropriate flags in the shared service.
-   * This method is used by the contact details component to open the edit contact dialog when the user clicks the edit button.
-   */
-  editContact(userData: User) {
-    this.overlayService.setOverlayData('contactOverlay', userData);
-    this.isMobileNavbarOpen = false;
-  }
-
-  toggleConfirmDialog() {
-    this.showConfirmDialog = !this.showConfirmDialog;
-  }
-
-  async deleteContact() {
-    try {
-      await lastValueFrom(this.apiService.deleteUserById(this.selectedUserId!));
-      this.toastNotificationService.deleteContactSuccessToast();
-      this.updateNotifierService.notifyUpdate('contact');
-      this.closeUserDetails();
-    } catch (error) {
-      console.error(error);
-    }
-  }
 }

src/app/components/contacts/contacts.component.html

@@ -71,7 +71,7 @@
       }"
       [selectedUserId]="selectedUserId"
       [currentUser]="currentUser"
-      (closeContactEmitter)="closeContactEmitter()"
+      (contactClosed)="handleCloseContact()"
     ></app-contact-detail>
   </div>
 </section>

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

@@ -97,7 +97,7 @@ export class ContactsComponent {
   /**
    * Triggers the resize function to adjust UI elements based on the current state.
    */
-  closeContactEmitter() {
+  handleCloseContact() {
     this.selectedUserId = null;
     this.onResize();
   }

src/assets/i18n/de.json

@@ -170,7 +170,8 @@
     "contactPhone": "Telefon",
     "contactPhoneTxT": "Keine Telefonnummer",
     "contactLastOnline": "Zuletzt online gesehen",
-    "contactLastOnlineTxt": "Derzeit online",
+    "contactCurrentlyOnline": "Derzeit online",
+    "contactNeverSeenOnline": "Niemals online gesehen",
     "addContact": "Kontakt hinzufügen",
     "editContact": "Kontakt bearbeiten",
     "firstName": "Vorname",

src/assets/i18n/en.json

@@ -170,7 +170,8 @@
     "contactPhone": "Phone",
     "contactPhoneTxT": "No phone number",
     "contactLastOnline": "Last seen online",
-    "contactLastOnlineTxt": "Currently online",
+    "contactCurrentlyOnline": "Currently online",
+    "contactNeverSeenOnline": "Never seen online",
     "editContact": "Edit contact",
     "addContact": "Add contact",
     "firstName": "First name",