diff --git a/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.html b/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.html index 6787eaf..298f8a9 100644 --- a/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.html +++ b/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.html @@ -20,8 +20,22 @@ @if (showSearchBox) { Search recordings - - search + + } diff --git a/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.scss b/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.scss index 192db1a..70d5621 100644 --- a/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.scss @@ -4,6 +4,12 @@ .recordings-toolbar { @extend .ov-data-toolbar; + .toolbar-left { + ::ng-deep .search-btn { + padding: var(--ov-meet-spacing-sm); + } + } + .toolbar-right { gap: var(--ov-meet-spacing-sm); diff --git a/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.ts b/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.ts index e5bf62d..483c515 100644 --- a/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.ts +++ b/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.ts @@ -181,20 +181,17 @@ export class RecordingListsComponent implements OnInit, OnChanges { this.nameFilterControl.setValue(this.initialFilters.nameFilter); this.statusFilterControl.setValue(this.initialFilters.statusFilter); - // Set up name filter with debounce - this.nameFilterControl.valueChanges.pipe(debounceTime(300), distinctUntilChanged()).subscribe((value) => { - this.filterChange.emit({ - nameFilter: value || '', - statusFilter: this.statusFilterControl.value || '' - }); + // Set up name filter change detection + this.nameFilterControl.valueChanges.subscribe((value) => { + // Emit filter change if value is empty + if (!value) { + this.emitFilterChange(); + } }); - // Set up status filter - this.statusFilterControl.valueChanges.subscribe((value) => { - this.filterChange.emit({ - nameFilter: this.nameFilterControl.value || '', - statusFilter: value || '' - }); + // Set up status filter change detection + this.statusFilterControl.valueChanges.subscribe(() => { + this.emitFilterChange(); }); } @@ -307,6 +304,17 @@ export class RecordingListsComponent implements OnInit, OnChanges { // ===== FILTER METHODS ===== + triggerSearch() { + this.emitFilterChange(); + } + + private emitFilterChange() { + this.filterChange.emit({ + nameFilter: this.nameFilterControl.value || '', + statusFilter: this.statusFilterControl.value || '' + }); + } + hasActiveFilters(): boolean { return !!(this.nameFilterControl.value || this.statusFilterControl.value); }