fix(RUP-395): Receta - modificar molécula-2vuelta

src/app/modules/rup/components/elementos/recetaMedica.component.ts

@@ -1,45 +1,72 @@
-import { Component, Output, Input, EventEmitter, OnInit } from '@angular/core';
+import { Component, Output, Input, EventEmitter, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
 import { RUPComponent } from '../core/rup.component';
 import { RupElement } from '.';
 import { forkJoin } from 'rxjs';
 import { Unsubscribe } from '@andes/shared';
+import { NgForm } from '@angular/forms';
 @Component({
     selector: 'rup-recetaMedica',
-    templateUrl: 'recetaMedica.html'
+    templateUrl: 'recetaMedica.html',
+    styleUrls: ['recetaMedica.scss'],
 })
+
+
 @RupElement('RecetaMedicaComponent')
 export class RecetaMedicaComponent extends RUPComponent implements OnInit {
+
+    @ViewChild('formMedicamento') formMedicamento: NgForm;
+
     public medicamento: any = {
         generico: null,
         presentacion: null,
-        unidades: null,
         cantidad: null,
+        cantEnvases: null,
         diagnostico: '',
-        tipoReceta: 'simple',
+        tipoReceta: 'Simple',
         tratamientoProlongado: false,
+        tiempoTratamiento: null,
         dosisDiaria: {
-            cantidad: null,
-            dias: null
+            frecuencia: null,
+            dias: null,
+            notaMedica: null
         }
     };
+    public horas = [];
+    public collapse = false;
+    public diagnosticos = [];
     public unidades = [];
     public genericos = [];
+    public registros = [];
+    public comprimidosEditados = false;
     public opcionesTipoReceta = [
-        { id: 'simple', label: 'Simple' },
         { id: 'duplicado', label: 'Duplicado' },
         { id: 'triplicado', label: 'Triplicado' }
     ];
+    public tiemposTratamiento = [
+        { id: '3meses', nombre: '3 meses' },
+        { id: '6meses', nombre: '6 meses' }
+    ];
     ngOnInit() {
         if (!this.registro.valor) {
             this.registro.valor = {};
         }
         if (!this.registro.valor.medicamentos) {
             this.registro.valor.medicamentos = [];
         }
+        this.registros = this.prestacion.ejecucion.registros.filter(reg => {
+            reg.nombre !== 'receta';
+        }
+        ).map(reg => { if (reg.nombre !== 'receta') { return { id: reg.id, nombre: reg.nombre, elementoRUP: reg.elementoRUP }; } });
+        for (let i = 1; i <= 24; i++) {
+            this.horas.push({ id: i, nombre: i + ' hora' + (i > 1 ? 's' : '') });
+        }
+
     }
 
+
     @Unsubscribe()
     loadMedicamentoGenerico(event) {
+        this.comprimidosEditados = false;
         const input = event.query;
         if (input && input.length > 2) {
             const query: any = {
@@ -51,11 +78,36 @@ export class RecetaMedicaComponent extends RUPComponent implements OnInit {
             event.callback([]);
         }
     }
+    loadRegistros() {
+        this.registros = this.prestacion.ejecucion.registros
+            .filter(reg => reg.nombre !== 'receta')
+            .map(reg => {
+                return {
+                    id: reg.id,
+                    nombre: reg.nombre,
+                    elementoRUP: reg.elementoRUP
+                };
+            });
+
+    };
+    editarComprimidos() {
+        if (!this.comprimidosEditados) {
+            this.plex.confirm('La cantidad recetada no se encuentra en ninguna presentación comercial ¿Desea continuar?', 'Atención').then(confirmacion => {
+                if (confirmacion) {
+                    this.medicamento.cantidad = 0;
+                    this.comprimidosEditados = true;
+                }
+            });
+        } else {
+            this.comprimidosEditados = false;
+        }
+
+    }
 
     loadPresentaciones() {
-        this.medicamento.unidades = null;
-        this.medicamento.presentacion = null;
         this.medicamento.cantidad = null;
+        this.medicamento.presentacion = null;
+        this.medicamento.cantEnvases = null;
         this.unidades = [];
         if (this.medicamento.generico) {
             const queryPresentacion: any = {
@@ -67,8 +119,9 @@ export class RecetaMedicaComponent extends RUPComponent implements OnInit {
                 search: ''
             };
             forkJoin(
-                [this.snomedService.get(queryPresentacion),
-                 this.snomedService.get(queryUnidades)]
+                [
+                    this.snomedService.get(queryPresentacion),
+                    this.snomedService.get(queryUnidades)]
             ).subscribe(([resultado, presentaciones]) => {
                 this.medicamento.presentacion = resultado[0];
                 this.unidades = presentaciones.map(elto => {
@@ -78,33 +131,35 @@ export class RecetaMedicaComponent extends RUPComponent implements OnInit {
         }
     }
 
+
     agregarMedicamento(form) {
         if (form.formValid) {
-            if (this.registro.valor.medicamentos.length < this.params.limiteMedicamentos) {
-                if (this.medicamento.unidades.valor) {
-                    this.medicamento.unidades = Number(this.medicamento.unidades.valor);
-                }
-                this.registro.valor.medicamentos.push(this.medicamento);
-                this.unidades = [];
-                this.medicamento = {
-                    generico: null,
-                    presentacion: null,
-                    unidades: null,
-                    cantidad: null,
-                    diagnostico: '',
-                    tipoReceta: 'simple',
-                    tratamientoProlongado: false,
-                    dosisDiaria: {
-                        cantidad: null,
-                        dias: null
-                    }
-                };
-            } else {
-                this.plex.toast('warning', `No se permite cargar más de ${this.params.limiteMedicamentos} medicamentos.`);
+            if (this.medicamento.cantidad?.valor) {
+                this.medicamento.cantidad = Number(this.medicamento.cantidad.valor);
             }
+            this.registro.valor.medicamentos.push(this.medicamento);
+            this.unidades = [];
+            this.medicamento = {
+                generico: null,
+                presentacion: null,
+                cantidad: null,
+                cantEnvases: null,
+                diagnostico: '',
+                tipoReceta: 'Simple',
+                tratamientoProlongado: false,
+                tiempoTratamiento: null,
+                dosisDiaria: {
+                    frecuencia: null,
+                    dias: null,
+                    notaMedica: null
+                }
+            };
+            this.formMedicamento.reset();
+            this.formMedicamento.form.markAsPristine();
+            this.formMedicamento.form.markAsUntouched();
+
         }
     }
-
     borrarMedicamento(medicamento) {
         this.plex.confirm('¿Está seguro que desea eliminar el medicamento de la receta?').then((resultado) => {
             if (resultado) {
@@ -113,4 +168,13 @@ export class RecetaMedicaComponent extends RUPComponent implements OnInit {
             }
         });
     }
+    colapsar() {
+        this.collapse = !this.collapse;
+    }
+    truncateDiagnostico(nombre: string): string {
+        if (nombre.length > 20) {
+            return nombre.substring(0, 20) + '...';
+        }
+        return nombre;
+    }
 }

src/app/modules/rup/components/elementos/recetaMedica.html

@@ -1,69 +1,113 @@
 <ng-container *ngIf="!soloValores">
-    <form #formMedicamento="ngForm">
-        <plex-wrapper>
+    <form class="mt-1" #formMedicamento="ngForm">
+        <plex-select [(ngModel)]="medicamento.diagnostico" hintType="info" label="Diagnóstico" [data]="registros"
+                     name="diagnostico" multiline="true" (click)="loadRegistros()" [required]="true"
+                     hint="Se listaran los conceptos registrados en esta consulta" hintType="info" hintIcon="eye">
+
+        </plex-select>
+
+        <plex-grid cols="2">
+
             <plex-select [(ngModel)]="medicamento.generico" name="generico" (getData)="loadMedicamentoGenerico($event)"
                          placeholder="Medicamento genérico" label="Medicamento" idField="conceptId" labelField="term"
                          (change)="loadPresentaciones()" required="true">
             </plex-select>
-            <plex-select name="unidades" *ngIf="unidades.length > 0" [(ngModel)]="medicamento.unidades"
-                         [data]="unidades" placeholder="Seleccione una opción" label="Unidades por presentación"
-                         labelField="valor" required="true">
-            </plex-select>
-            <plex-int name="unidades" label="Unidades por presentación" [(ngModel)]="medicamento.unidades"
-                      *ngIf="unidades.length == 0" required="true" min="1" max="90">
+
+            <div>
+                <plex-select class="formEditar" name="unidades" *ngIf="unidades.length > 0 && !comprimidosEditados"
+                             [(ngModel)]="medicamento.cantidad" [data]="unidades" placeholder="Seleccione una opción"
+                             label="Cantidad" labelField="valor" required="true">
+                </plex-select>
+                <plex-int class="formEditar" name="comprimidos" *ngIf="unidades.length == 0 || comprimidosEditados"
+                          label="Cantidad" [(ngModel)]="medicamento.cantidad" required="true" min="1" max="90">
+                </plex-int>
+                <plex-button class="d-inline-flex" name="editar" type="warning" icon="pencil" tooltip="Editar cantidad"
+                             size="md" (click)="editarComprimidos()">
+                </plex-button>
+            </div>
+        </plex-grid>
+        <plex-grid cols="2">
+
+            <plex-int name="envases" label="Cantidad de envases" [(ngModel)]="medicamento.cantEnvases" required="true"
+                      min="1" max="90">
             </plex-int>
-            <plex-int name="envases" label="Envases" [(ngModel)]="medicamento.cantidad" required="true" min="1"
-                      max="90">
-            </plex-int>
-            <plex-text [(ngModel)]="medicamento.diagnostico" label="Diagnóstico" name="motivo" multiline="true"
-                       grow="full">
-            </plex-text>
-            <plex-radio [(ngModel)]="medicamento.tipoReceta" label="Tipo de receta" type="horizontal"
-                        [data]="opcionesTipoReceta" name="tipoReceta">
+
+            <plex-grid cols="2" style="margin-top: 2rem;grid-gap: 0;">
+                <plex-bool [(ngModel)]="medicamento.tratamientoProlongado" name="tratamientoProlongado" type="slide"
+                           label="Tratamiento prolongado">
+                </plex-bool>
+                <plex-select *ngIf="medicamento.tratamientoProlongado" [(ngModel)]="medicamento.tiempoTratamiento"
+                             name="tiempoTratamiento" [data]="tiemposTratamiento" required="true">
+                </plex-select>
+            </plex-grid>
+        </plex-grid>
+
+        <div class="mt-2">
+            <plex-title name="tipoReceta" titulo="Tipo de receta" size="sm"></plex-title>
+
+            <plex-radio class="m-2" [(ngModel)]="medicamento.tipoReceta" [data]="opcionesTipoReceta" name="tipoReceta">
             </plex-radio>
-            <plex-bool [(ngModel)]="medicamento.tratamientoProlongado" label="Tratamiento prolongado"
-                       name="tratamientoProlongado">
-            </plex-bool>
-        </plex-wrapper>
-        <plex-title titulo="Dosis diaria" size="sm"></plex-title>
+        </div>
+
+        <plex-title titulo="Indicaciones diarias" size="sm">
+            <plex-button name="botonCollapse" class="collapse-button" type="primary" size="sm"
+                         icon="{{ collapse ? 'chevron-down' : 'chevron-up'}}"
+                         title="{{ collapse ? 'Expandir' : 'Colapsar'}}" titlePosition="left" (click)="colapsar()">
+            </plex-button>
+        </plex-title>
         <plex-wrapper>
-            <plex-int name="cantidadDiaria" label="Dosis" [(ngModel)]="medicamento.dosisDiaria.cantidad"
-                      required="false" min="1" max="90">
-            </plex-int>
-            <plex-int name="duracion" label="Cantidad de días" [(ngModel)]="medicamento.dosisDiaria.dias"
-                      required="false" min="1" max="90">
-            </plex-int>
+
+            <div [hidden]="collapse" class="w-100">
+                <div class="d-flex">
+
+                    <plex-select name="Frecuencia" label="Frecuencia" [(ngModel)]="medicamento.dosisDiaria.frecuencia"
+                                 required="false" [data]="horas">
+                    </plex-select>
+                    <plex-int name="Duracion" label="Duración (días)" [(ngModel)]="medicamento.dosisDiaria.dias"
+                              required="false" min="1" max="90">
+                    </plex-int>
+                    <plex-text name="notaMedica" label="Notas médicas" [(ngModel)]="medicamento.dosisDiaria.notaMedica"
+                               required="false" min="1" max="90">
+                    </plex-text>
+                </div>
+            </div>
         </plex-wrapper>
-        <plex-button type="success" [disabled]="!formMedicamento.valid" (click)="agregarMedicamento($event)"
-                     [validateForm]="formMedicamento">Agregar
-        </plex-button>
+        <div class="d-flex justify-content-end">
+            <plex-button name="botonAgregar" type="info" [disabled]="!formMedicamento.valid"
+                         (click)="agregarMedicamento($event)" [validateForm]="formMedicamento">
+                Agregar
+            </plex-button>
+        </div>
     </form>
-    <plex-list size="sm" *ngIf="registro.valor.medicamentos" class="mt-3">
+    <plex-list size="md" *ngIf="registro.valor.medicamentos" class="mt-3">
         <plex-item *ngFor="let item of registro.valor.medicamentos">
-            <plex-label [tituloBold]="true" titulo="{{ item.generico.term  }}" subtitulo="{{ item.unidades }} {{item.presentacion.term }}(s) por {{ item.cantidad }} envase(s) o {{ item.dosisDiaria.cantidad }} {{item.presentacion.term }}(s) por {{ item.dosisDiaria.dias }} días
-            "></plex-label>
-            <plex-badge *ngIf="item.diagnostico" type="warning" hint="{{item.diagnostico}}" hintIcon="informacion"
-                        hintType="warning">Diagnóstico
+            <plex-icon size="md" *ngIf="true" name="pildoras" class="icon icon--border--producto mr-2">
+            </plex-icon>
+            <plex-label [tituloBold]="true" titulo="{{ item.generico.term  }}" subtitulo="{{ item.cantidad}} {{item.presentacion.term }}(s) por {{ item.cantEnvases}} envase(s) {{ item.dosisDiaria.frecuencia? '|  Cada '+item.dosisDiaria.frecuencia.nombre: '' }}  {{ item.dosisDiaria.dias? ' durante '+item.dosisDiaria.dias+' día(s)':'' }} 
+                        "></plex-label>
+            <plex-badge *ngIf="item.diagnostico" size="sm" type="warning" hintType="warning">
+                {{ truncateDiagnostico(item.diagnostico.nombre) }}
             </plex-badge>
             <plex-badge *ngIf="item.tratamientoProlongado" type="info">Tratamiento prolongado
             </plex-badge>
-            <plex-badge type="info">{{item.tipoReceta}}
+            <plex-badge *ngIf="item.tipoReceta" type="info">{{item.tipoReceta}}
             </plex-badge>
             <plex-button type="danger" size="sm" (click)="borrarMedicamento(item)" icon="delete"></plex-button>
         </plex-item>
     </plex-list>
 </ng-container>
 <div *ngIf="soloValores">
-    <plex-list size="sm" *ngIf="registro.valor.medicamentos">
+    <plex-list size="md" *ngIf="registro.valor.medicamentos">
         <plex-item *ngFor="let item of registro.valor.medicamentos">
-            <plex-label [tituloBold]="true" titulo="{{ item.generico.term  }}" subtitulo="{{ item.unidades }} {{item.presentacion.term }}(s) por {{ item.cantidad }} envase(s) o {{ item.dosisDiaria.cantidad }} {{item.presentacion.term }}(s) por {{ item.dosisDiaria.dias }} días
-                "></plex-label>
-            <plex-badge *ngIf="item.diagnostico" type="warning" hint="{{item.diagnostico}}" hintIcon="informacion"
-                        hintType="warning"> Diagnóstico</plex-badge>
+            <plex-label [tituloBold]="true" titulo="{{ item.generico.term  }}" subtitulo="{{ item.cantidad}} {{item.presentacion.term }}(s) por {{ item.cantEnvases}} envase(s) {{ item.dosisDiaria.frecuencia? '|  Cada '+item.dosisDiaria.frecuencia.nombre: '' }}  {{ item.dosisDiaria.dias? ' durante '+item.dosisDiaria.dias+' día(s)':'' }} 
+                                    "></plex-label>
+            <plex-badge *ngIf="item.diagnostico" size="sm" type="warning" hintType="warning">
+                {{ truncateDiagnostico(item.diagnostico.nombre) }}
+            </plex-badge>
             <plex-badge *ngIf="item.tratamientoProlongado" type="info">Tratamiento prolongado
             </plex-badge>
-            <plex-badge type="info">{{item.tipoReceta}}
+            <plex-badge *ngIf="item.tipoReceta" type="info">{{item.tipoReceta}}
             </plex-badge>
         </plex-item>
     </plex-list>
-</div>
+</div>

src/app/modules/rup/components/elementos/recetaMedica.scss

@@ -0,0 +1,14 @@
+.formEditar {
+    margin-right: 0;
+    display: inline-block;
+    width: 85%;
+}
+
+.select-container {
+    display: flex;
+    align-items: center;
+}
+
+.select-container plex-select {
+    margin-right: 10px;
+}