src/app/recipients/recipient-actions/recipient-actions.component.ts
| selector | app-recipient-actions |
| styleUrls | recipient-actions.component.css |
| templateUrl | ./recipient-actions.component.html |
Methods |
Inputs |
Outputs |
constructor()
|
showEdit
|
Type: |
template
|
Type: |
closeAccountOptions
|
$event type: EventEmitter
|
deleteTemplate
|
$event type: EventEmitter
|
| hideActionOptions |
hideActionOptions()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| showDelete |
showDelete()
|
|
Returns :
void
|
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Template } from '../../models';
@Component({
selector: 'app-recipient-actions',
templateUrl: './recipient-actions.component.html',
styleUrls: ['./recipient-actions.component.css']
})
export class RecipientActionsComponent implements OnInit {
@Input() template: Template;
@Input() showEdit: boolean;
@Output() closeAccountOptions = new EventEmitter();
@Output() deleteTemplate = new EventEmitter<string>();
constructor() {}
ngOnInit() {}
// todo rename to toggleActions
hideActionOptions() {
this.closeAccountOptions.emit();
}
showDelete() {
this.deleteTemplate.emit(this.template.id);
}
}
<div class="overlay scroller">
<div class="pop-up-ctn" id="recipientAccountOptions">
<div class="close-ctn">
<a id="closeButton" (click)="hideActionOptions()">
<i class="material-icons">close</i>
</a>
</div>
<div class="pop-up-ctn-header">
<p class="header-text">{{template.name}}</p>
</div>
<div class="pop-up-ctn-body">
<div id="editRecipientButton" *ngIf="showEdit" class="recipient-option" [routerLink]="['/recipients', template.id]">
<p>
<i class="material-icons">border_color</i> Edit Recipient</p>
</div>
<div id="deleteRecipientButton" class="recipient-option" *ngIf="template.id" (click)="showDelete()">
<p>
<!-- Delete Recipient 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 Recipient</p>
</div>
<div id="sendMoreMoneyToRecipientButton" *ngIf="template.id" class="recipient-option" [routerLink]="['/start', template.id]">
<p>
<i class="material-icons email-icon">email</i> Send Money To Recipient</p>
</div>
</div>
</div>
</div>