lfx-v2-ui/apps/lfx-one/src/app/modules/committees/components/member-card/member-card.component.html at 8a8f919054c7cdb25fcb9ed1b665480430acebb2 · 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!-- Copyright The Linux Foundation and each contributor to LFX. -->
<!-- SPDX-License-Identifier: MIT -->

<div class="bg-white rounded-lg border border-gray-200 shadow-sm hover:shadow-md transition-shadow p-6 h-full flex flex-col">
  <!-- Header with Avatar and Menu -->
  <div class="flex items-start justify-between mb-4">
    <div class="flex items-center gap-4">
      <lfx-avatar [label]="initials()" [size]="'large'" [shape]="'circle'" styleClass="bg-blue-50 border border-gray-200" [ariaLabel]="fullName() + ' avatar'">
      </lfx-avatar>
      <div class="flex flex-col">
        <h3 class="text-lg font-semibold text-gray-900">{{ fullName() | titlecase }}</h3>
        @if (member().job_title) {
          <p class="text-sm text-gray-600">{{ member().job_title }}</p>
        }
      </div>
    </div>
    <div>
      <lfx-menu #actionMenu [model]="actionMenuItems()" [popup]="true" appendTo="body"></lfx-menu>
      <lfx-button
        icon="fa-light fa-ellipsis-vertical"
        [text]="true"
        [rounded]="true"
        size="small"
        severity="secondary"
        (onClick)="handleMenuToggle($event, actionMenu)">
      </lfx-button>
    </div>
  </div>

  <!-- Contact Information -->
  <div class="flex flex-col gap-2 mb-4 flex-1">
    @if (member().email) {
      <div class="flex items-center gap-2">
        <i class="fa-light fa-envelope text-gray-400 w-4"></i>
        <a [href]="'mailto:' + member().email" class="text-sm text-primary hover:text-primary-600 hover:underline">
          {{ member().email }}
        </a>
      </div>
    }

    @if (member().linkedin_profile) {
      <div class="flex items-center gap-2">
        <i class="fa-brands fa-linkedin text-gray-400 w-4"></i>
        <a [href]="member().linkedin_profile" rel="noopener noreferrer" target="_blank" class="text-sm text-primary hover:text-primary-600 hover:underline">
          LinkedIn Profile
        </a>
      </div>
    }

    @if (member().organization) {
      <div class="flex items-center gap-2">
        <i class="fa-light fa-building text-gray-400 w-4"></i>
        @if (member().organization?.website) {
          <a
            [href]="member().organization?.website"
            rel="noopener noreferrer"
            target="_blank"
            class="text-sm text-primary hover:text-primary-600 hover:underline">
            {{ member().organization?.name || 'Not Set' }}
          </a>
        } @else {
          <span class="text-sm text-gray-600">{{ member().organization?.name || 'Not Set' }}</span>
        }
      </div>
    }
  </div>

  @if (enableVoting()) {
    <!-- Badges Section -->
    <div class="flex flex-wrap gap-2 pt-4 border-t border-gray-100">
      <lfx-badge [value]="member().role?.name || 'None'" [severity]="roleBadgeSeverity()" icon="fa-light fa-user-tie" pTooltip="Committee Role"> </lfx-badge>

      <lfx-badge
        [value]="member().voting?.status || 'Observer'"
        [severity]="votingStatusBadgeSeverity()"
        icon="fa-light fa-check-to-slot"
        pTooltip="Voting Status">
      </lfx-badge>
    </div>

    <!-- Date Information -->
    @if (member().role?.start_date || member().role?.end_date) {
      <div class="mt-3 pt-3 border-t border-gray-100 text-xs text-gray-500">
        @if (member().role?.start_date) {
          <div class="flex items-center gap-1">
            <i class="fa-light fa-calendar-check text-gray-400"></i>
            <span>Role since {{ member().role?.start_date | date: 'MMM d, y' }}</span>
          </div>
        }
        @if (member().role?.end_date) {
          <div class="flex items-center gap-1">
            <i class="fa-light fa-calendar-xmark text-gray-400"></i>
            <span>Role until {{ member().role?.end_date | date: 'MMM d, y' }}</span>
          </div>
        }
      </div>
    }
  }
</div>