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 18e536815..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 @@ -1,5 +1,6 @@ -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 { AddNewJusticeUserRequest, BHClient, @@ -10,10 +11,12 @@ import { } 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([ @@ -24,53 +27,115 @@ describe('JusticeUsersService', () => { 'restoreJusticeUser' ]); - 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.allUsers$.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.allUsers$, service.allUsers$]) + .pipe( + delay(1000), + switchMap(x => service.allUsers$) + ) + .subscribe(() => { + expect(clientApiSpy.getUserList).toHaveBeenCalledTimes(1); + done(); + }); + }); + }); + + describe('search()', () => { + it('should trigger an emission from $users observable each time it is called', (done: DoneFn) => { + // arrange + clientApiSpy.getUserList.and.returnValue(of([])); + + // after calling search() two times, we should see 2 emissions from users$ + service.filteredUsers$.pipe(take(2), count()).subscribe(c => { + // assert + expect(c).toBe(2); 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', + 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 + 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.allUsers$.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'; @@ -88,10 +153,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 AddNewJusticeUserRequest({ username: username, first_name: firstName, @@ -99,13 +162,20 @@ describe('JusticeUsersService', () => { contact_telephone: telephone, role: role }); - expect(result).toEqual(newUser); - expect(clientApiSpy.addNewJusticeUser).toHaveBeenCalledWith(request); - })); + + combineLatest([service.allUsers$, 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'; @@ -123,26 +193,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.allUsers$, 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.allUsers$, 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 a3a541a10..20abfaaed 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 { Observable } from 'rxjs'; -import { shareReplay } from 'rxjs/operators'; +import { BehaviorSubject, throwError } from 'rxjs'; +import { catchError, filter, map, mergeMap, shareReplay, skip, switchMap, tap } from 'rxjs/operators'; import { AddNewJusticeUserRequest, BHClient, @@ -10,28 +10,50 @@ import { RestoreJusticeUserRequest } 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); - constructor(private apiClient: BHClient) {} - retrieveJusticeUserAccounts() { - if (!this.cache$) { - this.cache$ = this.requestJusticeUsers(null).pipe(shareReplay(1)); - } + allUsers$ = this.refresh$.pipe( + mergeMap(() => this.getJusticeUsers(null)), + shareReplay(1) + ); + + filteredUsers$ = this.allUsers$.pipe( + switchMap(users => + this.searchTerm$.pipe( + filter(searchTerm => searchTerm !== null), + map(term => this.applyFilter(term, users)) + ) + ) + ); - return this.cache$; + constructor(private apiClient: BHClient, private logger: Logger) {} + + refresh() { + this.refresh$.next(); } - retrieveJusticeUserAccountsNoCache(term: string) { - return this.requestJusticeUsers(term).pipe(shareReplay(1)); + search(searchTerm: string) { + this.searchTerm$.next(searchTerm); } - private requestJusticeUsers(term: string) { - return this.apiClient.getUserList(cleanQuery(term)); + 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.toLowerCase()) + ) + ); } addNewJusticeUser(username: string, firstName: string, lastName: string, telephone: string, role: JusticeUserRole) { @@ -42,7 +64,7 @@ export class JusticeUsersService { contact_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) { @@ -51,11 +73,11 @@ export class JusticeUsersService { username, role }); - return this.apiClient.editJusticeUser(request); + return this.apiClient.editJusticeUser(request).pipe(tap(() => this.refresh$.next())); } deleteJusticeUser(id: string) { - return this.apiClient.deleteJusticeUser(id); + return this.apiClient.deleteJusticeUser(id).pipe(tap(() => this.refresh$.next())); } restoreJusticeUser(id: string, username: string) { @@ -63,6 +85,15 @@ export class JusticeUsersService { username, id }); - return this.apiClient.restoreJusticeUser(request); + return this.apiClient.restoreJusticeUser(request).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..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 @@ -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.allUsers$; + 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 40af07696..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 @@ -11,10 +11,15 @@
- -
+
@@ -24,26 +29,27 @@
-
+ +
- {{ message }} + {{ message$ | async }}
- - - - - - - - - - - - - - + +
UsernameFirst nameLast nameContact telephoneRole
+ + + + + + + + + + + + - - -
UsernameFirst nameLast nameContact telephoneRole
Deleted{{ user.username }} {{ user.first_name }} @@ -90,21 +96,23 @@ >
-
+ + + + +
+ { 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', [ + 'allUsers$', + 'filteredUsers$', + 'search' + ]); + justiceUsersServiceSpy.filteredUsers$ = filteredUsers$; await TestBed.configureTestingModule({ declarations: [ManageTeamComponent, JusticeUserFormStubComponent], @@ -33,196 +39,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.showUserForm = false; - + it('should display justice user form when displayForm has been clicked', (done: DoneFn) => { // act component.displayUserForm(); // assert - expect(component.displayMessage).toBeFalsy(); - expect(component.showUserForm).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.showUserForm = true; - - // act - component.onUserFormCancelled(); - - // assert - expect(component.showUserForm).toBeFalsy(); - }); - - it('should add newly created user to search results to display', () => { - // arrange - component.users = []; - component.showUserForm = 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.onJusticeUserSuccessfulSave(newUser); - - // assert - expect(component.showUserForm).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.showUserForm = 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.onJusticeUserSuccessfulSave(updatedUser); - - // assert - expect(component.showUserForm).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,135 +222,76 @@ describe('ManageTeamComponent', () => { }); // act - component.onDeleteJusticeUser(userToDelete); - - // assert - expect(component.userToDelete).toBe(userToDelete); - expect(component.displayDeleteUserPopup).toBeTruthy(); - }); - }); - - describe('onCancelDeleteJusticeUser', () => { - it('should hide delete justice user popup', () => { - // arrange & act - component.onCancelDeleteJusticeUser(); + component.editUser(userToEdit); // assert - expect(component.userToDelete).toBeNull(); - expect(component.displayDeleteUserPopup).toBeFalsy(); + 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('onJusticeUserSuccessfulDelete', () => { - it('should hide delete justice user popup and update user list', () => { - // arrange - 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: '' + describe('Adding users', () => { + describe('onJusticeSuccessfulSave', () => { + it('should reset the view after save', (done: DoneFn) => { + component.onJusticeUserSuccessfulSave(null); + + combineLatest([component.showForm$, component.isAnErrorMessage$, component.displayMessage$]).subscribe( + ([showForm, isAnErrorMessage, displayMessage]: [boolean, boolean, boolean]) => { + expect(displayMessage).toBeTruthy(); + expect(isAnErrorMessage).toBeFalsy(); + expect(showForm).toBeFalsy(); + done(); + } + ); }); - component.users = []; - component.users.push(userToDelete); - component.userToDelete = userToDelete; - component.displayDeleteUserPopup = true; - // act - component.onJusticeUserSuccessfulDelete(); + it('should display new user added message on successful add user', (done: DoneFn) => { + // arrange + component.userFormMode$.next('add'); - // assert - expect(component.displayDeleteUserPopup).toBeFalsy(); - expect(component.message).toBe(Constants.ManageJusticeUsers.UserDeleted); - expect(component.displayMessage).toBeTruthy(); - expect(component.users[0].deleted).toBe(true); - }); - }); + // act + component.onJusticeUserSuccessfulSave(null); - describe('onJusticeUserSuccessfulRestore', () => { - it('should hide restore justice user popup and update user', () => { - // arrange - const userToRestore = new JusticeUserResponse({ - id: newGuid(), - contact_email: 'userToRestore@email.com', - first_name: 'Test', - lastname: 'UserToRestore', - full_name: 'Test User To Restore', - user_role_name: 'Team Leader', - is_vh_team_leader: true, - username: 'userToRestore@email.com', - telephone: '', - deleted: true + // assert + combineLatest([component.message$]).subscribe(([message]: [string]) => { + expect(message).toBe(Constants.ManageJusticeUsers.NewUserAdded); + done(); + }); }); - component.users = []; - component.users.push(userToRestore); - component.userToRestore = userToRestore; - component.displayRestoreUserPopup = true; - // act - component.onJusticeUserSuccessfulRestore(); + it('should display user edited message on successful edit user', (done: DoneFn) => { + // arrange + component.userFormMode$.next('edit'); - // assert - expect(component.displayRestoreUserPopup).toBeFalsy(); - expect(component.message).toBe(Constants.ManageJusticeUsers.UserRestored); - expect(component.displayMessage).toBeTruthy(); - expect(component.users[0].deleted).toBe(false); - }); - }); + // act + component.onJusticeUserSuccessfulSave(null); - describe('editUser', () => { - it('should display edit role popup', () => { - // 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: '' + // assert + component.message$.subscribe(message => { + expect(message).toBe(Constants.ManageJusticeUsers.UserEdited); + done(); + }); }); - - // act - component.editUser(userToEdit); - - // assert - expect(component.selectedUser).toBe(userToEdit); - expect(component.userFormMode).toBe('edit'); - expect(component.displayMessage).toBeFalsy(); - expect(component.showUserForm).toBeTruthy(); }); }); - describe('restoreUser', () => { - it('should display restore user popup', () => { + describe('User form', () => { + it('should hide form when add new user is cancelled', () => { // arrange - const userToRestore = 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: '', - deleted: true - }); + component.displayUserForm(); // act - component.restoreUser(userToRestore); + component.onUserFormCancelled(); // assert - expect(component.userToRestore).toBe(userToRestore); - expect(component.displayMessage).toBeFalsy(); - expect(component.displayRestoreUserPopup).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 737ae58b1..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 @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core'; import { faCircleExclamation, faExclamationCircle, faTrash, faUserPen, faRotateLeft } from '@fortawesome/free-solid-svg-icons'; import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; import { JusticeUserResponse } from '../../services/clients/api-client'; @@ -6,79 +6,92 @@ 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; - restoreUserIcon = faRotateLeft; - message: string; - users: JusticeUserResponse[]; - sortedUsers: JusticeUserResponse[] = []; form: FormGroup; + isEditing = false; isSaving = false; - displayAddButton = false; - isAnErrorMessage = false; - showSpinner = false; - showUserForm = false; - selectedUser: JusticeUserResponse; - userFormMode: JusticeUserFormMode = 'add'; - displayDeleteUserPopup = false; + restoreUserIcon = faRotateLeft; userToDelete: JusticeUserResponse; displayRestoreUserPopup = false; userToRestore: 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); + userFormMode$ = new BehaviorSubject('add'); + selectedUser$ = new BehaviorSubject(null); + + 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(); + } + + ngOnInit() { + this.form.controls.inputSearch.valueChanges.subscribe(() => this.displayAddButton$.next(false)); + + 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 => this.sortUsers(users)), + map(users => users.slice(0, this.filterSize)), + tap(() => this.showSpinner$.next(false)) + ); } - 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; - } - this.sortUsers(); + searchUsers() { + this.showSpinner$.next(true); + this.justiceUserService.search(this.form.value.inputSearch); + 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) { @@ -90,56 +103,56 @@ export class ManageTeamComponent { 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; - } - - addUser = this.displayUserForm; - - editUser(user: JusticeUserResponse) { - this.selectedUser = user; - this.userFormMode = 'edit'; - this.displayUserForm(); + this.message$.next(Constants.Error.ManageJusticeUsers.SearchFailure); + this.displayMessage$.next(true); } onUserFormCancelled() { - this.showUserForm = false; - this.selectedUser = null; - this.userFormMode = 'add'; + this.showForm$.next(false); + // reset form related properties + this.userFormMode$.next('add'); } onJusticeUserSuccessfulSave(user: JusticeUserResponse) { - if (this.userFormMode === 'add') { + if (this.userFormMode$.getValue() === 'add') { this.resetAfterSave(Constants.ManageJusticeUsers.NewUserAdded); - this.users.push(user); - } else if (this.userFormMode === 'edit') { - const index = this.users.findIndex(x => x.id === user.id); - this.users[index] = user; + } else if (this.userFormMode$.getValue() === 'edit') { this.resetAfterSave(Constants.ManageJusticeUsers.UserEdited); } - this.sortUsers(); + } + + addUser = this.displayUserForm; + + editUser(user: JusticeUserResponse) { + this.selectedUser$.next(user); + this.userFormMode$.next('edit'); + this.displayUserForm(); } 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.updateDeletedJusticeUser(); - this.sortUsers(); + this.removeJusticeUser(); + this.displayDeleteUserPopup$.next(false); + this.message$.next(Constants.ManageJusticeUsers.UserDeleted); + this.displayMessage$.next(true); + } + + removeJusticeUser() { + this.userToDelete = null; + // this.updateDeletedJusticeUser(); } updateDeletedJusticeUser() { - this.userToDelete.deleted = true; + // this.userToDelete.deleted = true; } restoreUser(user: JusticeUserResponse) { @@ -154,10 +167,9 @@ export class ManageTeamComponent { onJusticeUserSuccessfulRestore() { this.displayRestoreUserPopup = false; - this.message = Constants.ManageJusticeUsers.UserRestored; - this.displayMessage = true; + this.message$.next(Constants.ManageJusticeUsers.UserRestored); + this.displayMessage$.next(true); this.updateRestoredJusticeUser(); - this.sortUsers(); } updateRestoredJusticeUser() { @@ -165,18 +177,18 @@ export class ManageTeamComponent { } displayUserForm() { - this.displayMessage = false; - this.showUserForm = true; + this.displayMessage$.next(false); + this.showForm$.next(true); } private resetAfterSave(message: string) { - this.showUserForm = false; - this.displayAddButton = false; - this.message = message; - this.isAnErrorMessage = false; - this.displayMessage = true; - this.selectedUser = null; - this.userFormMode = 'add'; + this.showForm$.next(false); + this.message$.next(message); + this.displayAddButton$.next(false); + this.isAnErrorMessage$.next(false); + this.displayMessage$.next(true); + this.selectedUser$.next(null); + this.userFormMode$.next('add'); } }