EchoTex_Payroll/HRM.UI/ClientApp/src/app/attendance/attendance-process/attendance-process.component.html

<app-loading-panel> </app-loading-panel>
<form>
    <div class="card card-w-title">
        <div class="p-grid form-group">
            <div class="p-col-12 p-md-6 p-lg-4">
                <div class="p-col-12">
                    <label for="processFromDate">Process From</label>
                </div>
                <div class="p-col-12">
                    <!--Use Kendo Date Picker-->
                    <kendo-datepicker
                        id="dtpProcessFromDate"
                        [(value)]="fromDate"
                        [format]="'dd-MMM-yyyy'"
                        style="width: 100%"
                    ></kendo-datepicker>
                </div>
            </div>

            <div class="p-col-12 p-md-6 p-lg-4">
                <div class="p-col-12">
                    <label for="processToDate">Process To</label>
                </div>
                <div class="p-col-12">
                    <!--Use Kendo Date Picker-->
                    <kendo-datepicker
                        id="dtpProcessToDate"
                        [(value)]="toDate"
                        [format]="'dd-MMM-yyyy'"
                        style="width: 100%"
                    ></kendo-datepicker>
                </div>
            </div>

            <div class="p-col-12 p-md-4 p-lg-1">
                <div class="p-col-12">
                    <label for="chkIWithEmployee">Employee Wise</label>
                </div>
                <div class="p-col-12">
                <input type="checkbox" (change)="checkBoxChange()" [checked]="withEmployee"
                    id="chkIWithEmployee" kendoCheckBox/>
                </div>
            </div>

            <div class="p-col-12 p-md-4 p-lg-2" *ngIf="withEmployee">
                <div class="p-col-12">
                    <label for="employeePicker">Select Employee</label>
                </div>
                <div class="p-col-12">
                    <app-employee-picker
                        [MultiSelect]="true"
                        [isActive]="withEmployee"
                        (ItemSelected)="GetSelectedEmployee($event)"
                    ></app-employee-picker>
                </div>
            </div>
            
            <div class="p-col-12 p-md-4 p-lg-1" *ngIf="enableManualEntry">
                <div class="p-col-12">
                    <label for="chkOverrideManualEntry">Override Manual Entry</label>
                </div>
                <div class="p-col-12">
                <input type="checkbox" [checked]="overrideManualEntry" (change)="checkBoxChangeOverrideManualEntry()"
                    id="manualEntry" kendoCheckBox/>
                </div>
            </div>
        </div>
        <div class="p-grid form-group">
            <div class="p-col-12 p-md-5">
                <div class="p-col-12">
                    <!-- <label for="txtLE">(Number of Attendance Employees : {{ employees.length }})</label> -->
                    <!-- <label for="txtWP">Number of Employees not in Work Plan : {{ employees.length }}</label> -->
                    <button class="link-button"
                            icon="window"
                            kendoButton
                            (click)="onClickNotInWorkPlanEmployee()"
                            [disabled]="employees.length == 0"
                            style="text-decoration: none; font-weight: bold;">
                            Number of Employees not in Work Plan : {{ employees.length }}
                    </button>
                </div>
                <div class="p-col-12" *ngIf="lastProcessDate != null">
                    <label style="color: red;" for="txtWP">Last Process date : {{ lastProcessDate != null ? (lastProcessDate | date: 'dd MMM yyyy') : '' }}</label>
                </div>
                <div class="p-col-12">
                    <button icon="cogs"
                            kendoButton
                            class="k-button k-primary"
                            (click)="onSave($event)">
                        Process Attendance
                    </button>
                </div>
                <div class="p-col-12">
                    <b>  {{processStatus}}</b>
                </div>
            </div>
        </div>
    </div>
</form>

<p-dialog header="Not in Work Plan Employees" [(visible)]="showModal" modal="modal"
            showEffect="fade" [style]="{width: '60%', maxHeight:'475px', position: 'absolute'}">
    <p-scrollPanel mode="native">
        <div class="p-grid">
            <div class="p-col-12">
                <fieldset>
                    <kendo-grid [data]="employees" [pageable]="false" [sortable]="true" [reorderable]="true" [resizable]="true">
                        
                        <kendo-grid-column field="sortOrder" title="SL" width="15%">
                        </kendo-grid-column>
                        <kendo-grid-column field="employeeNo" title="Employee No" width="20%">
                        </kendo-grid-column>
                        <kendo-grid-column field="name" title="Employee Name" width="25%">
                        </kendo-grid-column>
                        <kendo-grid-column field="gradeName" title="Grade" width="30%">
                        </kendo-grid-column>
                    </kendo-grid>
                </fieldset>
            </div>
        </div>
    </p-scrollPanel>
</p-dialog>