@neap/fairplay-widgetjs

v0.5.2

Published

3 years ago

JS Widget that powers job search

Downloads

0High
0Medium
0Low

neapnic

bberak

Getting Started
Where Am I Hosted?
API - Fairplay Object
getJobAds
submitForm
Examples
Submitting resume
Submitting vacancy
Subscribing to job alerts
Contact us
Getting a free report
Apply to job
Refer a friend
fp.repo.profession.find
fp.on
How To
How To Test Locally?
How To Compile The Code To ES5?
How To Deploy A New Version?
How to send email to specific recipients only?
Annexes
JobAdder - Neap Board Categories

IMPORTANT

This SDK requires vue.js and jQuery.

Getting Started

<!DOCTYPE html>
<html>
<head>
	<title>View JS Test</title>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@neap/fairplay-widgetjs/dist/fairplay.min.css">
</head>
<body>
	<div id="wrapper"></div>
	<script src="https://cdn.jsdelivr.net/npm/@neap/fairplay-widgetjs"></script>
	<script type="text/javascript">
		var fp = new Fairplay({
			// clientId: 'dewdwq',
			mode:'dev' 					// Optional. When set to 'dev', the 'clientId' property is not required.
		})
		fp.createWidget({ 
			el: '#wrapper',
			pageSize: 2,					// Optional. Default is 10. 
			categories: { 					// Optional. This object overides the Neap's JobAdder's Board category names
				5843: 'Internet & Telco', 
				5821: 'Internet & Telco' 
			}
		})

		fp.getJobAds({ where:{ professionId:1123 } }, (err,data) => { console.log(data) })
	</script>
</body>

Where Am I Hosted?

Latest version:

You can access that JS and the default CSS using a specific version as follow:

API - Fairplay Object

To create a Fairplay object, make sure you have your clientId (unless you're using the SDK in dev mode):

var fp = new Fairplay({ 
	clientId:'123456789',   // Required
	businessId: 123,		// Required for certain APIs (e.g., 'submitForm')
	classifications: {	  // Optional. Used to overides out-of-the-box classification names, merge classfications into a single one or find classification to power select boxes.
		professions: [{
			ids:[1,2],
			name: 'IT',
			roles:[{
				ids:[100],
				name: 'Manager'
			}, {
				ids:[200,300,400],
				name: 'Support'
			}]
		}, {
			ids:[3],
			name: 'Human Resources',
			roles:[{
				ids:[110],
				name: 'Head of Recruitment'
			}, {
				ids:[210,310,410],
				name: 'Compliance Manager'
			}]
		}],
		locations: [{
			ids:[10,20,30],
			name: 'Sydney',
			areas:[{
				ids:[1000],
				name: 'CBD'
			}, {
				ids:[2000,3000,4000],
				name: 'Inner West'
			}]
		}, {
			ids:[40],
			name: 'Melbourne',
			areas:[{
				ids:[5000,6000],
				name: 'CBD'
			}, {
				ids:[7000],
				name: 'Coast'
			}]
		}],
		workTypes: [{
			ids:[60],
			name: 'Full-time'
		}, {
			ids:[70],
			name: 'Part-time'
		}, {
			ids:[80,90],
			name: 'Contract'
		}]
	}
});

getJobAds

fp.getJobAds({ where:<Where> }, next:<Function>)

where.ownerId Recruiter's ID.
where.ownerEmail Recruiter's email.
where.jobId
where.professionId
where.roleId
where.locationId
where.areaId
where.workTypeId
where.salary.per
where.salary.lowest
where.salary.highest

JobAd Object

{
	"id": "1265",
	"title": "Junior IT specialist for Hospital systems",
	"summary": "Looking for Junior IT specialist for Hospital systems to help supporting all IT systems in the hospital.",
	"bulletPoints": [
		"Advantageous package",
		"Flexible holidays"
	],
	"created": "2018-12-20T03:22:19Z",
	"owner": null,
	"profession":
	{
		"id": "5843",
		"name": "IT",
		"role":
		{
			"id": "6286",
			"name": "Helpdesk & Support",
			"link": "?professions=IT-5843&roles=Helpdesk%20%26%20Support-6286"
		},
		"link": "?professions=IT-5843"
	},
	"location":
	{
		"id": "6628",
		"name": "Sydney",
		"area":
		{
			"id": "6654",
			"name": "North West & Hills District"
		}
	},
	"workType":
	{
		"id": "5815",
		"name": "Full Time"
	},
	"salary":
	{
		"per": "Hour",
		"lowest": 40,
		"highest": 50,
		"lower": 40,
		"upper": 50,
		"id": 4,
		"description": "$40 - $50 per hour"
	},
	"date": "20/12/2018",
	"link": "/jobs/it/junior-it-specialist-for-hospital-systems/1265",
	"consultant": {

	}
}

submitForm

Examples

fp.submitForm([formDOM:<Element>, event:<Event>, input:<Object>, next:<Function>])

Example 01 - Using a Form Element

document.getElementById('main-form').addEventListener('submit', function(event) {
	fp.submitForm(this,event, (error, res) => {
		if (error) {
			console.log('ERROR')
			console.log(JSON.stringify(error))
		} else {
			console.log(`Status: ${res.status}`)
			console.log(`Data: ${res.data}`)
		}
	})
})

Example 02 - Adding Extra Fields On A Form Element

var formDOM = document.getElementById('main-form')
// Valid offers: 'Submit Resume', 'Submit Vacancy', 'Job Alert', 'Contact Us', 'Free Report', 'Apply Job', 'Refer Friend'
var extraInputs = { offer:'Submit Resume' }

// As you can see we can also omit the 'event' input.
fp.submitForm(formDOM, extraInputs,function(error,res) {
	if (error) {
		console.log('ERROR')
		console.log(JSON.stringify(error))
	} else {
		console.log(`Status: ${res.status}`)
		console.log(`Data: ${res.data}`)
	}
})

Example 03 - Using Explicit Fields With No Form Element

fp.submitForm({ firstName:'Nic', lastName:'Dao' }, function(error,res) {
	if (error) {
		console.log('ERROR')
		console.log(JSON.stringify(error))
	} else {
		console.log(`Status: ${res.status}`)
		console.log(`Data: ${res.data}`)
	}
})

Submitting resume

<form onsubmit="submitResume(this, event)">
	...
</form>

function submitResume(form, event) {
	event.preventDefault();

	// The assumption is that the form contains 'firstname', 'lastname', 'email', 'phone', 'message' and an attachement.
	var payload = {
	    offer: "Submit Resume",
	    type: "candidate",
	    recipients:['[email protected]'], 
	    recipientsOnly: true
	}

	showSubmitting();

	fp.submitForm(form, payload, (error, res) => {
	    hideSubmitting()
	    if (error) {
		var logMsg = error && error.data && error.data.error && typeof(error.data.error) == 'string' ? error.data.error.split('\n')[0] : 'Unknown error'

		console.log(logMsg)
	    } else {
		console.log(`Status: ${res.status}`)
		console.log(`Data: ${res.data}`)

		form.reset();
	    }
	})
}

Submitting vacancy

<form onsubmit="submitResume(this, event)">
	...
</form>

function submitResume(form, event) {
	event.preventDefault();

	// The assumption is that the form contains 'firstname', 'lastname', 'email', 'phone', 'message', 'profession_name', 'job_title' and an attachement.
	var payload = {
	    offer: "Submit Vacancy",
	    type: "client",
	    recipients:['[email protected]'], 
	    recipientsOnly: true
	}

	showSubmitting();

	fp.submitForm(form, payload, (error, res) => {
	    hideSubmitting()
	    if (error) {
		var logMsg = error && error.data && error.data.error && typeof(error.data.error) == 'string' ? error.data.error.split('\n')[0] : 'Unknown error'

		console.log(logMsg)
	    } else {
		console.log(`Status: ${res.status}`)
		console.log(`Data: ${res.data}`)

		form.reset();
	    }
	})
}

Subscribing to job alerts

Contact us

<form onsubmit="contactUs(this, event)">
	...
</form>

function contactUs(form, event) {
	event.preventDefault();

	// The assumption is that the form contains 'firstname', 'lastname', 'email', 'phone', 'message'.
	var payload = {
	    offer: "Contact Us",
	    recipients:['[email protected]'], 
	    recipientsOnly: true
	}

	showSubmitting();

	fp.submitForm(form, payload, (error, res) => {
	    hideSubmitting()
	    if (error) {
		var logMsg = error && error.data && error.data.error && typeof(error.data.error) == 'string' ? error.data.error.split('\n')[0] : 'Unknown error'

		console.log(logMsg)
	    } else {
		console.log(`Status: ${res.status}`)
		console.log(`Data: ${res.data}`)

		form.reset();
	    }
	})
}

Getting a free report

Apply to job

Refer a friend

<form onsubmit="referFriend(this, event)">
	...
</form>

function referFriend(form, event) {
	event.preventDefault();
	var formData = new FormData(form);

	var payload = {
	    offer: "Refer Friend",
	    type: "candidate",
	    firstName: formData.get("from_firstname"),
	    lastName: formData.get("from_lastname"),
	    email: formData.get("from_email"),
	    phone: formData.get("from_phone"),
	    message: formData.get("message"),
	    friend: {
		firstName: formData.get("friend_firstname"),
		lastName: formData.get("friend_lastname"),
		email: formData.get("friend_email"),
		phone: formData.get("friend_phone"),
		profession: formData.get("friend_profession")
	    },
	    recipients:['[email protected]'], 
	    recipientsOnly: true
	}

	showSubmitting();

	fp.submitForm(form, payload, (error, res) => {
	    hideSubmitting()
	    if (error) {
		var message = error && error.data && error.data.error && typeof(error.data.error) == 'string' ? error.data.error.split('\n')[0] : 'Unknown error'

		console.log(message)
	    } else {
		console.log(`Status: ${res.status}`)
		console.log(`Data: ${res.data}`)

		form.reset();
	    }
	})
}

fp.repo.profession.find

fp.repo.profession.find({ where:<Object> })

WARNING: This API only returns values if the optional classifications input was setup during the Fairplay instance creation.

where.id
where.name

var p01 = fp.repo.profession.find({ where:{ id:1 } })
var p02 = fp.repo.profession.find({ where:{ id:'2' } })
var p03 = fp.repo.profession.find({ where:{ id:'1_2' } }) // equivalent to a search by ID where ID is equal to 1 or 2.

profession is not the only type of classification that cna be searched. The others are:

profession
role
location
area
workType

fp.on

fp.on(eventName:<String>, next:<Function>)

As of today, the only supported event is job-alert-created, which is fired after the Create Job Alert button is clicked.

fp.on('job-alert-created', data => {
	console.log(data.profession)	// e.g., { strId: '1_2', name:'Sales' }
	console.log(data.role)			// e.g., { strId: '10', name:'Manager' }
	console.log(data.location)		// e.g., { strId: '10_20', name:'Sydney' }
	console.log(data.area)			// e.g., { strId: '30', name:'CBD' }
	console.log(data.type)			// e.g., { strId: '400', name:'Full-time' }
	console.log(data.consultant)	
	console.log(data.keywords)		// e.g., 'Senior SDR'
	console.log(data.salary)		// e.g., { min:100, max:200, per:'hour' }
})

How To

How To Test Locally?

Simply run this:

npm run dev

This will host 2 version of the widget:

Dev: http://localhost:8080/dev Prod: http://localhost:8080/prod

Prod uses the minified/uglified ES5 version of the code (to see how to compile that code, jump to the section).

How To Compile The Code To ES5?

Simply run:

npm run build

This will produce multiple artefacts under the dist folder.

How To Deploy A New Version?

Make sure the code is linted properly: npm run lint
Build all the artefacts:
```
npm run dev
npm run build
```
Commit your changes: git commit 'your message'
Get the current verison: npm run v
Bump to higher version: npm run rls <the new version>
Publish: npm run push

This will host the minified version to https://cdn.jsdelivr.net/npm/@neap/fairplay-widgetjs. The minified CSS is located at https://cdn.jsdelivr.net/npm/@neap/[email protected]/dist/fairplay.min.css