import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { Template } from '../../../models';
import { MaterialService } from '../../../providers';
import { DeviceService } from '../../../providers/services/device.service';
import { AccountCategory } from '../../../enums/account-category.enum';
import { ErrorStore, TemplateService } from '../../../providers';
@Component({
selector: 'app-template-list',
templateUrl: './template-list.component.html',
styleUrls: ['./template-list.component.css']
})
export class TemplateListComponent implements OnInit {
templates: Template[];
fiTemplates: Template[];
customerTemplates: Template[];
selectedTemplate: Template;
showActionsComponent = false;
showDeleteConfirmation = false;
isLoading = false;
searchText = '';
showAddLabel = false;
verifyDepositsShow = false;
loaderHeader = 'Retrieving Data';
message = 'Please wait a moment while we retrieve your information.';
constructor(
public device: DeviceService,
private materialService: MaterialService,
private templateService: TemplateService,
private errorService: ErrorStore
) {}
ngOnInit() {
this.isLoading = true;
this.templateService.templates$
.filter(templates => templates !== null)
.filter(templates => templates !== undefined)
.subscribe(templates => {
this.templates = templates;
this.fiTemplates = this.templates.filter(
t => t.accountCategory === AccountCategory.FiVerified
);
this.customerTemplates = this.templates.filter(
t => t.accountCategory === AccountCategory.CustomerEntered
);
this.isLoading = false;
});
this.materialService.render();
console.log('TemplateListComponent Loaded');
}
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);
}
showVerifyDeposits() {
this.verifyDepositsShow = true;
}
closeMicroInput() {
this.verifyDepositsShow = false;
}
private selectTemplate(id: string) {
const template: Template = this.templates.filter(
(t: Template) => t.id === id
)[0];
// .reduce((prev, t: Template) => t);
this.selectedTemplate = template;
}
clearSearch() {
this.searchText = '';
}
get placeholder(): string {
return this.showAddLabel
? 'Add A New Account'
: 'Name of Account or Account Number';
}
stopPropagation(event: Event) {
event.stopPropagation();
}
deleteTemplate(id: string) {
this.showDeleteConfirmation = false;
this.loaderHeader = 'Deleting Account';
this.message = 'Please wait a moment while we delete your account.';
this.isLoading = true;
this.templateService.deleteTemplate(id).subscribe(wasDeleted => {
if (!wasDeleted) {
this.errorService.showError('Error', 'Failed to delete account');
return;
}
this.isLoading = false;
});
}
}
<app-loader *ngIf="isLoading" [header]="loaderHeader" [message]="message"></app-loader>
<span *ngIf="templates && !isLoading">
<span *ngIf="showActionsComponent">
<app-template-actions
[showEdit]="true"
[template]="selectedTemplate"
(closeAccountOptions)="hideActionOptions()"
(deleteTemplate)="showDelete($event)"
></app-template-actions>
</span>
<span *ngIf="showDeleteConfirmation">
<app-template-delete
[template]="selectedTemplate"
(deleteTemplate)="deleteTemplate($event)"
(cancelDelete)="hideDelete()"
></app-template-delete>
</span>
<div class="scroller">
<div class="search-bar">
<p>
<button
[routerLink]="['/template/plaid']"
(mouseenter)="showAddLabel = true"
(mouseleave)="showAddLabel = false"
id="add-account-btn"
>
<i class="material-icons">add</i>
</button>
<button [routerLink]="['/template/plaid']" id="add-account-btn" class="is-mobile">
<i class="material-icons">add</i>
</button>
<i *ngIf="!showAddLabel" class="material-icons">search</i>
</p>
<input id="searchBarInput" type="text" [(ngModel)]="searchText" [placeholder]="placeholder" />
<i id="clearSearchButton" class="material-icons search-clear" *ngIf="searchText" (click)="clearSearch()">clear</i>
</div>
<div id="listOfRecipientsCtn" class="items-list-ctn">
<div
*ngIf="(fiTemplates | templatesFilter: searchText).length > 0"
class="items-list-category"
id="internalAccountsHeader"
>
Internal Accounts
</div>
<div id="listOfInternalRecipients" class="template-list-ctn">
<!-- FI Verified Templates -->
<div
class="items-list-row"
*ngFor="let template of (fiTemplates | templatesFilter: searchText)"
[attr.data-template-id]="template.id"
[attr.data-template-number]="template.accountNumber | mask"
>
<a (click)="showActions(template)" class="mobile-links"></a>
<div class="items-list-info">
<app-template-label [id]="template.id"></app-template-label>
</div>
<div class="items-list-actions">
<p (click)="stopPropagation($event)">
<a class="detailsButton" [routerLink]="['/templates', template.id]">
<span class="items-list-action-icon">
<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="detail"
>
<style type="text/css">
.st0 {
fill: none;
}
.st1 {
fill: #707173;
}
</style>
<path class="st0" d="M0,0h24v24H0V0z" />
<path
d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M14,18h-4v-7h4V18z M14,9h-4V6h4V9z"
/>
</svg>
Details
</span>
</a>
</p>
</div>
</div>
</div>
<!-- Customer Entered Templates -->
<div
[hidden]="
(customerTemplates | templatesFilter: searchText).length === 0 &&
searchText.length > 0
"
class="items-list-category"
id="externalAccountsHeader"
>
External Accounts
</div>
<div id="listOfExternalAccounts" class="template-list-ctn">
<div
class="items-list-row"
*ngFor="let template of (customerTemplates | templatesFilter: searchText)"
[attr.data-template-id]="template.id"
[attr.data-template-number]="template.accountNumber | mask"
>
<a (click)="showActions(template)" class="mobile-links"></a>
<div class="items-list-info">
<app-template-label [id]="template.id"></app-template-label>
</div>
<div class="items-list-actions">
<p>
<a
class="verifyButton"
*ngIf="template.needsVerified && !template.isFrozen"
[routerLink]="['/verify', template.id]"
>
<span class="items-list-action-icon">
<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 29.3"
style="enable-background:new 0 0 24 29.3;"
xml:space="preserve"
class="verify"
>
<style type="text/css">
.st0 {
fill: none;
}
.st1 {
fill: #707173;
}
</style>
<path class="st0" d="M0,0h24v29.3H0V0z" />
<path
class="st1"
d="M20.8,2.2L8.5,14.5L3.2,9.4L0,12.6L8.4,21L24,5.4C24,5.4,20.8,2.2,20.8,2.2z"
/>
<path class="st1" d="M24,23.7l-24,0l0,3.6l24,0C24,27.2,24,23.7,24,23.7z" />
</svg>
Verify
</span>
</a>
<a class="deleteButton" *ngIf="!template.needsVerified" (click)="showDelete(template.id)">
<span class="items-list-action-icon">
<!-- 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"
>
<style type="text/css">
.st0 {
fill: none;
}
.st1 {
fill: #717274;
}
.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</span
>
</a>
<a class="detailsButton" [routerLink]="['/templates', template.id]">
<span class="items-list-action-icon">
<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="detail"
>
<style type="text/css">
.st0 {
fill: none;
}
.st1 {
fill: #707173;
}
</style>
<path class="st0" d="M0,0h24v24H0V0z" />
<path
d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M14,18h-4v-7h4V18z M14,9h-4V6h4V9z"
/>
</svg>
Details
</span>
</a>
</p>
</div>
</div>
</div>
</div>
<!-- Empty Search Screen -->
<div
id="emptySearchCtn"
class="empty-page-ctn"
*ngIf="
(fiTemplates | templatesFilter: searchText).length === 0 &&
(customerTemplates | templatesFilter: searchText).length === 0
"
>
<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>
<!-- Empty Customer Entered Screen -->
<div
[hidden]="
((customerTemplates | templatesFilter: searchText).length === 0 &&
searchText.length > 0) ||
customerTemplates.length > 0
"
id="emptyTemplatesListCtn"
class="empty-page-ctn"
>
<i class="material-icons status-normal "> account_balance</i>
<h3 id="noExternalAccountsHeader" class="status-header status-normal ">No External Accounts</h3>
<div class="page-description ">
<p class="para-medium ">
You don't have any external accounts. To use this product you need at least one
external account.
</p>
</div>
<a [routerLink]="['/template/plaid']">
<button id="createAccountButton" type="button " class="action-button ">
<p class="button-inside ">Create An Account</p>
</button>
</a>
</div>
</div>
</span>
/* TODO move styles to billpay-styles */
#add-account-btn {
width: 36px;
height: 36px;
min-width: 36px;
padding: 0;
border-radius: 0;
margin: 4px;
background-color: #be2438;
border: none;
vertical-align: middle;
cursor: pointer;
}
.page-description p {
width: 300px;
}
#add-account-btn-mobile {
display: none;
}
#add-account-btn i {
margin-right: 0px;
color: #fff;
}
.template-list-ctn {
max-height: 33vh;
overflow-y: auto;
}
.items-list-actions {
display: inline-block;
right: 10px;
position: absolute;
margin-top: 10px;
}
.items-list-actions p {
margin: 5px 0px 0px 10px;
line-height: 14px;
font-size: 12px;
}
.items-list-actions a {
display: inline-block;
}
.items-list-actions i {
font-size: 18px;
line-height: 14px;
margin-top: -5px;
vertical-align: bottom;
}
.items-list-action-icon {
margin-right: 15px;
cursor: pointer;
color: #707173;
}
.items-list-category {
background-color: #ccc;
padding: 5px 15px;
display: block;
}
.items-list-category a {
color: #474747;
font-size: 12px;
}
.items-list-category p {
margin: 0px;
}
.items-list-row:hover {
background-color: rgba(158, 158, 158, 0.2);
}
.items-list-info {
display: inline-block;
}
.mobile-links {
display: none;
}
.delete-template-icon {
height: 14px;
margin-top: -8px;
margin-right: 5px;
}
.empty-page-ctn {
margin-top: 10%;
}
@media only screen and (min-width: 1000px) {
.items-list-row {
display: inline-block;
width: 325px;
padding: 15px 15px;
margin: 15px 0px 15px 15px;
background-color: #f7f8fc;
border-bottom: none;
vertical-align: top;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.items-list-row:hover {
background-color: #f7f8fc;
}
#add-account-btn:hover {
margin-right: 8px;
}
.items-list-actions {
position: relative;
margin-top: 0px;
display: block;
}
}
/*--- Search Bar ---*/
.search-bar {
width: 100%;
padding: 10px 10px 10px 10px;
z-index: 99;
background-color: #fff;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
}
.search-bar p {
display: inline-block;
margin: 0px;
}
.search-bar i {
vertical-align: middle;
font-size: 20px;
color: #707173;
margin-right: 3px;
}
.search-bar input {
font-size: 14px;
background-color: #fff;
border: none;
border-radius: 3px;
vertical-align: middle;
width: 80%;
margin: 0px auto;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
color: #474747;
}
.search-bar [placeholder]:focus::-webkit-input-placeholder {
opacity: 0;
}
input:hover {
background-color: #000;
}
i.search-clear {
position: absolute;
font-size: 18px !important;
border-radius: 50%;
padding: 5px;
margin-top: 12px;
transition: visibility 0s linear 200ms, opacity 200ms;
cursor: pointer;
right: 10px;
}
i.search-clear:hover {
background-color: rgba(158, 158, 158, 0.2);
}
.search-text {
display: block;
}
@media only screen and (max-width: 650px) {
.items-list-actions {
position: relative;
display: none;
margin-left: 10px;
}
#add-account-btn {
width: 46px;
height: 46px;
position: fixed;
bottom: 45px;
right: 15px;
z-index: 9999;
border-radius: 50%;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
#add-account-btn i {
font-size: 26px;
}
.grey-out {
color: #707173 !important;
}
.is-mobile {
display: inline-block;
}
.is-desktop {
display: none;
}
.items-list-actions-mobile {
display: inline-block;
}
.mobile-links {
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
i.search-clear {
margin-top: 4px;
}
}
/*-- IE Fix --*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.delete-template-icon {
width: 15px;
}
}