File
Implements
Metadata
| selector |
app-recipient-detail |
| styleUrls |
recipient-detail.component.css |
| templateUrl |
./recipient-detail.component.html |
Methods
|
cancelChanges
|
cancelChanges()
|
|
|
|
|
|
deleteTemplate
|
deleteTemplate(id: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| id |
string
|
no
|
|
|
hideActionOptions
|
hideActionOptions()
|
|
|
|
|
|
isEmailErrorHidden
|
isEmailErrorHidden(form: NgForm)
|
|
|
Parameters :
| Name |
Type |
Optional |
| form |
NgForm
|
no
|
|
|
isFormValid
|
isFormValid(form: NgForm)
|
|
|
Parameters :
| Name |
Type |
Optional |
| form |
NgForm
|
no
|
|
|
isPhoneErrorHidden
|
isPhoneErrorHidden(form: NgForm)
|
|
|
Parameters :
| Name |
Type |
Optional |
| form |
NgForm
|
no
|
|
|
showActionsOptions
|
showActionsOptions()
|
|
|
|
|
|
toggleActionOptions
|
toggleActionOptions()
|
|
|
|
|
|
update
|
update(event: any, form: NgForm)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
any
|
no
|
| form |
NgForm
|
no
|
|
|
action$
|
action$: Observable<any>
|
Type : Observable<any>
|
|
|
|
isLoading
|
isLoading:
|
Default value : false
|
|
|
|
loaderHeader
|
loaderHeader: string
|
Type : string
|
Default value : 'Updating Recipient'
|
|
|
|
message
|
message: string
|
Type : string
|
Default value : 'Saving changes to your recipient'
|
|
|
|
showActions
|
showActions:
|
Default value : false
|
|
|
|
showDeleteConfirmation
|
showDeleteConfirmation:
|
Default value : false
|
|
|
|
submitted
|
submitted:
|
Default value : false
|
|
|
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/switchMap';
import { Location } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { AbstractControl, NgForm } from '@angular/forms';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { Template } from '../../models/template.model';
import { TemplateService, MaterialService } from '../../services';
import { tap } from 'rxjs/operators';
@Component({
selector: 'app-recipient-detail',
templateUrl: './recipient-detail.component.html',
styleUrls: ['./recipient-detail.component.css'],
})
export class RecipientDetailComponent implements OnInit {
showActions = false;
showDeleteConfirmation = false;
model: Template;
original: Template;
submitted = false;
isLoading = false;
loaderHeader = 'Updating Recipient';
message = 'Saving changes to your recipient';
action$: Observable<any>;
constructor(
private materialService: MaterialService,
private templateService: TemplateService,
private route: ActivatedRoute,
private router: Router,
private location: Location
) {}
ngOnInit() {
this.action$ = this.route.params
.switchMap((params: Params) => this.templateService.getTemplate(params['id']))
.pipe(
tap((template) => {
this.original = Object.assign({}, template);
this.model = Object.assign({}, template);
})
);
console.log('app-recipient component loaded');
this.materialService.render();
}
update(event: any, form: NgForm) {
if (this.isFormValid(form)) {
this.isLoading = true;
this.action$ = this.templateService.updateTemplate(this.model).pipe(
tap((wasUpdated) => {
this.isLoading = false;
if (!wasUpdated) {
return console.log('Failed to update template!');
}
this.submitted = true;
})
);
}
}
isFormValid(form: NgForm) {
const phone = form.controls['phone'];
const email = form.controls['email'];
return (
form.valid ||
(email !== null &&
email.valid &&
this.model.defaultContactMethod === 'EMAIL' &&
phone.value.length === 0) ||
(phone !== null &&
phone.valid &&
this.model.defaultContactMethod === 'PHONE' &&
email.value.length === 0)
);
}
toggleActionOptions() {
this.showActions = !this.showActions;
this.showDeleteConfirmation = false;
}
showActionsOptions() {
this.showActions = true;
}
hideActionOptions() {
this.showActions = false;
}
showDelete() {
this.showDeleteConfirmation = true;
this.showActions = false;
}
hideDelete() {
this.showDeleteConfirmation = false;
}
deleteTemplate(id: string) {
this.isLoading = true;
this.templateService.deleteTemplate(id).subscribe((wasDeleted) => {
this.location.back();
});
this.showDeleteConfirmation = false;
}
isEmailErrorHidden(form: NgForm): boolean {
const email = form.controls['email'];
const phone = form.controls['phone'];
if (this.failsEmailPreReqs(email, phone)) {
return false;
}
return (
email.valid ||
(this.model.defaultContactMethod === 'PHONE' &&
email.invalid &&
(email.value === null || (email.value !== null && email.value.length === 0))) ||
this.failsPhonePreReqs(email, phone) ||
(phone.value.length === 0 && email.value.length === 0)
);
}
failsEmailPreReqs(email: AbstractControl, phone: AbstractControl): boolean {
return !email || !phone || email.value === null || email.value === undefined;
}
isPhoneErrorHidden(form: NgForm): boolean {
const email = form.controls['email'];
const phone = form.controls['phone'];
if (this.failsPhonePreReqs(email, phone)) {
return false;
}
return (
phone.valid ||
(this.model.defaultContactMethod === 'EMAIL' &&
phone.invalid &&
(phone.value === null || (phone.value !== null && phone.value.length === 0))) ||
this.failsPhonePreReqs(phone, email) ||
(email.value.length === 0 && email.value.length === 0)
);
}
failsPhonePreReqs(email: AbstractControl, phone: AbstractControl): boolean {
return !email || !phone || phone.value === null || phone.value === undefined;
}
cancelChanges() {
this.model = this.original;
this.router.navigate(['/recipients']);
}
return() {
this.router.navigate(['/recipients']);
}
}
<ng-container *ngIf="action$ | async"></ng-container>
<div *ngIf="model" class="scroller">
<span *ngIf="showActions">
<app-recipient-actions
[showEdit]="false"
[template]="model"
(closeAccountOptions)="hideActionOptions()"
(deleteTemplate)="showDelete()"
></app-recipient-actions>
</span>
<span *ngIf="showDeleteConfirmation">
<app-recipient-delete
[template]="model"
(deleteTemplate)="deleteTemplate($event)"
(cancelDelete)="hideDelete()"
></app-recipient-delete>
</span>
<app-loader *ngIf="isLoading" [header]="loaderHeader" [message]="message"></app-loader>
<div *ngIf="!isLoading && model.id" id="recipientAccountCtn">
<div id="recipientAccountHeaderCtn">
<h3 id="recipientDetailNameHeader">{{ model.name }}</h3>
<a id="moreOptionsIcon" class="more-options" (click)="toggleActionOptions()">
<p id="tt4">
<i class="material-icons">more_vert</i>
</p>
</a>
<div id="moreOptionsLabel" class="mdl-tooltip" for="tt4">More Options</div>
</div>
<div id="formCtn" [hidden]="submitted">
<form method="POST" (ngSubmit)="update($event, form)" #form="ngForm" autocomplete="off" novalidate>
<p>Secret Word</p>
<input
type="text"
id="SecretWord"
tabindex="1"
[(ngModel)]="model.secret"
name="secretWord"
minlength="5"
maxlength="15"
#secretWord="ngModel"
pattern="[A-Za-z0-9!]{5,}"
required
/>
<span class="approve">
<i class="material-icons status-positive">check</i>
</span>
<span *ngIf="model.secret.length < 5 || model.secret.length == 0">
<div [hidden]="secretWord.valid || secretWord.pristine" class="alert alert-danger alert-secret">
Please follow the requested format
</div>
</span>
<div class="sw-criteria-ctn">
<p class="sw-criteria">
Use a <span class="sw-criteria-require"> single word with no spaces </span> that is
<span class="sw-criteria-require"> 5-15 characters </span> using only
<span class="sw-criteria-require"> A-Z, a-z, 0-9 </span> or
<span class="sw-criteria-require"> ! </span>
</p>
</div>
<div id="invalidContactMethodLabel" [hidden]="email.valid || phone.valid" class="alert alert-danger">
At least one valid contact method is required
</div>
<div id="titleNDefault">
<p>Contact Email</p>
<div id="setDefaultContactEmail">
<label id="setEmail">
<input
id="defaultEmailInputEmail"
type="radio"
name="set-default"
value="EMAIL"
[(ngModel)]="model.defaultContactMethod"
/>
<span class="custom-checkbox"> <i class="material-icons">check</i> </span>Set as default
</label>
</div>
</div>
<input
type="email"
id="email"
tabindex="2"
name="email"
[(ngModel)]="model.p2PPayToEmailAddress"
#email="ngModel"
[required]="model.defaultContactMethod === 'EMAIL'"
pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$"
/>
<span class="approve">
<i class="material-icons status-positive">check</i>
</span>
<div id="invalid-email-label" [hidden]="isEmailErrorHidden(form)" class="alert alert-danger">
value is not a valid email address
</div>
<div id="titleNDefaultTwo">
<p>Contact Phone</p>
<div id="setDefaultContactPhone">
<label id="setPhone">
<input
id="defaultPhoneInputPhone"
type="radio"
name="set-default"
value="PHONE"
[(ngModel)]="model.defaultContactMethod"
/>
<span class="custom-checkbox"> <i class="material-icons">check</i> </span>Set as default
</label>
</div>
</div>
<input
type="tel"
id="phone"
tabindex="3"
name="phone"
[(ngModel)]="model.p2PPayToPhoneNumber"
#phone="ngModel"
[required]="model.defaultContactMethod === 'PHONE'"
pattern="^[(]?\d{3}[)]?[-.]?\d{3}[-.]?\d{4}$"
/>
<span class="approve">
<i class="material-icons status-positive">check</i>
</span>
<div id="invalidPhoneLabel" [hidden]="isPhoneErrorHidden(form)" class="alert alert-danger">
value is not a valid phone number
</div>
<button
id="saveChangesButton"
type="submit"
class="action-button"
tabindex="4"
[disabled]="form.pristine"
>
<span class="button-inside">Save Changes</span>
</button>
</form>
</div>
<div class="action-ctn" [hidden]="submitted">
<p class="para-dark">
<a id="cancelChangesButton" (click)="cancelChanges()"> Cancel Changes </a>
</p>
</div>
<div id="submitted-results" [hidden]="!submitted">
<!-- Title -->
<div class="itable-row">
<p>Below is what we have on file</p>
</div>
<!-- Secret Word -->
<div class="itable-row row-one">
<div class="itable-col-one">
<i class="material-icons">verified_user</i>
</div>
<div class="itable-col-two">
<p>Secret Word</p>
</div>
<div class="itable-col-three">
<p id="onFileSecretWord">{{ model.secret }}</p>
</div>
</div>
<!-- Contact Method Two -->
<div class="itable-row">
<div class="itable-col-one">
<i class="material-icons">email</i>
</div>
<div class="itable-col-two">
<p>Contact Email</p>
</div>
<div class="itable-col-three">
<p id="onFileEmail">{{ model.p2PPayToEmailAddress }}</p>
</div>
</div>
<!-- Contact Method Two -->
<div class="itable-row">
<div class="itable-col-one">
<i class="material-icons">email</i>
</div>
<div class="itable-col-two">
<p>Contact Phone</p>
</div>
<div class="itable-col-three">
<p id="onFilePhone">{{ model.p2PPayToPhoneNumber }}</p>
</div>
</div>
<button
id="editChangesButton"
type="submit"
class="action-button"
tabindex="4"
(click)="submitted = false"
>
<span class="button-inside">Edit Changes</span>
</button>
<div class="action-ctn">
<p class="para-dark">
<a id="returnButton" (click)="return()"> Return </a>
</p>
</div>
</div>
</div>
<div *ngIf="!isLoading && !model.id">
<div>
<div class="exit-header-ctn">
<button (click)="return()" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">close</i>
</button>
</div>
</div>
<p class="status-icon-ctn collected no-print">
<span class="circle-icon-status">
<i class="material-icons status-normal status-icon">construction</i>
</span>
</p>
<h1 class="status-header status-positive">Creating Recipient</h1>
<div id="swLabel" class="page-description">
<p class="para-medium">We have received your request and are currently creating this Recipient.</p>
</div>
</div>
</div>
Legend
Html element with directive