[UPDT] LEAVE: Updated the leave type update form design
This commit is contained in:
Horilla
@@ -16,4 +16,4 @@
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 698 B After Width: | Height: | Size: 699 B |
@@ -14,4 +14,4 @@
|
||||
<path class="cls-1" d="M96.6,48l-18.2-14.8c-1.6-1.3-4.1-.2-4.1,2v8.5h-27.6c-1.2,0-2.1,1-2.1,2.1v8.4c0,1.2,1,2.1,2.1,2.1h27.6v8.5c0,2.1,2.5,3.3,4.1,2l18.2-14.9c1.2-1,1.2-2.9,0-3.9Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 800 B After Width: | Height: | Size: 801 B |
@@ -17,4 +17,4 @@
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 956 B After Width: | Height: | Size: 957 B |
@@ -65,7 +65,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label" for="firstname">{% trans "Badge Id" %}
|
||||
@@ -83,7 +83,7 @@
|
||||
<button type="submit" class="oh-btn oh-btn--secondary">
|
||||
{% trans "Save Changes" %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -59,6 +59,3 @@
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -18,4 +18,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -60,6 +60,3 @@
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{% load static %} {% load i18n %}
|
||||
<div class="oh-wrapper" data-select2-id="select2-data-40-yu7x">
|
||||
<div class="oh-general__tab-target oh-profile-section mb-4 p-10" id="personal" data-select2-id="select2-data-personal" style="border:none;">
|
||||
<div class="oh-profile-section__card p-10" data-select2-id="select2-data-48-0df8" style="border:1px solid #cdd5df; border-radius:10px;">
|
||||
<div class="oh-profile-section__card p-10" data-select2-id="select2-data-48-0df8" style="border:1px solid #cdd5df; border-radius:10px;">
|
||||
|
||||
<form action="" method="post" enctype="multipart/form-data">
|
||||
<div id="personalMessage"></div>
|
||||
@@ -83,4 +83,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -81,7 +81,7 @@
|
||||
<form method="post" action="">
|
||||
<input type="hidden" name="form" value="work">
|
||||
{% if work_info_history %}
|
||||
{{history_form.as_history_modal}}
|
||||
{{history_form.as_history_modal}}
|
||||
{% endif %}
|
||||
{% csrf_token %}
|
||||
{{work_form.as_p}}
|
||||
@@ -228,4 +228,4 @@
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{% extends 'index.html' %}
|
||||
{% extends 'index.html' %}
|
||||
{% load static i18n widget_tweaks %}
|
||||
{% block styles %}
|
||||
<link rel="stylesheet" href="{% static 'css/pms.css' %}" />
|
||||
@@ -33,7 +33,7 @@
|
||||
<label class="text-xs font-medium" for="{{feedback_form.employee_id.id_for_label}}">{{feedback_form.employee_id.label}}</label>
|
||||
{{feedback_form.employee_id|add_class:"mb-3 text-color-600 px-3 p-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-xs transition duration-300 focus:border-primary-600"}}
|
||||
{{feedback_form.employee_id.errors}}
|
||||
|
||||
|
||||
<label class="text-xs font-medium" for="{{feedback_form.manager_id.id_for_label}}">{{feedback_form.manager_id.label}}</label>
|
||||
{{feedback_form.manager_id|add_class:"mb-3 text-color-600 px-3 p-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-xs transition duration-300 focus:border-primary-600"}}
|
||||
{{feedback_form.manager_id.errors}}
|
||||
@@ -46,7 +46,7 @@
|
||||
</div>
|
||||
{{feedback_form.subordinate_id|add_class:"mb-3 text-color-600 px-3 p-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-xs transition duration-300 focus:border-primary-600"}}
|
||||
{{feedback_form.subordinate_id.errors}}
|
||||
|
||||
|
||||
<div class="flex items-center gap-1 pb-2 overflow-visible relative">
|
||||
<label class="text-xs font-medium" for="{{feedback_form.colleague_id.id_for_label}}">
|
||||
{{ feedback_form.colleague_id.label }}
|
||||
@@ -80,7 +80,7 @@
|
||||
<label class="text-xs font-medium" for="{{feedback_form.question_template_id.id_for_label}}">{{feedback_form.question_template_id.label}}</label>
|
||||
{{feedback_form.question_template_id|add_class:"mb-3 text-color-600 px-3 p-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-xs transition duration-300 focus:border-primary-600"}}
|
||||
{{feedback_form.question_template_id.errors}}
|
||||
|
||||
|
||||
<label class="text-xs font-medium" for="{{feedback_form.employee_key_results_id.id_for_label}}">{{feedback_form.employee_key_results_id.label}}</label>
|
||||
{{feedback_form.employee_key_results_id|add_class:"mb-3 text-color-600 px-3 p-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-xs transition duration-300 focus:border-primary-600"}}
|
||||
{{feedback_form.employee_key_results_id.errors}}
|
||||
@@ -194,7 +194,7 @@
|
||||
<script src="{% static 'src/period/period.js' %}"></script>
|
||||
{% endblock%}
|
||||
|
||||
{% comment %} {% extends 'index.html' %}
|
||||
{% comment %} {% extends 'index.html' %}
|
||||
{% load static i18n widget_tweaks %}
|
||||
{% block styles %}
|
||||
<link rel="stylesheet" href="{% static 'css/pms.css' %}" />
|
||||
@@ -227,7 +227,7 @@
|
||||
<label class="text-xs font-medium" for="{{feedback_form.employee_id.id_for_label}}">{{feedback_form.employee_id.label}}</label>
|
||||
{{feedback_form.employee_id }}
|
||||
{{feedback_form.employee_id.errors }}
|
||||
|
||||
|
||||
<label class="text-xs font-medium" for="{{feedback_form.manager_id.id_for_label}}">{{feedback_form.manager_id.label}}</label>
|
||||
{{feedback_form.manager_id}}
|
||||
{{feedback_form.manager_id.errros}}
|
||||
@@ -240,7 +240,7 @@
|
||||
</div>
|
||||
{{feedback_form.subordinate_id}}
|
||||
{{feedback_form.subordinate_id.errors}}
|
||||
|
||||
|
||||
<div class="flex items-center gap-1 pb-2 overflow-visible relative">
|
||||
<label class="text-xs font-medium" for="{{feedback_form.colleague_id.id_for_label}}">
|
||||
{{ feedback_form.colleague_id.label }}
|
||||
@@ -269,7 +269,7 @@
|
||||
<label class="text-xs font-medium" 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.errros}}
|
||||
|
||||
|
||||
<label class="text-xs font-medium" for="{{feedback_form.employee_key_results_id.id_for_label}}">{{feedback_form.employee_key_results_id.label}}</label>
|
||||
{{feedback_form.employee_key_results_id}}
|
||||
{{feedback_form.employee_key_results_id.errros}}
|
||||
@@ -289,7 +289,7 @@
|
||||
{{feedback_form.cyclic_feedback_days_count}}
|
||||
{{feedback_form.cyclic_feedback_days_count.errros}}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -337,7 +337,7 @@
|
||||
select.siblings("span.select2.select2-container").remove();
|
||||
select.select2();
|
||||
}, 700);
|
||||
});
|
||||
});
|
||||
function get_collegues(element) {
|
||||
var employee_id = $(element).val();
|
||||
|
||||
@@ -385,11 +385,9 @@
|
||||
console.error("Invalid employee_id");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<script src="{% static 'src/feedback/feedback_creation.js' %}"></script>
|
||||
<script src="{% static 'src/period/period.js' %}"></script>
|
||||
{% endblock%} {% endcomment %}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,525 @@
|
||||
{% extends 'index.html' %}
|
||||
{% load static widget_tweaks %}
|
||||
{% load i18n %}
|
||||
{% block content %}
|
||||
{% if form.errors %}
|
||||
<!-- form errors -->
|
||||
<div class="oh-wrapper">
|
||||
<div class="oh-alert-container">
|
||||
|
||||
{% for error in form.non_field_errors %}
|
||||
<div class="oh-alert oh-alert--animated oh-alert--danger">
|
||||
{{ error }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<div class="bg-white p-5 pe-2 pt-3 rounded-md shadow-card w-full lg:w-2/4 m-auto">
|
||||
<h3 class="text-lg font-semibold mb-3">{% trans "Create Leave Type" %}</h3>
|
||||
<form method="post" enctype="multipart/form-data">
|
||||
{% csrf_token %}
|
||||
<div class="grid grid-cols-12 gap-4 ">
|
||||
<div class="col-span-12 md:col-span-6 rounded-md border border-dark-50 p-5 bg-gray-50">
|
||||
<div class="form-input-items" >
|
||||
<label class="text-xs font-medium">{% trans "Name" %}</label>
|
||||
{{form.name}}
|
||||
{{form.name.errors}}
|
||||
</div>
|
||||
|
||||
<div class="form-input-items" >
|
||||
<label class="text-xs font-medium">{% trans "Is paid" %}</label>
|
||||
{{form.payment}}
|
||||
{{form.payment.errors}}
|
||||
</div>
|
||||
|
||||
<!-- Limit Leave days Toggle -->
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-1 pb-2 overflow-visible relative form-input-items">
|
||||
<label class="text-xs font-medium" for="id_reset">{% trans "Limit Leave Days" %}</label>
|
||||
<span class="oh-info" title="{% trans "Do you want to limit leave days for this leave type?" %}"></span>
|
||||
</div>
|
||||
<div class="form-input-items" >
|
||||
<label class="inline-flex items-center cursor-pointer gap-3">
|
||||
{{form.limit_leave|add_class:"sr-only peer"}}
|
||||
<div class="relative w-9 h-5 bg-[#aeaeb2] rounded-full peer-checked:bg-[#e54f38]
|
||||
after:content-[''] after:absolute after:top-[2px] after:left-[2px]
|
||||
after:bg-white after:rounded-full after:h-4 after:w-4
|
||||
after:transition-all peer-checked:after:translate-x-4 peer-checked:after:border-white">
|
||||
</div>
|
||||
</label>
|
||||
{{form.limit_leave.errors}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-input-items" >
|
||||
<div class="totalDaysContainer">
|
||||
<label class="text-xs font-medium" for="">{% trans "Total Days" %}</label>
|
||||
{{form.count|add_class:"mb-3 text-color-600 px-3 p-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-xs transition duration-300 focus:border-primary-600"}}
|
||||
{{form.count.errors}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="oh-input-group">
|
||||
{{form.period_in}}
|
||||
{{form.period_in.errors}}
|
||||
</div>
|
||||
|
||||
<div class="oh-input-group">
|
||||
{{form.total_days}}
|
||||
{{form.total_days.errors}}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mb-2 resetContainer form-input-items">
|
||||
<div class="flex items-center gap-1 pb-2 overflow-visible relative ">
|
||||
<label class="text-xs font-medium" for="">{% trans "Require Approval" %}</label>
|
||||
<span class="oh-info" title="{% trans "Do you need approval for leave from the authority?" %}"></span>
|
||||
</div>
|
||||
<label class="inline-flex items-center cursor-pointer gap-3">
|
||||
<input type="checkbox" class="sr-only peer toggle-contro yesOrNol" id="id_approval" checked />
|
||||
<div class="relative w-9 h-5 bg-[#aeaeb2] rounded-full peer-checked:bg-[#e54f38]
|
||||
after:content-[''] after:absolute after:top-[2px] after:left-[2px]
|
||||
after:bg-white after:rounded-full after:h-4 after:w-4
|
||||
after:transition-all peer-checked:after:translate-x-4 peer-checked:after:border-white">
|
||||
</div>
|
||||
</label>
|
||||
{{form.reset.errors}}
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Reset Leave Toggle -->
|
||||
<div class="flex items-center justify-between mb-2 resetContainer form-input-items">
|
||||
<div class="flex items-center gap-1 pb-2 overflow-visible relative ">
|
||||
<label class="text-xs font-medium" for="id_reset">{% trans "Reset" %}</label>
|
||||
<span class="oh-info" title="{% trans "Do you need to reset leaves based on conditions?" %}"></span>
|
||||
</div>
|
||||
<label class="inline-flex items-center cursor-pointer gap-3">
|
||||
{{form.reset|add_class:"sr-only peer"}}
|
||||
<div class="relative w-9 h-5 bg-[#aeaeb2] rounded-full peer-checked:bg-[#e54f38]
|
||||
after:content-[''] after:absolute after:top-[2px] after:left-[2px]
|
||||
after:bg-white after:rounded-full after:h-4 after:w-4
|
||||
after:transition-all peer-checked:after:translate-x-4 peer-checked:after:border-white">
|
||||
</div>
|
||||
</label>
|
||||
{{form.reset.errors}}
|
||||
</div>
|
||||
<div class="form-input-items hidden" >
|
||||
<div class="flex items-center gap-1 pb-2 overflow-visible relative" id="reset_based_id">
|
||||
<label class="text-xs font-medium" for="id_reset_based">
|
||||
{% trans "Reset Period" %}
|
||||
</label>
|
||||
<span class="oh-info" title="{% trans "The time period for the leave to reset." %}"></span>
|
||||
</div>
|
||||
{{form.reset_based|add_class:"mb-3 text-color-600 px-3 p-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-xs transition duration-300 focus:border-primary-600"}}
|
||||
{{form.reset_based.errors}}
|
||||
</div>
|
||||
<div class="form-input-items hidden" >
|
||||
<label class="text-xs font-medium" for="id_reset_month">{% trans "Reset Month" %}</label>
|
||||
{{form.reset_month|add_class:"mb-3 text-color-600 px-3 p-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-xs transition duration-300 focus:border-primary-600"}}
|
||||
{{form.reset_month.errors}}
|
||||
</div>
|
||||
|
||||
<div class="form-input-items hidden" >
|
||||
<label class="text-xs font-medium" for="id_reset_day">{% trans "Reset Day" %}</label>
|
||||
{{form.reset_day|add_class:"mb-3 text-color-600 px-3 p-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-xs transition duration-300 focus:border-primary-600"}}
|
||||
{{form.reset_day.errors}}
|
||||
</div>
|
||||
|
||||
<div class="form-input-items hidden" >
|
||||
<label class="text-xs font-medium" for="id_reset_weekend">{% trans "Reset Weekday" %}</label>
|
||||
{{form.reset_weekend|add_class:"mb-3 text-color-600 px-3 p-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-xs transition duration-300 focus:border-primary-600"}}
|
||||
{{form.reset_weekend.errors}}
|
||||
</div>
|
||||
|
||||
<!-- Carry Forward -->
|
||||
<div class="form-input-items hidden">
|
||||
<div class="flex items-center gap-1 pb-2 overflow-carryforward_type relative">
|
||||
<label class="text-xs font-medium" for="">
|
||||
{% trans "Carryforward Type" %}
|
||||
</label>
|
||||
<span class="oh-info" title="{% trans 'The conditions for carrying forward the balance of leave.' %}"></span>
|
||||
</div>
|
||||
{{form.carryforward_type|add_class:"mb-3 text-color-600 px-3 p-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-xs transition duration-300 focus:border-primary-600"}}
|
||||
{{form.carryforward_type.errors}}
|
||||
</div>
|
||||
|
||||
<div class="form-input-items hidden">
|
||||
<div class="flex items-center gap-1 pb-2 overflow-visible relative ">
|
||||
<label class="text-xs font-medium" for="id_carryforward_max">
|
||||
{% trans "Carryforward Max" %}
|
||||
</label>
|
||||
<span class="oh-info" title="{% trans "The maximum number of leave that can be carried forward." %}"></span>
|
||||
</div>
|
||||
{{form.carryforward_max|add_class:"mb-3 text-color-600 px-3 p-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-xs transition duration-300 focus:border-primary-600"}}
|
||||
{{form.carryforward_max.errors}}
|
||||
</div>
|
||||
|
||||
<div class="form-input-items hidden">
|
||||
<div class="flex items-center gap-1 pb-2 overflow-visible relative">
|
||||
<label class="text-xs font-medium" for="id_carryforward_expire_in">
|
||||
{% trans "Carryforward Expire In" %}
|
||||
</label>
|
||||
<span class="oh-info" title="{% trans 'The count of carryforward expire period' %}"></span>
|
||||
</div>
|
||||
{{form.carryforward_expire_in|add_class:"mb-3 text-color-600 px-3 p-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-xs transition duration-300 focus:border-primary-600"}}
|
||||
{{form.carryforward_expire_in.errors}}
|
||||
</div>
|
||||
|
||||
<div class="form-input-items hidden">
|
||||
<div class="flex items-center gap-1 pb-2 overflow-visible relative">
|
||||
<label class="text-xs font-medium" for="id_carryforward_expire_period">
|
||||
{% trans "Carryforward Expire Period" %}
|
||||
</label>
|
||||
<span class="oh-info me-3" title="{% trans 'The time period for the expiration of carryforward leave.' %}"></span>
|
||||
</div>
|
||||
{{form.carryforward_expire_period|add_class:"mb-3 text-color-600 px-3 p-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-xs transition duration-300 focus:border-primary-600"}}
|
||||
{{form.carryforward_expire_period.errors}}
|
||||
</div>
|
||||
|
||||
<div class="form-input-items hidden">
|
||||
<div class="flex items-center gap-1 pb-2 overflow-visible relative">
|
||||
<label for="id_carryforward_expire_date" class="text-xs font-medium">
|
||||
{% trans "Carryforward Expire Date" %}
|
||||
</label>
|
||||
<span class="oh-info me-3" title="{% trans 'The date on which carryforward leave resets to 0. After this reset, the date will be updated to the next expiration period.' %}"></span>
|
||||
</div>
|
||||
{{form.carryforward_expire_date|add_class:"mb-3 text-color-600 px-3 p-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-xs transition duration-300 focus:border-primary-600"}}
|
||||
{{form.carryforward_expire_date.errors}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- right col -->
|
||||
<div class="col-span-12 md:col-span-6">
|
||||
<div class="p-5 bg-gray-50 rounded-md border border-dark-50">
|
||||
<div class="form-input-items" >
|
||||
<label class="text-xs font-medium">{% trans "Icon" %}</label>
|
||||
<label for="fileUpload" class="text-xs font-medium flex items-center bg-white justify-center gap-2 px-4 py-2 border border-dark-50 rounded-md text-xs text-gray-700 cursor-pointer hover:bg-gray-100 transition duration-300">
|
||||
<svg class="w-4 h-4 text-primary-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1M12 12V4m0 0l4 4m-4-4L8 8">
|
||||
</path>
|
||||
</svg>
|
||||
{% trans "Choose Icon" %}
|
||||
</label>
|
||||
{{form.icon.errors}}
|
||||
<input id="fileUpload" type="file" class="hidden" accept="image/*" name="icon">
|
||||
<img id="imagePreview" class="mt-3 w-10 h-10 object-cover rounded border border-[#0000001c] hidden" alt="Preview">
|
||||
</div>
|
||||
<div class="form-input-items" >
|
||||
<label class="text-xs font-medium">{% trans "Color" %}</label>
|
||||
{{form.color}}
|
||||
{{form.color.errors}}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mb-2 resetContainer form-input-items">
|
||||
<div class="flex items-center gap-1 pb-2 overflow-visible relative ">
|
||||
<label class="text-xs font-medium" for="">{% trans "Require Attachment" %}</label>
|
||||
<span class="oh-info" title="{% trans "Do you need to attach a document for leave?" %}"></span>
|
||||
</div>
|
||||
<label class="inline-flex items-center cursor-pointer gap-3">
|
||||
<input type="checkbox" class="sr-only peer toggle-control yesOrNo" id="id_attachment" />
|
||||
<div class="relative w-9 h-5 bg-[#aeaeb2] rounded-full peer-checked:bg-[#e54f38]
|
||||
after:content-[''] after:absolute after:top-[2px] after:left-[2px]
|
||||
after:bg-white after:rounded-full after:h-4 after:w-4
|
||||
after:transition-all peer-checked:after:translate-x-4 peer-checked:after:border-white">
|
||||
</div>
|
||||
</label>
|
||||
{{form.require_attachment.errors}}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mb-2 resetContainer form-input-items">
|
||||
<div class="flex items-center gap-1 pb-2 overflow-visible relative ">
|
||||
<label class="text-xs font-medium" for="">{% trans "Exclude Company Holidays" %}</label>
|
||||
<span class="oh-info" title="{% trans "Do you need to exclude company holidays from the requested leave days?" %}"></span>
|
||||
</div>
|
||||
<label class="inline-flex items-center cursor-pointer gap-3">
|
||||
<input type="checkbox" class="sr-only peer toggle-control yesOrNo" id="id_exclude_comp_leave" />
|
||||
<div class="relative w-9 h-5 bg-[#aeaeb2] rounded-full peer-checked:bg-[#e54f38]
|
||||
after:content-[''] after:absolute after:top-[2px] after:left-[2px]
|
||||
after:bg-white after:rounded-full after:h-4 after:w-4
|
||||
after:transition-all peer-checked:after:translate-x-4 peer-checked:after:border-white">
|
||||
</div>
|
||||
</label>
|
||||
{{form.exclude_company_leave.errors}}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mb-2 resetContainer form-input-items">
|
||||
<div class="flex items-center gap-1 pb-2 overflow-visible relative ">
|
||||
<label class="text-xs font-medium" for="">{% trans "Exclude Holidays" %}</label>
|
||||
<span class="oh-info" title="{% trans "Do you need to exclude public holidays from the requested leave days?" %}"></span>
|
||||
</div>
|
||||
<label class="inline-flex items-center cursor-pointer gap-3">
|
||||
<input type="checkbox" class="sr-only peer toggle-control yesOrNo" id="id_exclude_public_leave" />
|
||||
<div class="relative w-9 h-5 bg-[#aeaeb2] rounded-full peer-checked:bg-[#e54f38]
|
||||
after:content-[''] after:absolute after:top-[2px] after:left-[2px]
|
||||
after:bg-white after:rounded-full after:h-4 after:w-4
|
||||
after:transition-all peer-checked:after:translate-x-4 peer-checked:after:border-white">
|
||||
</div>
|
||||
</label>
|
||||
{{form.exclude_holiday.errors}}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mb-2 resetContainer form-input-items">
|
||||
<div class="flex items-center gap-1 pb-2 overflow-visible relative ">
|
||||
<label class="text-xs font-medium" for="">{% trans "Is Encashable" %}</label>
|
||||
<span class="oh-info" title="{% trans "Do you need to encash pending leave days?" %}"></span>
|
||||
</div>
|
||||
<label class="inline-flex items-center cursor-pointer gap-3">
|
||||
{{form.is_encashable|add_class:"sr-only peer"}}
|
||||
<div class="relative w-9 h-5 bg-[#aeaeb2] rounded-full peer-checked:bg-[#e54f38]
|
||||
after:content-[''] after:absolute after:top-[2px] after:left-[2px]
|
||||
after:bg-white after:rounded-full after:h-4 after:w-4
|
||||
after:transition-all peer-checked:after:translate-x-4 peer-checked:after:border-white">
|
||||
</div>
|
||||
</label>
|
||||
{{form.is_encashable.errors}}
|
||||
</div>
|
||||
{% if not form.instance.id %}
|
||||
{% if perms.leave.add_availableleave %}
|
||||
<div class="form-input-items">
|
||||
<div class="flex items-center gap-1 pb-2 overflow-visible relative">
|
||||
<label for="id_employee_id" class="text-xs font-medium">
|
||||
{% trans "Assign to Employees" %}
|
||||
</label>
|
||||
<span class="oh-info me-3" title="{% trans 'choose employees to assign this leave type' %}"></span>
|
||||
</div>
|
||||
{{form.employee_id|add_class:"mb-3 text-color-600 px-3 p-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-xs transition duration-300 focus:border-primary-600"}}
|
||||
{{form.employee_id.errors}}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-1 justify-end pt-3 mt-3">
|
||||
<button type="submit"
|
||||
class="oh-btn oh-onboarding-card__button mt-4 oh-btn--secondary oh-btn--shadow w-100 mb-4"
|
||||
role="button">
|
||||
{% trans "Create" %}
|
||||
</button>
|
||||
</div>
|
||||
<div hidden>{{form.require_approval}}</div>
|
||||
<div hidden>{{form.require_attachment}}</div>
|
||||
<div hidden>{{form.exclude_company_leave}}</div>
|
||||
<div hidden>{{form.exclude_holiday}}</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var icon = $("#id_icon");
|
||||
icon.show();
|
||||
document.getElementById('fileUpload').addEventListener('change', function () {
|
||||
const file = this.files[0];
|
||||
const preview = document.getElementById('imagePreview');
|
||||
|
||||
if (file && file.type.startsWith('image/')) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function (e) {
|
||||
preview.src = e.target.result;
|
||||
preview.classList.remove('hidden');
|
||||
}
|
||||
reader.readAsDataURL(file);
|
||||
} else {
|
||||
preview.src = '';
|
||||
preview.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
function toggleInput(inputSelector, shouldShow = null) {
|
||||
const $target = $(inputSelector).closest(".form-input-items");
|
||||
const $targetInput = $(inputSelector)
|
||||
if (shouldShow === null) {
|
||||
$target.toggle();
|
||||
} else if (shouldShow) {
|
||||
$target.removeClass("hidden");
|
||||
$targetInput.prop("required", true);
|
||||
} else {
|
||||
$target.addClass("hidden");
|
||||
$targetInput.prop("required", false);
|
||||
}
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
|
||||
function initializeResetFields() {
|
||||
const $reset = $("[name='reset']");
|
||||
const isResetChecked = $reset.is(":checked");
|
||||
|
||||
// Toggle reset-related fields
|
||||
toggleInput($("[name='reset_based']"), isResetChecked);
|
||||
toggleInput($("[name='carryforward_type']"), isResetChecked);
|
||||
|
||||
// Handle dependent fields based on reset_based value
|
||||
const resetBasedValue = $("[name='reset_based']").val();
|
||||
toggleInput($("[name='reset_month']"), isResetChecked && resetBasedValue === "yearly");
|
||||
toggleInput($("[name='reset_day']"), isResetChecked && (resetBasedValue === "yearly" || resetBasedValue === "monthly"));
|
||||
toggleInput($("[name='reset_weekend']"), isResetChecked && resetBasedValue === "weekly");
|
||||
|
||||
// Handle carryforward fields
|
||||
const carryforwardTypeValue = $("[name='carryforward_type']").val();
|
||||
toggleInput($("[name='carryforward_max']"), isResetChecked && (carryforwardTypeValue === "carryforward" || carryforwardTypeValue === "carryforward expire"));
|
||||
toggleInput($("[name='carryforward_expire_in']"), isResetChecked && carryforwardTypeValue === "carryforward expire");
|
||||
toggleInput($("[name='carryforward_expire_date']"), isResetChecked && carryforwardTypeValue === "carryforward expire");
|
||||
toggleInput($("[name='carryforward_expire_period']"), isResetChecked && carryforwardTypeValue === "carryforward expire");
|
||||
}
|
||||
|
||||
// Call initialization immediately
|
||||
initializeResetFields();
|
||||
|
||||
const $limitLeave = $("[name='limit_leave']");
|
||||
const $countInput = $("[name='count']");
|
||||
|
||||
toggleInput($countInput, $limitLeave.is(":checked"));
|
||||
|
||||
$limitLeave.on("change", function () {
|
||||
toggleInput($countInput, $(this).is(":checked"));
|
||||
});
|
||||
|
||||
$("[name='reset']").on("change", function () {
|
||||
toggleInput($("[name='reset_based']"), $(this).is(":checked"));
|
||||
toggleInput($("[name='carryforward_type']"), $(this).is(":checked"));
|
||||
|
||||
if (!$(this).is(":checked")) {
|
||||
toggleInput("[name='reset_month']", false);
|
||||
toggleInput("[name='reset_day']", false);
|
||||
toggleInput($("[name='reset_weekend']"), false);
|
||||
toggleInput($("[name='carryforward_max']"), false);
|
||||
toggleInput($("[name='carryforward_expire_in']"), false);
|
||||
toggleInput($("[name='carryforward_expire_date']"), false);
|
||||
toggleInput($("[name='carryforward_expire_period']"), false);
|
||||
}
|
||||
});
|
||||
|
||||
$("[name='reset_based']").on("change", function () {
|
||||
const value = $(this).val();
|
||||
if (value == "yearly") {
|
||||
toggleInput($("[name='reset_month']"), true);
|
||||
toggleInput($("[name='reset_day']"), true);
|
||||
toggleInput($("[name='reset_weekend']"), false);
|
||||
|
||||
}
|
||||
if (value == "monthly") {
|
||||
toggleInput($("[name='reset_day']"), true);
|
||||
toggleInput($("[name='reset_month']"), false);
|
||||
toggleInput($("[name='reset_weekend']"), false);
|
||||
}
|
||||
if (value == "weekly") {
|
||||
toggleInput($("[name='reset_weekend']"), true);
|
||||
toggleInput($("[name='reset_month']"), false);
|
||||
toggleInput($("[name='reset_day']"), false);
|
||||
}
|
||||
});
|
||||
$("[name='carryforward_type']").on("change", function () {
|
||||
const value = $(this).val();
|
||||
if (value == "no carryforward") {
|
||||
toggleInput($("[name='carryforward_max']"), false);
|
||||
toggleInput($("[name='carryforward_expire_in']"), false);
|
||||
toggleInput($("[name='carryforward_expire_date']"), false);
|
||||
toggleInput($("[name='carryforward_expire_period']"), false);
|
||||
|
||||
}
|
||||
if (value == "carryforward") {
|
||||
toggleInput($("[name='carryforward_max']"), true);
|
||||
toggleInput($("[name='carryforward_expire_in']"), false);
|
||||
toggleInput($("[name='carryforward_expire_date']"), false);
|
||||
toggleInput($("[name='carryforward_expire_period']"), false);
|
||||
|
||||
}
|
||||
if (value == "carryforward expire") {
|
||||
toggleInput($("[name='carryforward_max']"), true);
|
||||
toggleInput($("[name='carryforward_expire_in']"), true);
|
||||
toggleInput($("[name='carryforward_expire_date']"), true);
|
||||
toggleInput($("[name='carryforward_expire_period']"), true);
|
||||
//toggleInput($("[name='reset_day']"), false);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
// leave total days calculation
|
||||
$("#id_period_in, #id_count").change(function () {
|
||||
const month = 30;
|
||||
const year = 365;
|
||||
const day = 1;
|
||||
var totalDays = 0;
|
||||
var unit = $("#id_period_in").val();
|
||||
var count = $("#id_count").val();
|
||||
|
||||
if (unit == "day") {
|
||||
totalDays = day * count;
|
||||
} else if (unit == "month") {
|
||||
totalDays = month * count;
|
||||
} else if (unit == "year") {
|
||||
totalDays = year * count;
|
||||
}
|
||||
$("#id_total_days").val(totalDays);
|
||||
});
|
||||
|
||||
//check the yes or no fields
|
||||
if ($('#id_require_approval').val() == 'no') {
|
||||
$('#id_approval').prop('checked', false);
|
||||
}
|
||||
else{
|
||||
$('#id_approval').prop('checked', true);
|
||||
}
|
||||
if ($('#id_require_attachment').val() == 'no') {
|
||||
$('#id_attachment').prop('checked', false);
|
||||
}
|
||||
else{
|
||||
$('#id_attachment').prop('checked', true);
|
||||
}
|
||||
if ($('#id_exclude_company_leave').val() == 'no') {
|
||||
$('#id_exclude_comp_leave').prop('checked', false);
|
||||
}
|
||||
else{
|
||||
$('#id_exclude_comp_leave').prop('checked', true);
|
||||
}
|
||||
if ($('#id_exclude_holiday').val() == 'no') {
|
||||
$('#id_exclude_public_leave').prop('checked', false);
|
||||
}
|
||||
else{
|
||||
$('#id_exclude_public_leave').prop('checked', true);
|
||||
}
|
||||
});
|
||||
|
||||
function checkYesOrNoFields(){
|
||||
|
||||
if ($('#id_approval').is(":checked")) {
|
||||
$('#id_require_approval').val('yes');
|
||||
}
|
||||
else{
|
||||
$('#id_require_approval').val('no') ;
|
||||
}
|
||||
if ($('#id_attachment').is(":checked")) {
|
||||
$('#id_require_attachment').val('yes');
|
||||
}
|
||||
else{
|
||||
$('#id_require_attachment').val('no');
|
||||
}
|
||||
if ($('#id_exclude_comp_leave').is(":checked")) {
|
||||
$('#id_exclude_company_leave').val('yes');
|
||||
}
|
||||
else{
|
||||
$('#id_exclude_company_leave').val('no')
|
||||
}
|
||||
if ($('#id_exclude_public_leave').is(":checked")) {
|
||||
$('#id_exclude_holiday').val('yes');
|
||||
}
|
||||
else{
|
||||
$('#id_exclude_holiday').val('no');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$('.yesOrNo').change(function(){
|
||||
checkYesOrNoFields()
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
525
horilla_theme/templates/leave/leave_type/leave_type_update.html
Normal file
525
horilla_theme/templates/leave/leave_type/leave_type_update.html
Normal file
@@ -0,0 +1,525 @@
|
||||
{% extends 'index.html' %}
|
||||
{% load static widget_tweaks %}
|
||||
{% load i18n %}
|
||||
{% block content %}
|
||||
{% if form.errors %}
|
||||
<!-- form errors -->
|
||||
<div class="oh-wrapper">
|
||||
<div class="oh-alert-container">
|
||||
|
||||
{% for error in form.non_field_errors %}
|
||||
<div class="oh-alert oh-alert--animated oh-alert--danger">
|
||||
{{ error }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<div class="bg-white p-5 pe-2 pt-3 rounded-md shadow-card w-full lg:w-2/4 m-auto">
|
||||
<h3 class="text-lg font-semibold mb-3">{% trans "Update Leave Type" %}</h3>
|
||||
<form method="post" enctype="multipart/form-data">
|
||||
{% csrf_token %}
|
||||
<div class="grid grid-cols-12 gap-4 ">
|
||||
<div class="col-span-12 md:col-span-6 rounded-md border border-dark-50 p-5 bg-gray-50">
|
||||
<div class="form-input-items" >
|
||||
<label class="text-xs font-medium">{% trans "Name" %}</label>
|
||||
{{form.name}}
|
||||
{{form.name.errors}}
|
||||
</div>
|
||||
|
||||
<div class="form-input-items" >
|
||||
<label class="text-xs font-medium">{% trans "Is paid" %}</label>
|
||||
{{form.payment}}
|
||||
{{form.payment.errors}}
|
||||
</div>
|
||||
|
||||
<!-- Limit Leave days Toggle -->
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center gap-1 pb-2 overflow-visible relative form-input-items">
|
||||
<label class="text-xs font-medium" for="id_reset">{% trans "Limit Leave Days" %}</label>
|
||||
<span class="oh-info" title="{% trans "Do you want to limit leave days for this leave type?" %}"></span>
|
||||
</div>
|
||||
<div class="form-input-items" >
|
||||
<label class="inline-flex items-center cursor-pointer gap-3">
|
||||
{{form.limit_leave|add_class:"sr-only peer"}}
|
||||
<div class="relative w-9 h-5 bg-[#aeaeb2] rounded-full peer-checked:bg-[#e54f38]
|
||||
after:content-[''] after:absolute after:top-[2px] after:left-[2px]
|
||||
after:bg-white after:rounded-full after:h-4 after:w-4
|
||||
after:transition-all peer-checked:after:translate-x-4 peer-checked:after:border-white">
|
||||
</div>
|
||||
</label>
|
||||
{{form.limit_leave.errors}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-input-items" >
|
||||
<div class="totalDaysContainer">
|
||||
<label class="text-xs font-medium" for="">{% trans "Total Days" %}</label>
|
||||
{{form.count|add_class:"mb-3 text-color-600 px-3 p-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-xs transition duration-300 focus:border-primary-600"}}
|
||||
{{form.count.errors}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="oh-input-group">
|
||||
{{form.period_in}}
|
||||
{{form.period_in.errors}}
|
||||
</div>
|
||||
|
||||
<div class="oh-input-group">
|
||||
{{form.total_days}}
|
||||
{{form.total_days.errors}}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mb-2 resetContainer form-input-items">
|
||||
<div class="flex items-center gap-1 pb-2 overflow-visible relative ">
|
||||
<label class="text-xs font-medium" for="">{% trans "Require Approval" %}</label>
|
||||
<span class="oh-info" title="{% trans "Do you need approval for leave from the authority?" %}"></span>
|
||||
</div>
|
||||
<label class="inline-flex items-center cursor-pointer gap-3">
|
||||
<input type="checkbox" class="sr-only peer toggle-contro yesOrNol" id="id_approval" checked />
|
||||
<div class="relative w-9 h-5 bg-[#aeaeb2] rounded-full peer-checked:bg-[#e54f38]
|
||||
after:content-[''] after:absolute after:top-[2px] after:left-[2px]
|
||||
after:bg-white after:rounded-full after:h-4 after:w-4
|
||||
after:transition-all peer-checked:after:translate-x-4 peer-checked:after:border-white">
|
||||
</div>
|
||||
</label>
|
||||
{{form.reset.errors}}
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Reset Leave Toggle -->
|
||||
<div class="flex items-center justify-between mb-2 resetContainer form-input-items">
|
||||
<div class="flex items-center gap-1 pb-2 overflow-visible relative ">
|
||||
<label class="text-xs font-medium" for="id_reset">{% trans "Reset" %}</label>
|
||||
<span class="oh-info" title="{% trans "Do you need to reset leaves based on conditions?" %}"></span>
|
||||
</div>
|
||||
<label class="inline-flex items-center cursor-pointer gap-3">
|
||||
{{form.reset|add_class:"sr-only peer"}}
|
||||
<div class="relative w-9 h-5 bg-[#aeaeb2] rounded-full peer-checked:bg-[#e54f38]
|
||||
after:content-[''] after:absolute after:top-[2px] after:left-[2px]
|
||||
after:bg-white after:rounded-full after:h-4 after:w-4
|
||||
after:transition-all peer-checked:after:translate-x-4 peer-checked:after:border-white">
|
||||
</div>
|
||||
</label>
|
||||
{{form.reset.errors}}
|
||||
</div>
|
||||
<div class="form-input-items hidden" >
|
||||
<div class="flex items-center gap-1 pb-2 overflow-visible relative" id="reset_based_id">
|
||||
<label class="text-xs font-medium" for="id_reset_based">
|
||||
{% trans "Reset Period" %}
|
||||
</label>
|
||||
<span class="oh-info" title="{% trans "The time period for the leave to reset." %}"></span>
|
||||
</div>
|
||||
{{form.reset_based|add_class:"mb-3 text-color-600 px-3 p-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-xs transition duration-300 focus:border-primary-600"}}
|
||||
{{form.reset_based.errors}}
|
||||
</div>
|
||||
<div class="form-input-items hidden" >
|
||||
<label class="text-xs font-medium" for="id_reset_month">{% trans "Reset Month" %}</label>
|
||||
{{form.reset_month|add_class:"mb-3 text-color-600 px-3 p-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-xs transition duration-300 focus:border-primary-600"}}
|
||||
{{form.reset_month.errors}}
|
||||
</div>
|
||||
|
||||
<div class="form-input-items hidden" >
|
||||
<label class="text-xs font-medium" for="id_reset_day">{% trans "Reset Day" %}</label>
|
||||
{{form.reset_day|add_class:"mb-3 text-color-600 px-3 p-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-xs transition duration-300 focus:border-primary-600"}}
|
||||
{{form.reset_day.errors}}
|
||||
</div>
|
||||
|
||||
<div class="form-input-items hidden" >
|
||||
<label class="text-xs font-medium" for="id_reset_weekend">{% trans "Reset Weekday" %}</label>
|
||||
{{form.reset_weekend|add_class:"mb-3 text-color-600 px-3 p-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-xs transition duration-300 focus:border-primary-600"}}
|
||||
{{form.reset_weekend.errors}}
|
||||
</div>
|
||||
|
||||
<!-- Carry Forward -->
|
||||
<div class="form-input-items hidden">
|
||||
<div class="flex items-center gap-1 pb-2 overflow-carryforward_type relative">
|
||||
<label class="text-xs font-medium" for="">
|
||||
{% trans "Carryforward Type" %}
|
||||
</label>
|
||||
<span class="oh-info" title="{% trans 'The conditions for carrying forward the balance of leave.' %}"></span>
|
||||
</div>
|
||||
{{form.carryforward_type|add_class:"mb-3 text-color-600 px-3 p-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-xs transition duration-300 focus:border-primary-600"}}
|
||||
{{form.carryforward_type.errors}}
|
||||
</div>
|
||||
|
||||
<div class="form-input-items hidden">
|
||||
<div class="flex items-center gap-1 pb-2 overflow-visible relative ">
|
||||
<label class="text-xs font-medium" for="id_carryforward_max">
|
||||
{% trans "Carryforward Max" %}
|
||||
</label>
|
||||
<span class="oh-info" title="{% trans "The maximum number of leave that can be carried forward." %}"></span>
|
||||
</div>
|
||||
{{form.carryforward_max|add_class:"mb-3 text-color-600 px-3 p-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-xs transition duration-300 focus:border-primary-600"}}
|
||||
{{form.carryforward_max.errors}}
|
||||
</div>
|
||||
|
||||
<div class="form-input-items hidden">
|
||||
<div class="flex items-center gap-1 pb-2 overflow-visible relative">
|
||||
<label class="text-xs font-medium" for="id_carryforward_expire_in">
|
||||
{% trans "Carryforward Expire In" %}
|
||||
</label>
|
||||
<span class="oh-info" title="{% trans 'The count of carryforward expire period' %}"></span>
|
||||
</div>
|
||||
{{form.carryforward_expire_in|add_class:"mb-3 text-color-600 px-3 p-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-xs transition duration-300 focus:border-primary-600"}}
|
||||
{{form.carryforward_expire_in.errors}}
|
||||
</div>
|
||||
|
||||
<div class="form-input-items hidden">
|
||||
<div class="flex items-center gap-1 pb-2 overflow-visible relative">
|
||||
<label class="text-xs font-medium" for="id_carryforward_expire_period">
|
||||
{% trans "Carryforward Expire Period" %}
|
||||
</label>
|
||||
<span class="oh-info me-3" title="{% trans 'The time period for the expiration of carryforward leave.' %}"></span>
|
||||
</div>
|
||||
{{form.carryforward_expire_period|add_class:"mb-3 text-color-600 px-3 p-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-xs transition duration-300 focus:border-primary-600"}}
|
||||
{{form.carryforward_expire_period.errors}}
|
||||
</div>
|
||||
|
||||
<div class="form-input-items hidden">
|
||||
<div class="flex items-center gap-1 pb-2 overflow-visible relative">
|
||||
<label for="id_carryforward_expire_date" class="text-xs font-medium">
|
||||
{% trans "Carryforward Expire Date" %}
|
||||
</label>
|
||||
<span class="oh-info me-3" title="{% trans 'The date on which carryforward leave resets to 0. After this reset, the date will be updated to the next expiration period.' %}"></span>
|
||||
</div>
|
||||
{{form.carryforward_expire_date|add_class:"mb-3 text-color-600 px-3 p-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-xs transition duration-300 focus:border-primary-600"}}
|
||||
{{form.carryforward_expire_date.errors}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- right col -->
|
||||
<div class="col-span-12 md:col-span-6">
|
||||
<div class="p-5 bg-gray-50 rounded-md border border-dark-50">
|
||||
<div class="form-input-items" >
|
||||
<label class="text-xs font-medium">{% trans "Icon" %}</label>
|
||||
<label for="fileUpload" class="text-xs font-medium flex items-center bg-white justify-center gap-2 px-4 py-2 border border-dark-50 rounded-md text-xs text-gray-700 cursor-pointer hover:bg-gray-100 transition duration-300">
|
||||
<svg class="w-4 h-4 text-primary-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1M12 12V4m0 0l4 4m-4-4L8 8">
|
||||
</path>
|
||||
</svg>
|
||||
{% trans "Choose Icon" %}
|
||||
</label>
|
||||
{{form.icon.errors}}
|
||||
<input id="fileUpload" type="file" class="hidden" accept="image/*" name="icon">
|
||||
<img id="imagePreview" class="mt-3 w-10 h-10 object-cover rounded border border-[#0000001c] hidden" alt="Preview">
|
||||
</div>
|
||||
<div class="form-input-items" >
|
||||
<label class="text-xs font-medium">{% trans "Color" %}</label>
|
||||
{{form.color}}
|
||||
{{form.color.errors}}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mb-2 resetContainer form-input-items">
|
||||
<div class="flex items-center gap-1 pb-2 overflow-visible relative ">
|
||||
<label class="text-xs font-medium" for="">{% trans "Require Attachment" %}</label>
|
||||
<span class="oh-info" title="{% trans "Do you need to attach a document for leave?" %}"></span>
|
||||
</div>
|
||||
<label class="inline-flex items-center cursor-pointer gap-3">
|
||||
<input type="checkbox" class="sr-only peer toggle-control yesOrNo" id="id_attachment" />
|
||||
<div class="relative w-9 h-5 bg-[#aeaeb2] rounded-full peer-checked:bg-[#e54f38]
|
||||
after:content-[''] after:absolute after:top-[2px] after:left-[2px]
|
||||
after:bg-white after:rounded-full after:h-4 after:w-4
|
||||
after:transition-all peer-checked:after:translate-x-4 peer-checked:after:border-white">
|
||||
</div>
|
||||
</label>
|
||||
{{form.require_attachment.errors}}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mb-2 resetContainer form-input-items">
|
||||
<div class="flex items-center gap-1 pb-2 overflow-visible relative ">
|
||||
<label class="text-xs font-medium" for="">{% trans "Exclude Company Holidays" %}</label>
|
||||
<span class="oh-info" title="{% trans "Do you need to exclude company holidays from the requested leave days?" %}"></span>
|
||||
</div>
|
||||
<label class="inline-flex items-center cursor-pointer gap-3">
|
||||
<input type="checkbox" class="sr-only peer toggle-control yesOrNo" id="id_exclude_comp_leave" />
|
||||
<div class="relative w-9 h-5 bg-[#aeaeb2] rounded-full peer-checked:bg-[#e54f38]
|
||||
after:content-[''] after:absolute after:top-[2px] after:left-[2px]
|
||||
after:bg-white after:rounded-full after:h-4 after:w-4
|
||||
after:transition-all peer-checked:after:translate-x-4 peer-checked:after:border-white">
|
||||
</div>
|
||||
</label>
|
||||
{{form.exclude_company_leave.errors}}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mb-2 resetContainer form-input-items">
|
||||
<div class="flex items-center gap-1 pb-2 overflow-visible relative ">
|
||||
<label class="text-xs font-medium" for="">{% trans "Exclude Holidays" %}</label>
|
||||
<span class="oh-info" title="{% trans "Do you need to exclude public holidays from the requested leave days?" %}"></span>
|
||||
</div>
|
||||
<label class="inline-flex items-center cursor-pointer gap-3">
|
||||
<input type="checkbox" class="sr-only peer toggle-control yesOrNo" id="id_exclude_public_leave" />
|
||||
<div class="relative w-9 h-5 bg-[#aeaeb2] rounded-full peer-checked:bg-[#e54f38]
|
||||
after:content-[''] after:absolute after:top-[2px] after:left-[2px]
|
||||
after:bg-white after:rounded-full after:h-4 after:w-4
|
||||
after:transition-all peer-checked:after:translate-x-4 peer-checked:after:border-white">
|
||||
</div>
|
||||
</label>
|
||||
{{form.exclude_holiday.errors}}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mb-2 resetContainer form-input-items">
|
||||
<div class="flex items-center gap-1 pb-2 overflow-visible relative ">
|
||||
<label class="text-xs font-medium" for="">{% trans "Is Encashable" %}</label>
|
||||
<span class="oh-info" title="{% trans "Do you need to encash pending leave days?" %}"></span>
|
||||
</div>
|
||||
<label class="inline-flex items-center cursor-pointer gap-3">
|
||||
{{form.is_encashable|add_class:"sr-only peer"}}
|
||||
<div class="relative w-9 h-5 bg-[#aeaeb2] rounded-full peer-checked:bg-[#e54f38]
|
||||
after:content-[''] after:absolute after:top-[2px] after:left-[2px]
|
||||
after:bg-white after:rounded-full after:h-4 after:w-4
|
||||
after:transition-all peer-checked:after:translate-x-4 peer-checked:after:border-white">
|
||||
</div>
|
||||
</label>
|
||||
{{form.is_encashable.errors}}
|
||||
</div>
|
||||
{% if not form.instance.id %}
|
||||
{% if perms.leave.add_availableleave %}
|
||||
<div class="form-input-items">
|
||||
<div class="flex items-center gap-1 pb-2 overflow-visible relative">
|
||||
<label for="id_employee_id" class="text-xs font-medium">
|
||||
{% trans "Assign to Employees" %}
|
||||
</label>
|
||||
<span class="oh-info me-3" title="{% trans 'choose employees to assign this leave type' %}"></span>
|
||||
</div>
|
||||
{{form.employee_id|add_class:"mb-3 text-color-600 px-3 p-2 placeholder:text-xs w-full border border-dark-50 rounded-md focus-visible:outline-0 placeholder:text-dark-100 text-xs transition duration-300 focus:border-primary-600"}}
|
||||
{{form.employee_id.errors}}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-1 justify-end pt-3 mt-3">
|
||||
<button type="submit"
|
||||
class="oh-btn oh-onboarding-card__button mt-4 oh-btn--secondary oh-btn--shadow w-100 mb-4"
|
||||
role="button">
|
||||
{% trans "Update" %}
|
||||
</button>
|
||||
</div>
|
||||
<div hidden>{{form.require_approval}}</div>
|
||||
<div hidden>{{form.require_attachment}}</div>
|
||||
<div hidden>{{form.exclude_company_leave}}</div>
|
||||
<div hidden>{{form.exclude_holiday}}</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var icon = $("#id_icon");
|
||||
icon.show();
|
||||
document.getElementById('fileUpload').addEventListener('change', function () {
|
||||
const file = this.files[0];
|
||||
const preview = document.getElementById('imagePreview');
|
||||
|
||||
if (file && file.type.startsWith('image/')) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function (e) {
|
||||
preview.src = e.target.result;
|
||||
preview.classList.remove('hidden');
|
||||
}
|
||||
reader.readAsDataURL(file);
|
||||
} else {
|
||||
preview.src = '';
|
||||
preview.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
function toggleInput(inputSelector, shouldShow = null) {
|
||||
const $target = $(inputSelector).closest(".form-input-items");
|
||||
const $targetInput = $(inputSelector)
|
||||
if (shouldShow === null) {
|
||||
$target.toggle();
|
||||
} else if (shouldShow) {
|
||||
$target.removeClass("hidden");
|
||||
$targetInput.prop("required", true);
|
||||
} else {
|
||||
$target.addClass("hidden");
|
||||
$targetInput.prop("required", false);
|
||||
}
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
|
||||
function initializeResetFields() {
|
||||
const $reset = $("[name='reset']");
|
||||
const isResetChecked = $reset.is(":checked");
|
||||
|
||||
// Toggle reset-related fields
|
||||
toggleInput($("[name='reset_based']"), isResetChecked);
|
||||
toggleInput($("[name='carryforward_type']"), isResetChecked);
|
||||
|
||||
// Handle dependent fields based on reset_based value
|
||||
const resetBasedValue = $("[name='reset_based']").val();
|
||||
toggleInput($("[name='reset_month']"), isResetChecked && resetBasedValue === "yearly");
|
||||
toggleInput($("[name='reset_day']"), isResetChecked && (resetBasedValue === "yearly" || resetBasedValue === "monthly"));
|
||||
toggleInput($("[name='reset_weekend']"), isResetChecked && resetBasedValue === "weekly");
|
||||
|
||||
// Handle carryforward fields
|
||||
const carryforwardTypeValue = $("[name='carryforward_type']").val();
|
||||
toggleInput($("[name='carryforward_max']"), isResetChecked && (carryforwardTypeValue === "carryforward" || carryforwardTypeValue === "carryforward expire"));
|
||||
toggleInput($("[name='carryforward_expire_in']"), isResetChecked && carryforwardTypeValue === "carryforward expire");
|
||||
toggleInput($("[name='carryforward_expire_date']"), isResetChecked && carryforwardTypeValue === "carryforward expire");
|
||||
toggleInput($("[name='carryforward_expire_period']"), isResetChecked && carryforwardTypeValue === "carryforward expire");
|
||||
}
|
||||
|
||||
// Call initialization immediately
|
||||
initializeResetFields();
|
||||
|
||||
const $limitLeave = $("[name='limit_leave']");
|
||||
const $countInput = $("[name='count']");
|
||||
|
||||
toggleInput($countInput, $limitLeave.is(":checked"));
|
||||
|
||||
$limitLeave.on("change", function () {
|
||||
toggleInput($countInput, $(this).is(":checked"));
|
||||
});
|
||||
|
||||
$("[name='reset']").on("change", function () {
|
||||
toggleInput($("[name='reset_based']"), $(this).is(":checked"));
|
||||
toggleInput($("[name='carryforward_type']"), $(this).is(":checked"));
|
||||
|
||||
if (!$(this).is(":checked")) {
|
||||
toggleInput("[name='reset_month']", false);
|
||||
toggleInput("[name='reset_day']", false);
|
||||
toggleInput($("[name='reset_weekend']"), false);
|
||||
toggleInput($("[name='carryforward_max']"), false);
|
||||
toggleInput($("[name='carryforward_expire_in']"), false);
|
||||
toggleInput($("[name='carryforward_expire_date']"), false);
|
||||
toggleInput($("[name='carryforward_expire_period']"), false);
|
||||
}
|
||||
});
|
||||
|
||||
$("[name='reset_based']").on("change", function () {
|
||||
const value = $(this).val();
|
||||
if (value == "yearly") {
|
||||
toggleInput($("[name='reset_month']"), true);
|
||||
toggleInput($("[name='reset_day']"), true);
|
||||
toggleInput($("[name='reset_weekend']"), false);
|
||||
|
||||
}
|
||||
if (value == "monthly") {
|
||||
toggleInput($("[name='reset_day']"), true);
|
||||
toggleInput($("[name='reset_month']"), false);
|
||||
toggleInput($("[name='reset_weekend']"), false);
|
||||
}
|
||||
if (value == "weekly") {
|
||||
toggleInput($("[name='reset_weekend']"), true);
|
||||
toggleInput($("[name='reset_month']"), false);
|
||||
toggleInput($("[name='reset_day']"), false);
|
||||
}
|
||||
});
|
||||
$("[name='carryforward_type']").on("change", function () {
|
||||
const value = $(this).val();
|
||||
if (value == "no carryforward") {
|
||||
toggleInput($("[name='carryforward_max']"), false);
|
||||
toggleInput($("[name='carryforward_expire_in']"), false);
|
||||
toggleInput($("[name='carryforward_expire_date']"), false);
|
||||
toggleInput($("[name='carryforward_expire_period']"), false);
|
||||
|
||||
}
|
||||
if (value == "carryforward") {
|
||||
toggleInput($("[name='carryforward_max']"), true);
|
||||
toggleInput($("[name='carryforward_expire_in']"), false);
|
||||
toggleInput($("[name='carryforward_expire_date']"), false);
|
||||
toggleInput($("[name='carryforward_expire_period']"), false);
|
||||
|
||||
}
|
||||
if (value == "carryforward expire") {
|
||||
toggleInput($("[name='carryforward_max']"), true);
|
||||
toggleInput($("[name='carryforward_expire_in']"), true);
|
||||
toggleInput($("[name='carryforward_expire_date']"), true);
|
||||
toggleInput($("[name='carryforward_expire_period']"), true);
|
||||
//toggleInput($("[name='reset_day']"), false);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
// leave total days calculation
|
||||
$("#id_period_in, #id_count").change(function () {
|
||||
const month = 30;
|
||||
const year = 365;
|
||||
const day = 1;
|
||||
var totalDays = 0;
|
||||
var unit = $("#id_period_in").val();
|
||||
var count = $("#id_count").val();
|
||||
|
||||
if (unit == "day") {
|
||||
totalDays = day * count;
|
||||
} else if (unit == "month") {
|
||||
totalDays = month * count;
|
||||
} else if (unit == "year") {
|
||||
totalDays = year * count;
|
||||
}
|
||||
$("#id_total_days").val(totalDays);
|
||||
});
|
||||
|
||||
//check the yes or no fields
|
||||
if ($('#id_require_approval').val() == 'no') {
|
||||
$('#id_approval').prop('checked', false);
|
||||
}
|
||||
else{
|
||||
$('#id_approval').prop('checked', true);
|
||||
}
|
||||
if ($('#id_require_attachment').val() == 'no') {
|
||||
$('#id_attachment').prop('checked', false);
|
||||
}
|
||||
else{
|
||||
$('#id_attachment').prop('checked', true);
|
||||
}
|
||||
if ($('#id_exclude_company_leave').val() == 'no') {
|
||||
$('#id_exclude_comp_leave').prop('checked', false);
|
||||
}
|
||||
else{
|
||||
$('#id_exclude_comp_leave').prop('checked', true);
|
||||
}
|
||||
if ($('#id_exclude_holiday').val() == 'no') {
|
||||
$('#id_exclude_public_leave').prop('checked', false);
|
||||
}
|
||||
else{
|
||||
$('#id_exclude_public_leave').prop('checked', true);
|
||||
}
|
||||
});
|
||||
|
||||
function checkYesOrNoFields(){
|
||||
|
||||
if ($('#id_approval').is(":checked")) {
|
||||
$('#id_require_approval').val('yes');
|
||||
}
|
||||
else{
|
||||
$('#id_require_approval').val('no') ;
|
||||
}
|
||||
if ($('#id_attachment').is(":checked")) {
|
||||
$('#id_require_attachment').val('yes');
|
||||
}
|
||||
else{
|
||||
$('#id_require_attachment').val('no');
|
||||
}
|
||||
if ($('#id_exclude_comp_leave').is(":checked")) {
|
||||
$('#id_exclude_company_leave').val('yes');
|
||||
}
|
||||
else{
|
||||
$('#id_exclude_company_leave').val('no')
|
||||
}
|
||||
if ($('#id_exclude_public_leave').is(":checked")) {
|
||||
$('#id_exclude_holiday').val('yes');
|
||||
}
|
||||
else{
|
||||
$('#id_exclude_holiday').val('no');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$('.yesOrNo').change(function(){
|
||||
checkYesOrNoFields()
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
@@ -88,7 +88,7 @@
|
||||
<div id="joinLegend" class="mt-4 flex justify-center flex-wrap gap-3 text-xs"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% if perms.offboarding.view_offboardingtask %}
|
||||
<div class="xl:col-span-4 md:col-span-6 col-span-12 bg-white p-6 rounded-md shadow-card">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
@@ -96,7 +96,7 @@
|
||||
</div>
|
||||
<div class="overflow-hidden overflow-x-auto">
|
||||
<div
|
||||
hx-get="{% url 'list-dashboard-task-status' %}" hx-trigger="load"
|
||||
hx-get="{% url 'list-dashboard-task-status' %}" hx-trigger="load"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -122,7 +122,7 @@
|
||||
</div>
|
||||
<div class="overflow-hidden overflow-x-auto">
|
||||
<div
|
||||
hx-get="{% url 'dashboard-asset-table-cbv' %}" hx-trigger="load"
|
||||
hx-get="{% url 'dashboard-asset-table-cbv' %}" hx-trigger="load"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -134,7 +134,7 @@
|
||||
</div>
|
||||
<div class="overflow-hidden overflow-x-auto">
|
||||
<div
|
||||
hx-get="{% url 'dashboard-feedback-table-cbv' %}" hx-trigger="load"
|
||||
hx-get="{% url 'dashboard-feedback-table-cbv' %}" hx-trigger="load"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -143,5 +143,3 @@
|
||||
<script src="{% static 'offboarding/dashboard.js' %}"></script>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
|
||||
@@ -52,9 +52,7 @@ class ConditionForm(forms.ModelForm):
|
||||
for field_name, field in self.fields.items():
|
||||
widget = field.widget
|
||||
if isinstance(widget, (forms.Select,)):
|
||||
field.widget.attrs["style"] = (
|
||||
"width:100%; height:50px;border: 1px solid hsl(213deg,22%,84%);border-radius: 0rem;padding: 0.8rem 1.25rem;"
|
||||
)
|
||||
field.widget.attrs["class"] = "oh-select"
|
||||
elif isinstance(widget, (forms.DateInput)):
|
||||
field.widget.attrs.update({"class": "oh-input w-100"})
|
||||
field.initial = date.today()
|
||||
|
||||
Reference in New Issue
Block a user