MPI - Mejorar performance de auditoria de pacientes

src/app/modules/auditoria/component/auditoria-listado.component.ts

@@ -16,7 +16,7 @@ export class ListadoAuditoriaComponent {
     // Indica si se esta listando desde la seccion de reporte de errores, ya que tiene atributos de interés distintos
     @Input() errorTab = false;
     // Reportes de errores traidos de LogPaciente, ordenados por id de paciente
-    @Input() registroReportes = [];
+    @Input() registroReportes: any;
 
     // Evento que se emite al seleccionar un paciente de la lista
     @Output() selected: EventEmitter<IPaciente> = new EventEmitter<IPaciente>();

src/app/modules/auditoria/component/auditoria-listado.html

@@ -1,4 +1,4 @@
-<plex-list height="{{ errorTab ? '85%' : '80%'}}" [striped]="true" (scrolled)="onScroll()">
+<plex-list [height]="errorTab ? '100%' : '80%'" [striped]="true" (scrolled)="onScroll()">
     <plex-heading *ngIf="errorTab" [sticky]="true">
         <b label>Paciente</b>
         <b label>Edad</b>
@@ -41,16 +41,16 @@
             </plex-dropdown>
 
             <!-- Exclusivo tab reporte de errores -->
-            <plex-label *ngIf="errorTab && registroReportes.length"
-                        titulo="{{ registroReportes[paciente.id][0]?.createdBy.nombreCompleto || 'Sin datos'}}"
-                        subtitulo="{{ registroReportes[paciente.id][0]?.createdBy.organizacion.nombre || ''}}">
+            <plex-label *ngIf="errorTab && registroReportes && registroReportes[paciente.id] && registroReportes[paciente.id].length > 0"
+                        titulo="{{ registroReportes[paciente.id][0]?.createdBy?.nombreCompleto || 'Sin datos'}}"
+                        subtitulo="{{ registroReportes[paciente.id][0]?.createdBy?.organizacion?.nombre || ''}}">
             </plex-label>
 
             <plex-badge *ngIf="errorTab && !paciente.reportarError" type="success">
                 Corregido
             </plex-badge>
 
-            <plex-badge *ngIf="errorTab && registroReportes.length" type="info">
+            <plex-badge *ngIf="errorTab && registroReportes && registroReportes[paciente.id]" type="info">
                 {{ registroReportes[paciente.id][0]?.createdAt | fecha:'utc'}}
             </plex-badge>
 

src/app/modules/auditoria/component/reporte-errores.component.ts

@@ -1,15 +1,15 @@
 import { Auth } from '@andes/auth';
 import { Plex } from '@andes/plex';
 import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
-import { forkJoin } from 'rxjs';
 import { IPaciente } from 'src/app/core/mpi/interfaces/IPaciente';
 import { PacienteService } from 'src/app/core/mpi/services/paciente.service';
 import { LogPacienteService } from 'src/app/services/logPaciente.service';
 import { ModalCorreccionPacienteComponent } from './modal-correccion-paciente.component';
 
 @Component({
     selector: 'reporte-errores',
-    templateUrl: 'reporte-errores.html'
+    templateUrl: 'reporte-errores.html',
+    styleUrls: ['reporte-errores.scss']
 })
 
 export class ReporteErroresComponent implements OnInit {
@@ -21,13 +21,19 @@ export class ReporteErroresComponent implements OnInit {
     filtroPaciente: string;
     pacientesReportados = [];
     corregirPaciente: Number;
-    showReporteError = false; // se muestra en el sidebar datos del error reportado
+    showReporteError = false;
     permisoEdicion: Boolean;
     permisoVincular: Boolean;
     pacienteSelected: IPaciente;
-    reportes = [];
+    reportes = {};
     pacientes = [];
 
+    // paginación infinite scroll
+    loading = false;
+    scrollEnd = false;
+    skip = 0;
+    readonly limit = 20;
+
     constructor(
         public auth: Auth,
         private plex: Plex,
@@ -37,23 +43,77 @@ export class ReporteErroresComponent implements OnInit {
     ngOnInit() {
         this.permisoEdicion = this.auth.check('auditoriaPacientes:edicion');
         this.permisoVincular = this.auth.check('auditoriaPacientes:vincular');
+        this.cargar();
+    }
 
-        forkJoin([
-            this.pacienteService.get({ reportarError: true, activo: true }), // pacientes
-            this.logPacienteService.get({ operacion: 'error:reportar' }) // registros de errores reportados
-        ]).subscribe(respuesta => {
-            if (respuesta?.length) {
-                this.pacientesReportados = respuesta[0];
-                this.corregirPaciente = null;
-                const erroresReportados = respuesta[1];
-                this.pacientesReportados.forEach(pac => {
-                    this.reportes[pac.id] = erroresReportados.filter((reg: any) => reg.paciente.id === pac.id);
-                });
+    /**
+     * Carga una página de pacientes con errores reportados y sus logs asociados.
+     * @param reset si es true reinicia la lista (nueva búsqueda), si es false concatena (scroll)
+     */
+    cargar(reset = true) {
+        if (this.loading || (this.scrollEnd && !reset)) { return; }
+
+        if (reset) {
+            this.pacientesReportados = [];
+            this.pacientes = [];
+            this.reportes = {};
+            this.skip = 0;
+            this.scrollEnd = false;
+        }
+
+        this.loading = true;
+        const params: any = {
+            reportarError: true,
+            activo: true,
+            skip: this.skip,
+            limit: this.limit
+        };
+        if (this.filtroPaciente) {
+            params.search = this.filtroPaciente;
+        }
+
+        this.pacienteService.get(params).subscribe((pacientesBatch: any[]) => {
+            if (!pacientesBatch || !pacientesBatch.length) {
+                this.scrollEnd = true;
+                this.loading = false;
+                return;
             }
-            this.pacientes = this.pacientesReportados;
+
+            // Si vienen menos registros que el límite, ya llegamos al final
+            if (pacientesBatch.length < this.limit) {
+                this.scrollEnd = true;
+            }
+
+            const ids = pacientesBatch.map(p => p.id).join(',');
+
+            // Pedimos los logs sólo de los pacientes de esta página
+            this.logPacienteService.get({ ids, operacion: 'error:reportar' }).subscribe((logs: any[]) => {
+                pacientesBatch.forEach(pac => {
+                    this.reportes[pac.id] = (logs || []).filter((reg: any) => reg.paciente?.id === pac.id);
+                });
+
+                this.pacientesReportados = this.pacientesReportados.concat(pacientesBatch);
+                this.skip = this.pacientesReportados.length;
+                this.pacientes = this.pacientesReportados;
+                this.loading = false;
+            }, () => {
+                // Si falla la carga de logs igual mostramos los pacientes
+                this.pacientesReportados = this.pacientesReportados.concat(pacientesBatch);
+                this.skip = this.pacientesReportados.length;
+                this.pacientes = this.pacientesReportados;
+                this.loading = false;
+            });
+        }, () => {
+            this.loading = false;
         });
     }
 
+    onScroll() {
+        if (!this.scrollEnd) {
+            this.cargar(false);
+        }
+    }
+
     onSelect(paciente: IPaciente) {
         if (paciente) {
             this.pacienteSelected = paciente;
@@ -71,14 +131,7 @@ export class ReporteErroresComponent implements OnInit {
     }
 
     filtrarPaciente() {
-        const resultados = this.pacientesReportados.filter((paciente: IPaciente) => {
-            const data = (paciente.nombre + paciente.apellido + paciente.documento).toLowerCase();
-            const filtros = (this.filtroPaciente || '').toLowerCase().split(' ');
-
-            return filtros.every(item => data.includes(item));
-        });
-
-        this.pacientes = this.filtroPaciente && this.filtroPaciente.length ? resultados : this.pacientesReportados;
+        this.cargar(true);
     }
 
     savePatient(paciente: IPaciente) {
@@ -98,6 +151,8 @@ export class ReporteErroresComponent implements OnInit {
                     } else {
                         this.pacienteSelected = respSave;
                         this.plex.toast('success', 'Los datos se actualizaron correctamente!');
+                        // recargamos la lista para reflejar el cambio
+                        this.cargar();
                     }
 
                 } else {

src/app/modules/auditoria/component/reporte-errores.html

@@ -1,15 +1,15 @@
-<plex-text [(ngModel)]="filtroPaciente" (change)="filtrarPaciente()" name='filtrarPaciente' [debounce]="500"
-           placeholder="Escriba un documento / apellido / nombre">
-    <plex-icon name="account-search" left></plex-icon>
-</plex-text>
+<plex-text [(ngModel)]="filtroPaciente" (ngModelChange)="filtrarPaciente()" ...></plex-text>
 
-<div *ngIf="pacientes.length">
+<div *ngIf="pacientes.length" class="flex-grow-1">
     <auditoria-listado [pacientes]="pacientes" [registroReportes]="reportes" [autoselect]="false" [errorTab]="true"
-                       (selected)="onSelect($event)">
+                       (selected)="onSelect($event)" (scrolled)="onScroll()">
     </auditoria-listado>
-</div>
 
-<div *ngIf="!pacientes.length" class="alert alert-default">
+    <div *ngIf="loading" class="loading-overlay">
+        <plex-loader type="ball-pulse"></plex-loader>
+    </div>
+</div>
+<div *ngIf="!loading && !pacientes.length" class="alert alert-default">
     <plex-icon name="emoticon-happy"></plex-icon> No se encontraron pacientes con datos reportados.
 </div>
 

src/app/modules/auditoria/component/reporte-errores.scss

@@ -0,0 +1,38 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
+
+.flex-grow-1 {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    position: relative;
+}
+
+auditoria-listado {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+
+    ::ng-deep {
+        plex-list {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            min-height: 0;
+        }
+
+        .striped.md.size-lg {
+            flex: 1; 
+            min-height: 0;
+            overflow-y: auto !important;
+        }
+    }
+}