person-list.html

<ion-header>
  <ion-navbar color="navbar">
    <button ion-button icon-only menuToggle color="cancel">
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>People</ion-title>
    <ion-buttons right *ngIf="user">
      <button ion-button icon-start [solid]="website == true ? 'true' : null" color="primary" *ngIf="user.isOwner() || user.isAdmin()" (click)="addPerson($event)">
        <ion-icon ios="md-add" md="md-add"></ion-icon>
        <span *ngIf="website == true">Add</span>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-toolbar>
   <ion-grid>
    <ion-row align-items-center justify-content-start>
     <ion-col col-6 text-left>
      <ion-searchbar start placeholder="Search..." [debounce]="250" [(ngModel)]="filter" (ionInput)="onFilter($event)"></ion-searchbar>
     </ion-col>
     <ion-col col-6 text-right *ngIf="user && user.isOwnerOrAdmin()">
      <button ion-button clear (click)="showActionsPopover($event)">
       Actions &nbsp; <ion-icon ios="md-arrow-dropdown" md="md-arrow-dropdown"></ion-icon>
      </button>
      <button ion-button icon-only clear>
       <ion-checkbox [class.indeterminate]=selectAllIndeterminate [(ngModel)]="selectAll" (ionChange)="onChangeSelectAll($event)"></ion-checkbox>
      </button>
     </ion-col>
    </ion-row>
   </ion-grid>
  </ion-toolbar>
  <ion-refresher (ionRefresh)="loadUpdates(false, $event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
  <div text-center class="spinner" *ngIf="loading == true">
    <ion-spinner name="ios"></ion-spinner>
  </div>
  <div class="zero-state" *ngIf="loading == false && filter.length == 0 && organization && organization.people && organization.people.length <= 1">
    <img src="assets/images/zero-add-people.png"/>
    <h2>Adding People</h2>
    <h6>You'll need a person's email address or phone number. You can also import a spreadsheet.</h6>
    <button ion-button color="primary" (click)="addPerson($event)"
      *ngIf="user.isOwner() || user.isAdmin()">Add People To TenFour</button>
  </div>
  <ion-list *ngIf="organization && organization.people && loading == false">
    <ion-item class="empty" no-lines text-wrap margin-top *ngIf="filter.length > 0 && organization.people.length == 0">
      <h2 text-center padding-top margin-top>There are no people with <i>{{filter}}</i>...</h2>
    </ion-item>
    <div *ngIf="filter.length > 0 || (filter.length == 0 && organization.people.length > 1)">
      <div *ngFor="let grouping of organization.people | groupBy:'name':firstCharacter:true">
        <ion-list-header>{{grouping.key}}</ion-list-header>
        <person-row [person]="person" [user]="user" [selectable]="user && user.isOwnerOrAdmin()"
          (rowSelected)="onPersonSelected(person, $event)"
          (rowClicked)="showPerson(person, $event)" (removeSelected)="removePerson(person, $event)"
          *ngFor="let person of grouping.values"></person-row>
      </div>
    </div>
  </ion-list>
  <ion-infinite-scroll (ionInfinite)="loadMore($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>