mempool/frontend/src/app/components/assets/assets.component.html

53 lines
2.2 KiB
HTML
Raw Normal View History

2022-02-06 01:20:26 +04:00
<ng-container *ngIf="(assets$ | async) as filteredAssets; else isLoading">
<table class="table table-borderless table-striped">
<thead>
<th class="td-name" i18n="Asset name header">Name</th>
<th i18n="Asset ticker header">Ticker</th>
2022-02-07 00:08:07 +04:00
<th class="d-none d-md-table-cell" i18n="Asset Issuer Domain header">Issuer domain</th>
<th class="d-none d-lg-table-cell" i18n="Asset ID header">Asset ID</th>
2022-02-06 01:20:26 +04:00
</thead>
<tbody>
<tr *ngFor="let asset of filteredAssets; trackBy: trackByAsset">
<td class="td-name"><a [routerLink]="['/assets/asset/' | relativeUrl, asset.asset_id]">{{ asset.name }}</a></td>
<td>{{ asset.ticker }}</td>
2022-02-07 00:08:07 +04:00
<td class="d-none d-md-table-cell">{{ asset.entity && asset.entity.domain }}</td>
<td class="d-none d-lg-table-cell"><a [routerLink]="['/assets/asset/' | relativeUrl, asset.asset_id]">{{ asset.asset_id | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="asset.asset_id"></app-clipboard></td>
2022-02-06 01:20:26 +04:00
</tr>
</tbody>
</table>
<br>
2022-02-06 04:44:40 +04:00
<ngb-pagination [collectionSize]="assets.length" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="paginationMaxSize" [boundaryLinks]="true" [ellipses]="ellipses"></ngb-pagination>
2022-02-06 01:20:26 +04:00
</ng-container>
<ng-template #isLoading>
<table class="table table-borderless table-striped">
<thead>
<th i18n="Asset name header">Name</th>
<th i18n="Asset ticker header">Ticker</th>
2022-02-07 00:08:07 +04:00
<th class="d-none d-md-table-cell" i18n="Asset Issuer Domain header">Issuer domain</th>
<th class="d-none d-lg-table-cell" i18n="Asset ID header">Asset ID</th>
2022-02-06 01:20:26 +04:00
</thead>
<tbody>
<tr *ngFor="let dummy of [0,0,0,0,0,0,0,0,0,0]">
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
2022-02-07 00:08:07 +04:00
<td class="d-none d-md-table-cell"><span class="skeleton-loader"></span></td>
<td class="d-none d-lg-table-cell"><span class="skeleton-loader"></span></td>
2022-02-06 01:20:26 +04:00
</tr>
</tbody>
</table>
</ng-template>
<ng-template [ngIf]="error">
<div class="text-center">
<ng-container i18n="Asset data load error">Error loading assets data.</ng-container>
<br>
<i>{{ error.error }}</i>
</div>
</ng-template>