Merge pull request #167 from numbersprotocol/feature-information-details

Rebuild Information Details Page with Angular-Material Library

src/app/pages/storage/proof/information/information.module.ts

@@ -1,6 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatToolbarModule } from '@angular/material/toolbar';
 import { IonicModule } from '@ionic/angular';
 import { TranslocoModule } from '@ngneat/transloco';
 import { InformationPageRoutingModule } from './information-routing.module';
@@ -9,10 +13,14 @@ import { InformationPage } from './information.page';
 @NgModule({
   imports: [
     CommonModule,
-    FormsModule,
     IonicModule,
     InformationPageRoutingModule,
-    TranslocoModule
+    TranslocoModule,
+    MatToolbarModule,
+    MatButtonModule,
+    MatIconModule,
+    MatListModule,
+    MatSnackBarModule
   ],
   declarations: [InformationPage]
 })

src/app/pages/storage/proof/information/information.page.html

@@ -1,69 +1,38 @@
-<ion-header *transloco="let t">
-  <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-button routerLink="../../../" routerDirection="back">
-        <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-    <ion-title>{{ t('informationDetails') }}</ion-title>
-  </ion-toolbar>
-</ion-header>
-<ion-content *transloco="let t">
-  <ion-item>
-    <ion-slide>
-      <ion-card class="slide-card">
-        <ion-card-header>
-          <ion-card-title>{{ t('location') }}</ion-card-title>
-        </ion-card-header>
-        <ion-card-content>
-          <ion-list lines="none" *ngFor="let information of (locationInformation$ | async)">
-            <ion-item>
-              <ion-label class="ion-text-wrap">
-                <h3>{{ information.name }}</h3>
-                <p>{{ information.value }}</p>
-              </ion-label>
-            </ion-item>
-          </ion-list>
-        </ion-card-content>
-      </ion-card>
-    </ion-slide>
-  </ion-item>
-  <ion-item>
-    <ion-slide>
-      <ion-card class="slide-card">
-        <ion-card-header>
-          <ion-card-title>{{ t('other') }}</ion-card-title>
-        </ion-card-header>
-        <ion-card-content>
-          <ion-list lines="none" *ngFor="let information of (otherInformation$ | async)">
-            <ion-item>
-              <ion-label class="ion-text-wrap">
-                <h3>{{ information.name }}</h3>
-                <p>{{ information.value }}</p>
-              </ion-label>
-            </ion-item>
-          </ion-list>
-        </ion-card-content>
-      </ion-card>
-    </ion-slide>
-  </ion-item>
-  <ion-item>
-    <ion-slide>
-      <ion-card class="slide-card">
-        <ion-card-header>
-          <ion-card-title>{{ t('device') }}</ion-card-title>
-        </ion-card-header>
-        <ion-card-content>
-          <ion-list lines="none" *ngFor="let information of (deviceInformation$ | async)">
-            <ion-item>
-              <ion-label class="ion-text-wrap">
-                <h3>{{ information.name }}</h3>
-                <p>{{ information.value }}</p>
-              </ion-label>
-            </ion-item>
-          </ion-list>
-        </ion-card-content>
-      </ion-card>
-    </ion-slide>
-  </ion-item>
-</ion-content>
+<mat-toolbar *transloco="let t">
+  <button routerLink="../../../" routerDirection="back" mat-icon-button>
+    <mat-icon>arrow_back</mat-icon>
+  </button>
+  <span>{{ t('informationDetails') }}</span>
+</mat-toolbar>
+
+<div class="page-content">
+  <mat-list *transloco="let t">
+    <div *ngIf="(locationInformation$ | async)?.length" mat-subheader>{{ t('location') }}</div>
+    <mat-list-item *ngFor="let information of (locationInformation$ | async)">
+      <mat-icon mat-list-icon>information</mat-icon>
+      <div mat-line>{{ information.name }}</div>
+      <div mat-line>{{ information.value }}</div>
+      <button *ngIf="information.value as value" (click)="copyToClipboard(value)" mat-icon-button>
+        <mat-icon>content_copy</mat-icon>
+      </button>
+    </mat-list-item>
+    <div *ngIf="(deviceInformation$ | async)?.length" mat-subheader>{{ t('device') }}</div>
+    <mat-list-item *ngFor="let information of (deviceInformation$ | async)">
+      <mat-icon mat-list-icon>information</mat-icon>
+      <div mat-line>{{ information.name }}</div>
+      <div mat-line>{{ information.value }}</div>
+      <button *ngIf="information.value as value" (click)="copyToClipboard(value)" mat-icon-button>
+        <mat-icon>content_copy</mat-icon>
+      </button>
+    </mat-list-item>
+    <div *ngIf="(otherInformation$ | async)?.length" mat-subheader>{{ t('other') }}</div>
+    <mat-list-item *ngFor="let information of (otherInformation$ | async)">
+      <mat-icon mat-list-icon>information</mat-icon>
+      <div mat-line>{{ information.name }}</div>
+      <div mat-line>{{ information.value }}</div>
+      <button *ngIf="information.value as value" (click)="copyToClipboard(value)" mat-icon-button>
+        <mat-icon>content_copy</mat-icon>
+      </button>
+    </mat-list-item>
+  </mat-list>
+</div>

src/app/pages/storage/proof/information/information.page.scss

@@ -1,7 +1,3 @@
-.slide-card {
-  width: 100%;
-}
-
-.multiline {
-  white-space: pre-wrap;
+mat-toolbar {
+  background: white;
 }

src/app/pages/storage/proof/information/information.page.spec.ts

@@ -1,4 +1,9 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatToolbarModule } from '@angular/material/toolbar';
 import { RouterTestingModule } from '@angular/router/testing';
 import { IonicModule } from '@ionic/angular';
 import { getTranslocoModule } from 'src/app/transloco/transloco-root.module.spec';
@@ -11,7 +16,16 @@ describe('InformationPage', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [InformationPage],
-      imports: [IonicModule.forRoot(), RouterTestingModule, getTranslocoModule()]
+      imports: [
+        IonicModule.forRoot(),
+        RouterTestingModule,
+        getTranslocoModule(),
+        MatToolbarModule,
+        MatButtonModule,
+        MatIconModule,
+        MatListModule,
+        MatSnackBarModule
+      ]
     }).compileComponents();
 
     fixture = TestBed.createComponent(InformationPage);

src/app/pages/storage/proof/information/information.page.ts

@@ -1,12 +1,17 @@
 import { Component } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute } from '@angular/router';
+import { Plugins } from '@capacitor/core';
+import { TranslocoService } from '@ngneat/transloco';
 import { UntilDestroy } from '@ngneat/until-destroy';
-import { map, pluck, switchMap } from 'rxjs/operators';
+import { map, switchMap } from 'rxjs/operators';
 import { InformationType } from 'src/app/services/data/information/information';
 import { InformationRepository } from 'src/app/services/data/information/information-repository.service';
 import { ProofRepository } from 'src/app/services/data/proof/proof-repository.service';
 import { isNonNullable } from 'src/app/utils/rx-operators';
 
+const { Clipboard } = Plugins;
+
 @UntilDestroy({ checkProperties: true })
 @Component({
   selector: 'app-information',
@@ -22,26 +27,31 @@ export class InformationPage {
     isNonNullable()
   );
 
-  readonly hash$ = this.proof$.pipe(pluck('hash'));
-
   readonly locationInformation$ = this.proof$.pipe(
     switchMap(proof => this.informationRepository.getByProof$(proof)),
     map(informationList => informationList.filter(information => information.type === InformationType.Location))
   );
 
-  readonly otherInformation$ = this.proof$.pipe(
+  readonly deviceInformation$ = this.proof$.pipe(
     switchMap(proof => this.informationRepository.getByProof$(proof)),
-    map(informationList => informationList.filter(information => information.type === InformationType.Other))
+    map(informationList => informationList.filter(information => information.type === InformationType.Device))
   );
 
-  readonly deviceInformation$ = this.proof$.pipe(
+  readonly otherInformation$ = this.proof$.pipe(
     switchMap(proof => this.informationRepository.getByProof$(proof)),
-    map(informationList => informationList.filter(information => information.type === InformationType.Device))
+    map(informationList => informationList.filter(information => information.type === InformationType.Other))
   );
 
   constructor(
     private readonly route: ActivatedRoute,
     private readonly proofRepository: ProofRepository,
     private readonly informationRepository: InformationRepository,
+    private readonly translocoService: TranslocoService,
+    private readonly snackBar: MatSnackBar,
   ) { }
+
+  copyToClipboard(value: string) {
+    Clipboard.write({ string: value });
+    this.snackBar.open(this.translocoService.translate('message.copiedToClipboard'));
+  }
 }

src/app/services/collector/information/capacitor-provider/capacitor-provider.ts

@@ -68,7 +68,7 @@ export class CapacitorProvider extends InformationProvider {
             name: this.translocoService.translate('uuid'),
             value: String(deviceInfo.uuid),
             importance: Importance.High,
-            type: InformationType.Other
+            type: InformationType.Device
           }, {
             proofHash: proof.hash,
             provider: this.id,