Helpers

Playground

Contabilidad

Tipos KPI

Subir Documentos

14 botones

Agrupar Chips

Ruby
Html

<%= table_chip array_chip(token).compact  %>
  

<td width="12%">
  <div class="chip badge badge-info mb-2" data-toggle="tooltip" data-title="Lectura" style="" data-original-title="" title="">
    Contabilidad
  </div>
  <div class="chip badge badge-info mb-2" data-toggle="tooltip" data-title="Lectura" style="" data-original-title="" title="">
    Empleados
  </div>
  <div class="chip badge badge-warning mb-2" data-toggle="tooltip" data-title="Lectura y Modificación" style="" data-original-title="" title="">
    Asistencia
  </div>
  <a data-toggle="popover" data-html="true" data-placement="right" data-content=
    "<p class=&quot;mb-1&quot;> Lectura </p>
    <div class=&quot;chip badge badge-info mb-2&quot;
      Contabilidad
    </div>
    <div class=&quot;chip badge badge-info mb-2&quot;>
      Empleados
    </div>
    <div class=&quot;chip badge badge-info mb-2&quot;>
      Subir Documentos
    </div>
    <div class=&quot;chip badge badge-info &quot;>
      Usuarios y perfiles
    </div>
    <p class=&quot;mb-1 mt-2&quot;> Lectura y Modificación </p> <div class=&quot;chip badge badge-warning mb-2&quot;>Asistencia</div>
    <div class=&quot;chip badge badge-warning mb-2&quot;>
      Items
    </div>
    <div class=&quot;chip badge badge-warning mb-2&quot;>
      Vacaciones
    </div>
    " title="Detalle" href="javascript:void(0)" aria-expanded="false">4 Más...
  </a>
</td>  

Lista de parámetros

Parámetro

Tipo

Detalle

group_chip	Bolean	Indica si los chips se deben agrupar o no
amount_chip	Number	Cantidad máxima de chips que se mostraran

Table Chip

Las tablas pueden llevar un chip de forma unitaria dentro de sus celdas, pero también existen casos estresados donde podemos ver hasta 14 chips en una celda, para estos casos puntuales, se utiliza lo siguiente:

Cuando los chips son muchos, las celdas tienden a crecer innecesariamente, deformando los campos. Para evitar esto, se deben mostrar hasta 3 resultados y un link too que indique el número restante. Al pincharlo, aparecerá un popover que mostrará el detalle del total de los chips, agrupandolo de manera ordenada.

Para esto, se utiliza un helper, el cual abrira un Popover con el detalle de los chips.

Por ningún motivo puede ocurrir que los chips se apilen de manera que rompan la vista

Columna de Acciones (Table_Actions)

Una tabla puede llevar distintas acciones, esás acciones se muestran como btn-icons. Para ello se ha definido una regla de tres para el uso del helper:

Si hay 2 se muestran los 2
Si hay 3 se muestran los 3
Si hay 4 se muestran solo 2 y el resto dentro del icono del dropdown convirtiéndose en texto

Cuando hay más de tres acciones aparece el kebab Vertical (More_Vert) En la libería de material. En estos casos se prorizaran acciones primarias, las acciones secundarias como editar y eliminar quedarán siempre dentro de un dropdown.

Cuando hay tres o menos acciones, estas serán siempre visibles en la tabla, incluyendo las acciones secundarias de editar y eliminar.

Se pueden dar casos en la tabla donde exista una acción única, esta dependera del contexto de cada tabla, pero es posile que esta acción sea destructiva como en el caso de eliminar documentos. En estos casos se mostrará el btn-icon destructive.

El select list del dropdown se abre solo en los casos donde exista el botón kebab englobando más de 3 acciones.

Ejemplo de uso en contexto:

La acción “Eliminar” siempre debe ir al final de la lista y en color rojo. El token para esto es el watermelon 500

Se debe utilizar btn-icons con la clase Ghost

No utilizar como filled ni outline

Acciones universales

Las acciones universales son aquellas de uso frecuente en tablas en Buk. Se pueden utilizar para distintos contextos según el caso de uso, si queremos añadir mas de una acción el orden siempre debe ser: Primaria, Primaria & Destructiva, Secundaria, Secundaria & Destructiva.

Acciones universales

Icono	Nombre de acción	Nombre de icono	Caso de uso	Tipo de acción
delete	Eliminar	delete	Se utiliza para eliminar elementos por lo gereal permanentemente	Secundria & destructiva
edit	Editar	edit	Se utiliza para hacer cambios en elementos que ya existen	Primaria
manage_search	Ver más / Detalle	manage_search	Se utiliza para mostrar información adicional en un recurso como popover o sidebar	Primaria
visibility visibility_off	Mostrar /Ocultar	visibility / visibility_off	Se utiliza para mostrar u ocultar información	Primaria
send	Enviar	send	Se utiliza en acciones que requieren enviar documentos, emails, mensajes, notificaciones	Primaria
notifications	Notificar	notifications	Se utiliza para avisar a otra persona sobre un proceso, por lo general gatilla correo	Primaria
preview	Previsualizar	preview	Se utiliza para previsulizar la creacion de un elemento que verán otros usuarios	Primaria
today	Calendario	today	Sirve para identificar fechas y plazos (días, semanas, meses y años)	Secundaria
save	Guardar	save	Se utiliza en acciones que requieren guardar elementos o cambios	Secundaria
file_download	Descargar	file_download	Se utiliza para descargar imágenes, documentos u otros elementos	Primaria
block	Desactivar	block	Esta acción desactiva un proceso o elemento que esta activo en la plataforma	Secundaria & Desctructiva
reply	Responder	reply	Se utiliza para responder contenidos como formularios o encuestas	Primaria
check_circle unpublished	Publicar / Despublicar	check_circle / unpublished	Se utiliza para hacer público u ocultar un elemento	Primaria
content_copy	Copiar	content_copy	Se utiliza para replicar elementos o procesos	Secundaria
restore_page	Restaurar	restore_page	Se utiliza para restaurar un elemento que fue eliminado	Primaria
check close	Aprobar / Rechazar	check / close	Se utiliza para aprobar o rechazar un elemento	Primaria / Primaria & Destructiva
lock_open	Desbloquear / Abrir	lock_open	Se utiliza para desbloquear / abrir un elemento específico	Primaria
lock	Bloquear / Cerrar	lock	Se utiliza para bloquear / cerrar un elemento en específico	Primaria & Destructiva
share	Compartir	share	Se utiliza para compartir contenidos a otros usuarios dentro de la plataforma	Secundaria

Writing para las acciones

Para crear una acción nueva debemos tener en cuenta que el nombre no debe superar las dos palabras. Debemos ser lo más específicos posibles en lo que respecta a indicar qué hace esa acción.

Ejemplos:

"Crear documento de firma" reemplazarlo por "Crear documento". "Ver más detalles" reemplazarlo por "Detalles".

Helpers

Playground

Lista de parámetros

Table Chip