1172 lines
54 KiB
HTML
1172 lines
54 KiB
HTML
<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"
|
|
></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>
|
|
<div class="p-col-12 p-lg-4"
|
|
[ngStyle]="{ 'color': _statusString === 'Discontinued' ? 'red' : 'inherit' }">
|
|
{{ _statusString }}
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
</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"
|
|
width="13%"
|
|
>
|
|
<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="70%"
|
|
>
|
|
</kendo-grid-column>
|
|
|
|
<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>
|
|
|
|
<kendo-grid-command-column
|
|
title="Action"
|
|
width="7%"
|
|
>
|
|
<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>
|