diff --git a/src/app/checklist/checklist-cta-bar/checklist-cta-bar.component.html b/src/app/checklist/checklist-cta-bar/checklist-cta-bar.component.html index 97c9cca..4927f01 100644 --- a/src/app/checklist/checklist-cta-bar/checklist-cta-bar.component.html +++ b/src/app/checklist/checklist-cta-bar/checklist-cta-bar.component.html @@ -14,7 +14,7 @@

- - + +

diff --git a/src/app/checklist/checklist-cta-bar/checklist-cta-bar.component.ts b/src/app/checklist/checklist-cta-bar/checklist-cta-bar.component.ts index b9545be..62fa1d1 100644 --- a/src/app/checklist/checklist-cta-bar/checklist-cta-bar.component.ts +++ b/src/app/checklist/checklist-cta-bar/checklist-cta-bar.component.ts @@ -3,13 +3,14 @@ import { ChecklistFilter } from '../models/checklist.model'; import { MatIcon } from '@angular/material/icon'; import { MatButton } from '@angular/material/button'; import { NgIf } from '@angular/common'; +import { MatTooltip } from '@angular/material/tooltip'; @Component({ standalone: true, selector: 'ac-checklist-cta-bar', templateUrl: './checklist-cta-bar.component.html', styleUrls: ['./checklist-cta-bar.component.scss'], - imports: [NgIf, MatButton, MatIcon] + imports: [NgIf, MatButton, MatIcon, MatTooltip] }) export class ChecklistCtaBarComponent { @Input() filter: ChecklistFilter; diff --git a/src/app/checklist/checklist-detail-view/checklist-detail-view.component.html b/src/app/checklist/checklist-detail-view/checklist-detail-view.component.html index 9558052..1efcda3 100644 --- a/src/app/checklist/checklist-detail-view/checklist-detail-view.component.html +++ b/src/app/checklist/checklist-detail-view/checklist-detail-view.component.html @@ -1,4 +1,4 @@ - +

Done

; - - constructor(private store: Store) {} - - ngOnInit() { - this.item$ = this.store.pipe(select(ChecklistSelectors.getSelectedItem)); - } +export class ChecklistDetailViewComponent { + private store = inject>(Store); + item = this.store.selectSignal(ChecklistSelectors.getSelectedItem); toggleItem(item: ChecklistItem) { this.store.dispatch(new ToggleItem(item)); diff --git a/src/app/checklist/checklist-favorites-view/checklist-favorites-view.component.html b/src/app/checklist/checklist-favorites-view/checklist-favorites-view.component.html index f2017af..4c052de 100644 --- a/src/app/checklist/checklist-favorites-view/checklist-favorites-view.component.html +++ b/src/app/checklist/checklist-favorites-view/checklist-favorites-view.component.html @@ -1,9 +1,9 @@

Favorites

- + - +

>; - filter$: Observable; - - constructor(private store: Store) {} - - ngOnInit() { - this.favorites$ = this.store.pipe(select(ChecklistSelectors.getFilteredFavorites)); - this.filter$ = this.store.pipe(select(ChecklistSelectors.getFavoritesFilter)); - } +export class ChecklistFavoritesViewComponent { + private store = inject>(Store); + favorites = this.store.selectSignal(ChecklistSelectors.getFilteredFavorites); + filter = this.store.selectSignal(ChecklistSelectors.getFavoritesFilter); setFilter(filter: ChecklistFilter) { this.store.dispatch(new SetFavoritesFilter(filter)); diff --git a/src/app/checklist/checklist-list-view/checklist-list-view.component.html b/src/app/checklist/checklist-list-view/checklist-list-view.component.html index c18c5fd..3354863 100644 --- a/src/app/checklist/checklist-list-view/checklist-list-view.component.html +++ b/src/app/checklist/checklist-list-view/checklist-list-view.component.html @@ -1,6 +1,6 @@

; - filter$: Observable; - showActionButtons$: Observable; - - constructor(private store: Store, private breakpointService: BreakpointService) {} - - ngOnInit() { - this.items$ = this.store.pipe(select(ChecklistSelectors.getItemsFromSelectedCategory)); - this.filter$ = this.store.pipe(select(ChecklistSelectors.getCategoriesFilter)); - - const { medium$, desktop$ } = this.breakpointService.getAllBreakpoints(); - this.showActionButtons$ = combineLatest(medium$, desktop$, (medium, desktop) => medium || desktop); - } +export class ListViewComponent { + private store = inject>(Store); + private breakpointService = inject(BreakpointService); + items = this.store.selectSignal(ChecklistSelectors.getItemsFromSelectedCategory); + filter = this.store.selectSignal(ChecklistSelectors.getCategoriesFilter); + showActionButtons = computed(() => this.breakpointService.medium() || this.breakpointService.desktop()); toggleItem(item: ChecklistItem) { this.store.dispatch(new ToggleItem(item)); @@ -44,11 +34,13 @@ export class ListViewComponent implements OnInit { } checkAllItems() { - this.getSelectedCategory().subscribe(category => this.store.dispatch(new CheckAll(category))); + const categories = this.getSelectedCategory(); + this.store.dispatch(new CheckAll(categories)); } uncheckAllItems() { - this.getSelectedCategory().subscribe(category => this.store.dispatch(new UncheckAll(category))); + const categories = this.getSelectedCategory(); + this.store.dispatch(new UncheckAll(categories)); } toggleFavorite(item: ChecklistItem) { @@ -59,7 +51,7 @@ export class ListViewComponent implements OnInit { return item.id; } - private getSelectedCategory(): Observable { - return this.store.pipe(selectOnce(ChecklistSelectors.getSelectedCategory)); + private get getSelectedCategory(): Signal { + return this.store.selectSignal(ChecklistSelectors.getSelectedCategory); } } diff --git a/src/app/checklist/checklist-overview/checklist-overview.component.html b/src/app/checklist/checklist-overview/checklist-overview.component.html index b7b9f1a..abb1122 100644 --- a/src/app/checklist/checklist-overview/checklist-overview.component.html +++ b/src/app/checklist/checklist-overview/checklist-overview.component.html @@ -1,4 +1,4 @@ -

diff --git a/src/app/checklist/checklist-overview/checklist-overview.component.ts b/src/app/checklist/checklist-overview/checklist-overview.component.ts index bb48c80..1e93e3c 100644 --- a/src/app/checklist/checklist-overview/checklist-overview.component.ts +++ b/src/app/checklist/checklist-overview/checklist-overview.component.ts @@ -1,23 +1,21 @@ import { animate, query, stagger, style, transition, trigger } from '@angular/animations'; -import { Component, OnInit } from '@angular/core'; +import { Component, effect, inject, untracked } from '@angular/core'; import { ActivatedRoute, Router, RouterOutlet } from '@angular/router'; -import { select, Store } from '@ngrx/store'; -import { Observable, zip } from 'rxjs'; -import { filter, switchMap, tap } from 'rxjs/operators'; -import { selectOnce } from '../../shared/operators'; +import { Store } from '@ngrx/store'; import { extractRouteParams, getActivatedChild } from '../../shared/router.utils'; import { ApplicationState } from '../../state/app.state'; -import { Category, ChecklistItem } from '../models/checklist.model'; +import { BreadcrumbItem } from '../models/checklist.model'; import { ChecklistSelectors } from '../state/checklist.selectors'; import { MatIcon } from '@angular/material/icon'; -import { NgIf, NgFor, AsyncPipe } from '@angular/common'; +import { NgIf, NgFor } from '@angular/common'; +import { toSignal } from '@angular/core/rxjs-interop'; @Component({ standalone: true, selector: 'ac-checklist-overview', templateUrl: './checklist-overview.component.html', styleUrls: ['./checklist-overview.component.scss'], - imports: [NgIf, NgFor, MatIcon, RouterOutlet, AsyncPipe], + imports: [NgIf, NgFor, MatIcon, RouterOutlet], animations: [ trigger('breadcrumb', [ transition('* <=> *', [ @@ -50,36 +48,33 @@ import { NgIf, NgFor, AsyncPipe } from '@angular/common'; ]) ] }) -export class ChecklistOverviewComponent implements OnInit { - breadcrumb$: Observable; +export class ChecklistOverviewComponent { + private store = inject>(Store); + private router = inject(Router); + private route = inject(ActivatedRoute); + breadcrumbs = this.store.selectSignal(ChecklistSelectors.getBreadcrumb); - constructor(private store: Store, private router: Router, private route: ActivatedRoute) {} + constructor() { + const params = toSignal(this.route.params); + const categories = this.store.selectSignal(ChecklistSelectors.getActiveCategories); + const entities = this.store.selectSignal(ChecklistSelectors.getActiveCategoryEntities); + const editMode = this.store.selectSignal(ChecklistSelectors.getEditMode); - ngOnInit() { - this.breadcrumb$ = this.store.pipe(select(ChecklistSelectors.getBreadcrumb)); - - this.route.params - .pipe( - switchMap(_ => - zip( - this.store.pipe(selectOnce(ChecklistSelectors.getActiveCategoryEntities)), - this.store.pipe(selectOnce(ChecklistSelectors.getActiveCategories)), - this.store.pipe(selectOnce(ChecklistSelectors.getEditMode)) - ) - ), - filter(([, categories]) => !!categories.length), - tap(([entities, categories, editMode]) => { + effect(() => { + const _ = params(); + untracked(() => { + if (categories().length) { const { category } = extractRouteParams(this.route.snapshot, 1); - const categoryDisabled = !category || !entities[category]; + const categoryDisabled = !category || !entities()[category]; - if (categoryDisabled && !editMode) { - this.router.navigate([categories[0].slug], { + if (categoryDisabled && !editMode()) { + this.router.navigate([categories()[0].slug], { relativeTo: this.route }); } - }) - ) - .subscribe(); + } + }); + }); } goBack(last: boolean) { @@ -89,7 +84,7 @@ export class ChecklistOverviewComponent implements OnInit { } } - trackByTitle(_, item: Category | ChecklistItem) { + trackByTitle(_, item: BreadcrumbItem) { return item.title; } } diff --git a/src/app/checklist/checklist-search/checklist-search.component.html b/src/app/checklist/checklist-search/checklist-search.component.html index 393a310..5ae52bc 100644 --- a/src/app/checklist/checklist-search/checklist-search.component.html +++ b/src/app/checklist/checklist-search/checklist-search.component.html @@ -1,7 +1,7 @@ @@ -10,7 +10,7 @@ [displayWith]="getOptionText.bind(this)" (optionSelected)="optionSelected($event)" > - + {{ result.document.category }} diff --git a/src/app/checklist/checklist-search/checklist-search.component.ts b/src/app/checklist/checklist-search/checklist-search.component.ts index b4c53fb..e68ce3d 100644 --- a/src/app/checklist/checklist-search/checklist-search.component.ts +++ b/src/app/checklist/checklist-search/checklist-search.component.ts @@ -1,47 +1,43 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, computed, inject, signal } from '@angular/core'; import { FormControl, ReactiveFormsModule } from '@angular/forms'; import { MatAutocompleteSelectedEvent, MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete'; import { Router } from '@angular/router'; import * as fuzzysort from 'fuzzysort'; -import { BehaviorSubject, combineLatest, Observable } from 'rxjs'; -import { debounceTime, map, switchMap } from 'rxjs/operators'; +import { debounceTime } from 'rxjs/operators'; import { CategoryEntity, ChecklistItem } from '../models/checklist.model'; import { IndexEntry, SearchResult } from '../search/search.models'; import { SearchService } from '../search/search.service'; import { MatOption } from '@angular/material/core'; -import { NgFor, NgIf, AsyncPipe } from '@angular/common'; +import { NgFor, NgIf } from '@angular/common'; +import { toSignal } from '@angular/core/rxjs-interop'; @Component({ standalone: true, selector: 'ac-checklist-search', templateUrl: './checklist-search.component.html', styleUrls: ['./checklist-search.component.scss'], - imports: [ReactiveFormsModule, MatAutocompleteTrigger, MatAutocomplete, NgFor, MatOption, NgIf, AsyncPipe] + imports: [ReactiveFormsModule, MatAutocompleteTrigger, MatAutocomplete, NgFor, MatOption, NgIf] }) -export class ChecklistSearchComponent implements OnInit { - results$: Observable; +export class ChecklistSearchComponent { + private searchService = inject(SearchService); + private router = inject(Router); searchField = new FormControl(''); - - focus$ = new BehaviorSubject('INIT'); - - constructor(private searchService: SearchService, private router: Router) {} - - ngOnInit() { - const search$ = this.searchField.valueChanges.pipe(debounceTime(150)); - - this.results$ = combineLatest([this.focus$, search$]).pipe( - map(([, term]) => term), - switchMap(term => this.searchService.search(term)), - map(results => results.map(this.mapToSearchResult)) - ); + search = toSignal(this.searchField.valueChanges.pipe(debounceTime(150))); + focus = signal(0); + + results = computed(() => { + const _ = this.focus(); + const search = this.search(); + const results = this.searchService.search(search); + return results.map(this.mapToSearchResult); + }); + + focused() { + this.focus.update(prev => prev + 1); } getOptionText(value: SearchResult) { - if (!value) { - return ''; - } - - return value.document.title; + return value?.document?.title || ''; } optionSelected({ option }: MatAutocompleteSelectedEvent) { diff --git a/src/app/checklist/checklist.component.html b/src/app/checklist/checklist.component.html index 5938364..f9703b1 100644 --- a/src/app/checklist/checklist.component.html +++ b/src/app/checklist/checklist.component.html @@ -1,10 +1,10 @@ - + - + @@ -12,18 +12,18 @@ edit Manage Projects - +

- +

+ CATEGORIES {{ category.title }}

CATEGORIES

🧐 Ups, seems like you're in edit mode!

diff --git a/src/app/checklist/checklist.component.ts b/src/app/checklist/checklist.component.ts index a4c5948..25fd841 100644 --- a/src/app/checklist/checklist.component.ts +++ b/src/app/checklist/checklist.component.ts @@ -1,15 +1,13 @@ -import { Component, OnInit, ViewChild } from '@angular/core'; +import { Component, Signal, computed, inject, signal } from '@angular/core'; import { MatSidenav, MatDrawerMode, MatSidenavContainer, MatSidenavContent } from '@angular/material/sidenav'; import { MatDialog } from '@angular/material/dialog'; import { Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router'; -import { select, Store } from '@ngrx/store'; -import { BehaviorSubject, combineLatest, Observable, of, zip } from 'rxjs'; -import { filter, map, switchMap } from 'rxjs/operators'; -import { Project } from '../projects/models/projects.model'; +import { Store } from '@ngrx/store'; +import { of } from 'rxjs'; +import { tap } from 'rxjs/operators'; import { ToggleAllFavorites, ToggleCategory } from '../projects/state/projects.actions'; import { ProjectsSelectors } from '../projects/state/projects.selectors'; import { BreakpointService } from '../shared/breakpoint.service'; -import { selectOnce } from '../shared/operators'; import { hasEntities } from '../shared/utils'; import { ApplicationState } from '../state/app.state'; import { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-dialog.component'; @@ -22,7 +20,7 @@ import { MatSlideToggle } from '@angular/material/slide-toggle'; import { MatBadge } from '@angular/material/badge'; import { ScoreChartComponent } from '../shared/score-chart/score-chart.component'; import { ChecklistSearchComponent } from './checklist-search/checklist-search.component'; -import { NgIf, NgFor, AsyncPipe } from '@angular/common'; +import { NgIf, NgFor } from '@angular/common'; import { DropdownStaticOptionsComponent, DropdownStaticOptionComponent @@ -65,100 +63,60 @@ enum CategoryListMode { MatCheckbox, MatSidenavContent, RouterOutlet, - FooterComponent, - AsyncPipe + FooterComponent ], providers: [SearchService] }) -export class ChecklistComponent implements OnInit { - private editMode$ = new BehaviorSubject(CategoryListMode.List); - - small$: Observable; - mediumUp$: Observable; - desktop$: Observable; - - categories$: Observable>; - projects$: Observable>; - selectedProjectId$: Observable; - favoritesCount$: Observable; - favoritesScore$: Observable; - overallScore$: Observable; - - editMode = false; - - sideNavMode: MatDrawerMode = 'side'; - - @ViewChild(MatSidenav, { static: true }) - sideNav: MatSidenav; - - constructor( - private store: Store, - private breakpointService: BreakpointService, - private dialog: MatDialog, - private router: Router - ) {} - - ngOnInit() { - this.categories$ = this.editMode$.pipe(switchMap(mode => this.getCategories(mode))); - this.projects$ = this.store.pipe(select(ProjectsSelectors.getProjects)); - this.selectedProjectId$ = this.store.pipe(select(ProjectsSelectors.getSelectedProjectId)); - this.favoritesCount$ = this.store.pipe(select(ChecklistSelectors.getFavoritesCount)); - this.favoritesScore$ = this.store.pipe(select(ChecklistSelectors.getFavoritesScore)); - - const { small$, medium$, desktop$ } = this.breakpointService.getAllBreakpoints(); - - this.small$ = small$; - this.desktop$ = desktop$; - this.mediumUp$ = combineLatest([medium$, desktop$]).pipe(map(([medium, desktop]) => medium || desktop)); - - desktop$.subscribe(matches => { - if (!matches) { - this.sideNav.close(); - this.setSidenavMode('over'); - } else { - this.sideNav.open(); - this.setSidenavMode('side'); - } - }); - } - - toggleCategory(category: Category) { - this.store - .pipe( - selectOnce(ChecklistSelectors.getFavoriteEntitiesByCategory(category.slug)), - switchMap((favorites: Array) => { - if (hasEntities(favorites) && category.enabled) { - return this.openUserPrompt(favorites); - } - - return of(true); - }), - filter(remove => remove) - ) - .subscribe(() => this.store.dispatch(new ToggleCategory(category.slug))); +export class ChecklistComponent { + private store = inject>(Store); + private breakpointService = inject(BreakpointService); + private dialog = inject(MatDialog); + private router = inject(Router); + + small = this.breakpointService.small; + medium = this.breakpointService.medium; + desktop = this.breakpointService.desktop; + mediumUp = computed(() => this.medium() || this.desktop()); + + projects = this.store.selectSignal(ProjectsSelectors.getProjects); + selectedProjectId = this.store.selectSignal(ProjectsSelectors.getSelectedProjectId); + favoritesCount = this.store.selectSignal(ChecklistSelectors.getFavoritesCount); + favoritesScore = this.store.selectSignal(ChecklistSelectors.getFavoritesScore); + private activeCategories = this.store.selectSignal(ChecklistSelectors.getActiveCategories); + private allCategories = this.store.selectSignal(ChecklistSelectors.getAllCategories); + + categories = computed(() => { + const mode = this.editMode() ? CategoryListMode.Edit : CategoryListMode.List; + const categories = mode ? this.allCategories : this.activeCategories; + return categories(); + }); + + editMode = signal(false); + + sideNavMode = computed(() => (this.mediumUp() ? 'side' : 'over')); + + toggleCategory(category: Category): any { + const selector = ChecklistSelectors.getFavoriteEntitiesByCategory(category.slug); + const favorites = this.store.selectSignal(selector)() as ChecklistItem[]; + let observe = of(true); + if (hasEntities(favorites) && category.enabled) { + observe = this.openUserPrompt(favorites); + } + observe.subscribe(valid => valid && this.store.dispatch(new ToggleCategory(category.slug))); } toggleEditMode() { - this.editMode = !this.editMode; + const editMode = !this.editMode(); + this.editMode.set(editMode); this.store.dispatch(new ToggleEditMode()); - this.editMode$.next(this.editMode ? CategoryListMode.Edit : CategoryListMode.List); - - of(this.editMode) - .pipe( - filter(editMode => !editMode), - switchMap(_ => this.store.pipe(selectOnce(ChecklistSelectors.getSelectedCategory))), - filter(category => !!category), - filter(category => !category.enabled), - switchMap(_ => - zip( - this.store.pipe(selectOnce(ChecklistSelectors.getActiveCategories)), - this.store.pipe(selectOnce(ProjectsSelectors.getSelectedProjectId)) - ) - ) - ) - .subscribe(([categories, projectId]) => { + if (!editMode) { + const category = this.store.selectSignal(ChecklistSelectors.getSelectedCategory)(); + if (category && !category.enabled) { + const categories = this.activeCategories(); + const projectId = this.selectedProjectId(); this.router.navigate(['/', projectId, 'checklist', categories[0].slug]); - }); + } + } } navigateToProject(project: string) { @@ -182,28 +140,14 @@ export class ChecklistComponent implements OnInit { } }); - return dialogRef.afterClosed().pipe(switchMap(result => this.processDialogResult(result, favorites))); + return dialogRef.afterClosed().pipe( + tap(result => this.processDialogResult(result, favorites)) + ); } private processDialogResult(result: boolean, favorites: Array) { if (result) { this.store.dispatch(new ToggleAllFavorites(favorites)); } - - return of(result); - } - - private getCategories(mode: CategoryListMode) { - let categories$ = this.store.pipe(select(ChecklistSelectors.getActiveCategories)); - - if (mode === CategoryListMode.Edit) { - categories$ = this.store.pipe(select(ChecklistSelectors.getAllCategories)); - } - - return categories$; - } - - private setSidenavMode(mode: 'side' | 'over') { - this.sideNavMode = mode; } } diff --git a/src/app/checklist/confirmation-dialog/confirmation-dialog.component.ts b/src/app/checklist/confirmation-dialog/confirmation-dialog.component.ts index 5d2b9e6..93a6a79 100644 --- a/src/app/checklist/confirmation-dialog/confirmation-dialog.component.ts +++ b/src/app/checklist/confirmation-dialog/confirmation-dialog.component.ts @@ -1,4 +1,4 @@ -import { Component, HostBinding, Inject, OnInit } from '@angular/core'; +import { Component, HostBinding, inject } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogTitle, @@ -15,15 +15,14 @@ import { MatButton } from '@angular/material/button'; styleUrls: ['./confirmation-dialog.component.scss'], imports: [MatDialogTitle, MatDialogContent, MatDialogActions, MatButton, MatDialogClose] }) -export class ConfirmationDialogComponent implements OnInit { - @HostBinding('style.maxWidth') - width = '350px'; +export class ConfirmationDialogComponent { + public data = inject(MAT_DIALOG_DATA); - confirmationButtonColor = 'warn'; + @HostBinding('style.maxWidth') width = '350px'; - constructor(@Inject(MAT_DIALOG_DATA) public data: any) {} + confirmationButtonColor = 'warn'; - ngOnInit() { + constructor() { const { width, confirmationButtonColor } = this.data; if (width) { diff --git a/src/app/checklist/search/search.service.ts b/src/app/checklist/search/search.service.ts index 125de99..4404966 100644 --- a/src/app/checklist/search/search.service.ts +++ b/src/app/checklist/search/search.service.ts @@ -33,7 +33,7 @@ export class SearchService { } search(term: string) { - return of(fuzzysort.go(term, this.index, this.options)); + return fuzzysort.go(term, this.index, this.options); } createIndex(categoryEntities: CategoryEntities, itemEntities: ItemEntities, projectId: string) { diff --git a/src/app/projects/project-dialog/project-dialog.component.ts b/src/app/projects/project-dialog/project-dialog.component.ts index 9fe535c..f79e413 100644 --- a/src/app/projects/project-dialog/project-dialog.component.ts +++ b/src/app/projects/project-dialog/project-dialog.component.ts @@ -1,4 +1,4 @@ -import { Component, Inject, OnInit } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormControl, Validators, ReactiveFormsModule } from '@angular/forms'; import { ErrorStateMatcher } from '@angular/material/core'; import { @@ -91,7 +91,10 @@ const verifyProjectName = (projectName: string) => { MatDialogClose ] }) -export class ProjectDialogComponent implements OnInit { +export class ProjectDialogComponent { + public data = inject(MAT_DIALOG_DATA); + private store = inject>(Store); + public dialogRef = inject>(MatDialogRef); mode: ProjectDialogMode; title: string; project: Partial; @@ -104,13 +107,7 @@ export class ProjectDialogComponent implements OnInit { verifyProjectName = new FormControl(''); errorStateMatcher = new CustomErrorStateMatcher(); - constructor( - @Inject(MAT_DIALOG_DATA) public data: ProjectDialogData, - private store: Store, - public dialogRef: MatDialogRef - ) {} - - ngOnInit() { + constructor() { const { title, project, mode = ProjectDialogMode.Create, submitButtonText } = this.data; this.project = project ? project : { name: '' }; diff --git a/src/app/projects/projects-view/projects-view.component.html b/src/app/projects/projects-view/projects-view.component.html index 660e65f..efd8a63 100644 --- a/src/app/projects/projects-view/projects-view.component.html +++ b/src/app/projects/projects-view/projects-view.component.html @@ -18,7 +18,7 @@

Your Projects

add Add Project - +

diff --git a/src/app/projects/projects-view/projects-view.component.ts b/src/app/projects/projects-view/projects-view.component.ts index 5a07954..6811fbc 100644 --- a/src/app/projects/projects-view/projects-view.component.ts +++ b/src/app/projects/projects-view/projects-view.component.ts @@ -1,8 +1,8 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; import { Router } from '@angular/router'; -import { select, Store } from '@ngrx/store'; -import { asyncScheduler, Observable } from 'rxjs'; +import { Store } from '@ngrx/store'; +import { asyncScheduler } from 'rxjs'; import { filter, map, observeOn } from 'rxjs/operators'; import { ApplicationState } from '../../state/app.state'; import { Project } from '../models/projects.model'; @@ -18,7 +18,7 @@ import { import { AddProject, DeleteProject, EditProject } from '../state/projects.actions'; import { ProjectsSelectors } from '../state/projects.selectors'; import { MatIconButton } from '@angular/material/button'; -import { NgFor, AsyncPipe, PercentPipe } from '@angular/common'; +import { NgFor, PercentPipe } from '@angular/common'; import { MatIcon } from '@angular/material/icon'; import { MatRipple } from '@angular/material/core'; import { MatCard, MatCardContent, MatCardActions } from '@angular/material/card'; @@ -40,7 +40,6 @@ import { FooterComponent } from 'src/app/shared/footer/footer.component'; MatCardContent, MatCardActions, MatIconButton, - AsyncPipe, PercentPipe, ToolbarComponent, ToolbarLogoComponent, @@ -48,14 +47,11 @@ import { FooterComponent } from 'src/app/shared/footer/footer.component'; FooterComponent ] }) -export class ProjectsViewComponent implements OnInit { - projects$: Observable>; - - constructor(private store: Store, private router: Router, private dialog: MatDialog) {} - - ngOnInit() { - this.projects$ = this.store.pipe(select(ProjectsSelectors.getProjects)); - } +export class ProjectsViewComponent { + private store = inject>(Store); + private router = inject(Router); + private dialog = inject(MatDialog); + projects = this.store.selectSignal(ProjectsSelectors.getProjects); navigateToProject(projectId: string) { this.router.navigate([`/${projectId}/checklist`]); diff --git a/src/app/shared/breakpoint.service.ts b/src/app/shared/breakpoint.service.ts index 663a21c..28e84f9 100644 --- a/src/app/shared/breakpoint.service.ts +++ b/src/app/shared/breakpoint.service.ts @@ -1,31 +1,32 @@ -import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout'; -import { Injectable } from '@angular/core'; -import { map, shareReplay } from 'rxjs/operators'; -import { Observable } from 'rxjs'; +import { BreakpointObserver } from '@angular/cdk/layout'; +import { Injectable, inject } from '@angular/core'; +import { toSignal } from '@angular/core/rxjs-interop'; +import { map } from 'rxjs/operators'; export enum Breakpoint { - Small = 'small$', - Medium = 'medium$', - Desktop = 'desktop$' + Small = 'small', + Medium = 'medium', + Desktop = 'desktop' } @Injectable({ providedIn: 'root' }) export class BreakpointService { - private _small$: Observable; - private _medium$: Observable; - private _desktop$: Observable; + private breakPointObserver = inject(BreakpointObserver); + readonly small = toSignal(this.breakpoint('(max-width: 600px)')); + readonly medium = toSignal(this.breakpoint('(min-width: 600px) and (max-width: 992px)')); + readonly desktop = toSignal(this.breakpoint('(min-width: 992px)')); - constructor(private breakPointObserver: BreakpointObserver) { - this.setupBreakpoints(); + private breakpoint(query: string) { + return this.breakPointObserver.observe([query]).pipe(map(breakPoint => breakPoint.matches)); } getAllBreakpoints() { return { - [Breakpoint.Small]: this._small$, - [Breakpoint.Medium]: this._medium$, - [Breakpoint.Desktop]: this._desktop$ + [Breakpoint.Small]: this.small, + [Breakpoint.Medium]: this.medium, + [Breakpoint.Desktop]: this.desktop }; } @@ -33,25 +34,4 @@ export class BreakpointService { const breakpoints = this.getAllBreakpoints(); return breakpoints[breakpoint]; } - - private setupBreakpoints() { - const small$ = this.breakPointObserver.observe(['(max-width: 600px)']).pipe( - map(breakPoint => breakPoint.matches), - shareReplay(1) - ); - - const medium$ = this.breakPointObserver.observe(['(min-width: 600px) and (max-width: 992px)']).pipe( - map(breakPoint => breakPoint.matches), - shareReplay(1) - ); - - const desktop$ = this.breakPointObserver.observe(['(min-width: 992px)']).pipe( - map(breakPoint => breakPoint.matches), - shareReplay(1) - ); - - this._small$ = small$; - this._medium$ = medium$; - this._desktop$ = desktop$; - } }

Your Projects

{{ project.name }}

{{ favorite.category.title }}