Guajiritos User Panel

Guajiritos User Panel es una librería de angular para el trabajo con la sesión de usuario de la empresa Guajiritos S.R.L.

Instalación

Con npm

npm i @guajiritos/user-panel @guajiritos/services --save

Con yarn

yarn add @guajiritos/user-panel @guajiritos/services

Con pnpm

pnpm add @guajiritos/user-panel @guajiritos/services

Importar la dependencia en tu proyecto.

import { GuajiritosUserPanel } from '@guajiritos/user-panel';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    GuajiritosUserPanel,
    BrowserAnimationsModule,
  ]
})

Importar la etiqueta en el componente correspondiente.

<guajiritos-user-panel></guajiritos-user-panel>

Entrada

Como elementos opcionales se pueden introducir los siguientes campos:

• user - Corresponde al usuario autenticado en los sistemas de Guajiritos S.R.L. Puedes importar la interfaz desde @guajiritos/services.

<guajiritos-user-panel [user]="'user"></guajiritos-user-panel>

• options - Corresponde a las opciones del panel de usuario. Puedes importar la interfaz desde @guajiritos/services.

<guajiritos-user-panel [options]="options"></guajiritos-user-panel>

Las opciones de usuario se pueden encontrar en la interfaz GuajiritosUserPanelOptions, todos los valores son opcionales. Puedes importar la interfaz desde @guajiritos/services.

options: GuajiritosUserPanelOptions = {
  showProfile: true,
  showSecondaryLogout: false,
  color: 'primary',
  width: '100%'
};

La ruta de la imagen se concatena con la imagen del usuario.

user = {
  avatar: 'guajiritos-Logo-blanco.png',
};

Ruta resultante 'https://www.guajiritos.com/assets/logos/banner/guajiritos-Logo-blanco.png'

• customButtons - Corresponde a una lista de botones customizables para el panel de usuario.

<guajiritos-user-panel [customButtons]="customButtons"></guajiritos-user-panel>

La interfaz de botones customizables GuajiritosUserPanelButton define un icono de material y el texto del botón. Puedes importar la interfaz desde @guajiritos/services.

customButtons: GuajiritosUserPanelButton[] = [
  {
    id: 'MyCustomButton',
    icon: 'users',
    text: 'Usuarios'
  }
]

Salida

• onEditProfile - Evento lanzado al hacer click en el botón Gestiona tu perfil.
• onLogout - Evento lanzado al hacer click en el botón Cerrar la sesión.
• onLogoutAlternative - Evento lanzado al hacer click en el botón Cerrar la sesión alternativa. Esta opción solo es visible si entre las opciones del panel está activa la opción showSecondaryLogout.
• onCustomButtonClick - Evento lanzado al hacer click en uno de los botones customizables, devuelve el botón correspondiente.