From 8d92aa3b24ec6ed7d5e7ae7ba86bb0d28af8ab3f Mon Sep 17 00:00:00 2001
From: Horilla <teamhorilla@gmail.com>
Date: Thu, 4 Apr 2024 17:03:34 +0530
Subject: [PATCH] [UPDT] LEAVE: Updated department chart and leave chart to
 change with selected month

---
 leave/static/dashboard/dashboard.js           | 72 ++++++++++++++++++-
 leave/templates/leave/dashboard.html          | 41 +++++------
 .../dashboard_leave_requests.html             | 14 ++--
 3 files changed, 93 insertions(+), 34 deletions(-)

diff --git a/leave/static/dashboard/dashboard.js b/leave/static/dashboard/dashboard.js
index 3f5a74874..9fc1f9a2a 100644
--- a/leave/static/dashboard/dashboard.js
+++ b/leave/static/dashboard/dashboard.js
@@ -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);
+			},
+		});
+	});
+
 });
diff --git a/leave/templates/leave/dashboard.html b/leave/templates/leave/dashboard.html
index fb2615072..2b19066a0 100644
--- a/leave/templates/leave/dashboard.html
+++ b/leave/templates/leave/dashboard.html
@@ -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> 
diff --git a/leave/templates/leave/leave_request/dashboard_leave_requests.html b/leave/templates/leave/leave_request/dashboard_leave_requests.html
index 0897aca2e..b59075c38 100644
--- a/leave/templates/leave/leave_request/dashboard_leave_requests.html
+++ b/leave/templates/leave/leave_request/dashboard_leave_requests.html
@@ -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" %}