projects/grid-failure-information-app/src/app/pages/distribution-group/distribution-group-members/distribution-group-members.component.html

<!-- /********************************************************************************
* Copyright (c) 2020 Contributors to the Eclipse Foundation
*
* See the NOTICE file(s) distributed with this work for additional
* information regarding copyright ownership.
*
* This program and the accompanying materials are made available under the
* terms of the Eclipse Public License v. 2.0 which is available at
* http://www.eclipse.org/legal/epl-2.0.
*
* SPDX-License-Identifier: EPL-2.0
********************************************************************************/ -->
<div></div>
<div class="table-menu">
  <div class="table-menu-row table-menu-row-flow-right">
    <span>{{ 'DistributionGroupMember.Title' | translate }}</span>
    <label for="search-text" class="col-sm-2 col-form-label search-contacts-label">{{ 'DistributionGroupMember.ContactSearch' | translate }}</label>

    <input
      #searchInput
      type="text"
      size="50"
      maxlength="255"
      id="search-text"
      autocomplete="off"
      class="form-control"
      [ngbTypeahead]="sandbox.searchForContacts"
      [resultFormatter]="sandbox.formatter"
      [inputFormatter]="sandbox.formatter"
      (selectItem)="sandbox.setSelectedContact($event.item)"
    />
    <button type="button" class="btn btn-primary btn-sm" (click)="sandbox.assignContactToGroup(); clearSearchInput()">
      {{ 'DistributionGroupMember.AssignToGroupBtn' | translate }}
    </button>
    <button type="button" class="btn btn-primary btn-sm btn-sm" (click)="sandbox.cancelMembersDisplay()">
      {{ 'CloseBtn' | translate }}
    </button>
  </div>
</div>
<div class="distribution-group-members">
  <ag-grid-angular
    autoResizeColumns
    class="ag-theme-balham"
    [gridOptions]="gridOptions"
    [columnDefs]="columnDefinition"
    [rowSelection]="'single'"
    [frameworkComponents]="frameworkComponents"
    [rowData]="sandbox.distributionGroupMember$ | async"
    [overlayNoRowsTemplate]="noRowsTemplate"
  >
  </ag-grid-angular>
  <app-spinner [isRunning]="sandbox.distributionGroupMemberLoading$ | async"></app-spinner>
</div>