lfx-v2-ui/apps/lfx-one/src/app/modules/dashboards/components/my-meetings/my-meetings.component.html at bc10ef11a41ace7d1223a735dfb7d727e109e7aa · linuxfoundation/lfx-v2-ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!-- Copyright The Linux Foundation and each contributor to LFX. -->
<!-- SPDX-License-Identifier: MIT -->

<section class="flex flex-col flex-1" data-testid="dashboard-my-meetings-section">
  <!-- Header -->
  <div class="flex items-center justify-between mb-4">
    <h2 class="font-display font-semibold text-gray-900">My Meetings</h2>
    <lfx-button
      label="View All"
      icon="fa-light fa-chevron-right"
      iconPos="right"
      (onClick)="handleViewAll()"
      styleClass="!text-sm !font-normal"
      [text]="true"
      size="small"
      data-testid="dashboard-my-meetings-view-all" />
  </div>

  <!-- Scrollable Content -->
  <div class="flex flex-col flex-1">
    <div class="flex flex-col gap-6 overflow-scroll max-h-[30rem]" data-testid="dashboard-my-meetings-list">
      @if (todayMeetings().length > 0 || upcomingMeetings().length > 0) {
        <!-- TODAY Section - only show if there are meetings today -->
        @if (todayMeetings().length > 0) {
          <div>
            <h4 class="text-xs font-medium text-gray-500 mb-3 uppercase tracking-wide">Today</h4>
            <div class="flex flex-col gap-3">
              @for (item of todayMeetings(); track item.meeting.uid) {
                <lfx-dashboard-meeting-card
                  [meeting]="item.meeting"
                  [occurrence]="item.occurrence"
                  (onSeeMeeting)="handleSeeMeeting($event)"
                  [attr.data-testid]="'dashboard-my-meetings-today-item-' + item.meeting.uid" />
              }
            </div>
          </div>
        }

        <!-- UPCOMING Section - only show if there are upcoming meetings -->
        @if (upcomingMeetings().length > 0) {
          <div>
            <h4 class="text-xs font-medium text-gray-500 mb-3 uppercase tracking-wide">Upcoming</h4>
            <div class="flex flex-col gap-3">
              @for (item of upcomingMeetings(); track item.meeting.uid) {
                <lfx-dashboard-meeting-card
                  [meeting]="item.meeting"
                  [occurrence]="item.occurrence"
                  (onSeeMeeting)="handleSeeMeeting($event)"
                  [attr.data-testid]="'dashboard-my-meetings-upcoming-item-' + item.meeting.uid" />
              }
            </div>
          </div>
        }
      } @else {
        <!-- Global empty state - only shows when no meetings at all -->
        <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">
          No meetings scheduled
        </div>
      }
    </div>
  </div>
</section>