Affected URLs page for excluded patterns working properly

Kirandawadi · Kirandawadi · commit 194929a04368 · 2024-09-25T19:28:04.000-05:00
diff --git a/sde_collections/views.py b/sde_collections/views.py
@@ -51,6 +51,8 @@
 
 User = get_user_model()
 
+from django.db.models import BooleanField, Case, Value, When, Q
+
 
 class CollectionListView(LoginRequiredMixin, ListView):
     """
@@ -235,9 +237,34 @@ class AffectedURLsListView(LoginRequiredMixin, ListView):
     context_object_name = "affected_urls"
     # paginate_by = 100
 
+    # def get_queryset(self):
+    #     self.pattern = ExcludePattern.objects.get(id=self.kwargs["id"])
+    #     queryset = self.pattern.matched_urls()
+    #     return queryset
+
     def get_queryset(self):
+        # Get the exclude pattern based on the ID from the URL kwargs
         self.pattern = ExcludePattern.objects.get(id=self.kwargs["id"])
-        queryset = self.pattern.matched_urls()
+        
+        # Get excluded URLs
+        excluded_urls = self.pattern.matched_urls().annotate(is_included=Value(False, output_field=BooleanField()))
+
+        # Get included URLs for the same collection
+        include_patterns = IncludePattern.objects.filter(collection=self.pattern.collection)
+        included_urls = CandidateURL.objects.filter(
+            collection=self.pattern.collection,
+            id__in=include_patterns.values_list('candidate_urls__id', flat=True)
+        ).distinct()
+
+        # Annotate excluded URLs with is_included if they are also in included_urls
+        queryset = excluded_urls.annotate(
+            is_included=Case(
+                When(id__in=included_urls.values('id'), then=Value(True)),
+                default=Value(False),
+                output_field=BooleanField()
+            )
+        )
+
         return queryset
 
     def get_context_data(self, **kwargs):
diff --git a/sde_indexing_helper/static/js/affected_urls.js b/sde_indexing_helper/static/js/affected_urls.js
@@ -3,18 +3,14 @@ var INDIVIDUAL_URL = 1;
 var MULTI_URL_PATTERN = 2;
 collection_id = getCollectionId();
 
-// Maybe you need to define a new DataTable for this page as well 
-// So that you can refresh it any way you want 
-// Or maybe this is not necessary
-
 $(document).ready(function () {
     // handleAjaxStartAndStop();
     initializeDataTable();
     setupClickHandlers();
-  });
+});
 
 function initializeDataTable() {
-  var affected_urls_table = $("#urlsTable").DataTable({
+  var affected_urls_table = $("#affectedURLsTable").DataTable({
       pageLength: 100,
       colReorder: true,
       stateSave: true,
@@ -34,7 +30,18 @@ function initializeDataTable() {
       orderCellsTop: true,
       pagingType: "input",
       rowId: "url"
-  }
+  },
+    // createdRow: function (row, data, dataIndex) {
+    //     // Assuming the 'Include URL' column is at index 3
+    //     let includeUrlCell = $(row).find('td').eq(2);
+
+    //     // Check if the cell has the cross-mark
+    //     if (includeUrlCell.find('i.cross-mark').length > 0) {
+    //         // Highlight the row if it contains a cross-mark
+    //         $(row).css('background-color', 'rgba(255, 61, 87, 0.36)'); // Light red background
+    //     }
+    // }
+
   })
 }
 
@@ -45,11 +52,22 @@ function setupClickHandlers() {
 function handleIncludeIndividualUrlClick() {
     $("body").on("click", ".include-url-btn", function () {
 
-    const span = this.querySelector('span');
-    if (span.classList.contains('cross-mark')) {
+    const i = this.querySelector('i');
+    if (i.classList.contains('cross-mark')) {
         // Change to tick mark
-        span.classList.remove('cross-mark');
-        span.innerHTML = '&#10004;';  // Tick mark
+        i.classList.remove('cross-mark');
+        i.classList.add('tick-mark'); // Add the tick-mark class
+        i.style.color = 'green'; // Change color to green
+        i.textContent = 'check'; // Set the text to "check"
+        let parentCol3 = i.closest('.col-3');
+        // Change the data-sort attribute of the parent element
+        if (parentCol3) {
+            parentCol3.setAttribute('data-sort', '1'); // Set data-sort to '1' for the check-mark
+        }
+
+        // // Change to tick mark
+        // i.classList.remove('cross-mark');
+        // i.innerHTML = '&#10004;';  // Tick mark
         // then add that URL to the includeURLs list
         match_pattern = remove_protocol($(this).attr("value")) ;
         match_pattern_type = INDIVIDUAL_URL;
@@ -60,10 +78,10 @@ function handleIncludeIndividualUrlClick() {
             true
           );
         
-        const row = $(this).closest('tr'); // Get the closest table row
-        const rowId = $("#urlsTable").DataTable().row(row).index();
-        console.log(rowId);
-        deleteRowById(rowId);
+        // const row = $(this).closest('tr'); // Get the closest table row
+        // const rowId = $("#affectedURLsTable").DataTable().row(row).index();
+        // console.log(rowId);
+        // deleteRowById(rowId);
 
         //Along with this, remove this pattern from the exclude_patterns
         // First, check if similar kind of pattern is available in the exclude_pattern table
@@ -74,11 +92,42 @@ function handleIncludeIndividualUrlClick() {
         //     true
         //   );
 
-      
+    
     } else {
-        // Change back to cross mark
-        span.classList.add('cross-mark');
-        span.innerHTML = '&#10060;';  // Cross mark
+        // Handle the functionality of excluding that URL again (maybe delete that include pattern which was just created)
+        var url = $(this).attr("value");
+        console.log("url", url);
+        getCorrespondingIncludePattern(url).then(function(patternId) {
+            if (patternId !== null) {
+                console.log('Pattern ID:', patternId);
+                currentURLtoDelete = `/api/include-patterns/${patternId}/`;
+                deletePattern(
+                  currentURLtoDelete,
+                  (data_type = "Include Pattern")
+                );
+                
+                // Change back to cross mark
+                i.classList.remove('tick-mark');
+                i.classList.add('cross-mark'); // Add the cross-mark class
+                i.style.color = 'red'; // Change color to red
+                i.textContent = 'close'; // Set the text to "close"
+                let parentCol3 = i.closest('.col-3');
+                // Change the data-sort attribute of the parent element
+                if (parentCol3) {
+                    parentCol3.setAttribute('data-sort', '0'); // Set data-sort to '0' for the cross-mark
+                }
+
+
+                console.log("URL removed from the include pattern")
+
+
+            } else {
+                console.log('No matching pattern found.');
+            }
+        }).catch(function(error) {
+            console.error("Error occurred:", error);
+        });
+    
     }
 
     });
@@ -190,7 +239,7 @@ function postExcludePatterns(match_pattern, match_pattern_type = 0, force) {
 
 function deleteRowById(rowId) {
     // Find the DataTable instance
-    var affected_urls_table = $("#urlsTable").DataTable();
+    var affected_urls_table = $("#affectedURLsTable").DataTable();
   
     // Find the row with ID 1
     var rowToDelete = affected_urls_table.row(rowId); // Adjust based on 0-indexing
@@ -202,4 +251,44 @@ function deleteRowById(rowId) {
       console.log("Row not found.");
     }
   }
-  
+
+function deletePattern(
+  url,
+  data_type,
+  url_type = null,
+  candidate_urls_count = null
+) {
+    $.ajax({
+        url: url,
+        type: "DELETE",
+        data: {
+          csrfmiddlewaretoken: csrftoken,
+        },
+        headers: {
+          "X-CSRFToken": csrftoken,
+        },
+        success: function (data) {
+          console.log("Successfully deleted.")
+        },
+      });
+}
+
+function getCorrespondingIncludePattern(url) {
+    return $.ajax({
+        url: `/api/include-patterns/?format=datatables&collection_id=${collection_id}`,
+        method: 'GET',
+        dataType: 'json'
+    }).then(function(response) {
+        // Iterate through the 'data' array to find a matching pattern
+        for (let i = 0; i < response.data.length; i++) {
+            let pattern = response.data[i].match_pattern;
+            if ( pattern === remove_protocol(url)) {
+                return response.data[i].id; // Return the first matching pattern id
+            }
+        }
+        return null; // Return null if no pattern matches
+    }).catch(function(error) {
+        console.error("Error fetching include patterns:", error);
+        return null;
+    });
+}
diff --git a/sde_indexing_helper/templates/sde_collections/affected_urls.html b/sde_indexing_helper/templates/sde_collections/affected_urls.html
@@ -25,25 +25,36 @@ <h3 class="whiteText candidateTitle">
 
     <div class="container mt-4">
         <!-- Table to display the URLs -->
-        <table id="urlsTable" class="table table-striped table-bordered" style="width:100%">
+        <table id="affectedURLsTable" class="table table-striped table-bordered" style="width:100%">
             <thead class="tableHeader">
                 <tr>
                     <th scope="col" class="text-center col-1">#</th>
-                    <th scope="col" class="text-center col-8">URL</th>
-                    <th scope="col" class="text-center col-2">Include URL</th> <!-- New Column -->
+                    <th scope="col" class="text-center col-2">URL</th>
+                    <!-- <th scope="col" class="text-center col-4">Is Included?</th> -->
+                    <th scope="col" class="text-center col-3">Include URL</th> <!-- New Column -->
                 </tr>
             </thead>
             <tbody>
                 {% for url in affected_urls %}
                     <tr>
+                        <!-- <td class="col-3 text-center">
+                            <a class="exclude_individual_url" value="astrobiology.nasa.gov/about/">
+                                <i class="material-icons" style="color: red">close</i></a>
+                        </td> -->
                         <td class="text-center">{{ forloop.counter }}</td>
                         <td>
                             <a href="{{ url.url }}" target="_blank">{{ url.url }}</a>
-                        </td>                        
-                        <td class="text-center">
-                            <button type="button" class="btn include-url-btn" data-url-id="{{ url.id }}" value = "{{url.url}}">
-                                <span class="cross-mark">&#10060;</span>  <!-- Default Cross Mark -->
-                            </button>
+                        </td>  
+                        <!-- <td> {{ url.is_included }} </td>                       -->
+                        <td class="col-3 text-center data-sort="0">
+                            <a class="include-url-btn" data-url-id="{{ url.id }}" value = "{{url.url}}">
+                            {% if url.is_included %}
+                                <i class="material-icons tick-mark" style="color: green">check</i></a>
+                                <!-- <span class="tick-mark">&#10004;</span>  Tick Mark if included -->
+                            {% else %}
+                            <i class="material-icons cross-mark" style="color: red">close</i></a>
+                                <!-- <span class="cross-mark">&#10060;</span>  Cross Mark if not included -->
+                            {% endif %}
                         </td>
                     </tr>
                 {% empty %}
