Merge pull request #1365 from numbersprotocol/feature-add-network-act…

…ion-order-history

feat: add a new tab in activities page to display network action orde…

src/app/features/home/transaction/transaction-routing.module.ts → src/app/features/home/activities/activities-routing.module.ts

@@ -1,18 +1,18 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { TransactionPage } from './transaction.page';
+import { TransactionPage } from './activities.page';
 
 const routes: Routes = [
   {
     path: '',
     component: TransactionPage,
   },
   {
-    path: 'transaction-details',
+    path: 'capture-transaction-details',
     loadChildren: () =>
-      import('./transaction-details/transaction-details.module').then(
-        m => m.TransactionDetailsPageModule
-      ),
+      import(
+        './capture-transaction-details/capture-transaction-details.module'
+      ).then(m => m.TransactionDetailsPageModule),
   },
 ];
 

src/app/features/home/activities/activities.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../shared/shared.module';
+import { TransactionPageRoutingModule } from './activities-routing.module';
+import { TransactionPage } from './activities.page';
+import { CaptureTransactionsComponent } from './capture-transactions/capture-transactions.component';
+import { NetworkActionOrdersComponent } from './network-action-orders/network-action-orders.component';
+
+@NgModule({
+  imports: [SharedModule, TransactionPageRoutingModule],
+  declarations: [
+    TransactionPage,
+    CaptureTransactionsComponent,
+    NetworkActionOrdersComponent,
+  ],
+})
+export class TransactionPageModule {}

src/app/features/home/activities/activities.page.html

@@ -0,0 +1,26 @@
+<mat-toolbar *transloco="let t">
+  <button routerLink=".." routerDirection="back" mat-icon-button>
+    <mat-icon>arrow_back</mat-icon>
+  </button>
+  <span>{{ t('activity') }}</span>
+</mat-toolbar>
+
+<ion-content *transloco="let t">
+  <ion-segment #segment value="networkActionOrders">
+    <ion-segment-button value="transactions">
+      <ion-label>{{ t('captureTransactions') }}</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="networkActionOrders">
+      <ion-label>{{ t('message.moreActions') }}</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <div class="page-content">
+    <div *ngIf="segment.value === 'transactions'">
+      <app-capture-transactions></app-capture-transactions>
+    </div>
+    <div *ngIf="segment.value === 'networkActionOrders'">
+      <app-network-action-orders></app-network-action-orders>
+    </div>
+  </div>
+</ion-content>

src/app/features/home/activities/activities.page.scss

@@ -0,0 +1,5 @@
+mat-toolbar {
+  span {
+    padding-right: 40px;
+  }
+}

src/app/features/home/transaction/transaction.page.spec.ts → src/app/features/home/activities/activities.page.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { SharedTestingModule } from '../../../shared/shared-testing.module';
-import { TransactionPage } from './transaction.page';
+import { TransactionPage } from './activities.page';
 
 describe('TransactionPage', () => {
   let component: TransactionPage;

src/app/features/home/activities/activities.page.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { UntilDestroy } from '@ngneat/until-destroy';
+
+@UntilDestroy({ checkProperties: true })
+@Component({
+  selector: 'app-activities',
+  templateUrl: './activities.page.html',
+  styleUrls: ['./activities.page.scss'],
+})
+export class TransactionPage {}

src/app/features/home/transaction/transaction-details/transaction-details-routing.module.ts → src/app/features/home/activities/capture-transaction-details/capture-transaction-details-routing.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { TransactionDetailsPage } from './transaction-details.page';
+import { TransactionDetailsPage } from './capture-transaction-details.page';
 
 const routes: Routes = [
   {

src/app/features/home/transaction/transaction-details/transaction-details.module.ts → src/app/features/home/activities/capture-transaction-details/capture-transaction-details.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { SharedModule } from '../../../../shared/shared.module';
-import { TransactionDetailsPageRoutingModule } from './transaction-details-routing.module';
-import { TransactionDetailsPage } from './transaction-details.page';
+import { TransactionDetailsPageRoutingModule } from './capture-transaction-details-routing.module';
+import { TransactionDetailsPage } from './capture-transaction-details.page';
 
 @NgModule({
   imports: [SharedModule, TransactionDetailsPageRoutingModule],

src/app/features/home/transaction/transaction-details/transaction-details.page.spec.ts → src/app/features/home/activities/capture-transaction-details/capture-transaction-details.page.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { SharedTestingModule } from '../../../../shared/shared-testing.module';
-import { TransactionDetailsPage } from './transaction-details.page';
+import { TransactionDetailsPage } from './capture-transaction-details.page';
 
 describe('TransactionDetailsPage', () => {
   let component: TransactionDetailsPage;

src/app/features/home/transaction/transaction-details/transaction-details.page.ts → src/app/features/home/activities/capture-transaction-details/capture-transaction-details.page.ts

@@ -11,9 +11,9 @@ import { ErrorService } from '../../../../shared/error/error.service';
 import { isNonNullable } from '../../../../utils/rx-operators/rx-operators';
 @UntilDestroy({ checkProperties: true })
 @Component({
-  selector: 'app-transaction-details',
-  templateUrl: './transaction-details.page.html',
-  styleUrls: ['./transaction-details.page.scss'],
+  selector: 'app-capture-transaction-details',
+  templateUrl: './capture-transaction-details.page.html',
+  styleUrls: ['./capture-transaction-details.page.scss'],
 })
 export class TransactionDetailsPage {
   readonly transaction$ = this.route.paramMap.pipe(

src/app/features/home/transaction/transaction.page.html → src/app/features/home/activities/capture-transactions/capture-transactions.component.html

@@ -1,10 +1,3 @@
-<mat-toolbar *transloco="let t">
-  <button routerLink=".." routerDirection="back" mat-icon-button>
-    <mat-icon>arrow_back</mat-icon>
-  </button>
-  <span>{{ t('transaction') }}</span>
-</mat-toolbar>
-
 <div *transloco="let t" class="page-content">
   <mat-list>
     <ng-container
@@ -14,7 +7,7 @@
       "
     >
       <mat-list-item
-        [routerLink]="['transaction-details', { id: transaction.id }]"
+        [routerLink]="['capture-transaction-details', { id: transaction.id }]"
       >
         <img
           decoding="async"

src/app/features/home/activities/capture-transactions/capture-transactions.component.scss

@@ -0,0 +1,50 @@
+mat-list-item {
+  height: initial;
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  img[matListAvatar] {
+    border-radius: 4px;
+    width: calc(100vw / 5);
+    height: calc(100vw / 8);
+    max-width: 150px;
+    max-height: 80px;
+  }
+
+  button {
+    flex-shrink: 0;
+  }
+
+  button.received {
+    color: var(--ion-color-dark-contrast);
+    border-color: var(--noir-simple);
+    background-color: var(--noir-simple);
+  }
+
+  button.delivered {
+    color: var(--noir-simple);
+    border-color: var(--noir-simple);
+  }
+
+  button.inProgress {
+    color: var(--noir-secondary-dark);
+    border-color: var(--noir-secondary-dark);
+  }
+
+  button.waitingToBeAccepted {
+    color: var(--ion-color-dark-contrast);
+    border-color: var(--noir-secondary-dark);
+    background-color: var(--noir-secondary-dark);
+  }
+
+  button.returned {
+    color: var(--ion-color-dark-contrast);
+    border-color: var(--noir-warn);
+    background-color: var(--noir-warn);
+  }
+
+  button.missed {
+    color: var(--noir-warn);
+    border-color: var(--noir-warn);
+  }
+}

src/app/features/home/activities/capture-transactions/capture-transactions.component.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+import { SharedTestingModule } from '../../../../shared/shared-testing.module';
+import { CaptureTransactionsComponent } from './capture-transactions.component';
+
+describe('CaptureTransactionsComponent', () => {
+  let component: CaptureTransactionsComponent;
+  let fixture: ComponentFixture<CaptureTransactionsComponent>;
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [CaptureTransactionsComponent],
+        imports: [IonicModule.forRoot(), SharedTestingModule],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(CaptureTransactionsComponent);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+    })
+  );
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/home/transaction/transaction.page.ts → src/app/features/home/activities/capture-transactions/capture-transactions.component.ts

@@ -1,18 +1,16 @@
 import { Component } from '@angular/core';
-import { UntilDestroy } from '@ngneat/until-destroy';
 import { catchError, map, shareReplay } from 'rxjs/operators';
-import { DiaBackendAuthService } from '../../../shared/dia-backend/auth/dia-backend-auth.service';
-import { DiaBackendTransactionRepository } from '../../../shared/dia-backend/transaction/dia-backend-transaction-repository.service';
-import { ErrorService } from '../../../shared/error/error.service';
-import { getStatus } from './transaction-details/transaction-details.page';
+import { DiaBackendAuthService } from '../../../../shared/dia-backend/auth/dia-backend-auth.service';
+import { DiaBackendTransactionRepository } from '../../../../shared/dia-backend/transaction/dia-backend-transaction-repository.service';
+import { ErrorService } from '../../../../shared/error/error.service';
+import { getStatus } from '../capture-transaction-details/capture-transaction-details.page';
 
-@UntilDestroy({ checkProperties: true })
 @Component({
-  selector: 'app-transaction',
-  templateUrl: './transaction.page.html',
-  styleUrls: ['./transaction.page.scss'],
+  selector: 'app-capture-transactions',
+  templateUrl: './capture-transactions.component.html',
+  styleUrls: ['./capture-transactions.component.scss'],
 })
-export class TransactionPage {
+export class CaptureTransactionsComponent {
   readonly transactionsWithStatus$ =
     this.diaBackendTransactionRepository.all$.pipe(
       catchError((err: unknown) => this.errorService.toastError$(err)),

src/app/features/home/activities/network-action-orders/network-action-orders.component.html

@@ -0,0 +1,28 @@
+<mat-list *transloco="let t">
+  <ng-container
+    *ngFor="
+      let order of networkActionOrders$ | ngrxPush;
+      last as isLast;
+      trackBy: trackNetworkActionOrderHistoryRecords
+    "
+  >
+    <mat-list-item>
+      <img
+        decoding="async"
+        loading="lazy"
+        matListAvatar
+        [src]="
+          (order.assetThumbnailUrl$ | ngrxPush) ||
+          '/assets/images/image-placeholder.png'
+        "
+      />
+      <div mat-line>{{ order.network_app_name_text }}</div>
+      <div mat-line>{{ order.asset_id_text }}</div>
+      <div mat-line>{{ order['Created Date'] | date: 'short' }}</div>
+      <button [class]="order.status_text" mat-stroked-button disableRipple>
+        {{ t('networkActionOrderState.' + order.status_text) }}
+      </button>
+    </mat-list-item>
+    <mat-divider *ngIf="!isLast"></mat-divider>
+  </ng-container>
+</mat-list>

src/app/features/home/activities/network-action-orders/network-action-orders.component.scss

@@ -0,0 +1,42 @@
+mat-list-item {
+  height: initial;
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  img[matListAvatar] {
+    border-radius: 4px;
+    width: calc(100vw / 5);
+    height: calc(100vw / 8);
+    max-width: 150px;
+    max-height: 80px;
+  }
+
+  button {
+    flex-shrink: 0;
+    min-width: 25%;
+  }
+
+  button.completed {
+    color: var(--ion-color-dark-contrast);
+    border-color: var(--noir-simple);
+    background-color: var(--noir-simple);
+  }
+
+  button.paid {
+    color: var(--noir-secondary-dark);
+    border-color: var(--noir-secondary-dark);
+  }
+
+  button.submitted {
+    color: var(--ion-color-dark-contrast);
+    border-color: var(--noir-secondary-dark);
+    background-color: var(--noir-secondary-dark);
+  }
+
+  button.failed,
+  button.payment_failed {
+    color: var(--ion-color-dark-contrast);
+    border-color: var(--noir-warn);
+    background-color: var(--noir-warn);
+  }
+}

src/app/features/home/activities/network-action-orders/network-action-orders.component.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+import { SharedTestingModule } from '../../../../shared/shared-testing.module';
+import { NetworkActionOrdersComponent } from './network-action-orders.component';
+
+describe('NetworkActionOrdersComponent', () => {
+  let component: NetworkActionOrdersComponent;
+  let fixture: ComponentFixture<NetworkActionOrdersComponent>;
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [NetworkActionOrdersComponent],
+        imports: [IonicModule.forRoot(), SharedTestingModule],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(NetworkActionOrdersComponent);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+    })
+  );
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});