falta borrar y busqueda por columnas

src/main/resources/static/assets/js/pages/imprimelibros/users/list.js

@@ -1,29 +1,84 @@
 $(() => {
   const language = document.documentElement.lang || 'es-ES';
-  
+
   const table = new DataTable('#users-datatable', {
-    processing: true,
-    serverSide: true,
-    language: {
-      url: '/assets/libs/datatables/i18n/' + language + '.json'
-    },
+    processing: true, serverSide: true, pageLength: 50,
+    language: { url: '/assets/libs/datatables/i18n/' + language + '.json' },
     responsive: true,
-    ajax: {
-      url: '/users/datatable',
-      method: 'GET',
-      data: d => { /* extra params si quieres */ }
-    },
-    order: [[0, 'asc']],
+    ajax: { url: '/users/datatable', method: 'GET' },
+    order: [[0,'asc']],
     columns: [
-      { data: 'fullName', name: 'fullname' },
-      { data: 'userName', name: 'username' },
-      { data: 'roles', name: 'roles' },
+      { data: 'id', name: 'id' , orderable: true },
+      { data: 'fullName', name: 'fullName' , orderable: true },
+      { data: 'userName', name: 'userName' , orderable: true },
+      { data: 'roles', name: 'roleRank' },
       { data: 'enabled', name: 'enabled', searchable: false },
       { data: 'actions', name: 'actions' }
     ],
-    columnDefs: [
-      // Desactiva orden y búsqueda en la columna de acciones
-      { targets: -1, orderable: false, searchable: false }
-    ]
+    columnDefs: [{ targets: -1, orderable: false, searchable: false }]
+  });
+
+  const modalEl = document.getElementById('userFormModal');
+  const modal   = bootstrap.Modal.getOrCreateInstance(modalEl);
+
+  // Abrir "Crear"
+  $('#addUserButton').on('click', (e) => {
+    e.preventDefault();
+    $.get('/users/form', function (html) {
+      $('#userModalBody').html(html);
+      const title = $('#userModalBody #userForm').data('add');
+      $('#userFormModal .modal-title').text(title);
+      modal.show();
+    });
+  });
+
+  // Abrir "Editar"
+  $(document).on('click', '.btn-edit-user', function (e) {
+    e.preventDefault();
+    const id = $(this).data('id');
+    $.get('/users/form', { id }, function (html) {  
+      $('#userModalBody').html(html);
+      const title = $('#userModalBody #userForm').data('edit');
+      $('#userFormModal .modal-title').text(title);
+      modal.show();
+    });
+  });
+
+  // Submit del form en el modal
+  $(document).on('submit', '#userForm', function (e) {
+    e.preventDefault();
+    const $form = $(this);
+
+    $.ajax({
+      url: $form.attr('action'),
+      type: 'POST',               // PUT simulado via _method
+      data: $form.serialize(),
+      dataType: 'html',
+      success: function (html) {
+        // Si por cualquier motivo llega 200 con fragmento, lo insertamos igual
+        if (typeof html === 'string' && html.indexOf('id="userForm"') !== -1 && html.indexOf('<html') === -1) {
+          $('#userModalBody').html(html);
+          const isEdit = $('#userModalBody #userForm input[name="_method"][value="PUT"]').length > 0;
+          const title  = $('#userModalBody #userForm').data(isEdit ? 'edit' : 'add');
+          $('#userFormModal .modal-title').text(title);
+          return;
+        }
+        // Éxito real: cerrar y recargar tabla
+        modal.hide();
+        table.ajax.reload(null, false);
+      },
+      error: function (xhr) {
+        // Con 422 devolvemos el fragmento con errores aquí
+        if (xhr.status === 422 && xhr.responseText) {
+          $('#userModalBody').html(xhr.responseText);
+          const isEdit = $('#userModalBody #userForm input[name="_method"][value="PUT"]').length > 0;
+          const title  = $('#userModalBody #userForm').data(isEdit ? 'edit' : 'add');
+          $('#userFormModal .modal-title').text(title);
+          return;
+        }
+        // Fallback
+        $('#userModalBody').html('<div class="p-3 text-danger">Error inesperado.</div>');
+      }
+    });
   });
 });