diff --git a/src/app/components/pages/backup-list/backup-list.component.ts b/src/app/components/pages/backup-list/backup-list.component.ts
index 98e17cd..f5fed31 100644
--- a/src/app/components/pages/backup-list/backup-list.component.ts
+++ b/src/app/components/pages/backup-list/backup-list.component.ts
@@ -2,22 +2,31 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
import { BackupService } from './backup-list.service';
import { Backup } from '../../../shared/model/backup.model';
import { CommonModule } from '@angular/common';
-import { Subscription } from 'rxjs';
+import { debounceTime, distinctUntilChanged, Subscription, switchMap } from 'rxjs';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { SearchComponent } from "../../../shared/components/search/search.component";
+import { searchService } from '../../../shared/components/search/search.service';
@Component({
selector: 'app-backup-list',
standalone: true,
- imports: [CommonModule],
+ imports: [CommonModule, ReactiveFormsModule, SearchComponent],
templateUrl: './backup-list.component.html',
styleUrl: './backup-list.component.scss',
providers: [BackupService]
})
export class BackupListComponent implements OnInit, OnDestroy{
+
+
backupVolumes: Backup[] = []
currentDate = new Date();
innerHTML!: string;
backupVolumesSubscription!: Subscription;
- constructor(private backupService: BackupService) {}
+ searchTerm: FormControl = new FormControl();
+
+
+
+ constructor(private backupService: BackupService, private searchService: searchService) {}
ngOnInit(): void {
this.backupVolumesSubscription = this.backupService.allBackups().subscribe((volumes)=>{
@@ -38,4 +47,18 @@ export class BackupListComponent implements OnInit, OnDestroy{
onReset() {
}
+
+ searchRequestSubscriptions: Subscription[] = [];
+
+ onTextChange(changedText: string) {
+ this.cancelPendingRequests();
+ this.searchService.search(changedText).subscribe((resp)=>{
+ this.backupVolumes = resp;
+ })
+
+ }
+
+ cancelPendingRequests() {
+ this.searchRequestSubscriptions.forEach(sub => sub.unsubscribe());
+ }
}
diff --git a/src/app/shared/components/search/search.component.html b/src/app/shared/components/search/search.component.html
new file mode 100644
index 0000000..03282b4
--- /dev/null
+++ b/src/app/shared/components/search/search.component.html
@@ -0,0 +1,8 @@
+
+
+
\ No newline at end of file
diff --git a/src/app/shared/components/search/search.component.scss b/src/app/shared/components/search/search.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/shared/components/search/search.component.spec.ts b/src/app/shared/components/search/search.component.spec.ts
new file mode 100644
index 0000000..1f28b44
--- /dev/null
+++ b/src/app/shared/components/search/search.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SearchComponent } from './search.component';
+
+describe('SearchComponent', () => {
+ let component: SearchComponent;
+ let fixture: ComponentFixture
;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [SearchComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(SearchComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/components/search/search.component.ts b/src/app/shared/components/search/search.component.ts
new file mode 100644
index 0000000..642d935
--- /dev/null
+++ b/src/app/shared/components/search/search.component.ts
@@ -0,0 +1,43 @@
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { Subject, debounceTime, distinctUntilChanged, Subscription } from 'rxjs';
+
+@Component({
+ selector: 'app-search',
+ standalone: true,
+ imports: [FormsModule],
+ templateUrl: './search.component.html',
+ styleUrl: './search.component.scss'
+})
+ export class SearchComponent implements OnInit, OnDestroy {
+ @Input() initialValue: string = "";
+ @Input() debounceTime = 300;
+
+ @Output() textChange = new EventEmitter();
+
+ inputValue = new Subject();
+ trigger = this.inputValue.pipe(
+ debounceTime(this.debounceTime),
+ distinctUntilChanged()
+ );
+
+ subscriptions: Subscription[] = [];
+
+ constructor() {}
+
+ ngOnInit() {
+ const subscription = this.trigger.subscribe(currentValue => {
+ this.textChange.emit(currentValue);
+ });
+ this.subscriptions.push(subscription);
+ }
+
+ ngOnDestroy() {
+ this.subscriptions.forEach(sub => sub.unsubscribe());
+ }
+
+ onInput(e: any) {
+ this.inputValue.next(e.target.value);
+ }
+ }
+
\ No newline at end of file
diff --git a/src/app/shared/components/search/search.service.ts b/src/app/shared/components/search/search.service.ts
new file mode 100644
index 0000000..4e615a9
--- /dev/null
+++ b/src/app/shared/components/search/search.service.ts
@@ -0,0 +1,18 @@
+import { HttpClient, HttpParams } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import { BACKUP_GET_URL } from "../../constants/backend";
+import { Backup } from "../../model/backup.model";
+
+@Injectable({providedIn:'root'})
+
+export class searchService {
+
+ constructor(private httpClient: HttpClient){}
+
+ search(term: string){
+ console.log(term)
+ let params = new HttpParams().set('term',term)
+
+ return this.httpClient.post(BACKUP_GET_URL+"/search",{term})
+ }
+}
\ No newline at end of file