File
Implements
Methods
|
addAccounts
|
addAccounts(form: NgForm)
|
|
|
Parameters :
| Name |
Type |
Optional |
| form |
NgForm
|
No
|
|
|
printForm
|
printForm(form)
|
|
|
|
|
|
stopPropagation
|
stopPropagation(event: Event)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
Event
|
No
|
|
|
isLoading
|
Default value : false
|
|
|
|
loaderHeader
|
Type : string
|
Default value : 'Adding New Account'
|
|
|
|
message
|
Type : string
|
Default value : 'Adding your account'
|
|
|
import { Component, OnInit, Renderer2 } from '@angular/core';
import { Router } from '@angular/router';
import { filter } from 'rxjs/operators/filter';
import { IPlaidAccount } from '../../../models/i-plaid-account.model';
import { ErrorStore, TemplateService } from '../../../providers';
import { PlaidService } from '../../../providers/services/plaid.service';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-plaid',
templateUrl: './plaid.component.html',
styleUrls: ['./plaid.component.css']
})
export class PlaidComponent implements OnInit {
isLoading = false;
loaderHeader = 'Adding New Account';
message = 'Adding your account';
accounts: Array<IPlaidAccount>;
constructor(
private router: Router,
private plaidService: PlaidService,
private errorStore: ErrorStore,
private templateService: TemplateService
) {}
ngOnInit() {
this.plaidService.clearAccounts();
this.plaidService.accounts$
.pipe(
filter(accounts => accounts !== null),
filter(accounts => accounts !== undefined)
)
.subscribe(accounts => {
this.accounts = accounts;
});
this.plaidService.loader$
.pipe(
filter(event => event !== null),
filter(event => event !== undefined)
)
.subscribe(event => {
console.log(event);
this.isLoading = event.show;
this.loaderHeader = event.header;
this.message = event.message;
});
this.plaidService.open();
}
printForm(form) {
console.log({ form });
}
addAccounts(form: NgForm) {
this.plaidService.onAddAccounts();
const accountsToAdd = this.accounts.filter(account => account.selected);
this.templateService.addAccounts(accountsToAdd).subscribe(wasAdded => {
if (!wasAdded) {
return this.errorStore.showError(
'Failed To Add Account/s',
'An unknown error has occurred, please try again.'
);
}
this.templateService.loadTemplates().subscribe(() => {
this.router.navigate(['/templates']);
// REFACTOR
this.plaidService.onAccountsAdded();
});
});
}
stopPropagation(event: Event) {
event.stopPropagation();
}
}
<app-loader *ngIf="isLoading" [header]="loaderHeader" [message]="message"></app-loader>
<!-- List Of Accounts That Came Back From Plaid -->
<div class="scroller" *ngIf="!isLoading && accounts && accounts.length > 0">
<h1 id="selectAccountLabel" class="page-headers">Select Your Account</h1>
<form #form="ngForm" (ngSubmit)="addAccounts(form)" novalidate>
<div class="auth-actions-ctn">
<div
*ngFor="let account of accounts; let i = index"
class="auth-send-row"
(click)="account.selected = !account.selected"
>
<div class="auth-send-row-inner">
<div class="auth-send-label">
<div class="checkmark">
<i *ngIf="account.selected" class="material-icons">check_circle</i>
</div>
<div class="auth-send-method">
<p class="form-first-child">Display name of the Account</p>
<span (click)="stopPropagation($event)">
<input
type="text"
[(ngModel)]="account.displayName"
[name]="account.accountNumber"
value="{{ account.displayName }}"
required
#displayNameInput
id="displayNameInput"
/>
</span>
<span>Account Number:</span> {{ account.accountNumber }}
</div>
</div>
</div>
</div>
</div>
<div class="btn-container">
<button id="addAccountButton" [disabled]="form.invalid" type="submit" class="action-button add-accounts">
<span class="button-inside">Add Accounts</span>
</button>
<div [hidden]="form.valid" class="alert alert-danger invalidDisplayName">
Please provide a display name for your accounts
</div>
</div>
</form>
</div>
<!-- Plaid didn't return any accounts -->
<div
*ngIf="!isLoading && accounts && accounts.length == 0"
class="empty-page-ctn schedule-empty"
>
<i class="material-icons status-normal">account_balance</i>
<h3 class="status-header status-normal">
No depository accounts were returned by the financial institution
</h3>
<div class="page-description">
<p class="para-medium">You can add a new account manually.</p>
</div>
<button id="continueButton" [routerLink]="['/template/create']" type="button" class="action-button">
<span class="button-inside">Continue</span>
</button>
</div>
iframe {
width: 100%;
}
.auth-actions-ctn {
max-width: 360px;
width: 90%;
margin: 0px auto;
border: 1px solid #ccc;
border-bottom: none;
border-radius: 3px;
}
.auth-send-row {
padding: 15px 0px;
border-bottom: 1px solid #ccc;
width: 100%;
cursor: pointer;
}
.auth-send-row p,
.auth-send-row-second p {
margin-bottom: 0px;
color: #707173;
}
.auth-send-row-inner {
padding: 0px 10px;
}
.auth-send-row-second {
padding: 10px 0px;
width: 100%;
}
.auth-send-row:hover,
.auth-send-row-second:hover {
background-color: rgba(158, 158, 158, 0.2);
}
.act-name {
display: block;
font-weight: bold;
}
.auth-send-method {
line-height: 18px;
display: inline-block;
width: 85%;
vertical-align: middle;
color: #707173;
}
.auth-send-row-inner .method-output {
line-height: 18px;
display: inline-block;
width: 85%;
text-align: center;
vertical-align: middle;
}
.checkmark {
border: 1px solid #474747;
border-radius: 50%;
width: 15px;
height: 15px;
display: inline-block;
vertical-align: middle;
margin: -5px 10px 0px 2px;
}
.checkmark i {
margin-top: -3px;
margin-left: -3px;
font-size: 21px;
color: #42a948;
}
.btn-container {
width: 100%;
text-align: center;
}
.action-button {
max-width: 360px;
width: 90%;
}
.status-header {
max-width: 375px;
line-height: 30px;
margin: auto;
}
.no-return-accounts {
width: 130px;
height: 130px;
margin: 0 0 15px 0;
}
input {
height: 42px;
font-size: 14px;
background-color: #fff;
border-radius: 3px;
width: 100%;
box-sizing: border-box;
padding: 0 45px 0 15px;
font-family: Arial, Helvetica, sans-serif;
color: #474747;
margin: 5px 0px 10px 0px;
}
.page-headers {
margin-bottom: 15px;
}
.approve {
margin: -40px 12px 0 0;
}
.add-accounts {
margin-top: 20px;
}
Legend
Html element with directive