491 lines
18 KiB
HTML
491 lines
18 KiB
HTML
{% extends 'candidate/application_form_component.html' %} {% block content %}
|
|
{% load static %} {% load i18n %} {{form.load}}
|
|
<div id="main">
|
|
<div class="oh-wrapper mt-5">
|
|
<div class="row">
|
|
<div class="col-12 col-md-6 col-lg-6">
|
|
<div class="oh-onboarding-card oh-onboarding-card--top-bar w-100">
|
|
<div
|
|
class="oh-onboarding-card__container oh-onboarding-card__container--wide"
|
|
>
|
|
<form action="" method="post" enctype="multipart/form-data">
|
|
{% if messages %}
|
|
<div class="oh-alert-container">
|
|
{% for message in messages %}
|
|
<div class="oh-alert oh-alert--animated {{message.tags}}">
|
|
{{ message }}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %} {% csrf_token %}
|
|
<div class="row">
|
|
<div
|
|
class="oh-modal"
|
|
id="uploadPhotoModal"
|
|
role="dialog"
|
|
aria-labelledby="uploadPhotoModal"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="oh-modal__dialog">
|
|
<div class="oh-modal__dialog-header">
|
|
<span
|
|
class="oh-modal__dialog-title"
|
|
id="uploadPhotoModalLabel"
|
|
>Upload Photo</span
|
|
>
|
|
<button
|
|
type="button"
|
|
onclick="event.stopPropagation()"
|
|
class="oh-modal__close"
|
|
aria-label="Close"
|
|
>
|
|
<ion-icon name="close-outline"></ion-icon>
|
|
</button>
|
|
</div>
|
|
<div class="oh-modal__dialog-body">
|
|
<div class="oh-profile-section__image-container">
|
|
<div class="oh-profile-section__modal-avatar">
|
|
<img
|
|
src="{% static "/images/ui/user.jpg" %}"
|
|
class="oh-profile-section__modal-image oh-upload-photo"
|
|
alt="User Photo"
|
|
/>
|
|
</div>
|
|
<input
|
|
type="file"
|
|
id="photo"
|
|
name="profile"
|
|
class="oh-input oh-input--file oh-input--file-sm mt-4 oh-upload-input"
|
|
accept=".jpg, .jpeg, .png"
|
|
data-target=".oh-upload-photo"
|
|
/>
|
|
<div
|
|
class="d-flex justify-content-between w-100 align-items-center mt-4"
|
|
>
|
|
<button
|
|
class="oh-btn oh-btn--light-danger mr-1 oh-remove-image"
|
|
data-target=".oh-upload-photo"
|
|
>
|
|
<ion-icon
|
|
class="me-1"
|
|
name="trash-outline"
|
|
></ion-icon
|
|
>{% trans "Delete image" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-2 col-lg-2">
|
|
<div
|
|
class="oh-profile-section__edit-photo me-4 mb-3"
|
|
data-toggle="oh-modal-toggle"
|
|
data-target="#uploadPhotoModal"
|
|
>
|
|
<img
|
|
src="{% static "/images/ui/user.jpg" %}"
|
|
class="oh-profile-section__avatar oh-upload-photo"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
{{form.profile.errors}}
|
|
{% comment %} <ul id="error-list" class="errorlist" style="display: none">
|
|
<li>{% trans "Please select profile image" %}.</li>
|
|
</ul> {% endcomment %}
|
|
<div class="col-sm-12 col-md-12 col-lg-12">
|
|
<div class="oh-input-group">
|
|
<label class="oh-label required-star" for="name"
|
|
>{% trans "Name" %}</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
required
|
|
class="oh-input w-100"
|
|
placeholder="e.g. Jane Doe"
|
|
/>
|
|
{{form.name.errrors}}
|
|
</div>
|
|
</div>
|
|
|
|
{% if not request.GET.recruitmentId %}
|
|
<div class="col-sm-12 col-md-6 col-lg-6">
|
|
<div class="oh-input-group">
|
|
<label class="oh-label required-star" for="recuitment"
|
|
> {% trans "Open Recruitment" %}
|
|
</label>
|
|
{{form.recruitment_id}} {{form.recruitment_id.errors}}
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-lg-6">
|
|
<div class="oh-input-group">
|
|
<label class="oh-label required-star" for="recuitment"
|
|
>{% trans "Choose Open Position" %}
|
|
</label>
|
|
{{form.job_position_id}} {{form.job_position_id.errors}}
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<input
|
|
type="text"
|
|
name="recruitment_id"
|
|
hidden
|
|
value="{{recruitment.id}}"
|
|
/>
|
|
<div class="oh-input-group">
|
|
<label class="oh-label" for="recuitment"
|
|
>{% trans "Choose Job Position" %}
|
|
</label>
|
|
|
|
<select
|
|
name="job_position_id"
|
|
class="oh-select oh-select2 w-100"
|
|
style="height: 50px"
|
|
>
|
|
{% for job in recruitment.open_positions.all %}
|
|
<option value="{{job.id}}">{{job.job_position}}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="col-sm-12 col-md-6 col-lg-6">
|
|
<div class="oh-input-group">
|
|
<label class="oh-label required-star" for="email"
|
|
>{% trans "Email" %}</label
|
|
>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
class="oh-input w-100"
|
|
required
|
|
placeholder="e.g. janedoe@example.com"
|
|
/>
|
|
</div>
|
|
{{form.email.errors}}
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-6 col-lg-6">
|
|
<div class="oh-input-group">
|
|
<label class="oh-label required-star" for="phone"
|
|
>{% trans "Phone" %}</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="phone"
|
|
class="oh-input w-100"
|
|
name="mobile"
|
|
placeholder="e.g. +1 245 999 999"
|
|
/>
|
|
{{form.mobile.errors}}
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-lg-6">
|
|
<div class="oh-input-group">
|
|
<label class="oh-label" for="portfolio"
|
|
>{% trans "Portfolio" %}</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="portfolio"
|
|
name="portfolio"
|
|
class="oh-input w-100"
|
|
placeholder="e.g. https://www.linktoportfolio.com/"
|
|
/>
|
|
{{form.portfolio.errors}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-12 col-lg-6">
|
|
<div class="oh-input-group">
|
|
<label class="oh-label" for="resume"
|
|
>{% trans "Resume" %}</label
|
|
>
|
|
{% if resume.file %}
|
|
<p>Currently: <a href="{{ resume.file.url }}" target="_blank">{{ resume.file.name }}</a></p>
|
|
<p>Change: </p>
|
|
<input type="hidden" id="matching_resume" data-value = "{{ resume.file.url }}" data-id="{{resume.id}}" name="initial_resume" value="{{ resume.file.url }}">
|
|
{% endif %}
|
|
<input
|
|
type="file"
|
|
id="id_resume"
|
|
name="resume"
|
|
accept=".pdf"
|
|
class="oh-input w-100 px-0"
|
|
/>
|
|
{{form.resume.errors}}
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-lg-6">
|
|
<div class="oh-input-group">
|
|
<label class="oh-label required-star" for="gender"
|
|
>{% trans "Gender" %}</label
|
|
>
|
|
{{form.gender}} {{form.gender.errros}}
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-lg-12">
|
|
<div class="oh-input-group">
|
|
<label class="oh-label required-star" for="address"
|
|
>{% trans "Address" %}</label
|
|
>
|
|
<textarea
|
|
id="address"
|
|
name="address"
|
|
required
|
|
class="oh-input oh-input--textarea w-100"
|
|
></textarea>
|
|
{{form.address.errors}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-6 col-lg-6">
|
|
<div class="oh-input-group">
|
|
<label class="oh-label required-star" for="id_country"
|
|
>{% trans "Country" %}</label
|
|
>
|
|
<select
|
|
name="country"
|
|
id="id_country"
|
|
required
|
|
class="oh-select oh-select-2"
|
|
></select>
|
|
{{form.country.errors}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-6 col-lg-6">
|
|
<div class="oh-input-group">
|
|
<label class="oh-label required-star" for="id_state"
|
|
>{% trans "State" %}</label
|
|
>
|
|
<select
|
|
name="state"
|
|
required
|
|
id="id_state"
|
|
class="oh-select oh-select-2"
|
|
></select>
|
|
{{form.state.errors}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-6 col-lg-6">
|
|
<div class="oh-input-group">
|
|
<label class="oh-label required-star" for="city"
|
|
>{% trans "City" %}</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="city"
|
|
required
|
|
name="city"
|
|
class="oh-input w-100"
|
|
placeholder="e.g. Kerala"
|
|
/>
|
|
{{form.city.errors}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-6 col-lg-6">
|
|
<div class="oh-input-group">
|
|
<label class="oh-label required-star" for="zip"
|
|
>{% trans "Zip Code" %}</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="zip"
|
|
required
|
|
name="zip"
|
|
class="oh-input w-100"
|
|
placeholder="e.g. 611 293"
|
|
/>
|
|
{{form.zip.errors}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-12 col-lg-12">
|
|
<button
|
|
type="submit"
|
|
class="oh-btn mt-4 oh-btn--secondary w-100 mb-4"
|
|
onclick="validateForm(event)"
|
|
>
|
|
<ion-icon name="checkmark-outline" class="me-2"></ion-icon>
|
|
{% trans "Apply" %}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="col-sm-12 col-md-12 col-lg-12">
|
|
<p class="small text-muted text-center">
|
|
© {% now 'Y' %} {{white_label_company_name}}. All rights resevered.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% if resume %}
|
|
<div class="col-12 col-md-6 col-lg-6 sticky">
|
|
<iframe style="width: 100%;height:90vh" height="100" src="{{ resume.file.url }}" frameborder="0"></iframe>
|
|
|
|
</div>
|
|
{% else %}
|
|
<div class="col-12 col-md-6 col-lg-6">
|
|
<div class="oh-onboarding-preview oh-onboarding-card--top-bar w-100">
|
|
{{recruitment.description|safe}}
|
|
<div
|
|
class="oh-onboarding-preview__content"
|
|
id="recruitmentInfoBody"
|
|
style="border-bottom: solid rgba(128, 128, 128, 0.281) 1px"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
{% include 'country.js' %}
|
|
{% include 'select2.js' %}
|
|
var resume = "{{resume.file.url}}"
|
|
{% if resume %}
|
|
$("#resume").val(resume)
|
|
{% endif %}
|
|
var description = `{{form.instance.recruitment_id.description|safe}}`
|
|
var formattedDescription = description.replace(/\n/g, "<br>");
|
|
$("#recruitmentInfoBody").html(formattedDescription);
|
|
|
|
$('form label').each(function() {
|
|
var text = $(this).text();
|
|
if (text.startsWith('*')) {
|
|
$(this).html('<strong>' + text + '</strong>');
|
|
}
|
|
});
|
|
function validateForm(event) {
|
|
var fileInput = document.getElementById("photo");
|
|
var errorList = document.getElementById("error-list");
|
|
{% if not perms.recruitment.add_candidate %}
|
|
if (!fileInput.value) {
|
|
errorList.scrollIntoView({ behavior: "smooth", block: "center" });
|
|
errorList.style.display = "block"; // Show error message
|
|
} else {
|
|
errorList.style.display = "none"; // Hide error message
|
|
}
|
|
{% endif %}
|
|
}
|
|
$(document).ready(function(){
|
|
function getCookie(name) {
|
|
let cookieValue = null;
|
|
if (document.cookie && document.cookie !== "") {
|
|
const cookies = document.cookie.split(";");
|
|
for (let i = 0; i < cookies.length; i++) {
|
|
const cookie = cookies[i].trim();
|
|
// Does this cookie string begin with the name we want?
|
|
if (cookie.substring(0, name.length + 1) === name + "=") {
|
|
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
return cookieValue;
|
|
}
|
|
|
|
function setIfEmpty(selector, value) {
|
|
if ($(selector).val() === "" ){
|
|
$(selector).val(value);
|
|
$(selector).change();
|
|
|
|
$("[name=country]").parent().find("span").remove()
|
|
$("[name=country]").select2()
|
|
}
|
|
}
|
|
|
|
|
|
$("#matching_resume").on("click", function(){
|
|
var file = $(this).data("value");
|
|
var resume_id = $(this).data("id");
|
|
|
|
$.ajax({
|
|
url: "{% url 'matching-resume-completion' %}",
|
|
type: 'GET',
|
|
data: {
|
|
"resume_id": resume_id,
|
|
"file":file
|
|
},
|
|
success: function(response) {
|
|
var full_name = response.full_name;
|
|
var address = response.address;
|
|
var country = response.country;
|
|
var state = response.state;
|
|
var phone = response.phone_number;
|
|
var dob = response.dob;
|
|
var email = response.email_id;
|
|
var zip = response.zip;
|
|
|
|
setIfEmpty("[name='name']", full_name);
|
|
setIfEmpty("[name='email']", email);
|
|
setIfEmpty("[name='mobile']", phone);
|
|
setIfEmpty("[name='address']", address);
|
|
setIfEmpty("[name='country']", country);
|
|
setIfEmpty("[name='state']", state);
|
|
setIfEmpty("[name='zip']", zip);
|
|
$("[name='dob']").val(dob);
|
|
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error('File upload failed: ', status, error);
|
|
}
|
|
});
|
|
})
|
|
|
|
$("#matching_resume").click()
|
|
|
|
$("[name='resume']").on("change", function(){
|
|
var formData = new FormData();
|
|
var file = this.files[0];
|
|
formData.append('resume', file);
|
|
|
|
$.ajax({
|
|
url: "{% url 'resume-completion' %}",
|
|
type: 'POST',
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
headers: {
|
|
'X-CSRFToken': getCookie("csrftoken")
|
|
},
|
|
success: function(response) {
|
|
|
|
var full_name = response.full_name;
|
|
var address = response.address;
|
|
var country = response.country;
|
|
var state = response.state;
|
|
var phone = response.phone_number;
|
|
var dob = response.dob;
|
|
var email = response.email_id;
|
|
var zip = response.zip;
|
|
|
|
setIfEmpty("[name='name']", full_name);
|
|
setIfEmpty("[name='email']", email);
|
|
setIfEmpty("[name='mobile']", phone);
|
|
setIfEmpty("[name='address']", address);
|
|
setIfEmpty("[name='country']", country);
|
|
setIfEmpty("[name='state']", state);
|
|
setIfEmpty("[name='zip']", zip);
|
|
$("[name='dob']").val(dob);
|
|
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error('File upload failed: ', status, error);
|
|
}
|
|
});
|
|
})
|
|
})
|
|
</script>
|
|
|
|
{% endblock content %}
|