Affiliation details

ui/src/app/affiliation/affiliation-detail.component.html

@@ -0,0 +1,116 @@
+<div class="row justify-content-center">
+    <div class="col-8">
+        <div *ngIf="affiliation">
+            <h1 class="mt-5" i18n="@@gatewayApp.assertionServiceAssertion.detail.title.string">Affiliation details</h1>
+            <hr>
+            <app-error-alert></app-error-alert>
+            <div class="row">
+                <dl class="jh-entity-details">
+                 	<dt class="col-md-3" i18n="@@gatewayApp.assertionServiceAssertion.id.string">ID</dt>
+                    <dd class="col-md-9">
+                        {{affiliation.id}}
+                    </dd>
+                    <dt class="col-md-3" i18n="@@gatewayApp.assertionServiceAssertion.email.string">Email</dt>
+                    <dd class="col-md-9">
+                        {{affiliation.email}}
+                    </dd>
+                    <dt class="col-md-3" i18n="@@gatewayApp.assertionServiceAssertion.status.string">Status</dt>
+                    <dd class="col-md-9">
+                        {{affiliation.prettyStatus}}
+                    </dd>
+                    <dt *ngIf="affiliation.permissionLink" class="col-md-3" i18n="@@gatewayApp.assertionServiceAssertion.permissionLink.string">Permission link</dt>
+                    <dd *ngIf="affiliation.permissionLink" class="col-md-9">
+                        <button class="btn btn-outline-primary" type="button" [ngxClipboard] [cbContent]="affiliation.permissionLink" (cbOnSuccess)="successMessage()" i18n="@@gatewayApp.assertionServiceAssertion.copyClipboard.string">Copy to clipboard</button>
+                    </dd>
+                    <dt *ngIf="affiliation.orcidId" class="col-md-3" i18n="@@gatewayApp.assertionServiceAssertion.orcidId.string">ORCID iD</dt>
+                    <dd *ngIf="affiliation.orcidId" class="col-md-9">
+                        <a href="{{orcidBaseUrl}}/{{affiliation.orcidId}}" target="_blank">{{orcidBaseUrl}}/{{affiliation.orcidId}}</a>
+                    </dd>
+                    <dt class="col-md-3" i18n="@@gatewayApp.assertionServiceAssertion.affiliationSection.string">Affiliation Section</dt>
+                    <dd class="col-md-9">
+                        <span i18n="@@{{'gatewayApp.AffiliationSection.' + affiliation.affiliationSection + '.string'}}">{{affiliation.affiliationSection}}</span>
+                    </dd>
+                    <dt class="col-md-3" i18n="@@gatewayApp.assertionServiceAssertion.detail.org.string">Organization</dt>
+                    <dd class="col-md-9">
+                        {{affiliation.orgName}}: <span *ngIf="affiliation.orgCity">{{affiliation.orgCity}}</span><span *ngIf="affiliation.orgRegion">, {{affiliation.orgRegion}}</span><span *ngIf="affiliation.orgCountry">, {{affiliation.orgCountry}}</span><br>
+                        {{affiliation.disambiguationSource}} {{affiliation.disambiguatedOrgId}}
+                    </dd>
+                    <dt *ngIf="affiliation.departmentName" class="col-md-3" i18n="@@gatewayApp.assertionServiceAssertion.departmentName.string">Department Name</dt>
+                    <dd *ngIf="affiliation.departmentName" class="col-md-9">
+                        {{affiliation.departmentName}}
+                    </dd>
+                    <dt *ngIf="affiliation.roleTitle" class="col-md-3" i18n="@@gatewayApp.assertionServiceAssertion.roleTitle.string">Role Title</dt>
+                    <dd *ngIf="affiliation.roleTitle" class="col-md-9">
+                        {{affiliation.roleTitle}}
+                    </dd>
+                    <dt *ngIf="affiliation.url" class="col-md-3" i18n="@@gatewayApp.assertionServiceAssertion.url.string">Url</dt>
+                    <dd *ngIf="affiliation.url" class="col-md-9">
+                        <a href="{{affiliation.url}}">{{affiliation.url}}</a>
+                    </dd>
+                    <dt *ngIf="affiliation.startYear" class="col-md-3" i18n="@@gatewayApp.assertionServiceAssertion.startDate.string">Start Date</dt>
+                    <dd *ngIf="affiliation.startYear" class="col-md-9">
+                        {{affiliation.startYear!}}<span *ngIf="affiliation.startMonth">-{{affiliation.startMonth}}</span><span *ngIf="affiliation.startMonth&&affiliation.startDay">-{{affiliation.startDay!}}</span>
+                    </dd>
+                    <dt *ngIf="affiliation.endYear" class="col-md-3" i18n="@@gatewayApp.assertionServiceAssertion.endDate.string">End Date</dt>
+                    <dd *ngIf="affiliation.endYear" class="col-md-9">
+                        {{affiliation.endYear!}}<span *ngIf="affiliation.endMonth">-{{affiliation.endMonth}}</span><span *ngIf="affiliation.endMonth&&affiliation.endDay">-{{affiliation.endDay!}}</span>
+                    </dd>
+                    <dt *ngIf="affiliation.externalId" class="col-md-3" i18n="@@gatewayApp.assertionServiceAssertion.externalId.string">External Id</dt>
+                    <dd *ngIf="affiliation.externalId" class="col-md-9">
+                        {{affiliation.externalIdType!}} <a *ngIf="affiliation.externalIdUrl" href="{{affiliation.externalIdUrl}}">{{affiliation.externalId}}</a> <span *ngIf="!affiliation.externalIdUrl">{{affiliation.externalId}}</span>
+                    </dd>
+                    <dt class="col-md-3" i18n="@@gatewayApp.assertionServiceAssertion.created.string">Created</dt>
+                    <dd class="col-md-9">
+                        {{affiliation.created!.toString() | date:'medium'}}
+                    </dd>
+                    <dt *ngIf="affiliation.addedToORCID" class="col-md-3" i18n="@@gatewayApp.assertionServiceAssertion.addedToOrcid.string">Added To ORCID</dt>
+                    <dd *ngIf="affiliation.addedToORCID" class="col-md-9">
+                        {{affiliation.addedToORCID!.toString() | date:'medium'}}
+                    </dd>
+                    <dt *ngIf="affiliation.updatedInORCID" class="col-md-3" i18n="@@gatewayApp.assertionServiceAssertion.updatedInOrcid.string">Updated In ORCID</dt>
+                    <dd *ngIf="affiliation.updatedInORCID" class="col-md-9">
+                        {{affiliation.updatedInORCID!.toString() | date:'medium'}}
+                    </dd>
+                    <dt class="col-md-3" i18n="@@gatewayApp.assertionServiceAssertion.modified.string">Modified</dt>
+                    <dd class="col-md-9">
+                        {{affiliation.modified!.toString() | date:'medium'}} <i><span i18n="@@global.by.string">by</span> {{affiliation.lastModifiedBy}}</i>
+                    </dd>
+                    <dt class="col-md-3" i18n="@@gatewayApp.assertionServiceAssertion.adminId.string">Admin Id</dt>
+                    <dd class="col-md-9">
+                        {{ownerId}}
+                    </dd>
+                    <dt *ngIf="(!affiliation.invitationSent && affiliation.notificationSent) || (affiliation.notificationSent && affiliation.notificationSent < affiliation.invitationSent!)" class="col-md-3" i18n="@@gatewayApp.assertionServiceAssertion.notificationFirstSent.string">Notification First Sent</dt>
+                    <dd *ngIf="(!affiliation.invitationSent && affiliation.notificationSent) || (affiliation.notificationSent && affiliation.notificationSent < affiliation.invitationSent!)" class="col-md-9">
+                        {{affiliation.notificationSent.toString() | date:'medium'}}
+                    </dd>
+                    <dt *ngIf="(!affiliation.notificationSent && affiliation.invitationSent) || (affiliation.invitationSent && affiliation.invitationSent < affiliation.notificationSent!)" class="col-md-3" i18n="@@gatewayApp.assertionServiceAssertion.notificationFirstSent.string">Notification First Sent</dt>
+                    <dd *ngIf="(!affiliation.notificationSent && affiliation.invitationSent) || (affiliation.invitationSent && affiliation.invitationSent < affiliation.notificationSent!)" class="col-md-9">
+                        {{affiliation.invitationSent.toString() | date:'medium'}}
+                    </dd>
+                    <dt *ngIf="(!affiliation.invitationLastSent && affiliation.notificationLastSent) || (affiliation.notificationLastSent && affiliation.notificationLastSent > affiliation.invitationLastSent!)" class="col-md-3" i18n="@@gatewayApp.assertionServiceAssertion.notificationLastSent.string">Notification Last Sent</dt>
+                    <dd *ngIf="(!affiliation.invitationLastSent && affiliation.notificationLastSent) || (affiliation.notificationLastSent && affiliation.notificationLastSent > affiliation.invitationLastSent!)" class="col-md-9">
+                        {{affiliation.notificationLastSent.toString() | date:'medium'}}
+                    </dd>
+                    <dt *ngIf="(!affiliation.notificationLastSent && affiliation.invitationLastSent) || (affiliation.invitationLastSent && affiliation.invitationLastSent > affiliation.notificationLastSent!)" class="col-md-3" i18n="@@gatewayApp.assertionServiceaffiliation.notificationLastSent.string">Notification Last Sent</dt>
+                    <dd *ngIf="(!affiliation.notificationLastSent && affiliation.invitationLastSent) || (affiliation.invitationLastSent && affiliation.invitationLastSent > affiliation.notificationLastSent!)" class="col-md-9">
+                        {{affiliation.invitationLastSent.toString() | date:'medium'}}
+                    </dd>
+                </dl>
+            </div>
+            <hr>
+            <div class="mb-3">
+                <button type="submit"
+                        (click)="previousState()"
+                        class="btn btn-outline-primary mr-2">
+                    <fa-icon [icon]="faArrowLeft"></fa-icon>&nbsp;<span i18n="@@entity.action.back.string"> Back</span>
+                </button>
+
+                <button type="button"
+                        [routerLink]="['/affiliation', affiliation!.id, 'edit']"
+                        class="btn btn-primary">
+                    <fa-icon [icon]="faPencilAlt"></fa-icon>&nbsp;<span i18n="@@entity.action.edit.string"> Edit</span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>

ui/src/app/affiliation/affiliation-detail.component.spec.ts

@@ -0,0 +1,31 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { AffiliationDetailComponent } from './affiliation-detail.component'
+import { UserService } from '../user/service/user.service'
+import { RouterTestingModule } from '@angular/router/testing'
+
+describe('AffiliationDetailComponent', () => {
+  let component: AffiliationDetailComponent
+  let fixture: ComponentFixture<AffiliationDetailComponent>
+  let userServiceSpy: jasmine.SpyObj<UserService>
+
+  beforeEach(() => {
+    userServiceSpy = jasmine.createSpyObj('UserService', ['find'])
+
+    TestBed.configureTestingModule({
+      declarations: [AffiliationDetailComponent],
+      imports: [RouterTestingModule],
+      providers: [{ provide: UserService, useValue: userServiceSpy }],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(AffiliationDetailComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+
+    userServiceSpy = TestBed.inject(UserService) as jasmine.SpyObj<UserService>
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

ui/src/app/affiliation/affiliation-detail.component.ts

@@ -0,0 +1,41 @@
+import { Component, OnInit } from '@angular/core'
+import { Affiliation, IAffiliation } from './model/affiliation.model'
+import { ORCID_BASE_URL } from '../app.constants'
+import { ActivatedRoute } from '@angular/router'
+import { UserService } from '../user/service/user.service'
+import { faPencilAlt, faArrowLeft } from '@fortawesome/free-solid-svg-icons'
+
+@Component({
+  selector: 'app-affiliation-detail',
+  templateUrl: './affiliation-detail.component.html',
+  styleUrls: ['./affiliation-detail.component.scss'],
+})
+export class AffiliationDetailComponent implements OnInit {
+  affiliation: IAffiliation = new Affiliation()
+  orcidBaseUrl: string = ORCID_BASE_URL
+  ownerId: string | undefined
+  faPencilAlt = faPencilAlt
+  faArrowLeft = faArrowLeft
+
+  constructor(
+    protected activatedRoute: ActivatedRoute,
+    protected userService: UserService
+  ) {}
+
+  ngOnInit() {
+    this.activatedRoute.data.subscribe(({ affiliation }) => {
+      this.affiliation = affiliation
+      this.userService.find(this.affiliation!.ownerId!).subscribe((user) => {
+        this.ownerId = user.email
+      })
+    })
+  }
+
+  previousState() {
+    window.history.back()
+  }
+
+  successMessage() {
+    alert($localize`:@@gatewayApp.assertionServiceAssertion.copySuccess.string:`)
+  }
+}

ui/src/app/affiliation/affiliation.module.ts

@@ -5,11 +5,12 @@ import { AffiliationsComponent } from './affiliations.component'
 import { affiliationRoutes } from './affiliation.route'
 import { SharedModule } from '../shared/shared.module'
 import { CommonModule } from '@angular/common'
-import { FormsModule } from '@angular/forms'
+import { FormsModule } from '@angular/forms';
+import { AffiliationDetailComponent } from './affiliation-detail.component'
 
 @NgModule({
   imports: [CommonModule, FormsModule, SharedModule, RouterModule.forChild(affiliationRoutes), ClipboardModule],
-  declarations: [AffiliationsComponent],
+  declarations: [AffiliationsComponent, AffiliationDetailComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class AffiliationModule {}

ui/src/app/affiliation/affiliation.route.ts

@@ -1,27 +1,30 @@
 import { ActivatedRouteSnapshot, ResolveFn, RouterStateSnapshot, Routes } from '@angular/router'
 import { AuthGuard } from '../account/auth.guard'
-import { EMPTY, Observable, filter, of, take } from 'rxjs'
-import { Injectable, inject } from '@angular/core'
+import { Observable, filter, of, take } from 'rxjs'
+import { inject } from '@angular/core'
 import { AffiliationService } from './service/affiliations.service'
 import { Affiliation } from './model/affiliation.model'
 import { AffiliationsComponent } from './affiliations.component'
-import { HttpResponse } from '@angular/common/http'
+import { AffiliationDetailComponent } from './affiliation-detail.component'
 
 export const AffiliationResolver: ResolveFn<Affiliation | null> = (
   route: ActivatedRouteSnapshot,
   state: RouterStateSnapshot,
   affiliationService: AffiliationService = inject(AffiliationService)
 ): Observable<Affiliation | null> => {
   if (route.paramMap.get('id')) {
-    return affiliationService.find(route.paramMap.get('id')!)
+    return affiliationService.find(route.paramMap.get('id')!).pipe(
+      filter<Affiliation>((affiliation: Affiliation) => !!affiliation),
+      take(1)
+    )
   } else {
     return of(null)
   }
 }
 
 export const affiliationRoutes: Routes = [
   {
-    path: '',
+    path: 'affiliations',
     component: AffiliationsComponent,
     data: {
       authorities: ['ASSERTION_SERVICE_ENABLED'],
@@ -30,4 +33,16 @@ export const affiliationRoutes: Routes = [
     },
     canActivate: [AuthGuard],
   },
+  {
+    path: 'affiliations/:id/view',
+    component: AffiliationDetailComponent,
+    resolve: {
+      affiliation: AffiliationResolver,
+    },
+    data: {
+      authorities: ['ASSERTION_SERVICE_ENABLED'],
+      pageTitle: 'gatewayApp.assertionServiceAssertion.home.title.string',
+    },
+    canActivate: [AuthGuard],
+  },
 ]

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

@@ -186,7 +186,7 @@ <h1 id="page-heading" class="mt-3" i18n="@@gatewayApp.assertionServiceAssertion.
             ><span *ngIf="affiliation.endMonth">-{{ affiliation.endMonth }}</span
             ><span *ngIf="affiliation.endDay">-{{ affiliation.endDay }} </span> <br /><a
               i18n="@@gatewayApp.assertionServiceAssertion.details.string"
-              [routerLink]="['/affiliation', affiliation.id, 'view']"
+              [routerLink]="['/affiliations', affiliation.id, 'view']"
               >View details</a
             >
           </td>

ui/src/app/user/user.route.ts

@@ -2,10 +2,10 @@ import { ActivatedRouteSnapshot, ResolveFn, RouterStateSnapshot, Routes } from '
 import { UsersComponent } from './users.component'
 import { AuthGuard } from '../account/auth.guard'
 import { UserDetailComponent } from './user-detail.component'
-import { EMPTY, Observable, filter, of, take } from 'rxjs'
+import { Observable, filter, of, take } from 'rxjs'
 import { User } from './model/user.model'
 import { UserService } from './service/user.service'
-import { Injectable, inject } from '@angular/core'
+import { inject } from '@angular/core'
 import { UserUpdateComponent } from './user-update.component'
 import { UserImportPopupComponent } from './user-import-dialog.component'
 import { UserDeletePopupComponent } from './user-delete.component'