falta borrar y busqueda por columnas

src/main/resources/templates/imprimelibros/partials/modal-form.html

@@ -7,7 +7,6 @@
           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
         </div>
         <div class="modal-body" th:id="${bodyId}">
-          
         </div>
       </div>
     </div>

src/main/resources/templates/imprimelibros/users/user-form.html

@@ -0,0 +1,60 @@
+<div th:fragment="userForm">
+    <form id="userForm" novalidate th:action="${action}" th:object="${user}" method="post" th:data-add="#{usuarios.add}"
+        th:data-edit="#{usuarios.editar}">
+
+        <input type="hidden" name="_method" value="PUT" th:if="${user.id != null}" />
+
+        <div th:if="${#fields.hasGlobalErrors()}" class="alert alert-danger">
+            <div th:each="e : ${#fields.globalErrors()}" th:text="${e}"></div>
+        </div>
+
+        <div class="form-group">
+            <label th:text="#{usuarios.form.nombre}" for="nombre">Nombre</label>
+            <input type="text" class="form-control" id="nombre" th:field="*{fullName}"
+                th:classappend="${#fields.hasErrors('fullName')} ? ' is-invalid'" required>
+            <div class="invalid-feedback" th:if="${#fields.hasErrors('fullName')}" th:errors="*{fullName}">Error</div>
+        </div>
+        <div class="form-group">
+            <label th:text="#{usuarios.form.email}" for="email">Correo electrónico</label>
+            <input type="email" class="form-control" id="email" th:field="*{userName}"
+                th:classappend="${#fields.hasErrors('userName')} ? ' is-invalid'" required>
+            <div class="invalid-feedback" th:if="${#fields.hasErrors('userName')}" th:errors="*{userName}">Error</div>
+        </div>
+        <div class="form-group">
+            <label th:text="#{usuarios.form.password}" for="password">Contraseña</label>
+            <input type="password" class="form-control" id="password" th:field="*{password}" minlength="6"
+                th:attr="required=${user.id == null}" th:classappend="${#fields.hasErrors('password')} ? ' is-invalid'">
+            <div class="invalid-feedback" th:if="${#fields.hasErrors('password')}" th:errors="*{password}">Error</div>
+        </div>
+        <div class="form-group">
+            <label th:text="#{usuarios.form.confirmarPassword}" for="confirmPassword">Confirmar Contraseña</label>
+            <input type="password" class="form-control" id="confirmPassword" th:field="*{confirmPassword}" minlength="6"
+                th:attr="required=${user.id == null}"
+                th:classappend="${#fields.hasErrors('confirmPassword')} ? ' is-invalid'">
+            <div class="invalid-feedback" th:if="${#fields.hasErrors('confirmPassword')}"
+                th:errors="*{confirmPassword}">Error</div>
+        </div>
+        <div class="form-group">
+            <label th:text="#{usuarios.form.rol}" for="rol">Rol</label>
+            <select class="form-control" id="rol" th:field="*{roleName}" required
+                th:classappend="${#fields.hasErrors('roleName')} ? ' is-invalid'">
+                <option value="USER" selected>Usuario</option>
+                <option value="ADMIN">Administrador</option>
+                <option value="SUPERADMIN">Super Administrador</option>
+            </select>
+            <div class="invalid-feedback" th:if="${#fields.hasErrors('roleName')}" th:errors="*{roleName}">Error</div>
+        </div>
+        <div class="form-group">
+            <label th:text="#{usuarios.form.estado}" for="estado">Estado</label>
+            <select class="form-control" id="estado" th:field="*{enabled}" required
+                th:classappend="${#fields.hasErrors('enabled')} ? ' is-invalid'">
+                <option th:value="true" th:selected="${user.id == null or user.enabled}">Activo</option>
+                <option th:value="false" th:selected="${user.id != null and !user.enabled}">Inactivo</option>
+            </select>
+            <div class="invalid-feedback" th:if="${#fields.hasErrors('enabled')}" th:errors="*{enabled}">Error</div>
+        </div>
+        <div class="row mt-3 justified-content-center d-flex">
+            <button type="submit" class="btn btn-secondary" th:text="#{usuarios.guardar}">Guardar</button>
+        </div>
+    </form>
+</div>

src/main/resources/templates/imprimelibros/users/users-list.html

@@ -21,6 +21,11 @@
     <th:block layout:fragment="content">
         <div th:if="${#authorization.expression('isAuthenticated()')}">
 
+            <!-- Modales-->
+            <div
+                th:replace="imprimelibros/partials/modal-form :: modal('userFormModal', 'usuarios.add', 'modal-md', 'userModalBody')">
+            </div>
+
             <nav aria-label="breadcrumb">
                 <ol class="breadcrumb">
                     <li class="breadcrumb-item"><a href="/"><i class="ri-home-5-fill"></i></a></li>
@@ -30,9 +35,14 @@
 
             <div class="container-fluid">
 
+                <button type="button" class="btn btn-secondary mb-3" id="addUserButton">
+                    <i class="ri-add-line align-bottom me-1"></i> <span th:text="#{usuarios.add}">Añadir usuario</span>
+                </button>
+
                 <table id="users-datatable" class="table table-striped table-nowrap responsive w-100">
                     <thead>
                         <tr>
+                            <th scope="col" th:text="#{usuarios.tabla.id}">ID</th>
                             <th scope="col" th:text="#{usuarios.tabla.nombre}">Nombre</th>
                             <th scope="col" th:text="#{usuarios.tabla.email}">Correo electrónico</th>
                             <th scope="col" th:text="#{usuarios.tabla.rol}">Rol</th>