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.
78 lines
5.0 KiB
HTML
78 lines
5.0 KiB
HTML
5 years ago
|
<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" (ngSubmit)="addInvoiceForm.form.valid && onAddInvoice(addInvoiceForm)" #addInvoiceForm="ngForm">
|
||
|
<mat-form-field fxFlex="60" fxLayoutAlign="start end">
|
||
|
<input matInput [(ngModel)]="memo" placeholder="Memo" tabindex="1" name="memo">
|
||
|
</mat-form-field>
|
||
|
<mat-form-field fxFlex="20" 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>
|
||
|
<div fxFlex="10" fxLayoutAlign="start start">
|
||
|
<button fxFlex="90" fxLayoutAlign="center center" mat-raised-button color="primary" type="submit" tabindex="3">Add</button>
|
||
|
</div>
|
||
|
<div fxFlex="10" fxLayoutAlign="start start">
|
||
|
<button fxFlex="90" fxLayoutAlign="center center" mat-raised-button color="accent" tabindex="4" type="reset" (click)="resetData()">Clear</button>
|
||
|
</div>
|
||
|
</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="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 ({{(settings?.satsToBTC) ? information?.currency_unit : information?.smaller_currency_unit}}) </th>
|
||
|
<td mat-cell *matCellDef="let invoice"><span fxLayoutAlign="end center"> {{(settings?.satsToBTC) ? (invoice?.btc_value | number:'1.0-3') : (invoice?.value | number)}} </span></td>
|
||
|
</ng-container>
|
||
|
<ng-container matColumnDef="settled">
|
||
|
<th mat-header-cell *matHeaderCellDef mat-sort-header> Settled </th>
|
||
|
<td mat-cell *matCellDef="let invoice"> {{invoice.settled}} </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 ({{(settings?.satsToBTC) ? information?.currency_unit : information?.smaller_currency_unit}})</th>
|
||
|
<td mat-cell *matCellDef="let invoice"><span fxLayoutAlign="end center"> {{(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: true;"></tr>
|
||
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [@newlyAddedRowAnimation]="(row.memo === newlyAddedInvoiceMemo && row.value === newlyAddedInvoiceValue && flgAnimate) ? 'added' : 'notAdded'" (click)="onInvoiceClick(row, $event)"></tr>
|
||
|
</table>
|
||
|
</div>
|
||
|
</mat-card-content>
|
||
|
</mat-card>
|
||
|
</div>
|
||
|
</div>
|