templates/_partials/courses/_js_modal_actions_empresa.html.twig line 1

Open in your IDE?
  1. <script>
  2. // Añadir clase logged-in al body si el usuario está logueado
  3. document.addEventListener('DOMContentLoaded', function() {
  4. {% if app.user %}
  5. document.body.classList.add('logged-in');
  6. {% endif %}
  8. // Configurar validación de fecha de inicio
  9. const fechaInicioInput = document.querySelector('input[name="solicitud_accion_formativa_search[fechaInicio]"]');
  10. if (fechaInicioInput) {
  11. // Establecer fecha mínima como hoy
  12. const today = new Date().toISOString().split('T')[0];
  13. fechaInicioInput.setAttribute('min', today);
  15. // Validación en tiempo real
  16. fechaInicioInput.addEventListener('change', function() {
  17. const selectedDate = new Date(this.value);
  18. const todayDate = new Date();
  19. todayDate.setHours(0, 0, 0, 0);
  21. if (selectedDate < todayDate) {
  22. this.setCustomValidity('{{ "validation.start_date_future"|trans({}, "courses") }}');
  23. this.reportValidity();
  24. } else {
  25. this.setCustomValidity('');
  26. }
  27. });
  28. }
  29. });
  31. document.addEventListener('DOMContentLoaded', function() {
  32. // Handle empresa course enrollment buttons
  33. {% if app.user and constant('App\\Enum\\RolEnum::EMPRESA') in app.user.roles %}
  34. const solicitarCursoButtons = document.querySelectorAll('.solicitar-curso-empresa');
  36. solicitarCursoButtons.forEach(function(button) {
  37. button.addEventListener('click', function(e) {
  38. e.preventDefault();
  39. mostrarModalSeleccionEmpleados(button, 'solicitarCurso');
  40. });
  41. });
  42. {% endif %}
  43. });
  45. /**
  46. * Show employee selection modal for company actions
  47. */
  48. function mostrarModalSeleccionEmpleados(button, accion) {
  49. const actividadId = button.dataset.actividadId;
  50. const actividadTipo = button.dataset.actividadTipo;
  51. const cursoNombre = button.dataset.cursoNombre || 'curso';
  53. const modalId = 'modalSeleccionEmpleados' + actividadTipo + actividadId + accion;
  54. let modal = document.getElementById(modalId);
  56. if (!modal) {
  57. // Create the modal
  58. modal = document.createElement('div');
  59. modal.id = modalId;
  60. modal.className = 'modal fade';
  61. modal.setAttribute('role', 'dialog');
  63. const tituloAccion = accion === 'mostrarInteres' ? '{{ "course.action.show_interest"|trans({}, "courses") }}' : '{{ "course.action.request_course"|trans({}, "courses") }}';
  65. modal.innerHTML = `
  66. <div class="modal-dialog modal-lg" role="document">
  67. <div class="modal-content">
  68. <div class="modal-header">
  69. <h5 class="modal-title">{{ "course.modal.select_employees"|trans({}, "courses") }} ${tituloAccion} "${cursoNombre}"</h5>
  70. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  71. <span aria-hidden="true">&times;</span>
  72. </button>
  73. </div>
  74. <div class="modal-body">
  75. <div id="empleados-loading-${modalId}" class="text-center">
  76. <i class="fa fa-spinner fa-spin"></i> {{ "course.modal.loading_employees"|trans({}, "courses") }}
  77. </div>
  78. <div id="empleados-error-${modalId}" style="display: none;" class="alert alert-danger">
  79. <!-- Error messages will be shown here -->
  80. </div>
  81. <div id="empleados-content-${modalId}" style="display: none;">
  82. <div class="form-group">
  83. <input type="text" class="form-control" id="buscar-empleado-${modalId}" placeholder="{{ "course.modal.search_placeholder"|trans({}, "courses") }}" style="max-width: 100%; width: 100%; box-sizing: border-box;">
  84. </div>
  85. <div class="empleados-list" id="empleados-list-${modalId}">
  86. <!-- Employee list will be populated here -->
  87. </div>
  88. </div>
  89. </div>
  90. <div class="modal-footer">
  91. <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ "common.cancel"|trans }}</button>
  92. <button type="button" class="btn btn-primary" id="confirmar-accion-${modalId}" disabled>
  93. ${accion === 'mostrarInteres' ? '{{ "course.modal.update_interests"|trans({}, "courses") }}' : '{{ "course.modal.update_enrollments"|trans({}, "courses") }}'}
  94. </button>
  95. </div>
  96. </div>
  97. </div>
  98. `;
  100. document.body.appendChild(modal);
  102. // Add event listeners
  103. const confirmarBtn = modal.querySelector('#confirmar-accion-' + modalId);
  104. confirmarBtn.addEventListener('click', function() {
  105. confirmarAccionEmpresa(modalId, actividadId, actividadTipo, accion);
  106. });
  108. const searchInput = modal.querySelector('#buscar-empleado-' + modalId);
  109. searchInput.addEventListener('input', function() {
  110. filtrarEmpleados(modalId, this.value);
  111. });
  112. }
  114. // Show modal
  115. $(modal).modal('show');
  117. // Load employees
  118. cargarEmpleadosAutorizados(modalId, actividadId, actividadTipo, accion);
  119. }
  121. /**
  122. * Load authorized employees
  123. */
  124. function cargarEmpleadosAutorizados(modalId, actividadId, actividadTipo, accion) {
  125. const url = new URL('/es/empresa/mi-equipo/empleados-autorizados-cursos', window.location.origin);
  126. if (actividadId) url.searchParams.append('actividadId', actividadId);
  127. if (actividadTipo) url.searchParams.append('actividadTipo', actividadTipo);
  128. if (accion) url.searchParams.append('accion', accion);
  130. fetch(url, {
  131. method: 'GET',
  132. headers: {
  133. 'Content-Type': 'application/json',
  134. 'X-Requested-With': 'XMLHttpRequest'
  135. },
  136. credentials: 'same-origin'
  137. })
  138. .then(response => response.json())
  139. .then(data => {
  140. if (data.success) {
  141. mostrarListaEmpleados(modalId, data.empleados);
  142. } else {
  143. mostrarErrorEmpleados(modalId, data.message || '{{ "course.modal.error_loading_employees"|trans({}, "courses") }}');
  144. }
  145. })
  146. .catch(error => {
  147. console.error('Error:', error);
  148. mostrarErrorEmpleados(modalId, '{{ "course.modal.connection_error"|trans({}, "courses") }}');
  149. });
  150. }
  152. /**
  153. * Show employees list
  154. */
  155. function mostrarListaEmpleados(modalId, empleados) {
  156. const loadingDiv = document.getElementById('empleados-loading-' + modalId);
  157. const contentDiv = document.getElementById('empleados-content-' + modalId);
  158. const listDiv = document.getElementById('empleados-list-' + modalId);
  160. loadingDiv.style.display = 'none';
  161. contentDiv.style.display = 'block';
  163. if (empleados.length === 0) {
  164. listDiv.innerHTML = '<div class="alert alert-info">{{ "course.modal.no_authorized_employees"|trans({}, "courses") }}</div>';
  165. return;
  166. }
  168. let html = '<table class="table table-striped" style="margin-top: 15px;"><thead><tr>' +
  169. '<th><input type="checkbox" id="select-all-' + modalId + '"> {{ "course.modal.select_all"|trans({}, "courses") }}</th>' +
  170. '<th>{{ "course.modal.full_name"|trans({}, "courses") }}</th>' +
  171. '<th>{{ "course.modal.email"|trans({}, "courses") }}</th>' +
  172. '<th>{{ "course.modal.phone"|trans({}, "courses") }}</th>' +
  173. '</tr></thead><tbody>';
  175. empleados.forEach(function(empleado) {
  176. const isChecked = empleado.isPreseleccionado ? 'checked' : '';
  177. const initiallyChecked = empleado.isPreseleccionado ? 'true' : 'false';
  178. html += `
  179. <tr class="empleado-row" data-nombre="${empleado.nombreCompleto.toLowerCase()}" data-email="${empleado.email.toLowerCase()}">
  180. <td><input type="checkbox" class="empleado-checkbox" value="${empleado.id}" ${isChecked} data-initially-checked="${initiallyChecked}"></td>
  181. <td>${empleado.nombreCompleto}</td>
  182. <td>${empleado.email}</td>
  183. <td>${empleado.telefono || '-'}</td>
  184. </tr>
  185. `;
  186. });
  188. html += '</tbody></table>';
  189. listDiv.innerHTML = html;
  191. // Add event listeners
  192. const selectAllCheckbox = document.getElementById('select-all-' + modalId);
  193. const empleadoCheckboxes = listDiv.querySelectorAll('.empleado-checkbox');
  194. const confirmarBtn = document.getElementById('confirmar-accion-' + modalId);
  196. selectAllCheckbox.addEventListener('change', function() {
  197. empleadoCheckboxes.forEach(function(checkbox) {
  198. if (checkbox.closest('.empleado-row').style.display !== 'none') {
  199. checkbox.checked = selectAllCheckbox.checked;
  200. }
  201. });
  202. updateConfirmarButton(modalId);
  203. });
  205. /*empleadoCheckboxes.forEach(function(checkbox) {
  206. checkbox.addEventListener('change', function() {
  207. updateConfirmarButton(modalId);
  208. });
  209. });*/
  211. $(document).on("change", ".empleado-checkbox", function(event)
  212. {
  213. var $table = $(this).closest("table");
  214. var $checkboxes = $table.find("tbody .empleado-checkbox");
  215. var $headerCheckbox = $table.find("thead input[type='checkbox']");
  217. var allChecked = $checkboxes.length === $checkboxes.filter(":checked").length;
  218. $headerCheckbox.prop("checked", allChecked);
  220. updateConfirmarButton(modalId);
  221. });
  223. // Update button state initially (in case some employees are preselected)
  224. updateConfirmarButton(modalId);
  225. }
  227. /**
  228. * Show employees error
  229. */
  230. function mostrarErrorEmpleados(modalId, message) {
  231. const loadingDiv = document.getElementById('empleados-loading-' + modalId);
  232. const errorDiv = document.getElementById('empleados-error-' + modalId);
  234. loadingDiv.style.display = 'none';
  235. errorDiv.style.display = 'block';
  236. errorDiv.textContent = message;
  237. }
  239. /**
  240. * Filter employees
  241. */
  242. function filtrarEmpleados(modalId, searchTerm) {
  243. const listDiv = document.getElementById('empleados-list-' + modalId);
  244. const rows = listDiv.querySelectorAll('.empleado-row');
  246. searchTerm = searchTerm.toLowerCase();
  248. rows.forEach(function(row) {
  249. const nombre = row.dataset.nombre;
  250. const email = row.dataset.email;
  252. if (nombre.includes(searchTerm) || email.includes(searchTerm)) {
  253. row.style.display = '';
  254. } else {
  255. row.style.display = 'none';
  256. // Uncheck hidden rows
  257. const checkbox = row.querySelector('.empleado-checkbox');
  258. checkbox.checked = false;
  259. }
  260. });
  262. updateConfirmarButton(modalId);
  263. }
  265. /**
  266. * Update confirm button state
  267. */
  268. function updateConfirmarButton(modalId) {
  269. const listDiv = document.getElementById('empleados-list-' + modalId);
  270. const visibleCheckboxes = Array.from(listDiv.querySelectorAll('.empleado-checkbox')).filter(function(checkbox) {
  271. return checkbox.closest('.empleado-row').style.display !== 'none';
  272. });
  274. const confirmarBtn = document.getElementById('confirmar-accion-' + modalId);
  276. // Check if there's any change from the initial state (preselected employees)
  277. const initiallySelected = visibleCheckboxes.filter(function(checkbox) {
  278. return checkbox.dataset.initiallyChecked === 'true';
  279. });
  280. const currentlySelected = visibleCheckboxes.filter(function(checkbox) {
  281. return checkbox.checked;
  282. });
  284. // Enable button if there's any change from initial state
  285. const hasChanges = initiallySelected.length !== currentlySelected.length ||
  286. !initiallySelected.every(checkbox => checkbox.checked) ||
  287. !currentlySelected.every(checkbox => checkbox.dataset.initiallyChecked === 'true');
  289. confirmarBtn.disabled = !hasChanges;
  290. }
  292. /**
  293. * Confirm company action
  294. */
  295. function confirmarAccionEmpresa(modalId, actividadId, actividadTipo, accion) {
  296. const listDiv = document.getElementById('empleados-list-' + modalId);
  297. const checkedCheckboxes = listDiv.querySelectorAll('.empleado-checkbox:checked');
  299. const empleadosIds = Array.from(checkedCheckboxes).map(function(checkbox) {
  300. return parseInt(checkbox.value);
  301. });
  303. // Send AJAX request
  304. const url = '/es/courses/ajax/accion-curso-empresa';
  305. const requestData = {
  306. empleadosIds: empleadosIds,
  307. actividadId: actividadId,
  308. actividadTipo: actividadTipo,
  309. accion: accion
  310. };
  312. // Disable confirm button
  313. const confirmarBtn = document.getElementById('confirmar-accion-' + modalId);
  314. confirmarBtn.disabled = true;
  315. confirmarBtn.textContent = '{{ "course.modal.processing"|trans({}, "courses") }}';
  317. let modalTitle = $('#' + modalId + ' h5.modal-title').html();
  319. fetch(url, {
  320. method: 'POST',
  321. headers: {
  322. 'Content-Type': 'application/json',
  323. 'X-Requested-With': 'XMLHttpRequest'
  324. },
  325. body: JSON.stringify(requestData),
  326. credentials: 'same-origin'
  327. })
  328. .then(response => response.json())
  329. .then(data => {
  330. if (data.success) {console.log(data.details);
  331. if(data.details.inscritoAll)
  332. {
  333. if($("button[data-actividad-id=" + actividadId + "]").parent().hasClass('footer') || // LIST
  334. $("button[data-actividad-id=" + actividadId + "]").parent().hasClass('actions')) // DETALLE
  335. {
  336. $("button[data-actividad-id=" + actividadId + "]").parent().prepend('<span class="btn btn-secondary disabled">{{ 'courses.already_enrolled'|trans({}, 'courses')|default('Ya inscrito en este curso') }}</span>');
  337. $("button[data-actividad-id=" + actividadId + "]").remove();
  338. }
  339. }
  340. else if (data.details.interes || data.details.inscrito) {
  341. $("button[data-actividad-id=" + actividadId + "]").removeClass(["btn-secondary", "btn-primary"]).addClass("btn-primary");
  342. }
  343. else if(data.details.interes === false || data.details.inscrito === false)
  344. {
  345. $("button[data-actividad-id=" + actividadId + "]").removeClass(["btn-secondary", "btn-primary"]).addClass("btn-secondary");
  346. }
  348. var richMsg = data.message || '{{ "course.modal.action_completed"|trans({}, "courses") }}';
  349. if (data.breakdown) {
  350. var b = data.breakdown;
  351. var lines = [];
  352. if (b.added) lines.push('✓ ' + b.added + ' marcat' + (b.added > 1 ? 's' : '') + ' correctament');
  353. if (b.already) lines.push('• ' + b.already + ' ja ' + (b.already > 1 ? 'tenien' : 'tenia') + ' interès');
  354. if (b.no_account) lines.push('✕ ' + b.no_account + ' sense compte (no registrats al sistema)');
  355. if (b.errors && b.errors.length) {
  356. b.errors.forEach(function(e) { lines.push('✕ ' + e); });
  357. }
  358. if (lines.length) richMsg = lines.join('<br>');
  359. }
  360. AlertUtils.success(modalTitle, richMsg, {html: true}, AlertUtils.Buttons.simple);
  362. // Close modal
  363. $('#' + modalId).modal('hide');
  364. $("#" + modalId + " .empleados-list").html(null);
  365. $("#" + modalId + " div.alert").html(null);
  367. // Show success message
  368. {#alert(data.message || '{{ "course.modal.action_completed"|trans({}, "courses") }}');#}
  370. // Optionally reload page or update UI
  371. // window.location.reload();
  372. } else {
  373. {#alert(data.message || '{{ "course.modal.error_processing_action"|trans({}, "courses") }}');#}
  374. AlertUtils.danger(modalTitle, data.message || '{{ "course.modal.error_processing_action"|trans({}, "courses") }}', {}, AlertUtils.Buttons.simple);
  375. }
  376. })
  377. .catch(error => {
  378. console.error('Error:', error);
  379. {#alert('{{ "course.modal.connection_error_processing"|trans({}, "courses") }}');#}
  380. AlertUtils.danger(modalTitle, data.message || '{{ "course.modal.connection_error_processing"|trans({}, "courses") }}', {}, AlertUtils.Buttons.simple);
  381. })
  382. .finally(function() {
  383. // Re-enable confirm button
  384. confirmarBtn.disabled = false;
  385. confirmarBtn.textContent = accion === 'mostrarInteres' ? '{{ "course.modal.update_interests"|trans({}, "courses") }}' : '{{ "course.modal.update_enrollments"|trans({}, "courses") }}';
  386. });
  387. }
  388. </script>