EchoTex_Payroll/HRM.UI/ClientApp/src/app/payroll/career-and-profile/life-cycle-entry/life-cycle-entry.component.html

1172 lines
54 KiB
HTML
Raw Normal View History

2024-10-14 10:01:49 +06:00
<app-loading-panel></app-loading-panel>
<!--<div class="card card-w-title">
<label style="font-weight:bold">Employee Life Cycle</label>
</div>-->
<div class="p-grid">
<div class="p-col-12 p-lg-12">
<fieldset style="border-color: #414278">
<div class="p-grid" style="margin: auto">
<div class="p-col-12 p-lg-1">
<label for="txtselectEmp">Employee</label>
</div>
<div class="p-col-12 p-lg-1" align="center">:</div>
<div class="p-col-12 p-lg-10">
<app-employee-picker
(ItemSelected)="GetSelectedEmployee($event)"
[setSelectedEmp]="_pickerSelecteEmp"
[isActive]="empPickerActive"
[ForLifeCycleSearch]="true"
2024-10-14 10:01:49 +06:00
></app-employee-picker>
</div>
<div class="p-col-12 p-lg-1">
<label for="txtDepartment">Department</label>
</div>
<div class="p-col-12 p-lg-1" align="center">:</div>
<div class="p-col-12 p-lg-4">
{{ _employee.departmentName }}
</div>
<div class="p-col-12 p-lg-1">
<label for="txtDesignation">Designation</label>
</div>
<div class="p-col-12 p-lg-1" align="center">:</div>
<div class="p-col-12 p-lg-4">
{{ _employee.designationName }}
</div>
<div class="p-col-12 p-lg-1">
<label for="txtLocation">Location</label>
</div>
<div class="p-col-12 p-lg-1" align="center">:</div>
<div class="p-col-12 p-lg-4">{{ _employee.locationName }}</div>
<div class="p-col-12 p-lg-1">
<label for="txtOrgPosition">Org. Position</label>
</div>
<div class="p-col-12 p-lg-1" align="center">:</div>
<div class="p-col-12 p-lg-4">
{{
this._CurrentEmpgranogram == null
? ""
: this._CurrentEmpgranogram.positionName
}}
</div>
<div class="p-col-12 p-lg-1">
<label for="txtCostCenter">Cost Center</label>
</div>
<div class="p-col-12 p-lg-1" align="center">:</div>
<div class="p-col-12 p-lg-4">
{{ _employee.costcenterName }}
</div>
<div class="p-col-12 p-lg-1">
<label for="txtConfirmation">Confirmation</label>
</div>
<div class="p-col-12 p-lg-1" align="center">:</div>
<div class="p-col-12 p-lg-4">
{{ this._employee.isConfirmed == true ? " Yes" : " No" }}
</div>
<div class="p-col-12 p-lg-1">
<label for="txtGrade">Grade</label>
</div>
<div class="p-col-12 p-lg-1" align="center">:</div>
<div class="p-col-12 p-lg-4">{{ _employee.gradeName }}</div>
<div class="p-col-12 p-lg-1">
<label for="txtGrade">Status</label>
</div>
<div class="p-col-12 p-lg-1" align="center">:</div>
2025-07-28 17:38:35 +06:00
<div class="p-col-12 p-lg-4"
[ngStyle]="{ 'color': _statusString === 'Discontinued' ? 'red' : 'inherit' }">
{{ _statusString }}
</div>
2024-10-14 10:01:49 +06:00
<div class="p-col-12 p-lg-1">
<label for="txtBasicSalary">Basic Salary</label>
</div>
<div class="p-col-12 p-lg-1" align="center">:</div>
<div class="p-col-12 p-lg-4">
{{ _employee.basicSalary | number : "1.2-2" }}
</div>
<div class="p-col-12 p-lg-1">
<label for="txtGrossSalary">Gross Salary</label>
</div>
<div class="p-col-12 p-lg-1" align="center">:</div>
<div class="p-col-12 p-lg-4">
{{ _employee.grossSalary | number : "1.2-2" }}
</div>
<div class="p-col-12 p-lg-1">
<label for="txtCategory">Category</label>
</div>
<div class="p-col-12 p-lg-1" align="center">:</div>
<div class="p-col-12 p-lg-4">{{ _employee.categoryName }}</div>
2025-07-28 17:38:35 +06:00
<div class="p-col-12 p-lg-1">
<label for="txtCategory">Joining Date</label>
</div>
<div class="p-col-12 p-lg-1" align="center">:</div>
<div class="p-col-12 p-lg-4">{{ _employee.joiningDate | date: 'dd MMM yyyy'}}</div>
2024-10-14 10:01:49 +06:00
</div>
</fieldset>
</div>
<div class="p-col-12 p-lg-12">
<fieldset style="border-color: #414278">
<div class="p-grid">
<div class="p-col-12">
<div class="p-grid">
<div class="p-col-12 p-lg-1" style="margin: auto">
<label for="ddlEvent">Event</label>
</div>
<div
class="p-col-12 p-lg-1"
style="margin: auto"
align="center"
>
:
</div>
<div class="p-col-12 p-lg-4">
<kendo-dropdownlist
class="form-control form-control-sm input-sm"
style="width: 100%"
id="ddlEvent"
[data]="_employeeStatus"
[defaultItem]="{
description: 'Select an Event',
id: null
}"
[textField]="'description'"
[(ngModel)]="_selectedEventID"
[valueField]="'id'"
(selectionChange)="EventselectionChange($event)"
[valuePrimitive]="true"
>
</kendo-dropdownlist>
</div>
<div class="p-col-12 p-lg-1" style="margin: auto">
<label for="dtpEffectDate">Effect Date</label>
</div>
<div
class="p-col-12 p-lg-1"
style="margin: auto"
align="center"
>
:
</div>
<div class="p-col-12 p-lg-4">
<kendo-datepicker
id="dtpEffectDate"
[format]="'dd-MMM-yyyy'"
[(ngModel)]="_effectDate"
style="width: 100%"
></kendo-datepicker>
</div>
</div>
</div>
<div class="p-col-12">
<div class="p-grid">
<ng-container *ngIf="this.isshoDistinueDate == true">
<div class="p-col-12 p-lg-2"></div>
<div class="p-col-12 p-lg-10">
<input
style="margin-right: 5px"
type="checkbox"
id="chkDistricontinueAfterMonth"
[(ngModel)]="
_empLifeCycle.isCurrentMonthIncluded
"
kendoCheckBox
/>
<label for="chkDistricontinueAfterMonth"
>Discontinue After Current Month Salary
(Calculate Salary till Discontinuation
Date)</label
>
</div>
<!-- <div class="p-col-12 p-lg-9" style="margin: auto;"><label for="chkDistricontinueAfterMonth">Discontinue After Current Month Salary (Calculate Salary till Discontinuation Date)</label></div> -->
</ng-container>
<ng-container *ngIf="this.isShowConfirmed == true">
<div class="p-col-12 p-lg-1"></div>
<div class="p-col-12 p-lg-1">
<input
type="checkbox"
[(ngModel)]="_empLifeCycle.isConfirm"
id="chkConfirmed"
kendoCheckBox
/>
</div>
<div class="p-col-12 p-lg-10" style="margin: auto">
<label for="chkConfirmed">Is Confirmed</label>
</div>
</ng-container>
<!-- <ng-container *ngIf="this.isGrade == true && this.showCompanyProvidedCar == true">
<div class="p-col-12 p-lg-1" ></div>
<div class="p-col-12 p-lg-1" > <input type="checkbox" class="k-checkbox" /></div>
<div class="p-col-12 p-lg-10" style="margin: auto;"><label>Taken Company Provided Car</label></div>
</ng-container> -->
<ng-container *ngIf="this.isOrganogram == true">
<div class="p-col-12 p-lg-1">
<label>Organogram</label>
</div>
<div class="p-col-12 p-lg-1" align="center">:</div>
<div class="p-col-12 p-lg-4">
<app-Organogram-picker
[VacantNodeSelection]="false"
(OnOrgPositionSelected)="
organogramselected($event)
"
></app-Organogram-picker>
</div>
</ng-container>
<ng-container *ngIf="this.isDesingation == true">
<div class="p-col-12 p-lg-1">
<label>Designation</label>
</div>
<div class="p-col-12 p-lg-1" align="center">:</div>
<div class="p-col-12 p-lg-4">
<app-dynamic-picker
[dynamicPickerView]="_designationPicker"
(onSelectCompleted)="SetFromDescription()"
></app-dynamic-picker>
</div>
</ng-container>
<ng-container *ngIf="this.isDepartment == true">
<div class="p-col-12 p-lg-1">
<label>Department</label>
</div>
<div class="p-col-12 p-lg-1" align="center">:</div>
<div class="p-col-12 p-lg-4">
<app-dynamic-picker
[dynamicPickerView]="_departmentPicker"
(onSelectCompleted)="SetFromDescription()"
></app-dynamic-picker>
</div>
</ng-container>
<ng-container *ngIf="this.isLocation == true">
<div class="p-col-12 p-lg-1">
<label>Location</label>
</div>
<div class="p-col-12 p-lg-1" align="center">:</div>
<div class="p-col-12 p-lg-4">
<app-dynamic-picker
[dynamicPickerView]="_locationPicker"
(onSelectCompleted)="SetFromDescription()"
></app-dynamic-picker>
</div>
</ng-container>
<ng-container *ngIf="this.isGrade == true">
<div class="p-col-12 p-lg-1">
<label>Grade</label>
</div>
<div class="p-col-12 p-lg-1" align="center">:</div>
<div class="p-col-12 p-lg-4">
<app-dynamic-picker
[dynamicPickerView]="_gradePicker"
(onSelectCompleted)="SetFromDescription()"
></app-dynamic-picker>
</div>
</ng-container>
<ng-container *ngIf="this.isCategory == true">
<div class="p-col-12 p-lg-1">
<label>Category</label>
</div>
<div class="p-col-12 p-lg-1" align="center">:</div>
<div class="p-col-12 p-lg-4">
<app-dynamic-picker
[dynamicPickerView]="_categoryPicker"
(onSelectCompleted)="SetFromDescription()"
></app-dynamic-picker>
</div>
</ng-container>
<ng-container *ngIf="this.isCostCenter == true">
<div class="p-col-12 p-lg-1">
<label>Cost-Center</label>
</div>
<div class="p-col-12 p-lg-1" align="center">:</div>
<div class="p-col-12 p-lg-4">
<app-dynamic-picker
[dynamicPickerView]="_costcenterPicker"
(onSelectCompleted)="SetFromDescription()"
></app-dynamic-picker>
</div>
</ng-container>
<ng-container *ngIf="this.isComplain == true">
<div class="p-col-12 p-lg-1">
<label>Complain</label>
</div>
<div class="p-col-12 p-lg-1" align="center">:</div>
<div class="p-col-12 p-lg-4">
<kendo-dropdownlist
class="form-control form-control-sm input-sm"
style="width: 100%"
id="ddlComplain"
[data]="_complains"
[defaultItem]="{
description: 'Select an Event',
id: null
}"
[textField]="'description'"
[valueField]="'id'"
(valueChange)="SetFromDescription()"
[valuePrimitive]="true"
[(ngModel)]="_selectedComplainID"
>
</kendo-dropdownlist>
</div>
</ng-container>
<ng-container *ngIf="this.isPunishment == true">
<div class="p-col-12 p-lg-1">
<label>Punishment</label>
</div>
<div class="p-col-12 p-lg-1" align="center">:</div>
<div class="p-col-12 p-lg-4">
<kendo-dropdownlist
class="form-control form-control-sm input-sm"
style="width: 100%"
id="ddlPunishment"
[data]="_punishments"
[defaultItem]="{
description: 'Select an Event',
id: null
}"
[textField]="'description'"
[valueField]="'id'"
(valueChange)="SetFromDescription()"
[valuePrimitive]="true"
[(ngModel)]="_selectedPunishmentID"
>
</kendo-dropdownlist>
</div>
</ng-container>
<ng-container *ngIf="this.isPayrollType == true">
<div class="p-col-12 p-lg-1">
<label>Payroll-Type</label>
</div>
<div class="p-col-12 p-lg-1" align="center">:</div>
<div class="p-col-12 p-lg-4">
<kendo-dropdownlist
class="form-control form-control-sm input-sm"
style="width: 100%"
id="ddlPayrollType"
[data]="_payrollTypes"
[defaultItem]="{
description: 'Select an Event',
id: null
}"
[textField]="'description'"
[valueField]="'id'"
(valueChange)="SetFromDescription()"
[valuePrimitive]="true"
[(ngModel)]="_selectedPayrollTypeID"
>
</kendo-dropdownlist>
</div>
</ng-container>
<ng-container *ngIf="this.isGrossSalary == true">
<div class="p-col-12 p-lg-1">
<label>Gross Salary</label>
</div>
<div class="p-col-12 p-lg-1" align="center">:</div>
<div class="p-col-12 p-lg-4">
<kendo-numerictextbox
[min]="0"
[max]="10000000"
[(ngModel)]="_empLifeCycle.grossSalary"
(valueChange)="
SetFromDescription('GrossSalary')
"
[autoCorrect]="autoCorrect"
style="width: 100%"
>
</kendo-numerictextbox>
</div>
</ng-container>
<ng-container *ngIf="this.isBasicSalary == true">
<div class="p-col-12 p-lg-1">
<label>Basic Salary</label>
</div>
<div class="p-col-12 p-lg-1" align="center">:</div>
<div class="p-col-12 p-lg-4">
<kendo-numerictextbox
[min]="0"
[max]="10000000"
[(ngModel)]="_empLifeCycle.basicSalary"
(valueChange)="SetFromDescription()"
[autoCorrect]="autoCorrect"
style="width: 100%; text-align: right"
>
</kendo-numerictextbox>
</div>
<div
class="p-col-12 p-lg-6"
*ngIf="this.isGrade == false"
style="margin: auto"
></div>
</ng-container>
</div>
</div>
<div class="p-col-12">
<div class="p-grid">
<div class="p-col-12 p-lg-1" style="margin: auto">
<label for="txtDiscription">Description</label>
</div>
<div
class="p-col-12 p-lg-1"
style="margin: auto"
align="center"
>
:
</div>
<div class="p-col-12 p-lg-4">
<textarea
rows="2"
cols="30"
pInputTextarea
style="width: 100%"
[(ngModel)]="_sDescription"
></textarea>
</div>
<div class="p-col-12 p-lg-1" style="margin: auto">
<label for="txtRemarks">Remarks</label>
</div>
<div
class="p-col-12 p-lg-1"
style="margin: auto"
align="center"
>
:
</div>
<div class="p-col-12 p-lg-4">
<textarea
rows="2"
cols="30"
[(ngModel)]="_remarks"
pInputTextarea
style="width: 100%"
></textarea>
</div>
</div>
<div class="p-grid" style="margin: auto">
<div
class="p-col-12"
align="right"
style="margin: auto"
>
<button
kendoButton
class="k-button k-primary"
(click)="Save()"
icon="save"
style="width: 100px"
>
Save
</button>
</div>
</div>
</div>
</div>
</fieldset>
</div>
<div class="p-col-12 p-lg-12">
<fieldset style="border-color: #414278">
<div class="p-grid" style="margin: auto">
<p-tabView>
<p-tabPanel header="Career History" leftIcon="pi pi-user">
<kendo-grid
[data]="_lifecycleHistory"
[pageable]="true"
[sortable]="true"
[reorderable]="true"
[resizable]="true"
[columnMenu]="{ filter: true }"
[pageSize]="
_lifecycleHistory == undefined
? 0
: _lifecycleHistory.length
"
style="max-height: 320px; overflow-y: auto"
>
<!--<kendo-grid-column field="createdDate" title="Entry-Date" width="10%">
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
{{dataItem.createdDate | date: 'dd-MMM-yyyy'}}
</ng-template>
</kendo-grid-column>-->
<kendo-grid-column
field="effectDate"
title="Effect Date"
2025-07-28 17:38:35 +06:00
width="13%"
2024-10-14 10:01:49 +06:00
>
<ng-template
kendoGridCellTemplate
let-dataItem
let-rowIndex="rowIndex"
>
{{
dataItem.effectDate
| date : "dd-MMM-yyyy"
}}
</ng-template>
</kendo-grid-column>
<kendo-grid-column
field="description"
title="Description"
2025-07-28 17:38:35 +06:00
width="70%"
2024-10-14 10:01:49 +06:00
>
</kendo-grid-column>
2025-07-28 17:38:35 +06:00
<kendo-grid-column
field=""
title="Created by"
width="10%"
>
<ng-template
kendoGridCellTemplate
let-dataItem
let-rowIndex="rowIndex"
>
{{ dataItem.createdByUser }}
<br>
<label style="font-size: 12px; color: darkgray;">On {{ dataItem.createdDate | date : "dd-MMM-yyyy" }}</label>
</ng-template>
</kendo-grid-column>
2024-10-14 10:01:49 +06:00
<kendo-grid-command-column
title="Action"
2025-07-28 17:38:35 +06:00
width="7%"
2024-10-14 10:01:49 +06:00
>
<ng-template
kendoGridCellTemplate
let-dataItem
let-rowIndex="rowIndex"
>
<button
kendoGridRemoveCommand
(click)="deletelifecycle(dataItem.id)"
[disabled]="
!islifcycleDeleteActive(dataItem.id)
"
style="background: red; color: white"
icon="delete"
></button>
</ng-template>
</kendo-grid-command-column>
</kendo-grid>
</p-tabPanel>
<p-tabPanel header="Salary History" leftIcon="pi pi-user">
<div class="p-grid">
<div class="p-col-12 p-lg-12">
<b
>Colored items are represent as arrear,
which will be calculated in current month
Salary. you can delete the arrear item, if
you don't like to auto arrear
calculation'</b
>
</div>
</div>
<kendo-grid
[data]="gradeSalaries"
[rowClass]="rowCallback"
style="max-height: 320px; overflow-y: auto"
>
<!--<kendo-grid-column field="effectDate" title="gradeID" width="20%">
</kendo-grid-column>-->
<kendo-grid-column
field="effectdate"
title="From Date"
width="17%"
[headerStyle]="{
'font-size': '13px',
'white-space': 'normal',
'text-align': 'center',
'vertical-align': 'middle'
}"
>
<ng-template
kendoGridCellTemplate
let-dataItem
let-rowIndex="rowIndex"
>
{{
dataItem.effectdate
| date : "dd-MMM-yyyy"
}}
</ng-template>
</kendo-grid-column>
<kendo-grid-column
field="tilldate"
title="Till Date"
width="18%"
[headerStyle]="{
'font-size': '13px',
'white-space': 'normal',
'text-align': 'center',
'vertical-align': 'middle'
}"
>
<ng-template
kendoGridCellTemplate
let-dataItem
let-rowIndex="rowIndex"
>
{{
dataItem.tilldate | date : "dd-MMM-yyyy"
}}
</ng-template>
</kendo-grid-column>
<kendo-grid-column
field="gradeName"
title="Grade"
width="10%"
[headerStyle]="{
'font-size': '13px',
'white-space': 'normal',
'text-align': 'center',
'vertical-align': 'middle'
}"
>
</kendo-grid-column>
<kendo-grid-column
field="basicsalary"
title="Basic Salary"
width="18%"
[headerStyle]="{
'font-size': '13px',
'white-space': 'normal',
'text-align': 'center',
'vertical-align': 'middle'
}"
[style]="{
'font-size': '13px',
'text-align': 'right'
}"
>
<ng-template
kendoGridCellTemplate
let-dataItem
let-rowIndex="rowIndex"
>
{{
dataItem.basicsalary | number : "1.2-2"
}}
</ng-template>
</kendo-grid-column>
<kendo-grid-column
field="grosssalary"
title="Gross Salary"
width="12%"
[headerStyle]="{
'font-size': '13px',
'white-space': 'normal',
'text-align': 'center',
'vertical-align': 'middle'
}"
[style]="{
'font-size': '13px',
'text-align': 'right'
}"
>
<ng-template
kendoGridCellTemplate
let-dataItem
let-rowIndex="rowIndex"
>
{{
dataItem.grosssalary | number : "1.2-2"
}}
</ng-template>
</kendo-grid-column>
<kendo-grid-command-column
title="Action"
width="11%"
>
<ng-template
kendoGridCellTemplate
let-dataItem
let-rowIndex="rowIndex"
>
<button
kendoGridRemoveCommand
(click)="
deleteArrearGradeSalary(
dataItem.empgradesalaryid
)
"
[disabled]="
!isSalaryDeleteActive(
dataItem.empgradesalaryid
)
"
style="background: red; color: white"
icon="delete"
></button>
</ng-template>
</kendo-grid-command-column>
</kendo-grid>
</p-tabPanel>
</p-tabView>
</div>
</fieldset>
</div>
</div>
<div class="p-grid">
<div class="p-col-12 p-lg-6">
<!-- <div class="p-grid"> -->
<!-- <div class="p-col-12 p-lg-2">
<label for="txtselectEmp">Employee</label>
</div>
<div class="p-col-12 p-lg-10">
<app-employee-picker (ItemSelected)="GetSelectedEmployee($event)" [setSelectedEmp]="_pickerSelecteEmp"
[isActive]="empPickerActive"></app-employee-picker>
</div>
<div class="p-col-12 p-lg-2">
<label for="txtDepartment">Department</label>
</div>
<div class="p-col-12 p-lg-10">
{{_employee.departmentName}}
</div> -->
<!--<div class="p-col-12 p-lg-2">
<label>Category</label>
</div>
<div class="p-col-12 p-lg-10">
{{_employee.categoryName}}
</div>-->
<!-- <div class="p-col-12 p-lg-2">
<label for="txtDesignation">Designation</label>
</div>
<div class="p-col-12 p-lg-10">
{{_employee.designationName}}
</div> -->
<!-- <div class="p-col-12 p-lg-2">
<label for="txtLocation">Location</label>
</div>
<div class="p-col-12 p-lg-10">
{{_employee.locationName}}
</div> -->
<!--<div class="p-col-12 p-lg-2">
<label for="txtCategory">Category</label>
</div>
<div class="p-col-12 p-lg-10">
{{_employee.categoryName}}
</div>-->
<!-- <div class="p-col-12 p-lg-2">
<label for="txtOrgPosition">Org. Position</label>
</div>
<div class="p-col-12 p-lg-10">
{{(this._CurrentEmpgranogram == null) ? '' : this._CurrentEmpgranogram.positionName}}
</div> -->
<!-- <div class="p-col-12 p-lg-2">
<label for="txtCostCenter">Cost Center</label>
</div>
<div class="p-col-12 p-lg-4">
{{_employee.costcenterName}}
</div> -->
<!-- <div class="p-col-12 p-lg-3">
<label for="txtCostCenter">Confirmation: </label>
</div>
<div class="p-col-12 p-lg-3">
{{(this._employee.isConfirmed == true) ? ' Yes' : ' No'}}
</div> -->
<!-- <div class="p-col-12 p-lg-2">
<label for="txtGrade">Grade</label>
</div>
<div class="p-col-12 p-lg-4">
{{_employee.gradeName}}
</div> -->
<!-- <div class="p-col-12 p-lg-2">
<label for="txtGrade">Status:</label>
</div>
<div class="p-col-12 p-lg-4">
{{_statusString}}
</div> -->
<!-- <div class="p-col-12 p-lg-2">
<label for="txtBasicSalary">Basic Salary</label>
</div>
<div class="p-col-12 p-lg-4">
{{_employee.basicSalary}}
</div> -->
<!-- <div class="p-col-12 p-lg-2">
<label for="txtGrossSalary">Gross Salary</label>
</div>
<div class="p-col-12 p-lg-4">
{{_employee.grossSalary}}
</div> -->
<!-- </div> -->
<!-- <div class="p-grid">
<p-tabView > -->
<!-- <p-tabPanel header="Career History" leftIcon="pi pi-user">
<kendo-grid [data]="_lifecycleHistory"
[pageable]="true"
[sortable]="true"
[reorderable]="true"
[resizable]="true"
[columnMenu]="{ filter: true }"
>
<kendo-grid-column field="effectDate" title="Date" width="20%">
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
{{dataItem.effectDate | date: 'dd-MMM-yyyy'}}
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="description" title="Description" width="80%">
</kendo-grid-column>
</kendo-grid>
</p-tabPanel> -->
<!-- <p-tabPanel header="Salary History" leftIcon="pi pi-user">
<div class="p-grid">
<div class="p-col-12 p-lg-12">
<b>Colored items are represent as arrear, which will be calculated in current month Salary.
you can delete the arrear item, if you don't like to auto arrear calculation'</b>
</div>
</div>
<kendo-grid [data]="gradeSalaries" [rowClass]="rowCallback"> -->
<!--<kendo-grid-column field="effectDate" title="gradeID" width="20%">
</kendo-grid-column>-->
<!-- <kendo-grid-column field="effectdate" title="From Date" width="20%">
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
{{dataItem.effectdate | date: 'dd-MMM-yyyy'}}
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="tilldate" title="Till Date" width="20%">
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
{{dataItem.tilldate | date: 'dd-MMM-yyyy'}}
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="gradeName" title="Grade" width="20%">
</kendo-grid-column>
<kendo-grid-column field="basicsalary" title="Basic Salary" width="15%">
</kendo-grid-column>
<kendo-grid-column field="grosssalary" title="Gross Salary" width="15%">
</kendo-grid-column>
<kendo-grid-command-column title="Action" width="10%">
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
<button kendoGridRemoveCommand (click)="deleteArrearGradeSalary(dataItem.empgradesalaryid)" [disabled]="!isSalaryDeleteActive(dataItem.empgradesalaryid)" style="color:red"><i class="pi pi-power-off"></i></button>
</ng-template>
</kendo-grid-command-column>
</kendo-grid>
</p-tabPanel>
</p-tabView> -->
<!--<div class="p-col-12 p-lg-12">
<label style="font-weight:bold">Career History</label>
</div>
<div class="p-col-12 p-lg-12 card">-->
<!--<label style="font-weight:bold">Employee Career</label>-->
<!--<kendo-grid [data]="_lifecycleHistory"
[pageable]="true"
[sortable]="true"
[reorderable]="true"
[resizable]="true"
[columnMenu]="{ filter: true }">
<kendo-grid-column field="effectDate" title="Date" width="20%">
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
{{dataItem.effectDate | date: 'dd-MMM-yyyy'}}
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="description" title="Description" width="80%">
</kendo-grid-column>
</kendo-grid>
</div>-->
<!-- </div> -->
</div>
<!-- <div class="p-col-12 p-lg-6 ">
<div class="p-grid">
<div class="p-col-12 p-lg-4">
<label for="ddlEvent">Event</label>
</div> -->
<!-- <div class="p-col-12 p-lg-8">
<kendo-dropdownlist class="form-control form-control-sm input-sm"
style="width:100%"
id="ddlEvent"
[data]="_employeeStatus"
[defaultItem]="{ description: 'Select an Event', id: null }"
[textField]="'description'"
[(ngModel)]="_selectedEventID"
[valueField]="'id'"
(selectionChange)="EventselectionChange($event)"
[valuePrimitive]="true">
</kendo-dropdownlist>
</div> -->
<!-- <div class="p-col-12 p-lg-4">
<label for="dtpEffectDate">Effect Date</label>
</div>
<div class="p-col-12 p-lg-8">
<kendo-datepicker id="dtpEffectDate" [format]="'dd-MMM-yyyy'" [(ngModel)]="_effectDate"
style="width:100%"></kendo-datepicker>
</div> -->
<!-- <ng-container *ngIf="this.isshoDistinueDate == true">
<div class="p-col-1">
<input type="checkbox" id="chkDistricontinueAfterMonth" [(ngModel)]="_empLifeCycle.isCurrentMonthIncluded" kendoCheckBox />
</div>
<div class="p-col-11">
<label for="chkDistricontinueAfterMonth">
Discontinue After Current Month Salary (Calculate Salary
till Discontinuation Date)
</label>
</div>
</ng-container> -->
<!-- <ng-container *ngIf="this.isShowConfirmed == true">
<div class="p-col-1">
<input type="checkbox" [(ngModel)]="_empLifeCycle.isConfirm" id="chkConfirmed" kendoCheckBox />
</div>
<div class="p-col-11">
<label for="chkConfirmed">Is Confirmed</label>
</div>
</ng-container> -->
<!-- <ng-container *ngIf="this.isOrganogram == true">
<div class="p-col-12 p-md-6">
<div class="p-col-12">
<label>Organogram</label>
</div>
<div class="p-col-12">
<app-Organogram-picker [VacantNodeSelection]="false" (OnOrgPositionSelected)="organogramselected($event)"></app-Organogram-picker>
</div>
</div>
</ng-container> -->
<!-- <ng-container *ngIf="this.isDesingation == true">
<div class="p-col-12 p-md-6">
<div class="p-col-12">
<label>Designation</label>
</div>
<div class="p-col-12">
<app-dynamic-picker [dynamicPickerView]="_designationPicker"
(onSelectCompleted)="SetFromDescription()"></app-dynamic-picker>
</div>
</div>
</ng-container> -->
<!-- <ng-container *ngIf="this.isDepartment == true">
<div class="p-col-12 p-md-6">
<div class="p-col-12">
<label>Department</label>
</div>
<div class="p-col-12">
<app-dynamic-picker [dynamicPickerView]="_departmentPicker"
(onSelectCompleted)="SetFromDescription()"></app-dynamic-picker>
</div>
</div>
</ng-container> -->
<!-- <ng-container *ngIf="this.isLocation == true">
<div class="p-col-12 p-md-6">
<div class="p-col-12">
<label>Location</label>
</div>
<div class="p-col-12">
<app-dynamic-picker [dynamicPickerView]="_locationPicker"
(onSelectCompleted)="SetFromDescription()"></app-dynamic-picker>
</div>
</div>
</ng-container> -->
<!-- <ng-container *ngIf="this.isGrade == true">
<div class="p-col-12 p-md-6">
<div class="p-col-12">
<label>Grade</label>
</div>
<div class="p-col-12">
<app-dynamic-picker [dynamicPickerView]="_gradePicker"
(onSelectCompleted)="SetFromDescription()"></app-dynamic-picker>
</div>
</div>
</ng-container> -->
<!-- <ng-container *ngIf="this.isCategory == true">
<div class="p-col-12 p-md-6">
<div class="p-col-12">
<label>Category</label>
</div>
<div class="p-col-12">
<app-dynamic-picker [dynamicPickerView]="_categoryPicker"
(onSelectCompleted)="SetFromDescription()"></app-dynamic-picker>
</div>
</div>
</ng-container> -->
<!-- <ng-container *ngIf="this.isCostCenter == true">
<div class="p-col-12 p-md-6">
<div class="p-col-12">
<label>Cost-Center</label>
</div>
<div class="p-col-12">
<app-dynamic-picker [dynamicPickerView]="_costcenterPicker"
(onSelectCompleted)="SetFromDescription()"></app-dynamic-picker>
</div>
</div>
</ng-container> -->
<!-- <ng-container *ngIf="this.isComplain == true">
<div class="p-col-12 p-md-6">
<div class="p-col-12">
<label>Complain</label>
</div>
<div class="p-col-12">
<kendo-dropdownlist class="form-control form-control-sm input-sm"
style="width:100%"
id="ddlComplain"
[data]="_complains"
[defaultItem]="{ description: 'Select an Event', id: null }"
[textField]="'description'"
[valueField]="'id'"
(valueChange)="SetFromDescription()"
[valuePrimitive]="true"
[(ngModel)]="_selectedComplainID">
</kendo-dropdownlist>
</div>
</div>
</ng-container> -->
<!-- <ng-container *ngIf="this.isPunishment == true">
<div class="p-col-12 p-md-6">
<div class="p-col-12">
<label>Punishment</label>
</div>
<div class="p-col-12">
<kendo-dropdownlist class="form-control form-control-sm input-sm"
style="width:100%"
id="ddlPunishment"
[data]="_punishments"
[defaultItem]="{ description: 'Select an Event', id: null }"
[textField]="'description'"
[valueField]="'id'"
(valueChange)="SetFromDescription()"
[valuePrimitive]="true"
[(ngModel)]="_selectedPunishmentID">
</kendo-dropdownlist>
</div>
</div>
</ng-container> -->
<!-- <ng-container *ngIf="this.isPayrollType == true">
<div class="p-col-12 p-md-6">
<div class="p-col-12">
<label>Payroll-Type</label>
</div>
<div class="p-col-12">
<kendo-dropdownlist class="form-control form-control-sm input-sm"
style="width:100%"
id="ddlPayrollType"
[data]="_payrollTypes"
[defaultItem]="{ description: 'Select an Event', id: null }"
[textField]="'description'"
[valueField]="'id'"
(valueChange)="SetFromDescription()"
[valuePrimitive]="true"
[(ngModel)]="_selectedPayrollTypeID">
</kendo-dropdownlist>
</div>
</div>
</ng-container> -->
<!-- <ng-container *ngIf="this.isGrossSalary == true">
<div class="p-col-12 p-md-6">
<div class="p-col-12">
<label>Gross Salary</label>
</div>
<div class="p-col-12">
<kendo-numerictextbox [min]="0" [max]="10000000" [(ngModel)]="_empLifeCycle.grossSalary"
(valueChange)="SetFromDescription('GrossSalary')" [autoCorrect]="autoCorrect">
</kendo-numerictextbox>
</div>
</div>
</ng-container> -->
<!-- <ng-container *ngIf="this.isBasicSalary == true">
<div class="p-col-12 p-md-6">
<div class="p-col-12">
<label>Basic Salary</label>
</div>
<div class="p-col-12">
<kendo-numerictextbox [min]="0" [max]="10000000" [(ngModel)]="_empLifeCycle.basicSalary"
(valueChange)="SetFromDescription()" [autoCorrect]="autoCorrect">
</kendo-numerictextbox>
</div>
</div>
</ng-container> -->
<!-- <div class="p-col-12">
<br />
</div> -->
<!-- <div class="p-col-12 p-lg-2">
<label for="txtDiscription">Discription</label>
</div>
<div class="p-col-12 p-lg-10">
<textarea rows="3" cols="30" pInputTextarea style="width:100%" [(ngModel)]="_sDescription"></textarea>
</div> -->
<!-- <div class="p-col-12 p-lg-2">
<label for="txtRemarks">Remarks</label>
</div>
<div class="p-col-12 p-lg-10">
<textarea rows="2" cols="30" [(ngModel)]="_remarks" pInputTextarea style="width:100%"></textarea>
</div> -->
<!-- </div>
</div> -->
<!-- <div class="p-col-12 p-md-12">
<button kendoButton class="k-button k-primary" (click)="Save()" icon="save" style="width:180px ;float:right">
Save
</button>
</div> -->
</div>