@evomatik/evk-procesos NPM

Evomatik Procesos Library

Libería angular para la creación de bandejas generales.

How to install

Instalar el paquete por comandos:

npm install @evomatik/evk-procesos

How to use

evk-procesos

Para poder usuar la libreria de evk-procesos es necesario en primer lugar importar el modulo EvkProcesosModule.

@NgModule({
    imports: [
        EvkProcesosModule,
        
    ]
})

Opciones de Configuración

Los atributos de configuración de la directiva son:

@Input()

usuarioReceptor - Usado para el filtrado de tareas. Nombre del usuario a quien está asignada la tarea.
usuarioEmisor - Usado para el filtrado de tareas. Nombre del usuario quien creo la tarea.
unidad - Usado para el filtrado de tareas. Nombre de la organización a la que está asignada la tarea.
tipoTarea - Usado para el filtrado de tareas. Él tipo de tarea.
camposDetalles - Arreglo listando los campos pertenecientes al detalle de la tarea que se desean mostrar en la columna de detalles y sus respectivos labels. El formato para especificar pares de campo y label es un arreglo conteniendo el label en primera posición y la ruta al campo en segunda. Para campos anidados se pone la ruta separada por puntos. Ejemplo: ['['Fecha creación', fecha'], ['Cosa', 'algo'],['NUC' 'expediente.folioNuc']]
recargaPaginaOn Usado cuando se desea recargar los datos de la pagina. Recibe un observable, cada que este emita se volveran a cargar los datos de la pagina
menuOpciones - Arreglo de objetos donde se definen las acciones disponibles en el menú de acciones. Recibe un arreglo de objetos de tipo Accion. Accion:

export interface Accion {
    /**
     * Determina el label del botón asociado a la acción que aparecera en el menu
     */ 
    label: string;
    /**
     * Función que se ejecuta al seleccionar la acción en el menu
     */ 
    accion: (tarea?) => any; 
    /**
     * Función para determinar cuando se debe mostrar la acción
     */ 
    show?: (tarea?) => boolean; 
}

Ejemplo: [ {label: 'Guardar', accion: (tarea) => this.servicio.save(tarea)}, {label: 'Emite', accion: (tarea) => this.subject$.next(tarea)}, {label: 'Alertar', accion: (tarea) => alert(tarea.tipoTarea), show: (tarea) => tarea.tipoTarea === 'Derivación' } ]

filtroEstado - Usado para agregar un select que filtre por estado tarea. Recibe un objeto de tipo FiltroConfig FiltroConfig
filtroTipo - Usado para agregar un select que filtre por tipo de tarea. Recibe un objeto de tipo FiltroConfig FiltroConfig

export interface FiltroConfig{
    /**
     * Determina el label del select usado para filtrar tareas
     */ 
    label: string;
    /**
     * Determina las opciones del select 
     */ 
    options: Observable<EvkOption[]> | Subject<EvkOption[]>;
    /**
     * Función que define una tranformación que se aplicara sobre la opción selecionada
     */ 
    mapToFilter?: (event) => string;
}

Ejemplo: [{label: 'Estado diligencia', options: of(arregloDeEvkOptions), mapToFilter: (tarea) => tarea.estadoTarea === 'Finalizada'}] colorEstatus - Objeto usado para definir el color correspondiente a cada estatus del chip de estatus. Ejemplo: {CREADA: '#BDF3FF', FINALIZADA: '#66F764'}

@Output()

dataLoaded: Evento emitido cuando se cargar los datos del paginador.

Ejemplo

export class BandejaPageComponent {
    public unidad = 27;
    public tipoTarea = 'derivacion';
    public detalles = [
        ['NIC', 'nic'],
        ['Unidad emisora', 'organizacionAnterior.label']
    ];
    public acciones = [
        {
            label: 'Accion 1', accion: (tarea) => console.log(tarea)
        },
        {
            label: 'Accion 2', accion: (tarea) => this.accionCompleja(tarea),
        }
    ];

<evk-procesos-bandeja
    [unidad]="unidad"
    [tipoTarea]="tipoTarea"
    [camposDetalle]="detalles"
    [menuOpciones]="acciones">
</evk-procesos-bandeja>