Added search on backup

src/app/components/pages/backup-list/backup-list.component.html

@@ -2,6 +2,10 @@
     <div class="title">
         <h2>Backup List</h2>
     </div>
+    <div class="search">
+        <app-search (textChange)="onTextChange($event)"></app-search>
+    </div>
+    <p>{{searchTerm}}</p>
     <div class="table">
         <table>
             <thead>
@@ -21,7 +25,7 @@
                     <td><a target="_blank" [href]=backup.projectURL>{{backup.projectName}}</a></td>
                     <td><a target="_blank" [href]=backup.volumeURL>{{backup.volumeName}}</a></td>
                     <td class="copyName" #copy (click)="copyName(copy)">{{backup.volumeName}}-{{currentDate | date: 'dd-MM-YYYY'}}-Cloud</td>
-                    <td class="input"><input type="checkbox" name="status" id="status" /></td>
+                    <td class="input"><input type="checkbox" name="status" id="status"  /></td>
                 </tr>
             </tbody>
         </table>

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());
+  }
 }

src/app/shared/components/search/search.component.html

@@ -0,0 +1,8 @@
+<div class="container">
+    <input
+    type="text"
+    placeholder="Enter your search term..."
+    [value]="initialValue"
+    (input)="onInput($event)"
+  />  
+</div>

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<SearchComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SearchComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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<string>();
+  
+    inputValue = new Subject<string>();
+    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);
+    }
+  }
+  

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[]>(BACKUP_GET_URL+"/search",{term})
+    }
+}