feat: add the app

src/app/modules/data/list/data-list-item.component.ts

@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2018 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+import {Component, Input, OnInit} from '@angular/core';
+import {SCThings} from '@openstapps/core';
+
+@Component({
+  selector: 'stapps-data-list-item',
+  templateUrl: 'data-list-item.html'
+})
+export class DataListItem implements OnInit {
+  @Input() item: SCThings;
+
+  constructor() {
+    // noop
+    // this.item is not available yet
+  }
+
+  ngOnInit() {
+    // noop
+    // this.item is available now - the template is loaded and compiled
+  }
+}

src/app/modules/data/list/data-list-item.html

@@ -0,0 +1,17 @@
+<ion-item text-wrap button="true" lines="inset" [routerLink]="['/data-detail', item.uid]">
+  <ion-thumbnail slot="start">
+    <img src="../../../assets/imgs/logo.png">
+  </ion-thumbnail>
+  <ion-label [ngSwitch]="item.type" lines="full">
+      <div>
+        <stapps-dish-list-item [item]="item" *ngSwitchCase="'Dish'"></stapps-dish-list-item>
+
+        <stapps-event-list-item [item]="item" *ngSwitchCase="'Event'"></stapps-event-list-item>
+
+        <span *ngSwitchDefault>
+          {{item.name}}<br/>
+          <ion-note>{{item.type}}</ion-note>
+        </span>
+      </div>
+    </ion-label>
+  </ion-item>

src/app/modules/data/list/data-list.component.ts

@@ -0,0 +1,101 @@
+/*
+ * Copyright (C) 2018 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+import {Component} from '@angular/core';
+import {AlertController, LoadingController} from '@ionic/angular';
+import {Client} from '@openstapps/api/lib/client';
+import {SCThing} from '@openstapps/core';
+import {Subject} from 'rxjs';
+import {debounceTime, distinctUntilChanged} from 'rxjs/operators';
+import {StAppsWebHttpClient} from '../data.provider';
+
+@Component({
+  selector: 'stapps-data-list',
+  templateUrl: 'data-list.html',
+})
+export class DataListComponent {
+  selectedItem: any;
+  items: SCThing[] = [];
+
+  client: Client;
+
+  size: number = 30;
+  from: number = 0;
+
+  query: string;
+  queryChanged: Subject<string> = new Subject<string>();
+
+  loading: HTMLIonLoadingElement;
+
+  constructor(private loadingController: LoadingController,
+              private alertController: AlertController,
+              swHttpClient: StAppsWebHttpClient) {
+    this.client = new Client(swHttpClient, 'https://stappsbe01.innocampus.tu-berlin.de', '1.0.6');
+
+    this.queryChanged
+      .pipe(
+      debounceTime(1000),
+      distinctUntilChanged())
+      .subscribe((model) => {
+        this.from = 0;
+        this.query = model;
+        this.items = [];
+        this.fetchItems();
+      });
+
+    this.fetchItems();
+  }
+
+  search(query: string) {
+    this.queryChanged.next(query);
+  }
+
+  async loadMore(event: any): Promise<any> {
+    this.from += this.size;
+    await this.fetchItems();
+    event.target.complete();
+    return;
+  }
+
+  private async fetchItems(): Promise<any> {
+    if (this.from === 0) {
+      this.loading = await this.loadingController.create();
+      await this.loading.present();
+    }
+
+    return this.client.search({
+      from: this.from,
+      query: this.query,
+      size: this.size
+    } as any).then((result) => {
+      result.data.forEach((item) => {
+        this.items.push(item);
+      });
+
+      if (this.from === 0) {
+        this.loading.dismiss();
+      }
+    }, async (err) => {
+      const alert: HTMLIonAlertElement = await this.alertController.create({
+        buttons: ['Dismiss'],
+        header: 'Error',
+        subHeader: err.message,
+      });
+
+      await alert.present();
+
+      await this.loading.dismiss();
+    });
+  }
+}

src/app/modules/data/list/data-list.html

@@ -0,0 +1,22 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+      <ion-menu-button></ion-menu-button>
+    </ion-buttons>
+
+    <ion-searchbar (ngModelChange)="search($event)" [(ngModel)]="query"></ion-searchbar>
+
+    <!--<ion-title>List</ion-title>-->
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-list *ngFor="let item of items">
+      <stapps-data-list-item [item]="item"></stapps-data-list-item>
+  </ion-list>
+
+  <ion-infinite-scroll (ionInfinite)="loadMore($event)">
+    <ion-infinite-scroll-content></ion-infinite-scroll-content>
+  </ion-infinite-scroll>
+</ion-content>

src/app/modules/data/list/data-list.scss

@@ -0,0 +1,3 @@
+stapps-data-list {
+
+}