393 lines
22 KiB
HTML
393 lines
22 KiB
HTML
<div [formGroup]="pickerFormGroup">
|
|
<div *ngIf="!gridMultiSelect">
|
|
<div>
|
|
<kendo-autocomplete #autocompleteEmpCode [disabled]="!active" [data]="empCodeNameList"
|
|
[(ngModel)]="selectedAutoCmptEmp" [value]="selectedAutoCmptEmp" placeholder="Select Employee.."
|
|
(valueChange)="valueChange($event)" [filterable]="true" [loading]="loadingEmployee"
|
|
(filterChange)="handleFilter($event)" [formControlName]="pickerformControlName"
|
|
style="width:85%"></kendo-autocomplete>
|
|
<button icon="search" kendoButton [primary]="true" [disabled]="!active" (click)="OpenForm()"
|
|
style="width:15%"></button>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="gridMultiSelect">
|
|
<div>
|
|
<!--<kendo-autocomplete #autocompleteEmpCode [disabled]="!active"
|
|
[data]="empCodeNameList"
|
|
[(ngModel)]="selectedAutoCmptEmp"
|
|
[value]="selectedAutoCmptEmp"
|
|
placeholder="Select Employee.."
|
|
(valueChange)="valueChange($event)"
|
|
[filterable]="true"
|
|
[loading]="loadingEmployee"
|
|
(filterChange)="handleFilter($event)"
|
|
[formControlName]="pickerformControlName" style="width:60%">
|
|
</kendo-autocomplete>-->
|
|
<button type="button" icon="search" kendoButton [primary]="true" [disabled]="!active" (click)="OpenForm()"
|
|
style="width: 15%;max-width: 150px;
|
|
text-align:right"></button>
|
|
<label style="width: 15%;max-width: 150px;
|
|
text-align:right"> Count : {{employeeCount}}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<kendo-dialog class="blur-background alignCenter" *ngIf="showPopUp" (close)="closeForm()" [maxWidth]="1050"
|
|
[maxHeight]="650">
|
|
<!-- <kendo-dialog class="picker-css" *ngIf="showPopUp" (close)="closeForm()"
|
|
style="height: 70%; width: 70%; position: fixed; top: 50%;left: 50%;transform: translate(-50%, -50%);"> -->
|
|
<app-loading-panel> </app-loading-panel>
|
|
<kendo-dialog-titlebar>
|
|
Search Employee
|
|
</kendo-dialog-titlebar>
|
|
<kendo-dialog-content>
|
|
<div class="p-grid">
|
|
<div class="p-col-12 p-md-12 p-lg-9">
|
|
<fieldset style="height:100%; width: auto;">
|
|
<legend>Search Condition</legend>
|
|
<div class="p-grid">
|
|
<div class="p-col-12 p-md-12 p-lg-4 no-padding">
|
|
<div class="p-col-12" style="padding-bottom:3px;">
|
|
<label><b>Employee ID</b></label>
|
|
</div>
|
|
<div class="p-col-12" style="padding-top:0px;">
|
|
<input type="text" placeholder="Employee ID" style="height: 28px; width: 100%;"
|
|
[(ngModel)]="employeeCode" kendoTextBox />
|
|
</div>
|
|
</div>
|
|
<div class="p-col-12 p-md-12 p-lg-4 no-padding">
|
|
<div class="p-col-12" style="padding-bottom:3px;">
|
|
<label><b>Name (Partial)</b></label>
|
|
</div>
|
|
<div class="p-col-12" style="padding-top:0px;">
|
|
<input type="text" placeholder="Employee Name" style="height: 28px; width: 100%;"
|
|
[(ngModel)]="employeeName" kendoTextBox />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-col-12 p-md-12 p-lg-4 no-padding">
|
|
<div class="p-col-12" style="padding-bottom:3px;">
|
|
<label><b>Grade</b></label>
|
|
</div>
|
|
<div class="p-col-12" style="padding-top:0px;">
|
|
<app-dynamic-picker [fixedGrades]="fixedGrades"
|
|
[dynamicPickerView]="gradePicker"></app-dynamic-picker>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="p-grid">
|
|
<div class="p-col-12 p-md-12 p-lg-4 no-padding" *ngIf="isMoreOptionsVisible">
|
|
<div class="p-col-12" style="padding-bottom:3px;">
|
|
<label><b>Gender</b></label>
|
|
</div>
|
|
<div class="p-col-12" style="padding-top:0px;">
|
|
<kendo-dropdownlist [(ngModel)]="selectedGender" [data]="genders"
|
|
[defaultItem]="{ name: 'Select Gender..', value: null }" [textField]="'name'"
|
|
[valueField]="'value'" [valuePrimitive]="true"
|
|
class="form-control form-control-sm input-sm" id="gender"
|
|
style="height: 28px; width: 100%;">
|
|
</kendo-dropdownlist>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-col-12 p-md-12 p-lg-4 no-padding" *ngIf="isMoreOptionsVisible">
|
|
<div class="p-col-12" style="padding-bottom:3px;">
|
|
<label><b>Designation</b></label>
|
|
</div>
|
|
<div class="p-col-12" style="padding-top:0px;">
|
|
<app-dynamic-picker [dynamicPickerView]="designationpicker"></app-dynamic-picker>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-col-12 p-md-12 p-lg-4 no-padding" *ngIf="isMoreOptionsVisible">
|
|
<div class="p-col-12" style="padding-bottom:3px;">
|
|
<label><b>Department</b></label>
|
|
</div>
|
|
<div class="p-col-12" style="padding-top:0px;">
|
|
<app-dynamic-picker [dynamicPickerView]="departmentPicker"></app-dynamic-picker>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="p-col-12 p-md-12 p-lg-4 no-padding" *ngIf="isMoreOptionsVisible">
|
|
<div class="p-col-12" style="padding-bottom:3px;">
|
|
<label><b>Location</b></label>
|
|
</div>
|
|
<div class="p-col-12" style="padding-top:0px;">
|
|
<app-dynamic-picker [dynamicPickerView]="locationPicker"></app-dynamic-picker>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-col-12 p-md-12 p-lg-4 no-padding" *ngIf="isMoreOptionsVisible">
|
|
<div class="p-col-12" style="padding-bottom:3px;">
|
|
<label><b>Category</b></label>
|
|
</div>
|
|
<div class="p-col-12" style="padding-top:0px;">
|
|
<app-dynamic-picker [dynamicPickerView]="categoryPicker"></app-dynamic-picker>
|
|
</div>
|
|
</div>
|
|
<div class="p-col-12 p-md-12 p-lg-4 no-padding" *ngIf="isMoreOptionsVisible">
|
|
<div class="p-col-12" style="padding-bottom:3px;">
|
|
<label><b>Religion</b></label>
|
|
</div>
|
|
<div class="p-col-12" style="padding-top:0px;">
|
|
<app-dynamic-picker [dynamicPickerView]="religionPicker"></app-dynamic-picker>
|
|
</div>
|
|
</div>
|
|
<!-- <kendo-button class="link-button" (click)="advanceSearchClick()" style="width: 30%; top:-15px;">
|
|
More search option....
|
|
</kendo-button> -->
|
|
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
|
|
<div class="p-col-12 p-md-12 p-lg-3">
|
|
<fieldset style="height:100%;">
|
|
<legend>Search Criteria</legend>
|
|
<div class="p-grid">
|
|
<div class="p-col-8">
|
|
<b><label></label></b>
|
|
</div>
|
|
<div class="p-col-2">
|
|
YES
|
|
</div>
|
|
<div class="p-col-2">
|
|
NO
|
|
</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" (click)="yesNoCheckBoxClick(1,!checkLive)"
|
|
[(ngModel)]="checkLive" kendoCheckBox />
|
|
</div>
|
|
<div class="p-col-2">
|
|
<input type="checkbox" name="chkLiveNo" [(ngModel)]="checkLiveNo"
|
|
(click)="yesNoCheckBoxClick(2,!checkLiveNo)" 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" [(ngModel)]="checkConfirmed"
|
|
(click)="yesNoCheckBoxClick(3,!checkConfirmed)" kendoCheckBox />
|
|
</div>
|
|
<div class="p-col-2">
|
|
<input type="checkbox" name="chkLiveNo" [(ngModel)]="checkConfirmedNo"
|
|
(click)="yesNoCheckBoxClick(4,!checkConfirmedNo)" kendoCheckBox />
|
|
</div>
|
|
</div>
|
|
<div class="p-grid" *ngIf="isMoreOptionsVisible">
|
|
<div class="p-col-8">
|
|
<b><label>PF Member</label></b>
|
|
</div>
|
|
<div class="p-col-2">
|
|
<input type="checkbox" name="chkPFMember" [(ngModel)]="checkPFMember"
|
|
(click)="yesNoCheckBoxClick(5,!checkPFMember)" kendoCheckBox />
|
|
</div>
|
|
<div class="p-col-2">
|
|
<input type="checkbox" name="chkPFMemberNo" [(ngModel)]="checkPFMemberNo"
|
|
(click)="yesNoCheckBoxClick(6,!checkPFMemberNo)" kendoCheckBox />
|
|
</div>
|
|
</div>
|
|
<div class="p-grid" *ngIf="isMoreOptionsVisible">
|
|
<div class="p-col-8">
|
|
<b><label>OT Eligibility</label></b>
|
|
</div>
|
|
<div class="p-col-2">
|
|
<input type="checkbox" name="chkOTEligibility" [(ngModel)]="checkOTEligibility"
|
|
(click)="yesNoCheckBoxClick(7,!checkOTEligibility)" kendoCheckBox />
|
|
</div>
|
|
<div class="p-col-2">
|
|
<input type="checkbox" name="chkOTEligibilityNo" [(ngModel)]="checkOTEligibilityNo"
|
|
(click)="yesNoCheckBoxClick(8,!checkOTEligibilityNo)" kendoCheckBox />
|
|
</div>
|
|
</div>
|
|
<div class="p-grid" *ngIf="isMoreOptionsVisible">
|
|
<div class="p-col-8">
|
|
<b><label>Expatriate</label></b>
|
|
</div>
|
|
<div class="p-col-2">
|
|
<input type="checkbox" name="chkExpatriate" [(ngModel)]="checkExpatriate"
|
|
(click)="yesNoCheckBoxClick(9,!checkExpatriate)" kendoCheckBox />
|
|
</div>
|
|
<div class="p-col-2">
|
|
<input type="checkbox" name="chkExpatriateNo" [(ngModel)]="checkExpatriateNo"
|
|
(click)="yesNoCheckBoxClick(10,!checkExpatriateNo)" kendoCheckBox />
|
|
</div>
|
|
</div>
|
|
<div class="p-grid" *ngIf="isMoreOptionsVisible">
|
|
<div class="p-col-8">
|
|
<b><label>Access Card Assigned</label></b>
|
|
</div>
|
|
<div class="p-col-2">
|
|
<input type="checkbox" name="checkAccessCard" [(ngModel)]="checkAccessCard"
|
|
(click)="yesNoCheckBoxClick(12,!checkAccessCard)" kendoCheckBox />
|
|
</div>
|
|
<div class="p-col-2">
|
|
<input type="checkbox" name="checkAccessCardNo" [(ngModel)]="checkAccessCardNo"
|
|
(click)="yesNoCheckBoxClick(13,!checkAccessCardNo)" kendoCheckBox />
|
|
</div>
|
|
</div>
|
|
<div class="p-grid" *ngIf="isMoreOptionsVisible">
|
|
<div class="p-col-8">
|
|
<b><label>IA</label></b>
|
|
</div>
|
|
<div class="p-col-2">
|
|
<input type="checkbox" name="chkIA" [(ngModel)]="checkIA"
|
|
(click)="yesNoCheckBoxClick(11,!checkIA)" kendoCheckBox />
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="p-col-12 p-md-12 p-lg-6 ">
|
|
<span style="margin-left: 10px;">
|
|
<b *ngIf="employeeCodeFrom!== undefined && employeeCodeTo!== undefined">EmployeeNo From
|
|
{{employeeCodeFrom}} To {{employeeCodeTo}}, </b>
|
|
<b *ngIf="empFromDate!== undefined && empToDate!== undefined">
|
|
Joining Date {{ joiningfromDate | date:
|
|
'dd MMM yyyy'
|
|
}} To {{joiningtoDate | date: 'dd MMM yyyy'}},
|
|
</b>
|
|
<b *ngIf="nidno!== undefined && employeeCodes!==''"> NID No: {{nidno}},
|
|
</b>
|
|
<b *ngIf="employeeCodes!== undefined && employeeCodes!==''"> Employee IDs: {{employeeCodes}}.
|
|
</b>
|
|
</span>
|
|
<kendo-button class="link-button" (click)="onClickClear()" style="width: 15%; margin: auto;" *ngIf="employeeCodeFrom!== undefined && employeeCodeTo!== undefined || empFromDate!== undefined && empToDate!== undefined ||
|
|
employeeCodes!== undefined || nidno!== undefined">Clear</kendo-button>
|
|
</div>
|
|
<div class="p-col-12 p-md-12 p-lg-3 " style="text-align: right;">
|
|
<a *ngIf="isMoreOptionsVisible" (click)="advanceSearchClick()"
|
|
style="cursor: pointer; padding-right: 5px;">
|
|
Advanced Search
|
|
</a>
|
|
<a (click)="moreSearchClick()" style="cursor: pointer; margin-left: 20px;">
|
|
More Options <span *ngIf="isSpanArrowDown">▼</span> <span *ngIf="isSpanArrowUp">▲</span>
|
|
</a>
|
|
</div>
|
|
<div class="p-col-12 p-md-12 p-lg-3" style="text-align: right;">
|
|
<span style="margin-right: 10px;"><b>Count: {{count}} - Selected: {{taggedSelection?.length}}</b></span>
|
|
<button icon="search" kendoButton [primary]="true" (click)="search()">
|
|
Find
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="p-grid">
|
|
<div class="p-col-12">
|
|
<kendo-grid [data]="gridView" (pageChange)="onDataChange($event)" [pageSize]="pageSize"
|
|
[pageable]="true" scrollable="virtual" [skip]="skip" [rowHeight]="36"
|
|
[(selectedKeys)]="selectedItems" [state]="selectAllState" [style.height.px]="gridHeight"
|
|
(selectedKeysChange)="onSelectedKeysChange($event)" [selectable]="selectableSettings"
|
|
[kendoGridSelectBy]="'employeeID'">
|
|
<kendo-grid-checkbox-column *ngIf="!gridMultiSelect" showSelectAll="false" [width]="40"
|
|
[headerClass]="{'text-center': true}"
|
|
[class]="{'text-center': true}"></kendo-grid-checkbox-column>
|
|
|
|
<kendo-grid-checkbox-column *ngIf="gridMultiSelect" [width]="40">
|
|
<ng-template kendoGridHeaderTemplate>
|
|
<input type="checkbox" kendoCheckBox id="selectAllCheckboxId" kendoGridSelectAllCheckbox
|
|
[state]="selectAllState" (selectAllChange)="onSelectAllChange($event)" />
|
|
<label class="k-checkbox-label" for="selectAllCheckboxId"></label>
|
|
</ng-template>
|
|
</kendo-grid-checkbox-column>
|
|
|
|
<kendo-grid-column field="employeeNo" title="Employee ID" width="120"></kendo-grid-column>
|
|
<kendo-grid-column field="name" title="Employee Name" width="auto"></kendo-grid-column>
|
|
<kendo-grid-column field="gradeName" title="Grade" width="auto"></kendo-grid-column>
|
|
<kendo-grid-column field="designationName" title="Designation" width="auto"></kendo-grid-column>
|
|
</kendo-grid>
|
|
</div>
|
|
</div>
|
|
<div class="p-grid">
|
|
<div class="p-col-12" align="right">
|
|
<button icon="close" kendoButton (click)="onCancel($event)">Close</button>
|
|
<button icon="save" kendoButton [primary]="true" (click)="onSelect($event)">Select</button>
|
|
</div>
|
|
</div>
|
|
</kendo-dialog-content>
|
|
</kendo-dialog>
|
|
|
|
<kendo-dialog class="blur-background alignCenter" title="Advance Search" *ngIf="showAdvancePopUp" (close)="closeAdvanceForm()" [maxWidth]="800"
|
|
[maxHeight]="300" style="overflow-y: auto;">
|
|
<app-loading-panel> </app-loading-panel>
|
|
<kendo-dialog-content>
|
|
<div class="p-grid">
|
|
<div class="p-col-12">
|
|
<fieldset style="height:100%;">
|
|
<legend>Advance Search Options</legend>
|
|
<div class="p-grid">
|
|
<div class="p-col-12 p-md-6 p-lg-3" style="margin: auto;">
|
|
<span><b>EmployeeNo From</b></span>
|
|
</div>
|
|
<div class="p-col-12 p-sm-6 p-md-6 p-lg-3">
|
|
<input type="text" placeholder="Employee ID" style="height: 28px; width: 100%;"
|
|
[(ngModel)]="employeeCodeFrom" kendoTextBox />
|
|
</div>
|
|
<div class="p-col-12 p-sm-6 p-md-6 p-lg-3" style="margin: auto;">
|
|
<span><b>Up To</b></span>
|
|
</div>
|
|
<div class="p-col-12 p-sm-6 p-md-6 p-lg-3">
|
|
<input type="text" placeholder="Employee ID" style="height: 28px; width: 100%;"
|
|
[(ngModel)]="employeeCodeTo" kendoTextBox />
|
|
</div>
|
|
<div class="p-col-12 p-sm-6 p-md-6 p-lg-3" style="margin: auto;">
|
|
<span><b>Joining From</b></span>
|
|
</div>
|
|
<div class="p-col-12 p-sm-6 p-md-6 p-lg-3">
|
|
<input type="checkbox" name="chkJoiningDate" [(ngModel)]="checkJoiningDate"
|
|
(click)="joiningDateCheckBoxClick(11,!checkJoiningDate)" [checked]="checkJoiningDate"
|
|
kendoCheckBox />
|
|
<kendo-datepicker [format]="'dd-MMM-yyyy'" [(ngModel)]="joiningfromDate"
|
|
[disabled]="isDatePickerDisabled" style="width:90%">
|
|
</kendo-datepicker>
|
|
</div>
|
|
<div class="p-col-12 p-sm-6 p-md-6 p-lg-3" style="margin: auto;">
|
|
<span><b>To</b></span>
|
|
</div>
|
|
<div class="p-col-12 p-sm-6 p-md-6 p-lg-3">
|
|
<kendo-datepicker [format]="'dd-MMM-yyyy'" [(ngModel)]="joiningtoDate"
|
|
[disabled]="isDatePickerDisabled" style="width:100%">
|
|
</kendo-datepicker>
|
|
</div>
|
|
|
|
<div class="p-col-12 p-sm-6 p-md-6 p-lg-3" style="margin: auto;">
|
|
<span><b>National ID</b></span>
|
|
</div>
|
|
<div class="p-col-12 p-sm-6 p-md-6 p-lg-3">
|
|
<input type="text" placeholder="National ID" style="height: 28px; width: 100%;"
|
|
[(ngModel)]="nidno" kendoTextBox />
|
|
</div>
|
|
<div class="p-col-12 p-sm-6 p-md-6 p-lg-2" style="margin: auto;">
|
|
<span><b>Employee IDs</b></span>
|
|
</div>
|
|
<div class="p-col-12 p-sm-6 p-md-6 p-lg-4">
|
|
<input type="text" placeholder="Employee IDs" style="height: 28px; width: 100%;"
|
|
[(ngModel)]="employeeCodes" kendoTextBox />
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
<div class="p-col-12 p-lg-12" align="right">
|
|
<button type="button" kendoButton [primary]="true" icon="" (click)="closeAdvanceForm()"
|
|
style="margin: 5px;">
|
|
Cancel
|
|
</button>
|
|
<button type="button" kendoButton [primary]="true" icon="" (click)="onClickAdvanceSelect()"
|
|
style="margin: 5px;">
|
|
OK
|
|
</button>
|
|
</div>
|
|
</kendo-dialog-content>
|
|
</kendo-dialog>
|