Fiz assim:
import {
ChangeDetectorRef,
Component,
ElementRef,
ViewChild,
ViewEncapsulation,
} from "@angular/core";
import { FormControl, FormGroup } from "@angular/forms";
import { MatPaginator, PageEvent } from "@angular/material/paginator";
import { MatSort } from "@angular/material/sort";
import { MatTableDataSource } from "@angular/material/table";
import { ActivatedRoute, Router } from "@angular/router";
import { fuseAnimations } from "@fuse/animations";
import { FuseMediaWatcherService } from "@fuse/services/media-watcher";
import { NUMERO_INICIAL_PESQUISA } from "app/core/api/erp.api";
import { StateStorageService } from "app/core/auth/state-storage.service";
import { DefaultManterComponent } from "app/core/classes/default.manter.component";
import { AppConfig } from "app/core/config/app.config";
import { Layout } from "app/layout/layout.types";
import { environment } from "environments/environment";
import { merge, of as observableOf, Subject } from "rxjs";
import {
catchError,
map,
startWith,
switchMap,
takeUntil,
} from "rxjs/operators";
@Component({
selector: "configuracao",
templateUrl: "./configuracao.component.html",
styles: [
`
.configuracao-grid {
grid-template-columns: 48px auto 40px;
@screen sm {
grid-template-columns: 48px auto 112px 72px;
}
@screen md {
grid-template-columns: 48px 112px auto 112px 72px;
}
@screen lg {
grid-template-columns: 48px 112px auto 112px 96px 96px 72px;
}
}
`,
],
encapsulation: ViewEncapsulation.None,
animations: fuseAnimations,
})
export class ConfiguracaoComponent extends DefaultManterComponent {
rota = "configuracao/";
urlBase = "configuracao";
nomePagina = "Configuração";
environmentBackend = environment.SITE;
numeroPaginaInicial: number = NUMERO_INICIAL_PESQUISA;
pesquisa: any;
lista: any[];
dataSource: MatTableDataSource<any> = new MatTableDataSource();
@ViewChild(MatPaginator, { static: true })
paginator: MatPaginator;
@ViewChild("filter", { static: true })
filter: ElementRef;
@ViewChild(MatSort, { static: true })
sort: MatSort;
mostrarPesquisa: boolean;
resultsLength: number;
isLoadingResults: boolean;
isRateLimitReached: boolean;
entidades: any[];
private _unsubscribeAll: Subject<any> = new Subject<any>();
colunas: string[] = [
"diaAtraso",
"periodoGratuidade",
"vencimentoBoleto",
"dataHoraCadastro",
];
config: AppConfig;
layout: Layout;
scheme: "dark" | "light";
theme: string;
themes: [string, any][] = [];
pesquisaBanco: any;
formGroup = new FormGroup({
diaAtraso: new FormControl(),
periodoGratuidade: new FormControl(),
vencimentoBoleto: new FormControl(),
});
formGroupPesquisar = new FormGroup({
diaAtraso: new FormControl(),
periodoGratuidade: new FormControl(),
vencimentoBoleto: new FormControl(),
});
today = new Date();
month = this.today.getMonth();
year = this.today.getFullYear();
campaignOne = new FormGroup({
start: new FormControl(new Date(this.year, this.month, 13)),
end: new FormControl(new Date(this.year, this.month, 16)),
});
campaignTwo = new FormGroup({
start: new FormControl(new Date(this.year, this.month, 15)),
end: new FormControl(new Date(this.year, this.month, 19)),
});
constructor(
protected routaAtual: ActivatedRoute,
protected router: Router,
protected stateStorageService: StateStorageService,
private _changeDetectorRef: ChangeDetectorRef,
private _fuseMediaWatcherService: FuseMediaWatcherService
) {
super(routaAtual, router, stateStorageService);
}
async ngOnInit(): Promise<void> {
await super.ngOnInit();
this.pesquisar();
this._fuseMediaWatcherService.onMediaChange$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe(({}) => this._changeDetectorRef.markForCheck());
}
async salvar(): Promise<void> {
this.entidade = {
...this.formGroup.value,
};
await super.salvar();
this.pesquisar();
this.formGroup.reset();
}
paginacao(event?: PageEvent): void {
this.pesquisar(event?.pageIndex, event?.pageSize);
}
pesquisar(index = 0, length = this.numeroPaginaInicial) {
let diaAtraso = 0;
let periodoGratuidade = 0;
let vencimentoBoleto = 0;
if (this.formGroupPesquisar.controls.diaAtraso.value !== null) {
diaAtraso = this.formGroupPesquisar.controls.diaAtraso.value;
}
if (this.formGroupPesquisar.controls.periodoGratuidade.value !== null) {
periodoGratuidade =
this.formGroupPesquisar.controls.periodoGratuidade.value;
}
if (this.formGroupPesquisar.controls.vencimentoBoleto.value !== null) {
vencimentoBoleto =
this.formGroupPesquisar.controls.vencimentoBoleto.value;
}
this.pesquisa = {
paginaAtual: index,
quantidadeRegistros: length,
direcao: null,
campo: null,
diaAtraso,
periodoGratuidade,
vencimentoBoleto,
};
this.sort.sortChange.subscribe(() => (this.paginator.pageIndex = 0));
merge(this.sort.sortChange, this.paginator.page)
.pipe(
startWith({}),
switchMap(() => {
this.pesquisa.direcao = this.sort.direction;
this.pesquisa.campo = this.sort.active;
return this.pesquisaServiceS.pesquisar(
this.pesquisa,
this.urlBase,
this.environmentBackend
);
}),
map((data: any) => {
this.isLoadingResults = false;
this.isRateLimitReached = false;
this.resultsLength = data.body.paginacao.totalElementos;
return data.body.lista;
}),
catchError((error: any) => {
this.isLoadingResults = false;
this.isRateLimitReached = true;
if (error !== "undefined") {
if (error.error !== null && error.error.texto !== undefined) {
this.errorServiceS.error(error);
} else {
this.errorServiceS.error("Erro em pesquisar um registro !");
}
}
return observableOf([]);
})
)
.subscribe((data: any) => {
this.entidades = data;
this.dataSource.data = data;
this.mostrarPesquisa = true;
});
}
limpar(): void {
this.formGroupPesquisar.controls.diaAtraso.setValue(0);
this.formGroupPesquisar.controls.periodoGratuidade.setValue(0);
this.formGroupPesquisar.controls.vencimentoBoleto.setValue(0);
this.pesquisaBanco = {
paginaAtual: 0,
quantidadeRegistros: this.numeroPaginaInicial,
direcao: this.sort.direction,
campo: this.sort.active,
};
this.pesquisar();
}
}
E assim
import {
ChangeDetectorRef,
Component,
ElementRef,
ViewChild,
ViewEncapsulation,
} from "@angular/core";
import { FormControl, FormGroup } from "@angular/forms";
import { MatPaginator, PageEvent } from "@angular/material/paginator";
import { MatSort } from "@angular/material/sort";
import { MatTableDataSource } from "@angular/material/table";
import { ActivatedRoute, Router } from "@angular/router";
import { fuseAnimations } from "@fuse/animations";
import { FuseMediaWatcherService } from "@fuse/services/media-watcher";
import { NUMERO_INICIAL_PESQUISA } from "app/core/api/erp.api";
import { StateStorageService } from "app/core/auth/state-storage.service";
import { DefaultManterComponent } from "app/core/classes/default.manter.component";
import { AppConfig } from "app/core/config/app.config";
import { Layout } from "app/layout/layout.types";
import { environment } from "environments/environment";
import { merge, of as observableOf, Subject } from "rxjs";
import {
catchError,
map,
startWith,
switchMap,
takeUntil,
} from "rxjs/operators";
const today = new Date();
const month = today.getMonth();
const year = today.getFullYear();
@Component({
selector: "configuracao",
templateUrl: "./configuracao.component.html",
styles: [
`
.configuracao-grid {
grid-template-columns: 48px auto 40px;
@screen sm {
grid-template-columns: 48px auto 112px 72px;
}
@screen md {
grid-template-columns: 48px 112px auto 112px 72px;
}
@screen lg {
grid-template-columns: 48px 112px auto 112px 96px 96px 72px;
}
}
`,
],
encapsulation: ViewEncapsulation.None,
animations: fuseAnimations,
})
export class ConfiguracaoComponent extends DefaultManterComponent {
rota = "configuracao/";
urlBase = "configuracao";
nomePagina = "Configuração";
environmentBackend = environment.SITE;
numeroPaginaInicial: number = NUMERO_INICIAL_PESQUISA;
pesquisa: any;
lista: any[];
dataSource: MatTableDataSource<any> = new MatTableDataSource();
@ViewChild(MatPaginator, { static: true })
paginator: MatPaginator;
@ViewChild("filter", { static: true })
filter: ElementRef;
@ViewChild(MatSort, { static: true })
sort: MatSort;
mostrarPesquisa: boolean;
resultsLength: number;
isLoadingResults: boolean;
isRateLimitReached: boolean;
entidades: any[];
private _unsubscribeAll: Subject<any> = new Subject<any>();
colunas: string[] = [
"diaAtraso",
"periodoGratuidade",
"vencimentoBoleto",
"dataHoraCadastro",
];
config: AppConfig;
layout: Layout;
scheme: "dark" | "light";
theme: string;
themes: [string, any][] = [];
pesquisaBanco: any;
formGroup = new FormGroup({
diaAtraso: new FormControl(),
periodoGratuidade: new FormControl(),
vencimentoBoleto: new FormControl(),
});
formGroupPesquisar = new FormGroup({
diaAtraso: new FormControl(),
periodoGratuidade: new FormControl(),
vencimentoBoleto: new FormControl(),
});
campaignOne = new FormGroup({
start: new FormControl(new Date(year, month, 13)),
end: new FormControl(new Date(year, month, 16)),
});
campaignTwo = new FormGroup({
start: new FormControl(new Date(year, month, 15)),
end: new FormControl(new Date(year, month, 19)),
});
constructor(
protected routaAtual: ActivatedRoute,
protected router: Router,
protected stateStorageService: StateStorageService,
private _changeDetectorRef: ChangeDetectorRef,
private _fuseMediaWatcherService: FuseMediaWatcherService
) {
super(routaAtual, router, stateStorageService);
}
async ngOnInit(): Promise<void> {
await super.ngOnInit();
this.pesquisar();
this._fuseMediaWatcherService.onMediaChange$
.pipe(takeUntil(this._unsubscribeAll))
.subscribe(({}) => this._changeDetectorRef.markForCheck());
}
async salvar(): Promise<void> {
this.entidade = {
...this.formGroup.value,
};
await super.salvar();
this.pesquisar();
this.formGroup.reset();
}
paginacao(event?: PageEvent): void {
this.pesquisar(event?.pageIndex, event?.pageSize);
}
pesquisar(index = 0, length = this.numeroPaginaInicial) {
let diaAtraso = 0;
let periodoGratuidade = 0;
let vencimentoBoleto = 0;
if (this.formGroupPesquisar.controls.diaAtraso.value !== null) {
diaAtraso = this.formGroupPesquisar.controls.diaAtraso.value;
}
if (this.formGroupPesquisar.controls.periodoGratuidade.value !== null) {
periodoGratuidade =
this.formGroupPesquisar.controls.periodoGratuidade.value;
}
if (this.formGroupPesquisar.controls.vencimentoBoleto.value !== null) {
vencimentoBoleto =
this.formGroupPesquisar.controls.vencimentoBoleto.value;
}
this.pesquisa = {
paginaAtual: index,
quantidadeRegistros: length,
direcao: null,
campo: null,
diaAtraso,
periodoGratuidade,
vencimentoBoleto,
};
this.sort.sortChange.subscribe(() => (this.paginator.pageIndex = 0));
merge(this.sort.sortChange, this.paginator.page)
.pipe(
startWith({}),
switchMap(() => {
this.pesquisa.direcao = this.sort.direction;
this.pesquisa.campo = this.sort.active;
return this.pesquisaServiceS.pesquisar(
this.pesquisa,
this.urlBase,
this.environmentBackend
);
}),
map((data: any) => {
this.isLoadingResults = false;
this.isRateLimitReached = false;
this.resultsLength = data.body.paginacao.totalElementos;
return data.body.lista;
}),
catchError((error: any) => {
this.isLoadingResults = false;
this.isRateLimitReached = true;
if (error !== "undefined") {
if (error.error !== null && error.error.texto !== undefined) {
this.errorServiceS.error(error);
} else {
this.errorServiceS.error("Erro em pesquisar um registro !");
}
}
return observableOf([]);
})
)
.subscribe((data: any) => {
this.entidades = data;
this.dataSource.data = data;
this.mostrarPesquisa = true;
});
}
limpar(): void {
this.formGroupPesquisar.controls.diaAtraso.setValue(0);
this.formGroupPesquisar.controls.periodoGratuidade.setValue(0);
this.formGroupPesquisar.controls.vencimentoBoleto.setValue(0);
this.pesquisaBanco = {
paginaAtual: 0,
quantidadeRegistros: this.numeroPaginaInicial,
direcao: this.sort.direction,
campo: this.sort.active,
};
this.pesquisar();
}
}
Não deu certo
