Skip to content

Commit 2f2fd9b

Browse files
asithadeasithade
authored
feat(dashboard): enhance meeting card UI and add loading states (#141)
* feat(dashboard): enhance meeting card UI and add loading states LFXV2-702 - Add colored left border to meeting cards matching meeting type - Implement join URL pre-fetching for today's meetings - Move feature icons from header to under title with time - Update attachment icon styling with blue theme - Add skeleton loading to My Meetings component - Fix button component ngClass and type attribute support Signed-off-by: Asitha de Silva <[email protected]> * refactor(shared): centralize meeting type configurations and interfaces - Move MeetingTypeConfig and related constants to shared package - Add comprehensive meeting type color mappings with all shade variations - Move MeetingTypeBadge interface to shared library - Move MeetingWithOccurrence interface to shared library - Eliminate duplicate switch statements in dashboard-meeting-card component - Update my-meetings component to use shared MeetingWithOccurrence interface LFXV2-702 Signed-off-by: Asitha de Silva <[email protected]> --------- Signed-off-by: Asitha de Silva <[email protected]>
1 parent bb81511 commit 2f2fd9b

File tree

8 files changed

+333
-174
lines changed

8 files changed

+333
-174
lines changed

‎apps/lfx-one/src/app/modules/dashboards/components/my-meetings/my-meetings.component.html‎

Lines changed: 40 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -18,45 +18,50 @@ <h2 class="font-display font-semibold text-gray-900">My Meetings</h2>
1818

1919
<!-- Scrollable Content -->
2020
<div class="flex flex-col flex-1">
21-
<div class="flex flex-col gap-6 overflow-scroll max-h-[30rem]" data-testid="dashboard-my-meetings-list">
22-
@if (todayMeetings().length > 0 || upcomingMeetings().length > 0) {
23-
<!-- TODAY Section - only show if there are meetings today -->
24-
@if (todayMeetings().length > 0) {
25-
<div>
26-
<h4 class="text-xs font-medium text-gray-500 mb-3 uppercase tracking-wide">Today</h4>
27-
<div class="flex flex-col gap-3">
28-
@for (item of todayMeetings(); track item.meeting.uid) {
29-
<lfx-dashboard-meeting-card
30-
[meeting]="item.meeting"
31-
[occurrence]="item.occurrence"
32-
(onSeeMeeting)="handleSeeMeeting($event)"
33-
[attr.data-testid]="'dashboard-my-meetings-today-item-' + item.meeting.uid" />
34-
}
21+
@if (loading()) {
22+
<div class="flex flex-col gap-3" data-testid="dashboard-my-meetings-loading">
23+
<p-skeleton width="100%" height="140px"></p-skeleton>
24+
<p-skeleton width="100%" height="140px"></p-skeleton>
25+
</div>
26+
} @else {
27+
<div class="flex flex-col gap-6 overflow-scroll max-h-[30rem]" data-testid="dashboard-my-meetings-list">
28+
@if (todayMeetings().length > 0 || upcomingMeetings().length > 0) {
29+
<!-- TODAY Section - only show if there are meetings today -->
30+
@if (todayMeetings().length > 0) {
31+
<div>
32+
<h4 class="text-xs font-medium text-gray-500 mb-3 uppercase tracking-wide">Today</h4>
33+
<div class="flex flex-col gap-3">
34+
@for (item of todayMeetings(); track item.meeting.uid) {
35+
<lfx-dashboard-meeting-card
36+
[meeting]="item.meeting"
37+
[occurrence]="item.occurrence"
38+
[attr.data-testid]="'dashboard-my-meetings-today-item-' + item.meeting.uid" />
39+
}
40+
</div>
3541
</div>
36-
</div>
37-
}
42+
}
3843

39-
<!-- UPCOMING Section - only show if there are upcoming meetings -->
40-
@if (upcomingMeetings().length > 0) {
41-
<div>
42-
<h4 class="text-xs font-medium text-gray-500 mb-3 uppercase tracking-wide">Upcoming</h4>
43-
<div class="flex flex-col gap-3">
44-
@for (item of upcomingMeetings(); track item.meeting.uid) {
45-
<lfx-dashboard-meeting-card
46-
[meeting]="item.meeting"
47-
[occurrence]="item.occurrence"
48-
(onSeeMeeting)="handleSeeMeeting($event)"
49-
[attr.data-testid]="'dashboard-my-meetings-upcoming-item-' + item.meeting.uid" />
50-
}
44+
<!-- UPCOMING Section - only show if there are upcoming meetings -->
45+
@if (upcomingMeetings().length > 0) {
46+
<div>
47+
<h4 class="text-xs font-medium text-gray-500 mb-3 uppercase tracking-wide">Upcoming</h4>
48+
<div class="flex flex-col gap-3">
49+
@for (item of upcomingMeetings(); track item.meeting.uid) {
50+
<lfx-dashboard-meeting-card
51+
[meeting]="item.meeting"
52+
[occurrence]="item.occurrence"
53+
[attr.data-testid]="'dashboard-my-meetings-upcoming-item-' + item.meeting.uid" />
54+
}
55+
</div>
5156
</div>
57+
}
58+
} @else {
59+
<!-- Global empty state - only shows when no meetings at all -->
60+
<div class="text-xs text-gray-500 py-8 text-center border-2 border-dashed border-gray-300 rounded-lg" data-testid="dashboard-my-meetings-empty">
61+
No meetings scheduled
5262
</div>
5363
}
54-
} @else {
55-
<!-- Global empty state - only shows when no meetings at all -->
56-
<div class="text-xs text-gray-500 py-8 text-center border-2 border-dashed border-gray-300 rounded-lg" data-testid="dashboard-my-meetings-empty">
57-
No meetings scheduled
58-
</div>
59-
}
60-
</div>
64+
</div>
65+
}
6166
</div>
6267
</section>

‎apps/lfx-one/src/app/modules/dashboards/components/my-meetings/my-meetings.component.ts‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,29 @@
22
// SPDX-License-Identifier: MIT
33

44
import { CommonModule } from '@angular/common';
5-
import { Component, computed, inject } from '@angular/core';
5+
import { Component, computed, inject, signal } from '@angular/core';
66
import { toSignal } from '@angular/core/rxjs-interop';
77
import { Router } from '@angular/router';
88
import { MeetingService } from '@app/shared/services/meeting.service';
99
import { ButtonComponent } from '@components/button/button.component';
1010
import { DashboardMeetingCardComponent } from '@components/dashboard-meeting-card/dashboard-meeting-card.component';
11+
import { SkeletonModule } from 'primeng/skeleton';
12+
import { finalize } from 'rxjs';
1113

12-
import type { Meeting, MeetingOccurrence } from '@lfx-one/shared/interfaces';
13-
14-
interface MeetingWithOccurrence {
15-
meeting: Meeting;
16-
occurrence: MeetingOccurrence;
17-
sortTime: number;
18-
}
14+
import type { MeetingWithOccurrence } from '@lfx-one/shared/interfaces';
1915

2016
@Component({
2117
selector: 'lfx-my-meetings',
2218
standalone: true,
23-
imports: [CommonModule, DashboardMeetingCardComponent, ButtonComponent],
19+
imports: [CommonModule, DashboardMeetingCardComponent, ButtonComponent, SkeletonModule],
2420
templateUrl: './my-meetings.component.html',
2521
styleUrl: './my-meetings.component.scss',
2622
})
2723
export class MyMeetingsComponent {
2824
private readonly meetingService = inject(MeetingService);
2925
private readonly router = inject(Router);
30-
private readonly allMeetings = toSignal(this.meetingService.getMeetings(), { initialValue: [] });
26+
protected readonly loading = signal(true);
27+
private readonly allMeetings = toSignal(this.meetingService.getMeetings().pipe(finalize(() => this.loading.set(false))), { initialValue: [] });
3128

3229
protected readonly todayMeetings = computed<MeetingWithOccurrence[]>(() => {
3330
const now = new Date();
@@ -131,10 +128,6 @@ export class MyMeetingsComponent {
131128
return meetings.sort((a, b) => a.sortTime - b.sortTime).slice(0, 5);
132129
});
133130

134-
public handleSeeMeeting(meetingId: string): void {
135-
this.router.navigate(['/meetings', meetingId]);
136-
}
137-
138131
public handleViewAll(): void {
139132
this.router.navigate(['/meetings']);
140133
}

‎apps/lfx-one/src/app/shared/components/button/button.component.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
@if (href()) {
55
<a
66
pButton
7+
[type]="type()"
78
[href]="href()"
89
[target]="target()"
910
[rel]="rel()"
@@ -22,7 +23,8 @@
2223
[icon]="icon()!"
2324
[pTooltip]="tooltip()"
2425
[tooltipPosition]="tooltipPosition()"
25-
[style]="style()">
26+
[style]="style()"
27+
[ngClass]="styleClass()">
2628
<ng-content></ng-content>
2729
</a>
2830
} @else {

‎apps/lfx-one/src/app/shared/components/dashboard-meeting-card/dashboard-meeting-card.component.html‎

Lines changed: 114 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -2,120 +2,143 @@
22
<!-- SPDX-License-Identifier: MIT -->
33

44
<!-- Card wrapper with border and shadow -->
5-
<div class="bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition-shadow" data-testid="dashboard-meeting-card">
5+
<div class="bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition-shadow relative" data-testid="dashboard-meeting-card">
6+
<!-- Colored left border overlay -->
7+
<div aria-hidden="true" class="absolute border border-l-4 border-solid inset-0 pointer-events-none rounded-xl" [ngClass]="borderColorClass()"></div>
68
<div class="p-4 space-y-3">
7-
<!-- Header with meeting type and feature icons -->
9+
<!-- Header with meeting type and project badges -->
10+
<div class="flex items-center gap-2 flex-wrap">
11+
<span class="text-xs px-2 py-1 font-medium rounded" [ngClass]="meetingTypeInfo().className" data-testid="dashboard-meeting-card-type-badge">
12+
{{ meetingTypeInfo().label }}
13+
</span>
14+
</div>
15+
16+
<!-- Meeting title with file icons -->
817
<div class="flex items-start justify-between gap-2">
9-
<div class="flex items-center gap-2 flex-wrap">
10-
<span [class]="meetingTypeInfo().className + ' text-xs px-2 py-1 font-medium rounded'" data-testid="dashboard-meeting-card-type-badge">
11-
{{ meetingTypeInfo().label }}
12-
</span>
13-
@if (meeting().project_name) {
14-
<span class="border border-gray-300 bg-white text-gray-700 text-xs px-2 py-1 font-medium rounded" data-testid="dashboard-meeting-card-project-badge">
15-
{{ meeting().project_name }}
18+
<div class="flex flex-col gap-1">
19+
<h4 class="line-clamp-2 text-sm leading-tight font-medium text-gray-900" data-testid="dashboard-meeting-card-title">
20+
{{ meetingTitle() }}
21+
</h4>
22+
<!-- Date/time with feature icons - directly under title -->
23+
<div class="flex items-center gap-2 flex-wrap mt-0.5">
24+
<span class="text-xs text-gray-600 whitespace-nowrap" data-testid="dashboard-meeting-card-time">
25+
{{ formattedTime() }}
1626
</span>
17-
}
18-
</div>
19-
<div class="flex items-center gap-1">
20-
@if (hasYoutubeUploads()) {
21-
<div
22-
class="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center"
23-
pTooltip="YouTube Auto-Upload Enabled"
24-
tooltipPosition="top"
25-
data-testid="dashboard-meeting-card-youtube-icon">
26-
<i class="fa-light fa-upload text-xs text-gray-800"></i>
27-
</div>
28-
}
29-
@if (hasRecording()) {
30-
<div
31-
class="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center"
32-
pTooltip="Recording Enabled"
33-
tooltipPosition="top"
34-
data-testid="dashboard-meeting-card-recording-icon">
35-
<i class="fa-light fa-video text-xs text-gray-800"></i>
36-
</div>
37-
}
38-
@if (hasTranscripts()) {
39-
<div
40-
class="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center"
41-
pTooltip="Transcripts Enabled"
42-
tooltipPosition="top"
43-
data-testid="dashboard-meeting-card-transcript-icon">
44-
<i class="fa-light fa-file-lines text-xs text-gray-800"></i>
45-
</div>
46-
}
47-
@if (hasAiSummary()) {
48-
<div
49-
class="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center"
50-
pTooltip="AI Summary Enabled"
51-
tooltipPosition="top"
52-
data-testid="dashboard-meeting-card-ai-icon">
53-
<i class="fa-light fa-sparkles text-xs text-gray-800"></i>
27+
<div class="flex items-center gap-1">
28+
@if (hasYoutubeUploads()) {
29+
<div
30+
class="flex p-1 hover:bg-gray-100 rounded transition-colors"
31+
pTooltip="YouTube Auto-Upload Enabled"
32+
tooltipPosition="top"
33+
data-testid="dashboard-meeting-card-youtube-icon">
34+
<i class="fa-light fa-upload text-xs text-gray-700"></i>
35+
</div>
36+
}
37+
@if (hasRecording()) {
38+
<div
39+
class="flex p-1 hover:bg-gray-100 rounded transition-colors"
40+
pTooltip="Recording Enabled"
41+
tooltipPosition="top"
42+
data-testid="dashboard-meeting-card-recording-icon">
43+
<i class="fa-light fa-video text-xs text-gray-700"></i>
44+
</div>
45+
}
46+
@if (hasTranscripts()) {
47+
<div
48+
class="flex p-1 hover:bg-gray-100 rounded transition-colors"
49+
pTooltip="Transcripts Enabled"
50+
tooltipPosition="top"
51+
data-testid="dashboard-meeting-card-transcript-icon">
52+
<i class="fa-light fa-file-lines text-xs text-gray-700"></i>
53+
</div>
54+
}
55+
@if (hasAiSummary()) {
56+
<div
57+
class="flex p-1 hover:bg-gray-100 rounded transition-colors"
58+
pTooltip="AI Summary Enabled"
59+
tooltipPosition="top"
60+
data-testid="dashboard-meeting-card-ai-icon">
61+
<i class="fa-light fa-sparkles text-xs text-gray-700"></i>
62+
</div>
63+
}
64+
@if (!isPrivate()) {
65+
<div
66+
class="flex p-1 hover:bg-gray-100 rounded transition-colors"
67+
pTooltip="Public Meeting"
68+
tooltipPosition="top"
69+
data-testid="dashboard-meeting-card-public-icon">
70+
<i class="fa-light fa-users text-xs text-gray-700"></i>
71+
</div>
72+
}
5473
</div>
55-
}
56-
@if (!isPrivate()) {
57-
<div
58-
class="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center"
59-
pTooltip="Public Meeting"
60-
tooltipPosition="top"
61-
data-testid="dashboard-meeting-card-public-icon">
62-
<i class="fa-light fa-users text-xs text-gray-800"></i>
63-
</div>
64-
}
74+
</div>
6575
</div>
66-
</div>
67-
68-
<!-- Meeting title -->
69-
<div class="flex items-start justify-between gap-2">
70-
<h4 class="line-clamp-2 text-sm leading-5 flex-1 font-medium text-gray-900" data-testid="dashboard-meeting-card-title">
71-
{{ meetingTitle() }}
72-
</h4>
7376
@if (attachments().length > 0) {
7477
<div class="flex items-center gap-1 flex-shrink-0 mt-0.5">
7578
@for (attachment of attachments(); track attachment.id; let index = $index) {
7679
<a
7780
[href]="attachment.file_url"
7881
target="_blank"
7982
rel="noopener noreferrer"
80-
class="w-6 h-6 rounded bg-gray-100 flex items-center justify-center hover:bg-gray-200 transition-colors"
83+
class="w-6 h-6 rounded bg-blue-50 flex items-center justify-center hover:bg-blue-100 transition-colors cursor-pointer"
8184
[attr.data-testid]="'dashboard-meeting-card-file-icon-' + (index + 1)"
8285
[pTooltip]="attachment.file_name"
8386
tooltipPosition="top">
84-
<i [class]="(attachment.mime_type || '' | fileTypeIcon) + ' text-xs text-gray-500'"></i>
87+
<i class="text-xs text-primary" [ngClass]="attachment.mime_type || '' | fileTypeIcon"></i>
8588
</a>
8689
}
8790
</div>
8891
}
8992
</div>
9093

91-
<!-- Meeting time and actions -->
92-
<div class="space-y-2">
93-
<div class="flex items-center justify-between">
94-
<div class="flex items-center gap-1 text-gray-600" data-testid="dashboard-meeting-card-time">
95-
<i class="fa-light fa-clock text-xs"></i>
96-
<span class="text-xs">{{ formattedTime() }}</span>
97-
</div>
98-
<lfx-button
99-
label="See Meeting"
100-
icon="fa-light fa-arrow-right"
101-
iconPos="right"
102-
(onClick)="handleSeeMeeting()"
103-
styleClass="text-[#0094FF] hover:text-[#0094FF] hover:bg-blue-50 !h-7 !px-2 !text-xs !font-normal"
104-
[text]="true"
105-
data-testid="dashboard-meeting-card-see-button" />
106-
</div>
94+
<!-- Action buttons -->
95+
<div class="flex gap-2">
96+
<!-- See Meeting button - full width when alone, flex-1 when both buttons present -->
97+
<lfx-button
98+
class="w-full"
99+
label="See Meeting Details"
100+
[routerLink]="['/meetings', meeting().uid]"
101+
[queryParams]="{ password: meeting().password || '' }"
102+
target="_blank"
103+
type="button"
104+
rel="noopener noreferrer"
105+
[styleClass]="'border border-gray-300 text-gray-900 hover:bg-gray-50 h-8 text-sm font-medium w-full'"
106+
[outlined]="true"
107+
icon="fa-light fa-up-right-from-square text-xs"
108+
data-testid="dashboard-meeting-card-see-button" />
107109

108-
<!-- Join Meeting button for today's meetings -->
110+
<!-- Join Meeting button - right side when present -->
109111
@if (isTodayMeeting()) {
110-
<lfx-button
111-
label="Join Meeting"
112-
[routerLink]="['/meetings', meeting().uid]"
113-
[queryParams]="{ password: meeting().password || '' }"
114-
target="_blank"
115-
type="button"
116-
rel="noopener noreferrer"
117-
styleClass="w-full mt-1 bg-emerald-500 hover:bg-emerald-600 text-white h-7 text-xs font-semibold"
118-
data-testid="dashboard-meeting-card-join-button" />
112+
@if (joinUrl()) {
113+
<!-- Direct join URL available -->
114+
<lfx-button
115+
class="w-full"
116+
size="small"
117+
label="Join Meeting"
118+
[href]="joinUrl()!"
119+
target="_blank"
120+
type="button"
121+
rel="noopener noreferrer"
122+
icon="fa-light fa-video"
123+
styleClass="w-full bg-emerald-500 hover:bg-emerald-600 text-white h-8 text-sm font-semibold"
124+
data-testid="dashboard-meeting-card-join-button" />
125+
} @else {
126+
<!-- Fallback: redirect to join page -->
127+
<lfx-button
128+
type="button"
129+
size="small"
130+
class="w-full"
131+
label="Join Meeting"
132+
[routerLink]="['/meetings', meeting().uid]"
133+
[queryParams]="{ password: meeting().password || '' }"
134+
target="_blank"
135+
type="button"
136+
type="button"
137+
rel="noopener noreferrer"
138+
icon="fa-light fa-video"
139+
styleClass="w-full bg-emerald-500 hover:bg-emerald-600 text-white h-8 text-sm font-semibold"
140+
data-testid="dashboard-meeting-card-join-button" />
141+
}
119142
}
120143
</div>
121144
</div>

0 commit comments

Comments
 (0)