[Validator]: Updated how results and guidelines are displayed | Added XmlValidationResponse class as structured response | Added validation score and fair score | Do not import dashboard.less and hide sidebar.
This commit is contained in:
parent
3ef3dcd590
commit
96be40c911
|
|
@ -1,7 +1,7 @@
|
|||
<div id="container" class="sidebar_main_swipe uk-background-default sidebar_main_active">
|
||||
<div id="modal-container"></div>
|
||||
<app-topmenu></app-topmenu>
|
||||
<app-sidebar></app-sidebar>
|
||||
<!-- <app-sidebar></app-sidebar>-->
|
||||
<main>
|
||||
<router-outlet></router-outlet>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
import {RuleInfo} from "./RuleInfo";
|
||||
|
||||
export class XmlValidationResponse {
|
||||
validationScore: string;
|
||||
fairScore: string;
|
||||
rules: RuleInfo[];
|
||||
}
|
||||
|
|
@ -2,69 +2,113 @@
|
|||
<div id="page_content_header" class="uk-blur-background" offset="65">
|
||||
<div class="uk-container uk-container-large">
|
||||
<div class="uk-section" [formGroup]="form">
|
||||
<h6>1. Select guidelines (*)</h6>
|
||||
<div input class="uk-width-large" [formInput]="form.get('guidelines')" placeholder="Select a guideline" [options]="options" type="select"></div>
|
||||
<ng-container *ngIf="!viewResults">
|
||||
<h6>1. Select guidelines (*)</h6>
|
||||
<div *ngFor="let option of options">
|
||||
<input [id]="option.value" type="radio" [value]="option.value" name="guidelines" formControlName="guidelines">
|
||||
<label [for]="option.value"> {{option.label}}</label>
|
||||
</div>
|
||||
|
||||
<h6>2. Paste metadata record (*)</h6>
|
||||
<div input class="uk-width-1-1 uk-margin-top" [formInput]="form.get('xml')" placeholder="Paste your xml here" type="textarea" [rows]="15"></div>
|
||||
<h6>2. Paste metadata record (*)</h6>
|
||||
<div input class="uk-width-1-1 uk-margin-top" [formInput]="form.get('xml')" placeholder="Paste your xml here" type="textarea" [rows]="15"></div>
|
||||
|
||||
<!-- <ngx-dropzone #drop class="" (change)="fileChangeEvent($event, true)"-->
|
||||
<!-- [multiple]="false" [accept]="xml">-->
|
||||
<!-- <ngx-dropzone-preview *ngIf="form.value.value && form.value.value.name" class="file-preview"-->
|
||||
<!-- [removable]="true" (removed)="onRemove()">-->
|
||||
<!-- <ngx-dropzone-label class="file-label">{{ form.value.value.name }}</ngx-dropzone-label>-->
|
||||
<!-- </ngx-dropzone-preview>-->
|
||||
<!-- </ngx-dropzone>-->
|
||||
<!-- <button *ngIf="!form.value.value || filesToUpload" mat-button (click)="drop.showFileSelector()" type="button" class="attach-file-btn"-->
|
||||
<!-- [disabled]="!!form.value.value">-->
|
||||
<!-- <mat-icon class="mr-2">upload</mat-icon>-->
|
||||
<!-- <mat-label>{{ (form.get('data').value.label | translate)}}</mat-label>-->
|
||||
<!-- </button>-->
|
||||
<!-- <ngx-dropzone #drop class="" (change)="fileChangeEvent($event, true)"-->
|
||||
<!-- [multiple]="false" [accept]="xml">-->
|
||||
<!-- <ngx-dropzone-preview *ngIf="form.value.value && form.value.value.name" class="file-preview"-->
|
||||
<!-- [removable]="true" (removed)="onRemove()">-->
|
||||
<!-- <ngx-dropzone-label class="file-label">{{ form.value.value.name }}</ngx-dropzone-label>-->
|
||||
<!-- </ngx-dropzone-preview>-->
|
||||
<!-- </ngx-dropzone>-->
|
||||
<!-- <button *ngIf="!form.value.value || filesToUpload" mat-button (click)="drop.showFileSelector()" type="button" class="attach-file-btn"-->
|
||||
<!-- [disabled]="!!form.value.value">-->
|
||||
<!-- <mat-icon class="mr-2">upload</mat-icon>-->
|
||||
<!-- <mat-label>{{ (form.get('data').value.label | translate)}}</mat-label>-->
|
||||
<!-- </button>-->
|
||||
|
||||
<div class="uk-margin-medium-top">
|
||||
<button class="uk-button uk-flex uk-flex-middle uk-flex-wrap"
|
||||
[class.uk-button-primary]="form.valid" [class.uk-disabled]="!form.valid" (click)="validate()">
|
||||
<div name="cloud_upload">
|
||||
<span class="uk-flex"><span class="material-icons" style="font-size: 20px;">check</span></span>
|
||||
</div>
|
||||
<span class="uk-margin-small-left">Validate!</span>
|
||||
<div class="uk-margin-medium-top">
|
||||
<button class="uk-button uk-flex uk-flex-middle uk-flex-wrap"
|
||||
[class.uk-button-primary]="form.valid" [class.uk-disabled]="!form.valid"
|
||||
(click)="validate(); viewResults=true">
|
||||
<div name="cloud_upload">
|
||||
<span class="uk-flex"><span class="material-icons" style="font-size: 20px;">check</span></span>
|
||||
</div>
|
||||
<span class="uk-margin-small-left">Validate!</span>
|
||||
</button>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<div *ngIf="viewResults">
|
||||
<button class="uk-button uk-button-link uk-flex uk-flex-middle uk-margin-bottom" (click)="viewResults = false">
|
||||
<icon name="west" [flex]="true"></icon>
|
||||
<span class="uk-margin-small-left">Back</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="uk-margin-large-top">
|
||||
<h6>Validation Results</h6>
|
||||
<div *ngIf="!result" class="uk-alert uk-alert-primary">
|
||||
No validated metadata record yet
|
||||
</div>
|
||||
<table *ngIf="result" class="uk-table uk-table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rule Name</th>
|
||||
<th>Score</th>
|
||||
<th>Status</th>
|
||||
|
||||
<div *ngIf="result">
|
||||
<h6>Validator's History</h6>
|
||||
<table class="uk-table uk-table-striped">
|
||||
<thead>
|
||||
<tr class="uk-child-width-1-4">
|
||||
<th>Validation Score</th>
|
||||
<th class="uk-text-center">Fair Score</th>
|
||||
<th class="uk-text-center">Guidelines</th>
|
||||
<th class="uk-text-center">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let ruleResult of result">
|
||||
<td>
|
||||
<div>{{ruleResult.name ? ruleResult.name : '-'}}</div>
|
||||
<div *ngIf="ruleResult.description" class="uk-text-small uk-text-meta">{{ruleResult.description}}</div>
|
||||
</td>
|
||||
<td>{{(ruleResult.score != undefined && ruleResult.score != null) ? ruleResult.score : '-'}}</td>
|
||||
<td *ngIf="!ruleResult.status">-</td>
|
||||
<td *ngIf="ruleResult.status">
|
||||
<div *ngIf="(!ruleResult.errors || ruleResult.errors.length == 0) &&
|
||||
(!ruleResult.warnings || ruleResult.warnings.length == 0) &&
|
||||
(!ruleResult.internalError)" class="uk-text-success">{{ruleResult.status}}</div>
|
||||
<a *ngIf="ruleResult.warnings?.length > 0 || ruleResult.errors?.length > 0 || ruleResult.internalError" (click)="openMessagesModal(ruleResult)">
|
||||
<div *ngIf="ruleResult.warnings?.length > 0" class="uk-link-text uk-text-warning">warnings</div>
|
||||
<div *ngIf="ruleResult.errors?.length > 0" class="uk-link-text uk-text-danger">errors</div>
|
||||
<div *ngIf="ruleResult.internalError" class="uk-link-text uk-text-danger">error</div>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td [class.uk-text-center]="!result.validationScore">{{result.validationScore ? result.validationScore : '-'}}</td>
|
||||
<td class="uk-text-center">{{result.fairScore ? result.fairScore : '-'}}</td>
|
||||
<td class="uk-text-center">{{currentGuideline?.label}}</td>
|
||||
<td class="uk-flex uk-flex-center">
|
||||
<a class="uk-button-link uk-flex uk-flex-middle uk-flex-center" (click)="validationAnalysis=!validationAnalysis">
|
||||
<icon name="visibility" flex="true" class="uk-margin-small-right"></icon>
|
||||
<ng-container *ngIf="!validationAnalysis">View Results</ng-container>
|
||||
<ng-container *ngIf="validationAnalysis">Hide Results</ng-container>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div *ngIf="result && validationAnalysis" class="uk-margin-large-top">
|
||||
<h6>Validation Result Analysis</h6>
|
||||
<table class="uk-table uk-table-striped">
|
||||
<thead>
|
||||
<tr class="uk-child-width-1-3">
|
||||
<th>Rule Name</th>
|
||||
<th class="uk-text-center">Score</th>
|
||||
<th class="uk-text-center">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let ruleResult of result.rules">
|
||||
<td>
|
||||
<div>{{ruleResult.name ? ruleResult.name : '-'}}</div>
|
||||
<div *ngIf="ruleResult.description" class="uk-text-small uk-text-meta">{{ruleResult.description}}</div>
|
||||
</td>
|
||||
<td class="uk-text-center">{{(ruleResult.score != undefined && ruleResult.score != null) ? ruleResult.score : '-'}}</td>
|
||||
<td class="uk-text-center">
|
||||
<ng-container *ngIf="!ruleResult.status">-</ng-container>
|
||||
<ng-container *ngIf="ruleResult.status">
|
||||
<div *ngIf="(!ruleResult.errors || ruleResult.errors.length == 0) &&
|
||||
(!ruleResult.warnings || ruleResult.warnings.length == 0) &&
|
||||
(!ruleResult.internalError)" class="uk-text-success">{{ruleResult.status}}</div>
|
||||
<a *ngIf="ruleResult.warnings?.length > 0 || ruleResult.errors?.length > 0 || ruleResult.internalError" (click)="openMessagesModal(ruleResult)">
|
||||
<a *ngIf="ruleResult.warnings?.length > 0" class="uk-text-warning">warnings</a>
|
||||
<a *ngIf="ruleResult.errors?.length > 0" class="uk-text-danger">errors</a>
|
||||
<a *ngIf="ruleResult.internalError" class="uk-text-danger">error</a>
|
||||
</a>
|
||||
</ng-container>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<modal-alert #modal large="true" (alertOutput)="modalOpen=false">
|
||||
<div *ngIf="modalOpen" class="uk-modal-body uk-height-min-medium uk-width-expand">
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import {UntypedFormBuilder, UntypedFormGroup, Validators} from "@angular/forms";
|
|||
import {SingleRecordValidatorService} from "./single-record-validator.service";
|
||||
import {Option} from "../../shared/utils/input/input.component";
|
||||
import {RuleInfo, Status} from "../entities/RuleInfo";
|
||||
import {XmlValidationResponse} from "../entities/XmlValidationResponse";
|
||||
|
||||
@Component({
|
||||
selector: 'app-single-record-validator',
|
||||
|
|
@ -17,11 +18,14 @@ export class SingleRecordValidatorComponent implements OnInit {
|
|||
{label: 'FAIR Data Guidelines Profile', value: 'fairDataGuidelinesProfile'}
|
||||
];
|
||||
public form: UntypedFormGroup;
|
||||
public result: any;
|
||||
public result: XmlValidationResponse
|
||||
public modalOpen: boolean = false;
|
||||
public currentRule: RuleInfo;
|
||||
@ViewChild('modal') modal;
|
||||
|
||||
public viewResults: boolean = false;
|
||||
public validationAnalysis: boolean = true;
|
||||
|
||||
constructor(private fb: UntypedFormBuilder, private validator: SingleRecordValidatorService) {
|
||||
this.form = this.fb.group({
|
||||
guidelines: this.fb.control("", Validators.required),
|
||||
|
|
@ -48,6 +52,10 @@ export class SingleRecordValidatorComponent implements OnInit {
|
|||
this.modal.open();
|
||||
}
|
||||
|
||||
public get currentGuideline() {
|
||||
return this.options.find(option => this.form.get("guidelines").getRawValue() == option.value);
|
||||
}
|
||||
|
||||
// fileChangeEvent(fileInput: any, dropped: boolean = false) {
|
||||
// if(this.form.value.value) {
|
||||
// this.onRemove(false);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
@import "~src/assets/common-assets/less/general";
|
||||
@import "~src/assets/common-assets/less/user";
|
||||
@import "~src/assets/common-assets/less/dashboard";
|
||||
//@import "~src/assets/common-assets/less/dashboard";
|
||||
@import "~src/assets/common-assets/less/ckeditor";
|
||||
|
||||
//.sidebar_main_swipe #sidebar_main #sidebar_content {
|
||||
|
|
|
|||
Loading…
Reference in New Issue