feat(committees): add committee detail shell with overview tab and BFF endpoints #335
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| <!-- Copyright The Linux Foundation and each contributor to LFX. --> | ||
| <!-- SPDX-License-Identifier: MIT --> | ||
|
|
||
| <form [formGroup]="form" (ngSubmit)="onSubmit()" class="flex flex-col gap-6"> | ||
| <!-- Member Selection --> | ||
| <div> | ||
| <label for="member-select" class="block text-sm font-medium text-gray-700 mb-1"> | ||
| Select Member <span class="text-red-500" aria-hidden="true">*</span> | ||
| <span class="sr-only">(required)</span> | ||
| </label> | ||
| <lfx-select | ||
| size="small" | ||
| [form]="form" | ||
| control="member_uid" | ||
| [options]="memberOptions" | ||
| [filter]="true" | ||
| filterBy="label" | ||
| filterPlaceholder="Search by name or organization..." | ||
| placeholder="Choose a member" | ||
| styleClass="w-full" | ||
| appendTo="body" | ||
| [showClear]="true" | ||
| id="member-select" | ||
| data-testid="assign-leadership-member-select"> | ||
| </lfx-select> | ||
| </div> | ||
|
|
||
| <!-- Effective Date --> | ||
| <div> | ||
| <label for="elected-date" class="block text-sm font-medium text-gray-700 mb-1">Effective Date</label> | ||
| <lfx-calendar | ||
| [form]="form" | ||
| control="elected_date" | ||
| placeholder="Select effective date" | ||
| [showButtonBar]="true" | ||
| appendTo="body" | ||
| id="elected-date" | ||
| data-testid="assign-leadership-elected-date"> | ||
| </lfx-calendar> | ||
| </div> | ||
|
|
||
| <!-- Form Actions --> | ||
| <div class="flex justify-between pt-6 border-t"> | ||
| <div> | ||
| @if (currentLeader) { | ||
| <lfx-button | ||
| [label]="'Remove ' + roleLabel" | ||
| severity="danger" | ||
| [outlined]="true" | ||
| [loading]="removing()" | ||
| [disabled]="submitting() || removing()" | ||
| (onClick)="onRemove()" | ||
| size="small" | ||
| type="button" | ||
| data-testid="assign-leadership-remove-btn"> | ||
| </lfx-button> | ||
| } | ||
| </div> | ||
| <div class="flex gap-3"> | ||
| <lfx-button | ||
| label="Cancel" | ||
| severity="secondary" | ||
| [outlined]="true" | ||
| (onClick)="onCancel()" | ||
| size="small" | ||
| type="button" | ||
| data-testid="assign-leadership-cancel-btn"> | ||
| </lfx-button> | ||
| <lfx-button | ||
| [label]="'Assign ' + roleLabel" | ||
| [loading]="submitting()" | ||
| [disabled]="!form.value.member_uid || submitting() || removing()" | ||
| type="submit" | ||
| size="small" | ||
| data-testid="assign-leadership-submit-btn"> | ||
| </lfx-button> | ||
| </div> | ||
| </div> | ||
| </form> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,175 @@ | ||
| // Copyright The Linux Foundation and each contributor to LFX. | ||
| // SPDX-License-Identifier: MIT | ||
|
|
||
| import { Component, inject, signal } from '@angular/core'; | ||
| import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; | ||
| import { ButtonComponent } from '@components/button/button.component'; | ||
| import { CalendarComponent } from '@components/calendar/calendar.component'; | ||
| import { SelectComponent } from '@components/select/select.component'; | ||
| import { CommitteeMemberRole } from '@lfx-one/shared/enums'; | ||
| import { Committee, CommitteeLeadership, CommitteeMember, CreateCommitteeMemberRequest, LeadershipRole } from '@lfx-one/shared/interfaces'; | ||
| import { formatDateToISOString } from '@lfx-one/shared/utils'; | ||
| import { CommitteeService } from '@services/committee.service'; | ||
| import { MessageService } from 'primeng/api'; | ||
| import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog'; | ||
| import { catchError, of, switchMap } from 'rxjs'; | ||
|
|
||
| @Component({ | ||
| selector: 'lfx-assign-leadership-dialog', | ||
| imports: [ReactiveFormsModule, ButtonComponent, CalendarComponent, SelectComponent], | ||
| templateUrl: './assign-leadership-dialog.component.html', | ||
| }) | ||
| export class AssignLeadershipDialogComponent { | ||
| private readonly config = inject(DynamicDialogConfig); | ||
| private readonly dialogRef = inject(DynamicDialogRef); | ||
| private readonly committeeService = inject(CommitteeService); | ||
| private readonly messageService = inject(MessageService); | ||
|
|
||
| public readonly role: LeadershipRole; | ||
| public readonly committee: Committee; | ||
| public readonly members: CommitteeMember[]; | ||
| public readonly currentLeader: CommitteeLeadership | null; | ||
| public readonly roleLabel: string; | ||
|
|
||
| public form: FormGroup; | ||
|
|
||
| public submitting = signal(false); | ||
| public removing = signal(false); | ||
|
|
||
| public memberOptions: { label: string; value: string }[]; | ||
|
|
||
| public constructor() { | ||
| this.role = this.config.data?.role ?? 'chair'; | ||
| this.committee = this.config.data?.committee; | ||
| this.members = this.config.data?.members ?? []; | ||
| this.currentLeader = this.config.data?.currentLeader ?? null; | ||
|
|
||
| if (!this.committee) { | ||
| this.messageService.add({ | ||
| severity: 'error', | ||
| summary: 'Error', | ||
| detail: 'Committee data is missing. Please try again.', | ||
| }); | ||
| this.dialogRef.close(); | ||
| } | ||
|
|
||
| this.roleLabel = this.role === 'chair' ? 'Chair' : 'Co-Chair'; | ||
|
|
||
| this.form = new FormGroup({ | ||
| member_uid: new FormControl(this.currentLeader?.uid ?? null), | ||
| elected_date: new FormControl(this.currentLeader?.elected_date ? new Date(this.currentLeader.elected_date) : null), | ||
| }); | ||
|
|
||
| this.memberOptions = this.initializeMemberOptions(); | ||
| } | ||
|
|
||
| public onCancel(): void { | ||
| this.dialogRef.close(); | ||
| } | ||
|
|
||
| public onSubmit(): void { | ||
| const memberUid = this.form.value.member_uid; | ||
| if (!memberUid) return; | ||
|
|
||
| const selectedMember = this.members.find((m) => m.uid === memberUid); | ||
| if (!selectedMember) return; | ||
|
|
||
| this.submitting.set(true); | ||
|
|
||
| const leadership: CommitteeLeadership = { | ||
| uid: selectedMember.uid, | ||
| first_name: selectedMember.first_name, | ||
| last_name: selectedMember.last_name, | ||
| email: selectedMember.email, | ||
| elected_date: formatDateToISOString(this.form.value.elected_date) || undefined, | ||
| organization: selectedMember.organization?.name, | ||
| }; | ||
|
|
||
| const roleName = this.role === 'chair' ? CommitteeMemberRole.CHAIR : CommitteeMemberRole.VICE_CHAIR; | ||
| const roleUpdate: Partial<CreateCommitteeMemberRequest> = { | ||
| role: { | ||
| name: roleName, | ||
| start_date: formatDateToISOString(this.form.value.elected_date) || null, | ||
| }, | ||
| }; | ||
|
|
||
| this.committeeService | ||
| .updateCommitteeMember(this.committee.uid, memberUid, roleUpdate) | ||
| .pipe( | ||
| switchMap(() => { | ||
| if (this.currentLeader && this.currentLeader.uid !== memberUid) { | ||
| return this.committeeService | ||
| .updateCommitteeMember(this.committee.uid, this.currentLeader.uid, { | ||
| role: { name: CommitteeMemberRole.NONE }, | ||
| }) | ||
| .pipe( | ||
| catchError(() => { | ||
| // Assignment succeeded but clearing the previous leader's role failed. | ||
| // Warn the user so they can resolve the duplicate manually. | ||
| this.messageService.add({ | ||
| severity: 'warn', | ||
| summary: 'Partial Update', | ||
| detail: `New ${this.roleLabel.toLowerCase()} assigned, but the previous leader's role could not be cleared automatically.`, | ||
| }); | ||
| return of(null); | ||
| }) | ||
| ); | ||
| } | ||
| return of(null); | ||
| }) | ||
| ) | ||
| .subscribe({ | ||
| next: () => { | ||
| this.submitting.set(false); | ||
| this.messageService.add({ | ||
| severity: 'success', | ||
| summary: 'Success', | ||
| detail: `${this.roleLabel} assigned successfully`, | ||
| }); | ||
| this.dialogRef.close({ role: this.role, leadership }); | ||
| }, | ||
| error: () => { | ||
| this.submitting.set(false); | ||
| this.messageService.add({ | ||
| severity: 'error', | ||
| summary: 'Error', | ||
| detail: `Failed to assign ${this.roleLabel.toLowerCase()}`, | ||
| }); | ||
| this.dialogRef.close(); | ||
| }, | ||
| }); | ||
| } | ||
|
|
||
| public onRemove(): void { | ||
| if (!this.currentLeader) return; | ||
|
|
||
| this.removing.set(true); | ||
|
|
||
| this.committeeService.updateCommitteeMember(this.committee.uid, this.currentLeader.uid, { role: { name: CommitteeMemberRole.NONE } }).subscribe({ | ||
| next: () => { | ||
| this.removing.set(false); | ||
| this.messageService.add({ | ||
| severity: 'success', | ||
| summary: 'Success', | ||
| detail: `${this.roleLabel} removed`, | ||
| }); | ||
| this.dialogRef.close({ role: this.role, leadership: null }); | ||
| }, | ||
| error: () => { | ||
| this.removing.set(false); | ||
| this.messageService.add({ | ||
| severity: 'error', | ||
| summary: 'Error', | ||
| detail: `Failed to remove ${this.roleLabel.toLowerCase()}`, | ||
| }); | ||
| }, | ||
| }); | ||
| } | ||
|
|
||
| private initializeMemberOptions(): { label: string; value: string }[] { | ||
| return this.members.map((m) => ({ | ||
| label: `${m.first_name} ${m.last_name}${m.organization?.name ? ` — ${m.organization.name}` : ''}`, | ||
| value: m.uid, | ||
| })); | ||
| } | ||
| } |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Silent error swallowing — All
console.errorcalls were removed from error handlers here (and in several other places in this file) but no replacement logging or telemetry was added. If there's a global HTTP error interceptor that handles this, this is fine — but if not, debugging production issues will be very difficult since errors are silently discarded. Please verify centralized error handling covers these cases, or consider keeping at minimum a structured log call.