diff --git a/projects/ch12/src/app/app.module.ts b/projects/ch12/src/app/app.module.ts index 64880def..e093d7c6 100644 --- a/projects/ch12/src/app/app.module.ts +++ b/projects/ch12/src/app/app.module.ts @@ -6,6 +6,10 @@ import { FlexLayoutModule } from '@angular/flex-layout' import { ReactiveFormsModule } from '@angular/forms' import { BrowserModule } from '@angular/platform-browser' import { BrowserAnimationsModule } from '@angular/platform-browser/animations' +import { EntityDataModule } from '@ngrx/data' +import { EffectsModule } from '@ngrx/effects' +import { StoreModule } from '@ngrx/store' +import { StoreDevtoolsModule } from '@ngrx/store-devtools' import { IConfig, NgxMaskModule } from 'ngx-mask' import { environment } from '../environments/environment' @@ -16,6 +20,7 @@ import { AuthHttpInterceptor } from './auth/auth-http-interceptor' import { authFactory } from './auth/auth.factory' import { AuthService } from './auth/auth.service' import { SimpleDialogComponent } from './common/simple-dialog.component' +import { entityConfig } from './entity-metadata' import { HomeComponent } from './home/home.component' import { LoginComponent } from './login/login.component' import { NavigationMenuComponent } from './navigation-menu/navigation-menu.component' @@ -47,6 +52,10 @@ export const options: Partial | (() => Partial) = { NgxMaskModule.forRoot(options), AngularFireModule.initializeApp(environment.firebase), AngularFireAuthModule, + StoreModule.forRoot({}, {}), + EffectsModule.forRoot([]), + EntityDataModule.forRoot(entityConfig), + StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production }), ], providers: [ { diff --git a/projects/ch12/src/app/entity-metadata.ts b/projects/ch12/src/app/entity-metadata.ts new file mode 100644 index 00000000..4ca720bc --- /dev/null +++ b/projects/ch12/src/app/entity-metadata.ts @@ -0,0 +1,9 @@ +import { EntityMetadataMap } from '@ngrx/data' + +const entityMetadata: EntityMetadataMap = { + User: {}, +} + +export const entityConfig = { + entityMetadata, +} diff --git a/projects/ch12/src/app/manager/user-table/user-table.component.spec.ts b/projects/ch12/src/app/manager/user-table/user-table.component.spec.ts index 14c49f2a..e38abe66 100644 --- a/projects/ch12/src/app/manager/user-table/user-table.component.spec.ts +++ b/projects/ch12/src/app/manager/user-table/user-table.component.spec.ts @@ -1,11 +1,12 @@ import { ComponentFixture, TestBed, async } from '@angular/core/testing' import { FormsModule } from '@angular/forms' +import { EntityDataModule } from '@ngrx/data' import { EffectsModule } from '@ngrx/effects' import { StoreModule } from '@ngrx/store' import { of } from 'rxjs' import { commonTestingModules, commonTestingProviders } from '../../common/common.testing' -// import { entityConfig } from '../../entity-metadata' +import { entityConfig } from '../../entity-metadata' import { User } from '../../user/user/user' import { ManagerMaterialModule } from '../manager-material.module' import { UserTableComponent } from './user-table.component' @@ -21,7 +22,7 @@ describe('UserTableComponent', () => { imports: commonTestingModules.concat([ FormsModule, ManagerMaterialModule, - // EntityDataModule.forRoot(entityConfig), + EntityDataModule.forRoot(entityConfig), EffectsModule.forRoot([]), StoreModule.forRoot({}), ]), diff --git a/projects/ch12/src/app/manager/user-table/user-table.component.ts b/projects/ch12/src/app/manager/user-table/user-table.component.ts index 549380be..8895b04d 100644 --- a/projects/ch12/src/app/manager/user-table/user-table.component.ts +++ b/projects/ch12/src/app/manager/user-table/user-table.component.ts @@ -7,7 +7,8 @@ import { catchError, debounceTime, map, startWith, switchMap } from 'rxjs/operat import { SubSink } from 'subsink' import { OptionalTextValidation } from '../../common/validations' -import { IUser } from '../../user/user/user' +import { IUser, User } from '../../user/user/user' +import { UserEntityService } from '../../user/user/user.entity.service' import { IUsers, UserService } from '../../user/user/user.service' @Component({ @@ -34,10 +35,11 @@ export class UserTableComponent implements OnDestroy, AfterViewInit { @ViewChild(MatSort, { static: false }) sort: MatSort constructor( - private userService: UserService // private userEntityService: UserEntityService + private userService: UserService, + private userEntityService: UserEntityService ) { - // this.loading$ = merge(this.userEntityService.loading$, this.isLoadingResults$) - this.loading$ = this.isLoadingResults$ + this.loading$ = merge(this.userEntityService.loading$, this.isLoadingResults$) + // this.loading$ = this.isLoadingResults$ //Pre-NgRx Data } getUsers( @@ -47,21 +49,33 @@ export class UserTableComponent implements OnDestroy, AfterViewInit { sortColumn: string, sortDirection: SortDirection ): Observable { - // if (this.useNgRxData) { - // return this.userEntityService.getAll().pipe( - // map((value) => { - // return { total: 0, data: value } - // }) - // ) - // } else { - return this.userService.getUsers( - pageSize, - searchText, - pagesToSkip, - sortColumn, - sortDirection - ) - // } + if (this.useNgRxData) { + return this.userEntityService.getAll().pipe( + map((value) => { + return { total: value.length, data: value } + }) + ) + } else { + return this.userService.getUsers( + pageSize, + searchText, + pagesToSkip, + sortColumn, + sortDirection + ) + } + } + + add(user: User) { + this.userEntityService.add(user) + } + + delete(user: User) { + this.userEntityService.delete(user._id) + } + + update(user: User) { + this.userEntityService.update(user) } ngOnDestroy(): void { diff --git a/projects/ch12/src/app/user/user/user.entity.service.ts b/projects/ch12/src/app/user/user/user.entity.service.ts new file mode 100644 index 00000000..571d25f8 --- /dev/null +++ b/projects/ch12/src/app/user/user/user.entity.service.ts @@ -0,0 +1,25 @@ +import { Injectable } from '@angular/core' +import { + EntityActionOptions, + EntityCollectionServiceBase, + EntityCollectionServiceElementsFactory, +} from '@ngrx/data' +import { Observable } from 'rxjs' +import { map } from 'rxjs/operators' + +import { User } from './user' +import { UserService } from './user.service' + +@Injectable({ providedIn: 'root' }) +export class UserEntityService extends EntityCollectionServiceBase { + constructor( + serviceElementsFactory: EntityCollectionServiceElementsFactory, + private userService: UserService + ) { + super('User', serviceElementsFactory) + } + + getAll(options?: EntityActionOptions): Observable { + return this.userService.getUsers(10).pipe(map((users) => users.data.map(User.Build))) + } +} diff --git a/src/app/manager/user-table/user-table.component.ts b/src/app/manager/user-table/user-table.component.ts index 12bb12a6..53361d40 100644 --- a/src/app/manager/user-table/user-table.component.ts +++ b/src/app/manager/user-table/user-table.component.ts @@ -51,7 +51,7 @@ export class UserTableComponent implements OnDestroy, AfterViewInit { if (this.useNgRxData) { return this.userEntityService.getAll().pipe( map((value) => { - return { total: 0, data: value } + return { total: value.length, data: value } }) ) } else {