Cambios al buscador_alumno y creacion de listas separadas par bajar mas la posibilidad de accesso no autorizado a funciones de crud de administrador.
Creacion de un triger para que cuando añaden un alumno por heidi, inert directo que crea un usuario. Tambien esta creado por defecto al iniciar la aplicacion por primera vezmaster
vicsash
5 months ago
parent
805466f4ae
commit
0a26208f41
@ -0,0 +1,229 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
|
||||||
|
<link rel="stylesheet" type="text/css" th:href="@{/style.css}">
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.23/jspdf.plugin.autotable.min.js"></script>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Lista: Cilos</title>
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="header">
|
||||||
|
|
||||||
|
<h1>
|
||||||
|
<i class="fas fa-arrow-left" onclick="goBack()" style="cursor:pointer;"></i>
|
||||||
|
Listado de Ciclos
|
||||||
|
</h1>
|
||||||
|
<a href="/logout" class="logout-button"><i class="fas fa-door-open "></i></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="toolbar">
|
||||||
|
<div>
|
||||||
|
<input type="text" id="myInput" placeholder="Buscar por....">
|
||||||
|
</div>
|
||||||
|
<div class="button-group">
|
||||||
|
<button class="pdfButton" onclick="generatePDF()">Generar PDF de esta pagina</button>
|
||||||
|
<button class="pdfButton" onclick="generatePDF_All()">Generar PDF de todas entradas</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="table-container">
|
||||||
|
<table class="table" id="table">
|
||||||
|
<thead class="thread-light">
|
||||||
|
<tr>
|
||||||
|
<th class="table-header">
|
||||||
|
<a th:href="@{'/buscador/ciclos/page/' + ${currentPage} + '?query=' + ${query} + '&sortField=nombre&sortDir=' + ${reverseSortDir}+ '&secondaryOption=' + ${secondaryOption}}">
|
||||||
|
Nombre
|
||||||
|
</a>
|
||||||
|
</th>
|
||||||
|
<th class="table-header">
|
||||||
|
<a th:href="@{'/buscador/ciclos/page/' + ${currentPage} + '?query=' + ${query} + '&sortField=codigo&sortDir=' + ${reverseSortDir}+ '&secondaryOption=' + ${secondaryOption}}">
|
||||||
|
Codigo
|
||||||
|
</a>
|
||||||
|
</th>
|
||||||
|
<th class="table-header">
|
||||||
|
<a th:href="@{'/buscador/ciclos/page/' + ${currentPage} + '?query=' + ${query} + '&sortField=familia.nombre&sortDir=' + ${reverseSortDir}+ '&secondaryOption=' + ${secondaryOption}}">
|
||||||
|
Familia
|
||||||
|
</a>
|
||||||
|
</th>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr class="cell" th:each="ciclo :${ciclos}" th:data-id="${ciclo.id}">
|
||||||
|
<td>
|
||||||
|
[[${ciclo.nombre}]]
|
||||||
|
</td>
|
||||||
|
<td>[[${ciclo.codigo}]]</td>
|
||||||
|
<td>[[${ciclo.familia.nombre}]]</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="page">
|
||||||
|
<nav aria-label="Page navigation" id="paginationControls">
|
||||||
|
<ul class="pagination">
|
||||||
|
<input type="hidden" name="secondaryOption" id="hiddenSecondaryOption" th:value="${secondaryOption}">
|
||||||
|
<li class="page-item" th:classappend="${currentPage == 1 ? 'disabled' : ''}">
|
||||||
|
<a class="page-link" th:href="@{'/buscador/ciclos/page/' + ${1} + '?query=' + ${query} + '&size=' + ${currentSize} + '&secondaryOption=' + ${secondaryOption}}">Prim</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item" th:classappend="${currentPage == 1 ? 'disabled' : ''}">
|
||||||
|
<a class="page-link" th:href="@{'/buscador/ciclos/page/' + ${currentPage - 1} + '?query=' + ${query} + '&size=' + ${currentSize} + '&secondaryOption=' + ${secondaryOption}}">Ant</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item" th:each="pageNum : ${#numbers.sequence(1, totalPages)}" th:classappend="${pageNum eq currentPage ? 'active' : ''}">
|
||||||
|
<a class="page-link" th:href="@{'/buscador/ciclos/page/' + ${pageNum} + '?query=' + ${query} + '&size=' + ${currentSize} + '&secondaryOption=' + ${secondaryOption}}">[[${pageNum}]]</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item" th:classappend="${currentPage == totalPages ? 'disabled' : ''}">
|
||||||
|
<a class="page-link" th:href="@{'/buscador/ciclos/page/' + ${currentPage + 1} + '?query=' + ${query} + '&size=' + ${currentSize} + '&secondaryOption=' + ${secondaryOption}}">Sig</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item" th:classappend="${currentPage == totalPages ? 'disabled' : ''}">
|
||||||
|
<a class="page-link" th:href="@{'/buscador/ciclos/page/' + ${totalPages} + '?query=' + ${query} + '&size=' + ${currentSize} + '&secondaryOption=' + ${secondaryOption}}">Ult</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<select id="entriesCount">
|
||||||
|
<option th:each="item : ${itemsPage}" th:value="${item}" th:text="${item}" th:selected="${item == currentSize}"></option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<script src="/orderTable.js"></script>
|
||||||
|
<script th:inline="javascript">
|
||||||
|
function goBack() {
|
||||||
|
window.location.href = '/buscador';
|
||||||
|
}
|
||||||
|
var $table = $('#table');
|
||||||
|
var $myInput = $('#myInput');
|
||||||
|
var isSearchBarUsed = false;
|
||||||
|
|
||||||
|
$myInput.on('input', function() {
|
||||||
|
var querySearchBar = document.querySelector('#myInput').value;
|
||||||
|
var paginationControls = document.querySelector('#paginationControls');
|
||||||
|
var entriesCountDropdown = document.querySelector('#entriesCount');
|
||||||
|
|
||||||
|
if (querySearchBar === '') {
|
||||||
|
isSearchBarUsed = false;
|
||||||
|
paginationControls.style.display = '';
|
||||||
|
entriesCountDropdown.style.display = '';
|
||||||
|
table.style.pointerEvents = '';
|
||||||
|
location.reload();
|
||||||
|
} else {
|
||||||
|
isSearchBarUsed = true;
|
||||||
|
paginationControls.style.display = 'none';
|
||||||
|
entriesCountDropdown.style.display = 'none';
|
||||||
|
table.style.pointerEvents = 'none';
|
||||||
|
|
||||||
|
/*<![CDATA[*/
|
||||||
|
var query = /*[[${query}]]*/ 'defaultQuery';
|
||||||
|
var secondaryOption = /*[[${secondaryOption}]]*/ 'defaultSecondaryOption';
|
||||||
|
/* rest of your JavaScript code */
|
||||||
|
/*]]>*/
|
||||||
|
fetch('/buscador/ciclos/search?querySearchBar=' + querySearchBar + '&query=' + query + '&secondaryOption=' + secondaryOption)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
var tableBody = document.querySelector('#table tbody');
|
||||||
|
tableBody.innerHTML = '';
|
||||||
|
data.forEach(ciclo => {
|
||||||
|
var row = document.createElement('tr');
|
||||||
|
row.dataset.id = ciclo.id;
|
||||||
|
row.innerHTML = `
|
||||||
|
<td>
|
||||||
|
${ciclo.nombre}
|
||||||
|
</td>
|
||||||
|
<td>${ciclo.codigo}</td>
|
||||||
|
<td>${ciclo.familia.nombre}</td>
|
||||||
|
`;
|
||||||
|
tableBody.appendChild(row);
|
||||||
|
});
|
||||||
|
table.style.pointerEvents = 'auto';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelector('#table').addEventListener('click', function(event) {
|
||||||
|
if (event.target.matches('.edit-icon')) {
|
||||||
|
handleEdit(event);
|
||||||
|
} else if (event.target.matches('.delete-icon')) {
|
||||||
|
handleDelete(event);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
var tableHeaders = document.querySelectorAll('.table-header');
|
||||||
|
tableHeaders.forEach(function(header) {
|
||||||
|
header.addEventListener('click', function(event) {
|
||||||
|
// If the search bar is currently being used, prevent the default action of the click event
|
||||||
|
if (isSearchBarUsed) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
function generatePDF() {
|
||||||
|
const { jsPDF } = window.jspdf;
|
||||||
|
const doc = new jsPDF('l', 'pt'); // 'l' for landscape mode, 'pt' for points as unit
|
||||||
|
|
||||||
|
// Add a title to the PDF
|
||||||
|
doc.setFontSize(20); // Set the font size
|
||||||
|
doc.text('Lista de ciclos', 40, 40); // Add the title
|
||||||
|
|
||||||
|
// Get the HTML table
|
||||||
|
const tableElement = document.getElementById("table");
|
||||||
|
|
||||||
|
// Use jsPDF-AutoTable to convert the table to PDF
|
||||||
|
doc.autoTable({ html: tableElement, startY: 60 }); // Start the table below the title
|
||||||
|
|
||||||
|
// Save the PDF
|
||||||
|
doc.save('lista_ciclos.pdf');
|
||||||
|
}
|
||||||
|
|
||||||
|
function generatePDF_All() {
|
||||||
|
var querySearchBar = document.querySelector('#myInput').value;
|
||||||
|
var query = /*[[${query}]]*/ 'defaultQuery';
|
||||||
|
var secondaryOption = /*[[${secondaryOption}]]*/ 'defaultSecondaryOption';
|
||||||
|
|
||||||
|
fetch('/ciclos_pdf/search/all?query=' + query + '&secondaryOption=' + secondaryOption)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
const { jsPDF } = window.jspdf;
|
||||||
|
const doc = new jsPDF('l', 'pt');
|
||||||
|
|
||||||
|
doc.setFontSize(20);
|
||||||
|
doc.text('Lista de ciclos', 40, 40);
|
||||||
|
|
||||||
|
// Create a new table for the PDF
|
||||||
|
var table = document.createElement('table');
|
||||||
|
|
||||||
|
// Create table headers
|
||||||
|
var tableHead = document.createElement('thead');
|
||||||
|
var headerRow = document.createElement('tr');
|
||||||
|
headerRow.innerHTML = `
|
||||||
|
<th>Nombre</th>
|
||||||
|
<th>Codigo</th>
|
||||||
|
<th>Familia</th>
|
||||||
|
`;
|
||||||
|
tableHead.appendChild(headerRow);
|
||||||
|
table.appendChild(tableHead);
|
||||||
|
|
||||||
|
// Create table body
|
||||||
|
var tableBody = document.createElement('tbody');
|
||||||
|
data.forEach(ciclo => {
|
||||||
|
var row = document.createElement('tr');
|
||||||
|
row.dataset.id = ciclo.id;
|
||||||
|
row.innerHTML = `
|
||||||
|
<td>${ciclo.nombre}</td>
|
||||||
|
<td>${ciclo.codigo}</td>
|
||||||
|
<td>${ciclo.familia.nombre}</td>
|
||||||
|
`;
|
||||||
|
tableBody.appendChild(row);
|
||||||
|
});
|
||||||
|
table.appendChild(tableBody);
|
||||||
|
|
||||||
|
doc.autoTable({ html: table, startY: 60 });
|
||||||
|
doc.save('lista_ciclos.pdf');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,255 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
|
||||||
|
<link rel="stylesheet" type="text/css" th:href="@{/style.css}">
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.23/jspdf.plugin.autotable.min.js"></script>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Lista: Contactos</title>
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="header">
|
||||||
|
|
||||||
|
<h1>
|
||||||
|
<i class="fas fa-arrow-left" onclick="goBack()" style="cursor:pointer;"></i>
|
||||||
|
Listado de Contactos
|
||||||
|
</h1>
|
||||||
|
<a href="/logout" class="logout-button"><i class="fas fa-door-open "></i></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="toolbar">
|
||||||
|
<div>
|
||||||
|
<input type="text" id="myInput" placeholder="Buscar por....">
|
||||||
|
</div>
|
||||||
|
<div class="button-group">
|
||||||
|
<button class="pdfButton" onclick="generatePDF()">Generar PDF de esta pagina</button>
|
||||||
|
<button class="pdfButton" onclick="generatePDF_All()">Generar PDF de todas entradas</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-container">
|
||||||
|
<table class="table" id="table">
|
||||||
|
<thead class="thread-light">
|
||||||
|
<tr>
|
||||||
|
<th class="table-header">
|
||||||
|
<a th:href="@{'/buscador/contactos/page/' + ${currentPage} + '?query=' + ${query} + '&sortField=nombre&sortDir=' + ${reverseSortDir}+ '&secondaryOption=' + ${secondaryOption}}">
|
||||||
|
Nombre
|
||||||
|
</a>
|
||||||
|
</th>
|
||||||
|
<th class="table-header">
|
||||||
|
<a th:href="@{'/buscador/contactos/page/' + ${currentPage} + '?query=' + ${query} + '&sortField=apellido&sortDir=' + ${reverseSortDir}+ '&secondaryOption=' + ${secondaryOption}}">
|
||||||
|
Apellido
|
||||||
|
</a>
|
||||||
|
</th>
|
||||||
|
<th class="table-header">
|
||||||
|
<a th:href="@{'/buscador/contactos/page/' + ${currentPage} + '?query=' + ${query} + '&sortField=apellido2&sortDir=' + ${reverseSortDir}+ '&secondaryOption=' + ${secondaryOption}}">
|
||||||
|
Apellido2
|
||||||
|
</a>
|
||||||
|
</th>
|
||||||
|
<th class="table-header">
|
||||||
|
<a th:href="@{'/buscador/contactos/page/' + ${currentPage} + '?query=' + ${query} + '&sortField=correo&sortDir=' + ${reverseSortDir}+ '&secondaryOption=' + ${secondaryOption}}">
|
||||||
|
Correo
|
||||||
|
</a>
|
||||||
|
</th>
|
||||||
|
<th class="table-header">
|
||||||
|
<a th:href="@{'/buscador/contactos/page/' + ${currentPage} + '?query=' + ${query} + '&ortField=telefono&sortDir=' + ${reverseSortDir}+ '&secondaryOption=' + ${secondaryOption}}">
|
||||||
|
Telefono
|
||||||
|
</a>
|
||||||
|
</th>
|
||||||
|
<th class="table-header">
|
||||||
|
<a th:href="@{'/buscador/contactos/page/' + ${currentPage} + '?query=' + ${query} + '&sortField=empresa.nombre&sortDir=' + ${reverseSortDir}+ '&secondaryOption=' + ${secondaryOption}}">
|
||||||
|
Empresa
|
||||||
|
</a>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr class="cell" th:each="contacto :${contactos}" th:data-id="${contacto.id}">
|
||||||
|
<td>
|
||||||
|
[[${contacto.nombre}]]
|
||||||
|
</td>
|
||||||
|
<td>[[${contacto.apellido}]]</td>
|
||||||
|
<td>[[${contacto.apellido2}]]</td>
|
||||||
|
<td>[[${contacto.correo}]]</td>
|
||||||
|
<td>[[${contacto.telefono}]]</td>
|
||||||
|
<td>[[${contacto.empresa.nombre}]]</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="page">
|
||||||
|
<nav aria-label="Page navigation" id="paginationControls">
|
||||||
|
<ul class="pagination">
|
||||||
|
<input type="hidden" name="secondaryOption" id="hiddenSecondaryOption" th:value="${secondaryOption}">
|
||||||
|
<li class="page-item" th:classappend="${currentPage == 1 ? 'disabled' : ''}">
|
||||||
|
<a class="page-link" th:href="@{'/buscador/contactos/page/' + ${1} + '?query=' + ${query} + '&size=' + ${currentSize} + '&secondaryOption=' + ${secondaryOption}}">Prim</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item" th:classappend="${currentPage == 1 ? 'disabled' : ''}">
|
||||||
|
<a class="page-link" th:href="@{'/buscador/contactos/page/' + ${currentPage - 1} + '?query=' + ${query} + '&size=' + ${currentSize} + '&secondaryOption=' + ${secondaryOption}}">Ant</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item" th:each="pageNum : ${#numbers.sequence(1, totalPages)}" th:classappend="${pageNum eq currentPage ? 'active' : ''}">
|
||||||
|
<a class="page-link" th:href="@{'/buscador/contactos/page/' + ${pageNum} + '?query=' + ${query} + '&size=' + ${currentSize} + '&secondaryOption=' + ${secondaryOption}}">[[${pageNum}]]</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item" th:classappend="${currentPage == totalPages ? 'disabled' : ''}">
|
||||||
|
<a class="page-link" th:href="@{'/buscador/contactos/page/' + ${currentPage + 1} + '?query=' + ${query} + '&size=' + ${currentSize} + '&secondaryOption=' + ${secondaryOption}}">Sig</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item" th:classappend="${currentPage == totalPages ? 'disabled' : ''}">
|
||||||
|
<a class="page-link" th:href="@{'/buscador/contactos/page/' + ${totalPages} + '?query=' + ${query} + '&size=' + ${currentSize} + '&secondaryOption=' + ${secondaryOption}}">Ult</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<select id="entriesCount">
|
||||||
|
<option th:each="item : ${itemsPage}" th:value="${item}" th:text="${item}" th:selected="${item == currentSize}"></option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<script src="/orderTable.js"></script>
|
||||||
|
<script th:inline="javascript">
|
||||||
|
function goBack() {
|
||||||
|
window.location.href = '/buscador';
|
||||||
|
}
|
||||||
|
var $table = $('#table');
|
||||||
|
var $myInput = $('#myInput');
|
||||||
|
var isSearchBarUsed = false;
|
||||||
|
|
||||||
|
$myInput.on('input', function() {
|
||||||
|
var querySearchBar = document.querySelector('#myInput').value;
|
||||||
|
var paginationControls = document.querySelector('#paginationControls');
|
||||||
|
var entriesCountDropdown = document.querySelector('#entriesCount');
|
||||||
|
|
||||||
|
if (querySearchBar === '') {
|
||||||
|
isSearchBarUsed = false;
|
||||||
|
paginationControls.style.display = '';
|
||||||
|
entriesCountDropdown.style.display = '';
|
||||||
|
table.style.pointerEvents = '';
|
||||||
|
location.reload();
|
||||||
|
} else {
|
||||||
|
isSearchBarUsed = true;
|
||||||
|
paginationControls.style.display = 'none';
|
||||||
|
entriesCountDropdown.style.display = 'none';
|
||||||
|
table.style.pointerEvents = 'none';
|
||||||
|
|
||||||
|
/*<![CDATA[*/
|
||||||
|
var query = /*[[${query}]]*/ 'defaultQuery';
|
||||||
|
var secondaryOption = /*[[${secondaryOption}]]*/ 'defaultSecondaryOption';
|
||||||
|
/* rest of your JavaScript code */
|
||||||
|
/*]]>*/
|
||||||
|
|
||||||
|
fetch('/buscador/contactos/search?querySearchBar=' + querySearchBar+ '&query=' + query + '&secondaryOption=' + secondaryOption)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
var tableBody = document.querySelector('#table tbody');
|
||||||
|
tableBody.innerHTML = '';
|
||||||
|
data.forEach(contacto => {
|
||||||
|
var row = document.createElement('tr');
|
||||||
|
row.dataset.id = contacto.id;
|
||||||
|
row.innerHTML = `
|
||||||
|
<td>
|
||||||
|
${contacto.nombre}
|
||||||
|
</td>
|
||||||
|
<td>${contacto.apellido}</td>
|
||||||
|
<td>${contacto.apellido2}</td>
|
||||||
|
<td>${contacto.correo}</td>
|
||||||
|
<td>${contacto.telefono}</td>
|
||||||
|
<td>${contacto.empresa.nombre}</td>
|
||||||
|
`;
|
||||||
|
tableBody.appendChild(row);
|
||||||
|
});
|
||||||
|
|
||||||
|
table.style.pointerEvents = 'auto';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var tableHeaders = document.querySelectorAll('.table-header');
|
||||||
|
tableHeaders.forEach(function(header) {
|
||||||
|
header.addEventListener('click', function(event) {
|
||||||
|
// If the search bar is currently being used, prevent the default action of the click event
|
||||||
|
if (isSearchBarUsed) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function generatePDF() {
|
||||||
|
const { jsPDF } = window.jspdf;
|
||||||
|
const doc = new jsPDF('l', 'pt'); // 'l' for landscape mode, 'pt' for points as unit
|
||||||
|
|
||||||
|
// Add a title to the PDF
|
||||||
|
doc.setFontSize(20); // Set the font size
|
||||||
|
doc.text('Lista de contactos', 40, 40); // Add the title
|
||||||
|
|
||||||
|
// Get the HTML table
|
||||||
|
const tableElement = document.getElementById("table");
|
||||||
|
|
||||||
|
// Use jsPDF-AutoTable to convert the table to PDF
|
||||||
|
doc.autoTable({ html: tableElement, startY: 60 }); // Start the table below the title
|
||||||
|
|
||||||
|
// Save the PDF
|
||||||
|
doc.save('lista_contactos.pdf');
|
||||||
|
}
|
||||||
|
|
||||||
|
function generatePDF_All() {
|
||||||
|
var querySearchBar = document.querySelector('#myInput').value;
|
||||||
|
var query = /*[[${query}]]*/ 'defaultQuery';
|
||||||
|
var secondaryOption = /*[[${secondaryOption}]]*/ 'defaultSecondaryOption';
|
||||||
|
|
||||||
|
fetch('/contactos_pdf/search/all?querySearchBar=' + querySearchBar + '&query=' + query + '&secondaryOption=' + secondaryOption)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
const { jsPDF } = window.jspdf;
|
||||||
|
const doc = new jsPDF('l', 'pt');
|
||||||
|
|
||||||
|
doc.setFontSize(20);
|
||||||
|
doc.text('Lista de contactos', 40, 40);
|
||||||
|
|
||||||
|
// Create a new table for the PDF
|
||||||
|
var table = document.createElement('table');
|
||||||
|
|
||||||
|
// Create table headers
|
||||||
|
var tableHead = document.createElement('thead');
|
||||||
|
var headerRow = document.createElement('tr');
|
||||||
|
headerRow.innerHTML = `
|
||||||
|
<th>Nombre</th>
|
||||||
|
<th>Apellido</th>
|
||||||
|
<th>Apellido2</th>
|
||||||
|
<th>Correo</th>
|
||||||
|
<th>Telefono</th>
|
||||||
|
<th>Empresa</th>
|
||||||
|
`;
|
||||||
|
tableHead.appendChild(headerRow);
|
||||||
|
table.appendChild(tableHead);
|
||||||
|
|
||||||
|
// Create table body
|
||||||
|
var tableBody = document.createElement('tbody');
|
||||||
|
data.forEach(contacto => {
|
||||||
|
var row = document.createElement('tr');
|
||||||
|
row.dataset.id = contacto.id;
|
||||||
|
row.innerHTML = `
|
||||||
|
<td>${contacto.nombre}</td>
|
||||||
|
<td>${contacto.apellido}</td>
|
||||||
|
<td>${contacto.apellido2}</td>
|
||||||
|
<td>${contacto.correo}</td>
|
||||||
|
<td>${contacto.telefono}</td>
|
||||||
|
<td>${contacto.empresa.nombre}</td>
|
||||||
|
`;
|
||||||
|
tableBody.appendChild(row);
|
||||||
|
});
|
||||||
|
table.appendChild(tableBody);
|
||||||
|
|
||||||
|
doc.autoTable({ html: table, startY: 60 });
|
||||||
|
doc.save('lista_contactos.pdf');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,280 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
|
||||||
|
<link rel="stylesheet" type="text/css" th:href="@{/style.css}">
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.23/jspdf.plugin.autotable.min.js"></script>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Lista Empresas</title>
|
||||||
|
<style>
|
||||||
|
.table td.scrollable-cell .skill-cell {
|
||||||
|
width: 300px;
|
||||||
|
min-height: 50px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="header">
|
||||||
|
|
||||||
|
<h1>
|
||||||
|
<i class="fas fa-arrow-left" onclick="goBack()" style="cursor:pointer;"></i>
|
||||||
|
Listado de Empresas
|
||||||
|
</h1>
|
||||||
|
<a href="/logout" class="logout-button"><i class="fas fa-door-open "></i></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="toolbar">
|
||||||
|
<div>
|
||||||
|
<input type="text" id="myInput" placeholder="Buscar por....">
|
||||||
|
</div>
|
||||||
|
<div class="button-group">
|
||||||
|
<button class="pdfButton" onclick="generatePDF()">Generar PDF de esta pagina</button>
|
||||||
|
<button class="pdfButton" onclick="generatePDF_All()">Generar PDF de todas entradas</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-container">
|
||||||
|
<table class="table" id="table">
|
||||||
|
<thead class="thread-light">
|
||||||
|
<tr>
|
||||||
|
<th class="table-header">
|
||||||
|
<a th:href="@{'/buscador/empresas/page/' + ${currentPage} + '?query=' + ${query} + '&sortField=nombre&sortDir=' + ${reverseSortDir}+ '&secondaryOption=' + ${secondaryOption}}">
|
||||||
|
Nombre
|
||||||
|
</a>
|
||||||
|
</th>
|
||||||
|
<th class="table-header">
|
||||||
|
<a th:href="@{'/buscador/empresas/page/' + ${currentPage} + '?query=' + ${query} + '&sortField=cif&sortDir=' + ${reverseSortDir}+ '&secondaryOption=' + ${secondaryOption}}">
|
||||||
|
Cif
|
||||||
|
</a>
|
||||||
|
</th>
|
||||||
|
<th class="table-header">
|
||||||
|
<a th:href="@{'/buscador/empresas/page/' + ${currentPage} + '?query=' + ${query} + '&sortField=correo&sortDir=' + ${reverseSortDir}+ '&secondaryOption=' + ${secondaryOption}}">
|
||||||
|
Correo
|
||||||
|
</a>
|
||||||
|
</th>
|
||||||
|
<th class="table-header">
|
||||||
|
<a th:href="@{'/buscador/empresas/page/' + ${currentPage} + '?query=' + ${query} + '&sortField=telefono&sortDir=' + ${reverseSortDir}+ '&secondaryOption=' + ${secondaryOption}}">
|
||||||
|
Telefono
|
||||||
|
</a>
|
||||||
|
</th>
|
||||||
|
<th class="table-header">
|
||||||
|
<a th:href="@{'/buscador/empresas/page/' + ${currentPage} + '?query=' + ${query} + '&sortField=keywords&sortDir=' + ${reverseSortDir}+ '&secondaryOption=' + ${secondaryOption}}">
|
||||||
|
Keywords
|
||||||
|
</a>
|
||||||
|
</th>
|
||||||
|
<th class="table-header">
|
||||||
|
<a th:href="@{'/buscador/empresas/page/' + ${currentPage} +'?query=' + ${query} + '&sortField=sector.nombre&sortDir=' + ${reverseSortDir}+ '&secondaryOption=' + ${secondaryOption}}">
|
||||||
|
Sector
|
||||||
|
</a>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr class="cell" th:each="empresa :${empresas}" th:data-id="${empresa.id}">
|
||||||
|
|
||||||
|
<td>
|
||||||
|
[[${empresa.nombre}]]
|
||||||
|
</td>
|
||||||
|
<td>[[${empresa.cif}]]</td>
|
||||||
|
<td>[[${empresa.correo}]]</td>
|
||||||
|
<td>[[${empresa.telefono}]]</td>
|
||||||
|
<td class="scrollable-cell">
|
||||||
|
<div class="scrollable-content skill-cell">
|
||||||
|
[[${empresa.keywords}]]
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="scrollable-cell">
|
||||||
|
<div class="scrollable-content skill-cell">
|
||||||
|
[[${empresa.sector.nombre}]]
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="page">
|
||||||
|
<nav aria-label="Page navigation" id="paginationControls">
|
||||||
|
<ul class="pagination">
|
||||||
|
<input type="hidden" name="secondaryOption" id="hiddenSecondaryOption" th:value="${secondaryOption}">
|
||||||
|
<li class="page-item" th:classappend="${currentPage == 1 ? 'disabled' : ''}">
|
||||||
|
<a class="page-link" th:href="@{'/buscador/empresas/page/' + ${1} + '?query=' + ${query} + '&size=' + ${currentSize} + '&secondaryOption=' + ${secondaryOption}}">Prim</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item" th:classappend="${currentPage == 1 ? 'disabled' : ''}">
|
||||||
|
<a class="page-link" th:href="@{'/buscador/empresas/page/' + ${currentPage - 1} + '?query=' + ${query} + '&size=' + ${currentSize} + '&secondaryOption=' + ${secondaryOption}}">Ant</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item" th:each="pageNum : ${#numbers.sequence(1, totalPages)}" th:classappend="${pageNum eq currentPage ? 'active' : ''}">
|
||||||
|
<a class="page-link" th:href="@{'/buscador/empresas/page/' + ${pageNum} + '?query=' + ${query} + '&size=' + ${currentSize} + '&secondaryOption=' + ${secondaryOption}}">[[${pageNum}]]</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item" th:classappend="${currentPage == totalPages ? 'disabled' : ''}">
|
||||||
|
<a class="page-link" th:href="@{'/buscador/empresas/page/' + ${currentPage + 1} + '?query=' + ${query} + '&size=' + ${currentSize} + '&secondaryOption=' + ${secondaryOption}}">Sig</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item" th:classappend="${currentPage == totalPages ? 'disabled' : ''}">
|
||||||
|
<a class="page-link" th:href="@{'/buscador/empresas/page/' + ${totalPages} + '?query=' + ${query} + '&size=' + ${currentSize} + '&secondaryOption=' + ${secondaryOption}}">Ult</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<select id="entriesCount">
|
||||||
|
<option th:each="item : ${itemsPage}" th:value="${item}" th:text="${item}" th:selected="${item == currentSize}"></option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<script src="/orderTable.js"></script>
|
||||||
|
<script th:inline="javascript">
|
||||||
|
function goBack() {
|
||||||
|
window.location.href = '/buscador';
|
||||||
|
}
|
||||||
|
|
||||||
|
var $table = $('#table');
|
||||||
|
var $myInput = $('#myInput');
|
||||||
|
var isSearchBarUsed = false;
|
||||||
|
|
||||||
|
$myInput.on('input', function() {
|
||||||
|
var querySearchBar = document.querySelector('#myInput').value;
|
||||||
|
var paginationControls = document.querySelector('#paginationControls');
|
||||||
|
var entriesCountDropdown = document.querySelector('#entriesCount');
|
||||||
|
|
||||||
|
if (querySearchBar === '') {
|
||||||
|
isSearchBarUsed = false;
|
||||||
|
paginationControls.style.display = '';
|
||||||
|
entriesCountDropdown.style.display = '';
|
||||||
|
table.style.pointerEvents = '';
|
||||||
|
location.reload();
|
||||||
|
} else {
|
||||||
|
isSearchBarUsed = true;
|
||||||
|
paginationControls.style.display = 'none';
|
||||||
|
entriesCountDropdown.style.display = 'none';
|
||||||
|
table.style.pointerEvents = 'none';
|
||||||
|
|
||||||
|
/*<![CDATA[*/
|
||||||
|
var query = /*[[${query}]]*/ 'defaultQuery';
|
||||||
|
var secondaryOption = /*[[${secondaryOption}]]*/ 'defaultSecondaryOption';
|
||||||
|
/* rest of your JavaScript code */
|
||||||
|
/*]]>*/
|
||||||
|
//console.log("Query: " + query);
|
||||||
|
//console.log("Secondary Option: " + secondaryOption);
|
||||||
|
fetch('/buscador/empresas/search?querySearchBar=' + querySearchBar + '&query=' + query + '&secondaryOption=' + secondaryOption)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
var tableBody = document.querySelector('#table tbody');
|
||||||
|
tableBody.innerHTML = '';
|
||||||
|
data.forEach(empresa => {
|
||||||
|
var row = document.createElement('tr');
|
||||||
|
row.dataset.id = empresa.id;
|
||||||
|
row.innerHTML = `
|
||||||
|
<td>
|
||||||
|
${empresa.nombre}
|
||||||
|
</td>
|
||||||
|
<td>${empresa.cif}</td>
|
||||||
|
<td>${empresa.correo}</td>
|
||||||
|
<td>${empresa.telefono}</td>
|
||||||
|
<td class="keywords-cell">
|
||||||
|
<div class="scrollable-content">
|
||||||
|
${empresa.keywords}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>${empresa.sector.nombre}</td>
|
||||||
|
`;
|
||||||
|
tableBody.appendChild(row);
|
||||||
|
});
|
||||||
|
table.style.pointerEvents = 'auto';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var tableHeaders = document.querySelectorAll('.table-header');
|
||||||
|
tableHeaders.forEach(function (header) {
|
||||||
|
header.addEventListener('click', function (event) {
|
||||||
|
if (isSearchBarUsed) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/////////////////PDF FOR CURRENT ITEMS//////////////////////
|
||||||
|
function generatePDF() {
|
||||||
|
const { jsPDF } = window.jspdf;
|
||||||
|
const doc = new jsPDF('l', 'pt'); // 'l' for landscape mode, 'pt' for points as unit
|
||||||
|
|
||||||
|
// Add a title to the PDF
|
||||||
|
doc.setFontSize(20); // Set the font size
|
||||||
|
doc.text('Lista de empresas', 40, 40); // Add the title
|
||||||
|
|
||||||
|
// Get the HTML table
|
||||||
|
const tableElement = document.getElementById("table");
|
||||||
|
|
||||||
|
// Use jsPDF-AutoTable to convert the table to PDF
|
||||||
|
doc.autoTable({ html: tableElement, startY: 60 }); // Start the table below the title
|
||||||
|
|
||||||
|
// Save the PDF
|
||||||
|
doc.save('lista_empresas.pdf');
|
||||||
|
}
|
||||||
|
|
||||||
|
/////////////////PDF FOR ALL SEARCHED ITEMS//////////////////////
|
||||||
|
function generatePDF_All() {
|
||||||
|
var querySearchBar = document.querySelector('#myInput').value;
|
||||||
|
var query = /*[[${query}]]*/ 'defaultQuery';
|
||||||
|
var secondaryOption = /*[[${secondaryOption}]]*/ 'defaultSecondaryOption';
|
||||||
|
|
||||||
|
fetch('/empresas_pdf/search/all?query=' + query + '&secondaryOption=' + secondaryOption)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
const { jsPDF } = window.jspdf;
|
||||||
|
const doc = new jsPDF('l', 'pt');
|
||||||
|
|
||||||
|
doc.setFontSize(20);
|
||||||
|
doc.text('Lista de empresas', 40, 40);
|
||||||
|
|
||||||
|
// Create a new table for the PDF
|
||||||
|
var table = document.createElement('table');
|
||||||
|
|
||||||
|
// Create table headers
|
||||||
|
var tableHead = document.createElement('thead');
|
||||||
|
var headerRow = document.createElement('tr');
|
||||||
|
headerRow.innerHTML = `
|
||||||
|
<th>Nombre</th>
|
||||||
|
<th>Cif</th>
|
||||||
|
<th>Correo</th>
|
||||||
|
<th>Telefono</th>
|
||||||
|
<th>Keywords</th>
|
||||||
|
<th>Sector</th>
|
||||||
|
`;
|
||||||
|
tableHead.appendChild(headerRow);
|
||||||
|
table.appendChild(tableHead);
|
||||||
|
|
||||||
|
// Create table body
|
||||||
|
var tableBody = document.createElement('tbody');
|
||||||
|
data.forEach(empresa => {
|
||||||
|
var row = document.createElement('tr');
|
||||||
|
row.dataset.id = empresa.id;
|
||||||
|
row.innerHTML = `
|
||||||
|
<td>${empresa.nombre}</td>
|
||||||
|
<td>${empresa.cif}</td>
|
||||||
|
<td>${empresa.correo}</td>
|
||||||
|
<td>${empresa.telefono}</td>
|
||||||
|
<td class="scrollable-cell">
|
||||||
|
<div class="scrollable-content skill-cell">
|
||||||
|
${empresa.keywords}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="scrollable-cell">
|
||||||
|
<div class="scrollable-content skill-cell">
|
||||||
|
${empresa.sector.nombre}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
`;
|
||||||
|
tableBody.appendChild(row);
|
||||||
|
});
|
||||||
|
table.appendChild(tableBody);
|
||||||
|
|
||||||
|
doc.autoTable({ html: table, startY: 60 });
|
||||||
|
doc.save('lista_empresas.pdf');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,280 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
|
||||||
|
<link rel="stylesheet" type="text/css" th:href="@{/style.css}">
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.23/jspdf.plugin.autotable.min.js"></script>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Lista Ofertas</title>
|
||||||
|
<style>
|
||||||
|
.table td.scrollable-cell .skill-cell {
|
||||||
|
width: 250px;
|
||||||
|
min-height: 50px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="header">
|
||||||
|
|
||||||
|
<h1>
|
||||||
|
<i class="fas fa-arrow-left" onclick="goBack()" style="cursor:pointer;"></i>
|
||||||
|
Listado de Ofertas
|
||||||
|
</h1>
|
||||||
|
<a href="/logout" class="logout-button"><i class="fas fa-door-open "></i></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="toolbar">
|
||||||
|
<div>
|
||||||
|
<input type="text" id="myInput" placeholder="Buscar por....">
|
||||||
|
</div>
|
||||||
|
<div class="button-group">
|
||||||
|
<button class="pdfButton" onclick="generatePDF()">Generar PDF de esta pagina</button>
|
||||||
|
<button class="pdfButton" onclick="generatePDF_All()">Generar PDF de todas entradas</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="scrollable-table">
|
||||||
|
<table class="table" id="table">
|
||||||
|
<thead class="thread-light">
|
||||||
|
<tr>
|
||||||
|
<th class="table-header">
|
||||||
|
<a th:href="@{'/buscador/ofertas/page/' + ${currentPage} + '?query=' + ${query} + '&sortField=nombre&sortDir=' + ${reverseSortDir} + '&secondaryOption=' + ${secondaryOption}}">
|
||||||
|
Nombre
|
||||||
|
</a>
|
||||||
|
</th>
|
||||||
|
<th class="table-header">
|
||||||
|
<a th:href="@{'/buscador/ofertas/page/' + ${currentPage} + '?query=' + ${query} + '&sortField=fecha&sortDir=' + ${reverseSortDir}+ '&secondaryOption=' + ${secondaryOption}}">
|
||||||
|
Fecha
|
||||||
|
</a>
|
||||||
|
</th>
|
||||||
|
<th class="table-header">
|
||||||
|
<a th:href="@{'/buscador/ofertas/page/' + ${currentPage} + '?query=' + ${query} + '&sortField=descripcion&sortDir=' + ${reverseSortDir}+ '&secondaryOption=' + ${secondaryOption}}">
|
||||||
|
Descripcion
|
||||||
|
</a>
|
||||||
|
</th>
|
||||||
|
<th class="table-header">
|
||||||
|
<a th:href="@{'/buscador/ofertas/page/' + ${currentPage} + '?query=' + ${query} + '&sortField=sucursal.nombre&sortDir=' + ${reverseSortDir}+ '&secondaryOption=' + ${secondaryOption}}">
|
||||||
|
Sucursal
|
||||||
|
</a>
|
||||||
|
</th>
|
||||||
|
<th class="table-header">
|
||||||
|
<a th:href="@{'/buscador/ofertas/page/' + ${currentPage} + '?query=' + ${query} + '&sortField=ciclo.nombre&sortDir=' + ${reverseSortDir}+ '&secondaryOption=' + ${secondaryOption}}">
|
||||||
|
Ciclo
|
||||||
|
</a>
|
||||||
|
</th>
|
||||||
|
<th class="table-header">
|
||||||
|
Skills
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr class="cell" th:each="oferta :${ofertas}" th:data-id="${oferta.id}">
|
||||||
|
<td>
|
||||||
|
[[${oferta.nombre}]]
|
||||||
|
</td>
|
||||||
|
<td>[[${oferta.fecha}]]</td>
|
||||||
|
<td>[[${oferta.descripcion}]]</td>
|
||||||
|
<td>[[${oferta.sucursal.nombre}]]</td>
|
||||||
|
<td class="scrollable-cell">
|
||||||
|
<div class="scrollable-content skill-cell">
|
||||||
|
[[${oferta.ciclo.nombre}]]
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="scrollable-cell">
|
||||||
|
<div class="scrollable-content skill-cell">
|
||||||
|
<span th:each="skill : ${oferta.skills}" th:text="${skill.nombre} + ' '"></span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="page">
|
||||||
|
<nav aria-label="Page navigation" id="paginationControls">
|
||||||
|
<ul class="pagination">
|
||||||
|
<input type="hidden" name="secondaryOption" id="hiddenSecondaryOption" th:value="${secondaryOption}">
|
||||||
|
<li class="page-item" th:classappend="${currentPage == 1 ? 'disabled' : ''}">
|
||||||
|
<a class="page-link" th:href="@{'/buscador/ofertas/page/' + ${1} + '?query=' + ${query} + '&size=' + ${currentSize} + '&secondaryOption=' + ${secondaryOption}}">Prim</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item" th:classappend="${currentPage == 1 ? 'disabled' : ''}">
|
||||||
|
<a class="page-link" th:href="@{'/buscador/ofertas/page/' + ${currentPage - 1} + '?query=' + ${query} + '&size=' + ${currentSize} + '&secondaryOption=' + ${secondaryOption}}">Ant</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item" th:each="pageNum : ${#numbers.sequence(1, totalPages)}" th:classappend="${pageNum eq currentPage ? 'active' : ''}">
|
||||||
|
<a class="page-link" th:href="@{'/buscador/ofertas/page/' + ${pageNum} + '?query=' + ${query} + '&size=' + ${currentSize} + '&secondaryOption=' + ${secondaryOption}}">[[${pageNum}]]</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item" th:classappend="${currentPage == totalPages ? 'disabled' : ''}">
|
||||||
|
<a class="page-link" th:href="@{'/buscador/ofertas/page/' + ${currentPage + 1} + '?query=' + ${query} + '&size=' + ${currentSize} + '&secondaryOption=' + ${secondaryOption}}">Sig</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item" th:classappend="${currentPage == totalPages ? 'disabled' : ''}">
|
||||||
|
<a class="page-link" th:href="@{'/buscador/ofertas/page/' + ${totalPages} + '?query=' + ${query} + '&size=' + ${currentSize} + '&secondaryOption=' + ${secondaryOption}}">Ult</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<select id="entriesCount">
|
||||||
|
<option th:each="item : ${itemsPage}" th:value="${item}" th:text="${item}" th:selected="${item == currentSize}"></option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<script src="/orderTable.js"></script>
|
||||||
|
<script th:inline="javascript">
|
||||||
|
function goBack() {
|
||||||
|
window.location.href = '/buscador';
|
||||||
|
}
|
||||||
|
|
||||||
|
var $table = $('#table');
|
||||||
|
var $myInput = $('#myInput');
|
||||||
|
var isSearchBarUsed = false;
|
||||||
|
|
||||||
|
$myInput.on('input', function() {
|
||||||
|
var querySearchBar = document.querySelector('#myInput').value;
|
||||||
|
var paginationControls = document.querySelector('#paginationControls');
|
||||||
|
var entriesCountDropdown = document.querySelector('#entriesCount');
|
||||||
|
|
||||||
|
/*<![CDATA[*/
|
||||||
|
var query = /*[[${query}]]*/ 'defaultQuery';
|
||||||
|
var secondaryOption = /*[[${secondaryOption}]]*/ 'defaultSecondaryOption';
|
||||||
|
/* rest of your JavaScript code */
|
||||||
|
/*]]>*/
|
||||||
|
if (querySearchBar === '') {
|
||||||
|
isSearchBarUsed = false;
|
||||||
|
paginationControls.style.display = '';
|
||||||
|
entriesCountDropdown.style.display = '';
|
||||||
|
table.style.pointerEvents = '';
|
||||||
|
location.reload();
|
||||||
|
} else {
|
||||||
|
isSearchBarUsed = true;
|
||||||
|
paginationControls.style.display = 'none';
|
||||||
|
entriesCountDropdown.style.display = 'none';
|
||||||
|
table.style.pointerEvents = 'none';
|
||||||
|
fetch('/buscador/ofertas/search?querySearchBar=' + querySearchBar + '&query=' + query + '&secondaryOption=' + secondaryOption)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
var tableBody = document.querySelector('#table tbody');
|
||||||
|
tableBody.innerHTML = '';
|
||||||
|
data.forEach(oferta => {
|
||||||
|
var row = document.createElement('tr');
|
||||||
|
row.dataset.id = oferta.id;
|
||||||
|
row.innerHTML = `
|
||||||
|
<td>
|
||||||
|
|
||||||
|
${oferta.nombre}
|
||||||
|
</td>
|
||||||
|
<td>${oferta.fecha}</td>
|
||||||
|
<td>${oferta.descripcion}</td>
|
||||||
|
<td>${oferta.sucursal.nombre}</td>
|
||||||
|
<td class="scrollable-cell">
|
||||||
|
<div class="scrollable-content skill-cell">
|
||||||
|
${oferta.ciclo.nombre}</td>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="scrollable-cell">
|
||||||
|
<div class="scrollable-content skill-cell">
|
||||||
|
${oferta.skills.map(skill => skill.nombre).join(', ')}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
`;
|
||||||
|
tableBody.appendChild(row);
|
||||||
|
});
|
||||||
|
table.style.pointerEvents = 'auto';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
var tableHeaders = document.querySelectorAll('.table-header');
|
||||||
|
tableHeaders.forEach(function(header) {
|
||||||
|
header.addEventListener('click', function(event) {
|
||||||
|
// If the search bar is currently being used, prevent the default action of the click event
|
||||||
|
if (isSearchBarUsed) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});/*
|
||||||
|
/////////////////MOUSE SROLL FOR KEYWORD AND SKILLS//////////////////////
|
||||||
|
const cells = document.querySelectorAll('.keywords-cell');
|
||||||
|
cells.forEach(cell => {
|
||||||
|
cell.addEventListener('wheel', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.scrollLeft += e.deltaY;
|
||||||
|
}, { passive: false });
|
||||||
|
});*/
|
||||||
|
|
||||||
|
function generatePDF() {
|
||||||
|
const { jsPDF } = window.jspdf;
|
||||||
|
const doc = new jsPDF('l', 'pt'); // 'l' for landscape mode, 'pt' for points as unit
|
||||||
|
|
||||||
|
// Add a title to the PDF
|
||||||
|
doc.setFontSize(20); // Set the font size
|
||||||
|
doc.text('Lista de ofertas', 40, 40); // Add the title
|
||||||
|
|
||||||
|
// Get the HTML table
|
||||||
|
const tableElement = document.getElementById("table");
|
||||||
|
|
||||||
|
// Use jsPDF-AutoTable to convert the table to PDF
|
||||||
|
doc.autoTable({ html: tableElement, startY: 60 }); // Start the table below the title
|
||||||
|
|
||||||
|
// Save the PDF
|
||||||
|
doc.save('lista_ofertas.pdf');
|
||||||
|
}
|
||||||
|
|
||||||
|
function generatePDF_All() {
|
||||||
|
var querySearchBar = document.querySelector('#myInput').value;
|
||||||
|
var query = /*[[${query}]]*/ 'defaultQuery';
|
||||||
|
var secondaryOption = /*[[${secondaryOption}]]*/ 'defaultSecondaryOption';
|
||||||
|
|
||||||
|
fetch('/ofertas_pdf/search/all?query=' + query + '&secondaryOption=' + secondaryOption)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
const { jsPDF } = window.jspdf;
|
||||||
|
const doc = new jsPDF('l', 'pt');
|
||||||
|
|
||||||
|
doc.setFontSize(20);
|
||||||
|
doc.text('Lista de ofertas', 40, 40);
|
||||||
|
|
||||||
|
// Create a new table for the PDF
|
||||||
|
var table = document.createElement('table');
|
||||||
|
|
||||||
|
// Create table headers
|
||||||
|
var tableHead = document.createElement('thead');
|
||||||
|
var headerRow = document.createElement('tr');
|
||||||
|
headerRow.innerHTML = `
|
||||||
|
<th>Nombre</th>
|
||||||
|
<th>Fecha</th>
|
||||||
|
<th>Descripcion</th>
|
||||||
|
<th>Sucursal</th>
|
||||||
|
<th>Ciclo</th>
|
||||||
|
<th>Skills</th>
|
||||||
|
// Add more headers as per your data structure
|
||||||
|
`;
|
||||||
|
tableHead.appendChild(headerRow);
|
||||||
|
table.appendChild(tableHead);
|
||||||
|
|
||||||
|
// Create table body
|
||||||
|
var tableBody = document.createElement('tbody');
|
||||||
|
data.forEach(oferta => {
|
||||||
|
var row = document.createElement('tr');
|
||||||
|
row.dataset.id = oferta.id;
|
||||||
|
row.innerHTML = `
|
||||||
|
<td>${oferta.nombre}</td>
|
||||||
|
<td>${oferta.fecha}</td>
|
||||||
|
<td>${oferta.descripcion}</td>
|
||||||
|
<td>${oferta.sucursal.nombre}</td>
|
||||||
|
<td>${oferta.ciclo.nombre}</td>
|
||||||
|
<td>${oferta.skills.map(skill => skill.nombre).join(', ')}</td>
|
||||||
|
`;
|
||||||
|
tableBody.appendChild(row);
|
||||||
|
});
|
||||||
|
table.appendChild(tableBody);
|
||||||
|
|
||||||
|
doc.autoTable({ html: table, startY: 60 });
|
||||||
|
doc.save('lista_ofertas.pdf');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,241 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
|
||||||
|
<link rel="stylesheet" type="text/css" th:href="@{/style.css}">
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.23/jspdf.plugin.autotable.min.js"></script>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Lista Sucursales</title>
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="header">
|
||||||
|
<h1>
|
||||||
|
<i class="fas fa-arrow-left" onclick="goBack()" style="cursor:pointer;"></i>
|
||||||
|
Listado de Sucursales
|
||||||
|
</h1>
|
||||||
|
<a href="/logout" class="logout-button"><i class="fas fa-door-open "></i></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="toolbar">
|
||||||
|
<div>
|
||||||
|
<input type="text" id="myInput" placeholder="Buscar por....">
|
||||||
|
</div>
|
||||||
|
<div class="button-group">
|
||||||
|
<button class="pdfButton" onclick="generatePDF()">Generar PDF de esta pagina</button>
|
||||||
|
<button class="pdfButton" onclick="generatePDF_All()">Generar PDF de todas entradas</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-container">
|
||||||
|
<table class="table" id="table">
|
||||||
|
<thead class="thread-light">
|
||||||
|
<tr>
|
||||||
|
<th class="table-header">
|
||||||
|
<a th:href="@{'/buscador/sucursales/page/' + ${currentPage} +'?query=' + ${query} + '&sortField=nombre&sortDir=' + ${reverseSortDir} + '&secondaryOption=' + ${secondaryOption}}">
|
||||||
|
Nombre
|
||||||
|
</a>
|
||||||
|
</th>
|
||||||
|
<th class="table-header">
|
||||||
|
<a th:href="@{'/buscador/sucursales/page/' + ${currentPage} + '?query=' + ${query} + '&sortField=localidad&sortDir=' + ${reverseSortDir} + '&secondaryOption=' + ${secondaryOption}}">
|
||||||
|
Localidad
|
||||||
|
</a>
|
||||||
|
</th>
|
||||||
|
<th class="table-header">
|
||||||
|
<a th:href="@{'/buscador/sucursales/page/' + ${currentPage} +'?query=' + ${query} + '&sortField=direccion&sortDir=' + ${reverseSortDir} + '&secondaryOption=' + ${secondaryOption}}">
|
||||||
|
Direccion
|
||||||
|
</a>
|
||||||
|
</th>
|
||||||
|
<th class="table-header">
|
||||||
|
<a th:href="@{'/buscador/sucursales/page/' + ${currentPage} + '?query=' + ${query} + '&sortField=sedeCentral&sortDir=' + ${reverseSortDir} + '&secondaryOption=' + ${secondaryOption}}">
|
||||||
|
Sede Central
|
||||||
|
</a>
|
||||||
|
</th>
|
||||||
|
<th class="table-header">
|
||||||
|
<a th:href="@{'/buscador/sucursales/page/' + ${currentPage} +'?query=' + ${query} + '&sortField=empresa.nombre&sortDir=' + ${reverseSortDir} + '&secondaryOption=' + ${secondaryOption}}">
|
||||||
|
Empresa
|
||||||
|
</a>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr class="cell" th:each="sucursal :${sucursales}" th:data-id="${sucursal.id}">
|
||||||
|
<td>
|
||||||
|
[[${sucursal.nombre}]]
|
||||||
|
</td>
|
||||||
|
<td>[[${sucursal.localidad}]]</td>
|
||||||
|
<td>[[${sucursal.direccion}]]</td>
|
||||||
|
<td th:text="${sucursal.sedeCentral} ? 'Si' : 'No'"></td>
|
||||||
|
<td>[[${sucursal.empresa.nombre}]]</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="page">
|
||||||
|
<nav aria-label="Page navigation" id="paginationControls">
|
||||||
|
<ul class="pagination">
|
||||||
|
<input type="hidden" name="secondaryOption" id="hiddenSecondaryOption" th:value="${secondaryOption}">
|
||||||
|
<li class="page-item" th:classappend="${currentPage == 1 ? 'disabled' : ''}">
|
||||||
|
<a class="page-link" th:href="@{'/buscador/sucursales/page/' + ${1} + '?query=' + ${query} + '&size=' + ${currentSize} + '&secondaryOption=' + ${secondaryOption}}">Prim</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item" th:classappend="${currentPage == 1 ? 'disabled' : ''}">
|
||||||
|
<a class="page-link" th:href="@{'/buscador/sucursales/page/' + ${currentPage - 1} + '?query=' + ${query} + '&size=' + ${currentSize} + '&secondaryOption=' + ${secondaryOption}}">Ant</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item" th:each="pageNum : ${#numbers.sequence(1, totalPages)}" th:classappend="${pageNum eq currentPage ? 'active' : ''}">
|
||||||
|
<a class="page-link" th:href="@{'/buscador/sucursales/page/' + ${pageNum} + '?query=' + ${query} + '&size=' + ${currentSize} + '&secondaryOption=' + ${secondaryOption}}">[[${pageNum}]]</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item" th:classappend="${currentPage == totalPages ? 'disabled' : ''}">
|
||||||
|
<a class="page-link" th:href="@{'/buscador/sucursales/page/' + ${currentPage + 1} + '?query=' + ${query} + '&size=' + ${currentSize} + '&secondaryOption=' + ${secondaryOption}}">Sig</a>
|
||||||
|
</li>
|
||||||
|
<li class="page-item" th:classappend="${currentPage == totalPages ? 'disabled' : ''}">
|
||||||
|
<a class="page-link" th:href="@{'/buscador/sucursales/page/' + ${totalPages} + '?query=' + ${query} + '&size=' + ${currentSize} + '&secondaryOption=' + ${secondaryOption}}">Ult</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<select id="entriesCount">
|
||||||
|
<option th:each="item : ${itemsPage}" th:value="${item}" th:text="${item}" th:selected="${item == currentSize}"></option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<script src="/orderTable.js"></script>
|
||||||
|
<script th:inline="javascript">
|
||||||
|
function goBack() {
|
||||||
|
window.location.href = '/buscador';
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var $table = $('#table');
|
||||||
|
var $myInput = $('#myInput');
|
||||||
|
var isSearchBarUsed = false;
|
||||||
|
|
||||||
|
$myInput.on('input', function() {
|
||||||
|
var querySearchBar = document.querySelector('#myInput').value;
|
||||||
|
var paginationControls = document.querySelector('#paginationControls');
|
||||||
|
var entriesCountDropdown = document.querySelector('#entriesCount');
|
||||||
|
|
||||||
|
if (querySearchBar === '') {
|
||||||
|
isSearchBarUsed = false;
|
||||||
|
paginationControls.style.display = '';
|
||||||
|
entriesCountDropdown.style.display = '';
|
||||||
|
table.style.pointerEvents = '';
|
||||||
|
location.reload();
|
||||||
|
} else {
|
||||||
|
isSearchBarUsed = true;
|
||||||
|
paginationControls.style.display = 'none';
|
||||||
|
entriesCountDropdown.style.display = 'none';
|
||||||
|
table.style.pointerEvents = 'none';
|
||||||
|
|
||||||
|
/*<![CDATA[*/
|
||||||
|
var query = /*[[${query}]]*/ 'defaultQuery';
|
||||||
|
var secondaryOption = /*[[${secondaryOption}]]*/ 'defaultSecondaryOption';
|
||||||
|
/* rest of your JavaScript code */
|
||||||
|
/*]]>*/
|
||||||
|
|
||||||
|
fetch('/buscador/sucursales/search?querySearchBar=' + querySearchBar + '&query=' + query + '&secondaryOption=' + secondaryOption)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
var tableBody = document.querySelector('#table tbody');
|
||||||
|
tableBody.innerHTML = '';
|
||||||
|
data.forEach(sucursal => {
|
||||||
|
var row = document.createElement('tr');
|
||||||
|
row.dataset.id = sucursal.id;
|
||||||
|
var sedeCentralText = sucursal.sedeCentral ? 'Si' : 'No'; // Add this line
|
||||||
|
row.innerHTML = `
|
||||||
|
<td>
|
||||||
|
${sucursal.nombre}
|
||||||
|
</td>
|
||||||
|
<td>${sucursal.localidad}</td>
|
||||||
|
<td>${sucursal.direccion}</td>
|
||||||
|
<td>${sedeCentralText}
|
||||||
|
<td>${sucursal.empresa.nombre}</td>
|
||||||
|
`;
|
||||||
|
tableBody.appendChild(row);
|
||||||
|
});
|
||||||
|
table.style.pointerEvents = 'auto';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var tableHeaders = document.querySelectorAll('.table-header');
|
||||||
|
tableHeaders.forEach(function(header) {
|
||||||
|
header.addEventListener('click', function(event) {
|
||||||
|
// If the search bar is currently being used, prevent the default action of the click event
|
||||||
|
if (isSearchBarUsed) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
function generatePDF() {
|
||||||
|
const { jsPDF } = window.jspdf;
|
||||||
|
const doc = new jsPDF('l', 'pt'); // 'l' for landscape mode, 'pt' for points as unit
|
||||||
|
// Add a title to the PDF
|
||||||
|
doc.setFontSize(20); // Set the font size
|
||||||
|
doc.text('Lista de sucursales', 40, 40); // Add the title
|
||||||
|
|
||||||
|
// Get the HTML table
|
||||||
|
const tableElement = document.getElementById("table");
|
||||||
|
|
||||||
|
// Use jsPDF-AutoTable to convert the table to PDF
|
||||||
|
doc.autoTable({ html: tableElement, startY: 60 }); // Start the table below the title
|
||||||
|
|
||||||
|
// Save the PDF
|
||||||
|
doc.save('lista_sucursales.pdf');
|
||||||
|
}
|
||||||
|
|
||||||
|
function generatePDF_All() {
|
||||||
|
var querySearchBar = document.querySelector('#myInput').value;
|
||||||
|
var query = /*[[${query}]]*/ 'defaultQuery';
|
||||||
|
var secondaryOption = /*[[${secondaryOption}]]*/ 'defaultSecondaryOption';
|
||||||
|
|
||||||
|
fetch('/sucursales_pdf/search/all?query=' + query + '&secondaryOption=' + secondaryOption)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
const { jsPDF } = window.jspdf;
|
||||||
|
const doc = new jsPDF('l', 'pt');
|
||||||
|
|
||||||
|
doc.setFontSize(20);
|
||||||
|
doc.text('Lista de Sucursales', 40, 40);
|
||||||
|
|
||||||
|
// Create a new table for the PDF
|
||||||
|
var table = document.createElement('table');
|
||||||
|
|
||||||
|
// Create table headers
|
||||||
|
var tableHead = document.createElement('thead');
|
||||||
|
var headerRow = document.createElement('tr');
|
||||||
|
headerRow.innerHTML = `
|
||||||
|
<th>Nombre</th>
|
||||||
|
<th>Direccion</th>
|
||||||
|
<th>Empresa</th>
|
||||||
|
`;
|
||||||
|
tableHead.appendChild(headerRow);
|
||||||
|
table.appendChild(tableHead);
|
||||||
|
|
||||||
|
// Create table body
|
||||||
|
var tableBody = document.createElement('tbody');
|
||||||
|
data.forEach(sucursal => {
|
||||||
|
var row = document.createElement('tr');
|
||||||
|
row.dataset.id = sucursal.id;
|
||||||
|
row.innerHTML = `
|
||||||
|
<td>${sucursal.nombre}</td>
|
||||||
|
<td>${sucursal.direccion}</td>
|
||||||
|
<td>${sucursal.empresa.nombre}</td>
|
||||||
|
`;
|
||||||
|
tableBody.appendChild(row);
|
||||||
|
});
|
||||||
|
table.appendChild(tableBody);
|
||||||
|
|
||||||
|
doc.autoTable({ html: table, startY: 60 });
|
||||||
|
doc.save('lista_sucursales.pdf');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in new issue