From 77d8b3289d80bfaaab1e999cae2126610a65534a Mon Sep 17 00:00:00 2001 From: Chneemann Date: Mon, 20 May 2024 08:15:36 +0200 Subject: [PATCH] dialogue for user name on the task board added --- .../add-task/add-task.component.html | 14 +++----- .../components/board/task/task.component.html | 11 +++++++ .../components/board/task/task.component.scss | 15 +++++++++ .../components/board/task/task.component.ts | 32 +++++++++++++++---- .../contact-detail.component.ts | 27 ++++++++++------ 5 files changed, 74 insertions(+), 25 deletions(-) diff --git a/src/app/components/add-task/add-task.component.html b/src/app/components/add-task/add-task.component.html index f6ea518..328c309 100644 --- a/src/app/components/add-task/add-task.component.html +++ b/src/app/components/add-task/add-task.component.html @@ -331,15 +331,11 @@ [img]="'check'" [imgFilter]="'none'" [value]=" - (overlayData.toString() !== '' && - overlayData.toString() !== 'none' && - overlayData.toString() !== 'todo' && - overlayData.toString() !== 'inprogress' && - overlayData.toString() !== 'awaitfeedback' && - overlayData.toString() !== 'done' - ? 'addTask.update' - : 'addTask.create' - ) | translate + ['none', 'todo', 'inprogress', 'awaitfeedback', 'done'].includes( + overlayData.toString() + ) + ? ('addTask.create' | translate) + : ('addTask.update' | translate) " [disabled]=" title.invalid || diff --git a/src/app/components/board/task/task.component.html b/src/app/components/board/task/task.component.html index 8538639..2e1dd2c 100644 --- a/src/app/components/board/task/task.component.html +++ b/src/app/components/board/task/task.component.html @@ -44,12 +44,16 @@
{{ userBadged(task.creator) }} @for (assigned of task.assigned; track assigned) { {{ userBadged(assigned) }} @@ -64,5 +68,12 @@ [taskId]="task.id" [boardTaskStatus]="task.status" > + } @if (AssignedDialogId != '') { +
+

+ {{ firebaseService.getUserDetails(AssignedDialogId, "firstName") }}, + {{ firebaseService.getUserDetails(AssignedDialogId, "lastName") }} +

+
} } diff --git a/src/app/components/board/task/task.component.scss b/src/app/components/board/task/task.component.scss index 55bd174..fe2515e 100644 --- a/src/app/components/board/task/task.component.scss +++ b/src/app/components/board/task/task.component.scss @@ -21,6 +21,21 @@ section { } } +.dialog { + position: fixed; + width: min-content; + height: fit-content; + padding: 10px 15px; + border-radius: 0px 20px 20px 20px; + border: 1px solid var(--black); + z-index: 2; + background-color: var(--white); + p { + font-size: 18px; + font-weight: 400; + } +} + .header { display: flex; align-items: center; diff --git a/src/app/components/board/task/task.component.ts b/src/app/components/board/task/task.component.ts index f07f451..f48c50e 100644 --- a/src/app/components/board/task/task.component.ts +++ b/src/app/components/board/task/task.component.ts @@ -18,6 +18,9 @@ import { SharedService } from '../../../services/shared.service'; export class TaskComponent { @Input() task: Task = {} as Task; isMenuOpen: boolean = false; + AssignedDialogId: string = ''; + dialogX: number = 0; + dialogY: number = 0; categoryColors = new Map([ ['User Story', '#0038ff'], @@ -26,7 +29,7 @@ export class TaskComponent { constructor( public dragDropService: DragDropService, - private firebaseService: FirebaseService, + public firebaseService: FirebaseService, public overlayService: OverlayService, public sharedService: SharedService, private router: Router @@ -57,15 +60,32 @@ export class TaskComponent { @HostListener('document:click', ['$event']) checkToggleTaskMenu(event: MouseEvent) { const targetElement = event.target as HTMLElement; - if ( - !targetElement.closest('.menu-btn') && - !targetElement.closest('.menu-img') && - !targetElement.closest('app-task-menu') - ) { + const menuSelectors = ['.menu-btn', '.menu-img', 'app-task-menu']; + const isMenuClicked = menuSelectors.some((selector) => + targetElement.closest(selector) + ); + + if (!isMenuClicked) { this.isMenuOpen = false; } } + // Dialog + + openDialog(userId: any, event: MouseEvent) { + this.AssignedDialogId = userId; + this.updateDialogPosition(event); + } + + updateDialogPosition(event: MouseEvent) { + this.dialogX = event.clientX + 25; + this.dialogY = event.clientY + 10; + } + + closeDialog() { + this.AssignedDialogId = ''; + } + // Subtasks completedSubtasks(): number { 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 56bcb46..23ebb9a 100644 --- a/src/app/components/contacts/contact-detail/contact-detail.component.ts +++ b/src/app/components/contacts/contact-detail/contact-detail.component.ts @@ -128,20 +128,27 @@ export class ContactDetailComponent { @HostListener('document:click', ['$event']) checkOpenContactEdit(event: MouseEvent) { const targetElement = event.target as HTMLElement; + if (targetElement.closest('.btn-edit')) { - this.sharedService.isAnyDialogOpen = true; - this.sharedService.isEditContactDialogOpen = true; + this.setDialogStatus(true, true, false, false); } else if (targetElement.closest('.btn-new')) { - this.sharedService.isAnyDialogOpen = true; - this.sharedService.isNewContactDialogOpen = true; + this.setDialogStatus(true, false, true, false); } else if (targetElement.closest('.btn-delete')) { - this.sharedService.isAnyDialogOpen = true; - this.sharedService.isDeleteContactDialogOpen = true; + this.setDialogStatus(true, false, false, true); } else if (!targetElement.closest('.dialog')) { - this.sharedService.isAnyDialogOpen = false; - this.sharedService.isEditContactDialogOpen = false; - this.sharedService.isDeleteContactDialogOpen = false; - this.sharedService.isNewContactDialogOpen = false; + this.setDialogStatus(false, false, false, false); } } + + private setDialogStatus( + anyOpen: boolean, + editOpen: boolean, + newOpen: boolean, + deleteOpen: boolean + ) { + this.sharedService.isAnyDialogOpen = anyOpen; + this.sharedService.isEditContactDialogOpen = editOpen; + this.sharedService.isNewContactDialogOpen = newOpen; + this.sharedService.isDeleteContactDialogOpen = deleteOpen; + } }