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>
    

EvkProcesos

Librery version 1.0.6

Code scaffolding

Run ng generate component component-name --project evk-content to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project evk-content.

Note: Don't forget to add --project evk-content or else it will be added to the default project in your angular.json file.

Build

Run ng build evk-content to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build evk-procesos, go to the dist folder cd dist/evk-evk-procesos and run npm publish.

Running unit tests

Run ng test evk-procesos to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.