From 96be40c9111af6cd9ea856120fda6cf2965bae6b Mon Sep 17 00:00:00 2001
From: "konstantina.galouni" <kgalouni@di.uoa.gr>
Date: Tue, 6 Dec 2022 01:54:45 +0200
Subject: [PATCH] [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.

---
 src/app/app.component.html                    |   2 +-
 .../pages/entities/XmlValidationResponse.ts   |   7 +
 .../single-record-validator.component.html    | 152 +++++++++++-------
 .../single-record-validator.component.ts      |  10 +-
 src/styles.less                               |   2 +-
 5 files changed, 116 insertions(+), 57 deletions(-)
 create mode 100644 src/app/pages/entities/XmlValidationResponse.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 5ae9012..7a5104e 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -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>
diff --git a/src/app/pages/entities/XmlValidationResponse.ts b/src/app/pages/entities/XmlValidationResponse.ts
new file mode 100644
index 0000000..99027b8
--- /dev/null
+++ b/src/app/pages/entities/XmlValidationResponse.ts
@@ -0,0 +1,7 @@
+import {RuleInfo} from "./RuleInfo";
+
+export class XmlValidationResponse {
+  validationScore: string;
+  fairScore: string;
+  rules: RuleInfo[];
+}
diff --git a/src/app/pages/single-record-validator/single-record-validator.component.html b/src/app/pages/single-record-validator/single-record-validator.component.html
index 38ed17b..7432709 100644
--- a/src/app/pages/single-record-validator/single-record-validator.component.html
+++ b/src/app/pages/single-record-validator/single-record-validator.component.html
@@ -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">
diff --git a/src/app/pages/single-record-validator/single-record-validator.component.ts b/src/app/pages/single-record-validator/single-record-validator.component.ts
index 2afea70..33235b1 100644
--- a/src/app/pages/single-record-validator/single-record-validator.component.ts
+++ b/src/app/pages/single-record-validator/single-record-validator.component.ts
@@ -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);
diff --git a/src/styles.less b/src/styles.less
index 8e73736..c35304b 100644
--- a/src/styles.less
+++ b/src/styles.less
@@ -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 {