Files
ihrm/onboarding/templates/onboarding/candidates_view.html

487 lines
22 KiB
HTML

{% extends 'index.html' %} {% load i18n %} {% load static %} {% block content %}
<div class="oh-wrapper">
<div class="oh-alert-container" id="message"></div>
</div>
<div id="selectedInstances" data-ids="[]" data-clicked=""></div>
<script>
function checkRow(element) {
if (element.checked) {
$(".checkboxAll").each(function () {
$(".checkboxAll").prop("checked", true);
});
} else {
$(".checkboxAll").each(function () {
$(".checkboxAll").prop("checked", false);
});
}
}
</script>
<section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
<div class="oh-main__titlebar oh-main__titlebar--left">
<h1 class="oh-main__titlebar-title fw-bold mb-0">
{% trans "Hired Candidates" %}
</h1>
<a
class="oh-main__titlebar-search-toggle"
role="button"
aria-label="Toggle Search"
@click="searchShow = !searchShow"
>
<ion-icon
name="search-outline"
class="oh-main__titlebar-serach-icon"
></ion-icon>
</a>
</div>
<form
hx-get="{% url 'candidate-filter' %}"
onsubmit="event.preventDefault()"
hx-target="#candidates"
id="filterForm"
>
<div class="oh-main__titlebar oh-main__titlebar--right">
<div class="oh-main__titlebar-button-container">
{% if candidates %}
<div
class="oh-input-group oh-input__search-group"
:class="searchShow ? 'oh-input__search-group--show' : ''"
>
<ion-icon
name="search-outline"
class="oh-input-group__icon oh-input-group__icon--left"
></ion-icon>
<input
type="text"
class="oh-input oh-input__icon"
aria-label="Search Input"
placeholder="{% trans 'Search' %}"
name="name"
onkeyup="$('.filterButton').click()"
/>
</div>
<div class="oh-dropdown" x-data="{open: false}">
<button
type="button"
class="oh-btn ml-2"
@click="open = !open"
>
<ion-icon name="filter" class="mr-1"></ion-icon>
{% trans "Filter" %}
<div id="filterCount"></div>
</button>
{% include 'onboarding/candidate_filter.html' %}
</div>
<div class="oh-dropdown" x-data="{open: false}">
<button
class="oh-btn ml-2"
@click="open = !open"
onclick="event.preventDefault()"
>
<ion-icon name="library-outline" class="mr-1"></ion-icon
>{% trans "Group By" %}
<div id="filterCount"></div>
</button>
<div
class="oh-dropdown__menu oh-dropdown__menu--right oh-dropdown__filter p-4"
x-show="open"
@click.outside="open = false"
style="display: none"
>
<div class="oh-accordion">
<label>{% trans "Group By" %}</label>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-6">
<div class="oh-input-group">
<label class="oh-label"
>{% trans "Field" %}</label
>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-6">
<div class="oh-input-group">
<select
class="oh-select mt-1 w-100"
id="id_field"
name="field"
onchange="$(this).closest('form').find('.filterButton').click()"
class="select2-selection select2-selection--single"
>
{% for field in gp_fields %}
<option value="{{ field.0 }}">
{% trans field.1 %}
</option>
{% endfor %}
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="oh-btn-group ml-2">
<div class="oh-dropdown" x-data="{open: false}">
<button
type="button"
class="oh-btn oh-btn--dropdown oh-btn"
@click="open = !open"
@click.outside="open = false"
>
{% trans "Actions" %}
</button>
<div
class="oh-dropdown__menu oh-dropdown__menu--right"
x-show="open"
style="display: none"
>
<ul class="oh-dropdown__items">
<li class="oh-dropdown__item">
{% if perms.recruitment.change_candidates %}
<a
href="#"
class="oh-dropdown__link"
id="candidate-info-export"
data-toggle="oh-modal-toggle"
data-target="#objectDetailsModal"
hx-get="{% url 'candidate-info-export' %}"
hx-target="#objectDetailsModalTarget"
>{% trans "Export" %}</a
>
{% endif %}
</li>
<li class="oh-dropdown__item">
<a
href="#"
onclick="event.preventDefault(); event.stopPropagation()"
class="oh-dropdown__link"
>{% trans "Offer letter status :" %}
</a>
<select name="status"
onclick="event.preventDefault(); event.stopPropagation()"
class="w-100 "
id="candidateOfferLetterUpdate"
style="
height: 30px;
border:solid 1px rgba(128, 128, 128, 0.32);
"
>
<option value="">{% trans "Select" %}</option>
{% for status in candidates.0.offer_letter_statuses %}
<option value="{{status.0}}">{{status.1}}</option>
{% endfor %}
</select>
</li>
{% if perms.recruitment.delete_candidates %}
<li class="oh-dropdown__item">
<a
href="#"
class="oh-dropdown__link oh-dropdown__link--danger"
id="deleteCandidates"
>{% trans "Delete" %}</a
>
</li>
{% endif %}
</ul>
</div>
</div>
</div>
<div class="oh-btn-group ml-2">
<button
type="button"
class="oh-btn oh-btn--info oh-btn--shadow"
data-target="#addAttachments"
data-toggle="oh-modal-toggle"
>
{% trans "Send Portal" %}
</button>
</div>
{% endif %}
<div class="oh-btn-group ml-2">
<a
href="{% url 'candidate-create' %}?onboarding=True"
class="oh-btn oh-btn--secondary oh-btn--shadow"
method="get"
>
<ion-icon name="add-outline" class="me-1"></ion-icon>
{% trans "Create" %}
</a>
</div>
</div>
</div>
</form>
</section>
{% if candidates %}
<div class="d-flex flex-row-reverse oh-wrapper">
<span
class="m-1"
onclick="$('[name=joining_set]').val('true'); $('[name=portal_sent]').val('');$('[name=joining_set]').first().change(); $('.filterButton').click()"
style="cursor: pointer; margin-left: 15px"
>
<span
class="oh-dot oh-dot--small me-1"
style="background-color: yellow"
></span>
{% trans "Joining Set" %}
</span>
<span
class="m-1"
onclick="$('[name=joining_set]').val('false'); $('[name=portal_sent]').val(''); $('[name=joining_set]').first().change(); $('.filterButton').click()"
style="cursor: pointer; margin-left: 15px"
>
<span
class="oh-dot oh-dot--small me-1"
style="background-color: burlywood"
></span>
{% trans "Joining Not-Set" %}
</span>
<span
class="m-1"
onclick="$('[name=portal_sent]').val('false');$('[name=joining_set]').val(''); $('[name=portal_sent]').first().change(); $('.filterButton').click()"
style="cursor: pointer; margin-left: 15px"
>
<span
class="oh-dot oh-dot--small me-1"
style="background-color: rgba(128, 128, 128, 0.482)"
></span>
{% trans "Portal Not-Sent" %}
</span>
<span
class="m-1"
onclick="$('[name=portal_sent]').val('true');$('[name=joining_set]').val(''); $('[name=portal_sent]').first().change(); $('.filterButton').click()"
style="cursor: pointer; margin-left: 15px"
>
<span
class="oh-dot oh-dot--small me-1"
style="background-color: yellowgreen"
></span>
{% trans "Portal Sent" %}
</span>
</div>
<div id="messages" class="oh-alert-container"></div>
<div class="oh-wrapper" id="candidates">
{% include 'onboarding/candidates.html' %}
</div>
{% else %}
<div class="oh-empty">
<img src="{% static 'images/ui/search.svg' %}" class="oh-404__image" alt="Page not found. 404." />
<h1 class="oh-empty__title">{% trans "No Records found." %}</h1>
<p class="oh-empty__subtitle">{% trans "At present, There are no Candidates onboarding." %}</p>
</div>
{% endif %}
<div
class="oh-modal"
id="addAttachments"
role="dialog"
aria-labelledby="addAttachments"
aria-hidden="true"
>
<div class="oh-modal__dialog">
<div class="oh-modal__dialog-header">
<span class="oh-modal__dialog-title" id="addEmployeeModalLabel"
>{% trans "Attachments" %}
<span style="color: #80808080; font-size: 14px"
>({% trans "Optional" %})</span
></span
>
<button class="oh-modal__close" aria-label="Close">
<ion-icon name="close-outline"></ion-icon>
</button>
</div>
<form
hx-post="{% url 'email-send' %}"
hx-target="#addAttachmentsBody"
hx-encoding="multipart/form-data"
>
<div class="oh-modal__dialog-body" id="addAttachmentsBody">
<section>
<div id="keyResultsContainer">
<div class="my-3" id="keyResultCard">
<div
class="oh-card oh-card--no-shadow oh-card__body"
>
<div class="oh-input__group">
<select
name="ids"
id="hired_candidates"
multiple
class="w-100"
hidden
>
{% for candidate in hired_candidates %}
<option value="{{candidate.id}}">
{{candidate.name}}
</option>
{% endfor %}
</select>
</div>
<div class="oh-input__group">
<label
class="oh-input__label mt-0"
for="keyTitle"
>{% trans "Template as Attachments"%}</label
>
<select
name="template_attachment_ids"
id="template_attachment_ids"
multiple
class="oh-select oh-select-2 w-100"
>
{% for template in mail_templates %}
<option value="{{template.id}}">
{{template.title}}
</option>
{% endfor %}
</select>
</div>
<div class="oh-input__group">
<label class="oh-input__label" for="keyDesc"
>{% trans "Other Attachments" %}</label
>
<input
type="file"
multiple
name="other_attachments"
id="other_attachments"
/>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="oh-modal__dialog-footer">
<button
onclick="$('.oh-modal#addAttachments').removeClass('oh-modal--show');$(`#messages`).html(
$(`
<div class='oh-alert oh-alert--animated oh-alert--info'>
Processing...
</div>
`)
)"
class="oh-btn oh-btn--secondary oh-btn--shadow"
id="trigger-onboarding"
title="Send portal link / Trigger Onboarding"
>
{% trans "Send Portal Link" %}
</button>
</div>
</form>
</div>
</div>
<div
class="oh-modal"
id="candidateExport"
role="dialog"
aria-labelledby="candidateExport"
aria-hidden="true"
>
<div class="oh-modal__dialog" id="candidateExportModalBody"></div>
</div>
<script>
var noRowMessages = {
ar: "لم يتم تحديد أي صفوف.",
de: "Es wurden keine Zeilen ausgewählt.",
es: "No se han seleccionado filas.",
en: "No rows have been selected.",
fr: "Aucune ligne n'a été sélectionnée.",
};
var deleteMessages = {
ar: "هل ترغب حقًا في حذف جميع الموظفين المحددين؟",
de: "Möchten Sie wirklich alle ausgewählten Mitarbeiter löschen?",
es: "¿Realmente quieres eliminar a todos los empleados seleccionados?",
en: "Do you really want to delete all the selected employees?",
fr: "Voulez-vous vraiment supprimer tous les employés sélectionnés ?",
};
$("#selectAll").click("click", function () {
checkRow(this);
var checkedIds = $("#selectedInstances").attr("data-ids");
$("#hired_candidates[name=ids]").val(checkedIds);
$("select[name=ids]").change();
});
$("#delete-link").on("click", function (event) {
event.preventDefault(); // prevent the default behavior of the link
const link = $(this);
const confirmation = confirm(
"{% trans 'Are you sure you want to delete?' %}"
);
if (confirmation) {
window.location.href = link.attr("href"); // execute the href if confirmed
}
});
$("#candidateOfferLetterUpdate").on("change", function() {
ids = $("#selectedInstances").data("ids");
var textMessage = noRowMessages[languageCode] || ((languageCode = "en"), noRowMessages[languageCode]);
if (!ids.length) {
Swal.fire({
text: textMessage,
icon: "warning",
confirmButtonText: "Close",
})
}else {
$.ajax({
type: "GET",
url: "{% url 'offer-letter-bulk-status-update' %}",
data: {
ids: JSON.stringify(ids),
status: $(this).val(),
},
success: function (response) {
window.location.reload()
},
error: function () {
console.error("An error occured...");
},
});
}
})
$("#deleteCandidates").on("click", function() {
ids = $("#selectedInstances").data("ids");
var textMessage = noRowMessages[languageCode] || ((languageCode = "en"), noRowMessages[languageCode]);
var confirmMessage = deleteMessages[languageCode] || ((languageCode = "en"), deleteMessages[languageCode]);
if (!ids.length) {
Swal.fire({
text: textMessage,
icon: "warning",
confirmButtonText: "Close",
})
}else {
Swal.fire({
text: confirmMessage,
icon: "info",
showCancelButton: true,
confirmButtonColor: "#008000",
cancelButtonColor: "#d33",
confirmButtonText: "Confirm",
}).then(function (result) {
if (result.isConfirmed) {
$.ajax({
type: "GET",
url: "{% url 'onboarding-candidate-bulk-delete' %}",
data: {
ids: JSON.stringify(ids),
},
success: function (response) {
window.location.reload()
},
error: function () {
console.error("An error occured...");
},
});
}
})
}
})
</script>
{% endblock content %}