From 088a52a78467395e288292d4b6cc2ab8b34451cd Mon Sep 17 00:00:00 2001 From: sddivid Date: Tue, 8 Dec 2020 14:22:48 +0800 Subject: [PATCH] Add transaction-detail page. #286 - Display different status badge to distinguish different "In Progress" activity. #199 Co-authored-by: Sean Wu --- .../home/activity/activity-routing.module.ts | 7 ++ .../pages/home/activity/activity.page.html | 10 +- .../pages/home/activity/activity.page.scss | 6 + src/app/pages/home/activity/activity.page.ts | 22 ++-- .../transaction-details-routing.module.ts | 16 +++ .../transaction-details.module.ts | 10 ++ .../transaction-details.page.html | 31 +++++ .../transaction-details.page.scss | 115 ++++++++++++++++++ .../transaction-details.page.spec.ts | 23 ++++ .../transaction-details.page.ts | 15 +++ src/assets/i18n/en-us.json | 3 + src/assets/i18n/zh-tw.json | 3 + 12 files changed, 246 insertions(+), 15 deletions(-) create mode 100644 src/app/pages/home/activity/transaction-details/transaction-details-routing.module.ts create mode 100644 src/app/pages/home/activity/transaction-details/transaction-details.module.ts create mode 100644 src/app/pages/home/activity/transaction-details/transaction-details.page.html create mode 100644 src/app/pages/home/activity/transaction-details/transaction-details.page.scss create mode 100644 src/app/pages/home/activity/transaction-details/transaction-details.page.spec.ts create mode 100644 src/app/pages/home/activity/transaction-details/transaction-details.page.ts diff --git a/src/app/pages/home/activity/activity-routing.module.ts b/src/app/pages/home/activity/activity-routing.module.ts index d9b785358..aa64348a2 100644 --- a/src/app/pages/home/activity/activity-routing.module.ts +++ b/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({ diff --git a/src/app/pages/home/activity/activity.page.html b/src/app/pages/home/activity/activity.page.html index 89bf5460d..7c740c366 100644 --- a/src/app/pages/home/activity/activity.page.html +++ b/src/app/pages/home/activity/activity.page.html @@ -10,16 +10,12 @@ - +
{{ activity.asset.id }}
{{ activity.created_at | date: 'short' }}
- diff --git a/src/app/pages/home/activity/activity.page.scss b/src/app/pages/home/activity/activity.page.scss index 3e9e98a4a..dcfee7d88 100644 --- a/src/app/pages/home/activity/activity.page.scss +++ b/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); diff --git a/src/app/pages/home/activity/activity.page.ts b/src/app/pages/home/activity/activity.page.ts index 1d2f54707..17df72b80 100644 --- a/src/app/pages/home/activity/activity.page.ts +++ b/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', diff --git a/src/app/pages/home/activity/transaction-details/transaction-details-routing.module.ts b/src/app/pages/home/activity/transaction-details/transaction-details-routing.module.ts new file mode 100644 index 000000000..b662d9605 --- /dev/null +++ b/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 {} diff --git a/src/app/pages/home/activity/transaction-details/transaction-details.module.ts b/src/app/pages/home/activity/transaction-details/transaction-details.module.ts new file mode 100644 index 000000000..4c6812e69 --- /dev/null +++ b/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 {} diff --git a/src/app/pages/home/activity/transaction-details/transaction-details.page.html b/src/app/pages/home/activity/transaction-details/transaction-details.page.html new file mode 100644 index 000000000..013430fb6 --- /dev/null +++ b/src/app/pages/home/activity/transaction-details/transaction-details.page.html @@ -0,0 +1,31 @@ + + + {{ t('transactionDetails') }} + +
+

{{ (details$ | async)?.created_at | date: 'short' }}

+ + + {{ (details$ | async)?.asset.id }} + + + + + {{ t('sentFrom') }} : {{ (details$ | async)?.sender }} + {{ t('receiver') }} : + {{ (details$ | async)?.receiver_email }} + + +
diff --git a/src/app/pages/home/activity/transaction-details/transaction-details.page.scss b/src/app/pages/home/activity/transaction-details/transaction-details.page.scss new file mode 100644 index 000000000..40b1a1188 --- /dev/null +++ b/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; +} diff --git a/src/app/pages/home/activity/transaction-details/transaction-details.page.spec.ts b/src/app/pages/home/activity/transaction-details/transaction-details.page.spec.ts new file mode 100644 index 000000000..c248ce362 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [TransactionDetailsPage], + imports: [SharedTestingModule], + }).compileComponents(); + + fixture = TestBed.createComponent(TransactionDetailsPage); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/home/activity/transaction-details/transaction-details.page.ts b/src/app/pages/home/activity/transaction-details/transaction-details.page.ts new file mode 100644 index 000000000..5f5108210 --- /dev/null +++ b/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) {} +} diff --git a/src/assets/i18n/en-us.json b/src/assets/i18n/en-us.json index f10cdd4ec..eab8a1cb0 100644 --- a/src/assets/i18n/en-us.json +++ b/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": { diff --git a/src/assets/i18n/zh-tw.json b/src/assets/i18n/zh-tw.json index 9ebfea7d6..f29a5b6a0 100644 --- a/src/assets/i18n/zh-tw.json +++ b/src/assets/i18n/zh-tw.json @@ -71,11 +71,14 @@ "ignore": "忽略", "accept": "接收", "activity": "活動紀錄", + "transactionDetails": "活動資訊", "accepted": "已接收", "delivered": "已送出", "inProgress": "等待中", + "waitingToBeAccepted": "等待對方接收中", "returned": "已退回", "sentFrom": "發送自", + "receiver": "收件人", ".message": "訊息", "location": "位置", "message": {