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) { @if (showSearchBox) {
<mat-form-field class="search-field" appearance="outline"> <mat-form-field class="search-field" appearance="outline">
<mat-label>Search recordings</mat-label> <mat-label>Search recordings</mat-label>
<input matInput [formControl]="nameFilterControl" placeholder="Search by room name" /> <input
<mat-icon matSuffix>search</mat-icon> 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> </mat-form-field>
} }
</div> </div>

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

@ -4,6 +4,12 @@
.recordings-toolbar { .recordings-toolbar {
@extend .ov-data-toolbar; @extend .ov-data-toolbar;
.toolbar-left {
::ng-deep .search-btn {
padding: var(--ov-meet-spacing-sm);
}
}
.toolbar-right { .toolbar-right {
gap: var(--ov-meet-spacing-sm); 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.nameFilterControl.setValue(this.initialFilters.nameFilter);
this.statusFilterControl.setValue(this.initialFilters.statusFilter); this.statusFilterControl.setValue(this.initialFilters.statusFilter);
// Set up name filter with debounce // Set up name filter change detection
this.nameFilterControl.valueChanges.pipe(debounceTime(300), distinctUntilChanged()).subscribe((value) => { this.nameFilterControl.valueChanges.subscribe((value) => {
this.filterChange.emit({ // Emit filter change if value is empty
nameFilter: value || '', if (!value) {
statusFilter: this.statusFilterControl.value || '' this.emitFilterChange();
}); }
}); });
// Set up status filter // Set up status filter change detection
this.statusFilterControl.valueChanges.subscribe((value) => { this.statusFilterControl.valueChanges.subscribe(() => {
this.filterChange.emit({ this.emitFilterChange();
nameFilter: this.nameFilterControl.value || '',
statusFilter: value || ''
});
}); });
} }
@ -307,6 +304,17 @@ export class RecordingListsComponent implements OnInit, OnChanges {
// ===== FILTER METHODS ===== // ===== FILTER METHODS =====
triggerSearch() {
this.emitFilterChange();
}
private emitFilterChange() {
this.filterChange.emit({
nameFilter: this.nameFilterControl.value || '',
statusFilter: this.statusFilterControl.value || ''
});
}
hasActiveFilters(): boolean { hasActiveFilters(): boolean {
return !!(this.nameFilterControl.value || this.statusFilterControl.value); return !!(this.nameFilterControl.value || this.statusFilterControl.value);
} }