neoris/openvidu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend: enhance search functionality in recording lists with improved input handling and trigger search method

Browse Source
This commit is contained in:
juancarmore 2025-08-15 22:26:19 +02:00
parent 3513733071
commit 1ac05d6157
3 changed files with 42 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.html
View File

@ -20,8 +20,22 @@
@if (showSearchBox) {
<mat-form-field class="search-field" appearance="outline">
<mat-label>Search recordings</mat-label>
<input matInput [formControl]="nameFilterControl" placeholder="Search by room name" />
<mat-icon matSuffix>search</mat-icon>
<input
matInput
[formControl]="nameFilterControl"
placeholder="Search by room name or room ID"
(keydown.enter)="triggerSearch()"
/>
<button
mat-icon-button
matSuffix
class="search-btn"
(click)="triggerSearch()"
[disabled]="loading || !nameFilterControl.value"
matTooltip="Search"
>
<mat-icon>search</mat-icon>
</button>
</mat-form-field>
}
</div>

6
frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.scss
View File

@ -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);

32
frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.ts
View File

@ -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);
}