frontend: enhance rooms lists component with improved loading states, search functionality, and empty filter messaging
This commit is contained in:
juancarmore
parent
1ac05d6157
commit
cea5421012
@ -1,19 +1,46 @@
|
||||
<!-- Loading Spinner -->
|
||||
@if (loading) {
|
||||
<div class="loading-container">
|
||||
<mat-spinner diameter="40"></mat-spinner>
|
||||
<span>Loading rooms...</span>
|
||||
@if (!loading && rooms.length === 0 && !showEmptyFilterMessage) {
|
||||
<!-- Empty State -->
|
||||
<div class="no-rooms-state">
|
||||
<div class="empty-content">
|
||||
<h3>No rooms created yet</h3>
|
||||
<p>No rooms found. Create your first room to start hosting meetings and manage your video conferences.</p>
|
||||
|
||||
<div class="getting-started-actions">
|
||||
<button mat-button (click)="createRoom()" class="create-room-btn primary-button">
|
||||
<mat-icon>add</mat-icon>
|
||||
Create Your First Room
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
} @else if (rooms.length > 0) {
|
||||
} @else {
|
||||
<!-- Rooms Toolbar -->
|
||||
<mat-toolbar class="rooms-toolbar" id="rooms-toolbar">
|
||||
<!-- Left Section: Search -->
|
||||
<div class="toolbar-left" id="toolbar-left">
|
||||
<mat-form-field class="search-field" appearance="outline" id="search-field">
|
||||
<mat-label>Search rooms</mat-label>
|
||||
<input matInput [formControl]="nameFilterControl" placeholder="Search by room name" id="search-input" />
|
||||
<mat-icon matSuffix>search</mat-icon>
|
||||
</mat-form-field>
|
||||
@if (showSearchBox) {
|
||||
<mat-form-field class="search-field" appearance="outline" id="search-field">
|
||||
<mat-label>Search rooms</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[formControl]="nameFilterControl"
|
||||
placeholder="Search by room name"
|
||||
id="search-input"
|
||||
(keydown.enter)="triggerSearch()"
|
||||
/>
|
||||
<button
|
||||
mat-icon-button
|
||||
matSuffix
|
||||
class="search-btn"
|
||||
(click)="triggerSearch()"
|
||||
[disabled]="loading || !nameFilterControl.value"
|
||||
matTooltip="Search"
|
||||
id="search-btn"
|
||||
>
|
||||
<mat-icon>search</mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Center Section: Batch Actions (visible when items selected) -->
|
||||
@ -36,10 +63,23 @@
|
||||
|
||||
<!-- Right Section: Actions -->
|
||||
<div class="toolbar-right" id="toolbar-right">
|
||||
@if (hasActiveFilters()) {
|
||||
<button
|
||||
mat-icon-button
|
||||
class="clear-btn"
|
||||
(click)="clearFilters()"
|
||||
[disabled]="loading"
|
||||
matTooltip="Clear all filters"
|
||||
id="clear-filters-btn"
|
||||
>
|
||||
<mat-icon>filter_alt_off</mat-icon>
|
||||
</button>
|
||||
}
|
||||
|
||||
<button
|
||||
mat-icon-button
|
||||
class="refresh-btn"
|
||||
(click)="refresh.emit()"
|
||||
(click)="refreshRooms()"
|
||||
[disabled]="loading"
|
||||
matTooltip="Refresh rooms"
|
||||
id="refresh-btn"
|
||||
@ -76,266 +116,282 @@
|
||||
</div>
|
||||
</mat-toolbar>
|
||||
|
||||
<div class="table-container" id="table-container">
|
||||
<table mat-table [dataSource]="rooms" class="rooms-table" id="rooms-table">
|
||||
<!-- Selection Column -->
|
||||
@if (showSelection) {
|
||||
<ng-container matColumnDef="select">
|
||||
<th mat-header-cell *matHeaderCellDef id="select-header">
|
||||
<mat-checkbox
|
||||
[checked]="allSelected()"
|
||||
[indeterminate]="someSelected()"
|
||||
(change)="toggleAllSelection()"
|
||||
[disabled]="loading"
|
||||
id="select-all-checkbox"
|
||||
>
|
||||
</mat-checkbox>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let room" id="select-cell-{{ room.roomId }}">
|
||||
@if (canSelectRoom(room)) {
|
||||
<!-- Loading Spinner -->
|
||||
@if (loading) {
|
||||
<div class="loading-container">
|
||||
<mat-spinner diameter="40"></mat-spinner>
|
||||
<span>Loading rooms...</span>
|
||||
</div>
|
||||
} @else if (rooms.length === 0 && showEmptyFilterMessage) {
|
||||
<!-- No rooms match the current filters -->
|
||||
<div class="no-recordings-state">
|
||||
<div class="empty-content">
|
||||
<h3>No rooms match your search criteria and/or filters</h3>
|
||||
<p>Try adjusting or clearing your filters to see more rooms.</p>
|
||||
<div class="getting-started-actions">
|
||||
<button mat-button (click)="clearFilters()" class="clear-filters-btn primary-button">
|
||||
<mat-icon>filter_alt_off</mat-icon>
|
||||
Clear Filters
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
} @else {
|
||||
<!-- Rooms Table -->
|
||||
<div class="table-container" id="table-container">
|
||||
<table mat-table [dataSource]="rooms" class="rooms-table" id="rooms-table">
|
||||
<!-- Selection Column -->
|
||||
@if (showSelection) {
|
||||
<ng-container matColumnDef="select">
|
||||
<th mat-header-cell *matHeaderCellDef id="select-header">
|
||||
<mat-checkbox
|
||||
[checked]="isRoomSelected(room)"
|
||||
(change)="toggleRoomSelection(room)"
|
||||
[checked]="allSelected()"
|
||||
[indeterminate]="someSelected()"
|
||||
(change)="toggleAllSelection()"
|
||||
[disabled]="loading"
|
||||
id="select-room-{{ room.roomId }}"
|
||||
id="select-all-checkbox"
|
||||
>
|
||||
</mat-checkbox>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let room" id="select-cell-{{ room.roomId }}">
|
||||
@if (canSelectRoom(room)) {
|
||||
<mat-checkbox
|
||||
[checked]="isRoomSelected(room)"
|
||||
(change)="toggleRoomSelection(room)"
|
||||
[disabled]="loading"
|
||||
id="select-room-{{ room.roomId }}"
|
||||
>
|
||||
</mat-checkbox>
|
||||
}
|
||||
</td>
|
||||
</ng-container>
|
||||
}
|
||||
|
||||
<!-- Room Name Column -->
|
||||
<ng-container matColumnDef="roomName">
|
||||
<th mat-header-cell *matHeaderCellDef class="room-header" id="room-name-header">Room Name</th>
|
||||
<td mat-cell *matCellDef="let room" class="room-cell" id="room-name-cell-{{ room.roomId }}">
|
||||
<div class="room-info" id="room-info-{{ room.roomId }}">
|
||||
<span class="room-name" id="room-name-{{ room.roomId }}">{{ room.roomName }}</span>
|
||||
<span class="room-id" id="room-id-{{ room.roomId }}">{{ room.roomId }}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Status Column -->
|
||||
<ng-container matColumnDef="status">
|
||||
<th mat-header-cell *matHeaderCellDef id="status-header">Status</th>
|
||||
<td mat-cell *matCellDef="let room" id="status-cell-{{ room.roomId }}">
|
||||
<div
|
||||
class="status-badge"
|
||||
[style.color]="getStatusColor(room)"
|
||||
[matTooltip]="getStatusTooltip(room)"
|
||||
id="status-badge-{{ room.roomId }}"
|
||||
>
|
||||
<mat-icon
|
||||
class="status-icon"
|
||||
[style.color]="getStatusColor(room)"
|
||||
id="status-icon-{{ room.roomId }}"
|
||||
>
|
||||
{{ getStatusIcon(room) }}
|
||||
</mat-icon>
|
||||
<span class="status-label" id="status-label-{{ room.roomId }}">{{
|
||||
getRoomStatus(room)
|
||||
}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Creation Date Column -->
|
||||
<ng-container matColumnDef="creationDate">
|
||||
<th mat-header-cell *matHeaderCellDef id="creation-date-header">Created</th>
|
||||
<td mat-cell *matCellDef="let room" id="creation-date-cell-{{ room.roomId }}">
|
||||
@if (room.creationDate) {
|
||||
<div class="date-info" id="date-info-{{ room.roomId }}">
|
||||
<span class="date" id="creation-date-{{ room.roomId }}">{{
|
||||
room.creationDate | date: 'mediumDate'
|
||||
}}</span>
|
||||
<span class="time" id="creation-time-{{ room.roomId }}">{{
|
||||
room.creationDate | date: 'shortTime'
|
||||
}}</span>
|
||||
</div>
|
||||
} @else {
|
||||
<span class="no-data" id="no-creation-date-{{ room.roomId }}">-</span>
|
||||
}
|
||||
</td>
|
||||
</ng-container>
|
||||
}
|
||||
|
||||
<!-- Room Name Column -->
|
||||
<ng-container matColumnDef="roomName">
|
||||
<th mat-header-cell *matHeaderCellDef class="room-header" id="room-name-header">Room Name</th>
|
||||
<td mat-cell *matCellDef="let room" class="room-cell" id="room-name-cell-{{ room.roomId }}">
|
||||
<div class="room-info" id="room-info-{{ room.roomId }}">
|
||||
<span class="room-name" id="room-name-{{ room.roomId }}">{{ room.roomName }}</span>
|
||||
<span class="room-id" id="room-id-{{ room.roomId }}">{{ room.roomId }}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Status Column -->
|
||||
<ng-container matColumnDef="status">
|
||||
<th mat-header-cell *matHeaderCellDef id="status-header">Status</th>
|
||||
<td mat-cell *matCellDef="let room" id="status-cell-{{ room.roomId }}">
|
||||
<div
|
||||
class="status-badge"
|
||||
[style.color]="getStatusColor(room)"
|
||||
[matTooltip]="getStatusTooltip(room)"
|
||||
id="status-badge-{{ room.roomId }}"
|
||||
>
|
||||
<mat-icon
|
||||
class="status-icon"
|
||||
[style.color]="getStatusColor(room)"
|
||||
id="status-icon-{{ room.roomId }}"
|
||||
>
|
||||
{{ getStatusIcon(room) }}
|
||||
</mat-icon>
|
||||
<span class="status-label" id="status-label-{{ room.roomId }}">{{ getRoomStatus(room) }}</span>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Creation Date Column -->
|
||||
<ng-container matColumnDef="creationDate">
|
||||
<th mat-header-cell *matHeaderCellDef id="creation-date-header">Created</th>
|
||||
<td mat-cell *matCellDef="let room" id="creation-date-cell-{{ room.roomId }}">
|
||||
@if (room.creationDate) {
|
||||
<div class="date-info" id="date-info-{{ room.roomId }}">
|
||||
<span class="date" id="creation-date-{{ room.roomId }}">{{
|
||||
room.creationDate | date: 'mediumDate'
|
||||
}}</span>
|
||||
<span class="time" id="creation-time-{{ room.roomId }}">{{
|
||||
room.creationDate | date: 'shortTime'
|
||||
}}</span>
|
||||
</div>
|
||||
} @else {
|
||||
<span class="no-data" id="no-creation-date-{{ room.roomId }}">-</span>
|
||||
}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Auto Deletion Column -->
|
||||
<ng-container matColumnDef="autoDeletion">
|
||||
<th mat-header-cell *matHeaderCellDef id="auto-deletion-header">Auto Deletion</th>
|
||||
<td mat-cell *matCellDef="let room" id="auto-deletion-cell-{{ room.roomId }}">
|
||||
<div class="auto-deletion-content" id="auto-deletion-content-{{ room.roomId }}">
|
||||
<div class="auto-deletion-info" id="auto-deletion-info-{{ room.roomId }}">
|
||||
@if (hasAutoDeletion(room)) {
|
||||
<div
|
||||
class="deletion-badge"
|
||||
[ngClass]="getAutoDeletionClass(room)"
|
||||
[matTooltip]="getAutoDeletionTooltip(room)"
|
||||
id="deletion-badge-{{ room.roomId }}"
|
||||
>
|
||||
<mat-icon
|
||||
class="deletion-icon material-symbols-outlined"
|
||||
id="deletion-icon-{{ room.roomId }}"
|
||||
>{{ getAutoDeletionIcon(room) }}</mat-icon
|
||||
<!-- Auto Deletion Column -->
|
||||
<ng-container matColumnDef="autoDeletion">
|
||||
<th mat-header-cell *matHeaderCellDef id="auto-deletion-header">Auto Deletion</th>
|
||||
<td mat-cell *matCellDef="let room" id="auto-deletion-cell-{{ room.roomId }}">
|
||||
<div class="auto-deletion-content" id="auto-deletion-content-{{ room.roomId }}">
|
||||
<div class="auto-deletion-info" id="auto-deletion-info-{{ room.roomId }}">
|
||||
@if (hasAutoDeletion(room)) {
|
||||
<div
|
||||
class="deletion-badge"
|
||||
[ngClass]="getAutoDeletionClass(room)"
|
||||
[matTooltip]="getAutoDeletionTooltip(room)"
|
||||
id="deletion-badge-{{ room.roomId }}"
|
||||
>
|
||||
<span class="deletion-text" id="deletion-text-{{ room.roomId }}">{{
|
||||
getAutoDeletionStatus(room)
|
||||
}}</span>
|
||||
</div>
|
||||
<mat-icon
|
||||
class="deletion-icon material-symbols-outlined"
|
||||
id="deletion-icon-{{ room.roomId }}"
|
||||
>{{ getAutoDeletionIcon(room) }}</mat-icon
|
||||
>
|
||||
<span class="deletion-text" id="deletion-text-{{ room.roomId }}">{{
|
||||
getAutoDeletionStatus(room)
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
@if (!room.markedForDeletion) {
|
||||
<div class="deletion-date-time" id="deletion-date-time-{{ room.roomId }}">
|
||||
<div class="deletion-date" id="deletion-date-container-{{ room.roomId }}">
|
||||
<span class="date" id="deletion-date-{{ room.roomId }}">{{
|
||||
room.autoDeletionDate | date: 'mediumDate'
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="deletion-time" id="deletion-time-container-{{ room.roomId }}">
|
||||
<span class="time" id="deletion-time-{{ room.roomId }}">{{
|
||||
room.autoDeletionDate | date: 'shortTime'
|
||||
}}</span>
|
||||
@if (!room.markedForDeletion) {
|
||||
<div class="deletion-date-time" id="deletion-date-time-{{ room.roomId }}">
|
||||
<div class="deletion-date" id="deletion-date-container-{{ room.roomId }}">
|
||||
<span class="date" id="deletion-date-{{ room.roomId }}">{{
|
||||
room.autoDeletionDate | date: 'mediumDate'
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="deletion-time" id="deletion-time-container-{{ room.roomId }}">
|
||||
<span class="time" id="deletion-time-{{ room.roomId }}">{{
|
||||
room.autoDeletionDate | date: 'shortTime'
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
} @else {
|
||||
<div
|
||||
class="deletion-badge"
|
||||
[ngClass]="getAutoDeletionClass(room)"
|
||||
[matTooltip]="getAutoDeletionTooltip(room)"
|
||||
id="deletion-badge-{{ room.roomId }}"
|
||||
>
|
||||
<mat-icon
|
||||
class="deletion-icon material-symbols-outlined"
|
||||
id="deletion-icon-{{ room.roomId }}"
|
||||
>{{ getAutoDeletionIcon(room) }}</mat-icon
|
||||
>
|
||||
<span class="deletion-text" id="deletion-text-{{ room.roomId }}">{{
|
||||
getAutoDeletionStatus(room)
|
||||
}}</span>
|
||||
</div>
|
||||
}
|
||||
} @else {
|
||||
<div
|
||||
class="deletion-badge"
|
||||
[ngClass]="getAutoDeletionClass(room)"
|
||||
[matTooltip]="getAutoDeletionTooltip(room)"
|
||||
id="deletion-badge-{{ room.roomId }}"
|
||||
>
|
||||
<mat-icon
|
||||
class="deletion-icon material-symbols-outlined"
|
||||
id="deletion-icon-{{ room.roomId }}"
|
||||
>{{ getAutoDeletionIcon(room) }}</mat-icon
|
||||
>
|
||||
<span class="deletion-text" id="deletion-text-{{ room.roomId }}">{{
|
||||
getAutoDeletionStatus(room)
|
||||
}}</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Actions Column -->
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef class="actions-header" id="actions-header">Actions</th>
|
||||
<td mat-cell *matCellDef="let room" class="actions-cell" id="actions-cell-{{ room.roomId }}">
|
||||
<div class="action-buttons" id="action-buttons-{{ room.roomId }}">
|
||||
<!-- Open Room Button -->
|
||||
@if (canOpenRoom(room)) {
|
||||
<button
|
||||
mat-icon-button
|
||||
matTooltip="Open Room"
|
||||
(click)="openRoom(room)"
|
||||
[disabled]="loading"
|
||||
class="primary-action"
|
||||
id="open-room-btn-{{ room.roomId }}"
|
||||
>
|
||||
<mat-icon>open_in_new</mat-icon>
|
||||
</button>
|
||||
}
|
||||
|
||||
<!-- Settings Button -->
|
||||
@if (canEditRoom(room)) {
|
||||
<button
|
||||
mat-icon-button
|
||||
matTooltip="Room Settings"
|
||||
(click)="editRoom(room)"
|
||||
[disabled]="loading"
|
||||
id="edit-room-btn-{{ room.roomId }}"
|
||||
>
|
||||
<mat-icon class="ov-settings-icon">settings</mat-icon>
|
||||
</button>
|
||||
}
|
||||
|
||||
<!-- More Actions Menu -->
|
||||
<button
|
||||
mat-icon-button
|
||||
[matMenuTriggerFor]="actionsMenu"
|
||||
matTooltip="More Actions"
|
||||
[disabled]="loading"
|
||||
id="more-actions-btn-{{ room.roomId }}"
|
||||
>
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
|
||||
<mat-menu #actionsMenu="matMenu" id="actions-menu-{{ room.roomId }}">
|
||||
<button
|
||||
mat-menu-item
|
||||
(click)="viewRecordings(room)"
|
||||
id="view-recordings-btn-{{ room.roomId }}"
|
||||
>
|
||||
<mat-icon class="ov-recording-icon">video_library</mat-icon>
|
||||
<span>View Recordings</span>
|
||||
</button>
|
||||
|
||||
@if (!room.markedForDeletion) {
|
||||
<!-- Actions Column -->
|
||||
<ng-container matColumnDef="actions">
|
||||
<th mat-header-cell *matHeaderCellDef class="actions-header" id="actions-header">Actions</th>
|
||||
<td mat-cell *matCellDef="let room" class="actions-cell" id="actions-cell-{{ room.roomId }}">
|
||||
<div class="action-buttons" id="action-buttons-{{ room.roomId }}">
|
||||
<!-- Open Room Button -->
|
||||
@if (canOpenRoom(room)) {
|
||||
<button
|
||||
mat-menu-item
|
||||
(click)="copyModeratorLink(room)"
|
||||
id="copy-moderator-link-btn-{{ room.roomId }}"
|
||||
mat-icon-button
|
||||
matTooltip="Open Room"
|
||||
(click)="openRoom(room)"
|
||||
[disabled]="loading"
|
||||
class="primary-action"
|
||||
id="open-room-btn-{{ room.roomId }}"
|
||||
>
|
||||
<mat-icon>content_copy</mat-icon>
|
||||
<span>Copy Moderator Link</span>
|
||||
</button>
|
||||
<button
|
||||
mat-menu-item
|
||||
(click)="copySpeakerLink(room)"
|
||||
id="copy-speaker-link-btn-{{ room.roomId }}"
|
||||
>
|
||||
<mat-icon>content_copy</mat-icon>
|
||||
<span>Copy Speaker Link</span>
|
||||
</button>
|
||||
|
||||
<mat-divider id="actions-divider-{{ room.roomId }}"></mat-divider>
|
||||
<button
|
||||
mat-menu-item
|
||||
(click)="deleteRoom(room)"
|
||||
class="delete-action"
|
||||
id="delete-room-btn-{{ room.roomId }}"
|
||||
>
|
||||
<mat-icon>delete</mat-icon>
|
||||
<span>Delete room</span>
|
||||
<mat-icon>open_in_new</mat-icon>
|
||||
</button>
|
||||
}
|
||||
</mat-menu>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns" id="table-header-row"></tr>
|
||||
<tr
|
||||
mat-row
|
||||
*matRowDef="let row; columns: displayedColumns"
|
||||
[class.selected-row]="isRoomSelected(row)"
|
||||
[class.marked-for-deletion]="row.markedForDeletion"
|
||||
id="table-row-{{ row.roomId }}"
|
||||
></tr>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Settings Button -->
|
||||
@if (canEditRoom(room)) {
|
||||
<button
|
||||
mat-icon-button
|
||||
matTooltip="Room Settings"
|
||||
(click)="editRoom(room)"
|
||||
[disabled]="loading"
|
||||
id="edit-room-btn-{{ room.roomId }}"
|
||||
>
|
||||
<mat-icon class="ov-settings-icon">settings</mat-icon>
|
||||
</button>
|
||||
}
|
||||
|
||||
<!-- Load More Section -->
|
||||
@if (showLoadMore) {
|
||||
<div class="load-more-container" id="load-more-container">
|
||||
<button mat-button class="load-more-btn" (click)="loadMore.emit()" [disabled]="loading" id="load-more-btn">
|
||||
<mat-icon>expand_more</mat-icon>
|
||||
<span>Load More Rooms</span>
|
||||
</button>
|
||||
<!-- More Actions Menu -->
|
||||
<button
|
||||
mat-icon-button
|
||||
[matMenuTriggerFor]="actionsMenu"
|
||||
matTooltip="More Actions"
|
||||
[disabled]="loading"
|
||||
id="more-actions-btn-{{ room.roomId }}"
|
||||
>
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
|
||||
<mat-menu #actionsMenu="matMenu" id="actions-menu-{{ room.roomId }}">
|
||||
<button
|
||||
mat-menu-item
|
||||
(click)="viewRecordings(room)"
|
||||
id="view-recordings-btn-{{ room.roomId }}"
|
||||
>
|
||||
<mat-icon class="ov-recording-icon">video_library</mat-icon>
|
||||
<span>View Recordings</span>
|
||||
</button>
|
||||
|
||||
@if (!room.markedForDeletion) {
|
||||
<button
|
||||
mat-menu-item
|
||||
(click)="copyModeratorLink(room)"
|
||||
id="copy-moderator-link-btn-{{ room.roomId }}"
|
||||
>
|
||||
<mat-icon>content_copy</mat-icon>
|
||||
<span>Copy Moderator Link</span>
|
||||
</button>
|
||||
<button
|
||||
mat-menu-item
|
||||
(click)="copySpeakerLink(room)"
|
||||
id="copy-speaker-link-btn-{{ room.roomId }}"
|
||||
>
|
||||
<mat-icon>content_copy</mat-icon>
|
||||
<span>Copy Speaker Link</span>
|
||||
</button>
|
||||
|
||||
<mat-divider id="actions-divider-{{ room.roomId }}"></mat-divider>
|
||||
<button
|
||||
mat-menu-item
|
||||
(click)="deleteRoom(room)"
|
||||
class="delete-action"
|
||||
id="delete-room-btn-{{ room.roomId }}"
|
||||
>
|
||||
<mat-icon>delete</mat-icon>
|
||||
<span>Delete room</span>
|
||||
</button>
|
||||
}
|
||||
</mat-menu>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns" id="table-header-row"></tr>
|
||||
<tr
|
||||
mat-row
|
||||
*matRowDef="let row; columns: displayedColumns"
|
||||
[class.selected-row]="isRoomSelected(row)"
|
||||
[class.marked-for-deletion]="row.markedForDeletion"
|
||||
id="table-row-{{ row.roomId }}"
|
||||
></tr>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
} @else {
|
||||
<!-- Empty State -->
|
||||
<div class="no-rooms-state">
|
||||
<div class="empty-content">
|
||||
<h3>No rooms created yet</h3>
|
||||
<p>No rooms found. Create your first room to start hosting meetings and manage your video conferences.</p>
|
||||
|
||||
<div class="getting-started-actions">
|
||||
<button mat-button (click)="createRoom()" class="create-room-btn primary-button">
|
||||
<mat-icon>add</mat-icon>
|
||||
Create Your First Room
|
||||
<!-- Load More Section -->
|
||||
@if (showLoadMore) {
|
||||
<div class="load-more-container" id="load-more-container">
|
||||
<button
|
||||
mat-button
|
||||
class="load-more-btn"
|
||||
(click)="loadMoreRooms()"
|
||||
[disabled]="loading"
|
||||
id="load-more-btn"
|
||||
>
|
||||
<mat-icon>expand_more</mat-icon>
|
||||
<span>Load More Rooms</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
flex-direction: column;
|
||||
gap: var(--ov-meet-spacing-md);
|
||||
align-items: center;
|
||||
@extend .action-buttons;
|
||||
|
||||
.create-room-btn {
|
||||
@extend .refresh-btn;
|
||||
}
|
||||
|
||||
.clear-filters-btn {
|
||||
@extend .refresh-btn;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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() refresh = new EventEmitter<void>();
|
||||
@Output() loadMore = new EventEmitter<{ nameFilter: string; statusFilter: string }>();
|
||||
@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
|
||||
this.nameFilterControl.valueChanges.pipe(debounceTime(300), distinctUntilChanged()).subscribe((value) => {
|
||||
this.filterChange.emit({
|
||||
nameFilter: value || '',
|
||||
statusFilter: this.statusFilterControl.value || ''
|
||||
});
|
||||
// Set up initial filter values
|
||||
this.nameFilterControl.setValue(this.initialFilters.nameFilter);
|
||||
this.statusFilterControl.setValue(this.initialFilters.statusFilter);
|
||||
|
||||
// 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();
|
||||
});
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -1,27 +1,28 @@
|
||||
@if (isLoading) {
|
||||
@if (showLoadingSpinner) {
|
||||
<!-- Enhanced Loading State with delay -->
|
||||
<div class="ov-page-loading">
|
||||
<div class="loading-content">
|
||||
<div class="loading-header">
|
||||
<div class="loading-title">
|
||||
<mat-icon class="ov-room-icon loading-icon"> video_chat </mat-icon>
|
||||
<h1>Loading Rooms</h1>
|
||||
</div>
|
||||
<p class="loading-subtitle">Please wait while we fetch your rooms...</p>
|
||||
<!-- Loading State -->
|
||||
@if (isInitializing && showInitialLoader) {
|
||||
<div class="ov-page-loading">
|
||||
<div class="loading-content">
|
||||
<div class="loading-header">
|
||||
<div class="loading-title">
|
||||
<mat-icon class="ov-room-icon loading-icon">video_chat</mat-icon>
|
||||
<h1>Loading Rooms</h1>
|
||||
</div>
|
||||
<p class="loading-subtitle">Please wait while we fetch your rooms...</p>
|
||||
</div>
|
||||
|
||||
<div class="loading-spinner-container">
|
||||
<mat-spinner diameter="48"></mat-spinner>
|
||||
</div>
|
||||
<div class="loading-spinner-container">
|
||||
<mat-spinner diameter="48"></mat-spinner>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
} @else {
|
||||
</div>
|
||||
}
|
||||
|
||||
@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()"
|
||||
(refresh)="refreshRooms()"
|
||||
(loadMore)="loadMoreRooms($event)"
|
||||
(refresh)="refreshRooms($event)"
|
||||
(filterChange)="refreshRooms($event)"
|
||||
></ov-rooms-lists>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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() {
|
||||
this.isLoading = true;
|
||||
const delaySpinner = setTimeout(() => {
|
||||
this.showLoadingSpinner = true;
|
||||
private async loadRooms(filters?: { nameFilter: string; statusFilter: string }, refresh = false) {
|
||||
const delayLoader = setTimeout(() => {
|
||||
this.isLoading = 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
|
||||
const currentRooms = this.rooms();
|
||||
this.rooms.set([...currentRooms, ...response.rooms]);
|
||||
if (!refresh) {
|
||||
// Update rooms list
|
||||
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() {
|
||||
this.rooms.set([]);
|
||||
this.nextPageToken = undefined;
|
||||
this.hasMoreRooms = false;
|
||||
await this.loadRooms();
|
||||
async refreshRooms(filters?: { nameFilter: string; statusFilter: string }) {
|
||||
await this.loadRooms(filters, true);
|
||||
}
|
||||
|
||||
private async createRoom() {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user