cbsnexora/src/app/deposits/fixed-deposits/fixed-deposit-account-view/interest-rate-chart-tab/interest-rate-chart-tab.component.html

<div class="tab-container mat-typography">

  <div fxLayoutAlign="start">
    <div class="m-b-20">
      <h3>{{"labels.heading.All Interest Rates" | translate }}</h3>
    </div>
  </div>

  <div class="mat-elevation-z1 m-b-25">

    <table mat-table [dataSource]="interestRateChartData" #chartsTable multiTemplateDataRows>

      <ng-container matColumnDef="period">
        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Period" | translate }} </th>
        <td mat-cell *matCellDef="let chartSlab">
          {{chartSlab.fromPeriod}}-{{chartSlab.toPeriod}}&nbsp;{{chartSlab.periodType.value}}</td>
      </ng-container>

      <ng-container matColumnDef="amountRange">
        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Amount Range" | translate }} </th>
        <td mat-cell *matCellDef="let chartSlab">{{chartSlab.amountRangeFrom}}-{{chartSlab.amountRangeTo}}</td>
      </ng-container>

      <ng-container matColumnDef="interest">
        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
        <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.annualInterestRate }} </td>
      </ng-container>

      <ng-container matColumnDef="description">
        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Description" | translate }} </th>
        <td mat-cell *matCellDef="let chartSlab"> {{ chartSlab.description }} </td>
      </ng-container>

      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Actions" | translate }} </th>
        <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex">
          <button mat-button color="primary" (click)="expandChartSlabIndex = expandChartSlabIndex === chartSlabIndex ? null : chartSlabIndex">
            <span *ngIf="expandChartSlabIndex !== chartSlabIndex">
              <fa-icon icon="eye" class="m-r-10"></fa-icon>
              {{"labels.buttons.View Incentives" | translate }}
            </span>
            <span *ngIf="expandChartSlabIndex === chartSlabIndex">
              <fa-icon icon="eye-slash" class="m-r-10"></fa-icon>
              {{"labels.buttons.Hide Incentives" | translate }}
            </span>
          </button>
        </td>
      </ng-container>

      <ng-container matColumnDef="incentives">
        <td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex" [attr.colspan]="chartSlabsDisplayedColumns.length">

          <div fxLayout="row wrap" fxFlexFill class="incentives" [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'">

            <mat-card fxLayout="row wrap" fxFlexFill>

              <h4 class="m-b-10" fxFlex="13%">
                {{"labels.heading.Incentives" | translate }}
              </h4>

              <table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives" *ngIf="chartSlab.incentives?.length">

                <ng-container matColumnDef="entityType">
                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Entity Type" | translate }} </th>
                  <td mat-cell *matCellDef="let incentive">
                    {{ incentive.entityType.value }}
                  </td>
                </ng-container>

                <ng-container matColumnDef="attributeName">
                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attribute Name" | translate }} </th>
                  <td mat-cell *matCellDef="let incentive">
                    {{ incentive.attributeName.value }}
                  </td>
                </ng-container>

                <ng-container matColumnDef="conditionType">
                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Condition Type" | translate }} </th>
                  <td mat-cell *matCellDef="let incentive">
                    {{ incentive.conditionType.value | titlecase }}
                  </td>
                </ng-container>

                <ng-container matColumnDef="attributeValue">
                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Attribute Value" | translate }} </th>
                  <td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
                    {{ incentive.attributeValueDesc }}
                  </td>
                </ng-container>

                <ng-container matColumnDef="incentiveType">
                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Incentive Type" | translate }} </th>
                  <td mat-cell *matCellDef="let incentive">
                    {{ incentive.incentiveType.value }}
                  </td>
                </ng-container>

                <ng-container matColumnDef="amount">
                  <th mat-header-cell *matHeaderCellDef> {{"labels.inputs.Interest" | translate }} </th>
                  <td mat-cell *matCellDef="let incentive">
                    {{ incentive.amount }}
                  </td>
                </ng-container>

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

              </table>

            </mat-card>
          </div>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="chartSlabsDisplayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: chartSlabsDisplayedColumns;"></tr>
      <tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns;" class="incentives-row"></tr>

    </table>

  </div>

</div>