refactor: make data list reusable component

Closes #98

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

@@ -0,0 +1,275 @@
+/*
+ * Copyright (C) 2018-2021 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 {Router} from '@angular/router';
+import {AlertController} from '@ionic/angular';
+import {
+  SCFacet,
+  SCSearchFilter,
+  SCSearchQuery,
+  SCSearchSort,
+  SCThings,
+} from '@openstapps/core';
+import {NGXLogger} from 'ngx-logger';
+import {Subject, Subscription} from 'rxjs';
+import {debounceTime, distinctUntilChanged} from 'rxjs/operators';
+import {ContextMenuService} from '../../menu/context/context-menu.service';
+import {SettingsProvider} from '../../settings/settings.provider';
+import {DataRoutingService} from '../data-routing.service';
+import {DataProvider} from '../data.provider';
+
+/**
+ * SearchPageComponent queries things and shows list of things as search results and filter as context menu
+ */
+@Component({
+  selector: 'stapps-search-page',
+  templateUrl: 'search-page.html',
+  providers: [ContextMenuService],
+})
+export class SearchPageComponent implements OnInit {
+  /**
+   * Api query filter
+   */
+  filterQuery: SCSearchFilter | undefined;
+  /**
+   * Filters the search should be initialized with
+   */
+  @Input() forcedFilter?: SCSearchFilter;
+  /**
+   * Thing counter to start query the next page from
+   */
+  from = 0;
+  /**
+   * Container for queried things
+   */
+  items: Promise<SCThings[]>;
+  /**
+   * Page size of queries
+   */
+  pageSize = 30;
+  /**
+   * Search value from search bar
+   */
+  queryText: string;
+  /**
+   * Subject to handle search text changes
+   */
+  queryTextChanged = new Subject<string>();
+  /**
+   * Time to wait for search query if search text is changing
+   */
+  searchQueryDueTime = 1000;
+  /**
+   * Api query sorting
+   */
+  sortQuery: SCSearchSort | undefined;
+  /**
+   * Array of all subscriptions to Observables
+   */
+  subscriptions: Subscription[] = [];
+
+  /**
+   * Injects the providers and creates subscriptions
+   *
+   * @param alertController AlertController
+   * @param dataProvider DataProvider
+   * @param contextMenuService ContextMenuService
+   * @param settingsProvider SettingsProvider
+   * @param logger An angular logger
+   * @param dataRoutingService DataRoutingService
+   * @param router Router
+   */
+  constructor(
+    protected readonly alertController: AlertController,
+    protected dataProvider: DataProvider,
+    protected readonly contextMenuService: ContextMenuService,
+    protected readonly settingsProvider: SettingsProvider,
+    protected readonly logger: NGXLogger,
+    protected dataRoutingService: DataRoutingService,
+    protected router: Router,
+  ) {
+    this.initialize();
+
+    this.subscriptions.push(this.queryTextChanged
+      .pipe(
+        debounceTime(this.searchQueryDueTime),
+        distinctUntilChanged())
+      .subscribe((model) => {
+        this.from = 0;
+        this.queryText = model;
+        this.fetchAndUpdateItems();
+      }));
+
+    this.subscriptions.push(this.contextMenuService.filterQueryChanged$.subscribe((query) => {
+      this.filterQuery = query;
+      this.from = 0;
+      this.fetchAndUpdateItems();
+    }));
+    this.subscriptions.push(this.contextMenuService.sortQueryChanged$.subscribe((query) => {
+      this.sortQuery = query;
+      this.from = 0;
+      this.fetchAndUpdateItems();
+    }));
+
+    this.fetchAndUpdateItems();
+
+    /**
+     * Subscribe to 'settings.changed' events
+     */
+    this.subscriptions.push(this.settingsProvider.settingsActionChanged$.subscribe(({type, payload}) => {
+        if (type === 'stapps.settings.changed') {
+          const {category, name, value} = payload!;
+          this.logger.log(`received event "settings.changed" with category:
+            ${category}, name: ${name}, value: ${JSON.stringify(value)}`);
+        }
+      },
+    ));
+
+    this.subscriptions.push(this.dataRoutingService.itemSelectListener()
+      .subscribe((item) => {
+        void this.router.navigate(['data-detail', item.uid]);
+    }));
+  }
+
+  /**
+   * Fetches items with set query configuration
+   *
+   * @param append If true fetched data gets appended to existing, override otherwise (default false)
+   */
+  protected async fetchAndUpdateItems(append = false): Promise<void> {
+    // build query search options
+    const searchOptions: SCSearchQuery = {
+      from: this.from,
+      size: this.pageSize,
+    };
+    const filters: SCSearchFilter[] = [];
+
+    if (this.queryText && this.queryText.length > 0) {
+      // add query string
+      searchOptions.query = this.queryText;
+    }
+
+    if (this.sortQuery) {
+      // add query sorting
+      searchOptions.sort = [this.sortQuery];
+    }
+
+    for (const filter of [this.forcedFilter, this.filterQuery]) {
+      if (typeof filter !== 'undefined') {
+        filters.push(filter);
+      }
+    }
+    if (filters.length > 0) {
+      searchOptions.filter = {
+        arguments: {
+          filters: filters,
+          operation: 'and',
+        },
+        type: 'boolean',
+      };
+    }
+
+    return this.dataProvider.search(searchOptions)
+      .then(async (result) => {
+        if (append) {
+          let items = await this.items;
+          // append results
+          items = items.concat(result.data);
+          this.items = (async () => items)();
+        } else {
+          // override items with results
+          this.items = (async () => {
+            this.updateContextFilter(result.facets);
+
+            return result.data;
+          })();
+        }
+      }, async (err) => {
+        const alert: HTMLIonAlertElement = await this.alertController.create({
+          buttons: ['Dismiss'],
+          header: 'Error',
+          subHeader: err.message,
+        });
+
+        await alert.present();
+      });
+  }
+
+  /**
+   * Set starting values (e.g. forced filter, which can be set in components inheriting this one)
+   */
+  // tslint:disable-next-line:prefer-function-over-method
+  initialize() {
+    // nothing to do here
+  }
+
+  /**
+   * Loads next page of things
+   */
+  // tslint:disable-next-line:no-any
+  async loadMore(event: any): Promise<void> {
+    this.from += this.pageSize;
+    await this.fetchAndUpdateItems(true);
+    event.target.complete();
+  }
+
+  /**
+   * Unsubscribe from Observables
+   */
+  ngOnDestroy() {
+    for (const subscription of this.subscriptions) {
+      subscription.unsubscribe();
+    }
+  }
+
+  /**
+   * Initialises the possible sort options in ContextMenuService
+   */
+  ngOnInit(): void {
+    this.contextMenuService.setContextSort({
+      name: 'sort',
+      reversed: false,
+      value: 'relevance',
+      values: [
+        {
+          reversible: false,
+          value: 'relevance',
+        },
+        {
+          reversible: true,
+          value: 'name',
+        },
+        {
+          reversible: true,
+          value: 'type',
+        },
+      ],
+    });
+  }
+
+  /**
+   * Search event of search bar
+   */
+  searchStringChanged(queryValue: string) {
+    this.queryTextChanged.next(queryValue);
+  }
+
+  /**
+   * Updates the possible filter options in ContextMenuService with facets
+   */
+  updateContextFilter(facets: SCFacet[]) {
+    this.contextMenuService.updateContextFilter(facets);
+  }
+}