Add close event to transaction details presentation component.

This commit is contained in:
Spencer Ofwiti 2021-05-26 12:21:25 +03:00
parent 48ef7cd58d
commit 9fed6fcaf3
4 changed files with 22 additions and 7 deletions

View File

@ -228,7 +228,7 @@
<mat-tab-group *ngIf="account" dynamicHeight mat-align-tabs="start"> <mat-tab-group *ngIf="account" dynamicHeight mat-align-tabs="start">
<mat-tab label="Transactions"> <mat-tab label="Transactions">
<app-transaction-details [transaction]="transaction"></app-transaction-details> <app-transaction-details [transaction]="transaction" (closeWindow)="transaction = $event"></app-transaction-details>
<div class="card mt-1"> <div class="card mt-1">
<div class="card-header"> <div class="card-header">
<div class="row"> <div class="row">
@ -257,12 +257,12 @@
<ng-container matColumnDef="sender"> <ng-container matColumnDef="sender">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Sender </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Sender </th>
<td mat-cell *matCellDef="let transaction"> {{transaction?.sender?.vcard.fn[0].value}} </td> <td mat-cell *matCellDef="let transaction"> {{transaction?.sender?.vcard.fn[0].value || transaction.from}} </td>
</ng-container> </ng-container>
<ng-container matColumnDef="recipient"> <ng-container matColumnDef="recipient">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Recipient </th> <th mat-header-cell *matHeaderCellDef mat-sort-header> Recipient </th>
<td mat-cell *matCellDef="let transaction"> {{transaction?.recipient?.vcard.fn[0].value}} </td> <td mat-cell *matCellDef="let transaction"> {{transaction?.recipient?.vcard.fn[0].value || transaction.to}} </td>
</ng-container> </ng-container>
<ng-container matColumnDef="value"> <ng-container matColumnDef="value">

View File

@ -3,7 +3,7 @@
<mat-card-title class="card-header"> <mat-card-title class="card-header">
<div class="row"> <div class="row">
TRANSACTION DETAILS TRANSACTION DETAILS
<button mat-raised-button type="button" class="btn btn-outline-secondary ml-auto mr-2" (click)="transaction = null"> CLOSE </button> <button mat-raised-button type="button" class="btn btn-outline-secondary ml-auto mr-2" (click)="close()"> CLOSE </button>
</div> </div>
</mat-card-title> </mat-card-title>
<div *ngIf="transaction.type == 'transaction'" class="card-body"> <div *ngIf="transaction.type == 'transaction'" class="card-body">

View File

@ -1,4 +1,11 @@
import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; import {
ChangeDetectionStrategy,
Component,
EventEmitter,
Input,
OnInit,
Output,
} from '@angular/core';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { TransactionService } from '@app/_services'; import { TransactionService } from '@app/_services';
import { copyToClipboard } from '@app/_helpers'; import { copyToClipboard } from '@app/_helpers';
@ -13,6 +20,9 @@ import { strip0x } from '@src/assets/js/ethtx/dist/hex';
}) })
export class TransactionDetailsComponent implements OnInit { export class TransactionDetailsComponent implements OnInit {
@Input() transaction; @Input() transaction;
@Output() closeWindow: EventEmitter<any> = new EventEmitter<any>();
senderBloxbergLink: string; senderBloxbergLink: string;
recipientBloxbergLink: string; recipientBloxbergLink: string;
traderBloxbergLink: string; traderBloxbergLink: string;
@ -62,4 +72,9 @@ export class TransactionDetailsComponent implements OnInit {
this.snackBar.open(address + ' copied successfully!', 'Close', { duration: 3000 }); this.snackBar.open(address + ' copied successfully!', 'Close', { duration: 3000 });
} }
} }
close(): void {
this.transaction = null;
this.closeWindow.emit(this.transaction);
}
} }

View File

@ -22,7 +22,7 @@
</mat-card-title> </mat-card-title>
<div class="card-body"> <div class="card-body">
<app-transaction-details [transaction]="transaction"></app-transaction-details> <app-transaction-details [transaction]="transaction" (closeWindow)="transaction = $event"></app-transaction-details>
<div class="row card-header"> <div class="row card-header">
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">