outcomes.html

<ion-header>
  <ion-navbar color="office">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      Outcomes
    </ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="refresh()">
        <ion-icon name="refresh"></ion-icon>
      </button>
      <button ion-button icon-only (click)="showInbox()" class="inbox-button">
        <ion-icon name="filing"></ion-icon>
      </button>
      <button ion-button icon-only (click)="showFilters()" class="filter-button">
        <ion-icon name="funnel"></ion-icon>
      </button>
      <button ion-button icon-only (click)="showOptions($event)">
        <ion-icon name="more"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-menu [content]="filterContent" side="right" id="filter-menu">
  <ion-toolbar>
    <ion-title>Filters</ion-title>
  </ion-toolbar>
  <ion-list>
    <ion-searchbar (ionInput)="search($event.target.value)"></ion-searchbar>
    <ion-item>
      <ion-label>Scope</ion-label>
      <ion-select class="outcome-scope-select" [ngModel]="scope$ | async" (ionChange)="setScope($event.valueOf())">
        <ion-option value="{{undefined}}" [selected]="!(_scope$ | async)">any</ion-option>
        <ion-option value="{{scope}}" *ngFor="let scope of scopes">{{scope}}</ion-option>
      </ion-select>
    </ion-item>
    <ion-item>
      <ion-label>Status</ion-label>
      <ion-select class="outcome-status-select" [ngModel]="status$ | async" (ionChange)="setStatus($event.valueOf())">
        <ion-option value="{{undefined}}" [selected]="!(status$ | async)">any</ion-option>
        <ion-option value="{{status}}" *ngFor="let status of statuses">{{status}}</ion-option>
      </ion-select>
    </ion-item>
    <ion-item>
      <ion-label>Show completed</ion-label>
      <ion-toggle [checked]="showCompleted$ | async" (ionChange)="toggleCompleted()"></ion-toggle>
    </ion-item>
    <ion-item>
      <button ion-button menuClose="filter-menu" (click)="hideFilters()">
        Close
      </button>
    </ion-item>
  </ion-list>
</ion-menu>

<ion-content #filterContent>
  <ion-spinner *ngIf="loading"></ion-spinner>
  <div *ngIf="!loading">
    <ion-list no-margin class="outcomes-list">
      <ng-container *ngFor="let edge of outcomes?.edges">
        <outcome *ngIf="edge.node as outcome" [id]="outcome.id"></outcome>
      </ng-container>
      <button ion-button *ngIf="hasNextPage" (click)="loadMore()" block clear color="mid">More</button>
    </ion-list>
  </div>
  <div class="fab-bottom-spacer"></div>
  <ion-fab bottom right>
    <button ion-fab (click)="newOutcome()" class="quickadd-button">
      <ion-icon name="add"></ion-icon>
    </button>
  </ion-fab>
</ion-content>

<ion-footer>
  <app-toolbar app="office"></app-toolbar>
</ion-footer>

outcomes.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { OutcomesPage } from './outcomes';
import {AppToolbarComponentModule} from "../../../components/app-toolbar/app-toolbar.module";
import {OutcomeComponentModule} from "../../../components/outcome/outcome.module";

@NgModule({
  declarations: [
    OutcomesPage,
  ],
  imports: [
    IonicPageModule.forChild(OutcomesPage),
    OutcomeComponentModule,
    AppToolbarComponentModule,
  ],
  exports: [
    OutcomesPage
  ]
})
export class OutcomesPageModule {}

outcomes.ts

import {Component, OnInit} from '@angular/core';
import {IonicPage, MenuController, NavController, NavParams, PopoverController} from 'ionic-angular';
import {Scope, Scopes} from "../../../models/scope";
import {Observable} from "rxjs/Observable";
import {Status, Statuses} from "../../../models/status";
import {BehaviorSubject} from "rxjs/BehaviorSubject";
import {Apollo} from "apollo-angular";
import gql from "graphql-tag";

const OutcomesQuery = gql`
  query Outcomes($status: String, $closed: Boolean, $scope: String, $search: String, $cursor: String) {
    viewer {
      id
      outcomes(inbox: false, status: $status, closed: $closed, scope: $scope, search: $search, first: 20, after: $cursor) {
        pageInfo {
          hasNextPage
          endCursor
        }
        edges {
          node {
            id
          }
        }
      }
    }
  }
`;

@IonicPage()
@Component({
  selector: 'page-outcomes',
  templateUrl: 'outcomes.html',
})
export class OutcomesPage implements OnInit {
  loading = true;
  query$;
  scopes: Scope[] = Scopes;
  _scope$ = new BehaviorSubject<Scope>(undefined);
  scope$: Observable<Scope>;
  statuses: Status[] = Statuses;
  _status$ = new BehaviorSubject<Status>(undefined);
  status$: Observable<Status>;
  _search$ = new BehaviorSubject<string>(undefined);
  search$: Observable<string>;
  _showCompleted$ = new BehaviorSubject<boolean>(false);
  hasNextPage = false;
  cursor;
  showCompleted$: Observable<boolean>;
  outcomes;

  constructor(public navCtrl: NavController, public navParams: NavParams, private apollo: Apollo, public menuCtrl: MenuController, public popoverCtrl: PopoverController) {
  }

  ngOnInit(): void {
    this.scope$ = this._scope$.asObservable();
    this.status$ = this._status$.asObservable();
    this.search$ = this._search$.asObservable();
    this.showCompleted$ = this._showCompleted$.asObservable();
    this.query$ = this.apollo.watchQuery({
      query: OutcomesQuery,
      variables: {
        status: this.status$,
        closed: this.showCompleted$.map(showCompleted => showCompleted ? null : false),
        scope: this._scope$,
        search: this.search$,
      }
    });
    this.query$.valueChanges.subscribe(data => this.processQuery(data), console.error);
  }

  ionViewDidEnter() {
    this.refresh();
  }

  refresh() {
    this.loading = true;
    this.hasNextPage = false;
    this.query$.refetch().then(data => this.processQuery(data));
    // this.query$.refetch()
  }

  processQuery({data, loading}) {
    this.loading = loading;
    this.cursor = data.viewer.outcomes.pageInfo.endCursor;
    this.outcomes = data.viewer.outcomes;
    setTimeout(() => {
      this.hasNextPage = data.viewer.outcomes.pageInfo.hasNextPage;
    }, this.hasNextPage ? 0 : 2000)
  }

  loadMore() {
    this.hasNextPage = false;
    this.query$.fetchMore({
      variables: {cursor: this.cursor},
      updateQuery: (previousResult, { fetchMoreResult }) => {
        if (!fetchMoreResult) { return previousResult; }
        return {
          ...previousResult,
          viewer: {
            ...previousResult.viewer,
            outcomes: {
              ...fetchMoreResult.viewer.outcomes,
              edges: [
                ...previousResult.viewer.outcomes.edges,
                ...fetchMoreResult.viewer.outcomes.edges,
              ]
            }
          }
        };
      },
    });
  }

  setScope(scope: Scope) {
    this._scope$.next(scope)
  }

  setStatus(status: Status) {
    this._status$.next(status);
  }

  toggleCompleted() {
    this._showCompleted$.next(!this._showCompleted$.value)
  }

  search(query) {
    this._search$.next(query);
  }

  showFilters() {
    this.menuCtrl.open('filter-menu');
  }

  hideFilters() {
    this.menuCtrl.close('filter-menu');
  }

  showInbox() {
    this.navCtrl.push("InboxPage")
  }

  newOutcome() {
    this.navCtrl.push("OutcomeFormPage", {initial: {inbox: false}})
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad OutcomesPage');
  }

  showOptions(source) {
    let popover = this.popoverCtrl.create('OfficeOptionsPage');
    popover.present({ev: source});
  }
}