feat: add filter chips for news

src/app/modules/data/chips/filter/chip-filter.component.html

@@ -0,0 +1,7 @@
+<ion-chip
+  [attr.color]="active ? 'primary' : 'medium'"
+  (click)="emitToggle(value)"
+>
+  <ion-icon name="checkmark-circle" *ngIf="active"></ion-icon>
+  <ion-label>{{ displayValue }}</ion-label>
+</ion-chip>

src/app/modules/data/chips/filter/chip-filter.component.ts

@@ -0,0 +1,51 @@
+/*
+ * 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, Output} from '@angular/core';
+/**
+ * Shows a chip filter
+ */
+@Component({
+  selector: 'stapps-chip-filter',
+  templateUrl: './chip-filter.component.html',
+  styleUrls: ['./chip-filter.component.scss'],
+})
+export class ChipFilterComponent {
+  /**
+   * If the chip (filter) is active
+   */
+  @Input() active: boolean;
+
+  /**
+   * Text to display on the chip
+   */
+  @Input() displayValue: string;
+
+  /**
+   * Emits when the chip has been activated/deactivated
+   */
+  @Output() toggle = new EventEmitter<unknown>();
+
+  /**
+   * Value to emit when chip has been activated/deactivated
+   */
+  @Input() value: unknown;
+
+  /**
+   * Signalize that the chip filter has been activated/deactivated
+   */
+  emitToggle(value: unknown) {
+    this.toggle.emit(value);
+  }
+}

src/app/modules/data/data.provider.ts

@@ -19,8 +19,10 @@ import {
   SCMultiSearchResponse,
   SCSearchRequest,
   SCSearchResponse,
+  SCSearchValueFilter,
   SCThingOriginType,
   SCThings,
+  SCThingsField,
   SCThingType,
 } from '@openstapps/core';
 import {SCSaveableThing} from '@openstapps/core';
@@ -88,6 +90,25 @@ export class DataProvider {
    */
   storageProvider: StorageProvider;
 
+  /**
+   * Simplify creation of a value filter
+   *
+   * @param field Database field for apply the filter to
+   * @param value Value to match with
+   */
+  static createValueFilter(
+    field: SCThingsField,
+    value: string,
+  ): SCSearchValueFilter {
+    return {
+      type: 'value',
+      arguments: {
+        field: field,
+        value: value,
+      },
+    };
+  }
+
   /**
    * TODO
    *

src/app/modules/data/detail/data-detail-content.component.ts

@@ -20,6 +20,7 @@ import {SCThings} from '@openstapps/core';
  */
 @Component({
   selector: 'stapps-data-detail-content',
+  styleUrls: ['data-detail-content.scss'],
   templateUrl: 'data-detail-content.html',
 })
 export class DataDetailContentComponent {

src/app/modules/data/detail/data-detail-content.html

@@ -6,8 +6,8 @@
     <ion-row>
       <ion-col>
         <div class="ion-text-wrap">
-          <h2 class="name">{{ item.name }}</h2>
-          <ion-note>{{ item.type }}</ion-note>
+          <h2 class="name">{{ 'name' | thingTranslate: item }}</h2>
+          <ion-note>{{ 'type' | thingTranslate: item }}</ion-note>
         </div>
       </ion-col>
     </ion-row>

src/app/modules/data/detail/data-detail-content.scss

@@ -0,0 +1,18 @@
+:host ::ng-deep {
+  ion-slides.work-locations {
+    ion-slide {
+      display: block;
+      text-align: left;
+    }
+  }
+  ion-card {
+    ion-card-header {
+      font-weight: bold;
+    }
+    ion-grid, ion-col {
+      padding-inline-start: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+}

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

@@ -12,11 +12,3 @@
     }
   }
 }
-
-::ng-deep {
-  ion-grid, ion-col {
-    padding-inline-start: 0;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-}

src/app/modules/data/elements/skeleton-list-item.scss

@@ -1,7 +0,0 @@
-::ng-deep {
-  ion-grid, ion-col {
-    padding-inline-start: 0;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-}

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

@@ -1,4 +1,4 @@
-.item {
+:host ::ng-deep {
   ion-label {
     width: 100%;
 
@@ -7,25 +7,20 @@
       flex-direction: column;
     }
   }
-}
+  ::ng-deep {
+    ion-note {
+      ul {
+        margin: 0;
+        padding: 0;
 
-::ng-deep {
-  ion-grid, ion-col {
-    padding-inline-start: 0 ;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
+        li {
+          list-style-type: none;
+          display: inline;
+        }
 
-  ion-note {
-    ul {
-      margin: 0;
-      padding: 0;
-      li {
-        list-style-type: none;
-        display: inline;
-      }
-      li:not(:first-child):before {
-        content: " • ";
+        li:not(:first-child):before {
+          content: " • ";
+        }
       }
     }
   }