You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
5.8 KiB
HTML
85 lines
5.8 KiB
HTML
<div fxLayout="column">
|
|
<div class="padding-gap">
|
|
<mat-card>
|
|
<mat-card-header>
|
|
<mat-card-subtitle>
|
|
<h2>Invoices</h2>
|
|
</mat-card-subtitle>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<form fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign.gt-sm="space-between center" (ngSubmit)="addInvoiceForm.form.valid && onAddInvoice(addInvoiceForm)" #addInvoiceForm="ngForm">
|
|
<mat-form-field fxFlex="30" fxLayoutAlign="start end">
|
|
<input matInput [(ngModel)]="memo" placeholder="Memo" tabindex="1" name="memo">
|
|
</mat-form-field>
|
|
<mat-form-field fxFlex="15" fxLayoutAlign="start end">
|
|
<input matInput [(ngModel)]="invoiceValue" placeholder="Invoice Value ({{information?.smaller_currency_unit}})" type="number" step="100" min="1" tabindex="2" name="invoiceValue">
|
|
</mat-form-field>
|
|
<mat-form-field fxFlex="15" fxLayoutAlign="start end">
|
|
<input matInput [(ngModel)]="expiry" placeholder="Expiry (Sec)" type="number" step="100" min="1" tabindex="3" name="expiry">
|
|
</mat-form-field>
|
|
<div fxFlex="15" tabindex="4" fxLayoutAlign="start center" class="chkbox-private">
|
|
<mat-checkbox [(ngModel)]="private" matTooltip="Include routing hints for private channels" [matTooltipPosition]="'above'" name="private">Private</mat-checkbox>
|
|
</div>
|
|
<button fxFlex="10" fxLayoutAlign="center center" mat-raised-button color="primary" type="submit" tabindex="5">Add</button>
|
|
<button fxFlex="10" fxLayoutAlign="center center" mat-raised-button color="accent" tabindex="6" type="reset" (click)="resetData()">Clear</button>
|
|
</form>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</div>
|
|
<div class="padding-gap">
|
|
<mat-card>
|
|
<mat-card-content class="table-card-content">
|
|
<div fxLayout="row" fxLayoutAlign="start start">
|
|
<mat-form-field fxFlex="30">
|
|
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
|
|
</mat-form-field>
|
|
</div>
|
|
<div perfectScrollbar class="table-container mat-elevation-z8">
|
|
<mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
|
|
<table mat-table #table [dataSource]="invoices" matSort [ngClass]="{'mat-elevation-z8 overflow-auto error-border': flgLoading[0]==='error','mat-elevation-z8 overflow-auto': true}">
|
|
<ng-container matColumnDef="settled">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Settled </th>
|
|
<td mat-cell *matCellDef="let invoice">
|
|
<span *ngIf="invoice.settled"><i class="material-icons primary">done_all</i></span>
|
|
<span *ngIf="!invoice.settled"><i class="material-icons accent">done</i></span>
|
|
</td>
|
|
</ng-container>
|
|
<ng-container matColumnDef="creation_date">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Creation Date </th>
|
|
<td mat-cell *matCellDef="let invoice">{{invoice.creation_date_str}}</td>
|
|
</ng-container>
|
|
<ng-container matColumnDef="settle_date">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Settle Date </th>
|
|
<td mat-cell *matCellDef="let invoice">{{invoice.settle_date_str}}</td>
|
|
</ng-container>
|
|
<ng-container matColumnDef="memo">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Memo </th>
|
|
<td mat-cell *matCellDef="let invoice">{{invoice.memo}}</td>
|
|
</ng-container>
|
|
<ng-container matColumnDef="value">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Value ({{(selNode?.settings?.satsToBTC) ? information?.currency_unit : information?.smaller_currency_unit}}) </th>
|
|
<td mat-cell *matCellDef="let invoice"><span fxLayoutAlign="end center"> {{(selNode?.settings?.satsToBTC) ? (invoice?.btc_value | number:'1.0-3') : (invoice?.value | number)}} </span></td>
|
|
</ng-container>
|
|
<ng-container matColumnDef="expiry">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Expiry (Sec)</th>
|
|
<td mat-cell *matCellDef="let invoice"><span fxLayoutAlign="end center"> {{invoice.expiry | number}} </span></td>
|
|
</ng-container>
|
|
<ng-container matColumnDef="cltv_expiry">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> CLTV Expiry </th>
|
|
<td mat-cell *matCellDef="let invoice"><span fxLayoutAlign="end center"> {{invoice.cltv_expiry | number}} </span></td>
|
|
</ng-container>
|
|
<ng-container matColumnDef="amt_paid_sat">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Amount Paid ({{(selNode?.settings?.satsToBTC) ? information?.currency_unit : information?.smaller_currency_unit}})</th>
|
|
<td mat-cell *matCellDef="let invoice"><span fxLayoutAlign="end center"> {{(selNode?.settings?.satsToBTC) ? (invoice?.btc_amt_paid_sat | number:'1.0-3') : (invoice?.amt_paid_sat | number)}} </span></td>
|
|
</ng-container>
|
|
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
|
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [@newlyAddedRowAnimation]="(row.memo == newlyAddedInvoiceMemo && row.value == newlyAddedInvoiceValue && flgAnimate) ? 'added' : 'notAdded'" (click)="onInvoiceClick(row, $event)" class="row-invoices"
|
|
[ngClass]="{'settled': row.settled, 'unsettled': !row.settled}"></tr>
|
|
</table>
|
|
<mat-paginator [length]="totalInvoices" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="onPageChange($event)"></mat-paginator>
|
|
</div>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</div>
|
|
</div>
|