Add transaction-detail page. #286

- Display different status badge to distinguish different "In Progress" activity. #199

Co-authored-by: Sean Wu <[email protected]>

src/app/pages/home/activity/activity-routing.module.ts

@@ -7,6 +7,13 @@ const routes: Routes = [
     path: '',
     component: ActivityPage,
   },
+  {
+    path: 'transaction-details',
+    loadChildren: () =>
+      import('./transaction-details/transaction-details.module').then(
+        m => m.TransactionDetailsPageModule
+      ),
+  },
 ];
 
 @NgModule({

src/app/pages/home/activity/activity.page.html

@@ -10,16 +10,12 @@
     <ng-container
       *ngFor="let activity of activitiesWithStatus$ | async; last as isLast"
     >
-      <mat-list-item>
+      <mat-list-item routerLink="transaction-details" [state]="activity">
         <img matListAvatar [src]="activity.asset.asset_file_thumbnail" />
         <div mat-line>{{ activity.asset.id }}</div>
         <div mat-line>{{ activity.created_at | date: 'short' }}</div>
-        <button
-          [class]="activity.status | async"
-          mat-stroked-button
-          disableRipple
-        >
-          {{ t(activity.status | async) }}
+        <button [class]="activity.status" mat-stroked-button disableRipple>
+          {{ t(activity.status) }}
         </button>
       </mat-list-item>
       <mat-divider *ngIf="!isLast"></mat-divider>

src/app/pages/home/activity/activity.page.scss

@@ -49,6 +49,12 @@ mat-toolbar {
       border-color: deepskyblue;
     }
 
+    button.waitingToBeAccepted {
+      color: white;
+      border-color: deepskyblue;
+      background-color: deepskyblue;
+    }
+
     button.returned {
       color: white;
       border-color: var(--ion-color-danger);

src/app/pages/home/activity/activity.page.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { UntilDestroy } from '@ngneat/until-destroy';
-import { map, pluck } from 'rxjs/operators';
+import { concatMap, pluck } from 'rxjs/operators';
 import { DiaBackendAuthService } from '../../../services/dia-backend/auth/dia-backend-auth.service';
 import {
   DiaBackendTransaction,
@@ -19,11 +19,13 @@ export class ActivityPage {
     .getAll$()
     .pipe(
       pluck('results'),
-      map(activities =>
-        activities.map(activity => ({
-          ...activity,
-          status: this.getStatus(activity),
-        }))
+      concatMap(activities =>
+        Promise.all(
+          activities.map(async activity => ({
+            ...activity,
+            status: await this.getStatus(activity),
+          }))
+        )
       )
     );
 
@@ -38,7 +40,10 @@ export class ActivityPage {
       return Status.Returned;
     }
     if (!activity.fulfilled_at) {
-      return Status.InProgress;
+      if (activity.receiver_email === email) {
+        return Status.InProgress;
+      }
+      return Status.waitingToBeAccepted;
     }
     if (activity.sender === email) {
       return Status.Delivered;
@@ -47,7 +52,8 @@ export class ActivityPage {
   }
 }
 
-enum Status {
+export enum Status {
+  waitingToBeAccepted = 'waitingToBeAccepted',
   InProgress = 'inProgress',
   Returned = 'returned',
   Delivered = 'delivered',

src/app/pages/home/activity/transaction-details/transaction-details-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { TransactionDetailsPage } from './transaction-details.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: TransactionDetailsPage,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class TransactionDetailsPageRoutingModule {}

src/app/pages/home/activity/transaction-details/transaction-details.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../../shared/shared.module';
+import { TransactionDetailsPageRoutingModule } from './transaction-details-routing.module';
+import { TransactionDetailsPage } from './transaction-details.page';
+
+@NgModule({
+  imports: [SharedModule, TransactionDetailsPageRoutingModule],
+  declarations: [TransactionDetailsPage],
+})
+export class TransactionDetailsPageModule {}

src/app/pages/home/activity/transaction-details/transaction-details.page.html

@@ -0,0 +1,31 @@
+<mat-toolbar color="primary" *transloco="let t">
+  <button routerLink=".." routerDirection="back" mat-icon-button>
+    <mat-icon>arrow_back</mat-icon>
+  </button>
+  <span>{{ t('transactionDetails') }}</span>
+</mat-toolbar>
+<div *transloco="let t" class="page-content">
+  <h4 class="top-time">{{ (details$ | async)?.created_at | date: 'short' }}</h4>
+  <mat-card class="transaction-card">
+    <mat-card-content class="row">
+      <mat-label> {{ (details$ | async)?.asset.id }}</mat-label>
+      <button
+        [class]="(details$ | async)?.status"
+        mat-stroked-button
+        disableRipple
+      >
+        {{ t((details$ | async)?.status) }}
+      </button>
+    </mat-card-content>
+    <img [src]="(details$ | async)?.asset.asset_file_thumbnail" />
+    <mat-card-content class="column">
+      <mat-label
+        >{{ t('sentFrom') }} : {{ (details$ | async)?.sender }}</mat-label
+      >
+      <mat-label
+        >{{ t('receiver') }} :
+        {{ (details$ | async)?.receiver_email }}</mat-label
+      >
+    </mat-card-content>
+  </mat-card>
+</div>

src/app/pages/home/activity/transaction-details/transaction-details.page.scss

@@ -0,0 +1,115 @@
+mat-toolbar {
+  color: white;
+
+  .mat-icon {
+    color: white;
+  }
+
+  span {
+    color: white;
+    padding-right: 40px;
+  }
+}
+
+.page-content {
+  padding: 0 0 16px;
+
+  .top-time {
+    width: 90vw;
+    margin-top: 16px;
+    margin-left: 5vw;
+    margin-right: 5vw;
+    text-align: center;
+  }
+
+  button.send-button {
+    width: 90vw;
+    margin-top: 16px;
+    margin-left: 5vw;
+    margin-right: 5vw;
+
+    .send-button-wrapper {
+      display: flex;
+      align-items: center;
+
+      .avatar {
+        height: 32px;
+        width: 32px;
+        margin: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+        object-fit: cover;
+        background-image: url('https://gravatar.com/avatar/8db683da3c728970bb776f6cc4048fd2?s=400&d=mp&r=x');
+        background-size: cover;
+      }
+    }
+  }
+
+  button {
+    flex-shrink: 0;
+  }
+
+  button.accepted {
+    color: white;
+    border-color: #4cd964;
+    background-color: #4cd964;
+  }
+
+  button.delivered {
+    color: mediumseagreen;
+    border-color: mediumseagreen;
+  }
+
+  button.inProgress {
+    color: deepskyblue;
+    border-color: deepskyblue;
+  }
+
+  button.waitingToBeAccepted {
+    color: white;
+    border-color: deepskyblue;
+    background-color: deepskyblue;
+  }
+
+  button.returned {
+    color: white;
+    border-color: var(--ion-color-danger);
+    background-color: #e31587;
+  }
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.transaction-card {
+  width: 90vw;
+  margin-top: 16px;
+  margin-left: 5vw;
+  margin-right: 5vw;
+}
+
+mat-card img {
+  width: 50%;
+  margin: 10% 25%;
+}
+
+form mat-form-field {
+  width: 100%;
+  height: 100%;
+
+  textarea {
+    overflow: hidden;
+  }
+}
+
+.spacer {
+  flex: 1 1 auto;
+}

src/app/pages/home/activity/transaction-details/transaction-details.page.spec.ts

@@ -0,0 +1,23 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { SharedTestingModule } from '../../../../shared/shared-testing.module';
+import { TransactionDetailsPage } from './transaction-details.page';
+
+describe('TransactionDetailsPage', () => {
+  let component: TransactionDetailsPage;
+  let fixture: ComponentFixture<TransactionDetailsPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [TransactionDetailsPage],
+      imports: [SharedTestingModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TransactionDetailsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/home/activity/transaction-details/transaction-details.page.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { UntilDestroy } from '@ngneat/until-destroy';
+import { map } from 'rxjs/operators';
+@UntilDestroy({ checkProperties: true })
+@Component({
+  selector: 'app-transaction-details',
+  templateUrl: './transaction-details.page.html',
+  styleUrls: ['./transaction-details.page.scss'],
+})
+export class TransactionDetailsPage {
+  details$ = this.route.paramMap.pipe(map(() => history.state));
+
+  constructor(private readonly route: ActivatedRoute) {}
+}

src/assets/i18n/en-us.json

@@ -71,11 +71,14 @@
   "ignore": "Ignore",
   "accept": "Accept",
   "activity": "Activity",
+  "transactionDetails": "Activity Details",
   "accepted": "Accepted",
   "delivered": "Delivered",
   "returned": "Returned",
   "inProgress": "In Progress",
+  "waitingToBeAccepted": "Waiting to be Accepted",
   "sentFrom": "Sent from",
+  "receiver": "Receiver",
   ".message": "Message",
   "location": "Location",
   "message": {

src/assets/i18n/zh-tw.json

@@ -71,11 +71,14 @@
   "ignore": "忽略",
   "accept": "接收",
   "activity": "活動紀錄",
+  "transactionDetails": "活動資訊",
   "accepted": "已接收",
   "delivered": "已送出",
   "inProgress": "等待中",
+  "waitingToBeAccepted": "等待對方接收中",
   "returned": "已退回",
   "sentFrom": "發送自",
+  "receiver": "收件人",
   ".message": "訊息",
   "location": "位置",
   "message": {