Commit 67b7fb60 authored by Rajkumar-D's avatar Rajkumar-D
Browse files

Updating new UI for read submission.

parent df7318d0
Pipeline #278414 failed with stages
in 3 minutes and 15 seconds
......@@ -13,11 +13,12 @@
<br>
<div style="text-align:center" *ngIf="action==='Success'">
<button type="button" mat-raised-button style="margin-left: 5px;" (click)="closePopup()" routerLink="">Ok</button>
<button type="button" mat-raised-button color="primary" style="margin-left: 5px;" (click)="closePopup()"
routerLink="">Ok</button>
</div>
<div style="text-align:center" *ngIf="action==='SuccessAndClose'">
<button type="button" mat-raised-button style="margin-left: 5px;" (click)="closePopup()">Ok</button>
<button type="button" mat-raised-button color="primary" style="margin-left: 5px;" (click)="closePopup()">Ok</button>
</div>
<div style="text-align:center" *ngIf="action==='Error'">
......
......@@ -40,4 +40,80 @@
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
.checklist-restriction {
color: black;
background-color: #f5f5f5;
}
/* Checklist field selection checkbox always green and text always black. */
.checklist-checked-field {
color: black;
}
.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: #38983e !important;
}
.table {
background: white;
}
.mat-row:nth-child(even) {
background-color: #f8f8f8;
}
.mat-header-cell{
font-weight: bold;
font-size: 14px;
color: #000000c7;
}
.mat-option-text {
overflow: auto !important;
text-overflow: unset !important;
}
.addIcon{
font-size: 34px;
padding-top: 0px;
vertical-align: middle;
cursor: pointer;
}
.searchSpan{
float: right;
margin-right: 10px;
}
.w-5{
width: 5%;
}
.w-10{
width: 10%;
}
.w-20{
width: 20%;
}
.w-30{
width: 30%;
}
.w-70{
width: 70%;
}
mat-select{
width: 50% !important;
}
.tableOperations{
display: inline-block;
width: 100%;
}
\ No newline at end of file
......@@ -28,18 +28,12 @@
</mat-expansion-panel-header>
<mat-horizontal-stepper #stepper>
<!--<mat-step label="Please select a study">
<app-report (selectedRecord)="getSelectedStudy($event,stepper)" [reportType]="reportType"
[embDefaultSearch]="true" [embeded]="true"></app-report>
<div>
<button mat-button matStepperNext [disabled]="!this.selectedStudy">Next</button>
</div>
</mat-step>-->
<mat-step label="Please select a file format">
<div class="mat-elevation-z8">
<mat-accordion>
<mat-expansion-panel *ngFor="let fieldType of readFileDetails['fieldTypes']"
(click)="selectFileType(fieldType.file_type,fieldType.name)">
(click)="selectFileType(fieldType.file_type,fieldType.name,stepper)">
<mat-expansion-panel-header>
<mat-panel-title>
<b>{{fieldType.label}} </b> <span fxHide fxShow.gt-sm
......@@ -47,44 +41,6 @@
</mat-panel-title>
</mat-expansion-panel-header>
<div *ngIf="fieldType.name=='PacBio_HDFS'">
<p class="mat-body">A PacBio experiment output consists of a metadata.xml, bas.h5
and bax.h5 files. These files should be submitted using a 'manifest.all' file
that lists these files for a given run. The recommended way to create the
manifest file is to use the linux md5sum command. The manifest file must have
two columns, the first containing file md5 checksum and the second the file
name.</p>
<p class="mat-body">For example, the 'manifest.all' file may look like:
<p class="mat-body">0ddf706a5962b55fc85c524c4150231d metadata.xml</p>
<p class="mat-body">d45f37b3567dfac6b33a1e150e6c5a68 a.bas.h5</p>
<p class="mat-body">12d4309a2b7c71500194261acbc00c62 a.bax.h5</p>
<p class="mat-body">The 'manifest.all' file should be submitted to the archive on
behalf of the files listed within.</p>
</div>
<div *ngFor="let field of fieldType.fields">
<div *ngIf="displayEgaField(field)">
<mat-checkbox class="checklist-checked-field"
[checked]="field.mandatory || field.checked" [disabled]="field.mandatory"
(change)="selectedField($event,field)"> <b
class="checklist-checked-field">{{field.label}}</b></mat-checkbox>
<p fxHide fxShow.gt-sm>{{field.description}}</p>
<div style="width:20%">
<p *ngIf="field.value_choice !=null">
<mat-select class="checklist-restriction"
placeholder="Permitted values">
<mat-option *ngFor="let PermitedValues of field.value_choice"
[value]="PermitedValues" [disabled]="true">
{{ PermitedValues }}
</mat-option>
</mat-select>
</p>
</div>
</div>
</div>
</mat-expansion-panel>
</mat-accordion>
......@@ -94,6 +50,106 @@
<button mat-button matStepperNext [disabled]="!this.selectedFieldType">Next</button>
</div>
</mat-step>
<mat-step label="Please select fields">
<p>
You have selected <b>{{ selectedFieldType |titlecase }} File Type</b>. Please select the
checklist
fields below.
</p>
<mat-card class="mat-body">
<div *ngIf="selectedFieldType=='PacBio_HDF5'" style='padding:15px'>
<p class="mat-body">A PacBio experiment output consists of a metadata.xml, bas.h5
and bax.h5 files. These files should be submitted using a 'manifest.all' file
that lists these files for a given run. The recommended way to create the
manifest file is to use the linux md5sum command. The manifest file must have
two columns, the first containing file md5 checksum and the second the file
name.</p>
<p class="mat-body">For example, the 'manifest.all' file may look like:
<p class="mat-body">0ddf706a5962b55fc85c524c4150231d metadata.xml</p>
<p class="mat-body">d45f37b3567dfac6b33a1e150e6c5a68 a.bas.h5</p>
<p class="mat-body">12d4309a2b7c71500194261acbc00c62 a.bax.h5</p>
<p class="mat-body">The 'manifest.all' file should be submitted to the archive on
behalf of the files listed within.</p>
</div>
<div class="tableOperations">
<!-- To be removed if custom field is not needed.-->
<!--<form #cf="ngForm">
<mat-form-field class="app-field-padding">
<input matInput placeholder="Add custom field" [(ngModel)]="customField"
pattern="^[A-Za-z0-9_-]*$" name="customField" #customText />
<mat-error *ngIf="cf.controls['customField']?.errors">
Alphanumeric charecters with _ and - are allowed.
</mat-error>
</mat-form-field>
<mat-icon class=" app-primary-color addIcon" [disabled]="cf.invalid"
(click)="addCustomField(customField,customText,accordion,cf)">add_box
</mat-icon>-->
<span style=" float: left;margin: 20px;">
Show Description <mat-checkbox matInput [(ngModel)]="isChecked"
(change)="addDescription(isChecked)" style="padding-left: 20px" name="showDesc">
</mat-checkbox>
</span>
<span class="searchSpan">
<mat-form-field class="app-field-padding">
<input matInput type="filter" [(ngModel)]="filter" placeholder="Search fields"
(keyup)="applyFilter($event.target.value,accordion)" name="filter" />
</mat-form-field>
<mat-icon class=" app-primary-color addIcon" (click)="applyFilter(filter)">
pageview
</mat-icon>
</span>
<!--</form>-->
</div>
<!-- Field accordions -->
<mat-accordion [multi]="false" #accordion="matAccordion">
<!-- Mandatory fields-->
<mat-expansion-panel #firstPanel
*ngIf="mandatoryFieldDatasource && mandatoryFieldDatasource.data.length > 0"
(opened)=" panelOpenState=true" (closed)="panelOpenState = false"
class="mat-body mat-expansion-panel-spacing" [expanded]="true">
<mat-expansion-panel-header>
<mat-panel-title>
<b>Mandatory Fields</b>
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template [ngTemplateOutlet]="checklistFieldsTable"
[ngTemplateOutletContext]="{datasource:mandatoryFieldDatasource}">
</ng-template>
</mat-expansion-panel>
<!-- Optional fields-->
<mat-expansion-panel
*ngIf="optionalFieldDatasource && optionalFieldDatasource.data.length > 0"
(opened)=" panelOpenState=true" (closed)="panelOpenState = false"
class="mat-body mat-expansion-panel-spacing">
<mat-expansion-panel-header>
<mat-panel-title>
<b>Optional Fields</b>
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template [ngTemplateOutlet]="checklistFieldsTable"
[ngTemplateOutletContext]="{datasource:optionalFieldDatasource}">
</ng-template>
</mat-expansion-panel>
</mat-accordion>
<div style="margin-top: 15px;">
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext [disabled]="!this.selectedFieldType">Next</button>
</div>
</mat-card>
</mat-step>
<mat-step label="Download spreadsheet template">
<p>
Please download the spreadsheet template containing the fields you have selected by using the
......@@ -131,4 +187,73 @@
</mat-expansion-panel>
</div>
</div>
\ No newline at end of file
</div>
<!-- Template for displaying checklist-->
<ng-template #checklistFieldsTable let-datasource="datasource">
<table mat-table class="mat-body" *ngIf="datasource" #table [dataSource]="datasource" class="mat-elevation-z8"
multiTemplateDataRows>
<ng-container matColumnDef="selection">
<th mat-header-cell *matHeaderCellDef class="w-5">Selection</th>
<td mat-cell *matCellDef="let element">
<mat-checkbox *ngIf="element.mandatory==true" matInput [checked]="true" disabled
style="padding-left: 20px"></mat-checkbox>
<mat-checkbox *ngIf="element.mandatory!=true" matInput [checked]="false"
(change)="selectedField($event,element)" style="padding-left: 20px">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="fieldName">
<th mat-header-cell *matHeaderCellDef class="w-10">Field Name</th>
<td mat-cell *matCellDef="let element">{{ element.name }}
</td>
</ng-container>
<ng-container matColumnDef="fieldLabel">
<th mat-header-cell *matHeaderCellDef class="w-10">Field Label</th>
<td mat-cell *matCellDef="let element">{{ element.label }}
</td>
</ng-container>
<ng-container matColumnDef="permittedValue">
<th mat-header-cell *matHeaderCellDef class="w-20">Permitted Value</th>
<td mat-cell *matCellDef="let element">
<mat-select class="w-30" *ngIf="element.value_choice" class="checklist-restriction"
placeholder="Permitted values">
<mat-option *ngFor="let value_choice of element.value_choice" [value]="value_choice" disabled>
{{ value_choice }}
</mat-option>
</mat-select>
</td>
</ng-container>
<ng-container matColumnDef="units">
<th mat-header-cell *matHeaderCellDef class="w-5">Units</th>
<td mat-cell *matCellDef="let element">
<p *ngIf="element.units && element.units.length > 0">
{{ element.units }}
</p>
<p *ngIf="!element.units || element.units.length <= 0">
None
</p>
</td>
</ng-container>
<ng-container *ngIf="showDescription" matColumnDef="description">
<th mat-header-cell *matHeaderCellDef class="w-30">Description</th>
<td mat-cell *matCellDef="let element">{{ element.description }}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="fieldsDisplayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: fieldsDisplayedColumns; when: isVisible"></tr>
</table>
</ng-template>
\ No newline at end of file
......@@ -4,7 +4,7 @@ import { WebinReportService } from '../webin-report.service';
import { ChecklistComponent } from '../checklist/checklist.component';
import { UtilService } from '../util/Util-services'
import { retry, mergeMap } from 'rxjs/operators';
import { MatStepper, MatDialog } from '@angular/material';
import { MatStepper, MatDialog, MatTableDataSource } from '@angular/material';
import { WebinRestService } from '../webin-rest.service';
import { Observable } from 'rxjs';
import { HttpErrorResponse } from '@angular/common/http';
......@@ -24,11 +24,23 @@ export class ReadSubmissionComponent implements OnInit {
selectedStudy: string;
readFileDetails = {};
selectedFieldsArray = [];
selectedFieldDatasource: MatTableDataSource<any>;
mandatoryFieldDatasource: MatTableDataSource<any>;
optionalFieldDatasource: MatTableDataSource<any>;
customFieldDatasource: MatTableDataSource<any>;
customFields: any;
fieldsDisplayedColumns: string[] = [
"selection",
"fieldName",
"fieldLabel",
"permittedValue"
];
mandatoryFields = {};
selectedFieldType: string;
selectedFieldName: string;
fieldType = {};
centerName: String;
showDescription = false;
constructor(private _webinReportService: WebinReportService,
private util: UtilService,
......@@ -54,7 +66,7 @@ export class ReadSubmissionComponent implements OnInit {
});
}
selectFileType(fieldType, name) {
selectFileType(fieldType, name, stepper) {
this.selectedFieldsArray = [];
this.selectedFieldType = fieldType;
this.selectedFieldName = name
......@@ -65,9 +77,94 @@ export class ReadSubmissionComponent implements OnInit {
this.selectedFieldsArray.push(field);
}
})
this.mandatoryFieldDatasource = new MatTableDataSource<any>(fieldType.fields.filter(field => field.mandatory));
this.optionalFieldDatasource = new MatTableDataSource<any>(fieldType.fields.filter(field => !field.mandatory));
// Setting filterPredicate that is used for filtering.
this.mandatoryFieldDatasource.filterPredicate = this.getPredicate();
this.optionalFieldDatasource.filterPredicate = this.getPredicate();
}
});
stepper.next();
}
getPredicate() {
return (data: any, filter: string) => data.label.trim().toLowerCase().indexOf(filter.trim().toLowerCase()) != -1;
}
applyFilter(filterValue: string, accordion: any) {
// If the filter text is empty close all expansion panel.
if (filterValue != "") {
accordion.multi = true;
accordion.openAll();
filterValue = filterValue.trim();
filterValue = filterValue.toLowerCase();
} else {
// Open all expansions while filter text is not empty.
accordion.closeAll();
accordion.multi = false;
}
this.mandatoryFieldDatasource.filter = filterValue;
this.optionalFieldDatasource.filter = filterValue;
this.optionalFieldDatasource.filter = filterValue;
}
/** Below lines must be removed if custom fields are not needed for reads */
/*addCustomField(customField: string, customText, accordion, form) {
if (!form.invalid) {
this.customFields = this.getCustomField(customField);
this.selectedFields[customField] = true;
// Get custom field group if already added to selectedChecklist.fieldGroups
let customFieldGroup: any = this.selectedChecklist.fieldGroups.filter(fieldGroup => fieldGroup.name === "custom_fields")[0];
if (customFieldGroup) {
customFieldGroup.fields.push(this.customFields);
} else {
// create new custom field group
customFieldGroup = { "name": "custom_fields", fields: [this.customFields] };
this.selectedChecklist.fieldGroups.push(customFieldGroup);
}
this.customFieldsDataSource = new MatTableDataSource<any>(customFieldGroup.fields);
this.customFieldsDataSource.filterPredicate = this.getPredicate();
this.showSuccessPopup("Successfully added custom field '" + customField + "'. The field can be viewed in custom fields grouping below.", "Custom field");
customText.value = "";
//opening custom panal is not woeking as expected so closing all the panels after adding custom field.
accordion.multi = true;
accordion.closeAll();
accordion.multi = false;
//this.customFieldsPanel.open();
}
}*/
getCustomField(customFieldValue) {
return {
"name": customFieldValue,
"label": customFieldValue,
"type": "TEXT_FIELD",
"mandatory": "recommended",
"description": "custom field",
"units": [],
"textChoice": []
};
}
addDescription(isChecked) {
if (isChecked) {
this.fieldsDisplayedColumns.push("description");
this.showDescription = true;
} else {
this.fieldsDisplayedColumns.pop()
this.showDescription = false;
}
}
selectedField(event, field) {
......
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