D-Net

<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]="selcrit">

    <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>