ch12 complete

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<IConfig> | (() => Partial<IConfig>) = {
     NgxMaskModule.forRoot(options),
     AngularFireModule.initializeApp(environment.firebase),
     AngularFireAuthModule,
+    StoreModule.forRoot({}, {}),
+    EffectsModule.forRoot([]),
+    EntityDataModule.forRoot(entityConfig),
+    StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production }),
   ],
   providers: [
     {

projects/ch12/src/app/entity-metadata.ts

@@ -0,0 +1,9 @@
+import { EntityMetadataMap } from '@ngrx/data'
+
+const entityMetadata: EntityMetadataMap = {
+  User: {},
+}
+
+export const entityConfig = {
+  entityMetadata,
+}

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({}),
       ]),

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<IUsers> {
-    // 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 {

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<User> {
+  constructor(
+    serviceElementsFactory: EntityCollectionServiceElementsFactory,
+    private userService: UserService
+  ) {
+    super('User', serviceElementsFactory)
+  }
+
+  getAll(options?: EntityActionOptions): Observable<User[]> {
+    return this.userService.getUsers(10).pipe(map((users) => users.data.map(User.Build)))
+  }
+}

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 {