From 83a7e4f73d7a50930d8768d6cefacad9747d19c7 Mon Sep 17 00:00:00 2001
From: Krrish Sehgal <133865424+krrish-sehgal@users.noreply.github.com>
Date: Tue, 12 Nov 2024 15:00:51 +0530
Subject: [PATCH] fixed frontend delete in sizzle

---
 website/templates/sizzle/sizzle.html | 164 ++++++++++++++-------------
 website/views/organization.py        |   2 +
 2 files changed, 87 insertions(+), 79 deletions(-)

diff --git a/website/templates/sizzle/sizzle.html b/website/templates/sizzle/sizzle.html
index b9dd4477c..3591647d0 100644
--- a/website/templates/sizzle/sizzle.html
+++ b/website/templates/sizzle/sizzle.html
@@ -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>
@@ -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 %}
diff --git a/website/views/organization.py b/website/views/organization.py
index 7e4101a93..c0e939354 100644
--- a/website/views/organization.py
+++ b/website/views/organization.py
@@ -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,
@@ -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,