RTL/src/app/cln/ln-services/peerswap/swaps-list/swaps-list.component.html

<div fxLayout="column" fxLayoutAlign="start stretch" class="padding-gap-x">
  <div fxLayout="column" fxLayout.gt-xs="row wrap" fxLayoutAlign.gt-xs="start center" fxLayoutAlign="start stretch"
    class="page-sub-title-container">
    <div fxFlex="70" class="padding-gap-x">
      <fa-icon [icon]="selSwapList === swapLists[0] ? faPersonArrowUpFromLine : selSwapList === swapLists[1] ? faPersonArrowDownToLine : faPersonCircleXmark" class="mr-1"></fa-icon>
      {{selSwapList === swapLists[0] ? 'Swapouts' : selSwapList === swapLists[1] ? 'Swapins' : 'Canceled Swaps'}}
    </div>
    <mat-form-field fxFlex="30">
      <input matInput (keyup)="applyFilter()" [(ngModel)]="selFilter" placeholder="Filter">
    </mat-form-field>
  </div>
  <div [perfectScrollbar] fxLayout="column" fxLayoutAlign="start center" fxFlex="100" class="table-container">
    <mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate">
    </mat-progress-bar>
    <table mat-table #table [dataSource]="swaps" fxFlex="100" matSort
      [ngClass]="{'error-border': errorMessage !== ''}" class="overflow-auto">
      <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Swap Id</th>
        <td mat-cell *matCellDef="let swap">
          <span fxLayout="row" class="ellipsis-parent"
            [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '25rem'}">
            <span class="ellipsis-child">
              <fa-icon [icon]="faArrowRightFromBracket" *ngIf="swap.role === peerswapRoles.SENDER" matTooltip="Sender" matTooltipPosition="right" class="mr-1" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></fa-icon>
              <fa-icon [icon]="faArrowRightToBracket" *ngIf="swap.role === peerswapRoles.RECEIVER" matTooltip="Receiver" matTooltipPosition="right" class="mr-1" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></fa-icon>
              {{swap?.id}}
            </span>
          </span>
        </td>
      </ng-container>
      <ng-container matColumnDef="alias">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Node Alias</th>
        <td mat-cell *matCellDef="let swap">{{swap?.alias}}</td>
      </ng-container>
      <ng-container matColumnDef="short_channel_id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1">Short Channel ID</th>
        <td mat-cell *matCellDef="let swap" class="pl-1">{{swap?.short_channel_id}}</td>
      </ng-container>
      <ng-container matColumnDef="created_at">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Created At</th>
        <td mat-cell *matCellDef="let swap">
          {{swap?.created_at | date:'dd/MMM/y HH:mm'}}
        </td>
      </ng-container>
      <ng-container matColumnDef="state">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>State</th>
        <td mat-cell *matCellDef="let swap">{{swap?.state | swapState}}</td>
      </ng-container>
      <ng-container matColumnDef="amount">
        <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Amount (Sats)</th>
        <td mat-cell *matCellDef="let swap"><span fxLayoutAlign="end center">{{swap?.amount | number }}</span>
        </td>
      </ng-container>
      <ng-container matColumnDef="cancel_message">
        <th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-2">Cancel Message</th>
        <td mat-cell *matCellDef="let swap" class="pl-2">{{swap?.cancel_message}}</td>
      </ng-container>
      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef class="px-3">
          <div class="bordered-box table-actions-select">
            <mat-select placeholder="Actions" tabindex="1" class="mr-0">
              <mat-select-trigger></mat-select-trigger>
              <mat-option (click)="onDownloadCSV()">Download CSV</mat-option>
            </mat-select>
          </div>
        </th>
        <td mat-cell *matCellDef="let swap" [ngClass]="{'px-3': screenSize !== screenSizeEnum.XS}"
          fxLayoutAlign="end center">
          <button *ngIf="(selSwapList === swapLists[2]) || (selSwapList !== swapLists[2] && (swap.state === 'State_ClaimedPreimage' || swap.state === 'State_ClaimedCoop'))" mat-stroked-button color="primary" type="button" tabindex="4" (click)="onSwapClick(swap)">View Info</button>
          <div *ngIf="selSwapList !== swapLists[2] && swap.state !== 'State_ClaimedPreimage' && swap.state !== 'State_ClaimedCoop'" class="bordered-box table-actions-select" fxLayoutAlign="center center">
            <mat-select placeholder="Actions" tabindex="2" class="mr-0">
              <mat-select-trigger></mat-select-trigger>
              <mat-option (click)="onSwapClick(swap)">View Info</mat-option>
              <mat-option (click)="onSwapRefresh(swap)">Refresh</mat-option>
            </mat-select>
          </div>
        </td>
      </ng-container>
      <ng-container matColumnDef="no_swap">
        <td mat-footer-cell *matFooterCellDef colspan="4">
          <p
            *ngIf="(!swaps?.data || (swaps?.data && swaps?.data.length && swaps?.data?.length<1)) && apiCallStatus?.status === apiCallStatusEnum.COMPLETED">
            No swap available.</p>
          <p
            *ngIf="(!swaps?.data || (swaps?.data && swaps?.data.length && swaps?.data?.length<1)) && apiCallStatus?.status === apiCallStatusEnum.INITIATED">
            Getting swaps...</p>
          <p
            *ngIf="(!swaps?.data || (swaps?.data && swaps?.data.length && swaps?.data?.length<1)) && apiCallStatus?.status === apiCallStatusEnum.ERROR">
            {{errorMessage}}</p>
        </td>
      </ng-container>
      <tr mat-footer-row *matFooterRowDef="['no_swap']"
        [ngClass]="{'display-none': swaps?.data && swaps?.data?.length>0}">
      </tr>
      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  </div>
  <mat-paginator *ngIf="errorMessage === ''" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
    [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>
</div>