fix: Use components (card-section, card-row and card-table) to display...

fix: Use components (card-section, card-row and card-table) to display elements on germaplasm card and reduce cyclomatic complexity. Fix tests. Minor fixes. GNP-5490

frontend/src/app/brapi.service.spec.ts

@@ -22,6 +22,7 @@ import {
 import { Germplasm, GermplasmData, GermplasmResult, Institute, Origin, Site } from './models/gnpis.germplasm.model';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
+import { Util } from 'leaflet';
 
 describe('BrapiService', () => {
 
@@ -192,7 +193,7 @@ describe('BrapiService', () => {
         address: '12',
         logo: null
     };
-    const origin: Origin = {
+    const origin: Origin = { ... institute,
         institute: institute,
         germplasmPUI: '12',
         accessionNumber: '12',
@@ -206,9 +207,10 @@ describe('BrapiService', () => {
 
     const brapiDonor: BrapiDonor = {
         donorInstitute: institute,
-        germplasmPUI: '12',
-        accessionNumber: '12',
-        donorInstituteCode: 'urgi'
+        donorGermplasmPUI: '12',
+        donorAccessionNumber: '12',
+        donorInstituteCode: 'urgi',
+        donationDate: null
     };
 
     const brapiSet: BrapiSet = {

frontend/src/app/card-row/card-row.component.scss

-.row-sep {
-  border-top: 1px solid #f0f0f0;
-}
+@import '../../styles.scss';
 
 .field {
   font-weight: bold;

frontend/src/app/germplasm-card/germplasm-card.component.spec.ts

@@ -19,6 +19,9 @@ import { Germplasm, GermplasmData, GermplasmResult, Institute, Origin, Site } fr
 import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
 import { MomentModule } from 'ngx-moment';
 import { LoadingSpinnerComponent } from '../loading-spinner/loading-spinner.component';
+import { CardSectionComponent } from '../card-section/card-section.component';
+import { CardRowComponent } from '../card-row/card-row.component';
+import { CardTableComponent } from '../card-table/card-table.component';
 import { MockComponent } from 'ng-mocks';
 import { XrefsComponent } from '../xrefs/xrefs.component';
 
@@ -36,8 +39,8 @@ describe('GermplasmCardComponent', () => {
             return this.element('h3');
         }
 
-        get headerTitle() {
-            return this.elements('.headerTitle');
+        get cardHeader() {
+            return this.elements('div.card-header');
         }
     }
 
@@ -113,7 +116,7 @@ describe('GermplasmCardComponent', () => {
         logo: null
     };
 
-    const brapiOrigin: Origin = {
+    const brapiOrigin: Origin = { ... brapiInstitute,
         institute: brapiInstitute,
         germplasmPUI: '12',
         accessionNumber: '12',
@@ -127,9 +130,10 @@ describe('GermplasmCardComponent', () => {
 
     const brapiDonor: BrapiDonor = {
         donorInstitute: brapiInstitute,
-        germplasmPUI: '12',
-        accessionNumber: '12',
-        donorInstituteCode: 'urgi'
+        donorGermplasmPUI: '12',
+        donorAccessionNumber: '12',
+        donorInstituteCode: 'urgi',
+        donationDate: null
     };
 
     const brapiSet: BrapiSet = {
@@ -197,22 +201,18 @@ describe('GermplasmCardComponent', () => {
         population: [brapiSet]
     };
 
-    const germplasmResultTest = {
-        result: germplasmTest
-    };
-
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [RouterTestingModule, NgbPopoverModule, MomentModule],
             declarations: [
                 GermplasmCardComponent, LoadingSpinnerComponent, MockComponent(XrefsComponent)
+                GermplasmCardComponent, CardSectionComponent,
+                CardRowComponent, LoadingSpinnerComponent, CardTableComponent
             ],
             providers: [
-                // { provide: ActivatedRoute, useValue: activatedRoute },
                 { provide: BrapiService, useValue: brapiService },
                 { provide: GnpisService, useValue: gnpisService },
-                {
-                    provide: ActivatedRoute,
+                { provide: ActivatedRoute,
                     useValue: {
                         snapshot: {
                             queryParams: convertToParamMap({
@@ -240,10 +240,12 @@ describe('GermplasmCardComponent', () => {
             expect(component.germplasmGnpis).toBeTruthy();
             tester.detectChanges();
             expect(tester.title).toContainText('Germplasm: test');
-            expect(tester.headerTitle[0]).toContainText('Identification');
-            expect(tester.headerTitle[1]).toContainText('Holding');
-            expect(tester.headerTitle[2]).toContainText('Breeder');
-            expect(tester.headerTitle[3]).toContainText('Collecting');
+            expect(tester.cardHeader[0]).toContainText('Identification');
+            expect(tester.cardHeader[1]).toContainText('Holding');
+            expect(tester.cardHeader[2]).toContainText('Origin');
+            expect(tester.cardHeader[3]).toContainText('Distribution');
+            expect(tester.cardHeader[4]).toContainText('Genealogy');
+            expect(tester.cardHeader[5]).toContainText('Evaluation Data');
         });
     }));
 });

frontend/src/app/germplasm-card/germplasm-card.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { BrapiService } from '../brapi.service';
 import { GnpisService } from '../gnpis.service';
-import { Germplasm, GermplasmResult } from '../models/gnpis.germplasm.model';
+import { Germplasm } from '../models/gnpis.germplasm.model';
 import { BrapiGermplasmAttributes, BrapiGermplasmPedigree, BrapiGermplasmProgeny } from '../models/brapi.germplasm.model';
 
 @Component({
@@ -18,8 +18,8 @@ export class GermplasmCardComponent implements OnInit {
     }
 
     germplasmGnpis: Germplasm;
-    germplasmPedigree: GermplasmResult<BrapiGermplasmPedigree>;
-    germplasmProgeny: GermplasmResult<BrapiGermplasmProgeny>;
+    germplasmPedigree: BrapiGermplasmPedigree;
+    germplasmProgeny: BrapiGermplasmProgeny;
     germplasmAttributes: BrapiGermplasmAttributes[];
     germplasmId: string;
     germplasmPuid: string;
@@ -35,19 +35,20 @@ export class GermplasmCardComponent implements OnInit {
         // console.log(this.route);
         this.germplasmId = this.route.snapshot.queryParams.id;
         this.germplasmPuid = this.route.snapshot.queryParams.pui;
+
         const germplasm$ = this.getGermplasm(this.germplasmId, this.germplasmPuid);
         germplasm$.then(result => {
             const germplasmId = this.germplasmId ? this.germplasmId : result.germplasmDbId;
             const germplasmProgeny$ = this.brapiService.germplasmProgeny(germplasmId).toPromise();
             germplasmProgeny$
                 .then(germplasmProgeny => {
-                    this.germplasmProgeny = germplasmProgeny;
+                    this.germplasmProgeny = germplasmProgeny.result;
                 });
 
             const germplasmPedigree$ = this.brapiService.germplasmPedigree(germplasmId).toPromise();
             germplasmPedigree$
                 .then(germplasmPedigree => {
-                    this.germplasmPedigree = germplasmPedigree;
+                    this.germplasmPedigree = germplasmPedigree.result;
                 });
 
             const germplasmAttributes$ = this.brapiService.germplasmAttributes(germplasmId).toPromise();
@@ -85,22 +86,51 @@ export class GermplasmCardComponent implements OnInit {
         return germplasm$;
     }
 
+    // TODO: use a generic function to get path in object (or null if non-existent)
     testProgeny() {
         return (this.germplasmProgeny
-            && this.germplasmProgeny.result
-            && this.germplasmProgeny.result.progeny
-            && this.germplasmProgeny.result.progeny.length > 0);
+            && this.germplasmProgeny.progeny
+            && this.germplasmProgeny.progeny.length > 0);
     }
 
     testPedigree() {
         return (this.germplasmPedigree
-            && this.germplasmPedigree.result
-            && (this.germplasmPedigree.result.parent1Name
-                || this.germplasmPedigree.result.parent2Name
-                || this.germplasmPedigree.result.crossingPlan
-                || this.germplasmPedigree.result.crossingYear
-                || this.germplasmPedigree.result.familyCode)
+            && (this.germplasmPedigree.parent1Name
+                || this.germplasmPedigree.parent2Name
+                || this.germplasmPedigree.crossingPlan
+                || this.germplasmPedigree.crossingYear
+                || this.germplasmPedigree.familyCode)
+        );
+    }
+
+
+    testCollectorInstituteObject() {
+        return (
+            this.germplasmGnpis.collector
+            && this.germplasmGnpis.collector.institute
+            && this.germplasmGnpis.collector.institute.instituteName);
+    }
+
+    testCollectorInstituteFields() {
+        return (
+            this.germplasmGnpis.collector.germplasmPUI
+            || this.germplasmGnpis.collector.accessionNumber
+            || this.germplasmGnpis.collector.accessionCreationDate
+            || this.germplasmGnpis.collector.materialType
+            || this.germplasmGnpis.collector.collectors
+            || this.germplasmGnpis.collector.registrationYear
+            || this.germplasmGnpis.collector.deregistrationYear
+            || this.germplasmGnpis.collector.distributionStatus
         );
     }
+
+    testOrigin() {
+
+        return (this.germplasmGnpis.originSite && this.germplasmGnpis.originSite.siteName)
+            || (this.germplasmGnpis.donors && this.germplasmGnpis.donors.length > 0)
+            || ((this.testCollectorInstituteObject() || this.testCollectorInstituteFields())
+                || (this.germplasmGnpis.collectingSite && this.germplasmGnpis.collectingSite.siteName))
+            || (this.germplasmGnpis.breeder);
+    }
 }
 

frontend/src/app/gnpis.service.spec.ts

@@ -51,7 +51,7 @@ describe('GnpisService', () => {
         logo: null
     };
 
-    const brapiOrigin: Origin = {
+    const brapiOrigin: Origin = { ...brapiInstitute,
         institute: brapiInstitute,
         germplasmPUI: '12',
         accessionNumber: '12',
@@ -65,9 +65,10 @@ describe('GnpisService', () => {
 
     const brapiDonor: BrapiDonor = {
         donorInstitute: brapiInstitute,
-        germplasmPUI: '12',
-        accessionNumber: '12',
-        donorInstituteCode: 'urgi'
+        donorGermplasmPUI: '12',
+        donorAccessionNumber: '12',
+        donorInstituteCode: 'urgi',
+        donationDate: null
     };
 
     const brapiSet: BrapiSet = {

frontend/src/app/models/brapi.germplasm.model.ts

@@ -40,10 +40,11 @@ export interface BrapiGermplasmAttributes {
 }
 
 export interface BrapiDonor {
-    donorInstitute: Institute;
-    germplasmPUI: string;
-    accessionNumber: string;
+    donorGermplasmPUI: string;
+    donorAccessionNumber: string;
     donorInstituteCode: string;
+    donationDate: number;
+    donorInstitute: Institute;
 }
 
 export interface BrapiSet {

frontend/src/app/models/gnpis.germplasm.model.ts

@@ -18,7 +18,7 @@ export interface Germplasm {
     germplasmPUI: string;
     pedigree: string;
     seedSource: string;
-    synonyms: string;
+    synonyms: string[];
     commonCropName: string;
     instituteCode: string;
     instituteName: string;
@@ -39,7 +39,7 @@ export interface Germplasm {
     taxonCommonNames: string[];
     geneticNature: string;
     comment: string;
-    photo: string;
+    photo: Photo;
     holdingInstitute: Institute;
     holdingGenbank: Institute;
     presenceStatus: string;
@@ -56,7 +56,18 @@ export interface Germplasm {
     population: BrapiSet[];
 }
 
-export interface Origin {
+export interface Institute {
+    instituteName: string;
+    instituteCode: string;
+    acronym: string;
+    organisation: string;
+    instituteType: string;
+    webSite: string;
+    address: string;
+    logo: string;
+}
+
+export interface Origin extends Institute {
     institute: Institute;
     germplasmPUI: string;
     accessionNumber: string;
@@ -68,15 +79,13 @@ export interface Origin {
     distributionStatus: string;
 }
 
-export interface Institute {
-    instituteName: string;
-    instituteCode: string;
-    acronym: string;
-    organisation: string;
-    instituteType: string;
-    webSite: string;
-    address: string;
-    logo: string;
+export interface Photo {
+    copyright: string;
+    description: string;
+    fileName: string;
+    photoName: string;
+    thumbnailFileName: string;
+
 }
 
 export interface GermplasmData<T> {

frontend/src/app/study-card/study-card.component.scss

 @import "theme";
 @import '../../styles.scss';
 
-h3 {
-  font-weight: bold;
-  color: #0f6191;
-}
 

frontend/src/assets/gpds/theme.scss

@@ -26,7 +26,6 @@ $enable-shadows: true;
 
 // public custom variables used in this theme, and in component styles
 
-
 //custom tables
 .table {
   table-layout: fixed;

frontend/src/styles.scss

@@ -13,3 +13,23 @@ $fa-font-path: '~font-awesome/fonts';
 a {
   text-decoration: underline;
 }
+
+h3 {
+  font-weight: bold;
+  color: #0f6191;
+}
+.row-sep {
+  border-top: 1px solid #f0f0f0;
+}
+
+.content-overflow {
+  max-height: 175px;
+  overflow-y: auto;
+}
+
+.display-spinner-front {
+  position: absolute;
+  top: 70px;
+  left: 720px;
+  background-color: #F9F9F9;
+}

frontend/src/tslint.json

@@ -15,7 +15,7 @@
     ],
     "template-cyclomatic-complexity": [
       true,
-      260
+      11
     ]
   }
 }