Commit b851acde authored by rajkumar's avatar rajkumar
Browse files

New Webin Portal changes :

1) Adding UI for study registration.
parent d1e2c6a2
.body{
padding:10px 20px 10px 10px;
}
.container{
padding: 10px 0px 0px 0px;
}
.column {
float: left;
width: 50%;
}
mat-form-field {
width: 100%;
}
mat-card{
margin:10px;
}
mat-form-field.mat-form-field {
font-size: 14px;
font-family: Roboto;
}
mat-icon{
cursor: pointer;
}
.mat-row:nth-child(even){
background-color:#f8f8f8;
}
.mat-header-cell{
font-weight: bold;
font-size: 14px;
color: #000000c7;
justify-content:center;
}
.back-div{
float: left;
padding-top: 2px;
cursor: pointer;
}
\ No newline at end of file
<div class="body">
<div>
<div class="back-div" ><mat-icon matTooltip="Back" routerLink="">arrow_back_ios</mat-icon></div>
<div class="mat-h3 mat-tittle">Register study (project)</div>
</div>
<mat-divider></mat-divider>
<form (ngSubmit)="submitStudy(f)" #f="ngForm">
<div class="container">
<mat-card>
<mat-card-subtitle>Submission Details</mat-card-subtitle>
<div class="row">
<div class="column">
<mat-form-field class="app-field-padding" *ngIf="action==='Edit'">
<input matInput placeholder="Project Id" required [(ngModel)]="id" name="id" readonly>
</mat-form-field>
<mat-form-field appearance="fill" >
<mat-label>Release date [ This is when your study will be made public. ] </mat-label>
<input matInput [matDatepicker]="picker" required [(ngModel)]="releaseDate" [min]="today" [max]="maxDate" name="releaseDate">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-form-field class="app-field-padding">
<input matInput placeholder="Study Name" [(ngModel)]="studyName" name="studyName">
</mat-form-field>
<!-- <mat-checkbox matInput name="provideGenomeAnnotation" [(ngModel)]="provideGenomeAnnotation" >Will you provide functional genome annotation</mat-checkbox> -->
</div>
<div class="column" *ngIf="!editMode">
<mat-form-field class="app-field-padding">
<input matInput placeholder="Short descriptive study title" required [(ngModel)]="studyTitle" name="studyTitle">
</mat-form-field>
<mat-form-field class="app-field-padding">
<input matInput placeholder="Detailed study abstract" required [(ngModel)]="description" name="description">
</mat-form-field>
</div>
</div>
</mat-card>
<mat-card class="mat-body">
<mat-card-subtitle>PubMed Registration</mat-card-subtitle>
<a (click)="addPubMed()">Add PubMed <mat-icon>add_circle</mat-icon></a>
<div *ngIf="showPubMedSearch">
<mat-form-field class="app-field-padding">
<input matInput placeholder="Search PubMedId" [matAutocomplete]="auto" name="pubMedSearch" #pubMedSearchVal="ngModel" [(ngModel)]="pubMedSearch" (ngModelChange)="getPubMed(pubMedSearch)">
</mat-form-field>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selectedPubMed($event)" [displayWith]="getPubMedDisplayText">
<mat-option *ngFor="let pubMed of pubMedArray" [value]="pubMed">
{{pubMed.id}} [ {{pubMed.title}} ]
</mat-option>
</mat-autocomplete>
</div>
<table mat-table *ngIf="dataSource" #table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef> PubMedId </th>
<td mat-cell *matCellDef="let element"> {{element.id}} </td>
</ng-container>
<ng-container matColumnDef="title">
<th mat-header-cell *matHeaderCellDef> Title </th>
<td mat-cell *matCellDef="let element"> {{element.title}} </td>
</ng-container>
<ng-container matColumnDef="remove">
<th mat-header-cell *matHeaderCellDef> Remove </th>
<td mat-cell *matCellDef="let element">
<mat-icon (click)="removePubMed(element)">delete</mat-icon>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-error *ngIf="mainContact <= 0 ">
Please enter atlease one primary contact to save the account.
</mat-error>
</mat-card>
</div>
<div style="text-align:Center">
<button mat-raised-button color="accent" [disabled]="f.invalid || mainContact <= 0">Save</button>
<button mat-raised-button style="margin-left: 5px;" routerLink="">Cancel</button>
</div>
</form>
</div>
\ No newline at end of file
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { StudyManagementComponent } from './study-management.component';
import { MatInputModule,MatFormFieldModule , MatIconModule, MatDividerModule,MatCardSubtitle, MatFormField,MatLabel,MatDatepickerModule, MatCardModule,MatAutocompleteModule, MatTableModule, MatError } from '@angular/material'
import {FormControl, FormGroupDirective, NgForm, Validators, FormGroup, FormBuilder, FormsModule} from '@angular/forms';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot, ActivatedRoute } from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {ObserversModule} from '@angular/cdk/observers';
import { HttpClientModule } from '@angular/common/http';
import { WebinAuthenticationService } from '../webin-authentication.service';
import { WebinRestService } from '../webin-rest.service';
describe('StudyManagementComponent', () => {
let component: StudyManagementComponent;
let fixture: ComponentFixture<StudyManagementComponent>;
const fakeActivatedRoute = {
snapshot: { params: {"id":123 } }
} ;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [BrowserAnimationsModule, MatInputModule,MatFormFieldModule , HttpClientModule ,ObserversModule, FormsModule, MatIconModule, MatDividerModule,MatDatepickerModule, MatCardModule, MatAutocompleteModule ,MatTableModule],
declarations: [ StudyManagementComponent ],
providers:[WebinAuthenticationService,WebinRestService,
{provide: ActivatedRoute, useValue: fakeActivatedRoute},]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(StudyManagementComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import { UtilService } from '../util/Util-services'
import { XmlService } from '../util/xml.service'
import { MatTableDataSource, MAT_DATE_LOCALE } from '@angular/material';
import { Observable } from 'rxjs'
import { retry } from 'rxjs/operators';
import {DateAdapter, MAT_DATE_FORMATS} from '@angular/material';
import {MomentDateAdapter} from '@angular/material-moment-adapter';
import * as _moment from 'moment';
import { ActivatedRoute } from '@angular/router';
const moment = _moment;
export const CUSTOM_FORMATS = {
parse: {
dateInput: 'LL',
},
display: {
dateInput: 'DD-MM-YYYY',
monthYearLabel: 'YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'YYYY',
},
};
@Component({
selector: 'app-study-management',
templateUrl: './study-management.component.html',
styleUrls: ['./study-management.component.css'],
providers: [
{provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
{provide: MAT_DATE_FORMATS, useValue: CUSTOM_FORMATS},
]
})
export class StudyManagementComponent implements OnInit {
/*Page fields*/
releaseDate:any;
studyName: string;
studyTitle: string;
description:string;
releaseStatus: string;
xmlString: string;
pubMedArray: [];
selectedPubMedArray= [];
dataSource: MatTableDataSource<any>;
displayedColumns: string[] = ['id', 'title','remove'];
showPubMedSearch = false;
pubMedSearch="";
today=new Date();
maxDate: any;
id: any;
action: string;
constructor(private util: UtilService,private xmlUtil: XmlService,private activatedRoute: ActivatedRoute,) {
var date=new Date();
this.maxDate = new Date(date.getFullYear() + 2, date.getMonth(),date.getDate());
}
ngOnInit() {
this.id=this.activatedRoute.snapshot.params.id;
if(this.id){
this.action="Edit";
this.initEdit(this.id);
}
}
async getPubMed(searchVal){
(await this.util.getPubMed(searchVal)).
subscribe((data:any) => {
this.pubMedArray=data.resultList.result;
});
}
async showExistingPubMed(id){
(await this.util.getPubMedById(id)).
subscribe((data:any) => {
if(data.resultList.result.length>0){
this.selectedPubMedArray.push(data.resultList.result[0]);
this.dataSource = new MatTableDataSource<any>(this.selectedPubMedArray);
}else{
console.log("Invalid PubMed Id :'"+id+"' is ignored.")
}
});
}
getPubMedDisplayText(option){
if(option){
return option.id + " [ "+option.title+" ]";
}
}
selectedPubMed(event) {
this.selectedPubMedArray.push(event.option.value);
this.dataSource = new MatTableDataSource<any>(this.selectedPubMedArray);
this.pubMedSearch="";
this.showPubMedSearch=false;
}
addPubMed(){
this.showPubMedSearch=true;
}
removePubMed(pubMedObj){
var index = this.selectedPubMedArray.map(function(item) { return item.id; }).indexOf(pubMedObj.id);
this.selectedPubMedArray.splice(index, 1);
this.dataSource = new MatTableDataSource<any>(this.selectedPubMedArray);
}
submitStudy(form){
if(this.action!="Edit"){
this.xmlUtil.generateStudyXml(form.value,this.selectedPubMedArray);
}else{
this.xmlUtil.updateProjectXml(this.xmlString,form.value,this.selectedPubMedArray);
}
}
async initEdit(id){
(await this.util.getProjectDetails(id)).
subscribe((data:any) => {
this.setPageValuesfromReport(data[0].report);
});
(await this.util.getProjectXml(id)).
subscribe((xmlString:any) => {
this.xmlString=xmlString;
this.setPageValuesfromXml();
});
}
setPageValuesfromReport(data){
this.releaseDate=new Date(data["holdDate"]);
this.releaseStatus=data["releaseStatus"];
}
setPageValuesfromXml(){
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(this.xmlString, "text/xml");
var nameTag=xmlDoc.getElementsByTagName("NAME")[0];
var titleTag=xmlDoc.getElementsByTagName("TITLE")[0];
var descriptionTag=xmlDoc.getElementsByTagName("DESCRIPTION")[0];
this.studyName=nameTag.hasChildNodes() ? nameTag.childNodes[0].nodeValue : "";
this.studyTitle=titleTag.hasChildNodes() ? titleTag.childNodes[0].nodeValue : "";
this.description=descriptionTag.hasChildNodes() ? descriptionTag.childNodes[0].nodeValue : "";
this.setPubMedDetails(xmlDoc);
}
setPubMedDetails(xmlDoc){
var projectLinks=xmlDoc.getElementsByTagName("PROJECT_LINKS").childNodes;
projectLinks = xmlDoc.getElementsByTagName("PROJECT_LINKS")[0];
if(projectLinks){
var xRefLink=projectLinks.getElementsByTagName("XREF_LINK");
length=xRefLink.length
for(var i=0;i<length;i++){
var dbTagValue=xRefLink[i].getElementsByTagName("DB")[0].childNodes[0].nodeValue;
if(dbTagValue==="PUBMED"){
var pupMedId=xRefLink[i].getElementsByTagName("ID")[0].childNodes[0].nodeValue;
this.showExistingPubMed(pupMedId);
}
}
}
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment