[UPDT] LEAVE: Updated department chart and leave chart to change with selected month

This commit is contained in:
Horilla
2024-04-04 17:03:34 +05:30
parent f36b7e46cd
commit 8d92aa3b24
3 changed files with 93 additions and 34 deletions

View File

@@ -19,6 +19,8 @@ $(document).ready(function () {
year = today.getFullYear();
$(".month").val(`${year}-${month}`);
$("#dash_month").val(`${year}-${month}`);
$("#dash_department_month").val(`${year}-${month}`);
$("#dash_leave_type_month").val(`${year}-${month}`);
function isChartEmpty(chartData) {
if (!chartData) {
@@ -189,7 +191,7 @@ $(document).ready(function () {
$("#employee_leave_canvas").html(
`<div style="height: 380px; display:flex;align-items: center;justify-content: center;" class="">
<div style="" class="">
<img style=" display: block;width: 70px;margin: 20px auto ;" src="/static/images/ui/attendance.png" class="" alt=""/>
<img style=" display: block;width: 70px;margin: 20px auto ;" src="/static/images/ui/attendance.png" class="" alt=""/>
<h3 style="font-size:16px" class="oh-404__subtitle">${response.message}</h3>
</div>
</div>`
@@ -213,7 +215,7 @@ $(document).ready(function () {
$("#availableLeaveContainer").html(
`<div style="height: 310px; display:flex;align-items: center;justify-content: center;" class="">
<div style="" class="">
<img style=" display: block;width: 70px;margin: 20px auto ;" src="/static/images/ui/sunbed outline.png" class="" alt=""/>
<img style=" display: block;width: 70px;margin: 20px auto ;" src="/static/images/ui/sunbed outline.png" class="" alt=""/>
<h3 style="font-size:16px" class="oh-404__subtitle">${response.message}</h3>
</div>
</div>`
@@ -280,7 +282,7 @@ $(document).ready(function () {
$("#employee_leave_canvas").html(
`<div style="height: 310px; display:flex;align-items: center;justify-content: center;" class="">
<div style="" class="">
<img style=" display: block;width: 70px;margin: 20px auto ;" src="/static/images/ui/attendance.png" class="" alt=""/>
<img style=" display: block;width: 70px;margin: 20px auto ;" src="/static/images/ui/attendance.png" class="" alt=""/>
<h3 style="font-size:16px" class="oh-404__subtitle">${response.message}</h3>
</div>
</div>`
@@ -383,4 +385,68 @@ $(document).ready(function () {
});
});
$("#dash_department_month").on("change", function () {
let month = $(this).val();
$.ajax({
type: "GET",
url: "/leave/department-leave-chart",
dataType: "json",
data: {
date: month,
},
success: function (response) {
if (isChartEmpty(response.dataset)) {
$("#department_leave_canvas").html(
`<div style="height: 310px; display:flex;align-items: center;justify-content: center;" class="">
<div style="" class="">
<img style=" display: block;width: 70px;margin: 20px auto ;" src="/static/images/ui/attendance.png" class="" alt=""/>
<h3 style="font-size:16px" class="oh-404__subtitle">${response.message}</h3>
</div>
</div>`
);
} else {
$("#department_leave_canvas").html(
'<canvas id="departmentLeave" class="pointer"></canvas>'
);
department_leave_chart(response);
}
},
error: (error) => {
console.log("Error", error);
},
});
});
$("#dash_leave_type_month").on("change", function () {
let month = $(this).val();
$.ajax({
type: "GET",
url: "/leave/leave-type-chart",
dataType: "json",
data: {
date: month,
},
success: function (response) {
if (isChartEmpty(response.dataset)) {
$("#leave_type_canvas").html(
`<div style="height: 310px; display:flex;align-items: center;justify-content: center;" class="">
<div style="" class="">
<img style=" display: block;width: 70px;margin: 20px auto ;" src="/static/images/ui/leave_types.png" class="" alt=""/>
<h3 style="font-size:16px" class="oh-404__subtitle">${response.message}</h3>
</div>
</div>`
);
} else {
$("#leave_type_canvas").html(
'<canvas id="leaveType" class="pointer"></canvas>'
);
leave_type_chart(response);
}
},
error: (error) => {
console.log("Error", error);
},
});
});
});

View File

@@ -79,7 +79,9 @@
<span class="oh-card-dashboard__title">{% trans "Employee Leaves" %}</span>
<span class="oh-card-dashboard__title float-end pointer" id="employee-next" title="{% trans "next" %}"><ion-icon name="caret-forward"></ion-icon></span>
</div>
<input type="month" class="mb-2 float-end pointer" name="" id="dash_month" />
<div class="d-flex flex-row-reverse">
<input type="month" class="mb-2 float-end pointer" name="" id="dash_month" />
</div>
<div class="oh-card-dashboard__body" id="employee_leave_canvas">
<canvas id="employeeLeave" class="pointer"></canvas>
</div>
@@ -87,7 +89,6 @@
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-4 mt-2" style = "height:400px">
<div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
<div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
<span class="oh-card-dashboard__title">{% trans "On Leave" %}</span>
</div>
@@ -115,8 +116,7 @@
<h3 style="font-size:16px" class="oh-404__subtitle">{% trans "Today is a holiday." %}</h3>
</div>
</div>
{% else %}
{% else %}
<div style="height: 380px; display:flex;align-items: center;justify-content: center;" class="">
<div style="" class="">
<img style="display: block;width: 70px;margin: 10px auto ;" src="{% static 'images/ui/attendance.png' %}" class="" alt=""/>
@@ -126,7 +126,6 @@
{% endif %}
</div>
</div>
</div>
</div>
<div class="oh-dashboard__right col-12 col-sm-12 col-md-12 col-lg-3">
@@ -154,7 +153,7 @@
<span class="oh-dashboard__event-title">{% trans "Next Holiday" %}</span>
<span class="oh-dashboard__event-main">{{next_holiday.name}}</span>
<span class="dateformat_changer oh-dashboard__event-date">{{next_holiday.start_date}}</span>
</div>
</div>
</div>
</div>
</div>
@@ -191,9 +190,7 @@
<span class="oh-card-dashboard__title">{% trans "Department Leaves" %}</span>
</div>
<div class="oh-card-dashboard__body">
{% if leave_today_employees %}
<canvas id="departmentLeave" class="pointer"></canvas>
{% elif current_date == next_holiday.start_date|date:"Y-m-d" %}
{% if current_date == next_holiday.start_date|date:"Y-m-d" %}
<div style="height: 380px; display:flex;align-items: center;justify-content: center;" class="">
<div style="" class="">
<img style=" display: block;width: 70px;margin: 20px auto ;" src="{% static 'images/ui/sunbed outline.png' %}" class="" alt=""/>
@@ -201,11 +198,11 @@
</div>
</div>
{% else %}
<div style="height: 310px; display:flex;align-items: center;justify-content: center;" class="">
<div style="" class="">
<img style=" display: block;width: 70px;margin: 10px auto ;" src="{% static 'images/ui/attendance.png' %}" class="" alt=""/>
<h3 style="font-size:16px" class="oh-404__subtitle">{% trans "No leave requests for today." %}</h3>
</div>
<div class="d-flex flex-row-reverse">
<input type="month" class="mb-2 pointer" name="" id="dash_department_month" />
</div>
<div class="oh-card-dashboard__body" id="department_leave_canvas">
<canvas id="departmentLeave" class="pointer"></canvas>
</div>
{% endif %}
</div>
@@ -214,19 +211,15 @@
<div class="col-12 col-sm-12 col-md-12 col-lg-3 mt-3">
<div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
<div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
<span class="oh-card-dashboard__title">{% trans "Leave Type - Count of approved leaves" %}</span>
<span class="oh-card-dashboard__title">{% trans "Leave Type - Count of leaves" %}</span>
</div>
<div class="oh-card-dashboard__body">
{% if leave_requests %}
<canvas id="leaveType" class="pointer"></canvas>
{% else %}
<div style="height: 310px; display:flex;align-items: center;justify-content: center;" class="">
<div style="" class="">
<img style=" display: block;width: 70px;margin: 10px auto ;" src="{% static 'images/ui/leave_types.png' %}" class="" alt=""/>
<h3 style="font-size:16px" class="oh-404__subtitle">{% trans "No leave requests for any leave type this month." %}</h3>
</div>
<div class="d-flex flex-row-reverse">
<input type="month" class="mb-2 pointer" name="" id="dash_leave_type_month" />
</div>
<div class="oh-card-dashboard__body" id="leave_type_canvas">
<canvas id="leaveType" class="pointer"></canvas>
</div>
{% endif %}
</div>
</div>
</div>

View File

@@ -18,8 +18,8 @@
</div>
<div class="oh-sticky-table__tbody" id="leaveRequestTableBody">
{% for leave_request in leave_requests %}
<div class="oh-sticky-table__tr" draggable="true" data-toggle="oh-modal-toggle" data-target="#objectDetailsModalW25"
hx-get="{% url 'one-request-view' leave_request.id %}?instances_ids={{requests_ids}}" hx-target="#objectDetailsModalW25Target">
<div class="oh-sticky-table__tr {% if leave_request.status == 'cancelled' %} diff-cell{% endif %}" data-toggle="oh-modal-toggle" data-target="#objectDetailsModalW25"
hx-get="{% url 'user-request-one' leave_request.id %}?instances_ids={{requests_ids}}" hx-target="#objectDetailsModalW25Target">
<div class="oh-sticky-table__sd">
<div class="oh-profile oh-profile--md">
@@ -30,11 +30,11 @@
<span class="oh-profile__name oh-text--dark">{{leave_request.employee_id}}</span>
</div>
</div>
<div class="oh-sticky-table__td {% if leave_request.status == 'cancelled' %} diff-cell{% endif %}">{{leave_request.leave_type_id}}</div>
<div class="oh-sticky-table__td {% if leave_request.status == 'cancelled' %} diff-cell{% endif %} dateformat_changer">{{leave_request.start_date}}</div>
<div class="oh-sticky-table__td {% if leave_request.status == 'cancelled' %} diff-cell{% endif %} dateformat_changer">{{leave_request.end_date}}</div>
<div class="oh-sticky-table__td {% if leave_request.status == 'cancelled' %} diff-cell{% endif %}">{{leave_request.requested_days}}</div>
<div class="oh-sticky-table__td {% if leave_request.status == 'cancelled' %} diff-cell{% endif %}">
<div class="oh-sticky-table__td">{{leave_request.leave_type_id}}</div>
<div class="oh-sticky-table__td dateformat_changer">{{leave_request.start_date}}</div>
<div class="oh-sticky-table__td dateformat_changer">{{leave_request.end_date}}</div>
<div class="oh-sticky-table__td" align="center">{{leave_request.requested_days}}</div>
<div class="oh-sticky-table__td">
{% if leave_request.multiple_approvals and leave_request.status == "requested" %}
<div class="oh-checkpoint-badge oh-checkpoint-badge--secondary" title="{% for manager in leave_request.multiple_approvals.managers %}{{ manager }}{% if not forloop.last %} , {% endif %}{% endfor %}">
{{leave_request.multiple_approvals.approved|length}} / {{leave_request.multiple_approvals.managers|length}} {% trans "Approved" %}