added overlay service & component

src/app/app.component.html

@@ -21,3 +21,4 @@
   [currentUserId]="sharedService.currentUserId"
 ></app-contact-delete>
 }
+<app-overlay></app-overlay>

src/app/app.component.ts

@@ -8,6 +8,7 @@ import { ContactEditComponent } from './components/contacts/contact-edit/contact
 import { CommonModule } from '@angular/common';
 import { SharedService } from './services/shared.service';
 import { ContactDeleteComponent } from './components/contacts/contact-delete/contact-delete.component';
+import { OverlayComponent } from './shared/components/overlay/overlay.component';
 
 @Component({
   selector: 'app-root',
@@ -20,6 +21,7 @@ import { ContactDeleteComponent } from './components/contacts/contact-delete/con
     ContactEditComponent,
     ContactDeleteComponent,
     CommonModule,
+    OverlayComponent,
   ],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',

src/app/components/board/task/task.component.html

@@ -1,4 +1,4 @@
-<section>
+<section (click)="showTaskDetails(task.id)">
   <div
     class="content"
     draggable="true"

src/app/components/board/task/task.component.ts

@@ -3,6 +3,7 @@ import { Component, Input } from '@angular/core';
 import { DragDropService } from '../../../services/drag-drop.service';
 import { Task } from '../../../interfaces/task.interface';
 import { FirebaseService } from '../../../services/firebase.service';
+import { OverlayService } from '../../../services/overlay.service';
 
 @Component({
   selector: 'app-task',
@@ -21,9 +22,14 @@ export class TaskComponent {
 
   constructor(
     public dragDropService: DragDropService,
-    private firebaseService: FirebaseService
+    private firebaseService: FirebaseService,
+    public overlayService: OverlayService
   ) {}
 
+  showTaskDetails(taskId: string | undefined) {
+    this.overlayService.setOverlayData(taskId);
+  }
+
   // Subtasks
 
   completedSubtasks(): number {

src/app/services/overlay.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class OverlayService {
+  private overlayDataSubject = new BehaviorSubject<any>(null);
+  overlayData$ = this.overlayDataSubject.asObservable();
+
+  constructor() {}
+
+  setOverlayData(data: any) {
+    this.overlayDataSubject.next(data);
+  }
+}

src/app/shared/components/overlay/overlay.component.html

@@ -0,0 +1,3 @@
+<div *ngIf="overlayData" class="overlay">
+  <div class="overlay-content">{{ overlayData }}</div>
+</div>

src/app/shared/components/overlay/overlay.component.scss

@@ -0,0 +1,21 @@
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  backdrop-filter: blur(5px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+}
+
+.overlayContent {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: aqua;
+  height: auto;
+  width: auto;
+}

src/app/shared/components/overlay/overlay.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OverlayComponent } from './overlay.component';
+
+describe('OverlayComponent', () => {
+  let component: OverlayComponent;
+  let fixture: ComponentFixture<OverlayComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [OverlayComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(OverlayComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,41 @@
+import {
+  Component,
+  EventEmitter,
+  HostListener,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { OverlayService } from '../../../services/overlay.service';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-overlay',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './overlay.component.html',
+  styleUrl: './overlay.component.scss',
+})
+export class OverlayComponent implements OnInit {
+  overlayData: any;
+
+  constructor(private overlayService: OverlayService) {}
+
+  ngOnInit(): void {
+    this.overlayService.overlayData$.subscribe((data) => {
+      this.overlayData = data;
+    });
+  }
+
+  onCloseOverlay() {
+    this.overlayData = '';
+  }
+
+  @HostListener('document:click', ['$event'])
+  checkOpenContactEdit(event: MouseEvent) {
+    const targetElement = event.target as HTMLElement;
+    if (targetElement.closest('.overlay-content')) {
+      this.onCloseOverlay();
+    }
+  }
+}