feat(CIT): Implementa mockups de demanda insatisfecha

src/app/app.module.ts

@@ -148,6 +148,7 @@ import { MPILibModule } from './modules/mpi/mpi-lib.module';
 import { FormulaBaseService } from './modules/rup/components/formulas';
 import { RiesgoCardiovascularService } from './modules/rup/components/formulas/riesgoCardiovascular.service';
 import { demandaInsatisfechaComponent } from './components/turnos/dashboard/demandaInsatisfecha';
+
 // INTERNACION
 import { PuntoInicioInternacionComponent } from './modules/rup/components/internacion/puntoInicio-internacion.component';
 import { RUPLibModule } from './modules/rup/rup-lib.module';
@@ -221,6 +222,7 @@ import { LogoSvgComponent } from './styles/logo.svg';
 import { MapsComponent } from './utils/mapsComponent';
 import { PermisosComponent } from './utils/permisos/permisos.component';
 
+
 registerLocaleData(localeEs, 'es');
 
 // Main module

src/app/app.routing.ts

@@ -40,6 +40,7 @@ import { PacienteComponent } from './core/mpi/components/paciente.component';
 // Internacion
 import { PuntoInicioInternacionComponent } from './modules/rup/components/internacion/puntoInicio-internacion.component';
 import { ValidarCertificadoComponent } from './modules/epidemiologia/components/validar-certificado/validar-certificado.component';
+import { DemandaInsatisfechaComponent } from './components/demandaInsatisfecha/demanda-insatisfecha.component';
 
 
 const appRoutes: Routes = [
@@ -87,6 +88,7 @@ const appRoutes: Routes = [
     { path: 'citas/sobreturnos/:idAgenda', component: AgregarSobreturnoComponent, canActivate: [RoutingNavBar, RoutingGuard] },
     { path: 'citas/paciente/:idAgenda', component: AgregarPacienteComponent, canActivate: [RoutingNavBar, RoutingGuard] },
     { path: 'citas/prestaciones_habilitadas', component: PrestacionesHabilitadasComponent, canActivate: [RoutingNavBar, RoutingGuard] },
+    { path: 'citas/demanda-insatisfecha', component: DemandaInsatisfechaComponent, canActivate: [RoutingNavBar] },
 
     {
         path: 'rup',

src/app/components/demandaInsatisfecha/demanda-insatisfecha.component.ts

@@ -0,0 +1,186 @@
+
+import { Auth } from '@andes/auth';
+import { Plex } from '@andes/plex';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { map } from 'rxjs/operators';
+import { ILlamado } from 'src/app/interfaces/turnos/IListaEspera';
+import { ListaEsperaService } from 'src/app/services/turnos/listaEspera.service';
+import { TurnoService } from 'src/app/services/turnos/turno.service';
+
+@Component({
+    selector: 'demanda-insatisfecha',
+    templateUrl: 'demanda-insatisfecha.html'
+})
+
+export class DemandaInsatisfechaComponent implements OnInit {
+    public listaEspera = [];
+    public listaLlamados = [];
+    public listaHistorial = [];
+    public itemSelected = null;
+    public filtros: any = {};
+    public selectorPrestacion;
+    public selectorMotivo;
+    public selectorEstadoLlamado;
+    public selectedPaciente;
+    public nuevoLlamado: ILlamado = {};
+    public estadosLlamado = [
+        { id: 'turnoAsignado', nombre: 'Turno asignado' },
+        { id: 'noContesta', nombre: 'No contesta' },
+        { id: 'numeroEquivocado', nombre: 'Numero equivocado' },
+        { id: 'otro', nombre: 'Otro' }
+    ];
+
+    public verFormularioLlamado = false;
+
+    public motivos = [
+        { id: 1, nombre: 'No existe la oferta en el efector' },
+        { id: 2, nombre: 'No hay turnos disponibles' },
+        { id: 3, nombre: 'Oferta rechazada por el paciente' }
+    ];
+
+    public columns = [
+        {
+            key: 'paciente',
+            label: 'Paciente'
+        },
+        {
+            key: 'prestacion',
+            label: 'Prestación'
+        },
+        {
+            key: 'fecha',
+            label: 'Fecha'
+        },
+        {
+            key: 'motivo',
+            label: 'Motivo'
+        },
+        {
+            key: 'estado',
+        }
+    ];
+
+    public tabIndex = 0;
+    public pacienteFields = ['sexo', 'fechaNacimiento', 'cuil', 'financiador', 'numeroAfiliado', 'direccion'];
+
+    @ViewChild('formLlamados', { read: NgForm }) formLlamados: NgForm;
+
+    constructor(
+        private listaEsperaService: ListaEsperaService,
+        private plex: Plex,
+        private auth: Auth,
+        private serviceTurno: TurnoService) { }
+
+    ngOnInit(): void {
+        this.getDemandas({});
+    }
+
+    private getDemandas(filtros) {
+        this.listaEsperaService.get({ ...filtros, estado: 'pendiente' }).subscribe((listaEspera: any[]) => {
+            this.listaEspera = listaEspera;
+            this.listaEspera.forEach(item => {
+                item.motivos = item.demandas.map(({ motivo }) => motivo);
+            });
+        });
+    }
+
+    public obtenerObjetoMasAntiguo() {
+        if (this.listaEspera.length === 0) {
+            return null;
+        }
+
+        return this.listaEspera.reduce((masAntiguo, item) => {
+            return item.fecha < masAntiguo.fecha ? item : masAntiguo;
+        });
+    }
+
+    public getHistorial(historial) {
+        const primerDemanda = this.listaEspera.reduce((masAntiguo, item) => {
+            return item.fecha < masAntiguo.fecha ? item : masAntiguo;
+        });
+
+        if (historial) {
+            this.serviceTurno.getHistorial({ pacienteId: this.itemSelected.paciente.id }).pipe(
+                map(historial => historial.filter(item => moment(item.fechaHoraDacion).isAfter(moment(primerDemanda.fecha))))
+            ).subscribe(historialFiltrado => {
+                this.listaHistorial = historialFiltrado;
+            });
+        }
+    }
+
+    public cambiarTab(value) {
+        this.tabIndex = value;
+    }
+
+    public seleccionarDemanda(demanda) {
+        this.itemSelected = demanda;
+        this.listaHistorial = null;
+        this.tabIndex = 0;
+        this.listaLlamados = !this.itemSelected.llamados ? [] : [...this.itemSelected.llamados];
+    }
+
+    public actualizarDemanda(demanda) {
+        const i = this.listaEspera.findIndex(item => item.id === demanda.id);
+        this.listaEspera[i] = demanda;
+    }
+
+    public refreshSelection({ value }, tipo) {
+        if (tipo === 'paciente') {
+            this.filtros = { ...this.filtros, paciente: value };
+        }
+
+        if (tipo === 'fechaDesde') {
+            this.filtros = { ...this.filtros, fechaDesde: value };
+        }
+
+        if (tipo === 'fechaHasta') {
+            this.filtros = { ...this.filtros, fechaHasta: value };
+        }
+
+        if (tipo === 'prestacion') {
+            this.filtros = { ...this.filtros, prestacion: value?.term };
+        }
+
+        if (tipo === 'motivo') {
+            this.filtros = { ...this.filtros, motivo: value?.nombre };
+        }
+
+        this.getDemandas(this.filtros);
+    }
+
+    public cerrar() { this.itemSelected = null; }
+
+    public agregarLlamado() {
+        this.verFormularioLlamado = !this.verFormularioLlamado;
+        this.nuevoLlamado = {};
+        this.formLlamados?.reset({});
+        this.formLlamados?.form.markAsPristine();
+    }
+
+    public async guardarLlamado(id) {
+        this.formLlamados.control.markAllAsTouched();
+
+        if (this.formLlamados.form.valid) {
+            try {
+                this.listaLlamados.push({ ...this.nuevoLlamado, createdBy: this.auth.usuario, createdAt: moment() });
+
+                this.listaEsperaService.patch(id, 'llamados', this.listaLlamados).subscribe((demanda) => {
+                    this.plex.toast('success', 'Llamado registrado exitosamente');
+                    this.agregarLlamado();
+                    this.actualizarDemanda(demanda);
+                });
+            } catch (error) {
+                this.plex.toast('danger', 'Error al guardar el llamado');
+            }
+        }
+    }
+
+    public seleccionarEstadoLlamado() {
+        this.nuevoLlamado.estado = this.selectorEstadoLlamado?.nombre;
+
+        if (this.selectorEstadoLlamado?.id !== 'otro') {
+            this.nuevoLlamado.comentario = null;
+        }
+    }
+}

src/app/components/demandaInsatisfecha/demanda-insatisfecha.html

@@ -0,0 +1,171 @@
+<plex-layout main="{{itemSelected ? '8' : '12'}}" [min]="4" [max]="5" [steps]="2">
+    <plex-layout-main>
+        <plex-title main titulo="Demanda insatisfecha">
+            <plex-button label="volver" type="danger" size="sm" position="left" routerLink='/inicio'></plex-button>
+        </plex-title>
+        <plex-wrapper>
+            <plex-text [(ngModel)]="filtros.paciente" name="paciente.nombreCompleto" label="Paciente"
+                       (change)="refreshSelection($event,'paciente')">
+            </plex-text>
+            <plex-select [(ngModel)]="selectorPrestacion" (change)="refreshSelection($event,'prestacion')"
+                         label="Prestación" tmPrestaciones preload="true" tipo="nominalizadas">
+            </plex-select>
+            <plex-datetime type="date" [(ngModel)]="filtros.fechaDesde" name="fechaDesde" label="Desde" class="fechas"
+                           [max]="filtros.fechaHasta" (change)="refreshSelection($event,'fechaDesde')">
+            </plex-datetime>
+            <plex-datetime type="date" [(ngModel)]="filtros.fechaHasta" name="fechaHasta" label="Hasta" class="fechas"
+                           [required]="false" (change)="refreshSelection($event,'fechaHasta')">
+            </plex-datetime>
+            <plex-select [(ngModel)]="selectorMotivo" ambito="ambulatorio" name="motivo" label="Motivo" [data]="motivos"
+                         (change)="refreshSelection($event,'motivo')">
+            </plex-select>
+        </plex-wrapper>
+        <div *ngIf="!listaEspera.length" class="mt-5">
+            <plex-label class="flex-column" icon="magnify" type="info" justify="center" size="xl" direction="column"
+                        titulo="No hay resultados para esta búsqueda"
+                        subtitulo="Edite algún filtro para realizar una búsqueda">
+            </plex-label>
+        </div>
+        <ng-container>
+            <plex-table *ngIf="listaEspera.length" [columns]="columns" #table="plTable" [offset]="102">
+                <plex-title titulo="Listado de pacientes" size="sm"></plex-title>
+                <tr *ngFor="let item of listaEspera" (click)="seleccionarDemanda(item)"
+                    [class.selected]="item.id === itemSelected?.id" [class.selectable]="true">
+                    <td>{{item.paciente.nombreCompleto}}</td>
+                    <td>{{item.tipoPrestacion.nombre}}</td>
+                    <td>{{item.fecha | fecha}}</td>
+                    <td>{{item.motivos}}</td>
+                    <td class="align-center" justify="center">
+                        <plex-badge class="ml-1" size="sm" type="info">
+                            {{item.estado}}
+                        </plex-badge>
+                    </td>
+                </tr>
+            </plex-table>
+        </ng-container>
+    </plex-layout-main>
+    <plex-layout-sidebar *ngIf="itemSelected" type="invert">
+        <plex-tabs size="full" [activeIndex]="tabIndex" (change)="cambiarTab($event)">
+            <plex-tab label="DATOS">
+                <ng-container>
+                    <plex-title titulo="Detalle paciente" size="md">
+                        <plex-button size="sm" type="danger" [icon]="'close'" (click)="cerrar()"></plex-button>
+                    </plex-title>
+                    <paciente-detalle [paciente]="itemSelected.paciente" orientacion="horizontal"
+                                      [fields]="pacienteFields">
+                    </paciente-detalle>
+                </ng-container>
+                <ng-container>
+                    <plex-title titulo="Listado" size="md">
+                    </plex-title>
+                    <plex-list>
+                        <ng-container>
+                            <plex-item *ngFor="let demanda of itemSelected.demandas">
+                                <plex-label size="md" titulo="Prestacion"
+                                            subtitulo="{{ itemSelected.tipoPrestacion.nombre }}">
+                                </plex-label>
+                                <plex-label size="md" titulo="Efector" subtitulo="{{ demanda.organizacion.nombre }}">
+                                </plex-label>
+                                <plex-label size="md" titulo="Fecha de demanda" subtitulo="{{ demanda.fecha | date: 'dd/mm/YYYY HH:mm' }}hs">
+                                </plex-label>
+                            </plex-item>
+                        </ng-container>
+                    </plex-list>
+                </ng-container>
+            </plex-tab>
+            <plex-tab label="LLAMADOS">
+                <plex-title titulo="Llamados" size="md">
+                    <plex-badge size="sm" type="warning" class="mr-1">
+                        <plex-icon name="phone" size="md"></plex-icon>
+                        {{ listaLlamados.length }}
+                    </plex-badge>
+                    <ng-container *ngIf="!verFormularioLlamado">
+                        <plex-button size="sm" type="success" icon="plus" (click)="agregarLlamado()"
+                                     ariaLabel="Agregar llamado" class="mr-1">
+                        </plex-button>
+                    </ng-container>
+                    <ng-container *ngIf="verFormularioLlamado">
+                        <plex-button size="sm" type="success" icon="check" (click)="guardarLlamado(itemSelected.id)"
+                                     ariaLabel="Guardar llamado" class="mr-1">
+                        </plex-button>
+                        <plex-button size="sm" type="danger" icon="close" (click)="agregarLlamado()" ariaLabel="Cerrar">
+                        </plex-button>
+                    </ng-container>
+                </plex-title>
+                <ng-container>
+                    <form #formLlamados="ngForm" *ngIf="verFormularioLlamado">
+                        <plex-wrapper justify>
+                            <plex-select grow="full" label="Seleccione una opción" [(ngModel)]="selectorEstadoLlamado"
+                                         name="estadoLlamado" [data]="estadosLlamado" [required]="true"
+                                         (change)="seleccionarEstadoLlamado()">
+                            </plex-select>
+                            <plex-text *ngIf="selectorEstadoLlamado?.id === 'otro'" grow="full" columns="6"
+                                       label="Ingrese comentario" [(ngModel)]="nuevoLlamado.comentario" name="nota"
+                                       multiline=true required="true">
+                            </plex-text>
+                        </plex-wrapper>
+                    </form>
+                </ng-container>
+                <ng-container>
+                    <plex-label *ngIf="!listaLlamados.length" class="flex-column" icon="informacion" type="warning"
+                                size="lg" direction="column" titulo="No se encuentran llamados registrados"
+                                subtitulo='Para agregar uno, presione el botón "+"'
+                                class="d-flex justify-content-center mt-4">
+                    </plex-label>
+                </ng-container>
+                <ng-container>
+                    <plex-list *ngIf="listaLlamados.length">
+                        <plex-item *ngFor="let llamado of listaLlamados">
+                            <plex-badge size="sm" type="info">
+                                {{ llamado?.createdAt | fecha }} {{ llamado?.createdAt | hora }}
+                            </plex-badge>
+                            <div class="d-flex align-items-center">
+                                <span *ngIf="llamado?.estado === 'Otro' && llamado?.comentario"
+                                      hint="{{llamado.comentario}}" hintType="info" hintIcon="message"
+                                      style="width:'40px'">Otro
+                                </span>
+                                <span *ngIf="llamado?.estado === 'Otro' && !llamado?.comentario" style="width:'40px'">
+                                    Otro
+                                </span>
+                                <span *ngIf="llamado?.estado !== 'Otro'">
+                                    {{llamado.estado}}
+                                </span>
+                            </div>
+                            <plex-label titulo="Registrado por"
+                                        subtitulo="{{llamado.createdBy?.nombreCompleto}}"></plex-label>
+                        </plex-item>
+                    </plex-list>
+                </ng-container>
+            </plex-tab>
+            <plex-tab label="HISTORIAL" (toggle)="getHistorial($event)">
+                <plex-title titulo="Historial de turnos" size="md">
+                    <plex-button size="sm" type="danger" [icon]="'close'" (click)="cerrar()"></plex-button>
+                </plex-title>
+                <ng-container>
+                    <plex-label *ngIf="!listaHistorial?.length" class="flex-column" icon="informacion" type="warning"
+                                size="lg" direction="column" titulo="No hay resultados"
+                                subtitulo="No se ha registrado ningún turno para el paciente"
+                                class="d-flex justify-content-center mt-4">
+                    </plex-label>
+                </ng-container>
+                <ng-container>
+                    <plex-list *ngIf="listaHistorial?.length">
+                        <plex-item *ngFor="let historial of listaHistorial">
+                            <div class="align-items-center">
+                                <plex-badge size="sm" type="success">
+                                    {{historial.estado}}
+                                </plex-badge>
+                            </div>
+                            <plex-label size="md" titulo="Fecha"
+                                        subtitulo="{{historial.horaInicio | fecha}} {{historial.horaInicio | hora}}hs"></plex-label>
+                            <plex-label size="md" titulo="Prestación"
+                                        subtitulo="{{historial.tipoPrestacion.term}}"></plex-label>
+                            <plex-label size="md" titulo="Efector"
+                                        subtitulo="{{historial.organizacion.nombre}}"></plex-label>
+                        </plex-item>
+                    </plex-list>
+                </ng-container>
+            </plex-tab>
+        </plex-tabs>
+    </plex-layout-sidebar>
+</plex-layout>