From 6055bd08569762874e7f8eb19aad676772c339b8 Mon Sep 17 00:00:00 2001 From: Phillip Chambers Date: Fri, 3 Mar 2023 10:10:16 +0000 Subject: [PATCH 01/14] feat: make use of rxjs for caching & searching users --- .../src/app/services/justice-users.service.ts | 53 +++++++++++++++++-- 1 file changed, 49 insertions(+), 4 deletions(-) diff --git a/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.ts b/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.ts index 95c489d19..412798faa 100644 --- a/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.ts +++ b/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.ts @@ -1,7 +1,7 @@ import { Injectable } from '@angular/core'; -import { Observable } from 'rxjs'; -import { map, shareReplay } from 'rxjs/operators'; -import { AddJusticeUserRequest, BHClient, JusticeUserResponse, JusticeUserRole } from './clients/api-client'; +import { BehaviorSubject, Observable } from 'rxjs'; +import { filter, map, mergeMap, share, shareReplay, switchMap, tap } from 'rxjs/operators'; +import { AddJusticeUserRequest, BHClient, EditJusticeUserRequest, JusticeUserResponse, JusticeUserRole } from './clients/api-client'; import { cleanQuery } from '../common/helpers/api-helper'; @Injectable({ @@ -9,8 +9,44 @@ import { cleanQuery } from '../common/helpers/api-helper'; }) export class JusticeUsersService { private cache$: Observable; + private refresh$: BehaviorSubject = new BehaviorSubject(null); + private searchTerm$: BehaviorSubject = new BehaviorSubject(null); + + users$ = this.refresh$.pipe( + mergeMap(() => this.requestJusticeUsers(null)), + shareReplay(1), + switchMap(users => + this.searchTerm$.pipe( + map(term => { + return this.applyFilter(term, users); + }) + ) + ), + tap(x => console.log(`Search results`, x)) + ); constructor(private apiClient: BHClient) {} + + // just for testing -- remove + // triggers an emission on users$ + refresh() { + this.refresh$.next(); + } + + // push a search term into the stream + search(searchTerm: string) { + console.log(`Searching with ${searchTerm}`); + this.searchTerm$.next(searchTerm); + } + + // more complex searching required here + applyFilter(searchTerm: string, users: JusticeUserResponse[]): JusticeUserResponse[] { + if (!searchTerm) { + return users; + } + return users.filter(user => user.first_name === searchTerm); + } + retrieveJusticeUserAccounts() { if (!this.cache$) { this.cache$ = this.requestJusticeUsers(null).pipe(shareReplay(1)); @@ -43,6 +79,15 @@ export class JusticeUsersService { telephone: telephone, role: role }); - return this.apiClient.addNewJusticeUser(request); + return this.apiClient.addNewJusticeUser(request).pipe(tap(() => this.refresh$.next())); + } + + editJusticeUser(id: string, username: string, role: JusticeUserRole) { + const request = new EditJusticeUserRequest({ + id, + username, + role + }); + return this.apiClient.editJusticeUser(request).pipe(tap(() => this.refresh$.next())); } } From d8c1556651736e1a0e5429fa90935f55681d9182 Mon Sep 17 00:00:00 2001 From: Phillip Chambers Date: Tue, 21 Mar 2023 09:30:04 +0000 Subject: [PATCH 02/14] Update components & tests to use observables --- .../services/justice-users.service.spec.ts | 144 +++++-- .../src/app/services/justice-users.service.ts | 54 +-- .../justice-users-menu.component.html | 2 +- .../justice-users-menu.component.spec.ts | 21 - .../justice-users-menu.component.ts | 21 +- .../manage-team/manage-team.component.html | 128 +++--- .../manage-team/manage-team.component.spec.ts | 407 ++++++++---------- .../manage-team/manage-team.component.ts | 135 +++--- 8 files changed, 459 insertions(+), 453 deletions(-) diff --git a/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.spec.ts b/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.spec.ts index 74dbd7e0e..f3cb2c131 100644 --- a/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.spec.ts +++ b/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.spec.ts @@ -1,63 +1,110 @@ -import { fakeAsync, TestBed, tick } from '@angular/core/testing'; -import { of } from 'rxjs'; +import { TestBed } from '@angular/core/testing'; +import { combineLatest, of } from 'rxjs'; +import { count, delay, switchMap, take } from 'rxjs/operators'; import { AddJusticeUserRequest, BHClient, EditJusticeUserRequest, JusticeUserResponse, JusticeUserRole } from './clients/api-client'; import { JusticeUsersService } from './justice-users.service'; +import { Logger } from './logger'; describe('JusticeUsersService', () => { let service: JusticeUsersService; let clientApiSpy: jasmine.SpyObj; + const loggerSpy = jasmine.createSpyObj('Logger', ['error', 'debug', 'warn']); beforeEach(() => { clientApiSpy = jasmine.createSpyObj(['getUserList', 'addNewJusticeUser', 'deleteJusticeUser', 'editJusticeUser']); - TestBed.configureTestingModule({ providers: [{ provide: BHClient, useValue: clientApiSpy }] }); + TestBed.configureTestingModule({ + providers: [ + { provide: BHClient, useValue: clientApiSpy }, + { provide: Logger, useValue: loggerSpy } + ] + }); service = TestBed.inject(JusticeUsersService); }); - describe('retrieveJusticeUserAccounts', () => { - it('should call api when retrieving justice user accounts', (done: DoneFn) => { + describe('`users$` observable', () => { + it('should emit users returned from api', (done: DoneFn) => { const users: JusticeUserResponse[] = [ new JusticeUserResponse({ id: '123', contact_email: 'user1@test.com' }), new JusticeUserResponse({ id: '456', contact_email: 'user2@test.com' }), new JusticeUserResponse({ id: '789', contact_email: 'user3@test.com' }) ]; clientApiSpy.getUserList.and.returnValue(of(users)); - service.retrieveJusticeUserAccounts().subscribe(result => { + service.users$.subscribe(result => { expect(result).toEqual(users); done(); }); }); - it('should not call api when retrieving justice user accounts and users have been already been cached', (done: DoneFn) => { - const users: JusticeUserResponse[] = [ - new JusticeUserResponse({ id: '123', contact_email: 'user1@test.com' }), - new JusticeUserResponse({ id: '456', contact_email: 'user2@test.com' }), - new JusticeUserResponse({ id: '789', contact_email: 'user3@test.com' }) - ]; - service['cache$'] = of(users); - clientApiSpy.getUserList.and.returnValue(of(users)); - service.retrieveJusticeUserAccounts().subscribe(result => { - expect(result).toEqual(users); - expect(clientApiSpy.getUserList).toHaveBeenCalledTimes(0); + it('should not make additional api requests when additional observers subscribe', (done: DoneFn) => { + clientApiSpy.getUserList.and.returnValue(of([])); + + combineLatest([service.users$, service.users$]) + .pipe( + delay(1000), + switchMap(x => service.users$) + ) + .subscribe(() => { + expect(clientApiSpy.getUserList).toHaveBeenCalledTimes(1); + done(); + }); + }); + }); + + describe('search()', () => { + it('should trigger another emission from $users observable', (done: DoneFn) => { + // arrange + clientApiSpy.getUserList.and.returnValue(of([])); + + // users$ will emit initially - after calling search() two times, we should see 3 emissions from users$ + service.filteredUsers$.pipe(take(3), count()).subscribe(c => { + // assert + expect(c).toBe(3); done(); }); + + // act + service.search(''); + service.search(''); }); - it('should call api and return user list', (done: DoneFn) => { - const users: JusticeUserResponse[] = [new JusticeUserResponse({ id: '123', contact_email: 'user1@test.com' })]; - const term = 'user1'; - clientApiSpy.getUserList.and.returnValue(of(users)); - service.retrieveJusticeUserAccountsNoCache(term).subscribe(result => { - expect(result).toEqual(users); - expect(clientApiSpy.getUserList).toHaveBeenCalledTimes(1); + it('should apply a filter to the users collection', () => { + // arrange + const users: JusticeUserResponse[] = [ + new JusticeUserResponse({ id: '123', contact_email: 'user1@test.com', first_name: 'Test' }), + new JusticeUserResponse({ id: '456', contact_email: 'user2@test.com', first_name: 'AnotherTest' }), + new JusticeUserResponse({ id: '789', contact_email: 'user3@test.com', first_name: 'LastTest' }) + ]; + + // act + const filteredUsers = service.applyFilter('Test', users); + + // assert + expect(filteredUsers[0].first_name).toBe('Test'); + }); + }); + + describe('refresh()', () => { + it('should trigger another emission from $users observable', (done: DoneFn) => { + // arrange + clientApiSpy.getUserList.and.returnValue(of([])); + + // users$ will emit initially - after calling refresh() two more times, we should see 3 emissions from users$ + service.users$.pipe(take(3), count()).subscribe(c => { + // assert + expect(c).toBe(3); done(); }); + + // act + service.refresh(); + service.refresh(); }); }); describe('addNewJusticeUser', () => { - it('should call the api to save a new user', fakeAsync(() => { + it('should call the api to save a new user & again to get the users list', (done: DoneFn) => { const username = 'john@doe.com'; const firstName = 'john'; const lastName = 'doe'; @@ -75,10 +122,8 @@ describe('JusticeUsersService', () => { }); clientApiSpy.addNewJusticeUser.and.returnValue(of(newUser)); - let result: JusticeUserResponse; + clientApiSpy.getUserList.and.returnValue(of([])); - service.addNewJusticeUser(username, firstName, lastName, telephone, role).subscribe(data => (result = data)); - tick(); const request = new AddJusticeUserRequest({ username: username, first_name: firstName, @@ -86,13 +131,20 @@ describe('JusticeUsersService', () => { telephone: telephone, role: role }); - expect(result).toEqual(newUser); - expect(clientApiSpy.addNewJusticeUser).toHaveBeenCalledWith(request); - })); + + combineLatest([service.users$, service.addNewJusticeUser(username, firstName, lastName, telephone, role)]).subscribe( + ([_, userResponse]: [JusticeUserResponse[], JusticeUserResponse]) => { + expect(clientApiSpy.getUserList).toHaveBeenCalledTimes(2); + expect(userResponse).toEqual(newUser); + expect(clientApiSpy.addNewJusticeUser).toHaveBeenCalledWith(request); + done(); + } + ); + }); }); describe('editJusticeUser', () => { - it('should call the api to edit an existing user', fakeAsync(() => { + it('should call the api to edit an existing user & again to get the users list', (done: DoneFn) => { const id = '123'; const username = 'john@doe.com'; const firstName = 'john'; @@ -110,26 +162,36 @@ describe('JusticeUsersService', () => { }); clientApiSpy.editJusticeUser.and.returnValue(of(existingUser)); - let result: JusticeUserResponse; + clientApiSpy.getUserList.and.returnValue(of([])); - service.editJusticeUser(id, username, role).subscribe(data => (result = data)); - tick(); const request = new EditJusticeUserRequest({ id, username, role }); - expect(result).toEqual(existingUser); - expect(clientApiSpy.editJusticeUser).toHaveBeenCalledWith(request); - })); + + combineLatest([service.users$, service.editJusticeUser(id, username, role)]).subscribe( + ([_, result]: [JusticeUserResponse[], JusticeUserResponse]) => { + expect(clientApiSpy.getUserList).toHaveBeenCalledTimes(2); + expect(result).toEqual(existingUser); + expect(clientApiSpy.editJusticeUser).toHaveBeenCalledWith(request); + done(); + } + ); + }); }); describe('deleteJusticeUser', () => { - it('should call the api to delete the user', () => { + it('should call the api to delete the user & again to get the users list', (done: DoneFn) => { clientApiSpy.deleteJusticeUser.and.returnValue(of('')); + clientApiSpy.getUserList.and.returnValue(of([])); + const id = '123'; - service.deleteJusticeUser(id).subscribe(); - expect(clientApiSpy.deleteJusticeUser).toHaveBeenCalledWith(id); + combineLatest([service.users$, service.deleteJusticeUser(id)]).subscribe(() => { + expect(clientApiSpy.getUserList).toHaveBeenCalledTimes(2); + expect(clientApiSpy.deleteJusticeUser).toHaveBeenCalledWith(id); + done(); + }); }); }); }); diff --git a/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.ts b/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.ts index f4e46db32..9c725b410 100644 --- a/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.ts +++ b/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.ts @@ -1,41 +1,32 @@ import { Injectable } from '@angular/core'; -import { BehaviorSubject, Observable } from 'rxjs'; -import { filter, map, mergeMap, share, shareReplay, switchMap, tap } from 'rxjs/operators'; +import { BehaviorSubject, Observable, of, throwError } from 'rxjs'; +import { catchError, delay, filter, map, mergeMap, share, shareReplay, switchMap, tap } from 'rxjs/operators'; import { AddJusticeUserRequest, BHClient, EditJusticeUserRequest, JusticeUserResponse, JusticeUserRole } from './clients/api-client'; import { cleanQuery } from '../common/helpers/api-helper'; +import { Logger } from './logger'; @Injectable({ providedIn: 'root' }) export class JusticeUsersService { - private cache$: Observable; + loggerPrefix = '[JusticeUsersService] -'; private refresh$: BehaviorSubject = new BehaviorSubject(null); private searchTerm$: BehaviorSubject = new BehaviorSubject(null); users$ = this.refresh$.pipe( - mergeMap(() => this.requestJusticeUsers(null)), - shareReplay(1), - switchMap(users => - this.searchTerm$.pipe( - map(term => { - return this.applyFilter(term, users); - }) - ) - ), - tap(x => console.log(`Search results`, x)) + mergeMap(() => this.getJusticeUsers(null)), + shareReplay(1) ); - constructor(private apiClient: BHClient) {} + filteredUsers$ = this.users$.pipe(switchMap(users => this.searchTerm$.pipe(map(term => this.applyFilter(term, users))))); + + constructor(private apiClient: BHClient, private logger: Logger) {} - // just for testing -- remove - // triggers an emission on users$ refresh() { this.refresh$.next(); } - // push a search term into the stream search(searchTerm: string) { - console.log(`Searching with ${searchTerm}`); this.searchTerm$.next(searchTerm); } @@ -47,22 +38,6 @@ export class JusticeUsersService { return users.filter(user => user.first_name === searchTerm); } - retrieveJusticeUserAccounts() { - if (!this.cache$) { - this.cache$ = this.requestJusticeUsers(null).pipe(shareReplay(1)); - } - - return this.cache$; - } - - retrieveJusticeUserAccountsNoCache(term: string) { - return this.requestJusticeUsers(term).pipe(shareReplay(1)); - } - - private requestJusticeUsers(term: string) { - return this.apiClient.getUserList(cleanQuery(term)); - } - addNewJusticeUser(username: string, firstName: string, lastName: string, telephone: string, role: JusticeUserRole) { const request = new AddJusticeUserRequest({ username: username, @@ -84,6 +59,15 @@ export class JusticeUsersService { } deleteJusticeUser(id: string) { - return this.apiClient.deleteJusticeUser(id); + return this.apiClient.deleteJusticeUser(id).pipe(tap(() => this.refresh$.next())); + } + + private getJusticeUsers(term: string) { + return this.apiClient.getUserList(cleanQuery(term)).pipe( + catchError(error => { + this.logger.error(`${this.loggerPrefix} There was an unexpected error getting justice users`, new Error(error)); + return throwError(error); + }) + ); } } diff --git a/AdminWebsite/AdminWebsite/ClientApp/src/app/shared/menus/justice-users-menu/justice-users-menu.component.html b/AdminWebsite/AdminWebsite/ClientApp/src/app/shared/menus/justice-users-menu/justice-users-menu.component.html index 009b4d2b2..cd21970a6 100644 --- a/AdminWebsite/AdminWebsite/ClientApp/src/app/shared/menus/justice-users-menu/justice-users-menu.component.html +++ b/AdminWebsite/AdminWebsite/ClientApp/src/app/shared/menus/justice-users-menu/justice-users-menu.component.html @@ -4,7 +4,7 @@ id="user-list" class="custom" labelForId="users" - [items]="users" + [items]="users$ | async" bindLabel="full_name" bindValue="id" formControlName="selectedUserIds" diff --git a/AdminWebsite/AdminWebsite/ClientApp/src/app/shared/menus/justice-users-menu/justice-users-menu.component.spec.ts b/AdminWebsite/AdminWebsite/ClientApp/src/app/shared/menus/justice-users-menu/justice-users-menu.component.spec.ts index 3d91db040..273d1acfe 100644 --- a/AdminWebsite/AdminWebsite/ClientApp/src/app/shared/menus/justice-users-menu/justice-users-menu.component.spec.ts +++ b/AdminWebsite/AdminWebsite/ClientApp/src/app/shared/menus/justice-users-menu/justice-users-menu.component.spec.ts @@ -4,8 +4,6 @@ import { HttpClient, HttpHandler } from '@angular/common/http'; import { FormBuilder } from '@angular/forms'; import { MockLogger } from '../../testing/mock-logger'; import { Logger } from '../../../services/logger'; -import { of, throwError } from 'rxjs'; -import { JusticeUserResponse } from '../../../services/clients/api-client'; import { JusticeUsersService } from 'src/app/services/justice-users.service'; describe('JusticeUsersMenuComponent', () => { @@ -15,7 +13,6 @@ describe('JusticeUsersMenuComponent', () => { beforeEach(async () => { justiceUsersServiceSpy = jasmine.createSpyObj('JusticeUsersService', ['retrieveJusticeUserAccounts']); - justiceUsersServiceSpy.retrieveJusticeUserAccounts.and.returnValue(of([new JusticeUserResponse()])); await TestBed.configureTestingModule({ declarations: [JusticeUsersMenuComponent], @@ -54,22 +51,4 @@ describe('JusticeUsersMenuComponent', () => { expect(component.form.controls[component.formGroupName].enabled).toEqual(false); }); }); - - describe('loadItems', () => { - it('should call video hearing service', () => { - const expectedResponse = [new JusticeUserResponse()]; - component.loadItems(); - expect(justiceUsersServiceSpy.retrieveJusticeUserAccounts).toHaveBeenCalled(); - expect(component.users).toEqual(expectedResponse); - }); - - it('should call video hearing service, and catch thrown exception', () => { - justiceUsersServiceSpy.retrieveJusticeUserAccounts.and.returnValue(throwError({ status: 404 })); - - const handleListErrorSpy = spyOn(component, 'handleListError'); - component.loadItems(); - expect(justiceUsersServiceSpy.retrieveJusticeUserAccounts).toHaveBeenCalled(); - expect(handleListErrorSpy).toHaveBeenCalled(); - }); - }); }); diff --git a/AdminWebsite/AdminWebsite/ClientApp/src/app/shared/menus/justice-users-menu/justice-users-menu.component.ts b/AdminWebsite/AdminWebsite/ClientApp/src/app/shared/menus/justice-users-menu/justice-users-menu.component.ts index 920c96c1a..9e10bd2b2 100644 --- a/AdminWebsite/AdminWebsite/ClientApp/src/app/shared/menus/justice-users-menu/justice-users-menu.component.ts +++ b/AdminWebsite/AdminWebsite/ClientApp/src/app/shared/menus/justice-users-menu/justice-users-menu.component.ts @@ -1,20 +1,21 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { JusticeUserResponse } from '../../../services/clients/api-client'; import { FormBuilder } from '@angular/forms'; import { BookingPersistService } from '../../../services/bookings-persist.service'; import { JusticeUsersService } from '../../../services/justice-users.service'; import { Logger } from '../../../services/logger'; import { MenuBase } from '../menu-base'; +import { Observable } from 'rxjs'; @Component({ selector: 'app-justice-users-menu', templateUrl: './justice-users-menu.component.html', styleUrls: ['./justice-users-menu.component.scss'] }) -export class JusticeUsersMenuComponent extends MenuBase { +export class JusticeUsersMenuComponent extends MenuBase implements OnInit { loggerPrefix = '[MenuJusticeUser] -'; formGroupName = 'selectedUserIds'; - users: JusticeUserResponse[]; + users$: Observable; selectedItems: [] | string; formConfiguration = { selectedUserIds: [this.bookingPersistService.selectedUsers || []] @@ -32,14 +33,10 @@ export class JusticeUsersMenuComponent extends MenuBase { super(formBuilder, logger); } - loadItems(): void { - this.justiceUserService.retrieveJusticeUserAccounts().subscribe( - (data: JusticeUserResponse[]) => { - this.users = data; - this.items = data; - this.logger.debug(`${this.loggerPrefix} Updating list of users.`, { users: data.length }); - }, - error => this.handleListError(error, 'users') - ); + ngOnInit(): void { + this.users$ = this.justiceUserService.users$; + super.ngOnInit(); } + + loadItems(): void {} } diff --git a/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.html b/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.html index f2f29b6ae..b75be1eae 100644 --- a/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.html +++ b/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.html @@ -11,10 +11,15 @@
- -
+
@@ -24,65 +29,69 @@
-
+ +
- {{ message }} + {{ message | async }}
- - - - - - - - - - - - - - - - - - - - - - - -
UsernameFirst nameLast nameContact telephoneRole
- {{ user.username }} - - {{ user.first_name }} - - {{ user.lastname }} - - {{ user.telephone }} - - {{ user.is_vh_team_leader ? 'Administrator' : 'CSO' }} - - - - -
-
+ + + + + + + + + + + + + + + + + + + + + + + + +
UsernameFirst nameLast nameContact telephoneRole
+ {{ user.username }} + + {{ user.first_name }} + + {{ user.lastname }} + + {{ user.telephone }} + + {{ user.is_vh_team_leader ? 'Administrator' : 'CSO' }} + + + + +
+ + +
+ { let component: ManageTeamComponent; let fixture: ComponentFixture; let justiceUsersServiceSpy: jasmine.SpyObj; - let users: JusticeUserResponse[] = []; + + const filteredUsers$ = new BehaviorSubject([]); beforeEach(async () => { - justiceUsersServiceSpy = jasmine.createSpyObj('JusticeUsersService', ['retrieveJusticeUserAccountsNoCache']); - users = []; + justiceUsersServiceSpy = jasmine.createSpyObj('JusticeUsersService', ['users$', 'filteredUsers$', 'search']); + justiceUsersServiceSpy.filteredUsers$ = filteredUsers$; await TestBed.configureTestingModule({ declarations: [ManageTeamComponent, JusticeUserFormStubComponent], @@ -33,196 +36,177 @@ describe('ManageTeamComponent', () => { HttpHandler, { provide: Logger, useValue: new MockLogger() }, { provide: JusticeUsersService, useValue: justiceUsersServiceSpy } - ] + ], + imports: [ReactiveFormsModule, FontAwesomeModule] }).compileComponents(); }); beforeEach(() => { fixture = TestBed.createComponent(ManageTeamComponent); component = fixture.componentInstance; - - justiceUsersServiceSpy.retrieveJusticeUserAccountsNoCache.calls.reset(); + component.ngOnInit(); fixture.detectChanges(); }); describe('searchUsers', () => { - it('it should display add new user button when search with a valid email returns an empty list', fakeAsync(() => { - // arrange - const emptyList: JusticeUserResponse[] = []; - justiceUsersServiceSpy.retrieveJusticeUserAccountsNoCache.and.returnValue(of(emptyList)); - component.form.controls.inputSearch.setValue('test@cso.com'); + it('it should display add new user button when the user list is empty', (done: DoneFn) => { + component.displayAddButton$.subscribe((displayAddButton: boolean) => { + expect(displayAddButton).toBeTruthy(); + done(); + }); + }); + it('should display a portion of users when search returns a list of users that exceeds filter limit', (done: DoneFn) => { // act - component.searchUsers(); - tick(); + filteredUsers$.next( + Array.from(Array(30).keys()).map( + i => + new JusticeUserResponse({ + id: newGuid(), + username: `username${i + 1}@mail.com` + }) + ) + ); // assert - expect(justiceUsersServiceSpy.retrieveJusticeUserAccountsNoCache).toHaveBeenCalled(); - expect(component.message).toContain('No users matching this search criteria were found.'); - expect(component.displayAddButton).toBeTruthy(); - })); - - it('should display portion of users when search returns a list of users exceeds filter limit', fakeAsync(() => { - // arrange - users = Array.from(Array(30).keys()).map( - i => - new JusticeUserResponse({ - id: newGuid(), - username: `username${i + 1}@mail.com` - }) + combineLatest([component.users$, component.displayMessage$, component.message$, component.displayAddButton$]).subscribe( + ([users, displayMessage, message, displayAddButton]: [JusticeUserResponse[], boolean, string, boolean]) => { + expect(users.length).toEqual(20); + expect(message).toContain('please refine your search to see more results.'); + expect(displayMessage).toBeTruthy(); + expect(displayAddButton).toBeFalsy(); + done(); + } ); - justiceUsersServiceSpy.retrieveJusticeUserAccountsNoCache.and.returnValue(of(users)); - component.form.controls.inputSearch.setValue('username'); + }); + it('should display all users when search returns a list of users not exceeding filter limit', (done: DoneFn) => { // act - component.searchUsers(); - tick(); + filteredUsers$.next( + Array.from(Array(10).keys()).map( + i => + new JusticeUserResponse({ + id: newGuid(), + username: `username${i + 1}@mail.com` + }) + ) + ); // assert - expect(component.displayAddButton).toBeFalsy(); - expect(component.displayMessage).toBeTruthy(); - expect(component.users.length).toEqual(component['filterSize']); - expect(component.message).toContain('please refine your search to see more results.'); - })); - - it('should users when search returns a list of users exceeds filter limit', fakeAsync(() => { - // arrange - users = Array.from(Array(10).keys()).map( - i => - new JusticeUserResponse({ - id: newGuid(), - username: `username${i + 1}@mail.com` - }) + combineLatest([ + component.users$, + component.displayAddButton$, + component.isAnErrorMessage$, + component.displayMessage$ + ]).subscribe( + ([users, displayAddButton, isAnErrorMessage, displayMessage]: [JusticeUserResponse[], boolean, boolean, boolean]) => { + expect(users.length).toEqual(10); + expect(displayMessage).toBeFalsy(); + expect(displayAddButton).toBeFalsy(); + expect(isAnErrorMessage).toBeFalsy(); + done(); + } ); - justiceUsersServiceSpy.retrieveJusticeUserAccountsNoCache.and.returnValue(of(users)); - component.form.controls.inputSearch.setValue('username'); - - // act - component.searchUsers(); - tick(); + }); - // assert - expect(component.displayAddButton).toBeFalsy(); - expect(component.displayMessage).toBeFalsy(); - expect(component.users.length).toEqual(10); - })); + // it('should display error when searching throws an error', fakeAsync((done: DoneFn) => { + // // arrange + // // justiceUsersServiceSpy.retrieveJusticeUserAccountsNoCache.and.returnValue(throwError('Random API error')); + // component.form.controls.inputSearch.setValue('test@cso.com'); - it('should display error when searching throws an error', fakeAsync(() => { - // arrange - justiceUsersServiceSpy.retrieveJusticeUserAccountsNoCache.and.returnValue(throwError('Random API error')); - component.form.controls.inputSearch.setValue('test@cso.com'); + // // act + // component.searchUsers(); + // tick(); - // act - component.searchUsers(); - tick(); + // // assert + // // expect(justiceUsersServiceSpy.retrieveJusticeUserAccountsNoCache).toHaveBeenCalled(); - // assert - expect(justiceUsersServiceSpy.retrieveJusticeUserAccountsNoCache).toHaveBeenCalled(); - expect(component.message).toBe(Constants.Error.ManageJusticeUsers.SearchFailure); - })); + // component.message$.subscribe(m => { + // expect(m).toBe(Constants.Error.ManageJusticeUsers.SearchFailure); + // done(); + // }); + // })); }); describe('displayForm', () => { - it('should display justice user form when displayForm has been selected', () => { - // arrange - component.displayMessage = true; - component.showForm = false; - + it('should display justice user form when displayForm has been clicked', (done: DoneFn) => { // act component.displayForm(); // assert - expect(component.displayMessage).toBeFalsy(); - expect(component.showForm).toBeTruthy(); + combineLatest([component.displayMessage$, component.showForm$]).subscribe(([displayMessage, showForm]: [boolean, boolean]) => { + expect(displayMessage).toBeFalsy(); + expect(showForm).toBeTruthy(); + done(); + }); }); }); - describe('justiceFormEventHandlers', () => { - it('should hide form when add new user is cancelled', () => { - // arrange - component.showForm = true; - - // act - component.onFormCancelled(); - - // assert - expect(component.showForm).toBeFalsy(); - }); - - it('should add newly created user to search results to display', () => { - // arrange - component.users = []; - component.showForm = true; - const newUser = new JusticeUserResponse({ - id: newGuid(), - contact_email: 'new@cso.com', - first_name: 'Jack', - lastname: 'Jones', - full_name: 'Jack Jones', - user_role_name: 'Team Leader', - is_vh_team_leader: true, - username: 'new@cso.com', - telephone: '01234567890' + describe('Deleting users', () => { + describe('onDeleteJusticeUser', () => { + it('should display delete justice user popup', (done: DoneFn) => { + // arrange + const userToDelete = new JusticeUserResponse({ + id: newGuid(), + contact_email: 'user@email.com', + first_name: 'Test', + lastname: 'User', + full_name: 'Test User', + user_role_name: 'Team Leader', + is_vh_team_leader: true, + username: 'user@email.com', + telephone: '' + }); + + // act + component.onDeleteJusticeUser(userToDelete); + + // assert + component.displayDeleteUserPopup$.subscribe(displayDeleteUserPopup => { + expect(displayDeleteUserPopup).toBeTruthy(); + expect(component.userToDelete).toBe(userToDelete); + done(); + }); }); - - // act - component.onJusticeSuccessfulSave(newUser); - - // assert - expect(component.showForm).toBeFalsy(); - expect(component.displayAddButton).toBeFalsy(); - expect(component.message).toBe(Constants.ManageJusticeUsers.NewUserAdded); - expect(component.isAnErrorMessage).toBeFalsy(); - expect(component.users[0]).toBe(newUser); }); - it('should update user in search results to display after editing', () => { - // arrange - component.showForm = true; - const id = newGuid(); - const newUser = new JusticeUserResponse({ - id, - contact_email: 'new@cso.com', - first_name: 'Jack', - lastname: 'Jones', - full_name: 'Jack Jones', - user_role_name: 'Team Leader', - is_vh_team_leader: true, - username: 'new@cso.com', - telephone: '01234567890' + describe('onJusticeUserSuccessfulDelete', () => { + it('should hide delete justice user popup & display success message', (done: DoneFn) => { + // arrange & act + component.onJusticeUserSuccessfulDelete(); + + // assert + expect(component.userToDelete).toBeNull(); + combineLatest([component.displayDeleteUserPopup$, component.message$, component.displayMessage$]).subscribe( + ([displayDeleteUserPopup, message, displayMessage]: [boolean, string, boolean]) => { + expect(displayDeleteUserPopup).toBeFalsy(); + expect(message).toBe(Constants.ManageJusticeUsers.UserDeleted); + expect(displayMessage).toBeTruthy(); + done(); + } + ); }); + }); - component.users = [newUser]; - component.userFormMode = 'edit'; - - const updatedUser = new JusticeUserResponse({ - id, - contact_email: 'new@cso.com', - first_name: 'Jack', - lastname: 'Jones', - full_name: 'Jack Jones', - user_role_name: 'Team Leader', - is_vh_team_leader: true, - username: 'new@cso.com', - telephone: '01234567890' + describe('onCancelDeleteJusticeUser', () => { + it('should hide delete justice user popup', (done: DoneFn) => { + // arrange & act + component.onCancelDeleteJusticeUser(); + + // assert + component.displayDeleteUserPopup$.subscribe(displayDeleteUserPopup => { + expect(displayDeleteUserPopup).toBeFalsy(); + expect(component.userToDelete).toBeNull(); + done(); + }); }); - - // act - component.onJusticeSuccessfulSave(updatedUser); - - // assert - expect(component.showForm).toBeFalsy(); - expect(component.displayAddButton).toBeFalsy(); - expect(component.message).toBe(Constants.ManageJusticeUsers.UserEdited); - expect(component.isAnErrorMessage).toBeFalsy(); - expect(component.users[0]).toBe(updatedUser); }); }); - describe('onDeleteJusticeUser', () => { - it('should display delete justice user popup', () => { + describe('Editing users', () => { + it('should display edit role popup', (done: DoneFn) => { // arrange - const userToDelete = new JusticeUserResponse({ + const userToEdit = new JusticeUserResponse({ id: newGuid(), contact_email: 'user@email.com', first_name: 'Test', @@ -235,92 +219,75 @@ describe('ManageTeamComponent', () => { }); // act - component.onDeleteJusticeUser(userToDelete); + component.editUser(userToEdit); // assert - expect(component.userToDelete).toBe(userToDelete); - expect(component.displayDeleteUserPopup).toBeTruthy(); - }); - }); - - describe('onCancelDeleteJusticeUser', () => { - it('should hide delete justice user popup', () => { - // arrange & act - component.onCancelDeleteJusticeUser(); + expect(component.justiceUser).toBe(userToEdit); + expect(component.userFormMode).toBe('edit'); - // assert - expect(component.userToDelete).toBeNull(); - expect(component.displayDeleteUserPopup).toBeFalsy(); + combineLatest([component.showForm$, component.displayMessage$]).subscribe(([showForm, displayMessage]: [boolean, boolean]) => { + expect(displayMessage).toBeFalsy(); + expect(showForm).toBeTruthy(); + done(); + }); }); }); - describe('onJusticeUserSuccessfulDelete', () => { - it('should hide delete justice user popup and update user list', () => { - // arrange - const userToKeep = new JusticeUserResponse({ - id: newGuid(), - contact_email: 'userToKeep@email.com', - first_name: 'Test', - lastname: 'UserToKeep', - full_name: 'Test User To Keep', - user_role_name: 'Team Leader', - is_vh_team_leader: true, - username: 'userToKeep@email.com', - telephone: '' + describe('Adding users', () => { + describe('onJusticeSuccessfulSave', () => { + it('should reset the view after save', (done: DoneFn) => { + component.onJusticeSuccessfulSave(); + + combineLatest([component.showForm$, component.isAnErrorMessage$, component.displayMessage$]).subscribe( + ([showForm, isAnErrorMessage, displayMessage]: [boolean, boolean, boolean]) => { + expect(displayMessage).toBeTruthy(); + expect(isAnErrorMessage).toBeFalsy(); + expect(showForm).toBeFalsy(); + done(); + } + ); }); - const userToDelete = new JusticeUserResponse({ - id: newGuid(), - contact_email: 'userToDelete@email.com', - first_name: 'Test', - lastname: 'UserToDelete', - full_name: 'Test User To Delete', - user_role_name: 'Team Leader', - is_vh_team_leader: true, - username: 'userToDelete@email.com', - telephone: '' + + it('should display new user added message on successful add user', (done: DoneFn) => { + // arrange + component.userFormMode = 'add'; + + // act + component.onJusticeSuccessfulSave(); + + // assert + combineLatest([component.message$]).subscribe(([message]: [string]) => { + expect(message).toBe(Constants.ManageJusticeUsers.NewUserAdded); + done(); + }); }); - component.users = []; - component.users.push(userToKeep); - component.users.push(userToDelete); - component.userToDelete = userToDelete; - component.displayDeleteUserPopup = true; - // act - component.onJusticeUserSuccessfulDelete(); + it('should display user edited message on successful edit user', (done: DoneFn) => { + // arrange + component.userFormMode = 'edit'; - // assert - expect(component.displayDeleteUserPopup).toBeFalsy(); - expect(component.message).toBe(Constants.ManageJusticeUsers.UserDeleted); - expect(component.displayMessage).toBeTruthy(); - expect(component.users.length).toBe(1); - expect(component.users[0].id).toBe(userToKeep.id); - expect(component.userToDelete).toBeNull(); + // act + component.onJusticeSuccessfulSave(); + + // assert + component.message$.subscribe(message => { + expect(message).toBe(Constants.ManageJusticeUsers.UserEdited); + done(); + }); + }); }); }); - describe('editUser', () => { - it('should display edit role popup', () => { + describe('User form', () => { + it('should hide form when add new user is cancelled', () => { // arrange - const userToEdit = new JusticeUserResponse({ - id: newGuid(), - contact_email: 'user@email.com', - first_name: 'Test', - lastname: 'User', - full_name: 'Test User', - user_role_name: 'Team Leader', - is_vh_team_leader: true, - username: 'user@email.com', - telephone: '' - }); + component.displayForm(); // act - component.editUser(userToEdit); + component.onFormCancelled(); // assert - expect(component.justiceUser).toBe(userToEdit); - expect(component.userFormMode).toBe('edit'); - expect(component.displayMessage).toBeFalsy(); - expect(component.showForm).toBeTruthy(); + component.showForm$.subscribe(showForm => expect(showForm).toBeFalsy()); }); }); }); diff --git a/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.ts b/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.ts index 6a99eead4..e04055643 100644 --- a/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.ts +++ b/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core'; import { faCircleExclamation, faExclamationCircle, faTrash, faUserPen } from '@fortawesome/free-solid-svg-icons'; import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; import { JusticeUserResponse } from '../../services/clients/api-client'; @@ -6,104 +6,113 @@ import { Logger } from '../../services/logger'; import { JusticeUsersService } from '../../services/justice-users.service'; import { Constants } from 'src/app/common/constants'; import { JusticeUserFormMode } from '../justice-user-form/justice-user-form.component'; +import { BehaviorSubject, Observable, Subject } from 'rxjs'; +import { map, takeUntil, tap } from 'rxjs/operators'; @Component({ selector: 'app-manage-team', templateUrl: './manage-team.component.html', - styleUrls: ['./manage-team.component.scss'] + styleUrls: ['./manage-team.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush }) -export class ManageTeamComponent { +export class ManageTeamComponent implements OnInit, OnDestroy { private filterSize = 20; loggerPrefix = '[ManageTeamComponent] -'; - displayMessage = false; faExclamation = faCircleExclamation; faError = faExclamationCircle; editUserIcon = faUserPen; deleteUserIcon = faTrash; - message: string; - users: JusticeUserResponse[]; form: FormGroup; isEditing = false; isSaving = false; - displayAddButton = false; - isAnErrorMessage = false; - showSpinner = false; - showForm = false; justiceUser: JusticeUserResponse; userFormMode: JusticeUserFormMode = 'add'; - displayDeleteUserPopup = false; userToDelete: JusticeUserResponse; + message$ = new BehaviorSubject(null); + users$: Observable; + displayAddButton$ = new BehaviorSubject(false); + isAnErrorMessage$ = new BehaviorSubject(false); + showSpinner$ = new BehaviorSubject(false); + displayMessage$ = new BehaviorSubject(false); + showForm$ = new BehaviorSubject(false); + displayDeleteUserPopup$ = new BehaviorSubject(false); + + destroyed$ = new Subject; + constructor(private fb: FormBuilder, private justiceUserService: JusticeUsersService, private logger: Logger) { this.form = this.fb.group({ inputSearch: new FormControl('') }); - this.form.controls.inputSearch.valueChanges.subscribe(() => (this.displayAddButton = false)); } - searchUsers() { - this.isAnErrorMessage = false; - this.displayAddButton = false; - this.displayMessage = false; - this.message = ''; - this.isEditing = false; - this.showSpinner = true; - this.justiceUserService.retrieveJusticeUserAccountsNoCache(this.form.value.inputSearch).subscribe({ - next: (data: JusticeUserResponse[]) => this.onJusticeUserSearchComplete(data), - error: error => this.onJusticeUserSearchFailed(error), - complete: () => (this.showSpinner = false) - }); + ngOnDestroy(): void { + this.destroyed$.next(); } - onJusticeUserSearchComplete(data: JusticeUserResponse[]) { - this.users = data; - this.logger.debug(`${this.loggerPrefix} Updating list of users.`, { users: data.length }); - if (this.users.length > this.filterSize) { - this.users = this.users.slice(0, this.filterSize); - this.displayMessage = true; - this.message = `Only the first ${this.filterSize} results are shown, please refine your search to see more results.`; - } else if (this.users.length === 0) { - this.displayMessage = true; - this.isAnErrorMessage = true; - this.message = Constants.ManageJusticeUsers.EmptySearchResults; - this.displayAddButton = true; - } + ngOnInit() { + this.form.controls.inputSearch.valueChanges.subscribe(() => this.displayAddButton$.next(false)); + + this.showSpinner$.next(true); + + this.users$ = this.justiceUserService.filteredUsers$.pipe( + takeUntil(this.destroyed$), + tap(users => { + this.displayAddButton$.next(false); + this.isAnErrorMessage$.next(false); + this.displayMessage$.next(false); + this.message$.next(null); + if (users.length > this.filterSize) { + this.displayMessage$.next(true); + this.message$.next( + `Only the first ${this.filterSize} results are shown, please refine your search to see more results.` + ); + } else if (users.length === 0) { + this.displayAddButton$.next(true); + this.isAnErrorMessage$.next(true); + this.displayMessage$.next(true); + this.message$.next(Constants.ManageJusticeUsers.EmptySearchResults); + } + }), + map(users => users.slice(0, this.filterSize)), + tap(() => this.showSpinner$.next(false)) + ); + } + + searchUsers() { + this.justiceUserService.search(this.form.value.inputSearch); + this.isEditing = false; } onJusticeUserSearchFailed(errorMessage: string) { this.logger.error(`${this.loggerPrefix} There was an unexpected error searching for justice users`, new Error(errorMessage)); - this.message = Constants.Error.ManageJusticeUsers.SearchFailure; - this.displayMessage = true; + this.message$.next(Constants.Error.ManageJusticeUsers.SearchFailure); + this.displayMessage$.next(true); } displayForm() { - this.displayMessage = false; - this.showForm = true; + this.displayMessage$.next(false); + this.showForm$.next(true); } onFormCancelled() { - this.showForm = false; + this.showForm$.next(false); // reset form related properties this.justiceUser = null; this.userFormMode = 'add'; } - onJusticeSuccessfulSave(user: JusticeUserResponse) { + onJusticeSuccessfulSave() { if (this.userFormMode === 'add') { - this.showForm = false; - this.displayAddButton = false; - this.message = Constants.ManageJusticeUsers.NewUserAdded; - this.isAnErrorMessage = false; - this.displayMessage = true; - this.users.push(user); + this.showForm$.next(false); + this.message$.next(Constants.ManageJusticeUsers.NewUserAdded); + this.isAnErrorMessage$.next(false); + this.displayMessage$.next(true); } else if (this.userFormMode === 'edit') { - const index = this.users.findIndex(x => x.id === user.id); - this.users[index] = user; - this.showForm = false; - this.displayAddButton = false; - this.message = Constants.ManageJusticeUsers.UserEdited; - this.isAnErrorMessage = false; - this.displayMessage = true; + this.showForm$.next(false); + this.message$.next(Constants.ManageJusticeUsers.UserEdited); + this.isAnErrorMessage$.next(false); + this.displayMessage$.next(true); // reset form related properties this.justiceUser = null; @@ -119,24 +128,22 @@ export class ManageTeamComponent { onDeleteJusticeUser(user: JusticeUserResponse) { this.userToDelete = user; - this.displayDeleteUserPopup = true; + this.displayDeleteUserPopup$.next(true); } onCancelDeleteJusticeUser() { - this.userToDelete = null; - this.displayDeleteUserPopup = false; + this.removeJusticeUser(); + this.displayDeleteUserPopup$.next(false); } onJusticeUserSuccessfulDelete() { - this.displayDeleteUserPopup = false; - this.message = Constants.ManageJusticeUsers.UserDeleted; - this.displayMessage = true; this.removeJusticeUser(); + this.displayDeleteUserPopup$.next(false); + this.message$.next(Constants.ManageJusticeUsers.UserDeleted); + this.displayMessage$.next(true); } removeJusticeUser() { - const id = this.users.indexOf(this.userToDelete); - this.users.splice(id, 1); this.userToDelete = null; } } From 1a8bdfc09a5ab237105d31fae1787be6a18fa3b2 Mon Sep 17 00:00:00 2001 From: Phillip Chambers Date: Tue, 21 Mar 2023 13:51:12 +0000 Subject: [PATCH 03/14] Remove lint --- .../app/work-allocation/manage-team/manage-team.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.ts b/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.ts index 5b221a824..c57338352 100644 --- a/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.ts +++ b/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.ts @@ -43,7 +43,7 @@ export class ManageTeamComponent implements OnInit, OnDestroy { showForm$ = new BehaviorSubject(false); displayDeleteUserPopup$ = new BehaviorSubject(false); - destroyed$ = new Subject; + destroyed$ = new Subject(); constructor(private fb: FormBuilder, private justiceUserService: JusticeUsersService, private logger: Logger) { this.form = this.fb.group({ From ec4a6ce8758e25ffcd18310bfe370e1a3767b2cb Mon Sep 17 00:00:00 2001 From: Phillip Chambers Date: Tue, 21 Mar 2023 14:32:06 +0000 Subject: [PATCH 04/14] Fix tests --- .../manage-team/manage-team.component.html | 8 ++++---- .../manage-team/manage-team.component.spec.ts | 1 - .../work-allocation/manage-team/manage-team.component.ts | 2 +- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.html b/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.html index 8ba875b0a..e89a4f0f1 100644 --- a/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.html +++ b/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.html @@ -66,17 +66,17 @@ {{ user.is_vh_team_leader ? 'Administrator' : 'CSO' }} - + > - + > diff --git a/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.spec.ts b/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.spec.ts index c95f7a653..8452841ac 100644 --- a/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.spec.ts +++ b/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.spec.ts @@ -1,5 +1,4 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; - import { ManageTeamComponent } from './manage-team.component'; import { FormBuilder, ReactiveFormsModule } from '@angular/forms'; import { HttpClient, HttpHandler } from '@angular/common/http'; diff --git a/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.ts b/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.ts index c57338352..4a08e73c5 100644 --- a/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.ts +++ b/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.ts @@ -168,7 +168,7 @@ export class ManageTeamComponent implements OnInit, OnDestroy { } removeJusticeUser() { - // this.userToDelete = null; + this.userToDelete = null; // this.updateDeletedJusticeUser(); this.sortUsers(); } From 279cb9f4aff14b6196b9eb122d3613d6822a86ba Mon Sep 17 00:00:00 2001 From: Phillip Chambers Date: Tue, 21 Mar 2023 19:02:53 +0000 Subject: [PATCH 05/14] Use message$ instead of message --- .../app/work-allocation/manage-team/manage-team.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.html b/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.html index e89a4f0f1..bbd19a16b 100644 --- a/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.html +++ b/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.html @@ -32,7 +32,7 @@
- {{ message | async }} + {{ message$ | async }}
From 956ac1849c44cf0a011ed0b7eed1b8e598fb5827 Mon Sep 17 00:00:00 2001 From: Phillip Chambers Date: Tue, 21 Mar 2023 19:03:31 +0000 Subject: [PATCH 06/14] Rename property --- .../src/app/services/justice-users.service.spec.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.spec.ts b/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.spec.ts index 07cb4a0b2..6ce8ace94 100644 --- a/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.spec.ts +++ b/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.spec.ts @@ -44,7 +44,7 @@ describe('JusticeUsersService', () => { new JusticeUserResponse({ id: '789', contact_email: 'user3@test.com' }) ]; clientApiSpy.getUserList.and.returnValue(of(users)); - service.users$.subscribe(result => { + service.allUsers$.subscribe(result => { expect(result).toEqual(users); done(); }); @@ -53,10 +53,10 @@ describe('JusticeUsersService', () => { it('should not make additional api requests when additional observers subscribe', (done: DoneFn) => { clientApiSpy.getUserList.and.returnValue(of([])); - combineLatest([service.users$, service.users$]) + combineLatest([service.allUsers$, service.allUsers$]) .pipe( delay(1000), - switchMap(x => service.users$) + switchMap(x => service.allUsers$) ) .subscribe(() => { expect(clientApiSpy.getUserList).toHaveBeenCalledTimes(1); @@ -104,7 +104,7 @@ describe('JusticeUsersService', () => { clientApiSpy.getUserList.and.returnValue(of([])); // users$ will emit initially - after calling refresh() two more times, we should see 3 emissions from users$ - service.users$.pipe(take(3), count()).subscribe(c => { + service.allUsers$.pipe(take(3), count()).subscribe(c => { // assert expect(c).toBe(3); done(); @@ -145,7 +145,7 @@ describe('JusticeUsersService', () => { role: role }); - combineLatest([service.users$, service.addNewJusticeUser(username, firstName, lastName, telephone, role)]).subscribe( + combineLatest([service.allUsers$, service.addNewJusticeUser(username, firstName, lastName, telephone, role)]).subscribe( ([_, userResponse]: [JusticeUserResponse[], JusticeUserResponse]) => { expect(clientApiSpy.getUserList).toHaveBeenCalledTimes(2); expect(userResponse).toEqual(newUser); @@ -183,7 +183,7 @@ describe('JusticeUsersService', () => { role }); - combineLatest([service.users$, service.editJusticeUser(id, username, role)]).subscribe( + combineLatest([service.allUsers$, service.editJusticeUser(id, username, role)]).subscribe( ([_, result]: [JusticeUserResponse[], JusticeUserResponse]) => { expect(clientApiSpy.getUserList).toHaveBeenCalledTimes(2); expect(result).toEqual(existingUser); @@ -200,7 +200,7 @@ describe('JusticeUsersService', () => { clientApiSpy.getUserList.and.returnValue(of([])); const id = '123'; - combineLatest([service.users$, service.deleteJusticeUser(id)]).subscribe(() => { + combineLatest([service.allUsers$, service.deleteJusticeUser(id)]).subscribe(() => { expect(clientApiSpy.getUserList).toHaveBeenCalledTimes(2); expect(clientApiSpy.deleteJusticeUser).toHaveBeenCalledWith(id); done(); From 6a4a21a35f9dc141e678b0b247cb9c22166e5cf6 Mon Sep 17 00:00:00 2001 From: Phillip Chambers Date: Tue, 21 Mar 2023 19:05:50 +0000 Subject: [PATCH 07/14] Rename property & prevent initial emit of SearchTerm --- .../ClientApp/src/app/services/justice-users.service.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.ts b/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.ts index b85a8a58b..976bd3f7a 100644 --- a/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.ts +++ b/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { BehaviorSubject, throwError } from 'rxjs'; +import { BehaviorSubject, Subject, throwError } from 'rxjs'; import { catchError, map, mergeMap, shareReplay, switchMap, tap } from 'rxjs/operators'; import { AddNewJusticeUserRequest, @@ -18,14 +18,14 @@ import { Logger } from './logger'; export class JusticeUsersService { loggerPrefix = '[JusticeUsersService] -'; private refresh$: BehaviorSubject = new BehaviorSubject(null); - private searchTerm$: BehaviorSubject = new BehaviorSubject(null); + private searchTerm$: Subject = new Subject(); - users$ = this.refresh$.pipe( + allUsers$ = this.refresh$.pipe( mergeMap(() => this.getJusticeUsers(null)), shareReplay(1) ); - filteredUsers$ = this.users$.pipe(switchMap(users => this.searchTerm$.pipe(map(term => this.applyFilter(term, users))))); + filteredUsers$ = this.allUsers$.pipe(switchMap(users => this.searchTerm$.pipe(map(term => this.applyFilter(term, users))))); constructor(private apiClient: BHClient, private logger: Logger) {} From b729ad6d9d2ba4a2a2c2a361992a5df1061fb85f Mon Sep 17 00:00:00 2001 From: Phillip Chambers Date: Tue, 21 Mar 2023 19:06:19 +0000 Subject: [PATCH 08/14] Update property name --- .../menus/justice-users-menu/justice-users-menu.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/AdminWebsite/AdminWebsite/ClientApp/src/app/shared/menus/justice-users-menu/justice-users-menu.component.ts b/AdminWebsite/AdminWebsite/ClientApp/src/app/shared/menus/justice-users-menu/justice-users-menu.component.ts index 9e10bd2b2..f0683e8ae 100644 --- a/AdminWebsite/AdminWebsite/ClientApp/src/app/shared/menus/justice-users-menu/justice-users-menu.component.ts +++ b/AdminWebsite/AdminWebsite/ClientApp/src/app/shared/menus/justice-users-menu/justice-users-menu.component.ts @@ -34,7 +34,7 @@ export class JusticeUsersMenuComponent extends MenuBase implements OnInit { } ngOnInit(): void { - this.users$ = this.justiceUserService.users$; + this.users$ = this.justiceUserService.allUsers$; super.ngOnInit(); } From 91969a72f9773ff8039fcb522ef8ad217fc1053e Mon Sep 17 00:00:00 2001 From: Phillip Chambers Date: Tue, 21 Mar 2023 19:06:29 +0000 Subject: [PATCH 09/14] Add proper filtering --- .../ClientApp/src/app/services/justice-users.service.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.ts b/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.ts index 976bd3f7a..2c2d228b6 100644 --- a/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.ts +++ b/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.ts @@ -42,7 +42,10 @@ export class JusticeUsersService { if (!searchTerm) { return users; } - return users.filter(user => user.first_name === searchTerm); + + return users.filter(user => + [user.first_name, user.lastname, user.contact_email, user.username].some(field => field.toLowerCase().includes(searchTerm)) + ); } addNewJusticeUser(username: string, firstName: string, lastName: string, telephone: string, role: JusticeUserRole) { From 0bc721762e3220fb96557647308488cbfb7ebe11 Mon Sep 17 00:00:00 2001 From: Phillip Chambers Date: Tue, 21 Mar 2023 19:06:50 +0000 Subject: [PATCH 10/14] Move spinner activation --- .../app/work-allocation/manage-team/manage-team.component.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.ts b/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.ts index 4a08e73c5..08620abce 100644 --- a/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.ts +++ b/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.ts @@ -58,8 +58,6 @@ export class ManageTeamComponent implements OnInit, OnDestroy { ngOnInit() { this.form.controls.inputSearch.valueChanges.subscribe(() => this.displayAddButton$.next(false)); - this.showSpinner$.next(true); - this.users$ = this.justiceUserService.filteredUsers$.pipe( takeUntil(this.destroyed$), tap(users => { @@ -85,6 +83,7 @@ export class ManageTeamComponent implements OnInit, OnDestroy { } searchUsers() { + this.showSpinner$.next(true); this.justiceUserService.search(this.form.value.inputSearch); this.isEditing = false; } From 18dfbd094b049f7d0e6bc480f6419c03797abfe8 Mon Sep 17 00:00:00 2001 From: Phillip Chambers Date: Tue, 21 Mar 2023 19:39:35 +0000 Subject: [PATCH 11/14] Fix user form --- .../manage-team/manage-team.component.html | 4 ++-- .../manage-team/manage-team.component.ts | 22 +++++++++---------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.html b/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.html index bbd19a16b..85f0ae299 100644 --- a/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.html +++ b/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.html @@ -15,7 +15,7 @@ class="govuk-button govuk-!-margin-left-2" data-module="govuk-button" *ngIf="displayAddButton$ | async" - (click)="displayForm()" + (click)="addUser()" > Add a team member @@ -95,7 +95,7 @@
diff --git a/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.ts b/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.ts index 08620abce..734bd7ed3 100644 --- a/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.ts +++ b/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.ts @@ -23,13 +23,12 @@ export class ManageTeamComponent implements OnInit, OnDestroy { editUserIcon = faUserPen; deleteUserIcon = faTrash; form: FormGroup; + isEditing = false; isSaving = false; justiceUser: JusticeUserResponse; restoreUserIcon = faRotateLeft; - showUserForm = false; selectedUser: JusticeUserResponse; - userFormMode: JusticeUserFormMode = 'add'; userToDelete: JusticeUserResponse; displayRestoreUserPopup = false; userToRestore: JusticeUserResponse; @@ -42,6 +41,7 @@ export class ManageTeamComponent implements OnInit, OnDestroy { displayMessage$ = new BehaviorSubject(false); showForm$ = new BehaviorSubject(false); displayDeleteUserPopup$ = new BehaviorSubject(false); + userFormMode$ = new BehaviorSubject('add'); destroyed$ = new Subject(); @@ -111,16 +111,16 @@ export class ManageTeamComponent implements OnInit, OnDestroy { this.showForm$.next(false); // reset form related properties this.justiceUser = null; - this.userFormMode = 'add'; + this.userFormMode$.next('add'); } onJusticeSuccessfulSave() { - if (this.userFormMode === 'add') { + if (this.userFormMode$.getValue() === 'add') { this.showForm$.next(false); this.message$.next(Constants.ManageJusticeUsers.NewUserAdded); this.isAnErrorMessage$.next(false); this.displayMessage$.next(true); - } else if (this.userFormMode === 'edit') { + } else if (this.userFormMode$.getValue() === 'edit') { this.showForm$.next(false); this.message$.next(Constants.ManageJusticeUsers.UserEdited); this.isAnErrorMessage$.next(false); @@ -128,14 +128,14 @@ export class ManageTeamComponent implements OnInit, OnDestroy { // reset form related properties this.justiceUser = null; - this.userFormMode = 'add'; + this.userFormMode$.next('add'); } } onJusticeUserSuccessfulSave(user: JusticeUserResponse) { - if (this.userFormMode === 'add') { + if (this.userFormMode$.getValue() === 'add') { this.resetAfterSave(Constants.ManageJusticeUsers.NewUserAdded); - } else if (this.userFormMode === 'edit') { + } else if (this.userFormMode$.getValue() === 'edit') { this.resetAfterSave(Constants.ManageJusticeUsers.UserEdited); } // this.sortUsers(); @@ -145,7 +145,7 @@ export class ManageTeamComponent implements OnInit, OnDestroy { editUser(user: JusticeUserResponse) { this.selectedUser = user; - this.userFormMode = 'edit'; + this.userFormMode$.next('edit'); this.displayUserForm(); } @@ -204,13 +204,13 @@ export class ManageTeamComponent implements OnInit, OnDestroy { } private resetAfterSave(message: string) { - this.showUserForm = false; + this.showForm$.next(false); this.message$.next(message); this.displayAddButton$.next(false); this.isAnErrorMessage$.next(false); this.displayMessage$.next(true); this.selectedUser = null; - this.userFormMode = 'add'; + this.userFormMode$.next('add'); } } From 83cb694252f2c6aefc17e168a1f48704e76e5b14 Mon Sep 17 00:00:00 2001 From: Phillip Chambers Date: Wed, 22 Mar 2023 09:39:10 +0000 Subject: [PATCH 12/14] Replace deleted badge & add sorting --- .../manage-team/manage-team.component.html | 15 ++++++++++++--- .../manage-team/manage-team.component.ts | 11 +++++------ 2 files changed, 17 insertions(+), 9 deletions(-) diff --git a/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.html b/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.html index 85f0ae299..3c2a6ec2f 100644 --- a/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.html +++ b/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.html @@ -50,9 +50,7 @@ - - {{ user.username }} - + Deleted{{ user.username }} {{ user.first_name }} @@ -67,6 +65,7 @@ + diff --git a/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.ts b/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.ts index 734bd7ed3..87d485f76 100644 --- a/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.ts +++ b/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.ts @@ -77,6 +77,7 @@ export class ManageTeamComponent implements OnInit, OnDestroy { this.message$.next(Constants.ManageJusticeUsers.EmptySearchResults); } }), + map(users => this.sortUsers(users)), map(users => users.slice(0, this.filterSize)), tap(() => this.showSpinner$.next(false)) ); @@ -88,10 +89,10 @@ export class ManageTeamComponent implements OnInit, OnDestroy { this.isEditing = false; } - sortUsers(): void { - // const deletedUsers = this.users.filter(user => user.deleted).sort(this.sortAlphanumerically); - // const activeUsers = this.users.filter(user => !user.deleted).sort(this.sortAlphanumerically); - // this.sortedUsers = deletedUsers.concat(activeUsers); + sortUsers(users: JusticeUserResponse[]): JusticeUserResponse[] { + const deletedUsers = users.filter(user => user.deleted).sort(this.sortAlphanumerically); + const activeUsers = users.filter(user => !user.deleted).sort(this.sortAlphanumerically); + return deletedUsers.concat(activeUsers); } sortAlphanumerically(a: JusticeUserResponse, b: JusticeUserResponse) { @@ -169,7 +170,6 @@ export class ManageTeamComponent implements OnInit, OnDestroy { removeJusticeUser() { this.userToDelete = null; // this.updateDeletedJusticeUser(); - this.sortUsers(); } updateDeletedJusticeUser() { @@ -191,7 +191,6 @@ export class ManageTeamComponent implements OnInit, OnDestroy { this.message$.next(Constants.ManageJusticeUsers.UserRestored); this.displayMessage$.next(true); this.updateRestoredJusticeUser(); - this.sortUsers(); } updateRestoredJusticeUser() { From fe0360780cfa06ac584e549c0ab3d13f249b41ca Mon Sep 17 00:00:00 2001 From: Phillip Chambers Date: Wed, 22 Mar 2023 14:06:39 +0000 Subject: [PATCH 13/14] Fix up tests, small refac, add selectedUser$ --- .../services/justice-users.service.spec.ts | 32 +++++++++++++---- .../src/app/services/justice-users.service.ts | 22 ++++++++---- .../manage-team/manage-team.component.html | 2 +- .../manage-team/manage-team.component.spec.ts | 34 +++++++++++-------- .../manage-team/manage-team.component.ts | 27 ++------------- 5 files changed, 64 insertions(+), 53 deletions(-) diff --git a/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.spec.ts b/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.spec.ts index 6ce8ace94..1bb946845 100644 --- a/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.spec.ts +++ b/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.spec.ts @@ -66,14 +66,14 @@ describe('JusticeUsersService', () => { }); describe('search()', () => { - it('should trigger another emission from $users observable', (done: DoneFn) => { + it('should trigger an emission from $users observable each time it is called', (done: DoneFn) => { // arrange clientApiSpy.getUserList.and.returnValue(of([])); - // users$ will emit initially - after calling search() two times, we should see 3 emissions from users$ - service.filteredUsers$.pipe(take(3), count()).subscribe(c => { + // after calling search() two times, we should see 2 emissions from users$ + service.filteredUsers$.pipe(take(2), count()).subscribe(c => { // assert - expect(c).toBe(3); + expect(c).toBe(2); done(); }); @@ -85,9 +85,27 @@ describe('JusticeUsersService', () => { it('should apply a filter to the users collection', () => { // arrange const users: JusticeUserResponse[] = [ - new JusticeUserResponse({ id: '123', contact_email: 'user1@test.com', first_name: 'Test' }), - new JusticeUserResponse({ id: '456', contact_email: 'user2@test.com', first_name: 'AnotherTest' }), - new JusticeUserResponse({ id: '789', contact_email: 'user3@test.com', first_name: 'LastTest' }) + new JusticeUserResponse({ + id: '123', + contact_email: 'user1@test.com', + first_name: 'Test', + lastname: 'Test', + username: 'Test' + }), + new JusticeUserResponse({ + id: '456', + contact_email: 'user2@test.com', + first_name: 'Another', + lastname: 'Another', + username: 'Another' + }), + new JusticeUserResponse({ + id: '789', + contact_email: 'user3@test.com', + first_name: 'Last', + lastname: 'Last', + username: 'Last' + }) ]; // act diff --git a/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.ts b/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.ts index 2c2d228b6..03b90878c 100644 --- a/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.ts +++ b/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.ts @@ -1,6 +1,6 @@ import { Injectable } from '@angular/core'; -import { BehaviorSubject, Subject, throwError } from 'rxjs'; -import { catchError, map, mergeMap, shareReplay, switchMap, tap } from 'rxjs/operators'; +import { BehaviorSubject, throwError } from 'rxjs'; +import { catchError, filter, map, mergeMap, shareReplay, skip, switchMap, tap } from 'rxjs/operators'; import { AddNewJusticeUserRequest, BHClient, @@ -18,14 +18,21 @@ import { Logger } from './logger'; export class JusticeUsersService { loggerPrefix = '[JusticeUsersService] -'; private refresh$: BehaviorSubject = new BehaviorSubject(null); - private searchTerm$: Subject = new Subject(); + private searchTerm$: BehaviorSubject = new BehaviorSubject(null); allUsers$ = this.refresh$.pipe( mergeMap(() => this.getJusticeUsers(null)), shareReplay(1) ); - filteredUsers$ = this.allUsers$.pipe(switchMap(users => this.searchTerm$.pipe(map(term => this.applyFilter(term, users))))); + filteredUsers$ = this.allUsers$.pipe( + switchMap(users => + this.searchTerm$.pipe( + filter(searchTerm => searchTerm !== null), + map(term => this.applyFilter(term, users)) + ) + ) + ); constructor(private apiClient: BHClient, private logger: Logger) {} @@ -37,14 +44,15 @@ export class JusticeUsersService { this.searchTerm$.next(searchTerm); } - // more complex searching required here applyFilter(searchTerm: string, users: JusticeUserResponse[]): JusticeUserResponse[] { if (!searchTerm) { return users; } return users.filter(user => - [user.first_name, user.lastname, user.contact_email, user.username].some(field => field.toLowerCase().includes(searchTerm)) + [user.first_name, user.lastname, user.contact_email, user.username].some(field => + field.toLowerCase().includes(searchTerm.toLowerCase()) + ) ); } @@ -86,6 +94,6 @@ export class JusticeUsersService { username, id }); - return this.apiClient.restoreJusticeUser(request); + return this.apiClient.restoreJusticeUser(request).pipe(tap(() => this.refresh$.next())); } } diff --git a/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.html b/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.html index 3c2a6ec2f..3f3e2ce36 100644 --- a/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.html +++ b/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.html @@ -103,7 +103,7 @@
{ const filteredUsers$ = new BehaviorSubject([]); beforeEach(async () => { - justiceUsersServiceSpy = jasmine.createSpyObj('JusticeUsersService', ['users$', 'filteredUsers$', 'search']); + justiceUsersServiceSpy = jasmine.createSpyObj('JusticeUsersService', [ + 'allUsers$', + 'filteredUsers$', + 'search' + ]); justiceUsersServiceSpy.filteredUsers$ = filteredUsers$; await TestBed.configureTestingModule({ @@ -220,21 +225,22 @@ describe('ManageTeamComponent', () => { component.editUser(userToEdit); // assert - expect(component.selectedUser).toBe(userToEdit); - expect(component.userFormMode).toBe('edit'); - - combineLatest([component.showForm$, component.displayMessage$]).subscribe(([showForm, displayMessage]: [boolean, boolean]) => { - expect(displayMessage).toBeFalsy(); - expect(showForm).toBeTruthy(); - done(); - }); + combineLatest([component.showForm$, component.displayMessage$, component.selectedUser$, component.userFormMode$]).subscribe( + ([showForm, displayMessage, selectedUser, userFormMode]: [boolean, boolean, JusticeUserResponse, JusticeUserFormMode]) => { + expect(displayMessage).toBeFalsy(); + expect(showForm).toBeTruthy(); + expect(selectedUser).toBe(userToEdit); + expect(userFormMode).toBe('edit'); + done(); + } + ); }); }); describe('Adding users', () => { describe('onJusticeSuccessfulSave', () => { it('should reset the view after save', (done: DoneFn) => { - component.onJusticeSuccessfulSave(); + component.onJusticeUserSuccessfulSave(null); combineLatest([component.showForm$, component.isAnErrorMessage$, component.displayMessage$]).subscribe( ([showForm, isAnErrorMessage, displayMessage]: [boolean, boolean, boolean]) => { @@ -248,10 +254,10 @@ describe('ManageTeamComponent', () => { it('should display new user added message on successful add user', (done: DoneFn) => { // arrange - component.userFormMode = 'add'; + component.userFormMode$.next('add'); // act - component.onJusticeSuccessfulSave(); + component.onJusticeUserSuccessfulSave(null); // assert combineLatest([component.message$]).subscribe(([message]: [string]) => { @@ -262,10 +268,10 @@ describe('ManageTeamComponent', () => { it('should display user edited message on successful edit user', (done: DoneFn) => { // arrange - component.userFormMode = 'edit'; + component.userFormMode$.next('edit'); // act - component.onJusticeSuccessfulSave(); + component.onJusticeUserSuccessfulSave(null); // assert component.message$.subscribe(message => { diff --git a/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.ts b/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.ts index 87d485f76..e20013e96 100644 --- a/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.ts +++ b/AdminWebsite/AdminWebsite/ClientApp/src/app/work-allocation/manage-team/manage-team.component.ts @@ -26,9 +26,7 @@ export class ManageTeamComponent implements OnInit, OnDestroy { isEditing = false; isSaving = false; - justiceUser: JusticeUserResponse; restoreUserIcon = faRotateLeft; - selectedUser: JusticeUserResponse; userToDelete: JusticeUserResponse; displayRestoreUserPopup = false; userToRestore: JusticeUserResponse; @@ -42,6 +40,7 @@ export class ManageTeamComponent implements OnInit, OnDestroy { showForm$ = new BehaviorSubject(false); displayDeleteUserPopup$ = new BehaviorSubject(false); userFormMode$ = new BehaviorSubject('add'); + selectedUser$ = new BehaviorSubject(null); destroyed$ = new Subject(); @@ -111,41 +110,21 @@ export class ManageTeamComponent implements OnInit, OnDestroy { onUserFormCancelled() { this.showForm$.next(false); // reset form related properties - this.justiceUser = null; this.userFormMode$.next('add'); } - onJusticeSuccessfulSave() { - if (this.userFormMode$.getValue() === 'add') { - this.showForm$.next(false); - this.message$.next(Constants.ManageJusticeUsers.NewUserAdded); - this.isAnErrorMessage$.next(false); - this.displayMessage$.next(true); - } else if (this.userFormMode$.getValue() === 'edit') { - this.showForm$.next(false); - this.message$.next(Constants.ManageJusticeUsers.UserEdited); - this.isAnErrorMessage$.next(false); - this.displayMessage$.next(true); - - // reset form related properties - this.justiceUser = null; - this.userFormMode$.next('add'); - } - } - onJusticeUserSuccessfulSave(user: JusticeUserResponse) { if (this.userFormMode$.getValue() === 'add') { this.resetAfterSave(Constants.ManageJusticeUsers.NewUserAdded); } else if (this.userFormMode$.getValue() === 'edit') { this.resetAfterSave(Constants.ManageJusticeUsers.UserEdited); } - // this.sortUsers(); } addUser = this.displayUserForm; editUser(user: JusticeUserResponse) { - this.selectedUser = user; + this.selectedUser$.next(user); this.userFormMode$.next('edit'); this.displayUserForm(); } @@ -208,7 +187,7 @@ export class ManageTeamComponent implements OnInit, OnDestroy { this.displayAddButton$.next(false); this.isAnErrorMessage$.next(false); this.displayMessage$.next(true); - this.selectedUser = null; + this.selectedUser$.next(null); this.userFormMode$.next('add'); } } From 792596bd7719820f6392bf860cfe6c15abc2fcc4 Mon Sep 17 00:00:00 2001 From: Phillip Chambers Date: Thu, 23 Mar 2023 13:11:31 +0000 Subject: [PATCH 14/14] Refac --- .../src/app/services/justice-users.service.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.ts b/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.ts index 03b90878c..20abfaaed 100644 --- a/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.ts +++ b/AdminWebsite/AdminWebsite/ClientApp/src/app/services/justice-users.service.ts @@ -80,6 +80,14 @@ export class JusticeUsersService { return this.apiClient.deleteJusticeUser(id).pipe(tap(() => this.refresh$.next())); } + restoreJusticeUser(id: string, username: string) { + const request = new RestoreJusticeUserRequest({ + username, + id + }); + return this.apiClient.restoreJusticeUser(request).pipe(tap(() => this.refresh$.next())); + } + private getJusticeUsers(term: string) { return this.apiClient.getUserList(cleanQuery(term)).pipe( catchError(error => { @@ -88,12 +96,4 @@ export class JusticeUsersService { }) ); } - - restoreJusticeUser(id: string, username: string) { - const request = new RestoreJusticeUserRequest({ - username, - id - }); - return this.apiClient.restoreJusticeUser(request).pipe(tap(() => this.refresh$.next())); - } }