Merge pull request #1155 from ORCID/reports

Reports

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

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

ui/src/app/report/report.component.html

@@ -0,0 +1,7 @@
+<div class="row">
+    <div class="col-md-12">
+    	<div>
+	    	<iframe *ngIf="reportSrc" [src]="reportSrc"></iframe>
+    	</div>
+    </div>
+</div>

ui/src/app/report/report.component.spec.ts

@@ -0,0 +1,40 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { ReportComponent } from './report.component'
+import { ReportService } from './report.service'
+import { ActivatedRoute } from '@angular/router'
+import { of } from 'rxjs'
+import { RouterTestingModule } from '@angular/router/testing'
+
+describe('ReportComponent', () => {
+  let component: ReportComponent
+  let fixture: ComponentFixture<ReportComponent>
+  let activatedRoute: jasmine.SpyObj<ActivatedRoute>
+  let reportService: jasmine.SpyObj<ReportService>
+
+  beforeEach(async () => {
+    const reportServiceSpy = jasmine.createSpyObj('ReportService', ['getDashboardInfo'])
+
+    await TestBed.configureTestingModule({
+      declarations: [ReportComponent],
+      imports: [RouterTestingModule],
+      providers: [{ provide: ReportService, useValue: reportServiceSpy }],
+    }).compileComponents()
+
+    activatedRoute = TestBed.inject(ActivatedRoute) as jasmine.SpyObj<ActivatedRoute>
+    reportService = TestBed.inject(ReportService) as jasmine.SpyObj<ReportService>
+    fixture = TestBed.createComponent(ReportComponent)
+    component = fixture.componentInstance
+  })
+
+  it('should create the component', () => {
+    expect(component).toBeTruthy()
+  })
+
+  it('should call reportService to get report data', () => {
+    activatedRoute.data = of({ reportType: 'test' })
+    reportService.getDashboardInfo.and.returnValue(of({ url: 'url', jwt: 'jwt' }))
+    fixture.detectChanges()
+
+    expect(reportService.getDashboardInfo).toHaveBeenCalled()
+  })
+})

ui/src/app/report/report.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core'
+import { ReportService } from './report.service'
+import { DomSanitizer } from '@angular/platform-browser'
+import { ActivatedRoute } from '@angular/router'
+
+@Component({
+  selector: 'app-report',
+  templateUrl: './report.component.html',
+  styleUrls: ['report.scss'],
+})
+export class ReportComponent implements OnInit {
+  reportSrc: any
+  reportType: string | undefined
+
+  constructor(
+    private reportService: ReportService,
+    private sanitizer: DomSanitizer,
+    private activatedRoute: ActivatedRoute
+  ) {}
+
+  ngOnInit() {
+    this.activatedRoute.data.subscribe((data) => {
+      this.reportType = data['reportType']
+
+      if (this.reportType) {
+        this.reportService.getDashboardInfo(this.reportType).subscribe((res) => {
+          const url = res.url
+          const token = res.jwt
+          this.reportSrc = this.safeUrl(url + '?_token=' + token)
+        })
+      }
+    })
+  }
+
+  safeUrl(url: string) {
+    return this.sanitizer.bypassSecurityTrustResourceUrl(url)
+  }
+}

ui/src/app/report/report.module.ts

@@ -0,0 +1,11 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import { ReportComponent } from './report.component'
+import { REPORT_ROUTE } from './report.route'
+
+@NgModule({
+  imports: [RouterModule.forChild([REPORT_ROUTE])],
+  declarations: [ReportComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class ReportModule {}

ui/src/app/report/report.route.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core'
+import { Resolve, ActivatedRouteSnapshot, Route, ResolveFn, RouterStateSnapshot } from '@angular/router'
+import { Observable, of } from 'rxjs'
+import { ReportComponent } from './report.component'
+
+export const ReportResolver: ResolveFn<string | null> = (
+  route: ActivatedRouteSnapshot,
+  state: RouterStateSnapshot
+): Observable<string | null> => {
+  const reportType = route.params['reportType'] ? route.params['reportType'] : null
+  return of(reportType)
+}
+
+export const REPORT_ROUTE: Route = {
+  path: ':reportType',
+  component: ReportComponent,
+  resolve: {
+    reportType: ReportResolver,
+  },
+  data: {
+    authorities: [],
+    pageTitle: 'gatewayApp.report.member.title.string',
+  },
+}

ui/src/app/report/report.scss

@@ -0,0 +1,4 @@
+iframe {
+  width: 100%;
+  height: 1000px;
+}

ui/src/app/report/report.service.ts

@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core'
+import { HttpClient, HttpResponse } from '@angular/common/http'
+import { Observable } from 'rxjs'
+
+@Injectable({ providedIn: 'root' })
+export class ReportService {
+  public resourceUrl = '/services/memberservice/api/reports'
+
+  constructor(protected http: HttpClient) {}
+
+  getDashboardInfo(reportType: string): Observable<{ url: any; jwt: any }> {
+    return this.http.get<{ url: any; jwt: any }>(`${this.resourceUrl}/` + reportType)
+  }
+}