Merge pull request #382 from NUM-Forschungsdatenplattform/develop

Release 1.10.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "num-portal-webapp",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "scripts": {
     "postinstall": "ngcc",
     "ng": "ng",

src/app/core/services/organization/organization.service.ts

@@ -35,13 +35,18 @@ export class OrganizationService {
     this.baseUrl = `${appConfig.config.api.baseUrl}/organization`
   }
 
-  getAllPag(page: number, size: number, sort: string = null): Observable<any> {
+  getAllPag(
+    page: number,
+    size: number,
+    sort: string = null,
+    sortBy: string = null
+  ): Observable<any> {
     let queryString = ''
     if (page !== null && size !== null) {
       queryString = queryString + '?page=' + page + '&size=' + size
 
       if (sort) {
-        queryString = queryString + '&sort=' + sort
+        queryString = queryString + '&sort=' + sort + '&sortBy=' + sortBy
       }
     }
     return this.httpClient.get<any>(this.baseUrl + '/all' + queryString).pipe(

src/app/modules/organization-management/components/organizations-table/organizations-table.component.html

@@ -23,7 +23,7 @@ <h3 id="all-organizations-header">{{ 'NAVIGATION.ALL_ORGANIZATIONS' | translate
     matSort
     matSortActive="id"
     matSortDirection="desc"
-    (matSortChange)="handleSortChange($event)"
+    (matSortChange)="handleSortChangeTable($event)"
     fixedLayout
     aria-labelledby="all-organizations-header"
     data-test="all-organizations__table"

src/app/modules/organization-management/components/organizations-table/organizations-table.component.spec.ts

@@ -20,23 +20,14 @@ import { Router } from '@angular/router'
 import { RouterTestingModule } from '@angular/router/testing'
 import { FontAwesomeTestingModule } from '@fortawesome/angular-fontawesome/testing'
 import { TranslateModule } from '@ngx-translate/core'
-import { Subject } from 'rxjs'
+import { of, Subject } from 'rxjs'
 import { OrganizationService } from 'src/app/core/services/organization/organization.service'
 import { MaterialModule } from 'src/app/layout/material/material.module'
-import { IOrganization } from 'src/app/shared/models/organization/organization.interface'
 import { PipesModule } from 'src/app/shared/pipes/pipes.module'
-import {
-  mockOrganization1,
-  mockOrganizations,
-  mockOrganizationsForSort,
-} from 'src/mocks/data-mocks/organizations.mock'
-import { HarnessLoader } from '@angular/cdk/testing'
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'
-import { MatSortHeaderHarness } from '@angular/material/sort/testing'
-import { MatTableHarness } from '@angular/material/table/testing'
-import { maxBy, minBy } from 'lodash-es'
+import { mockOrganization1, mockOrganizations } from 'src/mocks/data-mocks/organizations.mock'
 
 import { OrganizationsTableComponent } from './organizations-table.component'
+import { MatSort, Sort } from '@angular/material/sort'
 
 describe('OrganizationsTableComponent', () => {
   let component: OrganizationsTableComponent
@@ -46,6 +37,7 @@ describe('OrganizationsTableComponent', () => {
   const organizationsSubject$ = new Subject<any>()
   const organizationService = {
     organizationsObservable$: organizationsSubject$.asObservable(),
+    getAllPag: jest.fn(),
   } as unknown as OrganizationService
 
   beforeEach(async () => {
@@ -98,4 +90,25 @@ describe('OrganizationsTableComponent', () => {
       expect(router.navigate).toHaveBeenCalledWith(['organizations', 1, 'editor'])
     })
   })
+
+  describe('When pagination is triggered', () => {
+    it('should fetch next page', () => {
+      jest.spyOn(organizationService, 'getAllPag').mockReturnValue(of({}))
+      const params = {
+        pageIndex: 1,
+        pageSize: 10,
+      }
+      component.onPageChange(params)
+    })
+  })
+
+  describe('When sorting is triggered', () => {
+    it('should fetch sorting page', () => {
+      jest.spyOn(organizationService, 'getAllPag').mockReturnValue(of({}))
+      const sort = new MatSort()
+      sort.active = 'name'
+      sort.direction = 'asc'
+      component.handleSortChangeTable(sort)
+    })
+  })
 })

src/app/modules/organization-management/components/organizations-table/organizations-table.component.ts

@@ -21,6 +21,7 @@ import { OrganizationService } from 'src/app/core/services/organization/organiza
 import { IOrganization } from 'src/app/shared/models/organization/organization.interface'
 import { SortableTable } from 'src/app/shared/models/sortable-table.model'
 import { OrganizationTableColumn } from '../../models/organization-table-column.interface'
+import { Sort } from '@angular/material/sort'
 
 @Component({
   selector: 'num-organizations-table',
@@ -38,6 +39,11 @@ export class OrganizationsTableComponent
 
   displayedColumns: OrganizationTableColumn[] = ['icon', 'name', 'mailDomains']
 
+  public sortBy: string
+  public sortDir: string
+
+  public pageIndex: number
+
   public totalItems: number
 
   get pageSize(): number {
@@ -49,19 +55,36 @@ export class OrganizationsTableComponent
   }
 
   ngOnInit(): void {
+    this.sortBy = 'name'
+    this.sortDir = 'ASC'
+
     this.subscriptions.add(
       this.organizationService.organizationsObservable$.subscribe((data) => this.handleData(data))
     )
   }
 
   onPageChange(event: any) {
+    this.pageIndex = event.pageIndex
+    this.pageSize = event.pageSize
+    this.getAll()
+  }
+
+  getAll() {
     this.subscriptions.add(
-      this.organizationService.getAllPag(event.pageIndex, event.pageSize).subscribe((data) => {
-        this.handleData(data)
-      })
+      this.organizationService
+        .getAllPag(this.pageIndex, this.pageSize, this.sortDir, this.sortBy)
+        .subscribe((data) => {
+          this.handleData(data)
+        })
     )
   }
 
+  handleSortChangeTable(sort: Sort): void {
+    this.sortBy = sort.active
+    this.sortDir = sort.direction.toUpperCase()
+    this.getAll()
+  }
+
   handleData(organizations: any): void {
     this.dataSource.data = organizations.content
     this.totalItems = organizations.totalElements

src/app/modules/user-management/components/add-user-organization/add-user-organization.component.html

@@ -25,7 +25,7 @@
     data-test="user-management__add-organization__selector"
   >
     <mat-option
-      *ngFor="let organization of organizations"
+      *ngFor="let organization of organizations | objectToArray"
       [value]="organization.id"
       [attr.data-test]="'user-management__add-organization__' + organization.name"
     >

src/app/modules/user-management/components/add-user-organization/add-user-organization.component.spec.ts

@@ -28,6 +28,7 @@ import {
 import { OrganizationService } from 'src/app/core/services/organization/organization.service'
 import { Subject } from 'rxjs'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { Pipe, PipeTransform } from '@angular/core'
 
 describe('AddUserOrganizationComponent', () => {
   let component: AddUserOrganizationComponent
@@ -38,9 +39,16 @@ describe('AddUserOrganizationComponent', () => {
     organizationsObservable$: organizationsSubject$.asObservable(),
   } as OrganizationService
 
+  @Pipe({ name: 'objectToArray' })
+  class MockObjectToArrayPipe implements PipeTransform {
+    transform = (objects: any = []) => {
+      return Object.values(objects)
+    }
+  }
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [AddUserOrganizationComponent],
+      declarations: [AddUserOrganizationComponent, MockObjectToArrayPipe],
       imports: [
         MaterialModule,
         FontAwesomeTestingModule,

src/app/shared/pipes/object-to-array.pipe.spec.ts

@@ -0,0 +1,18 @@
+import { ObjectToArrayPipe } from './object-to-array.pipe'
+
+describe('ObjectToArrayPipe', () => {
+  let pipe: ObjectToArrayPipe
+
+  beforeEach(() => {
+    pipe = new ObjectToArrayPipe()
+  })
+  it('create an instance', () => {
+    expect(pipe).toBeTruthy()
+  })
+
+  it('should convert Object to Array', () => {
+    const input = {}
+    const result = pipe.transform(input)
+    expect(result).toEqual([])
+  })
+})

src/app/shared/pipes/object-to-array.pipe.ts

@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core'
+
+@Pipe({
+  name: 'objectToArray',
+})
+export class ObjectToArrayPipe implements PipeTransform {
+  transform = (objects: any = []) => {
+    return Object.values(objects)
+  }
+}

src/app/shared/pipes/pipes.module.ts

@@ -24,6 +24,7 @@ import { ProjectMenuPipe } from './project-menu.pipe'
 import { LocalizedDatePipe } from './localized-date.pipe'
 import { AqlMenuPipe } from './aql-menu.pipe'
 import { AvailableRolesPipe } from './available-roles.pipe'
+import { ObjectToArrayPipe } from './object-to-array.pipe'
 
 const SHARED_DECLARATIONS = [
   GroupIndexPipe,
@@ -34,6 +35,7 @@ const SHARED_DECLARATIONS = [
   AqlMenuPipe,
   LocalizedDatePipe,
   AvailableRolesPipe,
+  ObjectToArrayPipe,
 ]
 
 @NgModule({

src/assets/i18n/en.json

@@ -284,7 +284,7 @@
     "PROJECT_APPROVAL_DENY": "Deny PROJECT",
     "EXECUTE": "Execute",
     "GET_DATA": "Retrieve data",
-    "APPLY_CONFIGURATION": "File Project Application",
+    "APPLY_CONFIGURATION": "Create Project Application",
     "CUSTOMIZE_CONFIGURATION": "Filter data",
     "RESET_CUSTOMIZATION": "Reset filter",
     "CREATE_ORGANIZATION": "Create organization",