import { Location } from '@angular/common';
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
import 'rxjs/add/operator/switchMap';
import { Template } from '../../../models';
import { ITemplateUpdate } from '../../../models/i-template-update.model';
import { MaterialService, TemplateService } from '../../../providers';
import { RoutingLookupService } from '../../../providers/services/routing-lookup.service';
@Component({
selector: 'app-template-detail',
templateUrl: './template-detail.component.html',
styleUrls: ['./template-detail.component.css'],
})
export class TemplateDetailComponent implements OnInit {
@Input() templates: Template[];
@Output() delete = new EventEmitter();
showActions = false;
showDeleteConfirmation = false;
model: Template;
original: Template;
submitted = false;
isLoading = false;
loaderHeader = 'Updating account';
message = 'Saving changes to your account';
isEdit = false;
bankName = '';
isRoutingLoading = true;
constructor(
private materialService: MaterialService,
private templateService: TemplateService,
private lookupService: RoutingLookupService,
private route: ActivatedRoute,
private router: Router,
private location: Location
) {}
ngOnInit() {
this.route.params
.switchMap((params: Params) => this.templateService.getTemplateById(params['id']))
.subscribe((template) => {
this.original = Object.assign({}, template) as Template;
this.model = Object.assign({}, template) as Template;
});
this.lookup();
console.log('app-template component loaded');
this.materialService.render();
}
update() {
console.log('update called!');
this.isLoading = true;
const patch = {
displayName: this.model.displayName,
} as ITemplateUpdate;
this.templateService.updateTemplate(this.model.id, patch).subscribe((wasUpdated) => {
this.isLoading = false;
if (!wasUpdated) {
return console.log('Failed to update template!');
}
this.submitted = true;
this.isEdit = false;
});
}
lookup() {
this.isRoutingLoading = true;
this.lookupService.lookup(this.model.routingNumber).subscribe((bank) => {
this.isRoutingLoading = false;
this.bankName = bank.CustomerName;
});
}
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.loaderHeader = 'Deleting Account';
this.message = 'Please wait a moment while we delete your account.';
this.isLoading = true;
this.hideDelete();
this.delete.emit(id);
this.templateService.deleteTemplate(id).subscribe((wasDeleted) => {
this.location.back();
});
}
cancelChanges() {
this.model = this.original;
this.isEdit = false;
}
return() {
this.router.navigate(['/templates']);
}
}
<span *ngIf="showDeleteConfirmation">
<app-template-delete
[template]="model"
(deleteTemplate)="deleteTemplate($event)"
(cancelDelete)="hideDelete()"
></app-template-delete>
</span>
<div class="scroller">
<app-loader *ngIf="isLoading" [header]="loaderHeader" [message]="message"></app-loader>
<div *ngIf="!isLoading">
<div class="exit-header-ctn">
<button id="closeButton" (click)="return()" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">close</i>
</button>
</div>
<p class="status-icon-ctn">
<span class="svg-status-icon-ctn">
<!-- Account Name SVG Icon -->
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 24 24"
style="enable-background: new 0 0 24 24"
xml:space="preserve"
class="svg-status-icon"
>
<style type="text/css">
.st0 {
fill: none;
}
</style>
<g id="Layer_1">
<path class="st0" d="M1,0h24v24H1V0z" />
<path
d="M20.1,17h-4.3v-6.8h4.3V17z M17.1,15.9h1.8v-4.7h-1.8V15.9z M14.1,17H9.9v-6.8h4.3V17z M11.1,15.9h1.8v-4.7h-1.8V15.9z
M8.1,17H3.9v-6.8h4.3V17z M5.1,15.9h1.8v-4.7H5.1V15.9z"
/>
</g>
<g id="Layer_3">
<path d="M22.1,22.6H1.9v-4.3h20.3V22.6z M3.1,21.4h17.8v-1.8H3.1V21.4z" />
</g>
<g id="Layer_2">
<path
d="M22.1,8.6H1.9v-3L12,0.3l10.1,5.3V8.6z M3.1,7.4h17.8v-1L12,1.7L3.1,6.4V7.4z"
/>
</g>
</svg>
</span>
</p>
<h1 class="status-header status-normal">{{ model.name }}</h1>
<div id="swLabel " class="page-description">
<p class="para-medium status-positive no-need-to-verify-label" *ngIf="model.accountCategory === 'FiVerified'">
No need to verify this account.
</p>
<p
class="para-medium status-positive account-verified-label"
*ngIf="
!model.isMicroDepositVerificationPending &&
model.accountCategory === 'CustomerEntered'
"
>
This account has been successfully verified.
</p>
<p
class="para-medium status-negative account-not-verified-label"
*ngIf="
model.isMicroDepositVerificationPending &&
model.accountCategory === 'CustomerEntered' &&
!model.isFrozen
"
>
This account is not completely active until you verify the two micro deposits.
</p>
<p
class="para-medium status-negative account-frozen-label"
*ngIf="
model.isMicroDepositVerificationPending &&
model.accountCategory === 'CustomerEntered' &&
model.isFrozen
"
>
This account is frozen. Please contact your Financial Institution to unlock this
account.
</p>
</div>
</div>
<!-- Account Detail -->
<div *ngIf="!isLoading && !isEdit">
<!-- Title -->
<div class="itable-ctn">
<div class="itable-row">
<p>Account Summary</p>
</div>
<!-- Display Name -->
<div class="itable-row">
<div class="itable-col-one">
<i class="material-icons">account_balance</i>
</div>
<div class="itable-col-two">
<p>Nickname</p>
</div>
<div class="itable-col-three">
<p id="displayNameLabel">{{ model.displayName }}</p>
<span *ngIf="!model.displayName || model.displayName.length < 1"> - </span>
</div>
</div>
<!-- Routing Number -->
<div class="itable-row">
<div class="itable-col-one">
<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 24 24"
style="enable-background: new 0 0 24 24"
xml:space="preserve"
class="svg-icon"
>
<style type="text/css">
.st0 {
fill: none;
}
.st1 {
enable-background: new;
}
</style>
<path
class="st0"
d="M-0.2,0.2h24v24h-24C-0.2,24.2-0.2,0.2-0.2,0.2z M-0.2,0.2h24v24h-24C-0.2,24.2-0.2,0.2-0.2,0.2z M0.6,1h22.5
v22.5H0.6V1z"
/>
<g class="st1">
<path
d="M17.9,18.8h-3.7l-4-7.1v7.1H7V3.7h4.6c1.8,0,3.2,0.4,4.1,1.1c0.9,0.7,1.4,1.8,1.4,3.2c0,1-0.3,1.9-0.9,2.7
s-1.4,1.2-2.4,1.3L17.9,18.8z M10.2,10.1h0.5c1.3,0,2.2-0.1,2.6-0.4s0.6-0.8,0.6-1.5c0-0.7-0.2-1.3-0.7-1.6
c-0.5-0.3-1.3-0.5-2.5-0.5h-0.5V10.1z"
/>
</g>
</svg>
</div>
<div class="itable-col-two">
<p>Routing Number</p>
</div>
<div class="itable-col-three">
<p id="routingNumberLabel">{{ model.routingNumber }}</p>
</div>
</div>
<!-- Financial Institution -->
<div class="itable-row">
<div class="itable-col-one">
<i class="material-icons">attach_money</i>
</div>
<div class="itable-col-two">
<p>Financial Institution</p>
</div>
<div class="itable-col-three">
<p id="bankNameLabel">
{{ bankName }}
<span class="fi-lookup-loading">
<app-loading-linear *ngIf="isRoutingLoading"></app-loading-linear>
</span>
</p>
</div>
</div>
<!-- Account Number -->
<div class="itable-row">
<div class="itable-col-one">
<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 24 24"
style="enable-background: new 0 0 24 24"
xml:space="preserve"
class="svg-icon"
>
<style type="text/css">
.st0 {
fill: none;
}
.st1 {
enable-background: new;
}
</style>
<path
class="st0"
d="M-0.2,0.2h24v24h-24C-0.2,24.2-0.2,0.2-0.2,0.2z M-0.2,0.2h24v24h-24C-0.2,24.2-0.2,0.2-0.2,0.2z M0.6,1h22.5
v22.5H0.6V1z"
/>
<g class="st1">
<path
d="M4.2,18.8L9.9,3.7h3.7l5.8,15.1h-3.7l-1.2-3.2H8.7l-1.1,3.2H4.2z M13.8,13.1l-1.7-4.9c0-0.1-0.1-0.4-0.2-0.7
c-0.1-0.4-0.2-0.8-0.2-1.3c-0.1,0.5-0.2,0.9-0.3,1.3c-0.1,0.4-0.1,0.6-0.2,0.8l-1.6,4.8H13.8z"
/>
</g>
</svg>
</div>
<div class="itable-col-two">
<p>Account Number</p>
</div>
<div class="itable-col-three">
<p id="accountNumberLabel" >{{ model.accountNumber | mask }}</p>
</div>
</div>
<!-- Type -->
<div class="itable-row">
<div class="itable-col-one">
<i class="material-icons">title</i>
</div>
<div class="itable-col-two">
<p>Account Type</p>
</div>
<div class="itable-col-three">
<p id="accountTypeLabel">{{ model.accountType }}</p>
</div>
</div>
<button id="changeNicknameButton" type="submit" class="action-button" tabindex="4" (click)="isEdit = true">
<span class="button-inside">Change Nickname</span>
</button>
<div
*ngIf="
!isEdit &&
model.accountCategory === 'CustomerEntered' &&
!model.isMicroDepositVerificationPending
"
class="action-ctn"
>
<p class="para-dark">
<a id="deleteAccountButton" (click)="showDelete(model.id)">
<!-- Delete Template 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 7.7 7.7"
style="enable-background: new 0 0 7.7 7.7"
xml:space="preserve"
class="delete-account action-link"
>
<style type="text/css">
.st0 {
fill: none;
}
.st2 {
fill: #ffffff;
}
</style>
<path class="st0" d="M0,0h7.7v7.7H0V0z" />
<path
class="st1"
d="M1.3,3.2v2.3h1V3.2C2.3,3.2,1.3,3.2,1.3,3.2z M3.2,3.2v2.3h1V3.2C4.2,3.2,3.2,3.2,3.2,3.2z M0.6,7.1h6.1v-1H0.6
V7.1z M5.1,3.2v2.3h1V3.2C6.1,3.2,5.1,3.2,5.1,3.2z M3.7,0.3l-3,1.6v0.6h6.1V1.9L3.7,0.3z"
/>
<polygon class="st1" points="0.3,0.8 0,1.3 7,5.7 7.4,5.1 " />
<polygon class="st2" points="0.6,0.2 0.3,0.7 7.4,5.2 7.7,4.6 " />
</svg>
Delete Account
</a>
</p>
</div>
</div>
</div>
<div *ngIf="!isLoading" id="templateCtn">
<!-- Editing Screen -->
<div *ngIf="isEdit" class="form-ctn">
<form (ngSubmit)="update($event, form)" #form="ngForm" autocomplete="off" novalidate>
<!-- DisplayName -->
<span>
<p class="input-label form-first-child">Nickname</p>
<input
type="text"
id="displayName"
tabindex="1"
[(ngModel)]="model.displayName"
name="displayName"
#displayName="ngModel"
required
/>
<span class="approve">
<i class="material-icons status-positive">check</i>
</span>
<div *ngIf="!displayName.pristine && displayName.invalid" class="alert alert-danger">
Use alphabetic
<span> a-z, </span>
<span> A-Z </span> or numeric
<span> 0-9 </span>
</div>
</span>
<button
type="submit"
class="action-button"
tabindex="4"
[disabled]="form.pristine || form.invalid"
id="saveChangesButton"
>
<span class="button-inside">Save Changes</span>
</button>
</form>
</div>
<div *ngIf="isEdit" class="action-ctn">
<p class="para-dark">
<a id="cancelChangesButton" (click)="cancelChanges()"> Cancel Changes </a>
</p>
</div>
</div>
</div>