Skip to content

Commit

Permalink
🔧refactor: add pagination and search component js
Browse files Browse the repository at this point in the history
  • Loading branch information
@D10S0VSkY-OSS
D10S0VSkY-OSS committed Nov 11, 2023
1 parent 29bb2a0 commit 2ce0c05
Show file tree
Hide file tree
Showing 8 changed files with 137 additions and 189 deletions.
69 changes: 69 additions & 0 deletions sld-dashboard/app/base/static/assets/js/pagination.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
$(document).ready(function(){
var rowsPerPage = 10; // Valor inicial
var rows = $('#myTable tr');
var filteredRows = rows; // Inicialmente, todas las filas son el conjunto filtrado
var pagesCount;
var currentPage = 1;

function displayPage(page) {
var start = (page - 1) * rowsPerPage;
var end = start + rowsPerPage;
rows.hide();
filteredRows.slice(start, end).show();
}

function setupPagination() {
pagesCount = Math.ceil(filteredRows.length / rowsPerPage);
$('.pagination .number-page').remove(); // Remove old page numbers
for (var i = 1; i <= pagesCount; i++) {
$('<li class="page-item number-page"><a class="page-link" href="#">' + i + '</a></li>')
.insertBefore("#next-page")
.on('click', function(e) {
e.preventDefault();
currentPage = parseInt($(this).text());
displayPage(currentPage);
$(".pagination .number-page").removeClass('active');
$(this).addClass('active');
});
}
displayPage(1);
}

$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
filteredRows = rows.filter(function() {
return $(this).text().toLowerCase().indexOf(value) > -1;
});
currentPage = 1; // Reset to first page
setupPagination();
});

// Handle row per page selection
$(".dropdown-menu a").on("click", function(e) {
e.preventDefault();
var selectedValue = $(this).text().trim();
rowsPerPage = selectedValue.toLowerCase() === 'all' ? rows.length : parseInt(selectedValue);
currentPage = 1; // Reset to first page
setupPagination();
});

// Setup initial pagination
setupPagination();

// Previous and Next button logic
$("#previous-page").on('click', function(e) {
e.preventDefault();
if (currentPage > 1) {
currentPage--;
displayPage(currentPage);
}
});

$("#next-page").on('click', function(e) {
e.preventDefault();
if (currentPage < pagesCount) {
currentPage++;
displayPage(currentPage);
}
});
});
20 changes: 9 additions & 11 deletions sld-dashboard/app/home/templates/activity-logs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,22 +135,20 @@ <h2 class="h4">All Activity</h2>
</nav>
</div>
</div>

<!-- Pagination -->
<nav>
<ul class="pagination">
<li class="page-item" id="previous-page"><a class="page-link" href="#">Previous</a></li>
<!-- Page numbers will be dynamically inserted here -->
<li class="page-item" id="next-page"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
{% include 'includes/footer.html' %}
</main>

{% endblock content %}

<!-- Specific Page JS goes HERE -->
{% block javascripts %}
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
<script src="/static/assets/js/pagination.js"></script>
{% endblock javascripts %}
34 changes: 12 additions & 22 deletions sld-dashboard/app/home/templates/aws-list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ <h2 class="h4">All aws accounts</h2>
<div class="col col-md-6 col-lg-3 col-xl-4">
<div class="input-group">
<span class="input-group-text" id="basic-addon2"><span class="fas fa-search"></span></span>
<input type="text" class="form-control" id="search" onkeyup="search()" placeholder="Search"
<input type="text" class="form-control" id="myInput" onkeyup="search()" placeholder="Search"
aria-label="Search" aria-describedby="basic-addon2">
</div>
</div>
Expand Down Expand Up @@ -76,7 +76,7 @@ <h2 class="h4">All aws accounts</h2>
<th></th>
</tr>
</thead>
<tbody>
<tbody id="myTable">
<!-- Item -->
{% for aws_account in aws %}
<tr>
Expand Down Expand Up @@ -132,7 +132,14 @@ <h2 class="h4">All aws accounts</h2>
<div class="font-weight-bold small"><b></b><b></b></div>
</div>
</div>

<!-- Pagination -->
<nav>
<ul class="pagination">
<li class="page-item" id="previous-page"><a class="page-link" href="#">Previous</a></li>
<!-- Page numbers will be dynamically inserted here -->
<li class="page-item" id="next-page"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
{% include 'includes/footer.html' %}

</main>
Expand All @@ -141,23 +148,6 @@ <h2 class="h4">All aws accounts</h2>

<!-- Specific Page JS goes HERE -->
{% block javascripts %}
<script>
function search() {
const input = document.getElementById('search')
const filter = input.value.toLowerCase()
const table = document.getElementById('table')
const tr = [...table.getElementsByTagName('tr')]

tr.forEach((t) => {
const foundMatch = [...t.getElementsByTagName('td')].some((td) => {
return td.innerHTML.toLowerCase().indexOf(filter) > -1
})
if (foundMatch) {
t.style.display = ''
} else {
t.style.display = 'none'
}
})
}
</script>
<script src="/static/assets/js/pagination.js"></script>
{% endblock javascripts %}

36 changes: 12 additions & 24 deletions sld-dashboard/app/home/templates/azure-list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ <h2 class="h4">All azure accounts</h2>
<div class="col col-md-6 col-lg-3 col-xl-4">
<div class="input-group">
<span class="input-group-text" id="basic-addon2"><span class="fas fa-search"></span></span>
<input type="text" class="form-control" id="search" onkeyup="search()" placeholder="Search"
<input type="text" class="form-control" id="myInput" onkeyup="search()" placeholder="Search"
aria-label="Search" aria-describedby="basic-addon2">
</div>
</div>
Expand Down Expand Up @@ -74,7 +74,7 @@ <h2 class="h4">All azure accounts</h2>
<th></th>
</tr>
</thead>
<tbody>
<tbody id="myTable">
<!-- Item -->
{% for azure_account in azure %}
<tr>
Expand Down Expand Up @@ -128,7 +128,14 @@ <h2 class="h4">All azure accounts</h2>
<div class="font-weight-bold small"><b></b><b></b></div>
</div>
</div>

<!-- Pagination -->
<nav>
<ul class="pagination">
<li class="page-item" id="previous-page"><a class="page-link" href="#">Previous</a></li>
<!-- Page numbers will be dynamically inserted here -->
<li class="page-item" id="next-page"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
{% include 'includes/footer.html' %}

</main>
Expand All @@ -137,24 +144,5 @@ <h2 class="h4">All azure accounts</h2>

<!-- Specific Page JS goes HERE -->
{% block javascripts %}
<script>
function search() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("search");
filter = input.value.toUpperCase();
table = document.getElementById("table");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
{% endblock javascripts %}
<script src="/static/assets/js/pagination.js"></script>
{% endblock javascripts %}
35 changes: 12 additions & 23 deletions sld-dashboard/app/home/templates/custom-provider-list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ <h2 class="h4">All custom providers accounts</h2>
<div class="col col-md-6 col-lg-3 col-xl-4">
<div class="input-group">
<span class="input-group-text" id="basic-addon2"><span class="fas fa-search"></span></span>
<input type="text" class="form-control" id="search" onkeyup="search()" placeholder="Search"
<input type="text" class="form-control" id="myInput" onkeyup="search()" placeholder="Search"
aria-label="Search" aria-describedby="basic-addon2">
</div>
</div>
Expand Down Expand Up @@ -72,7 +72,7 @@ <h2 class="h4">All custom providers accounts</h2>
<th></th>
</tr>
</thead>
<tbody>
<tbody id="myTable">
<!-- Item -->
{% for custom_provider in custom_provider_content %}
<tr>
Expand Down Expand Up @@ -124,6 +124,14 @@ <h2 class="h4">All custom providers accounts</h2>
<div class="font-weight-bold small"><b></b> <b></b></div>
</div>
</div>
<!-- Pagination -->
<nav>
<ul class="pagination">
<li class="page-item" id="previous-page"><a class="page-link" href="#">Previous</a></li>
<!-- Page numbers will be dynamically inserted here -->
<li class="page-item" id="next-page"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>

{% include 'includes/footer.html' %}

Expand All @@ -133,24 +141,5 @@ <h2 class="h4">All custom providers accounts</h2>

<!-- Specific Page JS goes HERE -->
{% block javascripts %}
<script>
function search() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("search");
filter = input.value.toUpperCase();
table = document.getElementById("table");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
{% endblock javascripts %}
<script src="/static/assets/js/pagination.js"></script>
{% endblock javascripts %}
75 changes: 2 additions & 73 deletions sld-dashboard/app/home/templates/deploys-list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -373,79 +373,8 @@ <h5 class="modal-title" id="DeleteModalLongTitle-{{deploy.id}}">Delete Deploy

{% endblock content %}

<!-- Specific Page JS goes HERE -->
<!-- Specific Page JS goes HERE -->
{% block javascripts %}
<script>
$(document).ready(function(){
var rowsPerPage = 10; // Valor inicial
var rows = $('#myTable tr');
var filteredRows = rows; // Inicialmente, todas las filas son el conjunto filtrado
var pagesCount;
var currentPage = 1;

function displayPage(page) {
var start = (page - 1) * rowsPerPage;
var end = start + rowsPerPage;
rows.hide();
filteredRows.slice(start, end).show();
}

function setupPagination() {
pagesCount = Math.ceil(filteredRows.length / rowsPerPage);
$('.pagination .number-page').remove(); // Remove old page numbers
for (var i = 1; i <= pagesCount; i++) {
$('<li class="page-item number-page"><a class="page-link" href="#">' + i + '</a></li>')
.insertBefore("#next-page")
.on('click', function(e) {
e.preventDefault();
currentPage = parseInt($(this).text());
displayPage(currentPage);
$(".pagination .number-page").removeClass('active');
$(this).addClass('active');
});
}
displayPage(1);
}

$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
filteredRows = rows.filter(function() {
return $(this).text().toLowerCase().indexOf(value) > -1;
});
currentPage = 1; // Reset to first page
setupPagination();
});

// Handle row per page selection
$(".dropdown-menu a").on("click", function(e) {
e.preventDefault();
var selectedValue = $(this).text().trim();
rowsPerPage = selectedValue.toLowerCase() === 'all' ? rows.length : parseInt(selectedValue);
currentPage = 1; // Reset to first page
setupPagination();
});

// Setup initial pagination
setupPagination();

// Previous and Next button logic
$("#previous-page").on('click', function(e) {
e.preventDefault();
if (currentPage > 1) {
currentPage--;
displayPage(currentPage);
}
});

$("#next-page").on('click', function(e) {
e.preventDefault();
if (currentPage < pagesCount) {
currentPage++;
displayPage(currentPage);
}
});
});
</script>


<script src="/static/assets/js/pagination.js"></script>
{% endblock javascripts %}
Loading

0 comments on commit 2ce0c05

Please sign in to comment.