[Validator]: XmlValidationResponse.ts: Added field "fairRules: RuleInfo[];" | single-record-validator.component.ts: In options updated label for Data to "Data Archive Guidelines V2 Profile & FAIR Data Guidelines Profile" | single-record-validator.component.html: Updated results view to be closer to the mocks & added fair score & separated results of fair and other guidelines.

src/app/pages/entities/XmlValidationResponse.ts

@@ -4,4 +4,5 @@ export class XmlValidationResponse {
   validationScore: string;
   fairScore: string;
   rules: RuleInfo[];
+  fairRules: RuleInfo[];
 }

src/app/pages/single-record-validator/single-record-validator.component.html

@@ -1,3 +1,37 @@
+<ng-template #rules_analysis let-rules=rules>
+  <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 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)">
+            <div *ngIf="ruleResult.warnings?.length > 0" class="uk-text-warning">warnings</div>
+            <div *ngIf="ruleResult.errors?.length > 0" class="uk-text-danger">errors</div>
+            <div *ngIf="ruleResult.internalError" class="uk-text-danger">error</div>
+          </a>
+        </ng-container>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+</ng-template>
+
 <div id="page_content">
   <div id="page_content_header" class="uk-blur-background" offset="65">
     <div class="uk-container uk-container-large">
@@ -49,16 +83,16 @@
             <table class="uk-table uk-table-striped">
               <thead>
               <tr class="uk-child-width-1-4">
-                <th>Validation Score</th>
+                <th *ngIf="result.validationScore">Validation Score</th>
-                <th class="uk-text-center">Fair Score</th>
+                <th *ngIf="result.fairScore" 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>
-                  <td [class.uk-text-center]="!result.validationScore">{{result.validationScore ? result.validationScore : '-'}}</td>
+                  <td *ngIf="result.validationScore" [class.uk-text-center]="!result.validationScore">{{result.validationScore ? result.validationScore : '-'}}</td>
-                  <td class="uk-text-center">{{result.fairScore ? result.fairScore : '-'}}</td>
+                  <td *ngIf="result.fairScore" 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">
@@ -73,38 +107,18 @@
           </div>
 
           <div *ngIf="result && validationAnalysis" class="uk-margin-large-top">
-            <h6>Validation Result Analysis</h6>
+            <ul uk-tab>
-            <table class="uk-table uk-table-striped">
+              <li *ngIf="result.validationScore"><a>Validation Result Analysis</a></li>
-              <thead>
+              <li *ngIf="result.fairScore"><a>Fair Validation Result Analysis</a></li>
-                <tr class="uk-child-width-1-3">
+            </ul>
-                  <th>Rule Name</th>
+
-                  <th class="uk-text-center">Score</th>
+            <ul class="uk-switcher uk-margin">
-                  <th class="uk-text-center">Status</th>
+              <li *ngIf="result.validationScore"><ng-container *ngTemplateOutlet="rules_analysis; context: {rules: result.rules}"></ng-container></li>
-                </tr>
+              <li *ngIf="result.fairScore"><ng-container *ngTemplateOutlet="rules_analysis; context: {rules: result.fairRules}"></ng-container></li>
-              </thead>
+            </ul>
-              <tbody>
+
-                <tr *ngFor="let ruleResult of result.rules">
+
-                  <td>
+<!--            <h6>Validation Result Analysis</h6>-->
-                    <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">
@@ -114,7 +128,7 @@
                 <div *ngFor="let message of currentRule.warnings">{{message}}</div>
               </div>
               <div *ngIf="currentRule.errors?.length > 0" class="uk-margin-bottom">
-                <span class="uk-text-error">Errors</span>
+                <span class="uk-text-danger">Errors</span>
                 <div *ngFor="let message of currentRule.errors">{{message}}</div>
               </div>
               <div *ngIf="currentRule.internalError">Internal error: {{currentRule.internalError}}</div>

src/app/pages/single-record-validator/single-record-validator.component.ts

@@ -12,7 +12,7 @@ import {XmlValidationResponse} from "../entities/XmlValidationResponse";
 })
 export class SingleRecordValidatorComponent implements OnInit {
   public options: Option[] = [
-    {label: 'Data Archive Guidelines V2 Profile', value: 'dataArchiveGuidelinesV2Profile'},
+    {label: 'Data Archive Guidelines V2 Profile & FAIR Data Guidelines Profile', value: 'dataArchiveGuidelinesV2Profile'},
     {label: 'Literature Guidelines V3 Profile', value: 'literatureGuidelinesV3Profile'},
     {label: 'Literature Guidelines V4 Profile', value: 'literatureGuidelinesV4Profile'},
     {label: 'FAIR Data Guidelines Profile', value: 'fairDataGuidelinesProfile'}