feat(IN): request con boton de busqueda

andes · Jan 29, 2024 · f8e1e8a · f8e1e8a
1 parent 8f08aa1
commit f8e1e8a
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 37 deletions.
diff --git a/...ps/rup/mapa-camas/sidebar/cama-detalle/historial-detalle/historial-detalle.component.html b/...ps/rup/mapa-camas/sidebar/cama-detalle/historial-detalle/historial-detalle.component.html
@@ -1,13 +1,17 @@
 <plex-title titulo="Historial de movimientos"></plex-title>
 <!--  HISTORIAL DE MOVIMIENTOS DE UNA CAMA -->
-<plex-grid size="sm" type="full" cols="2" class="mb-1 mt-0">
-    <plex-datetime label="Desde" name="desde" type="date" [(ngModel)]="desde" [debounce]="600"
-                   (change)="onChange($event)">
+<div class="filtros">
+    <plex-datetime label="Desde" name="desde" type="date" [(ngModel)]="desde" [debounce]="600" (change)="onChange()">
     </plex-datetime>
-    <plex-datetime label="Hasta" name="haste" type="date" [(ngModel)]="hasta" [debounce]="600"
-                   (change)="onChange($event)">
+    <plex-datetime label="Hasta" name="haste" type="date" [(ngModel)]="hasta" [debounce]="600" (change)="onChange()">
     </plex-datetime>
-</plex-grid>
+
+    <plex-button type="success" size="md" label="Buscar" (click)="buscar()" [disabled]="disableBuscar"></plex-button>
+</div>
+
+<div *ngIf="disableBuscar" class="mb-2">
+    <span class="text-danger">Las fechas seleccionadas son inválidas</span>
+</div>
 
 <table class="table table-striped">
     <thead>

diff --git a/...apps/rup/mapa-camas/sidebar/cama-detalle/historial-detalle/historial-detalle.component.ts b/...apps/rup/mapa-camas/sidebar/cama-detalle/historial-detalle/historial-detalle.component.ts
@@ -1,13 +1,14 @@
 import { Component, OnInit } from '@angular/core';
-import { Subject, Observable } from 'rxjs';
-import { map, switchMap, startWith } from 'rxjs/operators';
-import { MapaCamasService } from '../../../services/mapa-camas.service';
-import { ISnapshot } from '../../../interfaces/ISnapshot';
+import { Observable, Subject } from 'rxjs';
+import { map, startWith, switchMap } from 'rxjs/operators';
 import { IMAQEstado } from '../../../interfaces/IMaquinaEstados';
+import { ISnapshot } from '../../../interfaces/ISnapshot';
+import { MapaCamasService } from '../../../services/mapa-camas.service';
 
 @Component({
     selector: 'app-historial-detalle',
-    templateUrl: './historial-detalle.component.html'
+    templateUrl: './historial-detalle.component.html',
+    styleUrls: ['./historial-detalle.scss']
 })
 export class HistorialDetalleComponent implements OnInit {
     public cama$: Observable<ISnapshot>;
@@ -20,15 +21,37 @@ export class HistorialDetalleComponent implements OnInit {
 
     public historial$: Observable<any>;
 
+    public disableBuscar = false;
+
     constructor(
-        private mapaCamasService: MapaCamasService
+        private mapaCamasService: MapaCamasService,
     ) {
         this.cama$ = this.mapaCamasService.selectedCama;
         this.estados$ = this.mapaCamasService.estado$;
     }
 
     ngOnInit() {
+        this.historial$ = null;
+    }
+
+    onChange() {
+        if (this.desde && this.hasta) {
+            const fechaDesdeValida = (this.desde <= this.hasta);
+            const fechaHastaValida = (this.hasta <= moment().toDate() && this.hasta >= this.desde);
+
+            this.disableBuscar = !(fechaDesdeValida && fechaHastaValida);
+        } else { this.disableBuscar = true; }
+    }
+
+    getEstado(movimiento) {
+        return this.estados$.pipe(
+            map((estados) => {
+                return estados.find(est => movimiento.estado === est.key);
+            })
+        );
+    }
 
+    buscar() {
         this.historial$ = this.historial.pipe(
             startWith({
                 desde: this.desde, hasta: this.hasta
@@ -54,29 +77,4 @@ export class HistorialDetalleComponent implements OnInit {
             })
         );
     }
-
-    onChange($event) {
-        const filtros = {
-            desde: this.desde,
-            hasta: this.hasta
-        };
-
-        if (this.desde && this.hasta) {
-            const fechaDesdeValida = (this.desde <= this.hasta);
-            const fechaHastaValida = (this.hasta <= moment().toDate() && this.hasta >= this.desde);
-
-            if (fechaDesdeValida && fechaHastaValida) {
-                this.historial.next(filtros);
-            }
-        }
-    }
-
-    getEstado(movimiento) {
-        return this.estados$.pipe(
-            map((estados) => {
-                return estados.find(est => movimiento.estado === est.key);
-            })
-        );
-    }
-
 }
diff --git a/src/app/apps/rup/mapa-camas/sidebar/cama-detalle/historial-detalle/historial-detalle.scss b/src/app/apps/rup/mapa-camas/sidebar/cama-detalle/historial-detalle/historial-detalle.scss
@@ -0,0 +1,7 @@
+.filtros {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: flex-end;
+    column-gap: 5px;
+}