feat(MONIT): se agrega items del select estático

andes · Mar 6, 2024 · fc8eef1 · fc8eef1
1 parent 276a27c
commit fc8eef1
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 16 deletions.
diff --git a/monitoreo-app b/monitoreo-app
diff --git a/src/app/rupers/components/atomo-create-update/atomo-create-update.component.html b/src/app/rupers/components/atomo-create-update/atomo-create-update.component.html
@@ -2,11 +2,11 @@
     <plex-layout-main>
         <plex-title [titulo]="titulo">
             <plex-button type="danger" (click)="volver()">VOLVER</plex-button>
-            <plex-button type="success" (click)="onSave()" [validateForm]="formulario"
-                         [disabled]="!formulario.form.valid">GUARDAR
+            <plex-button type="success" (click)="onSave()" [validateForm]="formulario1 && formulario2"
+                         [disabled]="!formulario1.form.valid || !formulario2.form.valid || !items.length">GUARDAR
             </plex-button>
         </plex-title>
-        <form #formulario="ngForm">
+        <form #formulario1="ngForm">
             <div class="grow">
                 <plex-text label="Nombre orientativo" [(ngModel)]="nombre" name="name" [required]="true">
                 </plex-text>
@@ -94,8 +94,6 @@
                         </plex-bool>
                     </div>
 
-                    <!-- [TODO] crear lista de items staticos -->
-
                 </div>
 
                 <div *ngSwitchCase="'ObservacionesComponent'">
@@ -108,7 +106,6 @@
                 <div *ngSwitchCase="'ValorNumericoComponent'">
 
                     <plex-text [(ngModel)]="params.title" label="Titulo/Label" name="params-title"></plex-text>
-
                     <div justify class="ml-4 mr-4">
                         <plex-int [(ngModel)]="params.min" label="Minimo" name="params-min"></plex-int>
                         <plex-int [(ngModel)]="params.max" label="Maximo" name="params-max"></plex-int>
@@ -117,7 +114,6 @@
                         <plex-radio label="Tipo" [(ngModel)]="params.numericType" [data]="valorNumericoType"
                                     type="horizontal" name="params-type"></plex-radio>
                     </div>
-
                 </div>
 
                 <div *ngSwitchCase="'ChecklistComponent'">
@@ -141,8 +137,37 @@
                 </div>
 
             </ng-container>
-
         </form>
-
+        <!--Items del SelectStaticoComponent-->
+        <form #formulario2="ngForm">
+            <section class="mt-2" *ngIf="tipoAtomo?.id=='SelectStaticoComponent'">
+                <plex-title titulo="Items de {{nombre}}" size="sm">
+                    <plex-button name="nuevoItem" label="Agregar item" type="info" size="sm"
+                                 (click)="showAgregarItem = true">
+                    </plex-button>
+                </plex-title>
+                <plex-wrapper justify *ngIf="showAgregarItem">
+                    <plex-text columns="4" label="Id" placeholder="Ingrese el id." [(ngModel)]="nuevoItem.id" name="id"
+                               [required]="true">
+                    </plex-text>
+                    <plex-text columns="6" label="Label" placeholder="Ingrese el label." [(ngModel)]="nuevoItem.label"
+                               name="label" [required]="true">
+                    </plex-text>
+                    <plex-button class="pt-4" name="confirmarItem" type="success" icon="plus" size="sm"
+                                 tooltip="Agregar" tooltipPosition="left" justify="end"
+                                 [disabled]="!nuevoItem?.id?.trim().length || !nuevoItem?.label?.trim().length"
+                                 (click)="addItem()">
+                    </plex-button>
+                </plex-wrapper>
+                <plex-list *ngIf="items?.length">
+                    <plex-item *ngFor="let item of items; let i = index">
+                        <plex-icon name="documento" type="info" size="md"></plex-icon>
+                        <plex-label titulo="{{ item.id }}" subtitulo="{{ item.label }}"></plex-label>
+                        <plex-button type="danger" size="sm" icon="delete" tooltip="Eliminar" (click)="removeItem(i)">
+                        </plex-button>
+                    </plex-item>
+                </plex-list>
+            </section>
+        </form>
     </plex-layout-main>
 </plex-layout>
diff --git a/src/app/rupers/components/atomo-create-update/atomo-create-update.component.ts b/src/app/rupers/components/atomo-create-update/atomo-create-update.component.ts
@@ -1,17 +1,27 @@
-import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { SnomedService } from 'src/app/shared/snomed.service';
 import { ElementosRupService } from '../../services/elementos-rup.service';
 import { Unsubscribe } from '@andes/shared';
 import { ISnomedConcept } from 'src/app/shared/ISnomedConcept';
 import { take } from 'rxjs/operators';
+import { Plex } from '@andes/plex';
+import { OnInit, Component, Input, EventEmitter, Output } from '@angular/core';
 
 @Component({
     selector: 'rup-atomo-create-update',
     templateUrl: 'atomo-create-update.component.html'
 })
 export class RUPAtomoCreateUpdateComponent implements OnInit {
 
+    @Input() items = [];
+    @Output() itemsNew: EventEmitter<any[]> = new EventEmitter<any[]>();
+
+    nuevoItem: any = {
+        id: '',
+        label: ''
+    };
+    showAgregarItem = false;
+
     valorNumericoType = [
         { id: 'integer', label: 'Entero' },
         { id: 'float', label: 'Decimales' }
@@ -41,13 +51,14 @@ export class RUPAtomoCreateUpdateComponent implements OnInit {
     public elemento;
     public concepto;
 
-    params: { [key: string]: any } = {};
+    params: any = {};
 
     constructor(
         private actr: ActivatedRoute,
         private snomedService: SnomedService,
         private elementosRUPService: ElementosRupService,
-        private router: Router
+        private router: Router,
+        private plex: Plex
     ) { }
 
     @Unsubscribe()
@@ -75,6 +86,9 @@ export class RUPAtomoCreateUpdateComponent implements OnInit {
                 this.titulo = this.elemento.conceptos[0].term;
                 this.concepto = this.elemento.conceptos[0];
                 this.params = this.elemento.params || {};
+                if (this.elemento.params.items) {
+                    this.items = this.elemento.params.items;
+                }
                 this.tipoAtomo = this.tipoAtomos.find(item => item.id === this.elemento.componente);
                 this.nombre = this.elemento.nombre;
             });
@@ -94,7 +108,8 @@ export class RUPAtomoCreateUpdateComponent implements OnInit {
             tipo: 'atomo',
             activo: true,
             defaultFor: [],
-            frecuentes: []
+            frecuentes: [],
+            params: {}
         };
     }
 
@@ -103,12 +118,38 @@ export class RUPAtomoCreateUpdateComponent implements OnInit {
         this.elemento.componente = this.tipoAtomo.id;
         this.elemento.params = this.params;
         this.elemento.nombre = this.nombre;
-        this.elementosRUPService.save(this.elemento).subscribe(() => {
-            this.router.navigate(['/rupers/elementos-rup'], { replaceUrl: true });
-        });
+        if (this.items.length) {
+            this.elemento.params.items = this.items;
+        }
+        this.elementosRUPService.save(this.elemento).subscribe(
+            () => {
+                this.router.navigate(['/rupers/elementos-rup'], { replaceUrl: true });
+                this.plex.toast('success', 'Los datos se guardaron correctamente');
+            },
+            (err) => {
+                this.plex.toast('danger', 'Error al guardar los datos');
+            }
+        );
     }
 
     volver() {
         this.router.navigate(['/rupers/elementos-rup'], { replaceUrl: true });
     }
+    addItem() {
+
+        (this.items) ? this.items.push(this.nuevoItem) : (this.items = [this.nuevoItem]);
+        this.itemsNew.emit(this.items);
+        this.nuevoItem = '';
+        this.showAgregarItem = false;
+        this.nuevoItem = {
+            id: '',
+            label: ''
+        };
+    }
+    removeItem(i: number) {
+        if (i >= 0) {
+            this.items.splice(i, 1);
+        }
+    }
+
 }