Members

ui/src/app/affiliation/affiliations.component.ts

@@ -40,7 +40,6 @@ export class AffiliationsComponent implements OnInit, OnDestroy {
   importEventSubscriber: Subscription | undefined
   notificationSubscription: Subscription | undefined
   routeData: Subscription | undefined
-  links: any
   totalItems: any
   itemsPerPage: any
   page = 1

ui/src/app/affiliation/send-notifications-dialog.component.ts

@@ -5,11 +5,9 @@ import { EventService } from '../shared/service/event.service'
 import { AlertService } from '../shared/service/alert.service'
 import { IUser } from '../user/model/user.model'
 import { faPaperPlane } from '@fortawesome/free-solid-svg-icons'
-import { IMember } from '../member/model/member.model'
 import { MemberService } from '../member/service/member.service'
 import { LanguageService } from '../shared/service/language.service'
 import { AccountService } from '../account'
-import { IAccount } from '../account/model/account.model'
 import { AlertType, EventType } from '../app.constants'
 import { ActivatedRoute, Router } from '@angular/router'
 

ui/src/app/app-routing.module.ts

@@ -24,6 +24,10 @@ const routes: Routes = [
     path: 'landing-page',
     loadChildren: () => import('./landing-page/landing-page.module').then((m) => m.LandingPageModule),
   },
+  {
+    path: 'members',
+    loadChildren: () => import('./member/member.module').then((m) => m.MemberModule),
+  },
 ]
 
 @NgModule({

ui/src/app/app.constants.ts

@@ -8,6 +8,7 @@ export enum EventType {
   AFFILIATION_LIST_MODIFICATION,
   IMPORT_AFFILIATIONS,
   SEND_NOTIFICATIONS,
+  MEMBER_LIST_MODIFICATION,
 }
 
 export enum AlertType {

ui/src/app/app.module.ts

@@ -17,13 +17,16 @@ import { ErrorComponent } from './error/error.component'
 import { FormsModule } from '@angular/forms'
 import { UserModule } from './user/user.module'
 import { AffiliationModule } from './affiliation/affiliation.module'
+import { MembersComponent } from './member/members.component'
+import { MemberModule } from './member/member.module'
 
 @NgModule({
   declarations: [AppComponent, NavbarComponent, FooterComponent, ErrorComponent],
   imports: [
     BrowserModule,
     UserModule,
     AffiliationModule,
+    MemberModule,
     AccountModule,
     HomeModule,
     HttpClientModule,

ui/src/app/layout/navbar/navbar.component.html

@@ -206,7 +206,7 @@
             <a
               *appHasAnyAuthority="'ROLE_ADMIN'"
               class="dropdown-item"
-              routerLink="member"
+              routerLink="/members"
               routerLinkActive="active"
               [routerLinkActiveOptions]="{ exact: true }"
               (click)="collapseNavbar()"

ui/src/app/member/member.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { RouterModule } from '@angular/router'
+import { memberRoutes } from './member.route'
+import { SharedModule } from '../shared/shared.module'
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { MembersComponent } from './members.component'
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule,
+    RouterModule.forChild(memberRoutes),
+    FontAwesomeModule,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
+  declarations: [MembersComponent],
+})
+export class MemberModule {}

ui/src/app/member/member.route.ts

@@ -0,0 +1,35 @@
+import { ActivatedRouteSnapshot, ResolveFn, RouterStateSnapshot, Routes } from '@angular/router'
+import { AuthGuard } from '../account/auth.guard'
+import { Observable, filter, of, take } from 'rxjs'
+import { inject } from '@angular/core'
+import { IMember, Member } from './model/member.model'
+import { MemberService } from './service/member.service'
+import { MembersComponent } from './members.component'
+
+export const MemberResolver: ResolveFn<Member | null> = (
+  route: ActivatedRouteSnapshot,
+  state: RouterStateSnapshot,
+  memberService: MemberService = inject(MemberService)
+): Observable<IMember | null> => {
+  if (route.paramMap.get('id')) {
+    return memberService.find(route.paramMap.get('id')!).pipe(
+      filter<IMember>((member: IMember) => !!member),
+      take(1)
+    )
+  } else {
+    return of(null)
+  }
+}
+
+export const memberRoutes: Routes = [
+  {
+    path: 'members',
+    component: MembersComponent,
+    data: {
+      authorities: ['ROLE_ADMIN'],
+      defaultSort: 'id,asc',
+      pageTitle: 'gatewayApp.msUserServiceMSMember.home.title.string',
+    },
+    canActivate: [AuthGuard],
+  },
+]

ui/src/app/member/members.component.html

@@ -0,0 +1,89 @@
+<div>
+    <h1 id="page-heading" class="mt-3" i18n="@@gatewayApp.msUserServiceMSMember.home.title.string">Manage members</h1>
+    <div class="row justify-content-end">
+        <div class="col-md-12 mb-2">
+            <button id="jh-create-entity" class="btn btn-primary float-right jh-create-entity create-ms-member ml-1" [routerLink]="['/member/new']">
+                <fa-icon [icon]="faPlus"></fa-icon>
+                <span  i18n="@@gatewayApp.msUserServiceMSMember.home.createLabel.string">
+                Add member
+                </span>
+            </button>
+            <button id="jh-upload-ms-member" class="btn btn-primary float-right jh-create-entity create-ms-member ml-1" [routerLink]="['/', 'member', { outlets: { popup: 'import'} }]">
+                <fa-icon [icon]="faPlus"></fa-icon>
+                <span  i18n="@@gatewayApp.msUserServiceMSMember.home.uploadLabel.string">
+                Import members from CSV
+                </span>
+            </button>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-12">
+            <div class="input-group filter-group justify-content-end">
+            	<div class="filter-input">
+			     	<input type="text" (keyup.enter)="submitSearch()" [(ngModel)]="searchTerm" i18n-placeholder="@@global.form.search.string" placeholder="Search..." ng-model="selected" class="form-control">
+			    	<button *ngIf="submittedSearchTerm" class="reset" (click)="resetSearch()"><fa-icon aria-hidden="true" [icon]="faTimes" [styles]="{'color': '#2e7f9f'}"></fa-icon></button>
+		    	</div>
+	    		<button class="search" (click)="submitSearch()"><fa-icon aria-hidden="true" [icon]="faSearch" [styles]="{'color': '#2e7f9f'}"></fa-icon></button>
+		    </div>
+    	</div>
+    </div>
+    <div class="row">
+        <div class="col-md-12">
+            <app-alert></app-alert>
+            <div class="alert alert-warning" *ngIf="members?.length === 0">
+                <span i18n="@@gatewayApp.msUserServiceMSMember.home.notFound.string">No members to show</span>
+            </div>
+        </div>
+    </div>
+    <div class="table-responsive" *ngIf="members && members.length && members.length > 0">
+        <table class="table table-striped">
+            <thead>
+                <tr>
+                    <th (click)="updateSort('salesforceId')"><span i18n="@@gatewayApp.msUserServiceMSMember.salesforceId.string">Salesforce Id</span> <fa-icon class="ml-2" *ngIf="sortColumn === 'salesforceId'" [icon]="ascending ? faSortDown : faSortUp"></fa-icon></th>
+                    <th (click)="updateSort('clientName')"><span i18n="@@gatewayApp.msUserServiceMSMember.clientName.string">Member Name</span> <fa-icon class="ml-2" *ngIf="sortColumn === 'clientName'" [icon]="ascending ? faSortDown : faSortUp"></fa-icon></th>
+                    <th (click)="updateSort('isConsortiumLead')"><span i18n="@@gatewayApp.msUserServiceMSMember.isConsortiumLead.string">Consortium Lead</span> <fa-icon class="ml-2" *ngIf="sortColumn === 'isConsortiumLead'" [icon]="ascending ? faSortDown : faSortUp"></fa-icon></th>
+                    <th (click)="updateSort('parentSalesforceId')"><span i18n="@@gatewayApp.msUserServiceMSMember.parentSalesforceId.string">Parent Salesforce Id</span> <fa-icon class="ml-2" *ngIf="sortColumn === 'parentSalesforceId'" [icon]="ascending ? faSortDown : faSortUp"></fa-icon></th>
+                    <th (click)="updateSort('assertionServiceEnabled')"><span i18n="@@gatewayApp.msUserServiceMSMember.assertionServiceEnabled.string">Assertions Enabled</span> <fa-icon class="ml-2" *ngIf="sortColumn === 'assertionServiceEnabled'" [icon]="ascending ? faSortDown : faSortUp"></fa-icon></th>
+                    <th (click)="updateSort('lastModifiedDate')"><span i18n="@@gatewayApp.msUserServiceMSMember.lastModifiedDate.string">Last Modified</span> <fa-icon class="ml-2" *ngIf="sortColumn === 'lastModifiedDate'" [icon]="ascending ? faSortDown : faSortUp"></fa-icon></th>
+                    <th></th>
+                </tr>
+            </thead>
+            <tbody>
+            <tr *ngFor="let member of members ;trackBy: trackId">
+                <td><a [routerLink]="['/members', member.id, 'view' ]">{{member.salesforceId}}</a></td>
+                <td>{{member.clientName}}</td>
+                <td class="text-center">
+                    <span class="sr-only">{{member.isConsortiumLead}}</span>
+                    <fa-icon aria-hidden="true" *ngIf="member.isConsortiumLead" [icon]="faCheckCircle" [styles]="{'color': '#28a745'}"></fa-icon>
+                    <fa-icon aria-hidden="true" *ngIf="!member.isConsortiumLead" [icon]="faTimesCircle" [styles]="{'color': '#f22112'}"></fa-icon>
+                </td>
+                <td>{{member.parentSalesforceId}}</td>
+                <td class="text-center">
+                    <span class="sr-only">{{member.assertionServiceEnabled}}</span>
+                    <fa-icon aria-hidden="true" *ngIf="member.assertionServiceEnabled" [icon]="faCheckCircle" [styles]="{'color': '#28a745'}"></fa-icon>
+                    <fa-icon aria-hidden="true" *ngIf="!member.assertionServiceEnabled" [icon]="faTimesCircle" [styles]="{'color': '#f22112'}"></fa-icon>
+                </td>
+                <td>{{member.lastModifiedDate?.toString() | date:'medium'}}</td>
+                <td class="text-right">
+                    <div class="btn-group">
+                        <button type="submit"
+                                [routerLink]="['/members', member.id, 'edit']"
+                                class="btn btn-primary btn-sm ml-1">
+                            <fa-icon [icon]="faPencilAlt"></fa-icon>
+                            <span class="d-none d-md-inline" i18n="@@entity.action.edit.string">Edit</span>
+                        </button>
+                    </div>
+                </td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+    <div [hidden]="members?.length === 0">
+        <div class="row justify-content-center">
+            <p>{{ itemCount }}</p>
+        </div>
+        <div class="row justify-content-center">
+            <ngb-pagination [collectionSize]="totalItems" [(page)]="page" [pageSize]="itemsPerPage" [maxSize]="5" [rotate]="true" [boundaryLinks]="true" (pageChange)="loadPage()"></ngb-pagination>
+        </div>
+    </div>
+</div>

ui/src/app/member/members.component.spec.ts

@@ -0,0 +1,116 @@
+import { ComponentFixture, TestBed, tick } from '@angular/core/testing'
+
+import { MembersComponent } from './members.component'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { AccountService } from '../account'
+import { RouterTestingModule } from '@angular/router/testing'
+import { MemberService } from './service/member.service'
+import { MemberPage } from './model/member-page.model'
+import { of } from 'rxjs'
+import { Member } from './model/member.model'
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/compiler'
+import { Router } from '@angular/router'
+
+describe('MembersComponent', () => {
+  let component: MembersComponent
+  let fixture: ComponentFixture<MembersComponent>
+  let accountServiceSpy: jasmine.SpyObj<AccountService>
+  let memberServiceSpy: jasmine.SpyObj<MemberService>
+  let routerSpy: jasmine.SpyObj<Router>
+
+  beforeEach(() => {
+    accountServiceSpy = jasmine.createSpyObj('AccountService', ['getAccountData'])
+    memberServiceSpy = jasmine.createSpyObj('MemberService', ['query'])
+    routerSpy = jasmine.createSpyObj('Router', ['navigate'])
+
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule, RouterTestingModule],
+      declarations: [MembersComponent],
+      providers: [
+        { provide: AccountService, useValue: accountServiceSpy },
+        { provide: MemberService, useValue: memberServiceSpy },
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+
+    fixture = TestBed.createComponent(MembersComponent)
+    component = fixture.componentInstance
+
+    accountServiceSpy = TestBed.inject(AccountService) as jasmine.SpyObj<AccountService>
+    memberServiceSpy = TestBed.inject(MemberService) as jasmine.SpyObj<MemberService>
+    routerSpy = TestBed.inject(Router) as jasmine.SpyObj<Router>
+
+    memberServiceSpy.query.and.returnValue(of(new MemberPage([new Member('id')], 1)))
+    accountServiceSpy.getAccountData.and.returnValue(
+      of({
+        activated: true,
+        authorities: ['ROLE_USER'],
+        email: '[email protected]',
+        firstName: 'name',
+        langKey: 'en',
+        lastName: 'surname',
+        imageUrl: 'url',
+        salesforceId: 'sfid',
+        loggedAs: false,
+        loginAs: 'sfid',
+        mainContact: false,
+        mfaEnabled: false,
+      })
+    )
+    spyOn(routerSpy, 'navigate').and.returnValue(Promise.resolve(true))
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+
+  it('load all should call member service query', () => {
+    component.loadAll()
+    expect(memberServiceSpy.query).toHaveBeenCalled()
+  })
+
+  it('clear should navigate with router and call member service query', () => {
+    component.clear()
+    expect(component.page).toEqual(0)
+    expect(routerSpy.navigate).toHaveBeenCalledWith([
+      '/members',
+      Object({ page: 0, sort: 'undefined,desc', filter: '' }),
+    ])
+    expect(memberServiceSpy.query).toHaveBeenCalled()
+  })
+
+  it('resetSearch should reset search fields', () => {
+    component.page = 50
+    component.searchTerm = 'test'
+    component.submittedSearchTerm = 'testing'
+
+    component.resetSearch()
+
+    expect(component.page).toEqual(1)
+    expect(component.searchTerm).toEqual('')
+    expect(component.submittedSearchTerm).toEqual('')
+  })
+
+  it('submitSearch should set submittedSearchTerm to value of searchTerm and then call member service query', () => {
+    component.page = 50
+    component.searchTerm = 'new search'
+    component.submittedSearchTerm = 'previously submitted search'
+
+    component.submitSearch()
+
+    expect(component.page).toEqual(1)
+    expect(component.searchTerm).toEqual('new search')
+    expect(component.submittedSearchTerm).toEqual('new search')
+
+    expect(memberServiceSpy.query).toHaveBeenCalled()
+  })
+
+  it('updateSort should set sortColumn and then call member service query', () => {
+    component.sortColumn = 'some sort column'
+
+    component.updateSort('different column')
+
+    expect(component.sortColumn).toEqual('different column')
+    expect(memberServiceSpy.query).toHaveBeenCalled()
+  })
+})