study-management.component.html 8.46 KB
Newer Older
rajkumar's avatar
rajkumar committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
<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>     
rajkumar's avatar
rajkumar committed
26
            <mat-checkbox matInput name="provideGenomeAnnotation" (click)="setGenomeAnotation($event)" [(ngModel)]="provideGenomeAnnotation" >Will you provide functional genome annotation</mat-checkbox>
rajkumar's avatar
rajkumar committed
27 28 29 30 31 32
          </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">
rajkumar's avatar
rajkumar committed
33
                <textarea rows="6" matInput placeholder="Detailed study abstract" required [(ngModel)]="description" name="description"></textarea>
rajkumar's avatar
rajkumar committed
34 35 36 37 38
            </mat-form-field>
          </div>
          
        </div>
    </mat-card>
rajkumar's avatar
rajkumar committed
39 40


rajkumar's avatar
rajkumar committed
41
  <!-- #################### P U B M E D    R E G I S T R A T I O N #################### -->
rajkumar's avatar
rajkumar committed
42

rajkumar's avatar
rajkumar committed
43
    <mat-card class="mat-body">
44 45
      <mat-card-subtitle>PubMed Citations Registration</mat-card-subtitle>
      <a (click)="addPubMed()">Add PubMed Citations <mat-icon>add_circle</mat-icon></a>
rajkumar's avatar
rajkumar committed
46
      <div *ngIf="showPubMedSearch" >
rajkumar's avatar
rajkumar committed
47 48 49 50 51 52 53 54 55
        <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>  
rajkumar's avatar
rajkumar committed
56 57 58
      <mat-error *ngIf="showDuplicatePubMedErr">
        Selected PubMed Citations is already added.
      </mat-error>
rajkumar's avatar
rajkumar committed
59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
       <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>
rajkumar's avatar
rajkumar committed
81 82 83 84 85 86
    </mat-card>

    
<!-- ####################   A T T R I B U T E   R G I S T R A T I O N  #################### -->

    <mat-card class="mat-body">
87 88
      <mat-card-subtitle>Study Attributes</mat-card-subtitle>
      <a (click)="showAttributeAddPanel()">Add Study Attributes <mat-icon>add_circle</mat-icon></a>
rajkumar's avatar
rajkumar committed
89 90 91 92
      <div *ngIf="showAttributeAdd">
        <div class="row">
          <div class="column3">
            <mat-form-field  class="app-field-padding">
rajkumar's avatar
rajkumar committed
93
                <input matInput  placeholder="Tag" name="tag"  [(ngModel)]="tag"> 
rajkumar's avatar
rajkumar committed
94 95 96 97
            </mat-form-field>
          </div>
          <div class="column3">
            <mat-form-field  class="app-field-padding">
rajkumar's avatar
rajkumar committed
98
              <input matInput  placeholder="Value" name="tagValue" [(ngModel)]="tagValue">
rajkumar's avatar
rajkumar committed
99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132
            </mat-form-field>
          </div>
          <div class="column3">
          <button mat-raised-button color="primary" [disabled]="!tag || !tagValue" (click)="addAttribute()">Add</button>
        </div>
      </div>
      </div>  
       <table mat-table *ngIf="attributeDataSource" #table [dataSource]="attributeDataSource" class="mat-elevation-z8">
  
        <ng-container matColumnDef="tag">
          <th mat-header-cell *matHeaderCellDef> Tag </th>
          <td mat-cell *matCellDef="let element"> {{element.tag}} </td>
        </ng-container>
  
        <ng-container matColumnDef="tagValue">
          <th mat-header-cell *matHeaderCellDef> Value </th>
          <td mat-cell *matCellDef="let element"> {{element.tagValue}} </td>
        </ng-container>
          
        <ng-container matColumnDef="remove">
          <th mat-header-cell *matHeaderCellDef> Remove </th>
          <td mat-cell *matCellDef="let element"> 
            <mat-icon (click)="removeAttribute(element)">delete</mat-icon>
          </td>
        </ng-container>
  
        <tr mat-header-row *matHeaderRowDef="attributeDisplayColumn"></tr>
        <tr mat-row *matRowDef="let row; columns: attributeDisplayColumn;"></tr>
      </table>
    </mat-card>


    <!-- ####################   L O C U S - T A G   R G I S T R A T I O N  #################### -->

133
    <mat-card class="mat-body"  *ngIf="provideGenomeAnnotation && !isProductionEnv">
134 135 136
      <mat-card-subtitle>Locus Tag Prefix Registration</mat-card-subtitle>
      <mat-body>Locus Tag Prefix registration is disabled in non production environment.</mat-body>
    </mat-card>
137
  <mat-card class="mat-body"  *ngIf="provideGenomeAnnotation && isProductionEnv">
138 139
      <mat-card-subtitle>Locus Tag Prefix Registration</mat-card-subtitle>
      <a (click)="showLocusTagAddPanel()">Add Locus Tag Prefixes<mat-icon>add_circle</mat-icon></a>
rajkumar's avatar
rajkumar committed
140 141 142 143
      <div *ngIf="showLocusTagAdd">
        <div class="row">
          <div class="column">
            <mat-form-field  class="app-field-padding">
rajkumar's avatar
rajkumar committed
144
                <input matInput  placeholder="Locus Tag" name="locustag"  [(ngModel)]="locustag"> 
rajkumar's avatar
rajkumar committed
145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169
            </mat-form-field>
          </div>
          
          <div class="column">
          <button mat-raised-button color="primary" [disabled]="!locustag" (click)="addlocusTag()">Add</button>
        </div>
      </div>
      </div>  
       <table mat-table *ngIf="locusTagDataSource" #table [dataSource]="locusTagDataSource" class="mat-elevation-z8">
  
        <ng-container matColumnDef="locusTag">
          <th mat-header-cell *matHeaderCellDef> Locus Tag </th>
          <td mat-cell *matCellDef="let element"> {{element.locusTag}} </td>
        </ng-container>
          
        <ng-container matColumnDef="remove">
          <th mat-header-cell *matHeaderCellDef> Remove </th>
          <td mat-cell *matCellDef="let element"> 
            <mat-icon (click)="removeLocusTag(element)">delete</mat-icon>
          </td>
        </ng-container>
  
        <tr mat-header-row *matHeaderRowDef="locusTagDisplayColumn"></tr>
        <tr mat-row *matRowDef="let row; columns: locusTagDisplayColumn;"></tr>
      </table>
rajkumar's avatar
rajkumar committed
170 171
    </mat-card>
   </div>
rajkumar's avatar
rajkumar committed
172
   
rajkumar's avatar
rajkumar committed
173
  
rajkumar's avatar
rajkumar committed
174 175 176 177
   <div class="centred" *ngIf="showLoadingFlag" style="height:70px;">
    <mat-spinner [diameter]="50" [strokeWidth]="5" style="margin:0 auto;">
    </mat-spinner>
  </div>
rajkumar's avatar
rajkumar committed
178 179 180
  
   <div style="text-align:Center">
    <button mat-raised-button color="accent" [disabled]="f.invalid || mainContact <= 0">Save</button>
rajkumar's avatar
rajkumar committed
181 182
    <button *ngIf="action==='Edit'" mat-raised-button style="margin-left: 5px;" routerLink="/report/studies">Cancel</button>
    <button *ngIf="action!='Edit'" mat-raised-button style="margin-left: 5px;" routerLink="">Cancel</button>
rajkumar's avatar
rajkumar committed
183 184 185 186
  </div>
  </form>  
  </div>