connect-admin/src/app/pages/community/content-providers/criteria/criteria.component.html

109 lines
5.8 KiB
HTML

<div *ngIf="showLoading" class="uk-animation-fade uk-width-1-1" role="alert">
<span class="loading-gif uk-align-center"></span>
</div>
<div *ngIf="dataProvider" class="uk-padding uk-padding-remove-bottom">
<div class="uk-flex uk-flex-middle" uk-grid>
<div class="uk-flex uk-flex-middle uk-width-4-5">
<a class="uk-icon uk-margin-right" uk-icon="icon: arrow-left; ratio: 2"
routerLink="/manage-content-providers" [queryParams]="{communityId: community}"></a>
<div class="uk-width-expand">
<span>Criteria for</span><br>
<span class="uk-text-large uk-text-bold">{{dataProvider.officialname}}</span>
</div>
</div>
<div class="uk-width-expand uk-text-right">
<button class="uk-button uk-width-1-2@l uk-button-danger"
(click)="save()">Save</button>
</div>
</div>
<div class="uk-alert uk-alert-primary uk-flex uk-flex-middle uk-margin-medium-top">
<span class="uk-icon uk-margin-small-right" uk-icon="info"></span>
<div class="uk-width-expand">
If no criteria are specified, all research results of this content provider will be included in your community.
</div>
</div>
<div class="uk-margin-top uk-margin-bottom">
<span>Add criteria to limit research results.</span><br>
<span>Results which satisfy any of the above criteria will be included in your community.</span>
</div>
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
<div *ngIf="criteria.length === 0"
class="uk-padding uk-position-relative">
<div class="uk-position-center">
No criteria are specified
</div>
</div>
<div *ngIf="criteria.controls.length > 0" [formGroup]="selectioncriteria">
<div formArrayName="criteria">
<div class="uk-margin-top" *ngFor="let criterion of criteria.controls; let i=index" [formGroupName]="i">
<span class="uk-text-uppercase uk-text-large uk-margin-small-bottom">Criterion {{i + 1}}</span><br>
<div class="uk-padding" style="border: solid 1px;" formArrayName="constraint">
<div class="uk-flex uk-flex-middle uk-grid-small uk-margin-small-bottom" uk-grid>
<div class="uk-width-1-5">
<label class="uk-text-uppercase uk-text-muted">Constraint Field</label>
</div>
<div class="uk-width-1-5">
<label class="uk-text-uppercase uk-text-muted">Operator</label>
</div>
<div class="uk-width-2-5">
<label class="uk-text-uppercase uk-text-muted">Term</label>
</div>
</div>
<div *ngFor="let constraint of getConstraint(i).controls; let j=index"
[formGroupName]="j" class="uk-margin-bottom">
<div class="uk-flex uk-flex-middle uk-grid-small" uk-grid>
<div class="uk-width-1-5">
<select formControlName="field" class="form-control uk-select"
[class.uk-text-muted]="constraint.get('field').value === ''"
[class.uk-form-danger]="constraint.get('field').status === 'INVALID'">
<option [value]="''" disabled selected hidden>Select a field...</option>
<option [value]="'title'">title</option>
<option [value]="'author'">author's name</option>
<option [value]="'author ORCID'">author's ORCID</option>
<option [value]="'contributor'">contributor</option>
<option [value]="'description'">description</option>
</select>
</div>
<div class="uk-width-1-5">
<select formControlName="verb" class="form-control uk-select"
[class.uk-form-danger]="constraint.get('verb').status === 'INVALID'">
<option [value]="'contains'">contains</option>
<option [value]="'equals'">equals</option>
<option [value]="'not_contains'">not contains</option>
<option [value]="'not_equals'">not equals</option>
</select>
</div>
<div class="uk-width-2-5">
<input type="text" class="uk-input" formControlName="value" placeholder="Type term..."
[class.uk-form-danger]="constraint.get('value').status === 'INVALID'">
</div>
<div class="uk-width-1-6">
<span *ngIf="getConstraint(i).length > j + 1">AND</span>
</div>
<div class="uk-width-expand" *ngIf="getConstraint(i).length > 1">
<button class="uk-icon-button uk-button-danger uk-icon uk-margin-small-right"
uk-icon="minus" (click)="removeConstraint(i, j)"></button>
</div>
<div class="uk-width-expand" *ngIf="getConstraint(i).length === 1">
<button class="uk-icon-button uk-button-danger uk-icon uk-margin-small-right"
uk-icon="minus" (click)="removeConstraint(i, j)"
uk-tooltip="title: By removing this constraint, the criterion will be removed too."></button>
</div>
</div>
</div>
<div class="uk-margin-top uk-flex uk-flex-middle uk-flex-right">
<button class="uk-icon-button uk-button-danger uk-icon uk-margin-small-right"
(click)="addConstraint(i)" uk-icon="plus"></button>
<span class="uk-text-uppercase clickable" (click)="addConstraint(i)">Add Constraint</span>
</div>
</div>
</div>
</div>
</div>
<div class="uk-margin-top uk-flex uk-flex-middle">
<button class="uk-icon-button uk-button-danger uk-icon uk-margin-small-right"
(click)="addCriteria()" uk-icon="plus"></button>
<span class="uk-text-uppercase clickable" (click)="addCriteria()">Add Criterion</span>
</div>
</div>