diff --git a/frontend/src/app/components/main-page/import-export/import-export.component.ts b/frontend/src/app/components/main-page/import-export/import-export.component.ts index e835f1b..d1667b9 100644 --- a/frontend/src/app/components/main-page/import-export/import-export.component.ts +++ b/frontend/src/app/components/main-page/import-export/import-export.component.ts @@ -1,10 +1,11 @@ -import { Component } from '@angular/core'; +import {Component, OnDestroy} from '@angular/core'; import { TuiFileLike, TuiFiles } from "@taiga-ui/kit"; -import { catchError, finalize, map, Observable, of, Subject, switchMap } from "rxjs"; +import {catchError, debounceTime, finalize, map, Observable, of, Subject, switchMap, takeUntil} from "rxjs"; import { FormControl, ReactiveFormsModule, Validators } from "@angular/forms"; import { AsyncPipe, NgIf } from "@angular/common"; import { ToponymsService } from "../../../services/toponyms.service"; import { TuiAppearance, TuiButton } from "@taiga-ui/core"; +import {FilterDto} from "../../../dtos/dtos"; @Component({ selector: 'app-import-export', @@ -13,7 +14,9 @@ import { TuiAppearance, TuiButton } from "@taiga-ui/core"; templateUrl: './import-export.component.html', styleUrl: './import-export.component.sass' }) -export class ImportExportComponent { +export class ImportExportComponent implements OnDestroy { + + private destroy$ = new Subject(); constructor(private readonly toponymsService: ToponymsService) { } @@ -25,6 +28,8 @@ export class ImportExportComponent { protected readonly failedFiles$ = new Subject(); protected readonly loadingFiles$ = new Subject(); protected readonly loadedFiles$ = this.control.valueChanges.pipe( + takeUntil(this.destroy$), + debounceTime(300), switchMap((file) => this.processFile(file)), ); @@ -41,6 +46,7 @@ export class ImportExportComponent { this.loadingFiles$.next(file); return this.toponymsService.import(file as File).pipe( + takeUntil(this.destroy$), map(() => { return file; }), @@ -49,7 +55,25 @@ export class ImportExportComponent { this.failedFiles$.next(file); return of(null); }), - finalize(() => this.loadingFiles$.next(null)) + finalize(() => { + this.loadingFiles$.next(null); + + const filterDto: FilterDto = { + type: null, + style: null, + hasPhoto: null, + architect: null, + renamedDateFrom: null, + renamedDateTo: null, + cardSearch: null, + constructionDateFrom: null, + constructionDateTo: null, + address: null, + name: null, + }; + + this.toponymsService.filtersChanged$.next(filterDto); + }) ); } @@ -70,4 +94,9 @@ export class ImportExportComponent { } }); } + + ngOnDestroy() { + this.destroy$.next(); + this.destroy$.complete(); + } } diff --git a/frontend/src/app/components/main-page/main-page.component.ts b/frontend/src/app/components/main-page/main-page.component.ts index 9040b1c..ee75cf3 100644 --- a/frontend/src/app/components/main-page/main-page.component.ts +++ b/frontend/src/app/components/main-page/main-page.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, OnDestroy, OnInit} from '@angular/core'; import {FilterDto, ToponymDto} from "../../dtos/dtos"; import {ReactiveFormsModule} from "@angular/forms"; import { @@ -12,6 +12,7 @@ import {ToponymTableComponent} from "./toponym-table/toponym-table.component"; import {ToponymFiltersComponent} from "./toponym-filters/toponym-filters.component"; import {ToponymsService} from "../../services/toponyms.service"; import {ImportExportComponent} from "./import-export/import-export.component"; +import {debounceTime, Subject, takeUntil} from "rxjs"; @Component({ selector: 'app-main-page', @@ -30,8 +31,9 @@ import {ImportExportComponent} from "./import-export/import-export.component"; templateUrl: './main-page.component.html', styleUrl: './main-page.component.sass' }) -export class MainPageComponent implements OnInit { +export class MainPageComponent implements OnInit, OnDestroy { + private destroy$ = new Subject(); constructor(private readonly toponymsService: ToponymsService) { } @@ -44,10 +46,10 @@ export class MainPageComponent implements OnInit { ngOnInit() { this.onFilter({}); - this.toponymsService.filtersChanged$.subscribe(filters => { - console.log(filters); - this.onFilter(filters); - }) + this.toponymsService.filtersChanged$.pipe(debounceTime(300), takeUntil(this.destroy$)) + .subscribe(filters => { + this.onFilter(filters); + }); } onPageChanged(page: number) { @@ -60,4 +62,9 @@ export class MainPageComponent implements OnInit { this.filteredData = result; }); } + + ngOnDestroy() { + this.destroy$.next(); + this.destroy$.complete(); + } } diff --git a/frontend/src/app/components/main-page/toponym-table/toponym-table.component.ts b/frontend/src/app/components/main-page/toponym-table/toponym-table.component.ts index 704da7f..75f2f97 100644 --- a/frontend/src/app/components/main-page/toponym-table/toponym-table.component.ts +++ b/frontend/src/app/components/main-page/toponym-table/toponym-table.component.ts @@ -1,4 +1,4 @@ -import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; +import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core'; import {ToponymDto} from "../../../dtos/dtos"; import {NgForOf} from "@angular/common"; import {TuiPagination} from "@taiga-ui/kit"; @@ -12,6 +12,7 @@ import { } from "@taiga-ui/addon-table"; import {SafeUrlPipe} from "../../../pipes/safe-url.pipe"; import {ToponymsService} from "../../../services/toponyms.service"; +import {debounceTime, Subject, takeUntil} from "rxjs"; @Component({ selector: 'app-toponym-table', @@ -30,7 +31,7 @@ import {ToponymsService} from "../../../services/toponyms.service"; SafeUrlPipe ], }) -export class ToponymTableComponent implements OnInit { +export class ToponymTableComponent implements OnInit, OnDestroy { @Output() pageChanged = new EventEmitter(); @Input() data: ToponymDto[] = []; @@ -39,6 +40,8 @@ export class ToponymTableComponent implements OnInit { currentPage = 0; + private destroy$ = new Subject(); + constructor(private readonly toponymsService: ToponymsService) { } @@ -52,7 +55,8 @@ export class ToponymTableComponent implements OnInit { } ngOnInit() { - this.toponymsService.filtersChanged$.subscribe((result) => { + this.toponymsService.filtersChanged$.pipe(debounceTime(300), + takeUntil(this.destroy$)).subscribe((result) => { this.currentPage = 0; }); } @@ -61,4 +65,9 @@ export class ToponymTableComponent implements OnInit { this.currentPage = page; this.pageChanged.emit(page); } + + ngOnDestroy() { + this.destroy$.next(); + this.destroy$.complete(); + } }