Skip to content

Instantly share code, notes, and snippets.

@tuldok89

tuldok89/gist.html

Forked from ninoalamokmc/gist:8ab7e9fce67597de945380e5060b64ff
Last active February 20, 2018 04:47
Show Gist options
  • Save tuldok89/d96e1ebfde0308d3ee2b34256bc12c22 to your computer and use it in GitHub Desktop.
Save tuldok89/d96e1ebfde0308d3ee2b34256bc12c22 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gist.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="container">
<h1>{{title}}</h1>
<h3>Job Requirement</h3>
<hr />
<form [formGroup]="jobRequirementForm" (ngSubmit)="save()" #formDir="ngForm" novalidate>
<div class="form-group row">
<div class="col-md-6">
<label class=" control-label" for="clientId">Client</label>
<select class="form-control" formControlName="clientId" id="clientId" required>
<option value="">-- Select Client --</option>
<option *ngFor="let c of clientList" [value]="c.id">{{c.name}}</option>
</select>
<span class="text-danger" *ngIf="jobRequirementForm.hasError('required', 'clientId') && formDir.submitted">
Client is required.
</span>
</div>
<div class="col-md-6">
<label class=" control-label" for="poc">HRBP</label>
<input class="form-control" type="text" formControlName="poc" required>
<span class="text-danger" *ngIf="jobRequirementForm.hasError('required', 'poc') && formDir.submitted">
HRBP is required.
</span>
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label class=" control-label" for="immediateSuperior">Reports To</label>
<input class="form-control" type="text" formControlName="immediateSuperior">
</div>
<div class="col-md-6">
<label class=" control-label" for="immediateSuperiorTitle">Title of Immediate Superior</label>
<input class="form-control" type="text" formControlName="immediateSuperiorTitle">
</div>
</div>
<div class="form-group row">
<div class="col-md-8">
<label class=" control-label" for="name">Job / Position Title</label>
<input class="form-control" type="text" formControlName="name">
<span class="text-danger" *ngIf="jobRequirementForm.hasError('required', 'name') && formDir.submitted">
Job Title is required.
</span>
</div>
<div class="col-md-4">
<label class=" control-label" for="quantity">Quantity</label>
<input class="form-control" formControlName="quantity" value="1" min="1">
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label class=" control-label" for="jobCategoryId">Job Category / Field Of Work</label>
<select class="form-control" formControlName="jobCategoryId">
<option value="">-- Select Category --</option>
<option *ngFor="let c of categories" [value]="c.id">{{c.name}}</option>
</select>
<span class="text-danger" *ngIf="jobRequirementForm.hasError('required', 'jobCategoryId') && formDir.submitted">
Category is required.
</span>
</div>
<div class="col-md-6">
<label class=" control-label" for="jobLevelId">Job Level</label>
<select class="form-control" formControlName="jobLevelId">
<option value="">-- Select Job Level --</option>
<option *ngFor="let c of jobLevels" [value]="c.id">{{c.name}}</option>
</select>
<span class="text-danger" *ngIf="jobRequirementForm.hasError('required', 'jobLevelId') && formDir.submitted">
Job Level is required.
</span>
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label class=" control-label" for="employmentTypeId">Employment Type</label>
<select class="form-control" formControlName="employmentTypeId">
<option value="">-- Select Type of Employment --</option>
<option *ngFor="let c of employmentTypes" [value]="c.employmentTypeId">{{c.name}}</option>
</select>
<span class="text-danger" *ngIf="jobRequirementForm.hasError('required', 'employmentTypeId') && formDir.submitted">
Employment Type is required.
</span>
</div>
<div class="col-md-6">
<label class=" control-label" for="termsOfEmploymentId">Employment Terms</label>
<select class="form-control" formControlName="termsOfEmploymentId">
<option value="">-- Select Terms --</option>
<option *ngFor="let c of employmentTerms" [value]="c.termsOfEmploymentId">{{c.name}}</option>
</select>
<span class="text-danger" *ngIf="jobRequirementForm.hasError('required', 'termsOfEmploymentId') && formDir.submitted">
Employment Terms is required.
</span>
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label class=" control-label" for="educationalAttainment">Educational Attainment</label>
<select class="form-control" formControlName="educationalAttainment">
<option value="">-- Select Education Attainment --</option>
<option value="College">College</option>
<option value="HighSchool">High School</option>
</select>
<span class="text-danger" *ngIf="jobRequirementForm.hasError('required', 'educationalAttainment') && formDir.submitted">
Educational Attainment field is required.
</span>
</div>
<div class="col-md-3">
<label class=" control-label" for="minWorkExperience">Yrs. Exp (Min)</label>
<input class="form-control" formControlName="minWorkExperience" min="1">
</div>
<div class="col-md-3">
<label class=" control-label" for="maxWorkExperience">Yrs. Exp (Max)</label>
<input class="form-control" formControlName="maxWorkExperience" min="2">
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<label class=" control-label" for="degrees">Preferred Field of Study</label>
<textarea class="form-control" type="text" formControlName="degrees" rows="6"></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label class="control-label" for="postingDate">Posting Date</label>
<input type="date" class="form-control" formControlName="postingDate" />
<span class="text-danger" *ngIf="jobRequirementForm.hasError('required', 'postingDate') && formDir.submitted">
Posting Date field is required.
</span>
</div>
<div class="col-md-6">
<label class="control-label" for="dueDate">Due Date</label>
<input type="date" class="form-control" formControlName="dueDate" />
<span class="text-danger" *ngIf="jobRequirementForm.hasError('required', 'dueDate') && formDir.submitted">
Due Date field is required.
</span>
</div>
</div>
<h4>Requirements</h4><hr />
<div class="form-group row">
<div class="col-md-12">
<label class="control-label" for="skills">List of Skills</label>
<textarea class="form-control" formControlName="skills" rows="6"></textarea>
<span class="text-danger" *ngIf="jobRequirementForm.hasError('required', 'skills') && formDir.submitted">
Skill(s) field is required.
</span>
</div>
</div>
<h4>Jop Specifications</h4><hr />
<div class="form-group row">
<div class="col-md-12">
<label class="control-label" for="jobDescription">Job Specifics</label>
<textarea class="form-control" formControlName="jobDescription" rows="6"></textarea>
<span class="text-danger" *ngIf="jobRequirementForm.hasError('required', 'jobDescription') && formDir.submitted">
Job Description field is required.
</span>
</div>
</div>
<h4>Shift &amp; Schedule</h4><hr />
<div class="form-group row">
<div class="col-md-6">
<label class="control-label" for="shiftId">Shift (Schedule)</label>
<select class="form-control" data-val="true" formControlName="shiftId">
<option value="">-- Select Shift / Schedule --</option>
<option *ngFor="let c of shifts" [value]="c.id">{{c.name}}</option>
</select>
<span class="text-danger" *ngIf="jobRequirementForm.hasError('required', 'shiftId') && formDir.submitted">
Shift field is required.
</span>
</div>
<div class="col-md-6">
<label class="control-label" for="workWeekId">Work Week</label>
<select class="form-control" data-val="true" formControlName="workWeekId">
<option value="">-- Select Work Week --</option>
<option *ngFor="let c of workweeks" [value]="c.id">{{c.name}}</option>
</select>
<span class="text-danger" *ngIf="jobRequirementForm.hasError('required', 'workWeekId') && formDir.submitted">
Work Week field is required.
</span>
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label class="control-label" for="workdays">Work Day(s)</label>
<input class="form-control" type="text" formControlName="workdays">
</div>
<div class="col-md-6">
<label class="control-label" for="restdays">Rest Day(s)</label>
<input class="form-control" type="text" formControlName="restdays">
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label class="control-label" for="holidaysToFollowId">Holiday Schedule in Effect</label>
<select class="form-control" data-val="true" formControlName="holidaysToFollowId">
<option value="">-- Select Holiday Schedule in Effect --</option>
<option *ngFor="let c of holidays" [value]="c.id">{{c.name}}</option>
</select>
</div>
</div>
<h4>Benefit(s) </h4><hr />
<div class="form-group row">
<div class="col-md-3">
<label class="control-label" for="overtimePay">
Over Time Pay Eligible
<input type="checkbox" formControlName="overtimePay" />
</label>
</div>
<div class="col-md-3">
<label class="control-label" for="holidayPremiumPay">
Holiday Premium Pay Eligible
<input type="checkbox" formControlName="holidayPremiumPay" />
</label>
</div>
<div class="col-md-3">
<label class="control-label" for="nightDifferential">
Night Differential Pay Eligible
<input type="checkbox" formControlName="nightDiffential" />
</label>
</div>
<div class="col-md-3">
<label class="control-label" for="yearEndShutdown">
Year-end Shutdown Eligible
<input type="checkbox" formControlName="yearEndShutdown" />
</label>
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label class=" control-label" for="hmoCoverage">HMO Coverage</label>
<select class="form-control" type="text" formControlName="hmoCoverage">
<option value="">-- Select HMO Coverage --</option>
<option value="Employee Only">Employee Only</option>
<option value="Employee plus 1 free dependent">Employee plus 1 free dependent</option>
<option value="Employee plus 2 free dependent">Employee plus 2 free dependents</option>
<option value="Other">Other</option>
</select>
</div>
<div class="col-md-6">
<label class=" control-label" for="hmoEntitlement">HMO Entitlement</label>
<select class="form-control" data-val="true" formControlName="hmoEntitlement">
<option value="">-- Select HMO Entitlement Option --</option>
<option value="Upon Regularization">Upon Regularization</option>
<option value="Upon Hire">Upon Hire</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="col-md-3">
<label class=" control-label" for="leaveCredits">Leave Credits</label>
<input class="form-control" type="text" formControlName="leaveCredits" min="1" value="1">
</div>
<div class="col-md-3">
<label class=" control-label" for="numberOfLeaveMonetized">Number of Leaves Monetized</label>
<select class="form-control" data-val="true" formControlName="numberOfLeaveMonetized">
<option value="">-- Select Leave Monetization Option --</option>
<option value=5>5 Leave Credits</option>
<option value=10>10 Leave Credits</option>
<option value=-1>Others</option>
</select>
</div>
<div class="col-md-6">
<label class=" control-label" for="leaveEntitlement">Leave Entitlement</label>
<select class="form-control" data-val="true" formControlName="leaveEntitlement">
<option value="">-- Select Leave Entitlement Option --</option>
<option value="Pro-rated">Pro-rated</option>
<option value="Accrued">Accrued</option>
</select>
</div>
</div>
<h4>Compensation(s)</h4><hr />
<div class="form-group row">
<div class="col-md-3">
<label class=" control-label" for="basicSalary">Basic Salary</label>
<input class="form-control" type="text" formControlName="basicSalary" min="0.00" value="0.00">
</div>
<div class="col-md-3">
<label class=" control-label" for="deMinimis">De Minimis</label>
<input class="form-control" type="text" formControlName="deMinimis" min="0.00" value="0.00">
</div>
<div class="col-md-2">
<label class=" control-label" for="reimbursableAllowance">Re. Allowance</label>
<input class="form-control" type="text" formControlName="reimbursableAllowance" min="0.00" value="0.00">
</div>
<div class="col-md-2">
<label class=" control-label" for="regularizationIncrease">Regularization increase</label>
<input class="form-control" type="text" formControlName="regularizationIncrease" min="0.00" value="0.00">
</div>
<div class="col-md-2">
<label class=" control-label" for="signingBonus">Signing Bonus</label>
<input class="form-control" type="text" formControlName="signingBonus" min="0.00" value="0.00">
</div>
<div class="col-md-12">
<label class=" control-label" for="additional">Additional(s)</label>
<textarea class="form-control" formControlName="additional" rows="6"></textarea>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Save</button>
<button class="btn" (click)="cancel()">Cancel</button>
</div>
</form>
</div>
</body>
</html>
Raw
gist.ts
import { Component, OnInit } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { NgForm, FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { JobRequirementService } from '../../../services/jobrequirements.service';
import { ClientService } from '../../../services/clients.service';
import { ClientData } from '../../client/clientdata';
import { IData } from '../../model/IData';
import { CategoryData } from '../../model/categorydata';
import { GenericService } from '../../../services/generic.service';
@Component({
selector: 'createJobrequirement',
templateUrl: './addJobRequirement.component.html'
})
export class CreateJobRequirement implements OnInit {
jobRequirementForm: FormGroup;
title: string = "Create";
id: string;
errorMessage: any;
public clientList: ClientData[];
public categories: IData[];
public jobLevels: IData[];
public employmentTypes: IData[];
public employmentTerms: IData[];
public shifts: IData[];
public workweeks: IData[];
public holidays: IData[];
public hmoEntitlment: IData[];
constructor(
private _fb: FormBuilder,
private _avRoute: ActivatedRoute,
private _jobRequirementService: JobRequirementService,
private _clientService: ClientService,
private _genericService: GenericService,
private _router: Router) {
if (this._avRoute.snapshot.params["id"]) {
this.id = this._avRoute.snapshot.params["id"];
}
this.jobRequirementForm = this._fb.group({
id: [''],
name: ['', [Validators.required]],
poc: ['', [Validators.required]],
immediateSuperior: ['', [Validators.required]],
immediateSuperiorTitle: ['', [Validators.required]],
educationalAttainment: ['', [Validators.required]],
degrees: '',
minWorkExperience: [1, [Validators.required]],
maxWorkExperience: [2, [Validators.required]],
quantity: [1, [Validators.required]],
postingDate: ['', [Validators.required]],
dueDate: ['', [Validators.required]],
workdays: '',
restdays: '',
skills: ['', [Validators.required]],
jobDescription: ['', [Validators.required]],
clientId: ['', [Validators.required]],
jobLevelId: ['', [Validators.required]],
jobCategoryId: ['', [Validators.required]],
shiftId: ['', [Validators.required]],
workWeekId: ['', [Validators.required]],
holidaysToFollowId: ['', [Validators.required]],
employmentTypeId: ['', [Validators.required]],
termsOfEmploymentId: ['', [Validators.required]],
overtimePay: true,
holidayPremiumPay: true,
nightDiffential: true,
leaveEntitlement: '',
leaveCredits: '',
numberOfLeaveMonetized: '',
hmoEntitlement: '',
hmoCoverage: '',
yearEndShutdown: true,
basicSalary: 0.00,
deMinimis: 0.00,
reimbursableAllowance: 0.00,
regularizationIncrease: 0.00,
signingBonus: 0.00,
additional: ''
})
}
ngOnInit() {
if (!(this.id == '' || this.id == undefined || this.id == 'undefined' || this.id == '00000000-0000-0000-0000-000000000000')){
this.title = "Edit";
this._jobRequirementService.getJobRequirementById(this.id)
.subscribe(resp => this.jobRequirementForm.setValue(resp)
, error => this.errorMessage = error);
}
this._clientService.getClients().subscribe(data => this.clientList = data);
this._genericService.getCategories().subscribe(data => this.categories = data);
this._genericService.getJobLevels().subscribe(data => this.jobLevels = data);
this._genericService.getEmploymentTypes().subscribe(data => this.employmentTypes = data);
this._genericService.getEmploymentTerms().subscribe(data => this.employmentTerms = data);
this._genericService.getShifts().subscribe(data => this.shifts = data);
this._genericService.getWorkWeeks().subscribe(data => this.workweeks = data);
this._genericService.getHolidayss().subscribe(data => this.holidays = data);
}
save() {
if (!this.jobRequirementForm.valid) {
return;
}
if (this.title == "Create") {
this._jobRequirementService.saveJobRequirement(this.jobRequirementForm.value)
.subscribe((data) => {
this._router.navigate(['/fetch-jobrequirement']);
}, error => this.errorMessage = error)
}
else if (this.title == "Edit") {
this._jobRequirementService.updateJobRequirement(this.jobRequirementForm.value)
.subscribe((data) => {
this._router.navigate(['/fetch-jobrequirement']);
}, error => this.errorMessage = error)
}
}
cancel() {
this._router.navigate(['/fetch-jobrequirement']);
}
get name() { return this.jobRequirementForm.get('name'); }
get poc() { return this.jobRequirementForm.get('poc'); }
get immediateSuperior() { return this.jobRequirementForm.get('immediateSuperior'); }
get immediateSuperiorTitle() { return this.jobRequirementForm.get('immediateSuperiorTitle'); }
get educationalAttainment() { return this.jobRequirementForm.get('educationalAttainment'); }
get degrees() { return this.jobRequirementForm.get('degrees'); }
get minWorkExperience() { return this.jobRequirementForm.get('minWorkExperience'); }
get maxWorkExperience() { return this.jobRequirementForm.get('maxWorkExperience'); }
get quantity() { return this.jobRequirementForm.get('quantity'); }
get postingDate() { return this.jobRequirementForm.get('postingDate'); }
get dueDate() { return this.jobRequirementForm.get('dueDate'); }
get workdays() { return this.jobRequirementForm.get('workdays'); }
get restdays() { return this.jobRequirementForm.get('restdays'); }
get skills() { return this.jobRequirementForm.get('skills'); }
get jobDescription() { return this.jobRequirementForm.get('jobDescription'); }
get clientId() { return this.jobRequirementForm.get('clientId'); }
get jobLevelId() { return this.jobRequirementForm.get('jobLevelId'); }
get jobCategoryId() { return this.jobRequirementForm.get('jobCategoryId'); }
get shiftId() { return this.jobRequirementForm.get('shiftId'); }
get workWeekId() { return this.jobRequirementForm.get('workWeekId'); }
get holidaysToFollowId() { return this.jobRequirementForm.get('holidaysToFollowId'); }
get employmentTypeId() { return this.jobRequirementForm.get('employmentTypeId'); }
get termsOfEmploymentId() { return this.jobRequirementForm.get('termsOfEmploymentId'); }
get overtimePay() { return this.jobRequirementForm.get('overtimePay'); }
get holidayPremiumPay() { return this.jobRequirementForm.get('holidayPremiumPay'); }
get nightDifferential() { return this.jobRequirementForm.get('nightDifferential'); }
get leaveEntitlement() { return this.jobRequirementForm.get('leaveEntitlement'); }
get leaveCredits() { return this.jobRequirementForm.get('leaveCredits'); }
get numberOfLeaveMonetized() { return this.jobRequirementForm.get('numberOfLeaveMonetized'); }
get hmoEntitlement() { return this.jobRequirementForm.get('hmoEntitlement'); }
get hmoCoverage() { return this.jobRequirementForm.get('hmoCoverage'); }
get yearEndShutdown() { return this.jobRequirementForm.get('yearEndShutdown'); }
get basicSalary() { return this.jobRequirementForm.get('basicSalary'); }
get deMinimis() { return this.jobRequirementForm.get('deMinimis'); }
get reimbursableAllowance() { return this.jobRequirementForm.get('reimbursableAllowance'); }
get regularizationIncrease() { return this.jobRequirementForm.get('regularizationIncrease'); }
get signingBonus() { return this.jobRequirementForm.get('signingBonus'); }
get additional() { return this.jobRequirementForm.get('additional'); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment