Feat: Update Datapicker with Angular Material and add Validators

Signed-off-by: Mepa <[email protected]>
shx-selecao · Feb 14, 2024 · 31d361b · 31d361b
1 parent 5ed2b48
commit 31d361b
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 41 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -22,19 +22,32 @@
     <mat-drawer-container class="min-h-sideNav">
         <mat-drawer mode="side" class="min-w-350px" opened>
             <div class="flex flex-col p-4 items-center">
-                <span class="text-lg">Cotações por Período</span>
-                <label class="mr-3" for="dataInicial">Data inicial:</label>
-                <input id="dataInicial" type="date" name="dataInicial" #dataInicial>
-                <label class="mr-3" for="dataFinal">Data final:</label>
-                <input id="dataFinal" type="date" name="dataFinal" #dataFinal>
-                <button mat-raised-button color="primary" type="submit" class="btnPesquisar"
-                    (click)="getCotacaoPorPeriodo(dataInicial.value, dataFinal.value)"> Pesquisar </button>
+                <span class="text-2xl pb-4 pt-10 font-sans font-semibold">Cotações por Período</span>
+
+                <form [formGroup]="periodoForm" (ngSubmit)="getCotacaoPorPeriodo()" class="flex flex-col">
+                <mat-form-field appearance="fill">
+                    <mat-label>Data Inicial</mat-label>
+                    <input matInput [min]="minDate" [max]="maxDateInicio" [matDatepicker]="picker_dialog1" formControlName="inicioPeriodo">
+                    <mat-datepicker-toggle matSuffix [for]="picker_dialog1"></mat-datepicker-toggle>
+                    <mat-datepicker #picker_dialog1></mat-datepicker>
+                </mat-form-field>
+
+
+                <mat-form-field appearance="fill">
+                    <mat-label>Data Final</mat-label>
+                    <input matInput [min]="minDate" [max]="maxDateFinal" [matDatepicker]="picker_dialog2" formControlName="finalPeriodo">
+                    <mat-datepicker-toggle matSuffix [for]="picker_dialog2"></mat-datepicker-toggle>
+                    <mat-datepicker #picker_dialog2></mat-datepicker>
+                </mat-form-field>
+
+                <button [disabled]="!periodoForm.valid" mat-raised-button color="primary" type="submit" class="btnPesquisar"> Pesquisar </button>
+            </form>
+
             </div>
 
 
         </mat-drawer>
         <mat-drawer-content>
-
             <div class="mt-3">
                 <ul *ngFor="let item of cotacaoPorPeriodoLista">
                     <li class="listaHistoricoCotacoesItem">

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -2,42 +2,65 @@ import { DatePipe } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { Cotacao } from './cotacao';
 import { CotacaoDolarService } from './cotacaodolar.service';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.css'],
 })
 export class AppComponent implements OnInit {
-  cotacaoAtual: Cotacao = new Cotacao(0,0,"","");
-  cotacaoPorPeriodoLista: Cotacao[] = [];
-
-  constructor(
-    private cotacaoDolarService: CotacaoDolarService,
-    private dateFormat: DatePipe
-  ) {}
-
-  public getCotacaoPorPeriodo(
-    dataInicialString: string,
-    dataFinalString: string
-  ): void {
-    this.cotacaoPorPeriodoLista = [];
-
-    const dataInicial = this.dateFormat.transform(dataInicialString, "MM-dd-yyyy") || '';
-    const dataFinal = this.dateFormat.transform(dataFinalString, "MM-dd-yyyy") || '';
-
-    if (dataInicial && dataFinal) {
-      this.cotacaoDolarService.getCotacaoPorPeriodoFront(dataInicial, dataFinal).subscribe(cotacoes => {
-        this.cotacaoPorPeriodoLista = cotacoes;
-      })
-    } else {
-      //ALERTA DE ERRO POÍS DATA INICIAL E FINAL SÃO OBRIGATÓRIAS
+    cotacaoAtual: Cotacao = new Cotacao(0, 0, "", "");
+    cotacaoPorPeriodoLista: Cotacao[] = [];
+
+    minDate: Date = new Date(1984, 0, 1);
+    maxDateInicio: Date = new Date();
+    maxDateFinal: Date = new Date();
+
+
+    periodoForm = new FormGroup({
+        inicioPeriodo: new FormControl(null, Validators.required),
+        finalPeriodo: new FormControl(null, Validators.required)
+    });
+
+    constructor(
+        private cotacaoDolarService: CotacaoDolarService,
+        private dateFormat: DatePipe
+    ) { }
+
+    public getCotacaoPorPeriodo(): void {
+        let dataInicialString = this.periodoForm.value.inicioPeriodo;
+        let dataFinalString = this.periodoForm.value.finalPeriodo;
+
+        this.cotacaoPorPeriodoLista = [];
+
+        const dataInicial = this.dateFormat.transform(dataInicialString, "MM-dd-yyyy") || '';
+        const dataFinal = this.dateFormat.transform(dataFinalString, "MM-dd-yyyy") || '';
+
+        this.cotacaoDolarService.getCotacaoPorPeriodoFront(dataInicial, dataFinal).subscribe(cotacoes => {
+            this.cotacaoPorPeriodoLista = cotacoes;
+        })
+    }
+
+    ngOnInit() {
+        this.cotacaoDolarService.getCotacaoAtual().subscribe(cotacao => {
+            this.cotacaoAtual = cotacao;
+        })
+
+        this.periodoForm.get('finalPeriodo')?.valueChanges.subscribe((value: Date) => {
+            this.maxDateInicio = value;
+        });
+
+
+        let hoje = new Date();
+        let primeiroDiaMes = new Date(hoje.getFullYear(), hoje.getMonth(), 1);
+
+        this.periodoForm.patchValue({
+            inicioPeriodo: primeiroDiaMes,
+            finalPeriodo: hoje
+        });
+
+        this.getCotacaoPorPeriodo();
     }
-  }
 
-  ngOnInit() {
-    this.cotacaoDolarService.getCotacaoAtual().subscribe(cotacao => {
-      this.cotacaoAtual = cotacao;
-    })
-  }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -13,6 +13,7 @@ import {MatDatepickerModule} from '@angular/material/datepicker';
 import { MatNativeDateModule } from '@angular/material/core';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
+import {MatTableModule} from '@angular/material/table';
 
 @NgModule({
   declarations: [AppComponent],
@@ -30,7 +31,8 @@ import {MatInputModule} from '@angular/material/input';
     MatFormFieldModule,
     MatDatepickerModule,
     MatNativeDateModule,
-    MatInputModule
+    MatInputModule,
+    MatTableModule
   ],
   providers: [DatePipe],
   bootstrap: [AppComponent],