feat: add detail view for news

android/app/capacitor.build.gradle

@@ -10,6 +10,7 @@ android {
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
     implementation project(':capacitor-app')
+    implementation project(':capacitor-browser')
     implementation project(':capacitor-haptics')
     implementation project(':capacitor-keyboard')
     implementation project(':capacitor-splash-screen')

android/app/src/main/assets/capacitor.plugins.json

@@ -3,6 +3,10 @@
 		"pkg": "@capacitor/app",
 		"classpath": "com.capacitorjs.plugins.app.AppPlugin"
 	},
+	{
+		"pkg": "@capacitor/browser",
+		"classpath": "com.capacitorjs.plugins.browser.BrowserPlugin"
+	},
 	{
 		"pkg": "@capacitor/haptics",
 		"classpath": "com.capacitorjs.plugins.haptics.HapticsPlugin"

android/capacitor.settings.gradle

@@ -5,6 +5,9 @@ project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/
 include ':capacitor-app'
 project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/android')
 
+include ':capacitor-browser'
+project(':capacitor-browser').projectDir = new File('../node_modules/@capacitor/browser/android')
+
 include ':capacitor-haptics'
 project(':capacitor-haptics').projectDir = new File('../node_modules/@capacitor/haptics/android')
 

package-lock.json

@@ -2078,6 +2078,11 @@
       "resolved": "https://registry.npmjs.org/@capacitor/app/-/app-1.0.6.tgz",
       "integrity": "sha512-NjHIs6f4WJQuhabnCkcE6YLyIIn+t4Al5etB/SJGZJwUYRe1yJYtZ4T/KobDIzwwZn9I9de7QbEA5947lGttBQ=="
     },
+    "@capacitor/browser": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@capacitor/browser/-/browser-1.0.6.tgz",
+      "integrity": "sha512-ZDx+HNPRQZKHpWxbYEyDz34Ge4fwhiiGg2UEnA+ol+pmdvHyYxw/c8HafCEVRJutHrXcVdSNoBNAeEPkQeabrQ=="
+    },
     "@capacitor/cli": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/@capacitor/cli/-/cli-3.3.2.tgz",

package.json

@@ -55,6 +55,7 @@
     "@asymmetrik/ngx-leaflet": "8.1.0",
     "@asymmetrik/ngx-leaflet-markercluster": "5.0.1",
     "@capacitor/app": "1.0.6",
+    "@capacitor/browser": "1.0.6",
     "@capacitor/core": "3.3.1",
     "@capacitor/haptics": "1.1.3",
     "@capacitor/keyboard": "1.1.3",

src/app/app.module.ts

@@ -24,7 +24,7 @@ import {APP_INITIALIZER, NgModule, Provider} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {RouteReuseStrategy} from '@angular/router';
 import {Diagnostic} from '@ionic-native/diagnostic/ngx';
-import {IonicModule, IonicRouteStrategy} from '@ionic/angular';
+import {IonicModule, IonicRouteStrategy, Platform} from '@ionic/angular';
 import {
   TranslateLoader,
   TranslateModule,
@@ -57,6 +57,8 @@ import {AboutModule} from './modules/about/about.module';
 import {FavoritesModule} from './modules/favorites/favorites.module';
 import {FeedbackModule} from './modules/feedback/feedback.module';
 import {DebugDataCollectorService} from './modules/data/debug-data-collector.service';
+import {Browser} from './util/browser.factory';
+import {browserFactory} from './util/browser.factory';
 
 registerLocaleData(localeDe);
 
@@ -119,6 +121,11 @@ const providers: Provider[] = [
     provide: LocationStrategy,
     useClass: PathLocationStrategy,
   },
+  {
+    provide: Browser,
+    useFactory: browserFactory,
+    deps: [Platform],
+  },
   {
     provide: APP_INITIALIZER,
     multi: true,

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

@@ -14,6 +14,7 @@
  */
 import {Component, Input} from '@angular/core';
 import {SCMessage} from '@openstapps/core';
+import {Browser} from '../../../../util/browser.factory';
 
 /**
  * TODO
@@ -21,10 +22,22 @@ import {SCMessage} from '@openstapps/core';
 @Component({
   selector: 'stapps-message-detail-content',
   templateUrl: 'message-detail-content.html',
+  styleUrls: ['message-detail-content.scss'],
 })
 export class MessageDetailContentComponent {
+  constructor(private browser: Browser) {}
+
   /**
    * TODO
    */
   @Input() item: SCMessage;
+
+  /**
+   * Open the external link when clicked
+   *
+   * @param url Web address to open
+   */
+  onLinkClick(url: string) {
+    this.browser.open(url);
+  }
 }

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

@@ -1,23 +1,51 @@
-<stapps-simple-card
-  [title]="'messageBody' | propertyNameTranslate: item | titlecase"
-  [content]="'messageBody' | thingTranslate: item"
-></stapps-simple-card>
-<stapps-simple-card
-  [title]="'audiences' | propertyNameTranslate: item | titlecase"
-  [content]="'audiences' | thingTranslate: item"
-></stapps-simple-card>
-<stapps-simple-card
-  *ngIf="item.datePublished"
-  [title]="'datePublished' | propertyNameTranslate: item | titlecase"
-  [content]="item.datePublished | amDateFormat: 'll'"
-></stapps-simple-card>
-<stapps-simple-card
-  *ngIf="item.authors"
-  [title]="'authors' | propertyNameTranslate: item | titlecase"
-  [content]="item.authors"
-></stapps-simple-card>
-<stapps-simple-card
-  *ngIf="item.publishers"
-  [title]="'publishers' | propertyNameTranslate: item | titlecase"
-  [content]="item.publishers"
-></stapps-simple-card>
+<div *ngIf="!item.categories.includes('news'); else news">
+  <stapps-simple-card
+    [title]="'messageBody' | propertyNameTranslate: item | titlecase"
+    [content]="'messageBody' | thingTranslate: item"
+  ></stapps-simple-card>
+  <stapps-simple-card
+    [title]="'audiences' | propertyNameTranslate: item | titlecase"
+    [content]="'audiences' | thingTranslate: item"
+  ></stapps-simple-card>
+  <stapps-simple-card
+    *ngIf="item.datePublished"
+    [title]="'datePublished' | propertyNameTranslate: item | titlecase"
+    [content]="item.datePublished | amDateFormat: 'll'"
+  ></stapps-simple-card>
+  <stapps-simple-card
+    *ngIf="item.authors"
+    [title]="'authors' | propertyNameTranslate: item | titlecase"
+    [content]="item.authors"
+  ></stapps-simple-card>
+  <stapps-simple-card
+    *ngIf="item.publishers"
+    [title]="'publishers' | propertyNameTranslate: item | titlecase"
+    [content]="item.publishers"
+  ></stapps-simple-card>
+</div>
+
+<ng-template #news>
+  <ion-thumbnail>
+    <ion-img
+      *ngIf="item.image"
+      src="{{ item.image }}"
+      (ionError)="$event.target.nextSibling.style.display = 'none'"
+      alt="{{ item.name }}"
+    ></ion-img>
+  </ion-thumbnail>
+  <stapps-simple-card
+    *ngIf="item.datePublished"
+    content="{{ item.datePublished | amCalendar | sentencecase }}"
+  ></stapps-simple-card>
+  <stapps-simple-card content="{{ item.messageBody }}"></stapps-simple-card>
+  <ion-card *ngIf="item.sameAs">
+    <ion-card-header>
+      {{ 'sameAs' | propertyNameTranslate: item | titlecase }}
+    </ion-card-header>
+    <ion-card-content>
+      <a (click)="onLinkClick(item.sameAs)"
+        >{{ item.name }}<ion-icon name="open-outline"></ion-icon>
+      </a>
+    </ion-card-content>
+  </ion-card>
+</ng-template>

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

@@ -0,0 +1,39 @@
+/*
+ * 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/>.
+ */
+
+:host {
+  ion-thumbnail {
+    width: 100%;
+    height: auto;
+    img {
+      display: block;
+    }
+  }
+  a {
+    cursor: pointer;
+    ion-icon {
+      vertical-align: text-top;
+      font-size: 80%;
+      padding-left: 2px;
+    }
+  }
+  // Show smaller image on a desktop
+  @media (min-width: 992px) {
+    ion-thumbnail {
+      width: 60%;
+      margin: 0 auto;
+    }
+  }
+}

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

@@ -14,6 +14,7 @@
  */
 import {Component, Input} from '@angular/core';
 import {SCMessage} from '@openstapps/core';
+import {Browser} from '../../../util/browser.factory';
 /**
  * News page component
  */
@@ -23,8 +24,14 @@ import {SCMessage} from '@openstapps/core';
   styleUrls: ['news-item.scss'],
 })
 export class NewsItemComponent {
+  constructor(private browser: Browser) {}
+
   /**
    * News (message) to show
    */
   @Input() item: SCMessage;
+
+  onLinkClick(url: string) {
+    this.browser.open(url);
+  }
 }

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

@@ -1,6 +1,6 @@
 <ion-card>
-  <span *ngIf="item.sameAs; else imageNoUrl">
-    <a href="{{ item.sameAs }}">
+  <span>
+    <a [routerLink]="['/data-detail', item.uid]">
       <ion-thumbnail
         ><ion-img
           src="{{ item.image }}"
@@ -11,31 +11,20 @@
       </ion-thumbnail>
     </a>
   </span>
-  <ng-template #imageNoUrl>
-    <ion-thumbnail>
-      <ion-img
-        src="{{ item.image }}"
-        (ionError)="$event.target.nextSibling.style.display = 'block'"
-        alt=""
-      ></ion-img>
-      <ion-icon name="newspaper-outline"></ion-icon>
-    </ion-thumbnail>
-  </ng-template>
   <ion-card-header>
     <ion-card-subtitle *ngIf="item.datePublished">{{
       item.datePublished | amCalendar | sentencecase
     }}</ion-card-subtitle>
     <ion-card-title>
-      <span *ngIf="item.sameAs; else titleNoUrl"
-        ><a href="{{ item.sameAs }}"
-          ><span class="text">{{ item.name }}</span
-          ><span class="icon"
-            ><ion-icon name="open-outline"></ion-icon></span></a
-      ></span>
-      <ng-template #titleNoUrl>{{ item.name }}</ng-template>
+      <span>
+        <a [routerLink]="['/data-detail', item.uid]"
+          ><span class="text">{{ item.name }}</span></a
+        ></span
+      >
     </ion-card-title>
   </ion-card-header>
   <ion-card-content>
-    {{ item.messageBody }}
+    <!-- TODO: Temporary solution until the designs are ready, where is probable use of title only -->
+    {{ item.messageBody | slice: 0:120 }}...
   </ion-card-content>
 </ion-card>

src/app/modules/news/item/news-item.scss

@@ -1,11 +1,6 @@
 ion-card-header a {
   color: var(--ion-color-dark-tint);
   text-decoration: none;
-     span.icon ion-icon {
-       vertical-align: text-top;
-       font-size: 60%;
-       padding-left: 4px;
-     }
 }
 
 ion-card ion-thumbnail {

src/app/util/browser.factory.ts

@@ -0,0 +1,36 @@
+/*
+ * 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 {Platform} from '@ionic/angular';
+import {Browser as BrowserPlugin} from '@capacitor/browser';
+
+export abstract class Browser {
+  abstract open(url: string): Promise<void> | void;
+}
+
+class CapacitorBrowser {
+  open(url: string) {
+    return BrowserPlugin.open({url});
+  }
+}
+
+class WebBrowser {
+  open(url: string) {
+    window.open(url, '_blank');
+  }
+}
+
+export const browserFactory = (platform: Platform) => {
+  return platform.is('capacitor') ? new CapacitorBrowser() : new WebBrowser();
+};