El botón de nuevo miembro

Bueno. Nuestra lista de usuarios con DT ya está en un estado muy elaborado. Sin embargo, aún nos falta el botón de crear un nuevo usuario. Además, y ya que estamos, vamos a añadirle otros botones a la tabla, para ofrecer nuevas funcionalidades. Después de todo, las funcionalidades que ofrece el plugin DataTables son lo que hace que merezca la pena usarlo. Si no, ¿por qué nos íbamos a estar «currando» todo esto, cuando ya teníamos una lista de usuarios funcional sin DT? Sin embargo, debido a lo extenso del tema, en este artículo sólo añadiremos el botón de «Nuevo Socio», dejando otros para el siguiente artículo.

Por supuesto, está claro que, en esta serie de artículos, no podremos enseñar todas las prestaciones que DataTables nos ofrece para nuestros proyectos Angular, pero sí las más empleadas. En una serie posterior, complementaria pero fuera de este curso, nos centraremos en las funciones menos conocidas, pero que puedan resultarnos útiles en algún desarrollo específico.

En todo caso, vamos a ver el estado en el que podemos dejar, por ahora, la lista de miembros de nuestro CRUD.

LOS COMPLEMENTOS DE BOTONES

Para poder incorporar botones a nuestras DT es necesario agregar nuevos componentes al proyecto Angular (y esto sigue creciendo). Para ello, en la terminal de VSC vamos a teclear las siguientes instrucciones:

npm install jszip --save
npm install datatables.net-buttons --save
npm install datatables.net-buttons-dt --save
npm install @types/datatables.net-buttons --save-dev

Además, tenemos que efectuar algunas inclusiones en el fichero de referencias angular.json, que nos queda así (reproducimos, únicamente, las claves styles y scripts, que son las afectadas):

Las líneas resaltadas son las que hemos incorporado nuevas a lo que ya teníamos.

EN EL COMPONENTE MembersListComponent

En MembersListComponent y, más concretamente en su controlador members-list.component.ts, debemos modificar las opciones de DT (la variable dtOptions, que es el nombre que le hemos dado), para que admita botones. Eso lo hacemos añadiéndole la siguiente opción:

dom: 'lBftip',

La opción dom define la forma en que se crearán y dispondrán los elementos que forman la tabla. La secuencia de letras que aparece no es aleatoria (aunque casi lo parezca). Obedece a unos flags definidos por el fabricante del plugin DataTables. Puedes ver los detalles en este enlace.

La siguiente clave que vamos a declarar en las opciones es buttons. Esta indica que botones van a aparecer. Sin embargo, en este caso no podemos declararla sin más dentro de las opciones. Eso es debido a que, si el usuario es un administrador de nivel bajo, no deberá ver el botón para crear nuevos miembros, mientras que si es un administrador de nivel full deberá disponer de un botón personalizado que le permita acceder a la vista de nuevo miembro.

Dado que la clave buttons recibe una matriz con la lista de botones que tendrá nuestro DT, y que, de momento, solo tendrá el botón de nuevo miembro, o ningún botón, según el caso, debemos definirla antes de las opciones, así:

Vemos que usamos una variable llamada botones. Si el administrador no es ROLE_FULL, esta variable es una matriz vacía. En caso contrario, se define un botón, en la forma en que se definen en el plugin DataTables. Como acción al pulsar (atributo action), se redirige a la página de nuevo miembro.

La forma de definir un botón personalizado como este está detallada en la documentación oficial del plugin, en concreto en este enlace. Lo que no te dice la documentación, ni se encuentra en ningún sitio (al menos yo no lo he visto en ninguna parte), es que, en un proyecto Angular, hay un problema con el atributo className. Si le pones, como hemos puesto aquí, la clase de bootsrap que dibuja un botón azul verás que, simplemente, no funciona. Todos los botones que se generan en el DT son grises, sí o sí. Esto se debe a que el plugin les agrega a los botones una clase específica llamada dt-button, que anula cualquier otra clase que tú le pongas, de forma que añadirle las clases btn btn-primary, por ejemplo, no funciona. Además, la clase dt-button es agregada a los botones por el código interno del plugin, con lo que tú no puedes decidir si la van a llevar o no. La llevan, y punto. La solución a este problema es, por supuesto, hacer que, una vez creado el botón, se le quite la clase. Para ello, cuando examines el código del controlador relativo a este artículo, encontrarás la siguiente línea jQuery:

$('.dt-button').removeClass('dt-button').css({'margin-left': '4px','margin-right': '4px'});

Así, a todos los elementos que incorporan la clase dt-button, se la eliminamos y le damos unos pequeños márgenes laterales, para que tengan un poco de «aire» a los lados. Problema resuelto.

Por último, a la propiedad buttons de las opciones le añadimos la matriz que hemos creado. En el caso de un ROLE_ADMIN estará vacía, como lo que no aparecerá ningún botón. En el caso de un ROLE_FULL tendremos el botón que hemos creado. Lo hacemos con la siguiente línea:

buttons: this.botones

Y ya lo tenemos funcionando. Pruébalo logueándote como adminitrador normal, y luego como administrador full.

CONCLUYENDO

Con esto hemos completado el CRUD tal y como lo teníamos antes de empezar a usar DT, aunque, evidentemente, muy mejorado, ya que el empleo de este plugin siempre mejora los listados de datos la experiencia del usuario con los mismos, que es, al fin y al cabo, de lo que se trata. En este enlace tienes la aplicación en su estado actual, para que puedas estudiar el código. En el próximo artículo, como te he prometido, añadiremos más funciones a la lista de socios, y la reharemos más al estilo de Angular.

   

Deja un comentario