interactive-apps/ngx-dhis2-validation-rule-filter

<div class="validation-rule-group-filter-container">
  <div class="validation-rule-group-top-section">
    <div class="validation-rule-group-type-section">
      <mat-form-field style="width: 100%">
        <input
          type="search"
          matInput
          placeholder="Search"
          [(ngModel)]="searchString"
        />
      </mat-form-field>
    </div>
  </div>

  <div class="validation-rule-group-header">
    <div class="validation-rule-group-available-header">
      <span
        matTooltip="Available Validation Rule Group"
        [matTooltipPosition]="'after'"
        class="badge badge-secondary validation-rule-group-badge"
        >{{
          (availableValidationRuleGroups | filterByName: searchString).length
        }}
        Available</span
      >
      <button
        matTooltip="Select All Validation Rule Group"
        class="btn btn-sm btn-light"
        [disabled]="availableValidationRuleGroups.length === 0"
        (click)="onSelectAllValidationRuleGroup($event)"
      >
        <i class="material-icons">
          arrow_forward
        </i>
      </button>
    </div>
    <div class="validation-rule-group-selected-header">
      <button
        matTooltip="Unselect All Validation Rule Group"
        class="btn btn-sm btn-light"
        [disabled]="selectedValidationRuleGroups.length === 0"
        (click)="onDeselectAllValidationRuleGroup($event)"
      >
        <i class="material-icons">
          arrow_back
        </i>
      </button>
      <span
        matTooltip="Selected Validation Rule Group"
        [matTooltipPosition]="'before'"
        class="badge badge-primary validation-rule-group-badge"
        >{{ selectedValidationRuleGroups.length }} Selected</span
      >
    </div>
  </div>

  <div class="validation-rule-group-body">
    <div class="validation-rule-group-available-body">
      <div
        *ngIf="availableValidationRuleGroups.length === 0 && !(loaded$ | async)"
        style="text-align: center"
      >
        <lib-loading></lib-loading>
      </div>
      <div>
        <ul
          *ngIf="
            (loaded$ | async) && availableValidationRuleGroups.length !== 0
          "
          class="validation-rule-group-list"
        >
          <li
            matTooltip="{{ availableValidationRuleGroup.name }}"
            [matTooltipPosition]="'after'"
            *ngFor="
              let availableValidationRuleGroup of availableValidationRuleGroups
                | filterByName: searchString
                | paginate
                  : {
                      id: 'validation_rule_available_group_pagination_id',
                      itemsPerPage: 2,
                      currentPage: currentPageAvailable,
                      totalItems: totalAvailableItems
                    }
            "
          >
            <a
              (click)="
                onSelectValidationRuleGroup(
                  availableValidationRuleGroup,
                  $event
                )
              "
            >
              {{ availableValidationRuleGroup.name }}
            </a>
          </li>
        </ul>
        <ul
          class="validation-rule-group-list"
          *ngIf="
            (loaded$ | async) && availableValidationRuleGroups.length === 0
          "
        >
          <li class="no-items-found-error-message">
            <i class="material-icons">
              warning </i
            >&nbsp; Oops! no items to select!
          </li>
        </ul>
        <pagination-controls
          *ngIf="availableValidationRuleGroups.length >= 4"
          style="bottom: 0; position: relative;"
          id="validation_rule_available_group_pagination_id"
          (pageChange)="onAvailablePageChanged($event)"
          maxSize="2"
          directionLinks="true"
          autoHide="true"
          responsive="true"
          previousLabel="Prev"
          nextLabel="Next"
          screenReaderPaginationLabel="Pagination"
          screenReaderPageLabel="currentPageAvailable"
          screenReaderCurrentLabel="You're on page"
        >
        </pagination-controls>
      </div>
    </div>
    <div class="validation-rule-group-selected-body">
      <ul class="validation-rule-group-list">
        <li
          matTooltip="{{ selectedValidationRuleGroup.name }}"
          [matTooltipPosition]="'before'"
          *ngFor="
            let selectedValidationRuleGroup of selectedValidationRuleGroups
              | paginate
                : {
                    id: 'validation_rule_selected_group_pagination_id',
                    itemsPerPage: 2,
                    currentPage: currentPageSelected,
                    totalItems: selectedValidationRuleGroups.length
                  }
          "
        >
          <a
            (click)="
              onDeselectValidationRuleGroup(selectedValidationRuleGroup, $event)
            "
          >
            <span class="badge badge-info">VRG</span>&nbsp;
            {{ selectedValidationRuleGroup.name }}
          </a>
        </li>
      </ul>
      <pagination-controls
        *ngIf="selectedValidationRuleGroups.length >= 4"
        style="bottom: 0; position: relative;"
        id="validation_rule_selected_group_pagination_id"
        (pageChange)="onSelectedPageChanged($event)"
        maxSize="2"
        directionLinks="true"
        autoHide="true"
        responsive="true"
        previousLabel="Prev"
        nextLabel="Next"
        screenReaderPaginationLabel="Pagination"
        screenReaderPageLabel="currentPageSelected"
        screenReaderCurrentLabel="You're on page"
      >
      </pagination-controls>
    </div>
  </div>

  <div class="validation-rule-group-filter-btns">
    <div>
      <button
        mat-stroked-button
        matTooltip="Close validation rule filter"
        (click)="onClose($event)"
      >
        Close</button
      >&nbsp;
      <button
        mat-stroked-button
        matTooltip="Update selection with the data items"
        (click)="onUpdate($event)"
        [disabled]="selectedValidationRuleGroups.length === 0"
      >
        Update
      </button>
    </div>
  </div>
</div>