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

<div class="tab-container mat-typography">
  <div class="align-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 | translateKey: 'catalogs'
          }}
        </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 | formatNumber }} - {{ chartSlab.amountRangeTo | formatNumber }}
        </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 | formatNumber }} %</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
            class="layout-row-wrap flex-fill incentives"
            [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex ? 'expanded' : 'collapsed'"
          >
            <mat-card class="layout-row-wrap flex-fill">
              <h4 class="m-b-10 flex-13">
                {{ 'labels.heading.Incentives' | translate }}
              </h4>

              <table
                class="flex-fill 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 | formatNumber }}
                  </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>