EchoTex_Payroll/HRM.UI/ClientApp/src/app/payroll/emp-confirmation-duration/emp-confirmation-duration.component.html

<div class="p-grid">
    <div class="p-col-12 p-md-12">
        <div class="card" style="padding-left: 10px; padding-right: 10px;">
            <div class="p-grid">
                <div class="p-col-6">
                    <div class="p-col-12 padding-bottom-zero">
                        <label>Upcoming confirming employees, Month: {{this.payrolltype?.nextPayProcessDate | date: "MMMM-yyyy"}} </label>
                    </div>

                </div>
                <div class="p-col-6">
                    <button style="float:left" (click)="upcomingConfirmation()" icon="print" kendoButton
                            type="button" [primary]="true">
                        Upcoming Confirmation
                    </button>
                </div>
            </div>
            <div class="p-grid">
                <div class="p-col-12">

                </div>
            </div>
        </div>
    </div>

</div>
    <div class="p-grid">
        <div class="p-col-12">
            <kendo-grid [data]="empupcomingConfirmations"
                        (remove)="removeHandler($event)">

                <kendo-grid-column field="employeeno" title="Emp ID" width="10%">
                </kendo-grid-column>
                <kendo-grid-column field="name" title="Emp Name" width="20%">
                </kendo-grid-column>
                <kendo-grid-column field="joiningdate" title="Joining Date" width="15%">
                    <ng-template kendoGridCellTemplate let-dataItem>
                        {{ dataItem.joiningdate | date:'dd MMM yyyy'  }}
                    </ng-template>
                </kendo-grid-column>
                <kendo-grid-column field="duration" title="Service Length" width="10%">
                    <ng-template kendoGridCellTemplate let-dataItem>
                        {{ dataItem.duration + ' ' + ' Months' }}
                    </ng-template>
                </kendo-grid-column>
                <kendo-grid-column field="month" title="Months to Extend" width="20%">
                    <ng-template kendoGridCellTemplate let-dataItem>
                        <!--<span  style="width:40%">
                {{(dataItem.month == undefined) ? ' ' :  dataItem.month + ' months extended'}}
            </span>-->
                        <span>
                            <kendo-numerictextbox [(ngModel)]="dataItem.month" style="width:50%"
                                                  [autoCorrect]="true" [spinners]="false">
                            </kendo-numerictextbox>
                            <button icon="save" style="margin-left:5px; width:30%" (click)="saveHandler(dataItem)" class="kt-delete">Extend</button>
                        </span>
                    </ng-template>
                </kendo-grid-column>
                <kendo-grid-column field="prvExteded" title="Already Extended" width="15%">
                </kendo-grid-column>
                
                <kendo-grid-column field="confirmDate" title="New Confirm Date" width="15%">
                    <ng-template kendoGridCellTemplate let-dataItem>
                        {{ dataItem.confirmDate | date:'dd MMM yyyy' }}
                    </ng-template>
                </kendo-grid-column>

                <!--<kendo-grid-command-column title="Action" width="20%">
        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
            <button kendoGridRemoveCommand icon="trash" class="kt-delete"></button>
        </ng-template>
    </kendo-grid-command-column>-->
            </kendo-grid>
        </div>
    </div>



    <form class="container" (ngSubmit)="onUpdate()">
        <div class="card">
            <p-dialog header="Employee Confirmation Duration" [(visible)]="isDisplay" modal="modal"
                      showEffect="fade" [style]="{width: '60%',height:'auto', position: 'absolute'}"
                      [draggable]="false">
                <p-scrollPanel mode="native">
                    <fieldset>
                        <app-emp-confirmation-duration-edit [InputObject]="employeeConfirmation"
                                                            (saveHandler)="saveHandler($event)"></app-emp-confirmation-duration-edit>
                    </fieldset>
                </p-scrollPanel>
            </p-dialog>
        </div>
    </form>


    <!-- <kendo-dialog *ngIf="showPopUp" (close)="closeForm()"
                  title="{{PDFTitle}}"
                  [height]="500" [width]="800">


        <div class="p-grid">
            <div class="p-col-12">
                <ngx-extended-pdf-viewer [src]="src"
                                         [showBookmarkButton]="false"
                                         [showOpenFileButton]="false"
                                         [showSidebarButton]="false"
                                         [textLayer]="false"
                                         [enableDragAndDrop]="false"
                                         [showSecondaryToolbarButton]="false"
                                         [zoom]="'page-width'"
                                         [useBrowserLocale]="true"
                                         [height]="'70vh'"
                                         [handTool]="true">
                </ngx-extended-pdf-viewer>
            </div>
        </div>
    </kendo-dialog> -->

    <div class="card" *ngIf="showPopUp" class="blur-background">
        <kendo-window [height]="600" class='window-viewer' title="Upcomming Confirmation" *ngIf="showPopUp" (close)="closeForm()">
        <!-- [height]="600" [style]="{'min-width': '70%','max-width': '100%', 'max-height': '100%'}"> -->
            <app-loading-panel> </app-loading-panel>
            <div class='embed-responsive'>
                <iframe class="pdf-viewer" id="pdf-viewer-report-pcomming-confirmation" type='application/pdf' [zoom]="zoomLevel"></iframe>
            </div>
        </kendo-window>
    </div>