frontend: enhance rooms lists component with improved loading states, search functionality, and empty filter messaging

frontend/projects/shared-meet-components/src/lib/components/rooms-lists/rooms-lists.component.scss

@@ -4,12 +4,22 @@
 .rooms-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);
 
 		::ng-deep .refresh-btn {
 			padding: var(--ov-meet-spacing-sm);
 		}
+
+		::ng-deep .clear-btn {
+			padding: var(--ov-meet-spacing-sm);
+		}
 	}
 }
 
@@ -251,10 +261,15 @@
 	}
 
 	.getting-started-actions {
-		display: flex;
+		@extend .action-buttons;
-		flex-direction: column;
+
-		gap: var(--ov-meet-spacing-md);
+		.create-room-btn {
-		align-items: center;
+			@extend .refresh-btn;
+		}
+
+		.clear-filters-btn {
+			@extend .refresh-btn;
+		}
 	}
 }
 

frontend/projects/shared-meet-components/src/lib/components/rooms-lists/rooms-lists.component.ts

@@ -92,10 +92,12 @@ export interface RoomTableAction {
 export class RoomsListsComponent implements OnInit, OnChanges {
 	// Input properties
 	@Input() rooms: MeetRoom[] = [];
+	@Input() showSearchBox = true;
 	@Input() showFilters = false;
 	@Input() showSelection = true;
 	@Input() showLoadMore = false;
 	@Input() loading = false;
+	@Input() initialFilters: { nameFilter: string; statusFilter: string } = { nameFilter: '', statusFilter: '' };
 
 	// Host binding for styling when rooms are selected
 	@HostBinding('class.has-selections')
@@ -106,13 +108,15 @@ export class RoomsListsComponent implements OnInit, OnChanges {
 	// Output events
 	@Output() roomAction = new EventEmitter<RoomTableAction>();
 	@Output() filterChange = new EventEmitter<{ nameFilter: string; statusFilter: string }>();
-	@Output() loadMore = new EventEmitter<void>();
+	@Output() loadMore = new EventEmitter<{ nameFilter: string; statusFilter: string }>();
-	@Output() refresh = new EventEmitter<void>();
+	@Output() refresh = new EventEmitter<{ nameFilter: string; statusFilter: string }>();
 
 	// Filter controls
 	nameFilterControl = new FormControl('');
 	statusFilterControl = new FormControl('');
 
+	showEmptyFilterMessage = false; // Show message when no rooms match filters
+
 	// Selection state
 	selectedRooms = signal<Set<string>>(new Set());
 	allSelected = signal(false);
@@ -137,30 +141,39 @@ export class RoomsListsComponent implements OnInit, OnChanges {
 
 	ngOnChanges(changes: SimpleChanges) {
 		if (changes['rooms']) {
+			// Update selected rooms based on current rooms
 			const validIds = new Set(this.rooms.map((r) => r.roomId));
 			const filteredSelection = new Set([...this.selectedRooms()].filter((id) => validIds.has(id)));
 			this.selectedRooms.set(filteredSelection);
 			this.updateSelectionState();
+
+			// Show message when no rooms match filters
+			if (this.rooms.length === 0 && this.hasActiveFilters()) {
+				this.showEmptyFilterMessage = true;
+			} else {
+				this.showEmptyFilterMessage = false;
+			}
 		}
 	}
 
 	// ===== INITIALIZATION METHODS =====
 
 	private setupFilters() {
-		// Set up name filter with debounce
+		// Set up initial filter values
-		this.nameFilterControl.valueChanges.pipe(debounceTime(300), distinctUntilChanged()).subscribe((value) => {
+		this.nameFilterControl.setValue(this.initialFilters.nameFilter);
-			this.filterChange.emit({
+		this.statusFilterControl.setValue(this.initialFilters.statusFilter);
-				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
+		// 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 || ''
-			});
 		});
 	}
 
@@ -261,8 +274,31 @@ export class RoomsListsComponent implements OnInit, OnChanges {
 		}
 	}
 
+	loadMoreRooms() {
+		const nameFilter = this.nameFilterControl.value || '';
+		const statusFilter = this.statusFilterControl.value || '';
+		this.loadMore.emit({ nameFilter, statusFilter });
+	}
+
+	refreshRooms() {
+		const nameFilter = this.nameFilterControl.value || '';
+		const statusFilter = this.statusFilterControl.value || '';
+		this.refresh.emit({ nameFilter, statusFilter });
+	}
+
 	// ===== 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);
 	}

frontend/projects/shared-meet-components/src/lib/pages/console/rooms/rooms.component.html

@@ -1,27 +1,28 @@
-@if (isLoading) {
+<!-- Loading State -->
-	@if (showLoadingSpinner) {
+@if (isInitializing && showInitialLoader) {
-		<!-- Enhanced Loading State with delay -->
+	<div class="ov-page-loading">
-		<div class="ov-page-loading">
+		<div class="loading-content">
-			<div class="loading-content">
+			<div class="loading-header">
-				<div class="loading-header">
+				<div class="loading-title">
-					<div class="loading-title">
+					<mat-icon class="ov-room-icon loading-icon">video_chat</mat-icon>
-						<mat-icon class="ov-room-icon loading-icon"> video_chat </mat-icon>
+					<h1>Loading Rooms</h1>
-						<h1>Loading Rooms</h1>
-					</div>
-					<p class="loading-subtitle">Please wait while we fetch your rooms...</p>
 				</div>
+				<p class="loading-subtitle">Please wait while we fetch your rooms...</p>
+			</div>
 
-				<div class="loading-spinner-container">
+			<div class="loading-spinner-container">
-					<mat-spinner diameter="48"></mat-spinner>
+				<mat-spinner diameter="48"></mat-spinner>
-				</div>
 			</div>
 		</div>
-	}
+	</div>
-} @else {
+}
+
+@if (!isInitializing) {
 	<div class="ov-page-container ov-mb-xxl" id="rooms-page-container">
+		<!-- Rooms Header -->
 		<div class="page-header" id="rooms-page-header">
 			<div class="title" id="rooms-title">
-				<mat-icon class="ov-room-icon" id="rooms-icon"> video_chat </mat-icon>
+				<mat-icon class="ov-room-icon" id="rooms-icon">video_chat</mat-icon>
 				<h1 id="rooms-heading">Rooms</h1>
 			</div>
 			<p class="subtitle" id="rooms-subtitle">
@@ -29,16 +30,21 @@
 			</p>
 		</div>
 
+		<!-- Content -->
 		<div class="page-content" id="rooms-content">
 			<ov-rooms-lists
 				id="rooms-list"
 				[rooms]="rooms()"
 				[loading]="isLoading"
+				[showSearchBox]="true"
+				[showFilters]="false"
 				[showSelection]="true"
 				[showLoadMore]="hasMoreRooms"
+				[initialFilters]="initialFilters"
 				(roomAction)="onRoomAction($event)"
-				(loadMore)="loadMoreRooms()"
+				(loadMore)="loadMoreRooms($event)"
-				(refresh)="refreshRooms()"
+				(refresh)="refreshRooms($event)"
+				(filterChange)="refreshRooms($event)"
 			></ov-rooms-lists>
 		</div>
 	</div>

frontend/projects/shared-meet-components/src/lib/pages/console/rooms/rooms.component.ts

@@ -49,8 +49,16 @@ export class RoomsComponent implements OnInit {
 	// searchTerm = '';
 
 	rooms = signal<MeetRoom[]>([]);
+
+	// Loading state
+	isInitializing = true;
+	showInitialLoader = false;
 	isLoading = false;
-	showLoadingSpinner = false;
+
+	initialFilters = {
+		nameFilter: '',
+		statusFilter: ''
+	};
 
 	// Pagination
 	hasMoreRooms = false;
@@ -69,7 +77,15 @@ export class RoomsComponent implements OnInit {
 	}
 
 	async ngOnInit() {
+		const delayLoader = setTimeout(() => {
+			this.showInitialLoader = true;
+		}, 200);
+
 		await this.loadRooms();
+
+		clearTimeout(delayLoader);
+		this.showInitialLoader = false;
+		this.isInitializing = false;
 	}
 
 	async onRoomAction(action: RoomTableAction) {
@@ -101,24 +117,34 @@ export class RoomsComponent implements OnInit {
 		}
 	}
 
-	private async loadRooms() {
+	private async loadRooms(filters?: { nameFilter: string; statusFilter: string }, refresh = false) {
-		this.isLoading = true;
+		const delayLoader = setTimeout(() => {
-		const delaySpinner = setTimeout(() => {
+			this.isLoading = true;
-			this.showLoadingSpinner = true;
 		}, 200);
 
 		try {
 			const roomFilters: MeetRoomFilters = {
 				maxItems: 50,
-				nextPageToken: this.nextPageToken
+				nextPageToken: !refresh ? this.nextPageToken : undefined
 			};
+
+			// Apply room ID filter if provided
+			// if (filters?.nameFilter) {
+			// 	roomFilters.roomName = filters.nameFilter;
+			// }
+
 			const response = await this.roomService.listRooms(roomFilters);
 
-			// TODO: Filter rooms
+			// TODO: Filter rooms by status
 
-			// Update rooms list
+			if (!refresh) {
-			const currentRooms = this.rooms();
+				// Update rooms list
-			this.rooms.set([...currentRooms, ...response.rooms]);
+				const currentRooms = this.rooms();
+				this.rooms.set([...currentRooms, ...response.rooms]);
+			} else {
+				// Replace rooms list
+				this.rooms.set(response.rooms);
+			}
 
 			// TODO: Sort rooms
 			// this.dataSource.data = this.rooms();
@@ -131,9 +157,8 @@ export class RoomsComponent implements OnInit {
 			this.notificationService.showAlert('Error loading rooms');
 			this.log.e('Error loading rooms:', error);
 		} finally {
+			clearTimeout(delayLoader);
 			this.isLoading = false;
-			clearTimeout(delaySpinner);
-			this.showLoadingSpinner = false;
 		}
 	}
 
@@ -188,16 +213,13 @@ export class RoomsComponent implements OnInit {
 	// 	}
 	// }
 
-	async loadMoreRooms() {
+	async loadMoreRooms(filters?: { nameFilter: string; statusFilter: string }) {
 		if (!this.hasMoreRooms || this.isLoading) return;
-		await this.loadRooms();
+		await this.loadRooms(filters);
 	}
 
-	async refreshRooms() {
+	async refreshRooms(filters?: { nameFilter: string; statusFilter: string }) {
-		this.rooms.set([]);
+		await this.loadRooms(filters, true);
-		this.nextPageToken = undefined;
-		this.hasMoreRooms = false;
-		await this.loadRooms();
 	}
 
 	private async createRoom() {