added edit user component & shared service

src/app/app.component.html

@@ -1,4 +1,5 @@
-<div class="container">
+<div [ngClass]="{ 'blur-background': sharedService.isAnyDialogOpen }">
+  <div class="container">
     <app-sidebar></app-sidebar>
     <main>
       <app-header></app-header>
@@ -6,5 +7,11 @@
         <router-outlet></router-outlet>
       </div>
     </main>
+  </div>
+  <app-sidebar-mobile></app-sidebar-mobile>
 </div>
-<app-sidebar-mobile></app-sidebar-mobile>
+@if (sharedService.isEditDialogOpen) {
+<app-contact-edit
+  [currentUserId]="sharedService.currentUserId"
+></app-contact-edit>
+}

src/app/app.component.scss

@@ -38,6 +38,10 @@ app-header {
   overflow-y: auto;
 }
 
+.blur-background {
+  filter: blur(5px);
+}
+
 @media screen and (max-width: 910px) {
   .main-content {
     width: calc(100vw - 64px);

src/app/app.component.ts

@@ -4,6 +4,10 @@ import { HeaderComponent } from './shared/components/header/header.component';
 import { SidebarComponent } from './shared/components/sidebar/sidebar.component';
 import { LanguageService } from './services/language.service';
 import { SidebarMobileComponent } from './shared/components/sidebar/sidebar-mobile/sidebar-mobile.component';
+import { ContactEditComponent } from './components/contacts/contact-edit/contact-edit.component';
+import { CommonModule } from '@angular/common';
+import { SharedService } from './services/shared.service';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-root',
@@ -13,14 +17,19 @@ import { SidebarMobileComponent } from './shared/components/sidebar/sidebar-mobi
     HeaderComponent,
     SidebarComponent,
     SidebarMobileComponent,
+    ContactEditComponent,
+    CommonModule,
   ],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })
 export class AppComponent {
   title = 'join';
-
+  constructor(
-  constructor(public langService: LanguageService, private router: Router) {
+    public langService: LanguageService,
+    private router: Router,
+    public sharedService: SharedService
+  ) {
     this.router.events.subscribe((event) => {});
   }
 }

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

@@ -34,9 +34,9 @@
           {{ userService.getUserDetails(currentUserId, "lastName") }}
         </div>
         <div class="btns">
-          <div class="btn">
+          <div class="btn btn-edit">
             <img src="./../../../../assets/img/contact/edit.svg" alt="" />
-            <p>edit</p>
+            <p (click)="openEditDialog()">edit</p>
           </div>
           <div class="btn">
             <img src="./../../../../assets/img/contact/delete.svg" alt="" />

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

@@ -1,22 +1,44 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, HostListener, Input } from '@angular/core';
 import { UserService } from '../../../services/user.service';
 import { CommonModule } from '@angular/common';
 import { ContactsComponent } from '../contacts.component';
 import { Router } from '@angular/router';
+import { ContactEditComponent } from '../contact-edit/contact-edit.component';
+import { SharedService } from '../../../services/shared.service';
 
 @Component({
   selector: 'app-contact-detail',
   standalone: true,
-  imports: [CommonModule, ContactsComponent],
+  imports: [CommonModule, ContactsComponent, ContactEditComponent],
   templateUrl: './contact-detail.component.html',
   styleUrl: './contact-detail.component.scss',
 })
 export class ContactDetailComponent {
-  @Input() currentUserId!: string;
+  @Input() currentUserId!: string | undefined;
 
-  constructor(public userService: UserService, private router: Router) {}
+  constructor(
+    public userService: UserService,
+    private router: Router,
+    public sharedService: SharedService
+  ) {}
 
   closeUserDetails() {
     this.router.navigate(['contacts']);
   }
+
+  openEditDialog() {
+    this.sharedService.isEditDialogOpen = !this.sharedService.isEditDialogOpen;
+  }
+
+  @HostListener('document:click', ['$event'])
+  checkOpenContactEdit(event: MouseEvent) {
+    const targetElement = event.target as HTMLElement;
+    if (targetElement.closest('.btn-edit')) {
+      this.sharedService.isAnyDialogOpen = true;
+      this.sharedService.isEditDialogOpen = true;
+    } else if (!targetElement.closest('.dialog')) {
+      this.sharedService.isAnyDialogOpen = false;
+      this.sharedService.isEditDialogOpen = false;
+    }
+  }
 }

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

@@ -0,0 +1,28 @@
+<section>
+  <div class="dialog">
+    <div class="header">
+      <img src="./../../../../assets/img/logo.svg" alt="" />
+      <p>Edit contact</p>
+    </div>
+    <div class="content">
+      <div
+        class="circle"
+        [ngStyle]="{
+          'background-color': userService.getUserDetails(
+            sharedService.currentUserId,
+            'color'
+          )
+        }"
+      >
+        <div class="initials">
+          {{
+            userService.getUserDetails(sharedService.currentUserId, "initials")
+          }}
+        </div>
+      </div>
+      <div class="form">
+        <app-contact-form></app-contact-form>
+      </div>
+    </div>
+  </div>
+</section>

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

@@ -0,0 +1,63 @@
+section {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.dialog {
+  background-color: var(--white);
+  width: 760px;
+  height: 500px;
+  border-radius: 26px;
+  border: 2px solid rgba($color: #000000, $alpha: 0.1);
+}
+
+.header {
+  display: flex;
+  background-color: var(--bgSidebar);
+  height: 72px;
+  padding: 24px;
+  border-top-left-radius: 24px;
+  border-top-right-radius: 24px;
+  color: var(--white);
+  img {
+    width: 54px;
+    height: 66px;
+  }
+  p {
+    width: 100%;
+    text-align: center;
+    font-size: 61px;
+    font-weight: 700;
+  }
+}
+
+.content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 332px;
+  padding: 24px;
+  .circle {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 120px;
+    height: 120px;
+    border-radius: 100%;
+    border: 2px solid var(--white);
+    .initials {
+      font-size: 47px;
+      font-weight: 500;
+      color: var(--white);
+      text-shadow: 1px 1px 2px var(--black);
+    }
+  }
+}

src/app/components/contacts/contact-edit/contact-edit.component.spec.ts

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

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

@@ -0,0 +1,21 @@
+import { Component, Input } from '@angular/core';
+import { ContactFormComponent } from '../contact-form/contact-form.component';
+import { CommonModule } from '@angular/common';
+import { UserService } from '../../../services/user.service';
+import { SharedService } from '../../../services/shared.service';
+
+@Component({
+  selector: 'app-contact-edit',
+  standalone: true,
+  imports: [CommonModule, ContactFormComponent],
+  templateUrl: './contact-edit.component.html',
+  styleUrl: './contact-edit.component.scss',
+})
+export class ContactEditComponent {
+  @Input() currentUserId!: string | undefined;
+
+  constructor(
+    public userService: UserService,
+    public sharedService: SharedService
+  ) {}
+}

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

@@ -0,0 +1 @@
+<p>contact-form works!</p>

src/app/components/contacts/contact-form/contact-form.component.spec.ts

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

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

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-contact-form',
+  standalone: true,
+  imports: [],
+  templateUrl: './contact-form.component.html',
+  styleUrl: './contact-form.component.scss'
+})
+export class ContactFormComponent {
+
+}

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

@@ -4,6 +4,7 @@ import { User } from '../../interfaces/user.interface';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { ContactDetailComponent } from './contact-detail/contact-detail.component';
+import { SharedService } from '../../services/shared.service';
 
 @Component({
   selector: 'app-contacts',
@@ -19,7 +20,11 @@ export class ContactsComponent {
   showAllUsers!: boolean;
   currentUserId: string = '';
 
-  constructor(public userService: UserService, private route: ActivatedRoute) {}
+  constructor(
+    public userService: UserService,
+    private route: ActivatedRoute,
+    private sharedService: SharedService
+  ) {}
 
   ngOnInit(): void {
     this.routeUserId();
@@ -30,6 +35,7 @@ export class ContactsComponent {
     if (this.route.params.subscribe()) {
       this.route.params.subscribe((params) => {
         this.currentUserId = params['id'];
+        this.sharedService.currentUserId = params['id'];
       });
     }
   }

src/app/services/shared.service.ts

@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SharedService {
+  isAnyDialogOpen: boolean = true;
+  isEditDialogOpen: boolean = true;
+  currentUserId: string = '';
+
+  constructor() {}
+}

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

@@ -27,7 +27,7 @@ export class HeaderComponent {
   }
 
   @HostListener('document:click', ['$event'])
-  onClick(event: MouseEvent) {
+  checkOpenNavbar(event: MouseEvent) {
     const targetElement = event.target as HTMLElement;
     if (
       !targetElement.closest('app-navbar') &&

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

@@ -1,5 +1,5 @@
 <section>
-  <img class="logo" src="./assets/img/sidebar/logo.svg" alt="" />
+  <img class="logo" src="./assets/img/logo.svg" alt="" />
 
   <nav>
     <div