diff --git a/src/app/components/contacts/contact-detail/contact-detail.component.html b/src/app/components/contacts/contact-detail/contact-detail.component.html index 68fffbf..ddfbe51 100644 --- a/src/app/components/contacts/contact-detail/contact-detail.component.html +++ b/src/app/components/contacts/contact-detail/contact-detail.component.html @@ -7,12 +7,12 @@ {{ "contacts.headlineDescription" | translate }} -
- +
+
@if (selectedUser && selectedUserId) { @@ -57,7 +57,7 @@ @if (selectedUser.isContactOnly || currentUser && selectedUser.id !== currentUser.id) { -
+

{{ "contacts.btnDelete0" | translate }} diff --git a/src/app/components/contacts/contact-detail/contact-detail.component.scss b/src/app/components/contacts/contact-detail/contact-detail.component.scss index 9240914..ccecb6a 100644 --- a/src/app/components/contacts/contact-detail/contact-detail.component.scss +++ b/src/app/components/contacts/contact-detail/contact-detail.component.scss @@ -177,6 +177,10 @@ } } +.d-none { + display: none; +} + /*------------- ANIMATION -------------*/ .animation-coming-in { diff --git a/src/app/components/contacts/contact-detail/contact-detail.component.ts b/src/app/components/contacts/contact-detail/contact-detail.component.ts index b5cd883..49165ac 100644 --- a/src/app/components/contacts/contact-detail/contact-detail.component.ts +++ b/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() { - // TODO - this.isMobileNavbarOpen = false; + async deleteContact(userId: string) { + try { + await lastValueFrom(this.apiService.deleteUserById(userId)); + this.toastNotificationService.deleteContactSuccessToast(); + this.closeUserDetails(); + } catch (error) { + console.error(error); + } } } diff --git a/src/app/services/api.service.ts b/src/app/services/api.service.ts index aca64c4..42a7cd0 100644 --- a/src/app/services/api.service.ts +++ b/src/app/services/api.service.ts @@ -73,4 +73,8 @@ export class ApiService { ids: userIds.join(','), }); } + + deleteUserById(userId: string): Observable { + return this.request('DELETE', `/api/users/${userId}/`); + } } diff --git a/src/app/services/toast-notification.servic.ts b/src/app/services/toast-notification.servic.ts index f79927f..44a9fc0 100755 --- a/src/app/services/toast-notification.servic.ts +++ b/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 { diff --git a/src/app/shared/components/overlay/contact-overlay/contact-form/contact-form.component.html b/src/app/shared/components/overlay/contact-overlay/contact-form/contact-form.component.html index 783932a..f0809ef 100644 --- a/src/app/shared/components/overlay/contact-overlay/contact-form/contact-form.component.html +++ b/src/app/shared/components/overlay/contact-overlay/contact-form/contact-form.component.html @@ -121,7 +121,7 @@ }

- @if (selectedUser && selectedUser !== firebaseService.getCurrentUserId()){ + @if (selectedUserExists) { 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 - ? this.contactData.firstName.slice(0, 1).toUpperCase() + - this.contactData.lastName.slice(0, 1).toUpperCase() - : ''; + const firstName = this.contactData?.firstName || ''; + const lastName = this.contactData?.lastName || ''; + 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(); } diff --git a/src/app/shared/components/overlay/contact-overlay/contact-overlay.component.ts b/src/app/shared/components/overlay/contact-overlay/contact-overlay.component.ts index 3fe3ce2..244eaaf 100644 --- a/src/app/shared/components/overlay/contact-overlay/contact-overlay.component.ts +++ b/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(); - randomColor: string = ''; + randomColor: string = this.getRandomColor(); userInitials: string = ''; newColor: string = ''; constructor(public firebaseService: FirebaseService) {} - /** - * 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(); - } + ngOnInit() {} getRandomColor(): string { const letters = '0123456789ABCDEF';