Skip to content

Commit

Permalink
fixed frontend delete in sizzle
Browse files Browse the repository at this point in the history
  • Loading branch information
@krrish-sehgal
krrish-sehgal committed Nov 12, 2024
1 parent e656d45 commit 83a7e4f
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 79 deletions.
164 changes: 85 additions & 79 deletions website/templates/sizzle/sizzle.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ <h1 class="text-4xl font-semibold text-gray-800 mb-8">Your Sizzle Report</h1>
<td class="py-3 px-4 border-b border-gray-200">
{% if user.is_authenticated %}
<button class="delete-entry bg-red-500 text-white py-1 px-3 rounded"
data-id="{{ entry.id }}">Delete</button>
data-id="{{ sizzle_data.id }}">Delete</button>
{% endif %}
</td>
</tr>
Expand Down Expand Up @@ -147,90 +147,96 @@ <h1 class="text-4xl font-semibold text-gray-800 mb-8">Your Sizzle Report</h1>
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script type="text/javascript">
$(function() {
$('input[name="daterange"]').daterangepicker({
opens: 'left',
locale: {
format: 'YYYY-MM-DD'
}
}, function(start, end, label) {
$('#report-date').text(start.format('D.M.YYYY') + ' - ' + end.format('D.M.YYYY') + ' Report');

// Fetch and update report logs
$.ajax({
url: '{% url "timelogsreport" %}',
data: {
start_date: start.format('YYYY-MM-DDTHH:mm:ssZ'),
end_date: end.format('YYYY-MM-DDTHH:mm:ssZ')
},
success: function(data) {
// if success the report-table div will be fully clean and the new data will be added for each item in the data added like present item
$('#report-table').empty();
data.forEach(function(item) {
$('#report-table').append(`
<div class="bg-white shadow-lg rounded-lg overflow-hidden mb-8">
<div class="bg-red-500 text-white text-center py-4 text-lg font-semibold">
${item.date}
</div>
<table class="min-w-full bg-white">
<thead>
<tr class="bg-red-500 text-white text-sm uppercase tracking-wider">
<th class="text-left py-3 px-4 border-b border-gray-200">Issue Title</th>
<th class="text-left py-3 px-4 border-b border-gray-200">Started</th>
<th class="text-left py-3 px-4 border-b border-gray-200">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td class="py-3 px-4 border-b border-gray-200">${item.issue_title}</td>
<td class="py-3 px-4 border-b border-gray-200">${item.start_time}</td>
<td class="py-3 px-4 border-b border-gray-200">${item.duration}</td>
<td class="py-3 px-4 border-b border-gray-200">
{% if user.is_authenticated %}
<button class="delete-entry bg-red-500 text-white py-1 px-3 rounded" data-id="${item.id}">
Delete
</button>
{% endif %}
</td>
</tr>
</tbody>
</table>
$(function() {
// Initialize daterange picker
$('input[name="daterange"]').daterangepicker({
opens: 'left',
locale: {
format: 'YYYY-MM-DD'
}
}, function(start, end, label) {
$('#report-date').text(start.format('D.M.YYYY') + ' - ' + end.format('D.M.YYYY') + ' Report');

// Fetch and update report logs
$.ajax({
url: '{% url "timelogsreport" %}',
data: {
start_date: start.format('YYYY-MM-DDTHH:mm:ssZ'),
end_date: end.format('YYYY-MM-DDTHH:mm:ssZ')
},
success: function(data) {
// Clear existing content and append the new data
$('#report-table').empty();
data.forEach(function(item) {
$('#report-table').append(`
<div class="bg-white shadow-lg rounded-lg overflow-hidden mb-8">
<div class="bg-red-500 text-white text-center py-4 text-lg font-semibold">
${item.date}
</div>
`);
});
<table class="min-w-full bg-white">
<thead>
<tr class="bg-red-500 text-white text-sm uppercase tracking-wider">
<th class="text-left py-3 px-4 border-b border-gray-200">Issue Title</th>
<th class="text-left py-3 px-4 border-b border-gray-200">Started</th>
<th class="text-left py-3 px-4 border-b border-gray-200">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td class="py-3 px-4 border-b border-gray-200">${item.issue_title}</td>
<td class="py-3 px-4 border-b border-gray-200">${item.start_time}</td>
<td class="py-3 px-4 border-b border-gray-200">${item.duration}</td>
<td class="py-3 px-4 border-b border-gray-200">
<button class="delete-entry bg-red-500 text-white py-1 px-3 rounded" data-id="${item.id}">
Delete
</button>
<span>Item ID: ${item.id}</span>
</td>
</tr>
</tbody>
</table>
</div>
`);
});
},
error: function(xhr, status, error) {
alert('An error occurred while fetching the report logs.');
}
});
});

// Event delegation for dynamically added delete buttons (moved outside the AJAX success callback)
$(document).on('click', '.delete-entry', function() {
var entryId = $(this).data('id');
if (!entryId) {
console.error("Entry ID is missing or empty.");
return;
}
if (confirm("Are you sure you want to delete this time entry?")) {
fetch("{% url 'delete_time_entry' %}", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
"X-CSRFToken": "{{ csrf_token }}",
},
error: function(xhr, status, error) {
alert('An error occurred while fetching the report logs.');
body: new URLSearchParams({ id: entryId }),
})
.then(response => response.json())
.then(data => {
if (data.success) {
console.log("Success");
// Remove the row from the table if the delete was successful
this.closest("tr").remove();
} else {
console.log("Failed");
alert("Failed to delete time entry.");
}
});
});
}
});
});

document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll(".delete-entry").forEach(function(button) {
button.addEventListener("click", function() {
const entryId = this.getAttribute("data-id");
if (confirm("Are you sure you want to delete this time entry?")) {
fetch("{% url 'delete_time_entry' %}", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-CSRFToken": "{{ csrf_token }}",
},
body: JSON.stringify({ id: entryId }),
})
.then(response => response.json())
.then(data => {
if (data.success) {
this.closest("tr").remove();
} else {
alert("Failed to delete time entry.");
}
});
}
});
});
});

</script>
{% endif %}
{% endblock content %}
2 changes: 2 additions & 0 deletions website/views/organization.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -997,6 +997,7 @@ def TimeLogListAPIView(request):
formatted_date = first_log.created.strftime("%d %B %Y")

day_data = {
"id": first_log.id,
"issue_title": issue_title,
"duration": formatted_duration,
"start_time": start_time,
Expand Down Expand Up @@ -1057,6 +1058,7 @@ def sizzle(request):
date = last_data.created.strftime("%d %B %Y")

sizzle_data = {
"id": last_data.id,
"issue_title": issue_title,
"duration": formatted_duration,
"start_time": start_time,
Expand Down

0 comments on commit 83a7e4f

Please sign in to comment.