feat(MPI): implementa seleccion editable de obras sociales

src/app/app.module.ts

@@ -223,6 +223,7 @@ import { AcronimoSvgComponent } from './styles/acronimo.svg';
 import { LogoSvgComponent } from './styles/logo.svg';
 import { MapsComponent } from './utils/mapsComponent';
 import { PermisosComponent } from './utils/permisos/permisos.component';
+import { ObraSocialComponent } from './core/mpi/components/obra-social.component';
 
 
 registerLocaleData(localeEs, 'es');
@@ -321,6 +322,7 @@ registerLocaleData(localeEs, 'es');
         DatosBasicosComponent,
         DatosContactoComponent,
         DocumentosPacienteComponent,
+        ObraSocialComponent,
 
         // form Terapeutico
         FormTerapeuticoComponent,

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

@@ -1,16 +1,17 @@
 import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { IPaciente } from 'src/app/core/mpi/interfaces/IPaciente';
 import { PacienteService } from 'src/app/core/mpi/services/paciente.service';
 import { IObraSocial } from 'src/app/interfaces/IObraSocial';
 import { ObraSocialService } from 'src/app/services/obraSocial.service';
 
 @Component({
     selector: 'seleccionar-financiador',
     templateUrl: 'seleccionar-financiador.html',
+    styleUrls: ['seleccionar-financiador.scss']
 })
 
 export class SeleccionarFinanciadorComponent implements OnChanges {
     public obrasSociales: IObraSocial[] = [];
-    public selectorFinanciadores: IObraSocial[] = [];
     public selectorObrasSociales = [];
     public obraSocial;
     public showSelector = false;
@@ -23,49 +24,66 @@ export class SeleccionarFinanciadorComponent implements OnChanges {
         codigoPuco: undefined,
     };
 
+    public obrasSocialesPUCO: any[] = [];
+    public financiadoresANDES: any[] = [];
+    public opcionesFinanciadores: any[] = [];
+    public financiadorSeleccionado: any;
+
     @Input() paciente;
+    @Input() editable = false;
     @Output() setFinanciador = new EventEmitter<any>();
+    @Output() setPaciente = new EventEmitter<IPaciente>();
 
     constructor(
         public obraSocialService: ObraSocialService,
         private pacienteService: PacienteService,
     ) { }
 
-    seleccionarObraSocial(event) {
-        this.showListado = false;
-
-        if (event.value === 'otras') {
-            this.showListado = true;
-        } else {
-            const foundObraSocial = this.obrasSociales.find(os => os.nombre === event.value || os.financiador === event.value);
-            this.obraSocial = event.value;
 
-            this.setFinanciador.emit({ ...this.financiadorBase, ...foundObraSocial, prepaga: false });
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes.paciente?.currentValue?.id) {
+            this.resetComponentState();
+
+            if (this.editable) {
+                this.cargarDatosModoEditable();
+            } else {
+                this.cargarDatosModoLectura(changes.paciente.currentValue.id);
+            }
         }
     }
 
-    seleccionarOtro(event) {
-        if (event.value) {
-            const { prepaga, nombre, financiador, codigoPuco } = event.value;
+    private resetComponentState() {
+        this.showSelector = false;
+        this.showListado = false;
+        this.financiador = undefined;
+    }
 
-            this.setFinanciador.emit({ ...this.financiadorBase, prepaga: prepaga || false, nombre, financiador, codigoPuco, origen: 'ANDES' });
-        } else {
-            this.setFinanciador.emit(undefined);
-        }
+    private cargarDatosModoEditable() {
+        this.cargarObrasSocialesPUCO();
+        this.cargarFinanciadoresANDES();
+        this.cargarOpcionesFinanciadores();
     }
 
-    cargarPrepagas() {
-        this.obraSocialService.getListado({}).subscribe(listado => this.selectorFinanciadores = listado.filter(financiador => this.obrasSociales.every(os => os.nombre !== financiador.nombre)));
+    private cargarDatosModoLectura(pacienteId: string) {
+        if (!this.paciente.financiador) {
+            this.pacienteService.getById(pacienteId).subscribe((paciente) => {
+                this.cargarOpcionesObraSocial(paciente);
+                this.cargarOpcionesFinanciadores();
+            });
+        } else {
+            this.cargarOpcionesObraSocial(this.paciente);
+            this.cargarOpcionesFinanciadores();
+        }
     }
 
-    cargarObraSocial(paciente) {
+    private cargarOpcionesObraSocial(paciente) {
         if (!paciente) {
             return;
         } else {
             this.obrasSociales = paciente.financiador;
         }
 
-        if (this.obrasSociales.length) {
+        if (this.obrasSociales?.length) {
             const { codigoPuco, financiador, nombre, origen } = this.obrasSociales[0];
 
             this.selectorObrasSociales = this.obrasSociales.map((os: IObraSocial) => ({ id: os.nombre || os.financiador, label: os.nombre || os.financiador }));
@@ -81,16 +99,88 @@ export class SeleccionarFinanciadorComponent implements OnChanges {
         this.showSelector = true;
     }
 
-    ngOnChanges(changes: SimpleChanges) {
-        if (changes.paciente.currentValue.id) {
-            this.showSelector = false;
-            this.showListado = false;
-            this.financiador = undefined;
-
-            this.pacienteService.getById(changes.paciente.currentValue.id).subscribe(paciente => {
-                this.cargarObraSocial(paciente);
-                this.cargarPrepagas();
-            });
+
+    private actualizarPaciente() {
+        if (this.financiadoresANDES.length === 0) {
+            this.paciente.financiador = this.paciente.financiador.filter(
+                (financiador: any) => financiador.origen !== 'ANDES'
+            );
+        } else {
+            const nuevoFinanciador = { ...this.financiadoresANDES[0], origen: 'ANDES' };
+
+            const index = this.paciente.financiador.findIndex(
+                (financiador: any) => financiador.origen === 'ANDES'
+            );
+
+            if (index !== -1) {
+                this.paciente.financiador[index] = nuevoFinanciador;
+            } else {
+                this.paciente.financiador.push(nuevoFinanciador);
+            }
         }
     }
+
+    private cargarObrasSocialesPUCO() {
+        this.obrasSocialesPUCO = this.paciente.financiador.filter(
+            (financiador: any) => financiador.origen === 'PUCO'
+        );
+    }
+
+    private cargarFinanciadoresANDES() {
+        this.financiadoresANDES = this.paciente.financiador.filter(
+            (financiador: any) => financiador.origen === 'ANDES'
+        );
+    }
+
+    private cargarOpcionesFinanciadores() {
+        this.obraSocialService.getListado({}).subscribe((financiadores: any[]) => {
+            const financiadoresExistentes = [
+                ...this.obrasSocialesPUCO.map((f) => f.nombre),
+                ...this.financiadoresANDES.map((f) => f.nombre),
+                ...this.obrasSociales.map((f) => f.nombre)
+            ];
+
+            this.opcionesFinanciadores = financiadores.filter(
+                (financiador) => !financiadoresExistentes.includes(financiador.nombre)
+            );
+        });
+    }
+
+    public seleccionarObraSocial(event) {
+        this.showListado = false;
+
+        if (event.value === 'otras') {
+            this.showListado = true;
+        } else {
+            const foundObraSocial = this.obrasSociales.find(os => os.nombre === event.value || os.financiador === event.value);
+            this.obraSocial = event.value;
+
+            this.setFinanciador.emit({ ...this.financiadorBase, ...foundObraSocial, prepaga: false });
+        }
+    }
+
+    public seleccionarOtro(event) {
+        if (event.value) {
+            const { prepaga, nombre, financiador, codigoPuco } = event.value;
+
+            this.setFinanciador.emit({ ...this.financiadorBase, prepaga: prepaga || false, nombre, financiador, codigoPuco, origen: 'ANDES' });
+        } else {
+            this.setFinanciador.emit(undefined);
+        }
+    }
+
+    public agregarFinanciador(financiador: any) {
+        if (financiador) {
+            this.financiadoresANDES = [{ ...financiador, fechaDeActualizacion: moment().toDate() }];
+            this.cargarOpcionesFinanciadores();
+            this.financiadorSeleccionado = null;
+            this.actualizarPaciente();
+        }
+    }
+
+    public eliminarFinanciador(index: number) {
+        this.financiadoresANDES.splice(index, 1);
+        this.cargarOpcionesFinanciadores();
+        this.actualizarPaciente();
+    }
 }

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

@@ -1,10 +1,51 @@
-<div *ngIf="showSelector">
+<div *ngIf="showSelector && !editable">
     <plex-radio *ngIf="obraSocial" [(ngModel)]="obraSocial" name="obraSocial" (change)="seleccionarObraSocial($event)"
                 label="Seleccione una Obra Social" [data]="selectorObrasSociales">
     </plex-radio>
     <plex-select class="w-100" *ngIf="showListado || !obraSocial" [(ngModel)]="financiador" name="financiador"
-                 [data]="selectorFinanciadores"
+                 [data]="opcionesFinanciadores"
                  label="{{ selectorObrasSociales ? 'Seleccione una opción' :  'Seleccione una Obra Social'}}"
                  idField="nombre" labelField="nombre" (change)="seleccionarOtro($event)">
     </plex-select>
+</div>
+
+<div class="editable" *ngIf="!showSelector && editable">
+    <plex-title titulo="Obras Sociales del paciente" size="sm"></plex-title>
+    <div *ngIf="obrasSocialesPUCO.length > 0">
+        <ul>
+            <li *ngFor="let obra of obrasSocialesPUCO">
+                <plex-icon size="md" name="check" class="mr-2"></plex-icon> {{ obra.nombre }}
+            </li>
+        </ul>
+    </div>
+    <plex-label *ngIf="!obrasSocialesPUCO.length" class="mt-3" direction="column" size="md" icon="informacion"
+                type="warning" titulo="El paciente no contiene obras sociales cargadas">
+    </plex-label>
+
+    <plex-title titulo="Editar financiadores" size="sm"></plex-title>
+    <div class="mt-2">
+        <plex-list>
+            <plex-item *ngFor="let financiador of financiadoresANDES; let i = index">
+                <plex-label size="sm" icon="check" titulo="{{ financiador.nombre }}"
+                            subtitulo="Fecha actualización: {{ financiador.fechaDeActualizacion | fecha }}">
+                </plex-label>
+                <plex-button icon="delete" type="danger" size="sm" (click)="eliminarFinanciador(i)">
+                </plex-button>
+            </plex-item>
+        </plex-list>
+        <plex-label *ngIf="!financiadoresANDES.length" class="mt-3" direction="column" size="md" icon="informacion"
+                    type="warning" titulo="El paciente no contiene otros financiadores cargados">
+        </plex-label>
+    </div>
+    <div class="selector-wrapper">
+        <div class="selector">
+            <plex-select [(ngModel)]="financiadorSeleccionado" [data]="opcionesFinanciadores"
+                         label="Agregar Financiador" idField="id" labelField="nombre"
+                         [disabled]="!opcionesFinanciadores.length">
+            </plex-select>
+        </div>
+        <plex-button icon="plus" type="info" tooltip="Agregar financiador" titlePosition="left" size="md"
+                     [disabled]="!opcionesFinanciadores.length" (click)="agregarFinanciador(financiadorSeleccionado)">
+        </plex-button>
+    </div>
 </div>

src/app/components/turnos/dar-turnos/seleccionar-financiador.scss

@@ -0,0 +1,30 @@
+.editable {
+    display: flex;
+    flex-direction: column;
+
+    ul {
+        list-style: none;
+        padding-left: 18px;
+        gap: 5px;
+        display: flex;
+        flex-direction: column;
+
+        .item-lista {
+            display: flex;
+            justify-content: space-between;
+        }
+    }
+
+    .selector-wrapper {
+        display: flex;
+        flex-direction: row;
+        flex-grow: 1;
+        align-items: flex-end;
+
+        .selector {
+            flex-grow: 1;
+            margin-right: 15px;
+        }
+    }
+
+}

src/app/core/mpi/components/datos-contacto.component.ts

@@ -134,9 +134,9 @@ export class DatosContactoComponent implements OnInit {
                 this.viveLocActual = ubicacion.localidad && ubicacion.localidad.id === this.localidadActual.id;
 
                 const lugarNac = this.paciente.lugarNacimiento;
-                this.nacioPaisActual = lugarNac.pais?.id === this.paisActual[0].id;
-                this.nacioProvActual = lugarNac.provincia?.id === this.provinciaActual.id;
-                this.nacioLocActual = lugarNac.localidad?.id === this.localidadActual.id;
+                this.nacioPaisActual = lugarNac.pais?.id === this.paisActual[0]?.id;
+                this.nacioProvActual = lugarNac.provincia?.id === this.provinciaActual?.id;
+                this.nacioLocActual = lugarNac.localidad?.id === this.localidadActual?.id;
 
                 let direccionCompleta;
 

src/app/core/mpi/components/obra-social.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input } from '@angular/core';
+import { IPaciente } from '../interfaces/IPaciente';
+
+@Component({
+    selector: 'obra-social',
+    templateUrl: 'obra-social.html'
+})
+
+export class ObraSocialComponent {
+    @Input() paciente: IPaciente;
+
+    public financiador;
+
+    setFinanciador(financiador: any) {
+        this.financiador = financiador;
+    }
+}

src/app/core/mpi/components/obra-social.html

@@ -0,0 +1,4 @@
+<section class="mt-2">
+    <seleccionar-financiador [paciente]="paciente" editable="true"
+                             (setFinanciador)="setFinanciador($event)"></seleccionar-financiador>
+</section>

src/app/core/mpi/components/paciente.html

@@ -52,7 +52,9 @@
                     <documentos-paciente [paciente]="pacienteModel"></documentos-paciente>
                 </plex-tab>
 
-
+                <plex-tab label="Obra Social" icon="file-multiple">
+                    <obra-social [paciente]="pacienteModel"></obra-social>
+                </plex-tab>
             </plex-tabs>
         </form>
     </plex-layout-main>