feat: add filter chips for news

src/app/modules/news/elements/news-filter-settings/news-settings-filter.component.html

@@ -0,0 +1,9 @@
+<ng-container *ngFor="let setting of settings">
+  <stapps-chip-filter
+    [displayValue]="setting | settingValueTranslate | titlecase"
+    [value]="setting"
+    [active]="!!filtersMap.get($any(setting.name))"
+    (toggle)="stateChanged($any($event))"
+  >
+  </stapps-chip-filter>
+</ng-container>

src/app/modules/news/elements/news-filter-settings/news-settings-filter.component.ts

@@ -0,0 +1,85 @@
+/*
+ * Copyright (C) 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, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {
+  newsFilterSettingsFieldsMapping,
+  NewsFilterSettingsNames,
+} from '../../news-filter-settings';
+import {SCSearchValueFilter, SCSetting} from '@openstapps/core';
+import {DataProvider} from '../../../data/data.provider';
+
+@Component({
+  selector: 'stapps-news-settings-filter',
+  templateUrl: './news-settings-filter.component.html',
+  styleUrls: ['./news-settings-filter.component.scss'],
+})
+export class NewsSettingsFilterComponent implements OnInit {
+  /**
+   * A map of the filters where the keys are settings names
+   */
+  filtersMap = new Map<NewsFilterSettingsNames, SCSearchValueFilter>();
+
+  /**
+   * Emits the current filters
+   */
+  @Output() filtersChanged = new EventEmitter<SCSearchValueFilter[]>();
+
+  /**
+   * Provided settings to show the filters for
+   */
+  @Input() settings: SCSetting[];
+
+  ngOnInit() {
+    for (const setting of this.settings) {
+      this.filtersMap.set(
+        setting.name as NewsFilterSettingsNames,
+        DataProvider.createValueFilter(
+          newsFilterSettingsFieldsMapping[
+            setting.name as NewsFilterSettingsNames
+          ],
+          setting.value as string,
+        ),
+      );
+    }
+
+    this.filtersChanged.emit([...this.filtersMap.values()]);
+  }
+
+  /**
+   * To be executed when a chip filter has been enabled/disabled
+   *
+   * @param setting The value of the filter
+   */
+  stateChanged(setting: SCSetting) {
+    if (
+      typeof this.filtersMap.get(setting.name as NewsFilterSettingsNames) !==
+      'undefined'
+    ) {
+      this.filtersMap.delete(setting.name as NewsFilterSettingsNames);
+    } else {
+      this.filtersMap.set(
+        setting.name as NewsFilterSettingsNames,
+        DataProvider.createValueFilter(
+          newsFilterSettingsFieldsMapping[
+            setting.name as NewsFilterSettingsNames
+          ],
+          setting.value as string,
+        ),
+      );
+    }
+
+    this.filtersChanged.emit([...this.filtersMap.values()]);
+  }
+}

src/app/modules/news/news-filter-settings.ts

@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 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 {SCSettingCategories, SCThingsField} from '@openstapps/core';
+/**
+ * Category of settings to use for news filter
+ */
+export const newsFilterSettingsCategory: SCSettingCategories = 'profile';
+/**
+ * Settings to use for news filter
+ */
+export type NewsFilterSettingsNames = 'language' | 'group';
+/**
+ * The mapping between settings and corresponding data fields for building a value filter
+ */
+export const newsFilterSettingsFieldsMapping: {
+  [key in NewsFilterSettingsNames]: SCThingsField;
+} = {
+  language: 'inLanguage',
+  group: 'audiences',
+};

src/app/modules/news/news.module.ts

@@ -18,11 +18,15 @@ import {RouterModule, Routes} from '@angular/router';
 import {IonicModule} from '@ionic/angular';
 import {TranslateModule} from '@ngx-translate/core';
 import {MomentModule} from 'ngx-moment';
+import {ThingTranslateModule} from '../../translation/thing-translate.module';
 import {DataModule} from '../data/data.module';
 import {SettingsProvider} from '../settings/settings.provider';
-import {NewsItemComponent} from './page/news-item.component';
+import {NewsItemComponent} from './item/news-item.component';
 import {NewsPageComponent} from './page/news-page.component';
-import {SkeletonNewsItemComponent} from './page/skeleton-news-item.component';
+import {SkeletonNewsItemComponent} from './item/skeleton-news-item.component';
+import {ChipFilterComponent} from '../data/chips/filter/chip-filter.component';
+import {SettingsModule} from '../settings/settings.module';
+import {NewsSettingsFilterComponent} from './elements/news-filter-settings/news-settings-filter.component';
 
 const newsRoutes: Routes = [{path: 'news', component: NewsPageComponent}];
 
@@ -31,17 +35,21 @@ const newsRoutes: Routes = [{path: 'news', component: NewsPageComponent}];
  */
 @NgModule({
   declarations: [
-    NewsItemComponent,
     NewsPageComponent,
     SkeletonNewsItemComponent,
+    NewsItemComponent,
+    ChipFilterComponent,
+    NewsSettingsFilterComponent,
   ],
   imports: [
-    CommonModule,
-    DataModule,
     IonicModule.forRoot(),
-    MomentModule,
-    RouterModule.forChild(newsRoutes),
     TranslateModule.forChild(),
+    RouterModule.forChild(newsRoutes),
+    CommonModule,
+    MomentModule,
+    DataModule,
+    ThingTranslateModule,
+    SettingsModule,
   ],
   providers: [SettingsProvider],
 })

src/app/modules/news/news.provider.ts

@@ -13,7 +13,13 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {Injectable} from '@angular/core';
-import {SCMessage} from '@openstapps/core';
+import {
+  SCBooleanFilterArguments,
+  SCMessage,
+  SCSearchBooleanFilter,
+  SCSearchFilter,
+  SCSearchQuery,
+} from '@openstapps/core';
 import {DataProvider} from '../data/data.provider';
 /**
  * Service for providing news messages
@@ -22,34 +28,59 @@ import {DataProvider} from '../data/data.provider';
   providedIn: 'root',
 })
 export class NewsProvider {
-  constructor(private dataProvider: DataProvider) {
-  }
+  constructor(private dataProvider: DataProvider) {}
 
   /**
    * Get news messages
    *
    * @param size How many messages/news to fetch
    * @param from From which (results) page to start
+   * @param filters Additional filters to apply
    */
-  async getList(size: number, from: number): Promise<SCMessage[]> {
-    const result = await this.dataProvider.search({
+  async getList(
+    size: number,
+    from: number,
+    filters?: SCSearchFilter[],
+  ): Promise<SCMessage[]> {
+    const query: SCSearchQuery = {
       filter: {
-        type: 'value',
+        type: 'boolean',
         arguments: {
-          field: 'type',
-          value: 'message',
+          filters: [
+            {
+              type: 'value',
+              arguments: {
+                field: 'type',
+                value: 'message',
+              },
+            },
+          ],
+          operation: 'and',
         },
       },
-      sort: [{
-        type: 'generic',
-        arguments: {
-          field: 'datePublished',
+      sort: [
+        {
+          type: 'generic',
+          arguments: {
+            field: 'datePublished',
+          },
+          order: 'desc',
         },
-        order: 'desc',
-      }],
+      ],
       size: size,
       from: from,
-    });
+    };
+
+    if (typeof filters !== 'undefined') {
+      for (const filter of filters) {
+        (
+          (query.filter as SCSearchBooleanFilter)
+            .arguments as SCBooleanFilterArguments
+        ).filters.push(filter);
+      }
+    }
+
+    const result = await this.dataProvider.search(query);
 
     return result.data as SCMessage[];
   }

src/app/modules/news/page/news-page.component.ts

@@ -12,9 +12,20 @@
  * 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 {Component, OnInit} from '@angular/core';
 import {IonRefresher} from '@ionic/angular';
-import {SCMessage} from '@openstapps/core';
+import {
+  SCMessage,
+  SCSearchFilter,
+  SCSearchValueFilter,
+  SCSetting,
+} from '@openstapps/core';
+import {SettingsProvider} from '../../settings/settings.provider';
+import {
+  newsFilterSettingsCategory,
+  newsFilterSettingsFieldsMapping,
+  NewsFilterSettingsNames,
+} from '../news-filter-settings';
 import {NewsProvider} from '../news.provider';
 /**
  * News page component
@@ -23,46 +34,86 @@ import {NewsProvider} from '../news.provider';
   selector: 'stapps-news-page',
   templateUrl: 'news-page.html',
 })
-export class NewsPageComponent {
+export class NewsPageComponent implements OnInit {
   /**
    * Thing counter to start query the next page from
    */
   from = 0;
-  /**
-   * Page size of queries
-   */
-  pageSize = 10;
+
   /**
    * News (messages) to show
    */
   news: SCMessage[] = [];
 
-  constructor(private newsProvider: NewsProvider) {}
+  /**
+   * Page size of queries
+   */
+  pageSize = 10;
+
+  /**
+   * Relevant settings
+   */
+  settings: SCSetting[];
+
+  /**
+   * Active filters
+   */
+  filters: SCSearchFilter[];
+
+  constructor(
+    private newsProvider: NewsProvider,
+    private settingsProvider: SettingsProvider,
+  ) {}
 
   /**
    * Fetch news from the backend
    */
   async fetchNews() {
-    this.news = await this.newsProvider.getList(this.pageSize, this.from);
+    this.from = 0;
+    this.news = await this.newsProvider.getList(this.pageSize, this.from, [
+      ...this.filters,
+    ]);
   }
 
   /**
    * Loads more news
    *
-   * @param event Signal from the infinite scroll to load more data
+   * @param infiniteScrollElement Infinite scroll element
    */
-  // tslint:disable-next-line:no-any
-  async loadMore(event: any): Promise<void> {
+  async loadMore(
+    infiniteScrollElement: HTMLIonInfiniteScrollElement,
+  ): Promise<void> {
     this.from += this.pageSize;
-    this.news = this.news.concat(await this.newsProvider.getList(this.pageSize, this.from));
-    event.target.complete();
+    this.news = [
+      ...this.news,
+      ...(await this.newsProvider.getList(this.pageSize, this.from, [
+        ...this.filters,
+      ])),
+    ];
+    await infiniteScrollElement.complete();
   }
 
   /**
    * Initialize the local variables on component initialization
    */
-  ngOnInit() {
-    void this.fetchNews();
+  async ngOnInit() {
+    // Helper method to provide the relevant settings
+    const getNewsSettings = async (settingNames: NewsFilterSettingsNames[]) => {
+      const settings = [];
+      for (const settingName of settingNames) {
+        settings.push(
+          await this.settingsProvider.getSetting(
+            newsFilterSettingsCategory,
+            settingName,
+          ),
+        );
+      }
+      return settings;
+    };
+
+    this.settings = await getNewsSettings(
+      Object.keys(newsFilterSettingsFieldsMapping) as NewsFilterSettingsNames[],
+    );
   }
 
   /**
@@ -72,12 +123,21 @@ export class NewsPageComponent {
    */
   async refresh(refresher: IonRefresher) {
     try {
-      this.from = 0;
       await this.fetchNews();
-    } catch (e) {
+    } catch {
       this.news = [];
     } finally {
       await refresher.complete();
     }
   }
+
+  /**
+   * Executed when filters have been changed
+   *
+   * @param filters Current filters to be used
+   */
+  toggleFilter(filters: SCSearchValueFilter[]) {
+    this.filters = filters;
+    void this.fetchNews();
+  }
 }

src/app/modules/news/page/news-page.html

@@ -4,19 +4,31 @@
       <ion-back-button></ion-back-button>
       <ion-menu-button></ion-menu-button>
     </ion-buttons>
-    <ion-title>{{'news.title'  | translate}}</ion-title>
+    <ion-title>{{ 'news.title' | translate }}</ion-title>
   </ion-toolbar>
 </ion-header>
 
 <ion-content fullscreen>
   <ion-refresher slot="fixed" (ionRefresh)="refresh($event.target)">
-    <ion-refresher-content pullingIcon="chevron-down-outline" pullingText="{{'data.REFRESH_ACTION' | translate}}"
-      refreshingText="{{'data.REFRESHING' | translate}}"
-      refreshingSpinner="crescent">
+    <ion-refresher-content
+      pullingIcon="chevron-down-outline"
+      pullingText="{{ 'data.REFRESH_ACTION' | translate }}"
+      refreshingText="{{ 'data.REFRESHING' | translate }}"
+      refreshingSpinner="crescent"
+    >
     </ion-refresher-content>
   </ion-refresher>
   <ion-grid>
-    <ion-row *ngIf="news.length === 0">
+    <ion-row>
+      <ion-col size="12">
+        <stapps-news-settings-filter
+          *ngIf="settings"
+          [settings]="settings"
+          (filtersChanged)="toggleFilter($event)"
+        ></stapps-news-settings-filter>
+      </ion-col>
+    </ion-row>
+    <ion-row *ngIf="!news">
       <ion-col size="12" size-md="6" *ngFor="let skeleton of [1, 2, 3, 4, 5]">
         <stapps-skeleton-news-item></stapps-skeleton-news-item>
       </ion-col>
@@ -27,7 +39,14 @@
       </ion-col>
     </ion-row>
   </ion-grid>
-  <ion-infinite-scroll id="infinite-scroll" threshold="20%" (ionInfinite)="loadMore($event)">
+  <ion-label *ngIf="news.length === 0" class="notFoundContainer">
+    {{ 'search.nothing_found' | translate | titlecase }}
+  </ion-label>
+  <ion-infinite-scroll
+    id="infinite-scroll"
+    threshold="20%"
+    (ionInfinite)="loadMore($event.target)"
+  >
     <ion-infinite-scroll-content loading-spinner="crescent">
     </ion-infinite-scroll-content>
   </ion-infinite-scroll>