341 lines
14 KiB
HTML
341 lines
14 KiB
HTML
{% extends 'index.html' %} {% load static i18n widget_tweaks %}
|
|
{% block styles %}
|
|
<link rel="stylesheet" href="{% static 'css/pms.css' %}" />
|
|
{% endblock styles %} {% block content %} {% if feedback_form.errors %}
|
|
<div class="oh-wrapper">
|
|
<div class="oh-alert-container">
|
|
{% for error in feedback_form.non_field_errors %}
|
|
<div class="oh-alert oh-alert--animated oh-alert--danger">
|
|
{{ error }}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="oh-wrapper" id="message"></div>
|
|
<!-- Feedback form'-->
|
|
<main class="oh-onboarding">
|
|
<div class="oh-onboarding-card oh-profile-section" style="max-width: 868px">
|
|
<form
|
|
action="{%url 'feedback-creation' %}"
|
|
id="feedbackCreationForm"
|
|
method="post"
|
|
>
|
|
{% csrf_token %} {{feedback_form.non_field_errors}}
|
|
<div class="oh-onboarding-card__address-group">
|
|
<h2 class="oh-onboarding-card__section-title">
|
|
{{feedback_form.verbose_name}}
|
|
</h2>
|
|
<div class="oh-input__group">
|
|
<label
|
|
class="oh-input__label"
|
|
for="{{feedback_form.review_cycle.id_for_label}}"
|
|
>{{feedback_form.review_cycle.label}}</label
|
|
>
|
|
{{feedback_form.review_cycle}}
|
|
{{feedback_form.review_cycle.errors}}
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-6">
|
|
<div class="oh-input__group">
|
|
<div class="oh-input__group">
|
|
<label
|
|
class="oh-input__label"
|
|
for="{{feedback_form.employee_id.id_for_label}}"
|
|
>{{feedback_form.employee_id.label}}</label
|
|
>
|
|
{{feedback_form.employee_id }}
|
|
{{feedback_form.employee_id.errors }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-6">
|
|
<div class="oh-input__group">
|
|
<div class="oh-input__group">
|
|
<label
|
|
class="oh-input__label"
|
|
for="{{feedback_form.manager_id.id_for_label}}"
|
|
>{{feedback_form.manager_id.label}}</label
|
|
>
|
|
{{feedback_form.manager_id}}
|
|
{{feedback_form.manager_id.errros}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-6">
|
|
<div class="oh-input__group">
|
|
<div style="display: flex">
|
|
<label
|
|
class="oh-input__label"
|
|
for="{{feedback_form.subordinate_id.id_for_label}}"
|
|
>{{feedback_form.subordinate_id.label}}</label
|
|
>
|
|
<span
|
|
class="oh-info mt-2"
|
|
title="{{feedback_form.subordinate_id.help_text|safe }}"
|
|
></span>
|
|
</div>
|
|
<div class="oh-input__group">
|
|
{{feedback_form.subordinate_id}}
|
|
{{feedback_form.subordinate_id.errors}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-6">
|
|
<div class="oh-input__group">
|
|
<div style="display: flex">
|
|
<label
|
|
class="oh-input__label"
|
|
for="{{feedback_form.colleague_id.id_for_label}}"
|
|
>{{feedback_form.colleague_id.label}}</label
|
|
>
|
|
<span
|
|
class="oh-info mt-2"
|
|
title="{{feedback_form.colleague_id.help_text|safe }}"
|
|
></span>
|
|
</div>
|
|
<div class="oh-input__group">
|
|
{{feedback_form.colleague_id}}
|
|
{{feedback_form.colleague_id.errors}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-6">
|
|
<div class="oh-input__group">
|
|
<div class="oh-input__group">
|
|
<label
|
|
class="oh-input__label"
|
|
for="{{feedback_form.others_id.id_for_label}}"
|
|
>{{feedback_form.others_id.label}}</label
|
|
>
|
|
{{feedback_form.others_id}}
|
|
{{feedback_form.others_id.errors}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-4">
|
|
<div class="oh-input__group">
|
|
<div class="oh-input__group">
|
|
<label
|
|
class="oh-input__label"
|
|
for="{{feedback_form.period.id_for_label}}"
|
|
>{{feedback_form.period.label}}</label
|
|
>
|
|
{{feedback_form.period}}
|
|
{{feedback_form.period.errors}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-4">
|
|
<div class="oh-input__group">
|
|
<div class="oh-input__group">
|
|
<label
|
|
class="oh-input__label"
|
|
for="{{feedback_form.start_date.id_for_label}}"
|
|
>{{feedback_form.start_date.label}}</label
|
|
>
|
|
{{feedback_form.start_date}}
|
|
{{feedback_form.start_date.errors}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-4">
|
|
<div class="oh-input__group">
|
|
<div class="oh-input__group">
|
|
<label
|
|
class="oh-input__label"
|
|
for="{{feedback_form.end_date.id_for_label}}"
|
|
>{{feedback_form.end_date.label}}</label
|
|
>
|
|
{{feedback_form.end_date}}
|
|
{{feedback_form.end_date.errors}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-6">
|
|
<div class="oh-input__group">
|
|
<label
|
|
class="oh-input__label"
|
|
for="{{feedback_form.question_template_id.id_for_label}}"
|
|
>{{feedback_form.question_template_id.label}}</label
|
|
>
|
|
{{feedback_form.question_template_id}}
|
|
{{feedback_form.question_template_id.errors}}
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-6">
|
|
<div class="oh-input__group">
|
|
<label
|
|
class="oh-input__label"
|
|
for="id_employee_key_results_id"
|
|
>{{feedback_form.employee_key_results_id.label}}</label
|
|
>
|
|
{{feedback_form.employee_key_results_id}}
|
|
{{feedback_form.employee_key_results_id.errors}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-6 mb-5" id="">
|
|
<div class="oh-input__group">
|
|
<label
|
|
class="oh-input__label"
|
|
for="{{feedback_form.cyclic_feedback.id_for_label}}"
|
|
>{{feedback_form.cyclic_feedback.label}}</label
|
|
>
|
|
<div class="oh-switch">
|
|
{{feedback_form.cyclic_feedback}}
|
|
</div>
|
|
{{feedback_form.cyclic_feedback.errors}}
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="col-12 col-sm-12 col-md-6 col-lg-6"
|
|
style="display: none"
|
|
id="cyclic_feedback_period"
|
|
>
|
|
<div class="oh-input__group">
|
|
<label
|
|
class="oh-input__label"
|
|
for="{{feedback_form.cyclic_feedback_days_count.id_for_label}}"
|
|
>{{feedback_form.cyclic_feedback_days_count.label}}</label
|
|
>
|
|
<div class="w-100 d-flex">
|
|
{{feedback_form.cyclic_feedback_days_count}}
|
|
{{feedback_form.cyclic_feedback_period}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-100 d-flex align-items-center justify-content-end">
|
|
<button
|
|
type="submit"
|
|
class="oh-btn oh-btn--secondary oh-btn--w-100-resp"
|
|
>
|
|
{% trans "Save" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- period modal -->
|
|
<div
|
|
class="oh-modal"
|
|
id="PeriodModal"
|
|
role="dialog"
|
|
aria-labelledby="editKeyResultModal"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="oh-modal__dialog">
|
|
<!-- for creating period -->
|
|
<div class="oh-modal__dialog-header">
|
|
<button
|
|
type="button"
|
|
class="oh-modal__close"
|
|
aria-label="Close"
|
|
>
|
|
<ion-icon name="close-outline"></ion-icon>
|
|
</button>
|
|
</div>
|
|
<div class="oh-modal__dialog-body" id="periodModalTarget"></div>
|
|
</div>
|
|
</div>
|
|
<!-- end of period modal -->
|
|
</main>
|
|
<button
|
|
id="colleguesButton"
|
|
hx-get="{% url 'get-collegues' %}"
|
|
hx-target="#id_colleague_id"
|
|
hidden
|
|
></button>
|
|
<button
|
|
id="managerButton"
|
|
hx-get="{% url 'get-collegues' %}"
|
|
hx-target="#id_manager_id"
|
|
hidden
|
|
></button>
|
|
<button
|
|
id="subordinatesButton"
|
|
hx-get="{% url 'get-collegues' %}"
|
|
hx-target="#id_subordinate_id"
|
|
hidden
|
|
></button>
|
|
<button
|
|
id="keyresultButtton"
|
|
hx-get="{% url 'get-collegues' %}"
|
|
hx-target="#id_employee_key_results_id"
|
|
hidden
|
|
></button>
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
get_collegues($("#id_employee_id"));
|
|
setTimeout(function () {
|
|
select = $("select");
|
|
select.siblings("span.select2.select2-container").remove();
|
|
select.select2();
|
|
}, 700);
|
|
});
|
|
|
|
function get_collegues(element) {
|
|
var employee_id = $(element).val();
|
|
|
|
// Check if the employee_id is valid
|
|
|
|
// Dynamically set the hx-vals attribute for the manager, colleagues, subordinates, keyresult buttons
|
|
if (employee_id) {
|
|
|
|
$("#managerButton")
|
|
.attr(
|
|
"hx-vals",
|
|
JSON.stringify({
|
|
employee_id: employee_id,
|
|
data: "manager",
|
|
})
|
|
)
|
|
.click();
|
|
$("#colleguesButton")
|
|
.attr(
|
|
"hx-vals",
|
|
JSON.stringify({
|
|
employee_id: employee_id,
|
|
data: "colleagues",
|
|
})
|
|
)
|
|
.click();
|
|
$("#subordinatesButton")
|
|
.attr(
|
|
"hx-vals",
|
|
JSON.stringify({
|
|
employee_id: employee_id,
|
|
data: "subordinates",
|
|
})
|
|
)
|
|
.click();
|
|
$("#keyresultButtton")
|
|
.attr(
|
|
"hx-vals",
|
|
JSON.stringify({
|
|
employee_id: employee_id,
|
|
data: "keyresults",
|
|
})
|
|
)
|
|
.click();
|
|
} else {
|
|
console.error("Invalid employee_id");
|
|
}
|
|
}
|
|
</script>
|
|
<script src="{% static 'src/feedback/feedback_creation.js' %}"></script>
|
|
<script src="{% static 'src/period/period.js' %}"></script>
|
|
{% endblock%}
|