src/app/recipients/recipient-list/recipient-list.component.ts
| selector | app-recipient-list |
| styleUrls | recipient-list.component.css |
| templateUrl | ./recipient-list.component.html |
Properties |
Methods |
Inputs |
Outputs |
Accessors |
constructor(location: Location, device: DeviceService)
|
|||||||||
|
Parameters :
|
groupTitles
|
Type: |
recipients
|
Type: |
delete
|
$event type: EventEmitter
|
| clearSearch |
clearSearch()
|
|
Returns :
void
|
| deleteTemplate | ||||||
deleteTemplate(id: string)
|
||||||
|
Parameters :
Returns :
void
|
| hideActionOptions |
hideActionOptions()
|
|
Returns :
void
|
| hideDelete | ||||||
hideDelete(template: Template)
|
||||||
|
Parameters :
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| search |
search()
|
|
Returns :
void
|
| Private selectTemplate | ||||||
selectTemplate(id: string)
|
||||||
|
Parameters :
Returns :
void
|
| showActions | ||||||
showActions(template: Template)
|
||||||
|
Parameters :
Returns :
void
|
| showDelete | ||||||
showDelete(id: string)
|
||||||
|
Parameters :
Returns :
void
|
| Public device |
device:
|
Type : DeviceService
|
| filter |
filter:
|
Default value : new TemplateDictionaryFilterPipe()
|
| isLoading |
isLoading:
|
Default value : false
|
| searchText |
searchText:
|
Type : string
|
Default value : ''
|
| selectedTemplate |
selectedTemplate:
|
Type : Template
|
| showActionsComponent |
showActionsComponent:
|
Default value : false
|
| showDeleteConfirmation |
showDeleteConfirmation:
|
Default value : false
|
| unFilteredRecipients |
unFilteredRecipients:
|
Type : Object
|
| isEmptyBySearch |
getisEmptyBySearch()
|
import { Location } from '@angular/common';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Template } from '../../models/template.model';
import { TemplateDictionaryFilterPipe } from '../../pipes';
import { DeviceService } from '../../services/device.service';
@Component({
selector: 'app-recipient-list',
templateUrl: './recipient-list.component.html',
styleUrls: ['./recipient-list.component.css']
})
export class RecipientListComponent implements OnInit {
@Input()
recipients: Object;
@Input()
groupTitles: string[];
@Output()
delete = new EventEmitter();
selectedTemplate: Template;
showActionsComponent = false;
showDeleteConfirmation = false;
isLoading = false;
searchText = '';
filter = new TemplateDictionaryFilterPipe();
unFilteredRecipients: Object;
constructor(private location: Location, public device: DeviceService) {}
ngOnInit() {
this.unFilteredRecipients = this.recipients;
}
showActions(template: Template) {
this.selectedTemplate = template;
this.showActionsComponent = true;
this.showDeleteConfirmation = false;
}
hideActionOptions() {
this.showActionsComponent = false;
}
hideDelete(template: Template) {
this.selectedTemplate = template;
this.showDeleteConfirmation = false;
}
showDelete(id: string) {
this.showDeleteConfirmation = true;
this.showActionsComponent = false;
this.selectTemplate(id);
}
private selectTemplate(id: string) {
// this is too convoluted
// todo make template list (this.recipients) an array of templates instead of the dictionary object
// or exend the dictionary object class to support higher order functions.
const keys = Object.keys(this.recipients);
const template: Template = keys
.map(key => this.recipients[key])
.reduce(
(results, templates) =>
results ? results.concat(templates) : new Array<Template>()
)
.filter((t: Template) => t.id === id)
.reduce((prev, t: Template) => t);
this.selectedTemplate = template;
}
deleteTemplate(id: string) {
this.delete.emit(id);
this.showDeleteConfirmation = false;
}
clearSearch() {
this.searchText = '';
setTimeout(() => {
this.recipients = this.unFilteredRecipients;
this.recipients = this.filter.transform(this.recipients, this.searchText);
this.groupTitles = Object.keys(this.recipients).sort();
}, 0);
}
search() {
this.recipients = this.unFilteredRecipients;
this.recipients = this.filter.transform(this.recipients, this.searchText);
this.groupTitles = Object.keys(this.recipients).sort();
}
get isEmptyBySearch(): boolean {
if (this.searchText.length === 0) {
return false;
}
const keys = Object.keys(this.recipients);
return keys.length === 0;
}
}
<span *ngIf="showActionsComponent">
<app-recipient-actions [showEdit]="true" [template]="selectedTemplate" (closeAccountOptions)="hideActionOptions()"
(deleteTemplate)="showDelete($event)"></app-recipient-actions>
</span>
<span *ngIf="showDeleteConfirmation">
<app-recipient-delete [template]="selectedTemplate" (deleteTemplate)="deleteTemplate($event)" (cancelDelete)="hideDelete()"></app-recipient-delete>
</span>
<div class="search-bar">
<p>
<i class="material-icons">search</i>
</p>
<input id="searchRecipients" type="text" [(ngModel)]="searchText" placeholder="Name, Email or Phone Number" (keyup)="search()">
<i class="material-icons search-clear" *ngIf="searchText" (click)="clearSearch()">clear</i>
</div>
<div id="listOfRecipientsCtn" class="list-scroller" [ngClass]="{'iosTrue': device.iOS}">
<div *ngFor="let key of groupTitles">
<div class="items-list-category">
<!-- todo allow achor linking to categories-->
<a>{{key}}</a>
</div>
<!-- Template -->
<div [attr.data-name]="recipient.name" class="items-list-row" *ngFor="let recipient of recipients[key]">
<a (click)="showActions(recipient)" class="mobile-links"></a>
<div class="items-list-info">
<p class="items-list-name">{{recipient.name}}</p>
<p class="items-list-email" *ngIf="recipient.defaultContactMethod === 'EMAIL'">{{recipient.p2PPayToEmailAddress}}</p>
<p class="items-list-email" *ngIf="recipient.defaultContactMethod === 'PHONE'">{{recipient.p2PPayToPhoneNumber
| phone}}</p>
</div>
<div *ngIf="recipient.id" class="items-list-actions">
<p>
<a id="editAccountAction" [routerLink]="['/recipients', recipient.id]">
<span class="items-list-action-icon cursor-pointer">
<i class="material-icons edit-icon">border_color</i> Edit Account
</span>
</a>
<a id="deleteAction" (click)="showDelete(recipient.id)">
<span class="items-list-action-icon cursor-pointer">
<!-- Delete Recipient Inline SVG -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 14 14" style="enable-background:new 0 0 14 14;" xml:space="preserve" class="delete-recipient-icon">
<style type="text/css">
.st0 {
fill: #707173;
}
.st1 {
fill: #FFFFFF;
}
</style>
<g>
<path class="st0" d="M0,14c0.2-1.7,1.8-4.3,4.1-5c0.8,0.8,1.9,1.3,3,1.3c1.1,0,2.2-0.5,3-1.3c2.3,0.8,3.8,3.1,3.9,4.9 M7.1,9.2
M7.1,9.2" />
</g>
<path class="st0" d="M7.1,8.7L7.1,8.7C6.6,8.7,6,8.6,5.5,8.3c-1.2-0.6-2-2-2-3.5c0-2.2,1.6-3.9,3.6-3.9c2,0,3.6,1.8,3.6,3.9
c0,1.6-0.8,2.9-2,3.5C8.2,8.6,7.7,8.7,7.1,8.7" />
<polygon class="st0" points="-0.4,2.8 -1.1,4 14.9,14 15.7,12.8 " />
<polygon class="st1" points="0.3,1.6 -0.4,2.8 15.6,12.8 16.4,11.6 " />
</svg>
Delete</span>
</a>
<a id="sendMoneyAction" [routerLink]="['/start', recipient.id]">
<span class="items-list-action-icon cursor-pointer">
<i class="material-icons send-money-icon">email</i> Send Money
</span>
</a>
</p>
</div>
<a id="creatingRecipient" [routerLink]="['/recipients', recipient.id]">
<div *ngIf="!recipient.id" class="items-list-actions">
<span class="items-list-action-icon underconstruction-list-item">
<i class="material-icons">construction</i> Creating Recipient
</span>
</div>
</a>
</div>
</div>
<!-- Empty Search Screen -->
<div id="emptySearchCtn" class="empty-page-ctn search-empty" *ngIf="isEmptyBySearch">
<i class=" material-icons status-normal">search</i>
<h3 class="status-header status-normal"> No Results </h3>
<div class="page-description">
<p class="para-medium">Sorry, no search results found for
<span class="bold-text search-text ">{{searchText}}</span>
</p>
</div>
<button id="clearSearchButton" type="button" class="action-button" (click)="clearSearch() ">
<p class="button-inside">Clear Search</p>
</button>
</div>
</div>