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

<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">
      <div class="uk-section" [formGroup]="form">
        <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>

  <!--        <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(); viewResults=true">
              <span class="uk-margin-small-left">Start Validation</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 *ngIf="!result" class="uk-alert uk-alert-primary">
            No validated metadata record yet
          </div>

          <div *ngIf="result">
            <h6>Validator's History</h6>
            <table class="uk-table uk-table-striped">
              <thead>
              <tr class="uk-child-width-1-4">
                <th *ngIf="result.validationScore">Validation 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 *ngIf="result.validationScore" [class.uk-text-center]="!result.validationScore">{{result.validationScore ? result.validationScore : '-'}}</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">
                      <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">
            <ul uk-tab>
              <li *ngIf="result.validationScore"><a>Validation Result Analysis</a></li>
              <li *ngIf="result.fairScore"><a>Fair Validation Result Analysis</a></li>
            </ul>

            <ul class="uk-switcher uk-margin">
              <li *ngIf="result.validationScore"><ng-container *ngTemplateOutlet="rules_analysis; context: {rules: result.rules}"></ng-container></li>
              <li *ngIf="result.fairScore"><ng-container *ngTemplateOutlet="rules_analysis; context: {rules: result.fairRules}"></ng-container></li>
            </ul>


<!--            <h6>Validation Result Analysis</h6>-->
          </div>

          <modal-alert #modal large="true" (alertOutput)="modalOpen=false">
            <div *ngIf="modalOpen" class="uk-modal-body uk-height-min-medium uk-width-expand">
              <div *ngIf="currentRule.warnings?.length > 0" class="uk-margin-bottom">
                <span class="uk-text-warning">Warnings</span>
                <div *ngFor="let message of currentRule.warnings">{{message}}</div>
              </div>
              <div *ngIf="currentRule.errors?.length > 0" class="uk-margin-bottom">
                <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>
            </div>
          </modal-alert>

<!--          <div class="uk-margin-top uk-section-muted uk-padding-small">-->
<!--          Comments-->
<!--            <ul class="uk-list uk-list-bullet">-->
<!--              <li>returns success, not warning status</li>-->
<!--              <li>what is the score?</li>-->
<!--              <li>do we have rule weight?</li>-->
<!--              <li>no description or user friendly name provided</li>-->
<!--              <li>errors/ warning not user friendly</li>-->
<!--              <li>can return errors & warnings</li>-->
<!--              <li>on errors, only the 1st one is returned (this is what comments in code say)</li>-->
<!--            </ul>-->
<!--          </div>-->
        </div>
      </div>
    </div>
  </div>
</div>