feat(meetings): add iCal Subscribe + Calendar view to Meetings dashboard (LFXV2-1771) #697
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
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 |
|---|---|---|
|
|
@@ -5,19 +5,24 @@ import { isPlatformBrowser } from '@angular/common'; | |
| import { Component, computed, inject, PLATFORM_ID, signal, Signal, WritableSignal } from '@angular/core'; | ||
| import { toObservable, toSignal } from '@angular/core/rxjs-interop'; | ||
| import { ActivatedRoute, Router } from '@angular/router'; | ||
| import { IcalSubscribeDialogComponent } from '@app/modules/committees/components/ical-subscribe-dialog/ical-subscribe-dialog.component'; | ||
| import { MeetingCardComponent } from '@app/modules/meetings/components/meeting-card/meeting-card.component'; | ||
| import { FullCalendarComponent } from '@app/shared/components/fullcalendar/fullcalendar.component'; | ||
| import { ButtonComponent } from '@components/button/button.component'; | ||
| import { CardComponent } from '@components/card/card.component'; | ||
| import { EmptyStateComponent } from '@components/empty-state/empty-state.component'; | ||
| import { environment } from '@environments/environment'; | ||
| import { EventClickArg, EventInput } from '@fullcalendar/core'; | ||
| import { CANCELLED_COLOR, MEETING_TYPE_COLORS, MEETING_TYPE_CONFIGS } from '@lfx-one/shared/constants'; | ||
| import { Lens, Meeting, PageResult, PastMeeting, ProjectContext, ViewMode } from '@lfx-one/shared/interfaces'; | ||
| import { addMinutesToDate, getCurrentOrNextOccurrence, hasMeetingEnded } from '@lfx-one/shared/utils'; | ||
| import { LensService } from '@services/lens.service'; | ||
| import { MeetingService } from '@services/meeting.service'; | ||
| import { PersonaService } from '@services/persona.service'; | ||
| import { ProjectContextService } from '@services/project-context.service'; | ||
| import { UserService } from '@services/user.service'; | ||
| import { OnRenderDirective } from '@shared/directives/on-render.directive'; | ||
| import { DialogService } from 'primeng/dynamicdialog'; | ||
| import { | ||
| BehaviorSubject, | ||
| catchError, | ||
|
|
@@ -42,7 +47,8 @@ import { MeetingsTopBarComponent } from './components/meetings-top-bar/meetings- | |
|
|
||
| @Component({ | ||
| selector: 'lfx-meetings-dashboard', | ||
| imports: [MeetingCardComponent, MeetingsTopBarComponent, ButtonComponent, CardComponent, OnRenderDirective, EmptyStateComponent, FullCalendarComponent], | ||
| providers: [DialogService], | ||
| templateUrl: './meetings-dashboard.component.html', | ||
| styleUrl: './meetings-dashboard.component.scss', | ||
| }) | ||
|
|
@@ -55,9 +61,18 @@ export class MeetingsDashboardComponent { | |
| private readonly router = inject(Router); | ||
| private readonly route = inject(ActivatedRoute); | ||
| private readonly platformId = inject(PLATFORM_ID); | ||
| private readonly dialogService = inject(DialogService); | ||
|
|
||
| public readonly activeLens: Signal<Lens> = this.lensService.activeLens; | ||
|
|
||
| // View mode: list (default) or calendar. Calendar renders meetings as | ||
| // FullCalendar events; the existing filter pipeline (lens/foundation/project/ | ||
| // search/meetingType/timeFilter) applies to both views. | ||
|
Contributor
There was a problem hiding this comment. Multi-line comment block — one line max. Problem & Why: The rule is one short line when the WHY is non-obvious; this 3-line block explains WHAT the signals do, not WHY a non-obvious constraint exists. Suggested fix: Delete the comment block entirely. If a reminder about filter applicability is needed, a single line on |
||
| public viewMode = signal<ViewMode>('list'); | ||
| public isListView = computed(() => this.viewMode() === 'list'); | ||
| public isCalendarView = computed(() => this.viewMode() === 'calendar'); | ||
| public calendarEvents: Signal<EventInput[]>; | ||
|
|
||
| public meetingsLoading: WritableSignal<boolean>; | ||
| public pastMeetingsLoading: WritableSignal<boolean>; | ||
| public upcomingMeetings: Signal<Meeting[]>; | ||
|
|
@@ -191,6 +206,22 @@ export class MeetingsDashboardComponent { | |
|
|
||
| // Sentinel is placed at 50% of the list to trigger auto-load as user scrolls | ||
| this.autoLoadTriggerIndex = computed(() => Math.floor(this.filteredMeetings().length / 2)); | ||
|
|
||
| // Calendar events: source from the dashboard's NON-paginated raw signals | ||
| // (rawUserMeetings + rawUserPastMeetings for the Me lens; | ||
| // rawFpUpcomingMeetings + rawFpPastMeetings for foundation/project/org). | ||
| // This avoids the list-view pagination gap where the calendar would | ||
| // silently miss meetings the user hasn't scrolled to yet. | ||
| // Search and meeting-type filters are applied; foundation/project and | ||
| // pendingRsvp filters intentionally don't narrow the calendar in this | ||
| // iteration (FP raw signals are already scoped to the active context). | ||
|
Contributor
There was a problem hiding this comment. Multi-line comment block — one line max. Problem & Why: This 8-line block inside the constructor violates the one-line-max rule. The relevant WHY (non-paginated source to avoid calendar gaps) is valuable but must be compressed to a single line. Suggested fix: Replace the entire block with one line above the assignment: // Uses non-paginated raw signals to avoid calendar silently missing meetings the user hasn't scrolled to yet.
this.calendarEvents = this.initCalendarEvents(); |
||
| this.calendarEvents = computed(() => { | ||
|
Contributor
There was a problem hiding this comment. Multi-line Problem & Why: This component initializes every other complex signal via Suggested fix: // In constructor:
this.calendarEvents = this.initCalendarEvents();
// New private method at the bottom of the class:
private initCalendarEvents(): Signal<EventInput[]> {
return computed(() => {
const lens = this.activeLens();
const meetings: (Meeting | PastMeeting)[] =
lens === 'me' ? [...this.rawUserMeetings(), ...this.rawUserPastMeetings()] : [...this.rawFpUpcomingMeetings(), ...this.rawFpPastMeetings()];
const filtered = this.filterBySearchAndType(meetings, this.debouncedSearchQuery(), this.meetingTypeFilter());
return filtered.flatMap((m) => this.meetingToEvents(m));
});
} |
||
| const lens = this.activeLens(); | ||
| const meetings: (Meeting | PastMeeting)[] = | ||
| lens === 'me' ? [...this.rawUserMeetings(), ...this.rawUserPastMeetings()] : [...this.rawFpUpcomingMeetings(), ...this.rawFpPastMeetings()]; | ||
| const filtered = this.filterBySearchAndType(meetings, this.debouncedSearchQuery(), this.meetingTypeFilter()); | ||
| return filtered.flatMap((m) => this.meetingToEvents(m)); | ||
| }); | ||
| } | ||
|
|
||
| public refreshMeetings(): void { | ||
|
|
@@ -199,6 +230,50 @@ export class MeetingsDashboardComponent { | |
| this.refresh$.next(); | ||
| } | ||
|
|
||
| /** FullCalendar event click → navigate to the meeting detail. Cancelled occurrences are inert. */ | ||
| public onCalendarEventClick(arg: EventClickArg): void { | ||
| const props = arg.event.extendedProps as { type: string; meetingId?: string; cancelled?: boolean }; | ||
| if (props.cancelled) return; | ||
| if (props.type === 'meeting' && props.meetingId) { | ||
| void this.router.navigate(['/meetings', props.meetingId]); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
|
Contributor
There was a problem hiding this comment. Multi-line JSDoc block — one line max. Problem & Why: The rule forbids multi-line JSDoc and multi-line comment blocks everywhere in the codebase. This 9-line block far exceeds the one-line maximum. The JIRA ticket references (LFXV2-1772, LFXV2-1770) belong in the PR description, not in source code. Suggested fix: Replace with a single-line JSDoc: /** Opens iCal Subscribe modal — foundation/project lenses only; me/org lenses tracked separately. */
public onSubscribe(): void { |
||
| * Opens the iCal Subscribe modal for foundation / project lenses. | ||
| * | ||
| * Foundations and projects share the same upstream data model (a foundation | ||
| * IS a project at the data layer), so both lenses use the same backend route. | ||
| * The "me" lens is descoped — a personal feed requires a token-based public | ||
| * URL (calendar clients can't carry session cookies); tracked in LFXV2-1772. | ||
| * The "org" lens is tracked in LFXV2-1770. | ||
| */ | ||
| public onSubscribe(): void { | ||
| const lens = this.activeLens(); | ||
| const projectCtx = this.project(); | ||
|
|
||
| if (lens !== 'foundation' && lens !== 'project') { | ||
| console.warn(`Subscribe is not supported on the "${lens}" lens; aborting dialog open`); | ||
| return; | ||
| } | ||
| if (!projectCtx?.uid) { | ||
| console.warn(`Subscribe clicked on ${lens} lens with no uid; aborting dialog open`); | ||
| return; | ||
| } | ||
|
|
||
| const feedUrl = `${environment.urls.home}/public/api/projects/${encodeURIComponent(projectCtx.uid)}/calendar.ics`; | ||
| const name = projectCtx.name ?? (lens === 'foundation' ? 'Foundation' : 'Project'); | ||
|
|
||
| this.dialogService.open(IcalSubscribeDialogComponent, { | ||
| header: `Subscribe — ${name}`, | ||
| width: '480px', | ||
| modal: true, | ||
| closable: true, | ||
| dismissableMask: true, | ||
| data: { feedUrl, name }, | ||
| }); | ||
| } | ||
|
|
||
| public onMeetingTypeChange(value: string | null): void { | ||
| this.meetingTypeFilter.set(value); | ||
| } | ||
|
|
@@ -711,4 +786,49 @@ export class MeetingsDashboardComponent { | |
| () => !!this.debouncedSearchQuery() || !!this.meetingTypeFilter() || !!this.foundationFilter() || !!this.projectFilter() || this.pendingRsvpOnly() | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * Convert one Meeting (or PastMeeting) into FullCalendar EventInput entries. | ||
|
Contributor
There was a problem hiding this comment. Multi-line JSDoc block — one line max. Problem & Why: Four-line JSDoc on a private helper method violates the one-line-max rule. The method signature Suggested fix: /** Expands one Meeting/PastMeeting into EventInput entries; recurring meetings produce one entry per occurrence. */
private meetingToEvents(meeting: Meeting | PastMeeting): EventInput[] { |
||
| * Recurring meetings expand to one event per occurrence; non-recurring | ||
| * meetings render as a single event. Mirrors CommitteeMeetingsComponent.meetingToEvents. | ||
| */ | ||
| private meetingToEvents(meeting: Meeting | PastMeeting): EventInput[] { | ||
| const typeKey = (meeting.meeting_type ?? 'default').toLowerCase(); | ||
| const colors = MEETING_TYPE_COLORS[typeKey] ?? MEETING_TYPE_COLORS['default']; | ||
|
|
||
| if (meeting.occurrences && meeting.occurrences.length > 0) { | ||
| return meeting.occurrences.map((occ) => { | ||
| const isCancelled = occ.status === 'cancel'; | ||
| const c = isCancelled ? CANCELLED_COLOR : colors; | ||
| return { | ||
| id: `${meeting.id}-${occ.occurrence_id}`, | ||
| title: occ.title || meeting.title, | ||
| start: occ.start_time, | ||
| end: addMinutesToDate(occ.start_time, occ.duration ?? meeting.duration).toISOString(), | ||
| backgroundColor: c.bg, | ||
| borderColor: c.border, | ||
| textColor: '#ffffff', | ||
| display: 'block', | ||
| // cursor-default on cancelled occurrences removes the pointer affordance; | ||
| // onCalendarEventClick also short-circuits when extendedProps.cancelled is true. | ||
| classNames: isCancelled ? ['cursor-default'] : [], | ||
| extendedProps: { type: 'meeting', meetingId: meeting.id, cancelled: isCancelled }, | ||
| }; | ||
|
manishdixitlfx marked this conversation as resolved.
|
||
| }); | ||
| } | ||
|
|
||
| return [ | ||
| { | ||
| id: meeting.id, | ||
| title: meeting.title, | ||
| start: meeting.start_time, | ||
| end: addMinutesToDate(meeting.start_time, meeting.duration).toISOString(), | ||
| backgroundColor: colors.bg, | ||
| borderColor: colors.border, | ||
| textColor: '#ffffff', | ||
| display: 'block', | ||
| extendedProps: { type: 'meeting', meetingId: meeting.id }, | ||
| }, | ||
| ]; | ||
| } | ||
| } | ||
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
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.
Multi-line comment block — one line max.
Problem & Why: Two-line comment explaining the classNames behaviour. One line max.
Suggested fix: