feat(events): add visa letter and travel fund application dialogs

apps/lfx-one/src/app/modules/events/components/events-top-bar/events-top-bar.component.ts

@@ -64,6 +64,23 @@ export class EventsTopBarComponent {
       .subscribe(() => {
         this.searchForm.get('foundation')?.setValue(null, { emitEvent: false });
       });
+
+    // Clear status when the available options change (e.g. switching between event tabs
+    // and visa/TF tabs which have different status sets).
+    toObservable(this.statusOptions)
+      .pipe(skip(1), takeUntilDestroyed())
+      .subscribe(() => {
+        this.searchForm.get('status')?.setValue(null);
+      });
+
+    // Clear role when the role filter is hidden so stale values don't persist.
+    toObservable(this.showRoleFilter)
+      .pipe(skip(1), takeUntilDestroyed())
+      .subscribe((show) => {
+        if (!show) {
+          this.searchForm.get('role')?.setValue(null);
+        }
+      });
   }
 
   public clearSearch(): void {

apps/lfx-one/src/app/modules/events/my-events-dashboard/components/about-me-form/about-me-form.component.html

@@ -0,0 +1,179 @@
+<!-- Copyright The Linux Foundation and each contributor to LFX. -->
+<!-- SPDX-License-Identifier: MIT -->
+
+<form [formGroup]="form" class="flex flex-col gap-4" data-testid="about-me-form">
+  <!-- Row 1: First Name | Last Name -->
+  <div class="grid grid-cols-2 gap-4">
+    <div class="flex flex-col gap-1">
+      <label for="about-me-first-name" class="text-sm font-medium text-gray-700"> First Name <span class="text-red-500">*</span> </label>
+      <lfx-input-text
+        [form]="form"
+        control="firstName"
+        id="about-me-first-name"
+        size="small"
+        placeholder="Jane"
+        styleClass="w-full"
+        dataTest="about-me-first-name" />
+      @if (form.get('firstName')?.invalid && form.get('firstName')?.touched) {
+        <span class="text-xs text-red-500" data-testid="about-me-first-name-error">First name is required</span>
+      }
+    </div>
+    <div class="flex flex-col gap-1">
+      <label for="about-me-last-name" class="text-sm font-medium text-gray-700"> Last Name <span class="text-red-500">*</span> </label>
+      <lfx-input-text
+        [form]="form"
+        control="lastName"
+        id="about-me-last-name"
+        size="small"
+        placeholder="Smith"
+        styleClass="w-full"
+        dataTest="about-me-last-name" />
+      @if (form.get('lastName')?.invalid && form.get('lastName')?.touched) {
+        <span class="text-xs text-red-500" data-testid="about-me-last-name-error">Last name is required</span>
+      }
+    </div>
+  </div>
+
+  <!-- Row 2: Email | Citizenship Country -->
+  <div class="grid grid-cols-2 gap-4">
+    <div class="flex flex-col gap-1">
+      <label for="about-me-email" class="text-sm font-medium text-gray-700">Email</label>
+      <lfx-input-text [form]="form" control="email" id="about-me-email" type="email" size="small" styleClass="w-full" dataTest="about-me-email" />
+    </div>
+    <div class="flex flex-col gap-1">
+      <label for="about-me-citizenship-country" class="text-sm font-medium text-gray-700">
+        What country are you a citizen of? <span class="text-red-500">*</span>
+      </label>
+      <lfx-select
+        [form]="form"
+        control="citizenshipCountry"
+        [options]="countryOptions"
+        placeholder="Select country"
+        [filter]="true"
+        styleClass="w-full"
+        dataTest="about-me-citizenship-country" />
+      @if (form.get('citizenshipCountry')?.invalid && form.get('citizenshipCountry')?.touched) {
+        <span class="text-xs text-red-500" data-testid="about-me-citizenship-country-error">Country of citizenship is required</span>
+      }
+    </div>
+  </div>
+
+  <!-- Row 3: Profile Link | Company -->
+  <div class="grid grid-cols-2 gap-4">
+    <div class="flex flex-col gap-1">
+      <label for="about-me-profile-link" class="text-sm font-medium text-gray-700">
+        Link to your LinkedIn, personal website or GitHub page <span class="text-red-500">*</span>
+      </label>
+      <lfx-input-text
+        [form]="form"
+        control="profileLink"
+        id="about-me-profile-link"
+        size="small"
+        placeholder="https://"
+        styleClass="w-full"
+        dataTest="about-me-profile-link" />
+      @if (form.get('profileLink')?.invalid && form.get('profileLink')?.touched) {
+        <span class="text-xs text-red-500" data-testid="about-me-profile-link-error">Profile link is required</span>
+      }
+    </div>
+    <div class="flex flex-col gap-1">
+      <label for="about-me-company" class="text-sm font-medium text-gray-700"> Company <span class="text-red-500">*</span> </label>
+      <lfx-input-text
+        [form]="form"
+        control="company"
+        placeholder="Company Name"
+        id="about-me-company"
+        size="small"
+        styleClass="w-full"
+        dataTest="about-me-company" />
+      @if (form.get('company')?.invalid && form.get('company')?.touched) {
+        <span class="text-xs text-red-500" data-testid="about-me-company-error">Company is required</span>
+      }
+    </div>
+  </div>
+
+  <!-- Row 4: Can Receive Funds | Travel From Country -->
+  <div class="grid grid-cols-2 gap-4">
+    <div class="flex flex-col gap-1">
+      <label class="text-sm font-medium text-gray-700"> Can you receive funds from your organization? <span class="text-red-500">*</span> </label>
+      <lfx-select
+        [form]="form"
+        control="canReceiveFunds"
+        [options]="yesNoOptions"
+        placeholder="- Select -"
+        styleClass="w-full"
+        dataTest="about-me-can-receive-funds" />
+      @if (form.get('canReceiveFunds')?.invalid && form.get('canReceiveFunds')?.touched) {
+        <span class="text-xs text-red-500" data-testid="about-me-can-receive-funds-error">This field is required</span>
+      }
+    </div>
+    <div class="flex flex-col gap-1">
+      <label class="text-sm font-medium text-gray-700"> What country would you be travelling from? <span class="text-red-500">*</span> </label>
+      <lfx-select
+        [form]="form"
+        control="travelFromCountry"
+        [options]="countryOptions"
+        placeholder="Select country"
+        [filter]="true"
+        styleClass="w-full"
+        dataTest="about-me-travel-from-country" />
+      @if (form.get('travelFromCountry')?.invalid && form.get('travelFromCountry')?.touched) {
+        <span class="text-xs text-red-500" data-testid="about-me-travel-from-country-error">Travel from country is required</span>
+      }
+    </div>
+  </div>
+
+  <!-- Row 5: Open Source Involvement (full width) -->
+  <div class="flex flex-col gap-1">
+    <label class="text-sm font-medium text-gray-700">
+      Briefly describe your involvement in open source communities and why you'd like to attend
+      <span class="text-red-500">*</span>
+    </label>
+    <lfx-textarea
+      [form]="form"
+      control="openSourceInvolvement"
+      [rows]="4"
+      placeholder="Tell us about your contributions and motivation..."
+      styleClass="w-full"
+      dataTest="about-me-open-source-involvement" />
+    @if (form.get('openSourceInvolvement')?.invalid && form.get('openSourceInvolvement')?.touched) {
+      <span class="text-xs text-red-500" data-testid="about-me-open-source-involvement-error">This field is required</span>
+    }
+  </div>
+
+  <!-- Row 6: Underrepresented Groups -->
+  <div class="flex flex-col gap-2" data-testid="about-me-underrepresented-groups">
+    <label class="text-sm font-medium text-gray-700"> Do you belong to an underrepresented and/or marginalized group? Check all that apply: </label>
+    <div class="flex flex-wrap items-center gap-x-6 gap-y-2">
+      <lfx-checkbox [form]="form" control="isLgbtqia" label="LGBTQIA+" />
+      <lfx-checkbox [form]="form" control="isWoman" label="Woman" />
+      <lfx-checkbox [form]="form" control="isPersonWithDisability" label="Person with Disability" />
+      <lfx-checkbox [form]="form" control="isDiversityOther" label="Other" />
+      <lfx-checkbox [form]="form" control="preferNotToAnswer" label="Prefer not to answer" />
+    </div>
+  </div>
+
+  <!-- Row 7: Attending for Company | Willing to Blog -->
+  <div class="grid grid-cols-2 gap-4">
+    <div class="flex flex-col gap-1">
+      <label class="text-sm font-medium text-gray-700"> Are you attending on behalf of a company? <span class="text-red-500">*</span> </label>
+      <lfx-select
+        [form]="form"
+        control="attendingForCompany"
+        [options]="yesNoOptions"
+        placeholder="- Select -"
+        styleClass="w-full"
+        dataTest="about-me-attending-for-company" />
+    </div>
+    <div class="flex flex-col gap-1">
+      <label class="text-sm font-medium text-gray-700"> Are you willing to write a blog about the event? <span class="text-red-500">*</span> </label>
+      <lfx-select
+        [form]="form"
+        control="willingToBlog"
+        [options]="yesNoOptions"
+        placeholder="- Select -"
+        styleClass="w-full"
+        dataTest="about-me-willing-to-blog" />
+    </div>
+  </div>
+</form>

apps/lfx-one/src/app/modules/events/my-events-dashboard/components/about-me-form/about-me-form.component.scss

@@ -0,0 +1,2 @@
+// Copyright The Linux Foundation and each contributor to LFX.
+// SPDX-License-Identifier: MIT

apps/lfx-one/src/app/modules/events/my-events-dashboard/components/about-me-form/about-me-form.component.ts

@@ -0,0 +1,98 @@
+// Copyright The Linux Foundation and each contributor to LFX.
+// SPDX-License-Identifier: MIT
+
+import { ChangeDetectionStrategy, Component, inject, output } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NonNullableFormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { UserService } from '@app/shared/services/user.service';
+import { CheckboxComponent } from '@components/checkbox/checkbox.component';
+import { InputTextComponent } from '@components/input-text/input-text.component';
+import { SelectComponent } from '@components/select/select.component';
+import { TextareaComponent } from '@components/textarea/textarea.component';
+import { COUNTRIES } from '@lfx-one/shared/constants';
+import { TravelFundAboutMe } from '@lfx-one/shared/interfaces';
+
+const YES_NO_OPTIONS = [
+  { label: 'Yes', value: 'yes' },
+  { label: 'No', value: 'no' },
+];
+
+@Component({
+  selector: 'lfx-about-me-form',
+  imports: [ReactiveFormsModule, InputTextComponent, SelectComponent, TextareaComponent, CheckboxComponent],
+  templateUrl: './about-me-form.component.html',
+  styleUrl: './about-me-form.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AboutMeFormComponent {
+  private readonly userService = inject(UserService);
+  private readonly fb = inject(NonNullableFormBuilder);
+
+  public readonly formValidityChange = output<boolean>();
+  public readonly formChange = output<TravelFundAboutMe>();
+
+  public readonly form = this.fb.group({
+    firstName: ['', Validators.required],
+    lastName: ['', Validators.required],
+    email: [''],
+    citizenshipCountry: ['', Validators.required],
+    profileLink: ['', Validators.required],
+    company: ['', Validators.required],
+    canReceiveFunds: ['', Validators.required],
+    travelFromCountry: ['', Validators.required],
+    openSourceInvolvement: ['', Validators.required],
+    isLgbtqia: [false],
+    isWoman: [false],
+    isPersonWithDisability: [false],
+    isDiversityOther: [false],
+    preferNotToAnswer: [false],
+    attendingForCompany: ['', Validators.required],
+    willingToBlog: ['', Validators.required],
+  });
+
+  public readonly countryOptions = [...COUNTRIES];
+  public readonly yesNoOptions = YES_NO_OPTIONS;
+
+  public constructor() {
+    this.form.get('email')?.disable();
+
+    const user = this.userService.user();
+    if (user) {
+      this.form.patchValue({
+        firstName: user.given_name ?? '',
+        lastName: user.family_name ?? '',
+        email: user.email ?? '',
+      });
+    }
+
+    this.form.statusChanges.pipe(takeUntilDestroyed()).subscribe(() => {
+      this.formValidityChange.emit(this.form.valid);
+    });
+
+    this.form.valueChanges.pipe(takeUntilDestroyed()).subscribe(() => {
+      this.formChange.emit(this.buildFormValue());
+    });
+  }
+
+  private buildFormValue(): TravelFundAboutMe {
+    const raw = this.form.getRawValue();
+    return {
+      firstName: raw.firstName,
+      lastName: raw.lastName,
+      email: raw.email,
+      citizenshipCountry: raw.citizenshipCountry,
+      profileLink: raw.profileLink,
+      company: raw.company,
+      canReceiveFunds: raw.canReceiveFunds,
+      travelFromCountry: raw.travelFromCountry,
+      openSourceInvolvement: raw.openSourceInvolvement,
+      isLgbtqia: raw.isLgbtqia,
+      isWoman: raw.isWoman,
+      isPersonWithDisability: raw.isPersonWithDisability,
+      isDiversityOther: raw.isDiversityOther,
+      preferNotToAnswer: raw.preferNotToAnswer,
+      attendingForCompany: raw.attendingForCompany,
+      willingToBlog: raw.willingToBlog,
+    };
+  }
+}

apps/lfx-one/src/app/modules/events/my-events-dashboard/components/event-selection/event-selection.component.html

@@ -0,0 +1,93 @@
+<!-- Copyright The Linux Foundation and each contributor to LFX. -->
+<!-- SPDX-License-Identifier: MIT -->
+
+<div class="flex flex-col gap-4" data-testid="event-selection">
+  <!-- Filters -->
+  <div class="flex items-center gap-3" data-testid="event-selection-filters">
+    <!-- Search -->
+    <p-iconfield class="flex-1">
+      <p-inputicon styleClass="fa-light fa-magnifying-glass text-gray-400" />
+      <input
+        pInputText
+        type="text"
+        class="w-full text-sm"
+        placeholder="Filter by Name"
+        [value]="searchQuery()"
+        (input)="searchQuery.set(inputEl.value)"
+        #inputEl
+        data-testid="event-selection-search" />
+    </p-iconfield>
+
+    <!-- Time filter -->
+    <lfx-select [form]="filtersForm" control="timeFilter" [options]="timeFilterOptions" data-testid="event-selection-time-filter" />
+
+    <!-- Location filter -->
+    <lfx-select [form]="filtersForm" control="locationFilter" [options]="availableLocations()" data-testid="event-selection-location-filter" />
+  </div>
+
+  <!-- Events grid -->
+  <div class="events-scroll-area overflow-y-auto" data-testid="event-selection-grid">
+    @if (loading()) {
+      <div class="flex items-center justify-center py-16">
+        <i class="fa-light fa-spinner-third fa-spin text-2xl text-gray-400"></i>
+      </div>
+    } @else if (allEvents().length === 0) {
+      <div class="flex flex-col items-center justify-center gap-2 py-16 text-center">
+        <i class="fa-light fa-calendar-xmark text-3xl text-gray-300"></i>
+        <p class="text-sm text-gray-500">No registered events found</p>
+        <p class="text-xs text-gray-400">Register for an event to continue</p>
+      </div>
+    } @else {
+      <div class="grid grid-cols-3 gap-3">
+        @for (event of allEvents(); track event.id) {
+          <div
+            class="event-card registered flex flex-col gap-2 rounded-lg border border-gray-200 p-3 transition-colors"
+            [class.selected]="selectedEvent()?.id === event.id"
+            (click)="onSelectEvent(event)"
+            [attr.data-testid]="'event-selection-card-' + event.id">
+            <!-- Event name -->
+            <p class="text-sm font-semibold leading-snug text-gray-900" [attr.data-testid]="'event-selection-name-' + event.id">
+              {{ event.name }}
+            </p>
+            <!-- Date -->
+            <div class="flex items-center gap-1.5 text-xs text-gray-500" [attr.data-testid]="'event-selection-date-' + event.id">
+              <i class="fa-light fa-calendar-days shrink-0"></i>
+              <span>{{ event.date }}</span>
+            </div>
+            <!-- Location -->
+            <div class="flex items-center gap-1.5 text-xs text-gray-500" [attr.data-testid]="'event-selection-location-' + event.id">
+              <i class="fa-light fa-location-dot shrink-0"></i>
+              <span>{{ event.location }}</span>
+            </div>
+            <!-- Button: Selected | Select -->
+            @if (selectedEvent()?.id === event.id) {
+              <lfx-button label="Selected" severity="primary" size="small" [fluid]="true" [attr.data-testid]="'event-selection-selected-' + event.id" />
+            } @else {
+              <lfx-button
+                label="Select"
+                [text]="true"
+                size="small"
+                [fluid]="true"
+                (onClick)="onSelectEvent(event); $event.stopPropagation()"
+                [attr.data-testid]="'event-selection-select-' + event.id" />
+            }
+          </div>
+        }
+      </div>
+
+      <!-- Load more -->
+      @if (hasMore()) {
+        <div class="flex justify-center pt-4" data-testid="event-selection-load-more">
+          <lfx-button
+            label="Load More"
+            severity="secondary"
+            [outlined]="true"
+            size="small"
+            [loading]="loadingMore()"
+            [disabled]="loadingMore()"
+            (onClick)="onLoadMore()" />
+        </div>
+      }
+    }
+  </div>
+</div>