File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Accessors
|
|
|
Methods
|
activateAmountSort
|
activateAmountSort()
|
|
|
|
|
|
activateDeliverySort
|
activateDeliverySort()
|
|
|
|
|
|
activatePayFromSort
|
activatePayFromSort()
|
|
|
|
|
|
activatePayToSort
|
activatePayToSort()
|
|
|
|
|
|
activateSendOnSort
|
activateSendOnSort()
|
|
|
|
|
|
clearSearch
|
clearSearch()
|
|
|
|
|
|
Private
closeTabAfterDownloadStarts
|
closeTabAfterDownloadStarts(exportWindow: Window)
|
|
|
Parameters :
| Name |
Type |
Optional |
| exportWindow |
Window
|
No
|
|
|
deactivateAll
|
deactivateAll()
|
|
|
|
|
|
export
|
export(type: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| type |
string
|
No
|
|
|
getPayments
|
getPayments(isScheduled, orderBy, orderDirection)
|
|
|
Parameters :
| Name |
Optional |
| isScheduled |
No
|
| orderBy |
No
|
| orderDirection |
No
|
|
|
Private
openNewTab
|
openNewTab()
|
|
|
|
|
|
select
|
select(payment: Payment)
|
|
|
Parameters :
| Name |
Type |
Optional |
| payment |
Payment
|
No
|
|
|
Private
sumPayments
|
sumPayments(accumulator: number, currentValue: number)
|
|
|
Parameters :
| Name |
Type |
Optional |
| accumulator |
number
|
No
|
| currentValue |
number
|
No
|
|
|
toggleExportOption
|
toggleExportOption()
|
|
|
|
|
|
totalAmount
|
totalAmount()
|
|
|
|
|
|
viewRecentPayments
|
viewRecentPayments()
|
|
|
|
|
|
viewScheduledPayments
|
viewScheduledPayments()
|
|
|
|
|
|
cssclass
|
Type : string
|
Default value : 'short-spinner'
|
|
|
|
isLoading
|
Default value : false
|
|
|
|
isSortAmountActive
|
Default value : false
|
|
|
|
isSortAmountActiveAsc
|
Default value : true
|
|
|
|
isSortDeliveryActive
|
Default value : false
|
|
|
|
isSortDeliveryActiveAsc
|
Default value : true
|
|
|
|
isSorting
|
Default value : false
|
|
|
|
isSortPayFromActive
|
Default value : false
|
|
|
|
isSortPayFromActiveAsc
|
Default value : true
|
|
|
|
isSortPayToActive
|
Default value : false
|
|
|
|
isSortPayToActiveAsc
|
Default value : true
|
|
|
|
isSortSendOnActive
|
Default value : true
|
|
|
|
isSortSendOnActiveAsc
|
Default value : false
|
|
|
|
lowercase
|
Default value : false
|
|
|
|
payments
|
Type : []
|
Default value : []
|
|
|
|
payments$
|
Type : Observable<any>
|
|
|
|
searchText
|
Type : string
|
Default value : ''
|
|
|
|
showAddExportOptions
|
Default value : false
|
|
|
|
showEmptyRecentScreen
|
Default value : false
|
|
|
|
showEmptyScheduleScreen
|
Default value : false
|
|
|
|
totalAmountOfScheduledPayments
|
|
|
|
viewingRecentPayments
|
Default value : false
|
|
|
|
viewingScheduledPayments
|
Default value : true
|
|
|
Accessors
|
hasPayments
|
gethasPayments()
|
|
|
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { tap } from '../../../../../node_modules/rxjs/operators';
import { GET_PAYMENTS_BY, ORDER_BYS, ORDER_BY_DIRECTIONS } from '../../../app.constants';
import { Payment } from '../../../models';
import { IExportUrls } from '../../../models/i-export-urls.model';
import { MaterialService, PaymentService, SessionStore } from '../../../providers';
import { DeviceService } from '../../../providers/services/device.service';
const exportWindowLoader = '<h3 style="text-align:center;">Please wait...</h3>';
@Component({
selector: 'app-payment-list',
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: './payment-list.component.html',
styleUrls: ['./payment-list.component.css'],
})
export class PaymentListComponent implements OnInit {
payments = [];
payments$: Observable<any>;
filterValue: string;
lowercase = false;
searchText = '';
viewingScheduledPayments = true;
viewingRecentPayments = false;
totalAmountOfScheduledPayments;
showAddExportOptions = false;
exportUrls: IExportUrls;
isSorting = false;
isSortPayToActive = false;
isSortSendOnActive = true;
isSortDeliveryActive = false;
isSortPayFromActive = false;
isSortAmountActive = false;
isSortPayToActiveAsc = true;
isSortSendOnActiveAsc = false;
isSortDeliveryActiveAsc = true;
isSortPayFromActiveAsc = true;
isSortAmountActiveAsc = true;
showEmptyScheduleScreen = false;
showEmptyRecentScreen = false;
isLoading = false;
cssclass = 'short-spinner';
startDate: Date;
endDate: Date;
constructor(
public device: DeviceService,
private materialService: MaterialService,
private router: Router,
private session: SessionStore,
private paymentService: PaymentService
) {}
ngOnInit() {
this.session.session$.subscribe((session) => {
this.exportUrls = session.exportUrls;
});
this.viewScheduledPayments();
}
clearSearch() {
this.searchText = '';
}
select(payment: Payment) {
this.router.navigate([`/payments/${payment.id}`]);
}
viewScheduledPayments() {
this.viewingScheduledPayments = true;
this.viewingRecentPayments = false;
this.showEmptyScheduleScreen = false;
this.showEmptyRecentScreen = false;
this.isLoading = true;
this.deactivateAll();
this.isSortSendOnActive = true;
this.getPayments(GET_PAYMENTS_BY.SCHEDULED, ORDER_BYS.PaymentDate, ORDER_BY_DIRECTIONS.ASC);
}
viewRecentPayments() {
this.viewingScheduledPayments = false;
this.viewingRecentPayments = true;
this.showEmptyScheduleScreen = false;
this.showEmptyRecentScreen = false;
this.isLoading = true;
this.deactivateAll();
this.isSortSendOnActive = true;
this.getPayments(GET_PAYMENTS_BY.RECENT, ORDER_BYS.PaymentDate, ORDER_BY_DIRECTIONS.DESC);
}
getPayments(isScheduled, orderBy, orderDirection) {
this.payments$ = this.paymentService
.loadPayments(isScheduled, orderBy, orderDirection)
.pipe(
tap((results) => {
// No Scheduled Payments
if (results.length === 0 && this.viewingScheduledPayments === true) {
this.isLoading = false;
this.showEmptyScheduleScreen = true;
}
// No Recent Payments
if (results.length === 0 && this.viewingRecentPayments === true) {
this.isLoading = false;
this.showEmptyRecentScreen = true;
}
this.isLoading = false;
console.log(results);
this.payments = results;
// Add Total Scheduled Payments
if (this.payments && isScheduled === true) {
this.totalAmount();
}
})
);
}
totalAmount() {
if (!this.hasPayments) {
return 0;
}
const total = this.payments
.filter((payment) => !payment.error)
.map((payment) => payment.amount)
.reduce(this.sumPayments, 0);
this.totalAmountOfScheduledPayments = Math.round(total * 100) / 100;
return this.totalAmountOfScheduledPayments;
}
private get hasPayments(): boolean {
return this.payments !== null && this.payments !== undefined && this.payments.length > 0;
}
private sumPayments(accumulator: number, currentValue: number) {
return accumulator + currentValue;
}
print() {
window.print();
this.showAddExportOptions = false;
}
export(type: string) {
const exportWindow = this.openNewTab();
exportWindow.document.write(exportWindowLoader);
this.paymentService
.getExportUrl(
type,
this.startDate ? this.startDate.toLocaleDateString() : '',
this.endDate ? this.endDate.toLocaleDateString() : ''
)
.subscribe((url) => {
exportWindow.location.href = url;
});
this.showAddExportOptions = false;
}
private closeTabAfterDownloadStarts(exportWindow: Window) {
setTimeout(() => {
exportWindow.close();
}, 3000);
}
private openNewTab(): Window {
return window.open('', '_blank');
}
toggleExportOption() {
!this.showAddExportOptions
? (this.showAddExportOptions = true)
: (this.showAddExportOptions = false);
}
deactivateAll() {
this.isSortPayToActive = false;
this.isSortSendOnActive = false;
this.isSortDeliveryActive = false;
this.isSortPayFromActive = false;
this.isSortAmountActive = false;
}
activatePayToSort() {
this.deactivateAll();
this.isSortPayToActive = true;
this.isLoading = true;
const isScheduled = this.viewingScheduledPayments ? true : false;
if (!this.isSortPayToActiveAsc) {
this.isSortPayToActiveAsc = true;
this.getPayments(isScheduled, ORDER_BYS.PayToName, ORDER_BY_DIRECTIONS.ASC);
} else {
this.isSortPayToActiveAsc = false;
this.getPayments(isScheduled, ORDER_BYS.PayToName, ORDER_BY_DIRECTIONS.DESC);
}
this.isSortSendOnActiveAsc = true;
this.isSortDeliveryActiveAsc = true;
this.isSortPayFromActiveAsc = true;
this.isSortAmountActiveAsc = true;
}
activateSendOnSort() {
this.deactivateAll();
this.isSortSendOnActive = true;
this.isLoading = true;
const isScheduled = this.viewingScheduledPayments ? true : false;
if (!this.isSortSendOnActiveAsc) {
this.isSortSendOnActiveAsc = true;
this.getPayments(isScheduled, ORDER_BYS.PaymentDate, ORDER_BY_DIRECTIONS.ASC);
} else {
this.isSortSendOnActiveAsc = false;
this.getPayments(isScheduled, ORDER_BYS.PaymentDate, ORDER_BY_DIRECTIONS.DESC);
}
this.isSortPayToActiveAsc = true;
this.isSortDeliveryActiveAsc = true;
this.isSortPayFromActiveAsc = true;
this.isSortAmountActiveAsc = true;
}
activateDeliverySort() {
this.deactivateAll();
this.isSortDeliveryActive = true;
this.isLoading = true;
const isScheduled = this.viewingScheduledPayments ? true : false;
if (!this.isSortDeliveryActiveAsc) {
this.isSortDeliveryActiveAsc = true;
this.getPayments(isScheduled, ORDER_BYS.ExpectedDeliveryDate, ORDER_BY_DIRECTIONS.ASC);
} else {
this.isSortDeliveryActiveAsc = false;
this.getPayments(isScheduled, ORDER_BYS.ExpectedDeliveryDate, ORDER_BY_DIRECTIONS.DESC);
}
this.isSortPayToActiveAsc = true;
this.isSortSendOnActiveAsc = true;
this.isSortPayFromActiveAsc = true;
this.isSortAmountActiveAsc = true;
}
activatePayFromSort() {
this.deactivateAll();
this.isSortPayFromActive = true;
this.isLoading = true;
const isScheduled = this.viewingScheduledPayments ? true : false;
if (!this.isSortPayFromActiveAsc) {
this.isSortPayFromActiveAsc = true;
this.getPayments(isScheduled, ORDER_BYS.PayFromAccountName, ORDER_BY_DIRECTIONS.ASC);
} else {
this.isSortPayFromActiveAsc = false;
this.getPayments(isScheduled, ORDER_BYS.PayFromAccountName, ORDER_BY_DIRECTIONS.DESC);
}
this.isSortPayToActiveAsc = true;
this.isSortDeliveryActiveAsc = true;
this.isSortSendOnActiveAsc = true;
this.isSortAmountActiveAsc = true;
}
activateAmountSort() {
this.deactivateAll();
this.isSortAmountActive = true;
this.isLoading = true;
const isScheduled = this.viewingScheduledPayments ? true : false;
if (!this.isSortAmountActiveAsc) {
this.isSortAmountActiveAsc = true;
this.getPayments(isScheduled, ORDER_BYS.Amount, ORDER_BY_DIRECTIONS.ASC);
} else {
this.isSortAmountActiveAsc = false;
this.getPayments(isScheduled, ORDER_BYS.Amount, ORDER_BY_DIRECTIONS.DESC);
}
this.isSortPayToActiveAsc = true;
this.isSortDeliveryActiveAsc = true;
this.isSortPayFromActiveAsc = true;
this.isSortSendOnActiveAsc = true;
}
sortBy() {
this.isSorting = true;
}
hideSortBy() {
this.isSorting = false;
}
}
<ng-container *ngIf="payments$ | async"></ng-container>
<div class="toolbar no-print">
<span class="search-bar">
<p>
<i class="material-icons">search</i>
</p>
<input
id="searchBarInput"
type="text"
placeholder="Name of Account, Amount, Date or Note"
[(ngModel)]="searchText"
/>
<i
*ngIf="searchText"
id="clearSearchForPaymentButton"
class="material-icons search-clear"
(click)="clearSearch()"
>clear</i
>
</span>
<span class="toolbar-option-ctn">
<span id="sortByOption" (click)="sortBy()" class="toolbar-option" style="display: none">
<i class="material-icons">filter_list</i>
<span class="is-desktop">Sort By</span>
</span>
<span id="printOption" (click)="print()" class="toolbar-option">
<i class="material-icons">print</i>
<span class="is-desktop">Print</span>
</span>
<span id="exportOption" (click)="toggleExportOption()" class="toolbar-option last-option">
<i class="material-icons">list_alt</i>
<span class="is-desktop">Export</span>
</span>
</span>
<span
*ngIf="showAddExportOptions"
class="toolbar-option-ctn export-options-ctn"
(clickoutside)="(toggleExportOption)"
>
<span class="export-date-range">
<span class="date-picker">
<mat-form-field>
<input
matInput
[matDatepicker]="startpicker"
placeholder="Start date"
[(ngModel)]="startDate"
id="startDateInput"
/>
<mat-datepicker-toggle matSuffix [for]="startpicker"></mat-datepicker-toggle>
<mat-datepicker #startpicker></mat-datepicker>
</mat-form-field>
</span>
<span class="date-picker">
<mat-form-field>
<input
matInput
[matDatepicker]="endpicker"
placeholder="End date"
[(ngModel)]="endDate"
id="endDateInput"
/>
<mat-datepicker-toggle matSuffix [for]="endpicker"></mat-datepicker-toggle>
<mat-datepicker #endpicker></mat-datepicker>
</mat-form-field>
</span>
</span>
<span id="exportPDF" (click)="export('PDF')" class="export-option">PDF</span>
<span id="exportXLS" (click)="export('XLS')" class="export-option">EXCEL</span>
<span id="exportCSV" (click)="export('CSV')" class="export-option last-option">CSV</span>
</span>
</div>
<div class="payment-category-tab-container no-print">
<div
class="tab"
[ngClass]="viewingScheduledPayments ? 'active-tab' : ''"
(click)="viewScheduledPayments()"
id="scheduledTab"
>
Scheduled
<span
[attr.data-total-scheduled-payments-amount]="totalAmountOfScheduledPayments"
*ngIf="totalAmountOfScheduledPayments"
>Total:
{{ totalAmountOfScheduledPayments | currency: 'USD':'symbol':'1.2-2' }}
</span>
</div>
<div
id="recentTab"
class="tab"
[ngClass]="viewingRecentPayments ? 'active-tab' : ''"
(click)="viewRecentPayments()"
>
Recent
</div>
</div>
<div class="list-scroller">
<div
id="listOfPaymentsCtn"
class="payment-list-ctn"
*ngIf="payments"
[ngClass]="{ iosTrue: device.iOS }"
>
<!-- Payment Header -->
<div
[hidden]="(payments | paymentsFilter: searchText).length === 0 && payments.length === 0"
class="payment-header-row"
>
<div
class="payment-header-cell pay-to-header-cell"
[class.sort-active-desc]="isSortPayToActiveAsc"
(click)="activatePayToSort()"
id="activatePayToSortButton"
>
To
<i class="material-icons sort-icon" *ngIf="isSortPayToActive">arrow_downward</i>
</div>
<div
class="payment-header-cell send-on-header-cell"
id="tt5"
[class.sort-active-desc]="isSortSendOnActiveAsc"
(click)="activateSendOnSort()"
id="activateSendOnSortButton"
>
Est. Send On
<i class="material-icons sort-icon" *ngIf="isSortSendOnActive">arrow_downward</i>
</div>
<div class="mdl-tooltip" id="sendOnToolTip" for="tt5"></div>
<div
class="payment-header-cell est-delivery-header-cell"
id="tt6"
[class.sort-active-desc]="isSortDeliveryActiveAsc"
(click)="activateDeliverySort()"
id="activateDeliverySortButton"
>
Est. Delivery
<i class="material-icons sort-icon" *ngIf="isSortDeliveryActive">arrow_downward</i>
</div>
<div class="mdl-tooltip" id="delveryToolTip" for="tt6"></div>
<div
class="payment-header-cell pay-from-header-cell"
[class.sort-active-desc]="isSortPayFromActiveAsc"
(click)="activatePayFromSort()"
id="activatePayFromSortButton"
>
From
<i class="material-icons sort-icon" *ngIf="isSortPayFromActive">arrow_downward</i>
</div>
<div
class="payment-header-cell amount-header-cell"
[class.sort-active-desc]="isSortAmountActiveAsc"
(click)="activateAmountSort()"
id="activateAmountSortButton"
>
Amount
<i class="material-icons sort-icon" *ngIf="isSortAmountActive">arrow_downward</i>
</div>
<div class="payment-header-cell note-header-cell">Note</div>
</div>
<!-- Payment Row -->
<div *ngIf="payments.lenght != 0 && !isLoading">
<a
(click)="select(payment)"
*ngFor="let payment of payments | paymentsFilter: searchText"
>
<div
class="payment-row"
[attr.data-id]="payment.id"
[attr.data-to-name]="payment.displayName ? payment.displayName : payment.payToName"
[attr.data-payment-status]="payment.status"
[attr.data-from-account-name]="payment.payFromAccountName"
[attr.data-in-flight-key]="payment.inFlightKey"
[attr.data-hash]="payment.hash"
>
<div class="payment-cell pay-to-cell">
<span *ngIf="!payment.displayName || payment.displayName.length < 1">
<span class="mobile-column-title">Pay To:</span>
<span class="payToLabel" [class.bad-color]="payment.error">{{
payment.payToName
}}</span>
</span>
<span *ngIf="payment.displayName && payment.displayName.length > 0">
<span class="mobile-column-title">Pay To:</span>
<span class="displayNameLabel" [class.bad-color]="payment.error">{{
payment.displayName
}}</span>
</span>
</div>
<div class="payment-cell send-on-cell">
<span class="mobile-column-title mobile-title-date">Send On:</span>
<span *ngIf="payment.status === 'InFlight' && !payment.error"> {{payment.expectedSendOnDate}} </span>
<span class="bad-color" *ngIf="payment.status === 'InFlight' && payment.error">
Error
</span>
<span *ngIf="payment.paymentDateFormatted && payment.status !== 'InFlight'">
{{ payment.paymentDateFormatted | date: 'shortDate' }}
</span>
</div>
<div class="payment-cell est-delivery-cell">
<span class="mobile-column-title mobile-title-date">Est Delivery:</span>
<span *ngIf="payment.status === 'InFlight' && !payment.error"> {{payment.expectedDeliveryDate}} </span>
<span class="bad-color" *ngIf="payment.status === 'InFlight' && payment.error">
Error
</span>
<span *ngIf="payment.expectedDeliveryDate && payment.status !== 'InFlight'">
{{ payment.expectedDeliveryDate | date: 'shortDate' }}
</span>
</div>
<div class="payment-cell pay-from-cell">
<span
*ngIf="
!payment.payFromAccountDisplayName ||
payment.payFromAccountDisplayName.length < 1
"
>
<span class="mobile-column-title">Pay From:</span>
<span id="payFromAccountNameLabel" [class.bad-color]="payment.error">{{
payment.payFromAccountName
}}</span>
</span>
<span
*ngIf="
payment.payFromAccountDisplayName &&
payment.payFromAccountDisplayName.length > 0
"
>
<span class="mobile-column-title">Pay From:</span>
<span id="payFromAccountDisplayNameLabel" [class.bad-color]="payment.error">{{
payment.payFromAccountDisplayName
}}</span>
</span>
</div>
<div class="payment-cell amount-cell">
<span class="mobile-column-title">Amount:</span>
<span id="amountLabel" [class.bad-color]="payment.error">{{
payment.amount | currency: 'USD':'symbol':'1.2-2'
}}</span>
</div>
<div id="paymentMemoLabel" class="payment-cell note-cell" *ngIf="!payment.error">
<span class="mobile-column-title">Note:</span>{{ payment.memo }}
<span *ngIf="!payment.memo || payment.memo.length < 1"> - </span>
</div>
<div class="payment-cell note-cell error-cell bad-color" *ngIf="payment.error">
<i class="material-icons bad-color">error</i> An Error Has Occurred
</div>
</div>
</a>
<!-- Empty Schedule Payments Screen -->
<div *ngIf="showEmptyScheduleScreen && !isLoading" class="empty-page-ctn schedule-empty">
<i class="material-icons status-normal">compare_arrows</i>
<h3 id="noScheduledTransfersHeader" class="status-header status-normal">
No Scheduled Transfers
</h3>
<div class="page-description">
<p id="noScheduledTransfersLabel" class="para-medium">
You currently have no scheduled transfers.
</p>
</div>
<a [routerLink]="['/start']">
<button type="button" class="action-button sendMoneyButton">
<p class="button-inside">Send Money</p>
</button>
</a>
</div>
</div>
<app-loader *ngIf="isLoading" [cssclass]="cssclass"></app-loader>
</div>
<div
id="emptySearchCtn"
class="empty-page-ctn search-empty"
*ngIf="searchText.length >= 1 && (payments | paymentsFilter: searchText).length === 0"
>
<i class="material-icons status-normal">search</i>
<h3 class="no-results-header status-header status-normal">No Results</h3>
<div class="page-description">
<p class="no-results-label 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 Recent Screen -->
<div
id="emptyPaymentsListCtn"
*ngIf="showEmptyRecentScreen && !isLoading"
class="empty-page-ctn"
>
<i class="material-icons status-normal">compare_arrows</i>
<h3 id="noRecentTransfersMadeHeader" class="status-header status-normal">
No Transfers Have Been Made
</h3>
<div class="page-description">
<p id="noRecentTransfersMadeLabel" class="para-medium">
When you transfer money we will show your past 60 days of history here.
</p>
</div>
<a [routerLink]="['/start']">
<button type="button" class="action-button sendMoneyButton">
<p class="button-inside">Send Money</p>
</button>
</a>
</div>
</div>
<app-payment-sort *ngIf="isSorting" (cancelSortBy)="hideSortBy()"></app-payment-sort>
/*--- Search Bar ---*/
.toolbar {
width: 100%;
padding: 10px 10px 10px 10px;
z-index: 99;
background-color: #fff;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
position: relative;
}
.toolbar-option-ctn {
position: absolute;
right: 10px;
margin-top: 4px;
}
.list-scroller {
height: calc(100vh - 13vh);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
}
.toolbar-option,
.export-option {
margin-left: 13px;
margin-right: 13px;
cursor: pointer;
color: #707173;
font-size: 12px;
margin-top: -3px;
}
.last-option {
margin-right: 5px;
}
.export-options-ctn {
background-color: #fff;
margin-top: 40px;
padding: 10px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.export-option {
padding: 5px;
}
.export-option:hover {
background-color: rgba(158, 158, 158, 0.2);
}
.export-date-range {
display: block;
color: #707173;
font-size: 12px;
}
.date-picker:first-child {
margin-right: 10px;
}
.date-picker .mat-form-field {
width: 100px !important;
}
.date-picker input:focus {
border: 0 !important;
}
.payment-category-tab-container {
display: flex;
flex-direction: row;
width: 100%;
}
.tab {
padding: 5px 0px;
flex: 1;
text-align: center;
color: #707173;
border-bottom: 1px solid #ccc;
}
.tab:hover {
background-color: rgba(158, 158, 158, 0.2);
cursor: pointer;
}
.active-tab {
background-color: #ccc;
border-bottom: 2px solid #dc1b52;
color: #474747;
}
.toolbar p {
display: inline-block;
margin: 0px;
color: #707173;
}
.payments-tab {
position: absolute;
right: 10px;
}
.toolbar 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: 70%;
margin: 0px auto;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
color: #474747;
overflow: hidden;
text-overflow: ellipsis;
}
.search-bar [placeholder]:focus::-webkit-input-placeholder {
opacity: 0;
}
.search-text {
display: block;
}
i.search-clear {
font-size: 18px !important;
border-radius: 50%;
padding: 5px;
transition: visibility 0s linear 200ms, opacity 200ms;
cursor: pointer;
right: 10px;
}
i.search-clear:hover {
background-color: rgba(158, 158, 158, 0.2);
}
/*--- Payment Table ---*/
.payment-header-row,
.payment-row {
display: grid;
display: -ms-grid;
grid-template-columns: 20.65% 12.65% 12.65% 20.65% 12.65% 20.65%;
-ms-grid-columns: 20.65% 12.65% 12.65% 20.65% 12.65% 20.65%;
border-bottom: 1px solid #ccc;
}
.sort-icon {
font-size: 15px;
vertical-align: middle;
margin-top: -2px;
}
.sort-active-desc .sort-icon {
transform: rotate(180deg);
}
.payment-row:hover {
background-color: rgba(158, 158, 158, 0.2);
}
.payment-header-cell {
text-align: left;
padding: 10px;
color: #707173;
cursor: pointer;
}
.payment-header-cell:hover {
background-color: rgba(158, 158, 158, 0.2);
}
#sendOnToolTip::after {
content: 'Date the funds will be deducted from your account.';
}
#delveryToolTip::after {
content: 'Estimated Delivery Date of Payment. Please allow the biller at least 1 day to post your payment.';
}
.mdl-tooltip {
margin-top: -5px;
line-height: 15px;
}
.payment-cell {
text-align: left;
padding: 10px;
color: #474747;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mobile-column-title {
display: none;
}
.pay-to-header-cell {
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 1;
}
.send-on-header-cell {
-ms-grid-row: 1;
-ms-grid-column: 2;
-ms-grid-column-span: 1;
}
.est-delivery-header-cell {
-ms-grid-row: 1;
-ms-grid-column: 3;
-ms-grid-column-span: 1;
}
.pay-from-header-cell {
-ms-grid-row: 1;
-ms-grid-column: 4;
-ms-grid-column-span: 1;
}
.amount-header-cell {
-ms-grid-row: 1;
-ms-grid-column: 5;
-ms-grid-column-span: 1;
}
.note-header-cell {
-ms-grid-row: 1;
-ms-grid-column: 6;
-ms-grid-column-span: 1;
cursor: default;
}
.pay-to-cell {
grid-column: 1;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row: 1;
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 1;
}
.send-on-cell {
grid-column: 2;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row: 1;
-ms-grid-row: 1;
-ms-grid-column: 2;
-ms-grid-column-span: 1;
}
.est-delivery-cell {
grid-column: 3;
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row: 1;
-ms-grid-row: 1;
-ms-grid-column: 3;
-ms-grid-column-span: 1;
}
.pay-from-cell {
grid-column: 4;
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 1;
grid-row: 1;
-ms-grid-row: 1;
-ms-grid-column: 4;
-ms-grid-column-span: 1;
}
.amount-cell {
grid-column: 5;
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 1;
grid-row: 1;
-ms-grid-row: 1;
-ms-grid-column: 5;
-ms-grid-column-span: 1;
}
.note-cell {
grid-column: 6;
grid-column-start: 6;
grid-column-end: 7;
grid-row-start: 1;
grid-row: 1;
-ms-grid-row: 1;
-ms-grid-column: 6;
-ms-grid-column-span: 1;
}
.error-cell {
font-size: 12px;
margin-bottom: 0;
}
.error-cell i {
font-size: 15px;
vertical-align: middle;
margin-top: -3px;
margin-right: 3px;
}
.account-label-ctn {
display: inline-block;
width: 100%;
overflow: hidden;
}
.account-display-name {
max-width: 64%;
overflow: hidden;
vertical-align: middle;
display: inline-block;
height: 16px;
line-height: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.account-masked-number {
width: 17%;
overflow: hidden;
vertical-align: middle;
display: inline-block;
height: 16px;
line-height: 16px;
}
.payment-list-row:hover {
background-color: rgba(158, 158, 158, 0.2);
}
.fab-btn {
padding: 0;
border-radius: 0;
margin: 4px;
background-color: #be2438;
border: none;
vertical-align: middle;
cursor: pointer;
width: 46px;
height: 46px;
position: absolute;
bottom: 15px;
right: 15px;
z-index: 99;
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);
}
.fab-btn i {
margin-right: 0px;
margin-top: 2px;
color: #fff;
}
/*-- Mobile Styles --*/
@media only screen and (max-width: 500px) {
.search-bar input {
width: 45%;
}
.fab-btn i {
font-size: 26px;
margin: 6px 0px 0px 0px;
}
.schedule-empty,
.search-empty {
margin-top: 110px;
}
/*-- Payment List --*/
.list-scroller {
height: calc(100vh - 13vh);
}
.payment-header-row {
display: none;
}
.payment-row {
font-size: 12px;
padding: 10px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-ms-grid-columns: 16.5% 16.5% 16.5% 16.5% 16.5% 16.5%;
-ms-grid-rows: 20px 20px;
}
.mobile-column-title {
display: inline-block;
margin-right: 5px;
}
.mobile-title-date {
margin-right: 0px;
}
.pay-to-cell {
grid-column: 1;
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 1;
grid-row: 1;
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
}
.pay-from-cell {
grid-column: 5;
grid-column-start: 5;
grid-column-end: 10;
grid-row-start: 1;
grid-row: 1;
-ms-grid-row: 1;
-ms-grid-column: 4;
-ms-grid-column-span: 3;
}
.send-on-cell {
grid-column: 4;
grid-column-start: 4;
grid-column-end: 7;
grid-row-start: 2;
grid-row: 2;
-ms-grid-row: 2;
-ms-grid-column: 3;
-ms-grid-column-span: 2;
}
.est-delivery-cell {
grid-column: 7;
grid-column-start: 7;
grid-column-end: 10;
grid-row-start: 2;
grid-row: 2;
-ms-grid-row: 2;
-ms-grid-column: 5;
-ms-grid-column-span: 2;
}
.amount-cell {
grid-column: 1;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 2;
grid-row: 2;
-ms-grid-row: 2;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
}
.note-cell {
display: none;
}
.payment-cell {
padding: 0px 2px;
}
.export-options-ctn {
margin-top: 42px;
}
}
/* Print button */
.print-btn,
.print-btn:hover,
.export-btn,
.export-btn:hover {
width: 46px;
height: 46px;
position: absolute;
right: 15px;
z-index: 99;
min-width: 36px;
padding: 0;
border-radius: 0;
margin: 4px;
background-color: #be2438;
border: none;
vertical-align: middle;
cursor: pointer;
border-radius: 50%;
}
.print-btn {
bottom: 70px;
}
.export-btn {
bottom: 125px;
}
@media print {
.search-bar {
display: none;
}
.items-list-category {
padding: 15px 0 5px 0;
}
.payment-list-row {
padding-bottom: 5px;
}
.list-scroller {
overflow-y: visible;
}
}
Legend
Html element with directive