feat(TOP-208):"Listado de turnos futuros"

src/app/components/top/solicitudes/detalleSolicitud.component.ts

@@ -23,9 +23,10 @@ export class DetalleSolicitudComponent implements OnChanges, OnDestroy {
 
     public items = [
         { key: 'solicitud', label: 'SOLICITUD' },
-        { key: 'historial', label: 'HISTORIAL' }
+        { key: 'historial', label: 'HISTORIAL' },
+        { key: 'turnos', label: 'TURNOS' }
     ];
-    public mostrar;
+    public mostrar = 'solicitud';
     public verIndicaciones = false;
 
     constructor(
@@ -48,15 +49,16 @@ export class DetalleSolicitudComponent implements OnChanges, OnDestroy {
                     };
                 });
             });
-        }
-        this.pacienteService.getEstadoInternacion(this.prestacionSeleccionada.paciente.id).subscribe(resp => {
-
-            if (resp) {
-                this.internacion = resp.estado;
-                this.organizacionInternacion = resp.organizacion ? resp.organizacion : 'Sin organización';
+            if (this.prestacionSeleccionada?.paciente?.id) {
+                this.pacienteService.getEstadoInternacion(this.prestacionSeleccionada.paciente.id).subscribe(resp => {
+                    if (resp) {
+                        this.internacion = resp.estado;
+                        this.organizacionInternacion = resp.organizacion ? resp.organizacion : 'Sin organización';
+                    }
+                    this.internacionPaciente.emit(this.internacion);
+                });
             }
-            this.internacionPaciente.emit(this.internacion);
-        });
+        }
     }
 
     cambiarOpcion(opcion) {

src/app/components/top/solicitudes/detalleSolicitud.html

@@ -109,4 +109,8 @@
 <div *ngIf="mostrar === 'historial'" class="mt-3">
     <historial-solicitud [prestacion]="prestacionSeleccionada" [turno]='turnoSeleccionado'>
     </historial-solicitud>
+</div>
+<div *ngIf="mostrar === 'turnos'" class="mt-3">
+    <turnos-solicitud [prestacionSeleccionada]="prestacionSeleccionada" [turnoSeleccionado]="turnoSeleccionado">
+    </turnos-solicitud>
 </div>

src/app/components/top/solicitudes/turnosSolicitud.component.ts

@@ -0,0 +1,96 @@
+import { Auth } from '@andes/auth';
+import { Plex } from '@andes/plex';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import * as moment from 'moment';
+import { TurnoService } from '../../../services/turnos/turno.service';
+import { IPaciente } from '../../../core/mpi/interfaces/IPaciente';
+
+@Component({
+    selector: 'turnos-solicitud',
+    templateUrl: './turnosSolicitudes.html'
+})
+export class TurnosSolicitudComponent implements OnInit {
+    private _prestacionSeleccionada: any;
+    @Input()
+    set prestacionSeleccionada(value: any) {
+        this._prestacionSeleccionada = value;
+        if (value && value.paciente) {
+            this._paciente = value.paciente;
+            this.cargarTurnos();
+        }
+    }
+
+    get prestacionSeleccionada() {
+        return this._prestacionSeleccionada;
+    }
+    private _turnoSeleccionado: any;
+    @Input()
+    set turnoSeleccionado(value: any) {
+        this._turnoSeleccionado = value;
+        if (value) {
+            this.turnosPaciente = [value];
+        }
+    }
+
+    get turnoSeleccionado() {
+        return this._turnoSeleccionado;
+    }
+
+    todaysdate: Date;
+    _turnos: any;
+    turnosPaciente: any;
+    public _paciente: IPaciente;
+
+    @Input('paciente')
+    set paciente(value: any) {
+        this._paciente = value;
+        if (value) {
+            this.cargarTurnos();
+        }
+    }
+    get paciente(): any {
+        return this._paciente;
+    }
+
+    cargarTurnos() {
+        const pacienteId = this._paciente?.id || (this._paciente as any)?._id;
+        if (pacienteId) {
+            this.serviceTurno.getHistorial({ pacienteId }).subscribe(turnos => {
+                const turnosFiltrados = turnos.filter(t => t.estado !== 'liberado' && moment(t.horaInicio).isSameOrAfter(this.todaysdate, 'day'));
+                this.turnosPaciente = turnosFiltrados.sort((a, b) => {
+                    const inia = a.horaInicio ? new Date(a.horaInicio) : null;
+                    const inib = b.horaInicio ? new Date(b.horaInicio) : null;
+                    return ((inia && inib) ? (inib.getTime() - inia.getTime()) : 0);
+                });
+            });
+        }
+    }
+
+    @Input('turnos')
+    set turnos(value: any) {
+        if (value) {
+            this._turnos = value;
+            this.turnosPaciente = value;
+        }
+    }
+    get turnos(): any {
+        return this._turnos;
+    }
+    @Output() turnosPacienteChanged = new EventEmitter<any>();
+
+    // Inicialización
+    constructor(
+        public serviceTurno: TurnoService,
+        public plex: Plex,
+        public auth: Auth) {
+        this.todaysdate = new Date();
+        this.todaysdate.setHours(0, 0, 0, 0);
+    }
+
+    ngOnInit() {
+    }
+
+    isToday(turno) {
+        return (moment(turno.horaInicio)).isSame(new Date(), 'day');
+    }
+}

src/app/components/top/solicitudes/turnosSolicitudes.html

@@ -0,0 +1,43 @@
+<plex-list *ngIf="turnosPaciente?.length">
+    <plex-item *ngFor="let turno of turnosPaciente">
+        <plex-icon name="calendario" type="info" size="md"></plex-icon>
+        <div class="w-100">
+            <plex-grid cols="3" size="md" type="auto">
+                <plex-label size="md" [tituloBold]="true" titulo="{{ turno.horaInicio | date:'dd/MM/yyyy HH:mm' }}"
+                            subtitulo="{{ turno.tipoPrestacion?.term }}">
+                </plex-label>
+
+                <div *ngIf="turno.profesionales?.length">
+                    <plex-label size="md" [tituloBold]="true" titulo="Equipo de Salud">
+                    </plex-label>
+                    <div *ngFor="let profesional of turno.profesionales" class="small">
+                        {{profesional | nombre}}
+                    </div>
+                </div>
+                <div *ngIf="!turno.profesionales?.length">
+                    <plex-label size="md" [tituloBold]="true" titulo="Equipo de Salud"
+                                subtitulo="Profesional no asignado">
+                    </plex-label>
+                </div>
+
+                <plex-label size="md" [tituloBold]="true" titulo="Espacio Físico"
+                            subtitulo="{{ turno.espacioFisico?.nombre || turno.otroEspacioFisico?.nombre || 'No asignado' }}">
+                </plex-label>
+
+                <plex-label size="md" [tituloBold]="true" titulo="Efector" subtitulo="{{ turno.organizacion?.nombre }}">
+                </plex-label>
+
+                <div *ngIf="turno.paciente?.obraSocial">
+                    <plex-label size="md" [tituloBold]="true" titulo="Obra Social"
+                                subtitulo="{{ turno.paciente.obraSocial.nombre }}">
+                    </plex-label>
+                </div>
+            </plex-grid>
+        </div>
+    </plex-item>
+</plex-list>
+<div *ngIf="turnosPaciente && !turnosPaciente.length" justify="center" style="height: 200px">
+    <plex-label class="flex-column" icon="informacion" size="lg" direction="column"
+                titulo="No existen turnos para esta solicitud">
+    </plex-label>
+</div>

src/app/components/top/top.module.ts

@@ -10,6 +10,7 @@ import { DirectiveLibModule } from 'src/app/directives/directives.module';
 
 import { VisualizacionReglasComponent } from './reglas/visualizacionReglas.component';
 import { HistorialSolicitudComponent } from './solicitudes/historialSolicitud.component';
+import { TurnosSolicitudComponent } from './solicitudes/turnosSolicitud.component';
 import { VisualizacionReglasTopComponent } from './reglas/visualizacionReglasTop.component';
 import { RouterService } from 'src/app/services/router.service';
 import { MotivosHudsService } from 'src/app/services/motivosHuds.service';
@@ -18,7 +19,8 @@ export const TOP_COMPONENTS = [
     VisualizacionReglasTopComponent,
     VisualizacionReglasComponent,
     HistorialSolicitudComponent,
-    FormNuevaSolicitudComponent
+    FormNuevaSolicitudComponent,
+    TurnosSolicitudComponent
 ];
 
 export const TOP_PROVIDERS = [
@@ -46,7 +48,8 @@ export const TOP_PROVIDERS = [
         VisualizacionReglasTopComponent,
         VisualizacionReglasComponent,
         HistorialSolicitudComponent,
-        FormNuevaSolicitudComponent
+        FormNuevaSolicitudComponent,
+        TurnosSolicitudComponent
     ],
 })
 export class TOPLibModule {

src/app/components/turnos/dar-turnos/dar-turnos.component.ts

@@ -44,6 +44,7 @@ export class DarTurnosComponent implements OnInit {
     public link: String = '';
     public changeCarpeta = false;
     public financiador;
+    public todaysdate: Date;
     hideDarTurno: boolean;
     @HostBinding('class.plex-layout') layout = true; // Permite el uso de flex-box en el componente
     autocitado = false;
@@ -67,6 +68,10 @@ export class DarTurnosComponent implements OnInit {
     set demandaInsatisfecha(value: any) {
         this.desdeDemanda = value;
     }
+    turnosPaciente: any;
+    get paciente(): any {
+        return this._paciente;
+    }
 
     @Input('solicitudPrestacion')
     set solicitudPrestacion(value: any) {
@@ -127,7 +132,7 @@ export class DarTurnosComponent implements OnInit {
     public organizacion = this.auth.organizacion;
     public _pacienteSeleccionado: any;
     public _solicitudPrestacion: any; // TODO: cambiar por IPrestacion cuando esté
-    public paciente: IPaciente;
+    public _paciente: IPaciente;
     public opciones: any = {};
     public agenda: IAgenda;
     public agendas: IAgenda[];
@@ -216,6 +221,8 @@ export class DarTurnosComponent implements OnInit {
     ) { }
 
     ngOnInit() {
+        this.todaysdate = new Date();
+        this.todaysdate.setHours(0, 0, 0, 0);
         this.hoy = new Date();
         this.autorizado = this.auth.getPermissions('turnos:darTurnos:?').length > 0;
         this.puedeDarSobreturno = this.auth.check('turnos:puntoInicio:darSobreturno');
@@ -251,11 +258,24 @@ export class DarTurnosComponent implements OnInit {
         this.actualizar();
     }
 
+    cargarTurnos() {
+        if (this._paciente?.id) {
+            this.serviceTurno.getHistorial({ pacienteId: this._paciente.id }).subscribe(turnos => {
+                const turnosFiltrados = turnos.filter(t => t.estado !== 'liberado' && moment(t.horaInicio).isSameOrAfter(this.todaysdate, 'day'));
+                this.turnosPaciente = turnosFiltrados.sort((a, b) => {
+                    const inia = a.horaInicio ? new Date(a.horaInicio) : null;
+                    const inib = b.horaInicio ? new Date(b.horaInicio) : null;
+                    return ((inia && inib) ? (inib.getTime() - inia.getTime()) : 0);
+                });
+            });
+        }
+    }
     actualizarDatosPaciente(paciente) {
         const idPaciente = paciente._id || paciente.id;
         this.servicePaciente.getById(idPaciente).subscribe(
             pacienteMPI => {
-                this.paciente = pacienteMPI;
+                this._paciente = pacienteMPI;
+                this.cargarTurnos();
                 this.verificarTelefono(pacienteMPI);
                 this.obtenerCarpetaPaciente();
                 if (this.paciente.documento) {

src/app/components/turnos/dar-turnos/dar-turnos.html

@@ -74,6 +74,52 @@
             <paciente-detalle [paciente]="paciente" orientacion="horizontal" [fields]="pacienteFields">
             </paciente-detalle>
         </ng-container>
+        <plex-title titulo="Turnos futuros" size="sm"></plex-title>
+        <plex-list *ngIf="turnosPaciente?.length">
+            <plex-item *ngFor="let turno of turnosPaciente">
+                <plex-icon name="calendario" type="info" size="md"></plex-icon>
+                <div>
+                    <plex-grid cols="3" size="md" type="auto">
+                        <plex-label size="md" [tituloBold]="true"
+                                    titulo="{{ turno.horaInicio | date:'dd/MM/yyyy HH:mm' }}"
+                                    subtitulo="{{ turno.tipoPrestacion?.term }}">
+                        </plex-label>
+
+                        <div *ngIf="turno.profesionales?.length">
+                            <plex-label size="md" [tituloBold]="true" titulo="Equipo de Salud">
+                            </plex-label>
+                            <div *ngFor="let profesional of turno.profesionales" class="small">
+                                {{profesional | nombre}}
+                            </div>
+                        </div>
+                        <div *ngIf="!turno.profesionales?.length">
+                            <plex-label size="md" [tituloBold]="true" titulo="Equipo de Salud"
+                                        subtitulo="Profesional no asignado">
+                            </plex-label>
+                        </div>
+
+                        <plex-label size="md" [tituloBold]="true" titulo="Espacio Físico"
+                                    subtitulo="{{ turno.espacioFisico?.nombre || turno.otroEspacioFisico?.nombre || 'No asignado' }}">
+                        </plex-label>
+
+                        <plex-label size="md" [tituloBold]="true" titulo="Efector"
+                                    subtitulo="{{ turno.organizacion?.nombre }}">
+                        </plex-label>
+
+                        <div *ngIf="turno.paciente?.obraSocial">
+                            <plex-label size="md" [tituloBold]="true" titulo="Obra Social"
+                                        subtitulo="{{ turno.paciente.obraSocial.nombre }}">
+                            </plex-label>
+                        </div>
+                    </plex-grid>
+                </div>
+            </plex-item>
+        </plex-list>
+        <div *ngIf="turnosPaciente && !turnosPaciente.length" justify="center" class="mt-4" style="margin-bottom: 2em;">
+            <plex-label class="flex-column" icon="informacion" size="md" direction="column"
+                        titulo="No existen turnos futuros para este paciente">
+            </plex-label>
+        </div>
         <plex-title *ngIf="estadoT === 'noSeleccionada' && !_solicitudPrestacion?.solicitud"
                     titulo="Búsquedas recientes" size="sm"></plex-title>
         <plex-list *ngIf="estadoT === 'noSeleccionada' && !_solicitudPrestacion?.solicitud" [selectable]="true">