cbsnexora/src/app/loans/loans-view/external-asset-owner-tab/external-asset-owner-tab.component.html

<div class="tab-container mat-typography">
  <div class="flex-fill" *ngIf="existActiveTransfer">
    <h3>{{ 'labels.heading.Active Asset Transfer' | translate }}</h3>
    <div class="layout-row gap-32px asset-transfer-container">
      <table>
        <tbody>
          <tr>
            <td class="flex-25">
              <b>{{ 'labels.inputs.Status' | translate }} :</b>
            </td>
            <td class="flex-25 left">
              <div [ngClass]="itemStatus(activeTransferData.status)">
                <fa-icon icon="stop"></fa-icon>
                <span class="m-l-10 external-asset-owner-status">{{ activeTransferData.status }}</span>
              </div>
            </td>
            <td class="flex-25">
              <b>{{ 'labels.inputs.Owner External Id' | translate }} :</b>
            </td>
            <td class="flex-25 left">
              <mifosx-external-identifier
                externalId="{{ activeTransferData.owner.externalId }}"
                completed="true"
              ></mifosx-external-identifier>
            </td>
          </tr>
          <tr>
            <td class="flex-25">
              <b>{{ 'labels.inputs.Settlement Date' | translate }} :</b>
            </td>
            <td class="flex-25 left">
              {{ activeTransferData.settlementDate | dateFormat }}
            </td>
            <td class="flex-25">
              <b>{{ 'labels.inputs.Effective Date' | translate }} :</b>
            </td>
            <td class="flex-25 left">
              {{ activeTransferData.effectiveFrom | dateFormat }}
            </td>
          </tr>
          <tr>
            <td class="flex-25">
              <b>{{ 'labels.inputs.Details' | translate }} :</b>
            </td>
            <td class="flex-75 left">
              <table>
                <tbody>
                  <tr>
                    <td class="flex-50">
                      <b>{{ 'labels.inputs.Principal Outstanding' | translate }} :</b>
                    </td>
                    <td class="flex-50 r-amount">
                      {{ activeTransferData.details.totalPrincipalOutstanding | formatNumber }}
                    </td>
                  </tr>
                  <tr>
                    <td class="flex-50">
                      <b>{{ 'labels.inputs.Interest Outstanding' | translate }} :</b>
                    </td>
                    <td class="flex-50 r-amount">
                      {{ activeTransferData.details.totalInterestOutstanding | formatNumber }}
                    </td>
                  </tr>
                  <tr>
                    <td class="flex-50">
                      <b>{{ 'labels.inputs.Fees Outstanding' | translate }} :</b>
                    </td>
                    <td class="flex-50 r-amount">
                      {{ activeTransferData.details.totalFeeChargesOutstanding | formatNumber }}
                    </td>
                  </tr>
                  <tr>
                    <td class="flex-50">
                      <b>{{ 'labels.inputs.Penalties Outstanding' | translate }} :</b>
                    </td>
                    <td class="flex-50 r-amount">
                      {{ activeTransferData.details.totalPenaltyChargesOutstanding | formatNumber }}
                    </td>
                  </tr>
                  <tr>
                    <td class="flex-50">
                      <b>{{ 'labels.inputs.Outstanding' | translate }} :</b>
                    </td>
                    <td class="flex-50 r-amount">
                      {{ activeTransferData.details.totalOutstanding | formatNumber }}
                    </td>
                  </tr>
                  <tr>
                    <td class="flex-50">
                      <b>{{ 'labels.inputs.Overpaid' | translate }} :</b>
                    </td>
                    <td class="flex-50 r-amount">{{ activeTransferData.details.totalOverpaid | formatNumber }}</td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="layout-row align-start-center">
    <h3 class="flex-90">{{ 'labels.heading.External Asset Owner' | translate }}</h3>

    <div class="flex-10" *ngIf="canBeSold()">
      <button mat-raised-button class="f-right" color="primary" (click)="saleLoan()" *mifosxHasPermission="'SALE_LOAN'">
        <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>{{ 'labels.buttons.Sell Loan' | translate }}
      </button>
    </div>

    <div class="flex-10" *ngIf="canBeCancelled()">
      <button
        mat-raised-button
        class="f-right"
        color="warn"
        (click)="cancelSaleLoan()"
        *mifosxHasPermission="'SALE_LOAN'"
      >
        <fa-icon icon="trash" class="m-r-10"></fa-icon>{{ 'labels.buttons.Cancel Sell Loan' | translate }}
      </button>
    </div>

    <div class="flex-10" *ngIf="canBeBuyed()">
      <button
        mat-raised-button
        class="f-right"
        color="primary"
        (click)="buyBackLoan()"
        *mifosxHasPermission="'SALE_LOAN'"
      >
        <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>{{ 'labels.buttons.Buy Back Loan' | translate }}
      </button>
    </div>
  </div>

  <table mat-table mat-sort [dataSource]="loanTransfersData" *ngIf="loanTransfersData.length > 0">
    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Status' | translate }}</th>
      <td mat-cell *matCellDef="let item">
        <div [ngClass]="itemStatus(item.status)">
          <fa-icon icon="stop"></fa-icon>
          <span class="m-l-10 status">
            {{ itemCurrentStatus(item) | translate }}
          </span>
        </div>
      </td>
    </ng-container>

    <ng-container matColumnDef="effectiveFrom">
      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Effective From' | translate }}</th>
      <td mat-cell *matCellDef="let item">{{ item.effectiveFrom | dateFormat }}</td>
    </ng-container>

    <ng-container matColumnDef="ownerExternalId">
      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Owner External Id' | translate }}</th>
      <td mat-cell *matCellDef="let item">
        <mifosx-external-identifier externalId="{{ item.owner.externalId }}"></mifosx-external-identifier>
      </td>
    </ng-container>

    <ng-container matColumnDef="transferExternalId">
      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Transfer External Id' | translate }}</th>
      <td mat-cell *matCellDef="let item">
        <mifosx-external-identifier externalId="{{ item.transferExternalId }}"></mifosx-external-identifier>
      </td>
    </ng-container>

    <ng-container matColumnDef="settlementDate">
      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Settlement Date' | translate }}</th>
      <td mat-cell *matCellDef="let item">{{ item.settlementDate | dateFormat }}</td>
    </ng-container>

    <ng-container matColumnDef="purchasePriceRatio">
      <th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Purchase Price Ratio' | translate }}</th>
      <td mat-cell *matCellDef="let item">{{ item.purchasePriceRatio | number }}</td>
    </ng-container>

    <ng-container matColumnDef="actions">
      <th mat-header-cell class="center" *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
      <td mat-cell *matCellDef="let item" class="center td-min-space">
        <button
          class="account-action-button"
          *ngIf="!isPendingOrCanceled(item)"
          mat-raised-button
          color="primary"
          matTooltip="{{ 'tooltips.View Journal Entries' | translate }}"
          matTooltipPosition="left"
          (click)="routeJournalEntry($event)"
          [routerLink]="['/', 'journal-entry', 'view-transfer', item.transferId]"
        >
          <i class="fa fa-arrow-circle-right"></i>
        </button>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="loanTransferColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: loanTransferColumns"></tr>
  </table>
</div>