SFM-Broker/src/app/loan-edit/people-reward/people-reward.component.html

<ng-container>
  <fieldset class="k-form-fieldset">

    <bkp-divider><kendo-icon [name]="'dollar'"> </kendo-icon>&nbsp;Reward from Loan </bkp-divider>
    <div style="text-align: center">
      <kendo-chip label="SuperCredit Loan ID {{Loan.Id}}"  [removable]="false" > </kendo-chip>
    </div>
    <div class="vertical-spacer"></div>

    <kendo-grid [data]="pendingReward"
                [height]="410"
                (add)="addHandler($event)"
                (cancel)="cancelHandler($event)"
                (save)="saveHandler($event)"
                (edit)="editHandler($event)"
                (remove)="removeHandler($event)"
    >
      <ng-template kendoGridToolbarTemplate>
        <button kendoGridAddCommand icon="plus" [primary]="true" class="toolbarAddNew">Add new</button>
      </ng-template>

      <kendo-grid-command-column title="action" width="80">
        <ng-template kendoGridCellTemplate let-isNew="isNew" let-dataItem>
          <button kendoGridEditCommand *ngIf="!dataItem.Paid" icon="edit"></button>
          <button kendoGridRemoveCommand *ngIf="!dataItem.Paid" icon="delete"></button>
          <button kendoGridSaveCommand [disabled]="formGroup?.invalid" icon="save"></button>
          <button kendoGridCancelCommand icon="close"></button>
        </ng-template>
      </kendo-grid-command-column>

      <kendo-grid-column field="ToId" title="Name" width="200">
        <ng-template kendoGridCellTemplate let-dataItem>
          <div class="customer-photo" [ngStyle]="{'background-image' : photoURL(dataItem.ToId) }"></div>
          <div class="customer-name"> {{ UserName(dataItem) }}</div>
        </ng-template>
        <ng-template  kendoGridEditTemplate let-fg="formGroup" let-column="column" let-dataItem="dataItem">

          <kendo-multicolumncombobox
            #selectRevelantPeople
            [data]="relevantPeople"
            [textField]="'Display'"
            [valueField]="'Id'"
            [valuePrimitive]="true"

            [listHeight]="300"
            placeholder="Type here to search"
            [suggest]="true"
            [clearButton]="true"
            [allowCustom]="false"

            [formControl]="formGroup.get(column.field)"
            (valueChange)="peopleChanged($event)"
          >
            <kendo-combobox-column
              [field]="'Display'"
              [title]="'Contact Name'"
              [width]="200"
            >
              <ng-template
                kendoMultiColumnComboBoxColumnCellTemplate
                let-dataItem
              >
                <img
                  class="contact-image"
                  [src]="getContactImageUrl(dataItem.Id)"
                />
                <span>{{ dataItem.Display }}</span>
              </ng-template>
            </kendo-combobox-column>

            <kendo-combobox-column
              [field]="'Role'"
              [title]="'Role of Loan'"
              [width]="200"
            >
            </kendo-combobox-column>

            <ng-template kendoMultiColumnComboBoxFooterTemplate>
              <strong>
                {{ total }} records in total
              </strong>
            </ng-template>
          </kendo-multicolumncombobox>
        </ng-template>

      </kendo-grid-column>

      <kendo-grid-column field="Role" title="Role" width="100"  [editable]="true">
      </kendo-grid-column>

      <kendo-grid-column field="Amount" title="Amount" width="100" editor="numeric" format="{0:c}"></kendo-grid-column>
      <kendo-grid-column field="Description" title="Description" width="200">
        <ng-template
          kendoGridEditTemplate let-fg="formGroup" let-column="column" let-dataItem="dataItem">
          <kendo-combobox
            name="existingPayDescription"
            [data]="existingPayDescription"
            [valuePrimitive]="true"
            [allowCustom]="true"
            [formControl]="formGroup.get(column.field)"
          >
          </kendo-combobox>
        </ng-template>
      </kendo-grid-column>

      <kendo-grid-column field="Ts" title="Date" width="100" editor="date" >
        <ng-template kendoGridCellTemplate let-dataItem>
          {{dataItem.Ts | date: 'yyyy-MM-dd'}}
        </ng-template>
      </kendo-grid-column>
    </kendo-grid>

    <bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>
    <div class="vertical-spacer"></div>

    Paid Reward (casted into stone, cannot be undone )

    <kendo-grid [data]="paidReward"
                [height]="410"
                (add)="addHandler($event)"
                (cancel)="cancelHandler($event)"
                (save)="saveHandler($event)"
                (edit)="editHandler($event)"
                (remove)="removeHandler($event)"
    >
      <kendo-grid-column field="Id" title="Id" width="80"> </kendo-grid-column>

      <kendo-grid-column field="To" title="Name" width="300">
        <ng-template kendoGridCellTemplate let-dataItem>
          <div class="customer-photo" [ngStyle]="{'background-image' : photoURL(dataItem.To) }"></div>
          <div class="customer-name"> {{ UserName(dataItem) }}</div>
        </ng-template>
      </kendo-grid-column>

      <kendo-grid-column field="Role" title="Role" width="200">
      </kendo-grid-column>

      <kendo-grid-column field="Amount" title="Amount" width="200" format="{0:c}"></kendo-grid-column>
      <kendo-grid-column field="Description" title="Description" width="200">
      </kendo-grid-column>
      <kendo-grid-column field="Ts" title="Date" width="200">
        <ng-template kendoGridCellTemplate let-dataItem>
          {{dataItem.Ts | date: 'yyyy-MM-dd'}}
        </ng-template>
      </kendo-grid-column>

      <kendo-grid-column field="PayOutId" title="Payment Info" width="180"> </kendo-grid-column>

    </kendo-grid>

    <bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>
    <div class="vertical-spacer"></div>


  </fieldset>
</ng-container>

<div class="k-form-buttons k-buttons-end">
  <div>
    <button class="k-button k-primary" (click)="prev()" > ◀ Prev</button>
    <button kendoButton look="flat"  [disabled]="true">&nbsp;</button>
    <button kendoButton class="k-button k-primary" (click)="next()" icon="save"> (Save and) Next ▶ </button>

  </div>
</div>