Affiliation date fixes

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

@@ -4,6 +4,7 @@ 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'
+import { DateUtilService } from '../shared/service/date-util.service'
 
 @Component({
   selector: 'app-affiliation-detail',
@@ -15,15 +16,28 @@ export class AffiliationDetailComponent implements OnInit {
   ownerId: string | undefined
   faPencilAlt = faPencilAlt
   faArrowLeft = faArrowLeft
+  startDate: string | undefined
+  endDate: string | undefined
 
   constructor(
     protected activatedRoute: ActivatedRoute,
-    protected userService: UserService
+    protected userService: UserService,
+    protected dateUtilService: DateUtilService
   ) {}
 
   ngOnInit() {
     this.activatedRoute.data.subscribe(({ affiliation }) => {
       this.affiliation = affiliation
+      this.startDate = this.dateUtilService.formatDate({
+        year: affiliation.startYear,
+        month: affiliation.startMonth,
+        day: affiliation.startDay,
+      })
+      this.endDate = this.dateUtilService.formatDate({
+        year: affiliation.endYear,
+        month: affiliation.endMonth,
+        day: affiliation.endDay,
+      })
       this.userService.find(this.affiliation!.ownerId!).subscribe((user) => {
         this.ownerId = user.email
       })

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

@@ -213,10 +213,10 @@ export class AffiliationUpdateComponent implements OnInit {
         roleTitle: assertion.roleTitle,
         url: assertion.url,
         startYear: assertion.startYear,
-        startMonth: parseInt(assertion.startMonth || '0'),
+        startMonth: parseInt(assertion.startMonth || '') || null,
         startDay: assertion.startDay,
         endYear: assertion.endYear,
-        endMonth: parseInt(assertion.endMonth || '0'),
+        endMonth: parseInt(assertion.endMonth || '') || null,
         endDay: assertion.endDay,
         orgName: assertion.orgName,
         orgCountry: assertion.orgCountry,

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

@@ -174,23 +174,23 @@ <h1 id="page-heading" class="mt-3" i18n="@@gatewayApp.assertionServiceAssertion.
             ><br />
             <span *ngIf="affiliation.departmentName">{{ affiliation.departmentName }}</span
             ><span *ngIf="affiliation.roleTitle"> ({{ affiliation.roleTitle }})</span><br />
-            <span *ngIf="affiliation.startYear">{{ affiliation.startYear }}</span
-            ><span *ngIf="affiliation.startMonth">-{{ affiliation.startMonth }}</span
-            ><span *ngIf="affiliation.startDay">-{{ affiliation.startDay }}</span>
+            <span *ngIf="affiliation.startYear"
+              >{{ formatDate(affiliation.startYear, affiliation.startMonth, affiliation.startDay) }}
+            </span>
             <span
               *ngIf="affiliation.startYear && affiliation.endYear"
-              i18n="@@gatewayApp.assertionServiceaffiliation.dateRange.string"
+              i18n="@@gatewayApp.assertionServiceAssertion.dateRange.string"
               >to</span
             >
-            <span *ngIf="affiliation.endYear">{{ affiliation.endYear }}</span
-            ><span *ngIf="affiliation.endMonth">-{{ affiliation.endMonth }}</span
-            ><span *ngIf="affiliation.endDay">-{{ affiliation.endDay }} </span> <br /><a
+            <span *ngIf="affiliation.endYear">
+              {{ formatDate(affiliation.endYear, affiliation.endMonth, affiliation.endDay) }}</span
+            ><br /><a
               i18n="@@gatewayApp.assertionServiceAssertion.details.string"
               [routerLink]="['/affiliations', affiliation.id, 'view']"
               >View details</a
             >
           </td>
-          <td>{{ affiliation.created?.toString() | date: 'medium' }}</td>
+          <td>{{ affiliation.created?.toDate() | date: 'medium' : 'en-US' }}</td>
           <td class="assertion-status" *ngIf="affiliation.prettyStatus">
             <span>{{ affiliation.prettyStatus | localize }}</span>
             <div
@@ -252,4 +252,4 @@ <h1 id="page-heading" class="mt-3" i18n="@@gatewayApp.assertionServiceAssertion.
     </div>
   </div>
 </div>
-<router-outlet name="popup"></router-outlet>
+<router-outlet name="popup"></router-outlet>

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

@@ -21,6 +21,7 @@ import { AccountService } from '../account'
 import { AlertService } from '../shared/service/alert.service'
 import { ActivatedRoute, Router } from '@angular/router'
 import { EventService } from '../shared/service/event.service'
+import { DateUtilService } from '../shared/service/date-util.service'
 
 @Component({
   selector: 'app-affiliations',
@@ -47,6 +48,8 @@ export class AffiliationsComponent implements OnInit, OnDestroy {
   ascending: any
   orcidBaseUrl: string | undefined = ORCID_BASE_URL
   itemCount: string | undefined
+  startDate: string | undefined
+  endDate: string | undefined
   faChartBar = faChartBar
   faFileDownload = faFileDownload
   faFileImport = faFileImport
@@ -71,7 +74,8 @@ export class AffiliationsComponent implements OnInit, OnDestroy {
     protected activatedRoute: ActivatedRoute,
     protected router: Router,
     protected eventService: EventService,
-    protected translate: LanguageService
+    protected translate: LanguageService,
+    protected dateUtilService: DateUtilService
   ) {
     this.itemsPerPage = ITEMS_PER_PAGE
   }
@@ -137,6 +141,14 @@ export class AffiliationsComponent implements OnInit, OnDestroy {
     this.loadAll()
   }
 
+  formatDate(year?: string, month?: string, day?: string) {
+    return this.dateUtilService.formatDate({
+      year,
+      month,
+      day,
+    })
+  }
+
   clear() {
     this.page = 0
     this.router.navigate([

ui/src/app/shared/service/date-util.service.ts

@@ -72,4 +72,20 @@ export class DateUtilService {
     }
     return days
   }
+
+  formatDate({ year, month, day }: { year?: string; month?: string; day?: string }): string {
+    let date = ''
+    if (year) {
+      date = year
+
+      if (month && parseInt(month) > 0) {
+        date += `-${month.padStart(2, '0')}`
+
+        if (day && parseInt(day) > 0) {
+          date += `-${day.padStart(2, '0')}`
+        }
+      }
+    }
+    return date
+  }
 }