250 lines
14 KiB
HTML
250 lines
14 KiB
HTML
<app-loading-panel></app-loading-panel>
|
|
<form [formGroup]="employeeForm">
|
|
<div class="p-grid form-group">
|
|
<div class="p-col-12 p-md-12 p-lg-12">
|
|
<div class="p-grid card" style="margin:auto">
|
|
<!-- <div class="p-col-2" style="margin:auto;" align="right">
|
|
<input type="checkbox" formControlName="isNew" (change)="checkValue(newEmployee)"
|
|
[(ngModel)]="newEmployee" id="chkIsnew" kendoCheckBox />
|
|
</div> -->
|
|
<div class="p-col-12 p-md-12 p-lg-6" style="margin:auto;" align="center">
|
|
<input type="checkbox" formControlName="isNew" (change)="checkValue(newEmployee)"
|
|
[(ngModel)]="newEmployee" id="chkIsnew" kendoCheckBox />
|
|
<label for="chkIsnew" style="margin-left: 10px; font-weight: bold; color: red;">Click on
|
|
Checkbox to Create New Employees</label>
|
|
</div>
|
|
<div class="p-col-12 p-md-12 p-lg-6" style="margin:auto;">
|
|
<app-employee-picker for="chkIsnew" id="idself" [isActive]="!newEmployee"
|
|
[setSelectedEmp]="selectedEmployee"
|
|
(ItemSelected)="GetSelectedEmployee($event)"></app-employee-picker>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-col-12 p-md-12 p-lg-12">
|
|
<div class="p-grid">
|
|
<div class="p-col-12 p-md-12 p-lg-6">
|
|
|
|
<div class="p-grid card" style="margin:auto">
|
|
<div class="p-col-12 p-md-6 p-lg-4" style="margin:auto">
|
|
<label>Employee Id </label>
|
|
</div>
|
|
<div class="p-col-12 p-md-6 p-lg-8 form-control-lg ">
|
|
<input formControlName="employeeId" [readonly]="!newEmployee"
|
|
[(ngModel)]="employee.employeeNo" type="text" style="width:100%" pInputText required>
|
|
</div>
|
|
<div class="p-col-12 p-md-6 p-lg-4" style="margin:auto">
|
|
<label for="txtempName">Name </label>
|
|
</div>
|
|
<div class="p-col-12 p-md-6 p-lg-8 form-control-lg ">
|
|
<input id="txtempName" formControlName="name" [(ngModel)]="employee.name" type="text"
|
|
style="width:100%" pInputText required>
|
|
</div>
|
|
<div class="p-col-12 p-md-6 p-lg-4" style="margin:auto">
|
|
<label for="txtMobileNo">Mobile No</label>
|
|
</div>
|
|
<div class="p-col-12 p-md-6 p-lg-8 ">
|
|
<input id="txtMobileNo" formControlName="mobileNo" [(ngModel)]="employee.mobileNo"
|
|
type="text" style="width:100%" pInputText>
|
|
</div>
|
|
|
|
<div class="p-col-12 p-md-6 p-lg-4" style="margin:auto">
|
|
<label for="txtMailAddress">E-mail Address</label>
|
|
</div>
|
|
<div class="p-col-12 p-md-6 p-lg-8 form-control-lg form-control">
|
|
<input id="txtMailAddress" type="text" style="width:100%"
|
|
[(ngModel)]="employee.emailAddress" formControlName="emailAddress" pInputText required>
|
|
</div>
|
|
|
|
<div class="p-col-12 p-md-6 p-lg-4" style="margin:auto">
|
|
<label for="idlinemanager">Line Manager</label>
|
|
</div>
|
|
<div class="p-col-12 p-md-6 p-lg-8 form-control-lg form-control">
|
|
<app-employee-picker id="idlinemanager" [setSelectedEmp]="empLineManager"
|
|
(ItemSelected)="LineManagerSelected($event)"></app-employee-picker>
|
|
</div>
|
|
|
|
<div class="p-col-12 p-md-6 p-lg-4" style="margin:auto">
|
|
<label for="dtpDateOfBirth">Date of Birth</label>
|
|
</div>
|
|
<div class="p-col-12 p-md-6 p-lg-8 form-control-lg">
|
|
<kendo-datepicker id="dtpDateOfBirth" formControlName="dateOfBirth"
|
|
[(ngModel)]="employee.birthDate" [format]="'dd-MMM-yyyy'"
|
|
style="width:100%"></kendo-datepicker>
|
|
</div>
|
|
|
|
<div class="p-col-12 p-md-6 p-lg-4" style="margin:auto">
|
|
<label for="txtfatherName">Father's Name</label>
|
|
</div>
|
|
<div class="p-col-12 p-md-6 p-lg-8 form-control-lg">
|
|
<input id="txtfatherName" formControlName="fatherName" [(ngModel)]="employee.fatherName" type="text"
|
|
style="width:100%" pInputText>
|
|
</div>
|
|
|
|
<div class="p-col-12 p-md-6 p-lg-4" style="margin:auto">
|
|
<label for="txttinNo">TIN</label>
|
|
</div>
|
|
<div class="p-col-12 p-md-6 p-lg-8 form-control-lg">
|
|
<input id="txttinNo" formControlName="tinNo" [(ngModel)]="employee.tinNo" type="text"
|
|
style="width:100%" pInputText>
|
|
</div>
|
|
|
|
<div class="p-col-12 p-md-6 p-lg-4" style="height: 43px;">
|
|
<label for="chkIsOTEligible">Eligible for OT</label>
|
|
</div>
|
|
<div class="p-col-12 p-md-6 p-lg-2 form-control-lg">
|
|
<input type="checkbox" formControlName="isOTEligible" [(ngModel)]="employee.isEligibleOT"
|
|
id="chkIsOTEligible" kendoCheckBox />
|
|
|
|
</div>
|
|
<div class="p-col-12 p-md-6 p-lg-4" style="height: 43px;">
|
|
<label for="chkIsFixedLocation">Fixed Location /
|
|
Nearby</label>
|
|
</div>
|
|
<div class="p-col-12 p-md-6 p-lg-2 form-control-lg">
|
|
<input type="checkbox" formControlName="IsFixedLocation"
|
|
[(ngModel)]="employee.isFixedLocation" id="chkIsFixedLocation" kendoCheckBox />
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="p-col-12 p-md-12 p-lg-6">
|
|
|
|
<div class="p-grid card" style="margin:auto">
|
|
<div class="p-col-12 p-md-6 p-lg-4" style="margin:auto">
|
|
<label for="ddlReligion">Religion </label>
|
|
</div>
|
|
<div class="p-col-12 p-md-6 p-lg-8 form-control-lg" style="height: 46px;">
|
|
<kendo-dropdownlist class="form-control form-control-sm input-sm" style="width:100%"
|
|
id="ddlReligion" [data]="ddlreligions" [(ngModel)]="selectedReligionID"
|
|
[defaultItem]="{ name: 'Select Religion', value: null }" [textField]="'name'"
|
|
[valueField]="'id'" [valuePrimitive]="true" formControlName="religion">
|
|
</kendo-dropdownlist>
|
|
</div>
|
|
|
|
<div class="p-col-12 p-md-6 p-lg-4" style="margin:auto">
|
|
<label for="ddlGender">Gender </label>
|
|
</div>
|
|
<div class="p-col-12 p-md-6 p-lg-8 form-control-lg" style="height: 46px;">
|
|
<kendo-dropdownlist class="form-control form-control-sm input-sm" style="width:100%"
|
|
id="ddlGender" [data]="ddlgender" [(ngModel)]="selectedGender"
|
|
[defaultItem]="{ name: 'Select Gender', value: null }" [textField]="'name'"
|
|
[valueField]="'value'" [valuePrimitive]="true" formControlName="gender">
|
|
</kendo-dropdownlist>
|
|
</div>
|
|
|
|
<div class="p-col-12 p-md-6 p-lg-4" style="margin:auto">
|
|
<label for="ddlCategory">Category </label>
|
|
</div>
|
|
<div class="p-col-12 p-md-6 p-lg-8 form-control-lg" style="height: 46px;">
|
|
<kendo-dropdownlist class="form-control form-control-sm input-sm" style="width:100%"
|
|
id="idddlCategory" [data]="ddlcategories" [(ngModel)]="selectedCategoryid"
|
|
[defaultItem]="{ name: 'Select Category', value: null }" [textField]="'name'"
|
|
[valueField]="'id'" [valuePrimitive]="true" formControlName="category">
|
|
</kendo-dropdownlist>
|
|
</div>
|
|
|
|
<div class="p-col-12 p-md-6 p-lg-4" style="margin:auto">
|
|
<label for="ddlMaritalStatus">Marital Status</label>
|
|
</div>
|
|
<div class="p-col-12 p-md-6 p-lg-8 form-control-lg" style="height: 46px;">
|
|
<kendo-dropdownlist class="form-control form-control-sm input-sm" style="width:100%"
|
|
id="idddlMaritalStatus" [data]="ddlmaritalStatus" [(ngModel)]="selectedMaritalStatus"
|
|
[defaultItem]="{ name: 'Select Status', value: 0 }" [textField]="'name'"
|
|
[valueField]="'value'" [valuePrimitive]="true" formControlName="maritalStatus">
|
|
</kendo-dropdownlist>
|
|
</div>
|
|
|
|
<!--<div class="p-col-12 p-md-6 p-lg-4" style="margin:auto">
|
|
<label for="ddlPersonType">Person Type</label>
|
|
</div>
|
|
|
|
<div class="p-col-12 p-md-6 p-lg-8 form-control-lg" style="height: 46px;">
|
|
<kendo-dropdownlist class="form-control form-control-sm input-sm" style="width:100%"
|
|
id="idddlPersonType" [data]="ddlpersonType" [(ngModel)]="employee.personType"
|
|
[defaultItem]="{ name: 'Select Person Type', value: 0 }" [textField]="'name'"
|
|
[valueField]="'value'" [valuePrimitive]="true" formControlName="personType">
|
|
</kendo-dropdownlist>
|
|
</div>-->
|
|
<div class="p-col-12 p-md-6 p-lg-4" style="margin:auto">
|
|
<label>Payment Mode</label>
|
|
</div>
|
|
<div class="p-col-12 p-md-6 p-lg-8 form-control-lg" style="height: 46px;">
|
|
<kendo-dropdownlist class="form-control form-control-sm input-sm" style="width:100%"
|
|
[data]="ddlpaymentMode" [(ngModel)]="employee.paymentMode"
|
|
[defaultItem]="{ name: 'Select a Payment Mode', value: null }" [textField]="'name'"
|
|
[valueField]="'value'" [valuePrimitive]="true" formControlName="paymentMode">
|
|
</kendo-dropdownlist>
|
|
</div>
|
|
|
|
<div class="p-col-12 p-md-6 p-lg-4" style="margin:auto">
|
|
|
|
<label for="chkendofContractDate">Last Salary Date</label>
|
|
</div>
|
|
<div class="p-col-1 p-md-6 p-lg-2">
|
|
<input type="checkbox" formControlName="chkEndofContactDate"
|
|
[(ngModel)]="chkEndofContactDate" (change)="LastSalarycheckValue()" kendoCheckBox />
|
|
</div>
|
|
|
|
<div class="p-col-1 p-md-6 p-lg-6">
|
|
<kendo-datepicker id="dtpLastSalaryCalculationDate"
|
|
formControlName="lastSalaryCalculationDay" [(ngModel)]="employee.endOfContractDate"
|
|
[format]="'dd-MMM-yyyy'"
|
|
placeholder="Day-Month-Year">
|
|
</kendo-datepicker>
|
|
</div>
|
|
|
|
<div class="p-col-12 p-md-6 p-lg-4" style="margin:auto">
|
|
<label for="dtpDateOfJoining">Date of Joining</label>
|
|
</div>
|
|
<div class="p-col-12 p-md-6 p-lg-8 form-control-lg">
|
|
<kendo-datepicker id="dtpDateOfJoining" formControlName="dateOfJoining"
|
|
[(ngModel)]="employee.joiningDate" [format]="'dd-MMM-yyyy'"
|
|
style="width:100%"></kendo-datepicker>
|
|
</div>
|
|
|
|
<div class="p-col-12 p-md-6 p-lg-4" style="margin:auto">
|
|
<label for="dtpEndofContract">End of Contract</label>
|
|
</div>
|
|
<div class="p-col-12 p-md-6 p-lg-8 form-control-lg">
|
|
<kendo-datepicker id="dtpEndofContract" formControlName="endOfContractDate"
|
|
[(ngModel)]="employee.endOfContractDate" [format]="'dd-MMM-yyyy'"
|
|
style="width:100%"></kendo-datepicker>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="p-grid card" style="margin: auto;">
|
|
|
|
<div class="p-col-6" align="left">
|
|
<button icon="plus" kendoButton [primary]="true" (click)="viewBankAccount()" [disabled]="isBankAccountActive">
|
|
Employee Bank Account
|
|
</button>
|
|
</div>
|
|
<div class="p-col-6" align="right">
|
|
<button icon="save" kendoButton [primary]="true" (click)="saveEmployee()">
|
|
Save
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="card">
|
|
<div class="blur-background" *ngIf="showBankAccount"></div>
|
|
<kendo-dialog *ngIf="showBankAccount" (close)="onClose()" [width]="1000" [maxHeight]="500">
|
|
<kendo-dialog-titlebar>
|
|
Employee Bank Account Entry
|
|
</kendo-dialog-titlebar>
|
|
<app-employee-bank-account-entry [setSelectedEmp]="selectedEmployee" (saveHandler)="saveCompleted($event)">
|
|
</app-employee-bank-account-entry>
|
|
</kendo-dialog>
|
|
</div>
|