Skip to content

Commit

Permalink
Merge pull request #456 from ncats/awb042_ctextrafields
Browse files Browse the repository at this point in the history 
WIP: CT outcome result notes and substance roles fields
  • Loading branch information
@narchana
narchana authored Sep 7, 2023
2 parents 267128e + d0846b6 commit f6fa6bc
Show file tree
Hide file tree
Showing 11 changed files with 319 additions and 289 deletions.
240 changes: 141 additions & 99 deletions src/app/fda/clinical-trials/clinical-trial-edit/clinical-trial-edit.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<div class="example-container mat-elevation-z8 clinical-trial-edit-page">

<div *ngIf="!clinicalTrial">
<p>Clinical Trial with not found for editing.</p>
<p>Clinical Trial with Trial Number supplied not found for editing.</p>
<p>Go to <a title="Go to browse" [routerLink]="['/browse-clinical-trials']">browse</a></p>
</div>

Expand All @@ -22,110 +21,153 @@
</span>
</div>

<h3>Substances in Clinical Trial <span *ngIf="clinicalTrial && clinicalTrial.clinicalTrialUSDrug"> ({{ clinicalTrial.clinicalTrialUSDrug.length}})</span></h3>
<div *ngIf="isAdmin">
<button mat-flat-button color="primary" matSuffix aria-label="Add" (click)="addRow();">Add</button>
<div *ngIf="isAdmin" class="full-width button-align-two">
<button mat-flat-button color="primary" matSuffix aria-label="Update Clinical Trial" (click)="updateClinicalTrial();">Update CT</button>
</div>

<mat-expansion-panel [expanded]="true">
<mat-expansion-panel-header>
<mat-panel-title>
<h3>Substances in Clinical Trial <span *ngIf="clinicalTrial && clinicalTrial.clinicalTrialUSDrug"> ({{ clinicalTrial.clinicalTrialUSDrug.length}})</span></h3>
</mat-panel-title>
</mat-expansion-panel-header>

<div *ngIf="isAdmin" class="full-width button-align-two">
<button mat-flat-button color="primary" matSuffix aria-label="Add" (click)="addRow();">Add Substance <mat-icon svgIcon="add_circle_outline"></mat-icon></button>
</div>


<mat-table #table [dataSource]="dataSource">
<!--
<ng-container matColumnDef="index">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Index</th>
<td mat-cell *matCellDef="let element; let i = index">{{i}}</td>
</ng-container>
-->
<!-- id -->
<ng-container matColumnDef="id" class='id-container'>
<mat-header-cell *matHeaderCellDef>ID</mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-form-field floatLabel="never">
<input disabled matInput placeholder="id" [value]="element.id" [(ngModel)]="element.id">
</mat-form-field>
</mat-cell>
</ng-container>
<!-- name -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
<mat-cell *matCellDef="let element; let i = index;" title="{{element.name}}">
<span *ngIf="!isAdmin">
{{element.name}}
</span>
<span *ngIf="isAdmin">
<app-mini-search [myIndex]="i" [myInitialSearch]="element && element.name" (miniSearchOutput)="reportMiniSearchOutput($event)"></app-mini-search>
</span>
</mat-cell>
</ng-container>
<!-- substanceKey -->
<ng-container matColumnDef="substanceKey">
<mat-header-cell *matHeaderCellDef>Substance Key</mat-header-cell>
<mat-cell *matCellDef="let element">
<span *ngIf="!isAdmin">
{{element.substanceKey}}
</span>
<span *ngIf="isAdmin">
<mat-table #table [dataSource]="dataSource">

<ng-container matColumnDef="id" class='id-container'>
<mat-header-cell *matHeaderCellDef>ID</mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-form-field floatLabel="never">
<input matInput placeholder="substanceKey" [value]="element.substanceKey" [(ngModel)]="element.substanceKey">
<input disabled matInput placeholder="id" [value]="element.id" [(ngModel)]="element.id">
</mat-form-field>
</span>
</mat-cell>
</ng-container>

<ng-container matColumnDef="protectedMatch">
<mat-header-cell *matHeaderCellDef> Protected Match </mat-header-cell>
<mat-cell *matCellDef="let element">
<span *ngIf="!isAdmin">
{{element.protectedMatch}}
</span>
<span>
<mat-checkbox class="protected-match-checkbox" [disabled]="!isAdmin" [value]="element.protectedMatch" [(ngModel)]="element.protectedMatch">
<label><mat-icon class="mat-icon material-icons protected-match-icon" role="img" aria-hidden="true">lock</mat-icon></label>
</mat-checkbox>
</span>
</mat-cell>
</ng-container>

<!-- orgSubstanceKey -->
<ng-container matColumnDef="orgSubstanceKey">
<mat-header-cell *matHeaderCellDef>Org. Substance Key</mat-header-cell>
<mat-cell *matCellDef="let element">
{{element.orgSubstanceKey}}
</mat-cell>
</ng-container>

<!-- link -->
<ng-container matColumnDef="link">
<mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *matCellDef="let element">
<a target="_blank" [routerLink]="['/substances', element.substanceKey]">link</a>
</mat-cell>
</ng-container>

<!-- delete -->
<ng-container matColumnDef="delete">
<mat-header-cell *matHeaderCellDef>Delete</mat-header-cell>
<mat-cell *matCellDef="let element; let i = index">
<button mat-flat-button color="primary" matSuffix aria-label="Del" (click)="removeRow(i);">Del</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

</mat-table>

<div *ngIf="isAdmin">
</mat-cell>
</ng-container>
<!-- name -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
<mat-cell *matCellDef="let element; let i = index;" title="{{element.name}}">
<span *ngIf="!isAdmin">
{{element.name}}
</span>
<span *ngIf="isAdmin">
<app-mini-search [myIndex]="i" [myInitialSearch]="element && element.name" (miniSearchOutput)="reportMiniSearchOutput($event)"></app-mini-search>
</span>
</mat-cell>
</ng-container>
<!-- substanceKey -->
<ng-container matColumnDef="substanceKey">
<mat-header-cell *matHeaderCellDef>Substance Key</mat-header-cell>
<mat-cell *matCellDef="let element">
<span *ngIf="!isAdmin">
{{element.substanceKey}}
</span>
<span *ngIf="isAdmin">
<mat-form-field floatLabel="never">
<input matInput placeholder="substanceKey" [value]="element.substanceKey" [(ngModel)]="element.substanceKey">
</mat-form-field>
</span>
</mat-cell>
</ng-container>

<ng-container matColumnDef="protectedMatch">
<mat-header-cell *matHeaderCellDef> Protected Match </mat-header-cell>
<mat-cell *matCellDef="let element">
<span *ngIf="!isAdmin">
{{element.protectedMatch}}
</span>
<span>
<mat-checkbox class="protected-match-checkbox" [disabled]="!isAdmin" [value]="element.protectedMatch" [(ngModel)]="element.protectedMatch">
<label><mat-icon class="mat-icon material-icons protected-match-icon" role="img" aria-hidden="true">lock</mat-icon></label>
</mat-checkbox>
</span>
</mat-cell>
</ng-container>

<ng-container matColumnDef="substanceRoles">
<mat-header-cell *matHeaderCellDef> Roles </mat-header-cell>
<mat-cell *matCellDef="let element, let i = index">
<app-clinical-trial-edit-substance-roles [tableRowIndex]="i" [disabled]="!isAdmin" [initialSubstanceRoles]="element.substanceRoles"
(substanceRolesEventOutput)="reportSubstanceRolesOutput($event)"
></app-clinical-trial-edit-substance-roles>
</mat-cell>
</ng-container>

</div>
<!-- orgSubstanceKey -->
<ng-container matColumnDef="orgSubstanceKey">
<mat-header-cell *matHeaderCellDef>Org. Substance Key</mat-header-cell>
<mat-cell *matCellDef="let element">
{{element.orgSubstanceKey}}
</mat-cell>
</ng-container>

<!-- link -->
<ng-container matColumnDef="link">
<mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *matCellDef="let element">
<a target="_blank" [routerLink]="['/substances', element.substanceKey]" title="Open substance details in new page">
<mat-icon matListIcon svgIcon="open_in_new" class = "middle-button"></mat-icon>
</a>
</mat-cell>
</ng-container>

<!-- delete -->
<ng-container matColumnDef="delete">
<mat-header-cell *matHeaderCellDef>Delete</mat-header-cell>
<mat-cell *matCellDef="let element; let i = index">
<button mat-flat-button color="primary" matSuffix aria-label="Del" (click)="removeRow(i);">Del</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

</mat-table>
</mat-expansion-panel>

<div class="full-width">&nbsp;</div>

<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
<h3>Outcome Result Notes</h3>
</mat-panel-title>
</mat-expansion-panel-header>
<div class="button-align-two">
<button *ngIf="isAdmin" mat-flat-button color="primary" aria-label="Add Note"
(click)="addOutcomeResultNote();">Add Note <mat-icon svgIcon="add_circle_outline"></mat-icon></button>
</div>
<div *ngIf="clinicalTrial.outcomeResultNotes">
<div>&nbsp;</div>
<div class="outcome-result-note" *ngFor="let outcomeResultNote of clinicalTrial.outcomeResultNotes, let i = index">
<div class="note-index">Note: {{i+1}}</div>
<div *ngIf="isAdmin" class="button-align-two">
<button mat-flat-button color="primary" matSuffix aria-label="Remove Note" (click)="removeOutcomeResultNote(i);">Del</button>
</div>
<app-clinical-trial-edit-outcome-result-note [disabled]="!isAdmin" [index]=i [outcomeResultNote]="outcomeResultNote"></app-clinical-trial-edit-outcome-result-note>
</div>
<div class="full-width">&nbsp;</div>

</div>
</mat-expansion-panel>

<div class="full-width">&nbsp;</div>

<mat-expansion-panel [expanded]="true">
<mat-expansion-panel-header>
<mat-panel-title>
<div class="trial-detailsheader">
<span class="emphasize">Trial Details</span>&nbsp;
<span *ngIf="clinicalTrial.trialNumber"><a target="_blank" title="see on clinicaltrials.gov" [href]="'https://clinicaltrials.gov/ct2/show/' + clinicalTrial.trialNumber">{{clinicalTrial.trialNumber}}</a></span>&nbsp;
<span *ngIf="clinicalTrial.trialNumber"><a target="_blank" title="see XML on clinicaltrials.gov" [href]="'https://clinicaltrials.gov/ct2/show/' + clinicalTrial.trialNumber + '?displayxml=true'">XML</a></span>&nbsp;
<span *ngIf="clinicalTrial.trialNumber"><a target="_blank" title="see history on clinicaltrials.gov" [href]="'https://clinicaltrials.gov/ct2/history/' + clinicalTrial.trialNumber">History</a></span>&nbsp;
</div>
</mat-panel-title>
</mat-expansion-panel-header>

<div class="trial-detailsheader">
<span class="emphasize">Trial Details</span>&nbsp;
<span *ngIf="clinicalTrial.trialNumber"><a target="_blank" title="see clinicaltrials.gov" [href]="'https://clinicaltrials.gov/ct2/show/' + clinicalTrial.trialNumber">{{clinicalTrial.trialNumber}}</a></span>&nbsp;
<span *ngIf="clinicalTrial.trialNumber"><a target="_blank" title="see XML from clinicaltrials.gov" [href]="'https://clinicaltrials.gov/ct2/show/' + clinicalTrial.trialNumber + '?displayxml=true'">XML</a></span>&nbsp;
<span *ngIf="clinicalTrial.trialNumber"><a target="_blank" title="see history on clinicaltrials.gov" [href]="'https://clinicaltrials.gov/ct2/history/' + clinicalTrial.trialNumber">History</a></span>&nbsp;
</div>

<div class="container">
<div class="trial-detailsone">
Expand Down Expand Up @@ -201,9 +243,9 @@ <h3>Substances in Clinical Trial <span *ngIf="clinicalTrial && clinicalTrial.cli
<p *ngIf="clinicalTrial.completionDate">Study Completion Date: {{clinicalTrial.completionDate|date : "MM/dd/yyyy" : "UTC"}}</p>
</div>
</div>
</mat-expansion-panel>

<div><p>Go to <a title="Go to browse" [routerLink]="['/browse-clinical-trials']">browse</a></p></div>

<div><p>Go to <a title="Go to browse" [routerLink]="['/browse-clinical-trials']">browse</a></p></div>

<div *ngIf="isTesting">
<div class="top-spacer">isAdmin: {{isAdmin}}</div>
Expand All @@ -224,4 +266,4 @@ <h3>Substances in Clinical Trial <span *ngIf="clinicalTrial && clinicalTrial.cli
<div>miniSearchOutputReported: {{miniSearchOutputReported}}</div>
</div>
</div>
</div>
</div>
20 changes: 18 additions & 2 deletions src/app/fda/clinical-trials/clinical-trial-edit/clinical-trial-edit.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,7 @@
}

.trial-detailsheader {
margin-top: 2em;
margin-bottom: 1em;
font-size: 18px;
}

.trial-detailsone {
Expand Down Expand Up @@ -101,3 +100,20 @@
.copy-button {
padding: .2em;
}

.note-index {
font-weight: bold;
}
.full-width {
width: 100%;
}

.outcome-result-note {
border: 1px solid var(--box-shadow-color-3);
padding: 10px;
margin-top: 10px;
}

.button-align-two {
text-align: right;
}
Loading

0 comments on commit f6fa6bc

Please sign in to comment.