metadata-validator-ui/src/app/pages/oaipmh-validator/validation-settings/oaipmh-validator.component....

159 lines
8.7 KiB
HTML

<div id="page_content">
<div id="page_content_header" class="uk-blur-background">
<div class="uk-grid uk-margin-remove-left" uk-grid>
<!-- <div id="landing-center-content" class="uk-width-expand uk-padding-remove uk-background-default">-->
<!-- <div class="uk-section uk-width-expand" [formGroup]="form">-->
<div id="center-content" class="uk-width-2-3 uk-width-3-4@l" [formGroup]="form">
<div class="uk-section uk-container uk-container-large">
<div class="uk-margin-large-bottom">
<h6><span class="uk-text-secondary uk-margin-right">1.</span> Select a data source (repository or journal)</h6>
<div input class="uk-width-xlarge uk-margin-xsmall-left uk-margin-medium-top" inputClass="flat x-small" [formInput]="form.get('url')"
placeholder="Give the URL from one of your registered repositories" type="URL" (valueChange)="getSets()"></div>
</div>
<div class="uk-margin-large-bottom">
<h6><span class="uk-text-secondary uk-margin-right">2.</span> Select guidelines</h6>
<div class="uk-margin-medium-top">
<div *ngFor="let option of options" class="uk-margin-xsmall-left uk-margin-small-bottom">
<input [id]="option.value" type="radio" [value]="option.value" name="guidelines" formControlName="guidelines">
<label [for]="option.value" class="uk-margin-xsmall-left">{{option.label}}</label>
</div>
</div>
</div>
<div class="uk-margin-large-bottom">
<h6><span class="uk-text-secondary uk-margin-right">3.</span> Define the number of record to validate</h6>
<div class="uk-disabled uk-text-muted uk-margin-xsmall-left uk-margin-medium-top uk-margin-small-bottom">
<input id="all" type="radio" name="recordsNum" value="-1" formControlName="recordsNum">
<label for="all" class="uk-margin-xsmall-left">All</label>
</div>
<div class="uk-flex uk-flex-middle uk-margin-xsmall-left">
<input id="custom" type="radio" name="recordsNum" [value]="recordsNum" formControlName="recordsNum">
<label for="custom" class="uk-margin-xsmall-left">
Custom
</label>
<span class="uk-margin-left uk-flex-inline uk-flex-middle">
<icon class="clickable" name="remove_circle_outline" flex="true" ratio="0.9" type="outlined"
[ngClass]="recordsNum <= 10 ? 'uk-disabled uk-text-muted' : ''" (click)="updateRecordsNum(false)"></icon>
<span class="uk-margin-small-left uk-margin-small-right">{{recordsNum}}</span>
<icon class="clickable" name="add_circle_outline" flex="true" ratio="0.9" type="outlined"
[ngClass]="recordsNum >= 20 ? 'uk-disabled uk-text-muted' : ''" (click)="updateRecordsNum(true)"></icon>
</span>
</div>
<div [disabled]="loadingSets || sets.length == 1" input type="select" placeholder="Select validation set" inputClass="flat x-small"
[options]="sets" [formInput]="form.get('set')" class="uk-width-large uk-margin-medium-top uk-margin-xsmall-left"></div>
</div>
<div class="uk-margin-medium-top uk-margin-xsmall-left">
<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();">
<span>Start Validation</span>
</button>
</div>
</div>
</div>
<!-- <div id="right-sidebar" *ngIf="help" class="uk-width-1-3 uk-width-1-4@l uk-padding-remove uk-background-primary">-->
<!-- <div class="uk-sticky" uk-sticky="bottom: true" [attr.offset]="offset">-->
<!-- <div class="uk-overflow-auto uk-height-1-1">-->
<!-- <div class="uk-h5 uk-light uk-text-center">Help</div>-->
<!-- <div class="uk-card uk-card-default">-->
<!-- <div class="uk-card-body">test body</div>-->
<!-- <div class="uk-card-footer">Dismiss Help</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<div id="right-sidebar" *ngIf="help"
class="uk-width-1-3 uk-width-1-4@l uk-padding-remove uk-text-small uk-visible@m uk-card uk-card-default">
<div class="uk-sticky" uk-sticky="end: true" [attr.offset]="offset">
<div class="uk-overflow-auto uk-height-1-1">
<div>
<div class="uk-section uk-section-small uk-background-primary">
<div class="uk-h5 uk-light uk-text-center">Help</div>
</div>
<div class="uk-card-body uk-padding-remove-horizontal">
<ul uk-accordion>
<li class="uk-open">
<a class="uk-accordion-title uk-text-small uk-padding-small uk-padding-remove-vertical" href="#">
<span class="accordion-title-num">
<svg height="27" width="27">
<circle cx="13" cy="13" r="13" stroke-width="1"></circle>
<text x="50%" y="50%" text-anchor="middle" dy=".3em" font-size="14">
1
</text>
</svg>
</span>
<span class="uk-margin-small-left">Select Data source</span>
</a>
<div class="uk-accordion-content uk-text-small uk-padding-small uk-padding-remove-vertical">
<p>
Select from the list, or enter the base OAI URL of the repository/ journal.
The repository's/ journal's published sets are exposed in a later stage and you may select one for the compatibility tests.
</p>
</div>
</li>
<li>
<a class="uk-accordion-title uk-text-small uk-padding-small uk-padding-remove-vertical" href="#">
<span class="accordion-title-num">
<svg height="27" width="27">
<circle cx="13" cy="13" r="13" stroke-width="1"></circle>
<text x="50%" y="50%" text-anchor="middle" dy=".3em" font-size="14">
2
</text>
</svg>
</span>
<span class="uk-margin-small-left">Select Guidelines</span>
</a>
<div class="uk-accordion-content uk-text-small uk-padding-small uk-padding-remove-vertical">
<p>You may apply two types of compatibility tests on your repository:</p>
<ul>
<li>Content: specific to the content/ format of the dc fields</li>
<li>Usage: specific to the implementation of OAI-PMH</li>
</ul>
<p>You may select from a predefined set of rules (OpenAIRE for Literature Repositories, OpenAIRE for Data Archives) or customize them according to your needs.</p>
</div>
</li>
<li>
<a class="uk-accordion-title uk-text-small uk-padding-small uk-padding-remove-vertical" href="#">
<span class="accordion-title-num">
<svg height="27" width="27">
<circle cx="13" cy="13" r="13" stroke-width="1"></circle>
<text x="50%" y="50%" text-anchor="middle" dy=".3em" font-size="14">
3
</text>
</svg>
</span>
<span class="uk-margin-small-left">Select Parameters</span>
</a>
<div class="uk-accordion-content uk-text-small uk-padding-small uk-padding-remove-vertical">
<p>
...
</p>
</div>
</li>
</ul>
</div>
<a uk-sticky="end: true" class="uk-sticky uk-card-footer uk-button-link uk-text-center" (click)="help=false">Dismiss Help</a>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="!help" class="quick-contact uk-align-right uk-padding uk-padding-remove-vertical">
<button class="uk-button uk-box-shadow-default uk-box-shadow-default-hover uk-button-secondary uk-flex uk-flex-middle"
(click)="help = true">
<icon name="lightbulb" [flex]="true"></icon>
<span class="uk-margin-small-left">help</span>
</button>
</div>
</div>
</div>