diff --git a/src/app/components/board/board.component.ts b/src/app/components/board/board.component.ts index 44f89bf..3553ad8 100644 --- a/src/app/components/board/board.component.ts +++ b/src/app/components/board/board.component.ts @@ -12,7 +12,7 @@ import { ApiService } from '../../services/api.service'; import { Task } from '../../interfaces/task.interface'; import { TaskService } from '../../services/task.service'; import { LoadingSpinnerComponent } from '../../shared/components/loading-spinner/loading-spinner.component'; -import { debounceTime, finalize, Subject, takeUntil } from 'rxjs'; +import { debounceTime, finalize, Subject, take, takeUntil } from 'rxjs'; import { UpdateNotifierService } from '../../services/update-notifier.service'; import { ToastNotificationService } from '../../services/toast-notification.service'; import { ResizeService } from '../../services/resize.service'; @@ -48,6 +48,7 @@ export class BoardComponent implements OnInit, OnDestroy { isLoading = false; private destroy$ = new Subject(); + private pageViewMedia$ = this.resizeService.pageViewMedia$; constructor( public dragDropService: DragDropService, @@ -143,9 +144,11 @@ export class BoardComponent implements OnInit, OnDestroy { * @param status The status to be used for the new task. */ addNewTaskOverlay(status: string) { - this.resizeService.isPageViewMedia - ? this.router.navigate(['/add-task', status]) - : this.overlayService.setOverlayData('newTaskOverlay', status); + this.pageViewMedia$.pipe(take(1)).subscribe((isPageViewMedia) => { + isPageViewMedia + ? this.router.navigate(['/add-task', status]) + : this.overlayService.setOverlayData('newTaskOverlay', status); + }); } /** diff --git a/src/app/components/board/task/task.component.html b/src/app/components/board/task/task.component.html index d8333df..031e5b1 100644 --- a/src/app/components/board/task/task.component.html +++ b/src/app/components/board/task/task.component.html @@ -13,7 +13,7 @@ > {{ task.category }} - @if (resizeService.isPageViewMedia) { + @if (pageViewMedia$ | async) {
([ ['User Story', '#0038ff'], ['Technical Task', '#20d7c2'], ]); + pageViewMedia$ = this.resizeService.pageViewMedia$; + constructor( public dragDropService: DragDropService, public overlayService: OverlayService, @@ -72,9 +75,11 @@ export class TaskComponent { if (this.isMenuOpen) { this.toggleTaskMenu(); } - this.resizeService.isPageViewMedia - ? this.router.navigate(['/task', taskId]) - : this.overlayService.setOverlayData('taskOverlay', taskId); + this.pageViewMedia$.pipe(take(1)).subscribe((isPageViewMedia) => { + isPageViewMedia + ? this.router.navigate(['/task', taskId]) + : this.overlayService.setOverlayData('taskOverlay', taskId); + }); } @HostListener('document:click', ['$event']) diff --git a/src/app/components/contacts/contacts.component.ts b/src/app/components/contacts/contacts.component.ts index dafcf49..139195c 100644 --- a/src/app/components/contacts/contacts.component.ts +++ b/src/app/components/contacts/contacts.component.ts @@ -132,7 +132,7 @@ export class ContactsComponent implements OnInit, OnDestroy { @HostListener('window:resize', ['$event']) onResize() { - if (window.innerWidth <= 1150 && this.selectedUserId != undefined) { + if (window.innerWidth <= 1000 && this.selectedUserId != undefined) { this.showAllUsers = false; } else { this.showAllUsers = true; diff --git a/src/app/services/resize.service.ts b/src/app/services/resize.service.ts index 9ff3329..99ff622 100644 --- a/src/app/services/resize.service.ts +++ b/src/app/services/resize.service.ts @@ -1,29 +1,73 @@ -import { Injectable } from '@angular/core'; +import { Injectable, OnDestroy } from '@angular/core'; +import { BehaviorSubject } from 'rxjs'; @Injectable({ providedIn: 'root', }) -export class ResizeService { - isPageViewMedia: boolean = window.innerWidth <= 650; - isContactViewMedia: boolean = window.innerWidth <= 800; +export class ResizeService implements OnDestroy { + private readonly PAGE_VIEW_BREAKPOINT = 650; + private readonly CONTACT_VIEW_BREAKPOINT = 800; + + private pageViewMediaSubject = new BehaviorSubject( + window.innerWidth <= this.PAGE_VIEW_BREAKPOINT + ); + private contactViewMediaSubject = new BehaviorSubject( + window.innerWidth <= this.CONTACT_VIEW_BREAKPOINT + ); + + pageViewMedia$ = this.pageViewMediaSubject.asObservable(); + contactViewMedia$ = this.contactViewMediaSubject.asObservable(); private resizeListener!: () => void; + /** + * Initializes the resize event listener, which updates the media query subjects + * based on the current window width whenever the window is resized. + */ constructor() { this.initResizeListener(); } - private initResizeListener() { + /** + * Cleans up resources by removing the resize event listener, + * ensuring that no memory leaks occur when the service is no longer in use. + */ + ngOnDestroy(): void { + this.cleanup(); + } + + /** + * Initializes the resize event listener. + * + * This method binds the onResize method to the resizeListener and adds it as an event listener + * for the window's resize event. This allows the service to respond to changes in window size + * by updating the relevant media query subjects. + */ + private initResizeListener(): void { this.resizeListener = this.onResize.bind(this); window.addEventListener('resize', this.resizeListener); } - private onResize() { - this.isPageViewMedia = window.innerWidth <= 650; - this.isContactViewMedia = window.innerWidth <= 800; + /** + * Updates the media query subjects based on the current window width. + * + * This method checks the window's inner width against predefined breakpoints + * and updates the pageViewMediaSubject and contactViewMediaSubject accordingly. + * It is triggered whenever a window resize event occurs. + */ + private onResize(): void { + this.pageViewMediaSubject.next( + window.innerWidth <= this.PAGE_VIEW_BREAKPOINT + ); + this.contactViewMediaSubject.next( + window.innerWidth <= this.CONTACT_VIEW_BREAKPOINT + ); } - cleanup() { + /** + * Remove the event listener for window resizing. + */ + cleanup(): void { window.removeEventListener('resize', this.resizeListener); } } 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 abc61f3..5fde704 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 @@ -22,7 +22,7 @@ autocomplete="off" required /> - @if (resizeService.isContactViewMedia) { + @if (contactViewMedia$ | async) {
@if (firstName.hasError('pattern') && firstName.touched) {

{{ "contactDialogForm.invalidPattern" | translate }}

@@ -48,7 +48,7 @@ required />
- @if (resizeService.isContactViewMedia) { + @if (contactViewMedia$ | async) {
@if (lastName.hasError('pattern') && lastName.touched) {

{{ "contactDialogForm.invalidPattern" | translate }}

@@ -56,7 +56,7 @@

{{ "contactDialogForm.invalidLastName" | translate }}

}}
- } @if (!resizeService.isContactViewMedia) { + } @else {
@if (firstName.hasError('pattern') || lastName.hasError('pattern') && firstName.touched) { diff --git a/src/app/shared/components/overlay/contact-overlay/contact-form/contact-form.component.ts b/src/app/shared/components/overlay/contact-overlay/contact-form/contact-form.component.ts index 7c406e1..ef65ce7 100644 --- a/src/app/shared/components/overlay/contact-overlay/contact-form/contact-form.component.ts +++ b/src/app/shared/components/overlay/contact-overlay/contact-form/contact-form.component.ts @@ -63,6 +63,8 @@ export class ContactFormComponent implements OnInit, OnChanges { lastLogin: 0, }; + contactViewMedia$ = this.resizeService.contactViewMedia$; + /** * OnInit lifecycle hook. *