diff --git a/src/app/app.component.html b/src/app/app.component.html index 7d63d2e..5cd71fa 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,10 +1,17 @@ -
- -
- -
- -
-
+
+
+ +
+ +
+ +
+
+
+
- +@if (sharedService.isEditDialogOpen) { + +} diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 34471f6..ca9bd7b 100644 --- a/src/app/app.component.scss +++ b/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); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index dff28e2..9d936e4 100644 --- a/src/app/app.component.ts +++ b/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(public langService: LanguageService, private router: Router) { + constructor( + public langService: LanguageService, + private router: Router, + public sharedService: SharedService + ) { this.router.events.subscribe((event) => {}); } } 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 2480d4a..4a34049 100644 --- a/src/app/components/contacts/contact-detail/contact-detail.component.html +++ b/src/app/components/contacts/contact-detail/contact-detail.component.html @@ -34,9 +34,9 @@ {{ userService.getUserDetails(currentUserId, "lastName") }}
-
+
-

edit

+

edit

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 aa0c734..0001a5a 100644 --- a/src/app/components/contacts/contact-detail/contact-detail.component.ts +++ b/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; + } + } } diff --git a/src/app/components/contacts/contact-edit/contact-edit.component.html b/src/app/components/contacts/contact-edit/contact-edit.component.html new file mode 100644 index 0000000..9c04436 --- /dev/null +++ b/src/app/components/contacts/contact-edit/contact-edit.component.html @@ -0,0 +1,28 @@ +
+
+
+ +

Edit contact

+
+
+
+
+ {{ + userService.getUserDetails(sharedService.currentUserId, "initials") + }} +
+
+
+ +
+
+
+
diff --git a/src/app/components/contacts/contact-edit/contact-edit.component.scss b/src/app/components/contacts/contact-edit/contact-edit.component.scss new file mode 100644 index 0000000..33c93cc --- /dev/null +++ b/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); + } + } +} diff --git a/src/app/components/contacts/contact-edit/contact-edit.component.spec.ts b/src/app/components/contacts/contact-edit/contact-edit.component.spec.ts new file mode 100644 index 0000000..1875134 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ContactEditComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ContactEditComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/contacts/contact-edit/contact-edit.component.ts b/src/app/components/contacts/contact-edit/contact-edit.component.ts new file mode 100644 index 0000000..035ee52 --- /dev/null +++ b/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 + ) {} +} diff --git a/src/app/components/contacts/contact-form/contact-form.component.html b/src/app/components/contacts/contact-form/contact-form.component.html new file mode 100644 index 0000000..6098735 --- /dev/null +++ b/src/app/components/contacts/contact-form/contact-form.component.html @@ -0,0 +1 @@ +

contact-form works!

diff --git a/src/app/components/contacts/contact-form/contact-form.component.scss b/src/app/components/contacts/contact-form/contact-form.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/contacts/contact-form/contact-form.component.spec.ts b/src/app/components/contacts/contact-form/contact-form.component.spec.ts new file mode 100644 index 0000000..b099633 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ContactFormComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ContactFormComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/contacts/contact-form/contact-form.component.ts b/src/app/components/contacts/contact-form/contact-form.component.ts new file mode 100644 index 0000000..8389df8 --- /dev/null +++ b/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 { + +} diff --git a/src/app/components/contacts/contacts.component.ts b/src/app/components/contacts/contacts.component.ts index 7647006..79de343 100644 --- a/src/app/components/contacts/contacts.component.ts +++ b/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']; }); } } diff --git a/src/app/services/shared.service.ts b/src/app/services/shared.service.ts new file mode 100644 index 0000000..53ef0c7 --- /dev/null +++ b/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() {} +} diff --git a/src/app/shared/components/header/header.component.ts b/src/app/shared/components/header/header.component.ts index a91b030..8e75d5e 100644 --- a/src/app/shared/components/header/header.component.ts +++ b/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') && diff --git a/src/app/shared/components/sidebar/sidebar.component.html b/src/app/shared/components/sidebar/sidebar.component.html index 14b769b..05cb722 100644 --- a/src/app/shared/components/sidebar/sidebar.component.html +++ b/src/app/shared/components/sidebar/sidebar.component.html @@ -1,5 +1,5 @@
- +