Skip to content

Commit e89eaa1

Browse files
KirandawadiKirandawadi
committed
Add DataTables features to the page
1 parent b9d2385 commit e89eaa1

File tree

4 files changed

+275
-6
lines changed

4 files changed

+275
-6
lines changed

‎sde_collections/views.py‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -233,7 +233,7 @@ class AffectedURLsListView(LoginRequiredMixin, ListView):
233233
model = CandidateURL
234234
template_name = "sde_collections/affected_urls.html"
235235
context_object_name = "affected_urls"
236-
paginate_by = 100
236+
# paginate_by = 100
237237

238238
def get_queryset(self):
239239
self.pattern = ExcludePattern.objects.get(id=self.kwargs["id"])
@@ -243,6 +243,10 @@ def get_queryset(self):
243243
def get_context_data(self, **kwargs):
244244
context = super().get_context_data(**kwargs)
245245
context["pattern"] = self.pattern
246+
context["url_count"] = self.pattern.matched_urls().count()
247+
context["collection"] = self.pattern.collection
248+
249+
# print(self.pattern.collection.id)
246250

247251
# affected_urls = self.pattern.matched_urls()
248252
# for url in affected_urls:

‎sde_indexing_helper/static/css/affected_urls.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -463,4 +463,20 @@ body {
463463
.list-group-item {
464464
background-color: #333;
465465
color: #f5f5f5;
466+
}
467+
468+
/* Optional styles for the Include URL button */
469+
.include-url-btn {
470+
background-color: transparent;
471+
border: none;
472+
font-size: 1.5rem;
473+
cursor: pointer;
474+
}
475+
476+
.include-url-btn .cross-mark {
477+
color: red;
478+
}
479+
480+
.include-url-btn .tick-mark {
481+
color: green;
466482
}

‎sde_indexing_helper/static/js/affected_urls.js‎

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
var csrftoken = $('input[name="csrfmiddlewaretoken"]').val();
2+
var INDIVIDUAL_URL = 1;
3+
var MULTI_URL_PATTERN = 2;
4+
collection_id = getCollectionId();
5+
6+
// Maybe you need to define a new DataTable for this page as well
7+
// So that you can refresh it any way you want
8+
// Or maybe this is not necessary
9+
10+
$(document).ready(function () {
11+
// handleAjaxStartAndStop();
12+
initializeDataTable();
13+
setupClickHandlers();
14+
});
15+
16+
function initializeDataTable() {
17+
var affected_urls_table = $("#urlsTable").DataTable({
18+
pageLength: 100,
19+
colReorder: true,
20+
stateSave: true,
21+
layout: {
22+
bottomEnd: "inputPaging",
23+
topEnd: null,
24+
topStart: {
25+
info: true,
26+
pageLength: {
27+
menu: [
28+
[25, 50, 100, 500],
29+
["Show 25", "Show 50", "Show 100", "Show 500"],
30+
],
31+
},
32+
},
33+
serverSide: true,
34+
orderCellsTop: true,
35+
pagingType: "input",
36+
rowId: "url"
37+
}
38+
})
39+
}
40+
41+
function setupClickHandlers() {
42+
handleIncludeIndividualUrlClick();
43+
}
44+
45+
function handleIncludeIndividualUrlClick() {
46+
$("body").on("click", ".include-url-btn", function () {
47+
48+
const span = this.querySelector('span');
49+
if (span.classList.contains('cross-mark')) {
50+
// Change to tick mark
51+
span.classList.remove('cross-mark');
52+
span.innerHTML = '✔'; // Tick mark
53+
// then add that URL to the includeURLs list
54+
match_pattern = remove_protocol($(this).attr("value")) ;
55+
match_pattern_type = INDIVIDUAL_URL;
56+
console.log(match_pattern);
57+
postIncludePatterns(
58+
match_pattern = match_pattern,
59+
match_pattern_type = match_pattern_type,
60+
true
61+
);
62+
63+
const row = $(this).closest('tr'); // Get the closest table row
64+
const rowId = $("#urlsTable").DataTable().row(row).index();
65+
console.log(rowId);
66+
deleteRowById(rowId);
67+
68+
//Along with this, remove this pattern from the exclude_patterns
69+
// First, check if similar kind of pattern is available in the exclude_pattern table
70+
// If yes, this run this block of code.
71+
// postExcludePatterns(
72+
// match_pattern = match_pattern,
73+
// match_pattern_type = match_pattern_type,
74+
// true
75+
// );
76+
77+
78+
} else {
79+
// Change back to cross mark
80+
span.classList.add('cross-mark');
81+
span.innerHTML = '❌'; // Cross mark
82+
}
83+
84+
});
85+
}
86+
87+
function handleExcludeIndividualUrlClick() {
88+
// exclude that URL
89+
// check in the include patterns if similar URL is present
90+
// if yes then delete that URL in the
91+
92+
}
93+
94+
function postIncludePatterns(match_pattern, match_pattern_type = 0) {
95+
if (!match_pattern) {
96+
toastr.error("Please highlight a pattern to include.");
97+
return;
98+
}
99+
100+
// if pattern exists in table already
101+
// var table = $("#include_patterns_table").DataTable();
102+
// var itemIdColumnData = table.column(0).data().toArray();
103+
// if (itemIdColumnData.includes(match_pattern)) {
104+
// toastr.success("Pattern already exists");
105+
// return;
106+
// }
107+
108+
$.ajax({
109+
url: "/api/include-patterns/",
110+
type: "POST",
111+
data: {
112+
collection: collection_id,
113+
match_pattern: match_pattern,
114+
match_pattern_type: match_pattern_type,
115+
csrfmiddlewaretoken: csrftoken,
116+
},
117+
success: function (data) {
118+
console.log("Success on adding to the Included URLs");
119+
// $("#candidate_urls_table").DataTable().ajax.reload(null, false);
120+
// $("#include_patterns_table").DataTable().ajax.reload(null, false);
121+
// if(currentTab === ""){ //Only add a notification if we are on the first tab
122+
// newIncludePatternsCount = newIncludePatternsCount + 1;
123+
// $("#includePatternsTab").html(
124+
// `Include Patterns <span class="pill notifyBadge badge badge-pill badge-primary">` +
125+
// newIncludePatternsCount + " new" +
126+
// `</span>`
127+
// );
128+
// }
129+
},
130+
error: function (xhr, status, error) {
131+
var errorMessage = xhr.responseText;
132+
toastr.error(errorMessage);
133+
},
134+
});
135+
}
136+
137+
function getCollectionId() {
138+
return collection_id;
139+
}
140+
141+
function remove_protocol(url) {
142+
return url.replace(/(^\w+:|^)\/\//, "");
143+
}
144+
145+
146+
function postExcludePatterns(match_pattern, match_pattern_type = 0, force) {
147+
// if (!match_pattern) {
148+
// toastr.error("Please highlight a pattern to exclude.");
149+
// return;
150+
// }
151+
// if (!force) {
152+
// //If the user clicked the icon in the table, we make the change regardless
153+
// // if pattern exists in table already (unless another pattern overrules it)
154+
// var table = $("#exclude_patterns_table").DataTable();
155+
// var itemIdColumnData = table.column(0).data().toArray();
156+
// if (itemIdColumnData.includes(match_pattern)) {
157+
// toastr.success("Pattern already exists");
158+
// return;
159+
// }
160+
// }
161+
162+
$.ajax({
163+
url: "/api/exclude-patterns/",
164+
type: "POST",
165+
data: {
166+
collection: collection_id,
167+
match_pattern: match_pattern,
168+
match_pattern_type: match_pattern_type,
169+
csrfmiddlewaretoken: csrftoken,
170+
},
171+
success: function (data) {
172+
console.log("Success on removing from Excluded URLs");
173+
// $("#candidate_urls_table").DataTable().ajax.reload(null, false);
174+
// $("#exclude_patterns_table").DataTable().ajax.reload(null, false);
175+
// if(currentTab === ""){ //Only add a notification if we are on the first tab
176+
// newExcludePatternsCount = newExcludePatternsCount + 1;
177+
// $("#excludePatternsTab").html(
178+
// `Exclude Patterns <span class="pill notifyBadge badge badge-pill badge-primary">` +
179+
// newExcludePatternsCount + " new" +
180+
// `</span>`
181+
// );
182+
// }
183+
},
184+
error: function (xhr, status, error) {
185+
var errorMessage = xhr.responseText;
186+
toastr.error(errorMessage);
187+
},
188+
});
189+
}
190+
191+
function deleteRowById(rowId) {
192+
// Find the DataTable instance
193+
var affected_urls_table = $("#urlsTable").DataTable();
194+
195+
// Find the row with ID 1
196+
var rowToDelete = affected_urls_table.row(rowId); // Adjust based on 0-indexing
197+
198+
if (rowToDelete.length) {
199+
rowToDelete.remove(); // Remove the row
200+
affected_urls_table.draw(); // Redraw the table
201+
} else {
202+
console.log("Row not found.");
203+
}
204+
}
205+

‎sde_indexing_helper/templates/sde_collections/affected_urls.html‎

Lines changed: 49 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,31 +19,43 @@
1919
<h1 class="pageTitle">Affected URLs</h1>
2020
</div>
2121

22+
<h3 class="whiteText candidateTitle">
23+
{{ url_count }} affected URLs for exclude pattern: <strong>{{ pattern.match_pattern }}</strong>
24+
</h3>
25+
2226
<div class="container mt-4">
2327
<!-- Table to display the URLs -->
2428
<table id="urlsTable" class="table table-striped table-bordered" style="width:100%">
2529
<thead class="tableHeader">
2630
<tr>
2731
<th scope="col" class="text-center col-1">#</th>
28-
<th scope="col" class="text-center col-10">URL</th>
32+
<th scope="col" class="text-center col-8">URL</th>
33+
<th scope="col" class="text-center col-2">Include URL</th> <!-- New Column -->
2934
</tr>
3035
</thead>
3136
<tbody>
3237
{% for url in affected_urls %}
3338
<tr>
3439
<td class="text-center">{{ forloop.counter }}</td>
35-
<td>{{ url.url }}</td> <!-- Assuming CandidateURL has a 'url' field -->
40+
<td>
41+
<a href="{{ url.url }}" target="_blank">{{ url.url }}</a>
42+
</td>
43+
<td class="text-center">
44+
<button type="button" class="btn include-url-btn" data-url-id="{{ url.id }}" value = "{{url.url}}">
45+
<span class="cross-mark">&#10060;</span> <!-- Default Cross Mark -->
46+
</button>
47+
</td>
3648
</tr>
3749
{% empty %}
3850
<tr>
39-
<td colspan="2" class="text-center">No URLs were affected by this pattern.</td>
51+
<td colspan="3" class="text-center">No URLs were affected by this pattern.</td>
4052
</tr>
4153
{% endfor %}
4254
</tbody>
4355
</table>
4456

4557
<!-- Pagination controls -->
46-
<div class="pagination-container">
58+
<!-- <div class="pagination-container">
4759
<div class="pagination">
4860
<span class="step-links">
4961
{% if page_obj.has_previous %}
@@ -62,5 +74,37 @@ <h1 class="pageTitle">Affected URLs</h1>
6274
</span>
6375
</div>
6476
</div>
65-
</div>
77+
</div> -->
6678
{% endblock content %}
79+
80+
{% block javascripts %}
81+
{{ block.super }}
82+
<script>var collection_id = "{{ collection.id }}";</script>
83+
<script src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
84+
<script src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
85+
<script src="//cdn.datatables.net/v/bs4/jszip-3.10.1/dt-2.0.5/af-2.7.0/b-3.0.2/b-colvis-3.0.2/b-html5-3.0.2/b-print-3.0.2/cr-2.0.1/fc-5.0.0/fh-4.0.1/kt-2.12.0/r-3.0.2/rg-1.5.0/rr-1.5.0/sc-2.4.1/sp-2.3.1/sl-2.0.1/datatables.min.js"></script>
86+
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js"></script>
87+
<script src="https://cdn.datatables.net/plug-ins/2.0.8/features/inputPaging/dist/dataTables.inputPaging.min.js"></script>
88+
<script src="{% static 'js/affected_urls.js' %}"></script>
89+
<script src="{% static 'js/project.js' %}"></script>
90+
<script src="{% static 'js/core/bootstrap.min.js' %}"></script>
91+
92+
<!-- <script>
93+
// Function to toggle between cross and tick marks
94+
document.querySelectorAll('.include-url-btn').forEach(function(button) {
95+
button.addEventListener('click', function() {
96+
const span = this.querySelector('span');
97+
if (span.classList.contains('cross-mark')) {
98+
// Change to tick mark
99+
span.classList.remove('cross-mark');
100+
span.innerHTML = '&#10004;'; // Tick mark
101+
} else {
102+
// Change back to cross mark
103+
span.classList.add('cross-mark');
104+
span.innerHTML = '&#10060;'; // Cross mark
105+
}
106+
});
107+
});
108+
</script> -->
109+
110+
{% endblock javascripts %}

0 commit comments

Comments
 (0)