-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(signals): new signals package with ngrx signals common store fea…
…tures This is a new package called @ngrx-traits/signals Implements the following traits withCalls Similar to react query it allows you to define some calls and it adds a loading track and a prop to store it withEntitiesRemoteFilter adds states and methods for remote filtering logic withEntitiesLocalFilter adds states and methods for local filtering logic withEntitiesLocalPagination add states, compute and methods for local pagination withEntitiesRemotePagination add states, compute and methods for remote pagination withEntitiesLocalSort add states and methods needed for local sorting withEntitiesRemoteSort add states and methods needed for remote sorting withEntitiesSingleSelection add states and methods for single selection of entities withEntitiesMultiSelection add states and methods for multi selection of entities withCallStatus add states and methods for handling the loading of state related to a call withLogger great for debugging logs any change to the state
- Loading branch information
1 parent
efd1445
commit 92b52eb
Showing
49 changed files
with
8,923 additions
and
5,319 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,9 @@ | ||
| { | ||
| "singleQuote": true | ||
| } | ||
| "singleQuote": true, | ||
| "plugins": ["@trivago/prettier-plugin-sort-imports"], | ||
| "importOrder": ["^zone.js(.*)$", "<THIRD_PARTY_MODULES>", "^@turntown/(.*)$", "^[./]"], | ||
| "importOrderSeparation": true, | ||
| "importOrderSortSpecifiers": true, | ||
| "importOrderCaseInsensitive": true, | ||
| "importOrderParserPlugins": ["typescript", "classProperties", "decorators-legacy"] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
9 changes: 5 additions & 4 deletions
9
apps/example-app/src/app/examples/services/product.service.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 2 additions & 0 deletions
2
apps/example-app/src/app/examples/signals/product-list-paginated-page/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| Example using trait to load a product list with remote filtering and | ||
| sorting and pagination |
118 changes: 118 additions & 0 deletions
118
...es/signals/product-list-paginated-page/product-list-paginated-page-container.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| import { AsyncPipe } from '@angular/common'; | ||
| import { Component, inject, OnInit } from '@angular/core'; | ||
| import { MatButtonModule } from '@angular/material/button'; | ||
| import { MatCardModule } from '@angular/material/card'; | ||
| import { MatPaginatorModule, PageEvent } from '@angular/material/paginator'; | ||
| import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; | ||
| import { Sort } from '@ngrx-traits/common'; | ||
|
|
||
| import { ProductListComponent } from '../../components/product-list/product-list.component'; | ||
| import { ProductSearchFormComponent } from '../../components/product-search-form/product-search-form.component'; | ||
| import { Product, ProductFilter } from '../../models'; | ||
| import { ProductsLocalStore } from './product.store'; | ||
|
|
||
| @Component({ | ||
| selector: 'ngrx-traits-product-list-example-container', | ||
| template: ` | ||
| <mat-card> | ||
| <mat-card-header> | ||
| <mat-card-title>Product List</mat-card-title> | ||
| </mat-card-header> | ||
| <mat-card-content> | ||
| <product-search-form | ||
| [searchProduct]="store.productsFilter()" | ||
| (searchProductChange)="filter($event)" | ||
| ></product-search-form> | ||
| @if (store.productsLoading()) { | ||
| <mat-spinner></mat-spinner> | ||
| } @else { | ||
| <product-list | ||
| [list]="store.productsCurrentPage().entities" | ||
| [selectedProduct]="store.productsSelectedEntity()" | ||
| [selectedSort]="{ | ||
| active: $any(store.productsSort().field), | ||
| direction: store.productsSort().direction | ||
| }" | ||
| (selectProduct)="select($event)" | ||
| (sort)="sort($event)" | ||
| ></product-list> | ||
| <!-- [selectedSort]="store.productsSort()" --> | ||
| <mat-paginator | ||
| [length]="store.productsCurrentPage().total" | ||
| [pageSize]="store.productsCurrentPage().pageSize" | ||
| [pageIndex]="store.productsCurrentPage().pageIndex" | ||
| (page)="loadPage($event)" | ||
| ></mat-paginator> | ||
| } | ||
| </mat-card-content> | ||
| <mat-card-actions [align]="'end'"> | ||
| <button | ||
| mat-raised-button | ||
| color="primary" | ||
| type="submit" | ||
| [disabled]=" | ||
| !store.productsSelectedEntity() || store.checkoutLoading() | ||
| " | ||
| (click)="checkout()" | ||
| > | ||
| @if (store.checkoutLoading()) { | ||
| <mat-spinner [diameter]="20"></mat-spinner> | ||
| } | ||
| <span>CHECKOUT</span> | ||
| </button> | ||
| </mat-card-actions> | ||
| </mat-card> | ||
| `, | ||
| styles: [ | ||
| ` | ||
| mat-card-content > mat-spinner { | ||
| margin: 10px auto; | ||
| } | ||
| mat-card-actions mat-spinner { | ||
| display: inline-block; | ||
| margin-right: 5px; | ||
| } | ||
| `, | ||
| ], | ||
| standalone: true, | ||
| imports: [ | ||
| MatCardModule, | ||
| ProductSearchFormComponent, | ||
| MatProgressSpinnerModule, | ||
| ProductListComponent, | ||
| MatPaginatorModule, | ||
| MatButtonModule, | ||
| AsyncPipe, | ||
| ], | ||
| }) | ||
| export class ProductListPaginatedPageContainerComponent implements OnInit { | ||
| store = inject(ProductsLocalStore); | ||
|
|
||
| ngOnInit() { | ||
| this.store.loadProductDetail; | ||
| this.store.productsFilter; | ||
| // this.store.dispatch(ProductActions.loadProductsUsingRouteQueryParams()); | ||
| } | ||
|
|
||
| select({ id }: Product) { | ||
| this.store.selectProductsEntity({ id }); | ||
| } | ||
|
|
||
| checkout() { | ||
| this.store.checkout(); | ||
| } | ||
|
|
||
| filter(filter: ProductFilter | undefined) { | ||
| filter && this.store.filterProductsEntities({ filter }); | ||
| } | ||
|
|
||
| sort(sort: Sort<Product>) { | ||
| this.store.sortProductsEntities({ | ||
| sort: { field: sort.active as string, direction: sort.direction }, | ||
| }); | ||
| } | ||
|
|
||
| loadPage($event: PageEvent) { | ||
| this.store.loadProductsPage({ pageIndex: $event.pageIndex }); | ||
| } | ||
| } |
Oops, something went wrong.