418 lines
14 KiB
HTML
418 lines
14 KiB
HTML
{% load widget_tweaks i18n %}
|
|
<style>
|
|
.condition-highlight {
|
|
background-color: #ffa5000f;
|
|
}
|
|
</style>
|
|
<div class="oh-general__tab-target oh-profile-section" id="personal">
|
|
<div class="oh-payslip__header">
|
|
<div class="oh-payslip__header-left">
|
|
<div class="oh-payroll__component-title">
|
|
{{ form.verbose_name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="oh-profile-section__card">
|
|
<div class="row">
|
|
<div class="col-12">{{form.non_field_errors}}</div>
|
|
{% for field in form.visible_fields %}
|
|
<div class="col-12 col-md-6">
|
|
<div
|
|
class="oh-label__info"
|
|
for="id_{{ field.name }}"
|
|
style="display: ruby"
|
|
>
|
|
<label
|
|
class="oh-label {% if field.field.required %} required-star{% endif %}"
|
|
for="id_{{ field.name }}"
|
|
>{% trans field.label %}</label
|
|
>
|
|
{% if field.help_text != "" %}
|
|
<span
|
|
class="oh-info mr-2"
|
|
title="{{ field.help_text|safe }}"
|
|
>
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if field.field.widget.input_type == "checkbox" %}
|
|
<div class="oh-switch" style="width: 30px">
|
|
{{ field|add_class:"oh-switch__checkbox" }}
|
|
</div>
|
|
{% else %}
|
|
{{ field|add_class:"form-control" }}
|
|
{% endif %}
|
|
|
|
{{field.errors}}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="d-flex flex-row-reverse">
|
|
<button
|
|
type="submit"
|
|
class="oh-btn oh-btn--secondary mt-2 mr-0 pl-4 pr-5 oh-btn--w-100-resp"
|
|
>
|
|
{% trans "Save" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% for field in form.hidden_fields %} {{field}} {% endfor %}
|
|
|
|
<script>
|
|
function conditionalVisibility() {
|
|
if (!$("#id_is_condition_based").is(":checked")) {
|
|
$('[onclick="conditionAdd()"]').parent().hide();
|
|
$("#conditionContainer").hide();
|
|
$("#id_field, #id_value, #id_condition").hide();
|
|
$("#id_field, #id_value, #id_condition").parent().hide();
|
|
$(
|
|
"[for='id_field'], [for='id_value'], [for='id_condition']"
|
|
).hide();
|
|
$("[for='id_field'], [for='id_value'], [for='id_condition']")
|
|
.parent()
|
|
.hide();
|
|
} else {
|
|
$("#conditionContainer").show();
|
|
$('[onclick="conditionAdd()"]').parent().show();
|
|
$("#id_field, #id_value, #id_condition").show();
|
|
$("#id_field, #id_value, #id_condition").parent().show();
|
|
$(
|
|
"[for='id_field'], [for='id_value'], [for='id_condition']"
|
|
).show();
|
|
$("[for='id_field'], [for='id_value'], [for='id_condition']")
|
|
.parent()
|
|
.show();
|
|
}
|
|
|
|
if ($("#id_is_tax").is(":checked")) {
|
|
$("#id_is_fixed").prop("checked", false);
|
|
$("#id_based_on,[for=id_based_on], #id_rate, [for=id_rate]").show();
|
|
$("#id_based_on,[for=id_based_on], #id_rate, [for=id_rate]")
|
|
.parent()
|
|
.show();
|
|
$(
|
|
"#id_is_condition_based,[for=id_is_condition_based],#id_field,[for=field],#id_condition,[for=condition],#id_value,[for=id_value]"
|
|
).hide();
|
|
$(
|
|
"#id_is_condition_based,[for=id_is_condition_based],#id_field,[for=field],#id_condition,[for=condition],#id_value,[for=id_value]"
|
|
)
|
|
.parent()
|
|
.hide();
|
|
|
|
$(
|
|
"#id_is_pre_tax,[for='id_is_pre_tax'], #id_is_fixed,[for='id_is_fixed'],#id_amount,[for='id_amount'],#id_employee_rate,[for=id_employee_rate],#id_is_pretax,[for=id_is_pretax] "
|
|
).hide();
|
|
$(
|
|
"#id_is_pre_tax,[for='id_is_pre_tax'], #id_is_fixed,[for='id_is_fixed'],#id_amount,[for='id_amount'],#id_employee_rate,[for=id_employee_rate],#id_is_pretax,[for=id_is_pretax] "
|
|
)
|
|
.parent()
|
|
.hide();
|
|
} else {
|
|
$("#id_based_on,[for=id_based_on], #id_rate, [for=id_rate]").hide();
|
|
$("#id_based_on,[for=id_based_on], #id_rate, [for=id_rate]")
|
|
.parent()
|
|
.hide();
|
|
$(
|
|
"#id_is_pre_tax,[for='id_is_pre_tax'], #id_is_fixed,[for='id_is_fixed'],#id_amount,[for='id_amount'],#id_employee_rate,[for=id_employee_rate],#id_is_pretax,[for=id_is_pretax] "
|
|
).show();
|
|
$(
|
|
"#id_is_pre_tax,[for='id_is_pre_tax'], #id_is_fixed,[for='id_is_fixed'],#id_amount,[for='id_amount'],#id_employee_rate,[for=id_employee_rate],#id_is_pretax,[for=id_is_pretax] "
|
|
)
|
|
.parent()
|
|
.show();
|
|
}
|
|
|
|
if (!$("#id_is_fixed").is(":checked")) {
|
|
$("#id_based_on, #id_rate").show();
|
|
$("#id_based_on, #id_rate").parent().show();
|
|
$("[for='id_based_on'], [for='id_rate']").show();
|
|
$("[for='id_based_on'], [for='id_rate']").parent().show();
|
|
$("#id_amount").hide();
|
|
$("#id_amount").parent().hide();
|
|
$("[for='id_amount']").hide();
|
|
$("[for='id_amount']").parent().hide();
|
|
$("#id_employer_rate, [for=id_employer_rate]").show();
|
|
$("#id_employer_rate, [for=id_employer_rate]").parent().show();
|
|
} else {
|
|
$("#id_based_on, #id_rate").hide();
|
|
$("#id_based_on, #id_rate").parent().hide();
|
|
$("[for='id_based_on'], [for='id_rate']").hide();
|
|
$("[for='id_based_on'], [for='id_rate']").parent().hide();
|
|
$("#id_amount").show();
|
|
$("#id_amount").parent().show();
|
|
$("[for='id_amount']").show();
|
|
$("[for='id_amount']").parent().show();
|
|
$("#id_employer_rate, [for=id_employer_rate]").hide();
|
|
$("#id_employer_rate, [for=id_employer_rate]").parent().hide();
|
|
}
|
|
if (
|
|
$("#id_is_fixed").is(":checked") &&
|
|
!$("#id_is_tax").is(":checked")
|
|
) {
|
|
$("#id_based_on, [for=id_based_on],#id_rate,[for=id_rate]").hide();
|
|
$("#id_based_on, [for=id_based_on],#id_rate,[for=id_rate]")
|
|
.parent()
|
|
.hide();
|
|
$("#id_amount,[for=id_amount]").show();
|
|
$("#id_amount,[for=id_amount]").parent().show();
|
|
}
|
|
|
|
if ($("#id_include_active_employees").is(":checked")) {
|
|
$("#id_is_condition_based").prop("checked", false);
|
|
$(
|
|
"#id_specific_employees, [for=id_specific_employees],#id_is_condition_based, [for=id_is_condition_based]"
|
|
).hide();
|
|
$(
|
|
"#id_specific_employees, [for=id_specific_employees],#id_is_condition_based, [for=id_is_condition_based]"
|
|
)
|
|
.parent()
|
|
.hide();
|
|
$(
|
|
"#id_field,[for=id_field], #id_condition,[for=id_condition], #id_value,[for=id_value]"
|
|
).hide();
|
|
$(
|
|
"#id_field,[for=id_field], #id_condition,[for=id_condition], #id_value,[for=id_value]"
|
|
)
|
|
.parent()
|
|
.hide();
|
|
} else {
|
|
$(
|
|
"#id_specific_employees, [for=id_specific_employees],#id_is_condition_based, [for=id_is_condition_based]"
|
|
).show();
|
|
$(
|
|
"#id_specific_employees, [for=id_specific_employees],#id_is_condition_based, [for=id_is_condition_based]"
|
|
)
|
|
.parent()
|
|
.show();
|
|
if ($("#id_is_condition_based").is(":checked")) {
|
|
$(
|
|
"#id_field,[for=id_field], #id_condition,[for=id_condition], #id_value,[for=id_value]"
|
|
).show();
|
|
$(
|
|
"#id_field,[for=id_field], #id_condition,[for=id_condition], #id_value,[for=id_value]"
|
|
)
|
|
.parent()
|
|
.show();
|
|
}
|
|
}
|
|
|
|
if (
|
|
$("#id_is_condition_based").is(":checked") ||
|
|
$("#id_include_active_employees").is(":checked")
|
|
) {
|
|
$("#id_exclude_employees, [for=id_exclude_employees]").show();
|
|
$("#id_exclude_employees, [for=id_exclude_employees]")
|
|
.parent()
|
|
.show();
|
|
} else {
|
|
$("#id_exclude_employees, [for=id_exclude_employees]").hide();
|
|
$("#id_exclude_employees, [for=id_exclude_employees]")
|
|
.parent()
|
|
.hide();
|
|
}
|
|
if ($("#id_is_condition_based").is(":checked")) {
|
|
$("#id_specific_employees,[for=id_specific_employees]").hide();
|
|
$("#id_specific_employees,[for=id_specific_employees]")
|
|
.parent()
|
|
.hide();
|
|
}
|
|
|
|
if (
|
|
$("#id_has_max_limit").is(":checked") &&
|
|
!$("#id_is_fixed").is(":checked")
|
|
) {
|
|
$("#id_maximum_amount, [for=id_maximum_amount]").show();
|
|
$("#id_maximum_amount, [for=id_maximum_amount]").parent().show();
|
|
} else {
|
|
$("#id_maximum_amount, [for=id_maximum_amount]").hide();
|
|
$("#id_maximum_amount, [for=id_maximum_amount]").parent().hide();
|
|
}
|
|
|
|
if ($("#id_has_max_limit").is(":checked")) {
|
|
$("#id_maximum_amount, [for=id_maximum_amount]").show();
|
|
$("#id_maximum_amount, [for=id_maximum_amount]").parent().show();
|
|
$("#id_maximum_unit,[for=id_maximum_unit]").show();
|
|
$("#id_maximum_unit,[for=id_maximum_unit]").parent().show();
|
|
} else {
|
|
$("#id_maximum_amount, [for=id_maximum_amount]").hide();
|
|
$("#id_maximum_amount, [for=id_maximum_amount]").parent().hide();
|
|
$("#id_maximum_unit,[for=id_maximum_unit]").hide();
|
|
$("#id_maximum_unit,[for=id_maximum_unit]").parent().hide();
|
|
}
|
|
|
|
if ($("#id_is_tax").is(":checked")) {
|
|
$(
|
|
"#id_is_condition_based,[for=id_is_condition_based],#id_field,[for=id_field],#id_condition,[for=id_condition],#id_value,[for=id_value]"
|
|
).hide();
|
|
$(
|
|
"#id_is_condition_based,[for=id_is_condition_based],#id_field,[for=id_field],#id_condition,[for=id_condition],#id_value,[for=id_value]"
|
|
)
|
|
.parent()
|
|
.hide();
|
|
}
|
|
if ($("#id_update_compensation").val() != "") {
|
|
$('.oh-label__info[for="id_rate"]').parent().hide();
|
|
$(
|
|
"#id_is_tax, [for=id_is_tax],#id_is_pretax, [for=id_is_pretax], #id_based_on,[for=id_based_on],#id_employee_rate,[for=id_employee_rate],#id_employer_rate,[for=id_employer_rate]"
|
|
).hide();
|
|
$(
|
|
"#id_is_tax, [for=id_is_tax],#id_is_pretax, [for=id_is_pretax], #id_based_on,[for=id_based_on],#id_employee_rate,[for=id_employee_rate],#id_employer_rate,[for=id_employer_rate]"
|
|
)
|
|
.parent()
|
|
.hide();
|
|
$(
|
|
"#id_if_choice,[for=id_if_choice],#id_if_condition,[for=id_if_condition],#id_is_fixed,[for=id_is_fixed],#id_include_active_employees,[for=id_include_active_employees],#id_is_condition_based,[for=id_is_condition_based]"
|
|
).hide();
|
|
$(
|
|
"#id_if_choice,[for=id_if_choice],#id_if_condition,[for=id_if_condition],#id_is_fixed,[for=id_is_fixed],#id_include_active_employees,[for=id_include_active_employees],#id_is_condition_based,[for=id_is_condition_based]"
|
|
)
|
|
.parent()
|
|
.hide();
|
|
$(
|
|
"#id_field,[for=id_field],#id_condition,[for=id_condition],#id_value,[for=id_value]"
|
|
).hide();
|
|
$(
|
|
"#id_field,[for=id_field],#id_condition,[for=id_condition],#id_value,[for=id_value]"
|
|
)
|
|
.parent()
|
|
.hide();
|
|
$(
|
|
"#id_has_max_limit,[for=id_has_max_limit],#id_maximum_amount, [for=id_maximum_amount],#id_maximum_unit,[for=id_maximum_unit]"
|
|
).hide();
|
|
$(
|
|
"#id_has_max_limit,[for=id_has_max_limit],#id_maximum_amount, [for=id_maximum_amount],#id_maximum_unit,[for=id_maximum_unit]"
|
|
)
|
|
.parent()
|
|
.hide();
|
|
$("#id_amount,[for=id_amount]").show();
|
|
$("#id_amount,[for=id_amount]").parent().show();
|
|
$("#id_if_amount,[for=id_if_amount]").hide();
|
|
$("#id_is_condition_based").prop("checked", false);
|
|
} else {
|
|
$(
|
|
"#id_include_active_employees,[for=id_include_active_employees]"
|
|
).show();
|
|
$("#id_include_active_employees,[for=id_include_active_employees]")
|
|
.parent()
|
|
.show();
|
|
|
|
$("#id_has_max_limit,[for=id_has_max_limit]").show();
|
|
$("#id_has_max_limit,[for=id_has_max_limit]").parent().show();
|
|
if ($("#id_has_max_limit").is(":checked")) {
|
|
$(
|
|
"#id_maximum_amount, [for=id_maximum_amount],#id_maximum_unit,[for=id_maximum_unit]"
|
|
).show();
|
|
$(
|
|
"#id_maximum_amount, [for=id_maximum_amount],#id_maximum_unit,[for=id_maximum_unit]"
|
|
)
|
|
.parent()
|
|
.show();
|
|
}
|
|
$(
|
|
"#id_is_tax,[for=id_is_tax],#id_if_choice,[for=id_if_choice],#id_if_value,[for=id_if_value],#id_if_condition,[for=id_if_condition],#id_if_amount,[for=id_if_amount]"
|
|
).show();
|
|
$(
|
|
"#id_is_tax,[for=id_is_tax],#id_if_choice,[for=id_if_choice],#id_if_value,[for=id_if_value],#id_if_condition,[for=id_if_condition],#id_if_amount,[for=id_if_amount]"
|
|
)
|
|
.parent()
|
|
.show();
|
|
}
|
|
if ($("#id_is_fixed").is(":checked")) {
|
|
$("#id_has_max_limit").parent().parent().hide();
|
|
$("#id_maximum_unit,#id_maximum_amount").parent().hide();
|
|
} else {
|
|
$("#id_has_max_limit").parent().parent().show();
|
|
if ($("#id_has_max_limit").is(":checked")) {
|
|
$("#id_maximum_unit,#id_maximum_amount").parent().show();
|
|
}
|
|
}
|
|
}
|
|
$(document).ready(function () {
|
|
$("input[type='checkbox'], select, input[type='radio']").change(
|
|
function (e) {
|
|
e.preventDefault();
|
|
conditionalVisibility();
|
|
}
|
|
);
|
|
$("#id_is_condition_based").parent().parent().attr("class", "col-12");
|
|
$("#id_condition, #id_field, #id_value")
|
|
.parent()
|
|
.attr("class", "col-12 col-md-4 condition-highlight");
|
|
addMore = $(`
|
|
<div class="mt-3" style="
|
|
display: inline-block;
|
|
margin-top: 0 !important;
|
|
position: relative;
|
|
top: -17px;
|
|
left: 36px;
|
|
">
|
|
<div class="m-1 p-1"onclick="conditionAdd()" align="center" style="border-radius:15px; width:25px;border:solid 1px green;cursor:pointer;display:inline;" title="Add More">
|
|
+
|
|
</div>
|
|
|
|
</div>
|
|
`);
|
|
|
|
// Adding add more mutton on the condition based check box
|
|
$('[name="is_condition_based"]').parent().after(addMore);
|
|
});
|
|
|
|
conditionContainer = $(`
|
|
<div id="conditionContainer" class="col-12 col-md-12"></div>
|
|
`);
|
|
// Add condition container
|
|
$("#id_value").parent().after(conditionContainer);
|
|
|
|
function conditionAdd() {
|
|
let conditionSet = $(`
|
|
<div class="row">
|
|
<div class="col-12 col-md-4 condition-highlight">
|
|
${$("[for=id_field]")
|
|
.clone()
|
|
.attr("class", "style-widget form-control oh-label__info")
|
|
.prop("outerHTML")}
|
|
${$("#id_field")
|
|
.clone()
|
|
.attr("name", "other_fields")
|
|
.attr("class", "style-widget form-control")
|
|
.prop("outerHTML")}
|
|
</div>
|
|
<div class="col-12 col-md-4 condition-highlight">
|
|
${$("[for=id_condition]")
|
|
.clone()
|
|
.attr("class", "style-widget form-control oh-label__info")
|
|
.prop("outerHTML")}
|
|
${$("#id_condition")
|
|
.clone()
|
|
.attr("name", "other_conditions")
|
|
.attr("class", "style-widget form-control")
|
|
.prop("outerHTML")}
|
|
</div>
|
|
<div class="col-12 col-md-4 condition-highlight">
|
|
<div class="d-flex">
|
|
${$("[for=id_value]")
|
|
.clone()
|
|
.attr("class", "style-widget form-control oh-label__info")
|
|
.prop("outerHTML")}
|
|
<div class="m-1 p-1" onclick="$(this).closest('.row').remove()" align="center" style="border-radius:15px; width:25px;border:solid 1px red;cursor:pointer;display:inline;">
|
|
-
|
|
</div>
|
|
</div>
|
|
${$("#id_value")
|
|
.clone()
|
|
.attr("name", "other_values")
|
|
.attr("class", "style-widget form-control")
|
|
.prop("outerHTML")}
|
|
</div>
|
|
</div>
|
|
`);
|
|
|
|
$("#conditionContainer").append(conditionSet);
|
|
}
|
|
conditionalVisibility();
|
|
</script>
|