EchoTex_Payroll/HRM.UI/ClientApp/src/app/picker/single-employee-picker.component.html

<!--
<kendo-dialog *ngIf="active" (close)="closeForm()">
    <kendo-dialog-titlebar>
        Single Employee Picker
    </kendo-dialog-titlebar>

    <div class="p-grid">
        <div class="p-col-8">
            <fieldset>
                <legend>Search Condition</legend>
                <div class="p-grid">
                    <div class="p-col-4 p-md-2">
                        <b><label>Employee ID</label></b>
                    </div>
                    <div class="p-col-8 p-md-4">
                        <input type="text" placeholder="Employee ID" style="height: calc(1.4285714286em + 10px);" [(ngModel)]="employeeCode" kendoTextBox />
                    </div>
                    <div class="p-col-4 p-md-2">
                        <b><label>Name (Partial)</label></b>
                    </div>
                    <div class="p-col-8 p-md-4">
                        <input type="text" placeholder="Employee Name" style="height: calc(1.4285714286em + 10px);" [(ngModel)]="employeeName" kendoTextBox />
                    </div>
                </div>
                <div class="p-grid">
                    <div class="p-col-4 p-md-2">
                        <b><label>Department</label></b>
                    </div>
                    <div class="p-col-8 p-md-4">
                        <app-dynamic-picker [dynamicPickerView]="designationpicker"></app-dynamic-picker>
                    </div>
                    <div class="p-col-4 p-md-2">
                        <b><label>Gender</label></b>
                    </div>
                    <div class="p-col-8 p-md-4">
                        <select id="ddlGender" formControlName="gender" class="k-dropdown" style="width:100%">
                            <option selected>Select Gender</option>
                            <option *ngFor="let gender of keys(genders)">{{genders[gender]}}</option>
                        </select>
                    </div>
                </div>
            </fieldset>
        </div>
        <div class="p-col-4">
            <fieldset>
                <legend>Employee</legend>
                <div class="p-grid">
                    <div class="p-col-8">

                    </div>
                    <div class="p-col-2">
                        <b><label>Yes</label></b>
                    </div>
                    <div class="p-col-2">
                        <b><label>No</label></b>
                    </div>
                </div>
                <div class="p-grid">
                    <div class="p-col-8">
                        <b><label>Live</label></b>
                    </div>
                    <div class="p-col-2">
                        <input type="checkbox" name="chkLive" checked kendoCheckBox />
                    </div>
                    <div class="p-col-2">
                        <input type="checkbox" name="chkLive"  kendoCheckBox />
                    </div>
                </div>
                <div class="p-grid">
                    <div class="p-col-8">
                        <b><label>Confirmed</label></b>
                    </div>
                    <div class="p-col-2">
                        <input type="checkbox" name="chkConfirmed" kendoCheckBox />
                    </div>
                    <div class="p-col-2">
                        <input type="checkbox" name="chkConfirmed" kendoCheckBox />
                    </div>
                </div>
                <div class="p-grid">
                    <div class="p-col-8">
                        <b><label>PF Member</label></b>
                    </div>
                    <div class="p-col-2">
                        <input type="checkbox" name="chkPFMember" kendoCheckBox />
                    </div>
                    <div class="p-col-2">
                        <input type="checkbox" name="chkPFMember"  kendoCheckBox />
                    </div>
                </div>
                <div class="p-grid">
                    <div class="p-col-8">
                        <b><label>OT Eligibility</label></b>
                    </div>
                    <div class="p-col-2">
                        <input type="checkbox" name="chkOTEligibility"  kendoCheckBox />
                    </div>
                    <div class="p-col-2">
                        <input type="checkbox" name="chkOTEligibility"  kendoCheckBox />
                    </div>
                </div>
                <div class="p-grid">
                    <div class="p-col-8">
                        <b><label>Expatriate</label></b>
                    </div>
                    <div class="p-col-2">
                        <input type="checkbox" name="chkExpatriate"  kendoCheckBox />
                    </div>
                    <div class="p-col-2">
                        <input type="checkbox" name="chkExpatriate"  kendoCheckBox />
                    </div>
                </div>
                <div class="p-grid">
                    <div class="p-col-8">
                        <b><label>Vendor</label></b>
                    </div>
                    <div class="p-col-2">
                        <input type="checkbox" name="chkVendor"  kendoCheckBox />
                    </div>
                    <div class="p-col-2">
                        <input type="checkbox" name="chkVendor"  kendoCheckBox />
                    </div>
                </div>
                <div class="p-grid">
                    <div class="p-col-8">
                        <b><label>IA</label></b>
                    </div>
                    <div class="p-col-2">
                        <input type="checkbox" name="chkIA"  kendoCheckBox />
                    </div>
                    <div class="p-col-2">

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

    <div class="p-col-12">
        <div class="p-col-12">
            <b></b>
        </div>
        <div class="p-col-6">
            <button class="k-button k-primary" (click)="search()">Find</button>
        </div>
    </div>


    <div class="row">
        <div class="p-col-12">
            <kendo-grid [data]="gridView"
                        [pageSize]="pageSize"
                        style="margin:2px;height:200px;width:1000px;"
                        [skip]="skip"
                        [pageable]="true"
                        (pageChange)="pageChange($event)"
                        [selectable]="selectableSettings"
                        [selectedKeys]="taggedSelection"
                        [kendoGridSelectBy]="'id'">
                <kendo-grid-checkbox-column [width]="20" [headerClass]="{'text-center': true}" [class]="{'text-center': true}"></kendo-grid-checkbox-column>
                <kendo-grid-column field="name" title="Employee Name" width="200"></kendo-grid-column>
                <kendo-grid-column field="employeeNo" title="Employee ID" width="200"></kendo-grid-column>
            </kendo-grid>
        </div>
    </div>
    <kendo-dialog-actions [layout]="actionsLayout">
        <button class="k-button k-primary" (click)="onSelect($event)">Select</button>
        <button class="k-button" (click)="onCancel($event)">Cancel</button>
    </kendo-dialog-actions>
</kendo-dialog>
!-->

<div class="p-col-12">
    <div class="card card-w-title">
        <div class="p-col-12">
            <div class="p-grid">
                <div class="p-col-12 p-md-3">
                    <p-radioButton name="rbNewEmployee" value="rbNewEmployee" label="New Employee"></p-radioButton>
                </div>
                <div class="p-col-12 p-md-3">
                    <p-radioButton name="rbEditEmployee" value="rbEditEmployee" label="Edit Employee"></p-radioButton>
                </div>
                <div class="p-col-12 p-md-6">
                        <input type="text" style="width:25%;height:calc(1.4285714286em + 10px);" [(ngModel)]="employeeCode" name="employeeCode" readonly kendoTextBox placeholder="Employee ID">
                        <button kendoButton style="height:calc(1.4285714286em + 10px);" (click)="openSingleEmployeePicker()"><i class="pi pi-search"></i></button>
                        <input type="text" style="width:70%;height:calc(1.4285714286em + 10px);" [(ngModel)]="employeeName" name="employeeName" readonly kendoTextBox placeholder="Employee Name">
                </div>
            </div>
        </div>
    </div>
</div>