feat(meetings): update join component ui to match design #143
Conversation
- Add RSVP container for future meetings with lfx-button components - Implement compact date/time format (Wed, Aug 26 • 11:30 PM - 12:30 AM) - Restructure layout to two-column design matching React implementation - Fix ESLint no-case-declarations violations in MeetingTimePipe - Replace title attribute with pTooltip in organization involvement component LFXV2-710 Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <[email protected]>
github-actions
bot
requested review from
andrest50,
dealako and
mauriciozanettisalomao
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughMigrates tooltips to PrimeNG pTooltip, restructures meeting-join UI (badges, auth/guest flow, RSVP, clipboard copy), adds RSVP UI/components and backend RSVP endpoints/methods, extends meeting-time pipe with a compact format, and adjusts header merge behavior and minor UI defaults. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UI as Meeting-Join UI
participant Comp as MeetingJoinComponent
participant RSVPComp as RsvpButtonGroupComponent
participant Modal as RsvpScopeModalComponent
participant Service as MeetingService (client)
participant Server as MeetingService (server)
participant Clipboard as Clipboard Service
participant Toast as Toast Component
User->>UI: View meeting page
UI->>Comp: initialize (compute canJoin, alertMessage, auth state)
Comp->>Service: fetch meeting details & attachments
Service->>Server: GET /meetings/:uid
Server-->>Service: meeting data
Service-->>Comp: meeting data
alt User clicks "Copy Link"
User->>UI: Click copy
UI->>Comp: handleCopyLink()
Comp->>Clipboard: copy(URL with password)
Clipboard-->>Comp: success
Comp->>Toast: show success
end
alt Authenticated user clicks RSVP
User->>UI: Click RSVP (Yes/No/Maybe)
UI->>RSVPComp: handleRsvpClick(response)
alt Meeting is recurring and scope needed
RSVPComp->>Modal: open scope modal
Modal-->>RSVPComp: confirmed + scope
RSVPComp->>Service: createMeetingRsvp(uid, {response, scope, occurrence_id?, email})
else Non-recurring
RSVPComp->>Service: createMeetingRsvp(uid, {response, scope:'all', email})
end
Service->>Server: POST /meetings/:uid/rsvp
Server-->>Service: created RSVP
Service-->>RSVPComp: success
RSVPComp->>UI: emit rsvpChanged
RSVPComp->>Toast: show success
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Areas requiring extra attention:
Possibly related PRs
Suggested labels
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Pull Request Overview
This PR implements a comprehensive UI redesign of the meeting join page with improved layout, new features, and tooltip standardization across components.
Key Changes:
- Redesigned meeting join page with a more compact, modern layout featuring improved badge organization, RSVP functionality placeholders, and better resource presentation
- Added 'compact' date format to the meeting time pipe for displaying dates in a condensed format (e.g., "Wed, Aug 26 • 11:30 PM - 12:30 AM")
- Standardized tooltip implementation by replacing native HTML
[title]attributes with PrimeNG's[pTooltip]directive in the organization involvement component
Reviewed Changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| meeting-time.pipe.ts | Added 'compact' format option to display meeting dates/times in a condensed format with proper case block structure |
| meeting-join.component.ts | Added clipboard functionality for copying meeting links, new alert message signal, and imports for ClipboardModule and FileTypeIconPipe |
| meeting-join.component.html | Complete UI redesign with reorganized layout, RSVP section for authenticated users, improved badge system, and better resource presentation |
| organization-involvement.component.ts | Added TooltipModule import to support PrimeNG tooltip directive |
| organization-involvement.component.html | Replaced native HTML [title] attributes with PrimeNG [pTooltip] directive for consistent tooltip behavior |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
apps/lfx-one/src/app/modules/meetings/meeting-join/meeting-join.component.html
Outdated
Show resolved
Hide resolved
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (5)
apps/lfx-one/src/app/modules/dashboards/components/organization-involvement/organization-involvement.component.html(4 hunks)apps/lfx-one/src/app/modules/dashboards/components/organization-involvement/organization-involvement.component.ts(1 hunks)apps/lfx-one/src/app/modules/meetings/meeting-join/meeting-join.component.html(1 hunks)apps/lfx-one/src/app/modules/meetings/meeting-join/meeting-join.component.ts(8 hunks)apps/lfx-one/src/app/shared/pipes/meeting-time.pipe.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Use TypeScript interfaces instead of union types for better maintainability
When defining PrimeNG-related types, reference the official PrimeNG component interfaces
Files:
apps/lfx-one/src/app/modules/dashboards/components/organization-involvement/organization-involvement.component.tsapps/lfx-one/src/app/shared/pipes/meeting-time.pipe.tsapps/lfx-one/src/app/modules/meetings/meeting-join/meeting-join.component.ts
**/*.{ts,tsx,js,jsx,mjs,cjs,html,css,scss}
📄 CodeRabbit inference engine (CLAUDE.md)
Include required license headers on all source files
Files:
apps/lfx-one/src/app/modules/dashboards/components/organization-involvement/organization-involvement.component.tsapps/lfx-one/src/app/modules/dashboards/components/organization-involvement/organization-involvement.component.htmlapps/lfx-one/src/app/shared/pipes/meeting-time.pipe.tsapps/lfx-one/src/app/modules/meetings/meeting-join/meeting-join.component.htmlapps/lfx-one/src/app/modules/meetings/meeting-join/meeting-join.component.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Do not nest ternary expressions
Files:
apps/lfx-one/src/app/modules/dashboards/components/organization-involvement/organization-involvement.component.tsapps/lfx-one/src/app/shared/pipes/meeting-time.pipe.tsapps/lfx-one/src/app/modules/meetings/meeting-join/meeting-join.component.ts
apps/lfx-one/src/**/*.html
📄 CodeRabbit inference engine (CLAUDE.md)
apps/lfx-one/src/**/*.html: Always add data-testid attributes when creating new Angular components for reliable test targeting
Use data-testid naming convention [section]-[component]-[element]
Files:
apps/lfx-one/src/app/modules/dashboards/components/organization-involvement/organization-involvement.component.htmlapps/lfx-one/src/app/modules/meetings/meeting-join/meeting-join.component.html
🧠 Learnings (2)
📚 Learning: 2025-09-16T03:32:46.518Z
Learnt from: CR
Repo: linuxfoundation/lfx-v2-ui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-09-16T03:32:46.518Z
Learning: Applies to **/*.{ts,tsx} : When defining PrimeNG-related types, reference the official PrimeNG component interfaces
Applied to files:
apps/lfx-one/src/app/modules/dashboards/components/organization-involvement/organization-involvement.component.ts
📚 Learning: 2025-10-21T21:19:13.599Z
Learnt from: andrest50
Repo: linuxfoundation/lfx-v2-ui PR: 125
File: apps/lfx-one/src/app/modules/project/meetings/components/meeting-card/meeting-card.component.ts:345-350
Timestamp: 2025-10-21T21:19:13.599Z
Learning: In the Angular meeting card component (apps/lfx-one/src/app/modules/project/meetings/components/meeting-card/meeting-card.component.ts), when selecting between `summary.summary_data.edited_content` and `summary.summary_data.content`, the logical OR operator (`||`) is intentionally used instead of nullish coalescing (`??`) because empty string edited_content should fall back to the original content rather than being displayed as empty.
Applied to files:
apps/lfx-one/src/app/shared/pipes/meeting-time.pipe.tsapps/lfx-one/src/app/modules/meetings/meeting-join/meeting-join.component.htmlapps/lfx-one/src/app/modules/meetings/meeting-join/meeting-join.component.ts
🧬 Code graph analysis (1)
apps/lfx-one/src/app/modules/dashboards/components/organization-involvement/organization-involvement.component.ts (1)
apps/lfx-one/src/app/modules/meetings/meeting-join/meeting-join.component.ts (1)
Component(39-457)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Agent
🔇 Additional comments (5)
apps/lfx-one/src/app/modules/dashboards/components/organization-involvement/organization-involvement.component.ts (1)
13-13: LGTM! Clean integration of PrimeNG TooltipModule.The TooltipModule import and integration are correctly implemented, enabling the use of
pTooltipdirectives in the template. This provides better UX than native title attributes with improved positioning, styling, and customization options.Also applies to: 19-19
apps/lfx-one/src/app/modules/dashboards/components/organization-involvement/organization-involvement.component.html (1)
33-33: LGTM! Consistent replacement of native tooltips with PrimeNG pTooltip.All
[title]attribute bindings have been correctly replaced with[pTooltip]directives across status indicators and help icons. The tooltip content and logic remain unchanged, and the implementation is consistent throughout the template.Also applies to: 69-69, 108-108, 111-111, 130-130, 133-133
apps/lfx-one/src/app/shared/pipes/meeting-time.pipe.ts (3)
11-11: LGTM: Type signature correctly extended.The addition of 'compact' to the format union type is appropriate and maintains backward compatibility with the default value.
47-60: LGTM: Compact format implementation is correct.The compact case correctly implements the specified format with short date components and the bullet separator. The logic properly handles both single-time and time-range scenarios.
66-73: LGTM: ESLint no-case-declarations violations properly fixed.Wrapping the 'time' and 'default' cases in curly braces correctly addresses ESLint warnings by providing proper block scoping for variable declarations. This matches the pattern used in the new 'compact' case.
Also applies to: 79-86
apps/lfx-one/src/app/modules/meetings/meeting-join/meeting-join.component.html
Show resolved
Hide resolved
- Add new RsvpButtonGroupComponent for streamlined RSVP selection - Add new RsvpScopeModalComponent for occurrence-specific RSVP handling - Integrate RSVP components into meeting join and card views - Refactor backend RSVP endpoints for occurrence-specific support - Update meeting service to use M2M tokens for RSVP retrieval - Add recurring badge to meeting join component - Improve RSVP API route organization and naming consistency LFXV2-710 Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <[email protected]>
asithade
changed the title
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (1)
apps/lfx-one/src/app/modules/meetings/meeting-join/meeting-join.component.html (1)
214-215: Fix file type icon pipe precedence.Angular parses
attachment.mime_type || '' | fileTypeIconasattachment.mime_type || ('' | fileTypeIcon), so whenever MIME type is present the pipe never runs and the icon class stays a raw MIME string. Wrap the left side before piping so the pipe always receives the MIME value.- <i [class]="(attachment.mime_type || '' | fileTypeIcon) + ' text-3xl text-black'"></i> + <i [class]="((attachment.mime_type || '') | fileTypeIcon) + ' text-3xl text-black'"></i>
🧹 Nitpick comments (1)
apps/lfx-one/src/app/shared/components/radio-button/radio-button.component.html (1)
7-7: Add data-testid attributes for reliable test targeting.Per coding guidelines for
apps/lfx-one/src/**/*.html, data-testid attributes should be included using the naming convention [section]-[component]-[element]. Both the form-controlled and non-form-controlled radio button instances lack these attributes.Apply this diff to add data-testid attributes:
@if (form() && control()) { <ng-container [formGroup]="form()!"> <div class="flex items-center gap-2"> - <p-radioButton [formControlName]="control()!" [value]="value()" [inputId]="inputId() || control()!" (onChange)="onRadioChange($event)"> </p-radioButton> + <p-radioButton + [formControlName]="control()!" + [value]="value()" + [inputId]="inputId() || control()!" + (onChange)="onRadioChange($event)" + [data-testid]="'radio-button-form-' + (control()! || 'control')"> + </p-radioButton> @if (label()) { <label [for]="inputId() || control()!" class="text-sm font-medium text-gray-700 cursor-pointer"> {{ label() }} </label>} @else { <div class="flex items-center gap-2"> - <p-radioButton [name]="name()" [value]="value()" [inputId]="inputId()" (onChange)="onRadioChange($event)"> </p-radioButton> + <p-radioButton + [name]="name()" + [value]="value()" + [inputId]="inputId()" + (onChange)="onRadioChange($event)" + [data-testid]="'radio-button-' + (name() || 'input')"> + </p-radioButton> @if (label()) { <label [for]="inputId()" class="text-sm font-medium text-gray-700 cursor-pointer"> {{ label() }}Also applies to: 17-17
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (18)
.vscode/settings.json(1 hunks)apps/lfx-one/src/app/modules/meetings/meeting-join/meeting-join.component.html(2 hunks)apps/lfx-one/src/app/modules/meetings/meeting-join/meeting-join.component.ts(8 hunks)apps/lfx-one/src/app/shared/components/button/button.component.ts(1 hunks)apps/lfx-one/src/app/shared/components/meeting-card/meeting-card.component.html(1 hunks)apps/lfx-one/src/app/shared/components/meeting-card/meeting-card.component.ts(6 hunks)apps/lfx-one/src/app/shared/components/radio-button/radio-button.component.html(1 hunks)apps/lfx-one/src/app/shared/components/rsvp-button-group/rsvp-button-group.component.html(1 hunks)apps/lfx-one/src/app/shared/components/rsvp-button-group/rsvp-button-group.component.ts(1 hunks)apps/lfx-one/src/app/shared/components/rsvp-scope-modal/rsvp-scope-modal.component.html(1 hunks)apps/lfx-one/src/app/shared/components/rsvp-scope-modal/rsvp-scope-modal.component.ts(1 hunks)apps/lfx-one/src/app/shared/services/meeting.service.ts(2 hunks)apps/lfx-one/src/server/controllers/meeting.controller.ts(1 hunks)apps/lfx-one/src/server/routes/meetings.route.ts(1 hunks)apps/lfx-one/src/server/services/api-client.service.ts(1 hunks)apps/lfx-one/src/server/services/meeting.service.ts(5 hunks)packages/shared/src/interfaces/meeting.interface.ts(2 hunks)packages/shared/src/utils/rsvp-calculator.util.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Use TypeScript interfaces instead of union types for better maintainability
When defining PrimeNG-related types, reference the official PrimeNG component interfaces
Files:
apps/lfx-one/src/app/shared/components/button/button.component.tspackages/shared/src/utils/rsvp-calculator.util.tspackages/shared/src/interfaces/meeting.interface.tsapps/lfx-one/src/app/shared/components/rsvp-scope-modal/rsvp-scope-modal.component.tsapps/lfx-one/src/server/routes/meetings.route.tsapps/lfx-one/src/server/services/api-client.service.tsapps/lfx-one/src/app/shared/components/rsvp-button-group/rsvp-button-group.component.tsapps/lfx-one/src/app/modules/meetings/meeting-join/meeting-join.component.tsapps/lfx-one/src/server/controllers/meeting.controller.tsapps/lfx-one/src/server/services/meeting.service.tsapps/lfx-one/src/app/shared/services/meeting.service.tsapps/lfx-one/src/app/shared/components/meeting-card/meeting-card.component.ts
**/*.{ts,tsx,js,jsx,mjs,cjs,html,css,scss}
📄 CodeRabbit inference engine (CLAUDE.md)
Include required license headers on all source files
Files:
apps/lfx-one/src/app/shared/components/button/button.component.tsapps/lfx-one/src/app/shared/components/rsvp-scope-modal/rsvp-scope-modal.component.htmlapps/lfx-one/src/app/shared/components/meeting-card/meeting-card.component.htmlpackages/shared/src/utils/rsvp-calculator.util.tsapps/lfx-one/src/app/shared/components/radio-button/radio-button.component.htmlpackages/shared/src/interfaces/meeting.interface.tsapps/lfx-one/src/app/modules/meetings/meeting-join/meeting-join.component.htmlapps/lfx-one/src/app/shared/components/rsvp-scope-modal/rsvp-scope-modal.component.tsapps/lfx-one/src/app/shared/components/rsvp-button-group/rsvp-button-group.component.htmlapps/lfx-one/src/server/routes/meetings.route.tsapps/lfx-one/src/server/services/api-client.service.tsapps/lfx-one/src/app/shared/components/rsvp-button-group/rsvp-button-group.component.tsapps/lfx-one/src/app/modules/meetings/meeting-join/meeting-join.component.tsapps/lfx-one/src/server/controllers/meeting.controller.tsapps/lfx-one/src/server/services/meeting.service.tsapps/lfx-one/src/app/shared/services/meeting.service.tsapps/lfx-one/src/app/shared/components/meeting-card/meeting-card.component.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Do not nest ternary expressions
Files:
apps/lfx-one/src/app/shared/components/button/button.component.tspackages/shared/src/utils/rsvp-calculator.util.tspackages/shared/src/interfaces/meeting.interface.tsapps/lfx-one/src/app/shared/components/rsvp-scope-modal/rsvp-scope-modal.component.tsapps/lfx-one/src/server/routes/meetings.route.tsapps/lfx-one/src/server/services/api-client.service.tsapps/lfx-one/src/app/shared/components/rsvp-button-group/rsvp-button-group.component.tsapps/lfx-one/src/app/modules/meetings/meeting-join/meeting-join.component.tsapps/lfx-one/src/server/controllers/meeting.controller.tsapps/lfx-one/src/server/services/meeting.service.tsapps/lfx-one/src/app/shared/services/meeting.service.tsapps/lfx-one/src/app/shared/components/meeting-card/meeting-card.component.ts
apps/lfx-one/src/**/*.html
📄 CodeRabbit inference engine (CLAUDE.md)
apps/lfx-one/src/**/*.html: Always add data-testid attributes when creating new Angular components for reliable test targeting
Use data-testid naming convention [section]-[component]-[element]
Files:
apps/lfx-one/src/app/shared/components/rsvp-scope-modal/rsvp-scope-modal.component.htmlapps/lfx-one/src/app/shared/components/meeting-card/meeting-card.component.htmlapps/lfx-one/src/app/shared/components/radio-button/radio-button.component.htmlapps/lfx-one/src/app/modules/meetings/meeting-join/meeting-join.component.htmlapps/lfx-one/src/app/shared/components/rsvp-button-group/rsvp-button-group.component.html
packages/shared/src/interfaces/**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
Place all TypeScript interfaces in the shared package at packages/shared/src/interfaces
Files:
packages/shared/src/interfaces/meeting.interface.ts
🧠 Learnings (3)
📚 Learning: 2025-09-16T03:32:46.518Z
Learnt from: CR
Repo: linuxfoundation/lfx-v2-ui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-09-16T03:32:46.518Z
Learning: Applies to apps/lfx-one/src/**/*.html : Always add data-testid attributes when creating new Angular components for reliable test targeting
Applied to files:
apps/lfx-one/src/app/shared/components/rsvp-scope-modal/rsvp-scope-modal.component.html
📚 Learning: 2025-10-21T21:19:13.599Z
Learnt from: andrest50
Repo: linuxfoundation/lfx-v2-ui PR: 125
File: apps/lfx-one/src/app/modules/project/meetings/components/meeting-card/meeting-card.component.ts:345-350
Timestamp: 2025-10-21T21:19:13.599Z
Learning: In the Angular meeting card component (apps/lfx-one/src/app/modules/project/meetings/components/meeting-card/meeting-card.component.ts), when selecting between `summary.summary_data.edited_content` and `summary.summary_data.content`, the logical OR operator (`||`) is intentionally used instead of nullish coalescing (`??`) because empty string edited_content should fall back to the original content rather than being displayed as empty.
Applied to files:
apps/lfx-one/src/app/modules/meetings/meeting-join/meeting-join.component.htmlapps/lfx-one/src/app/modules/meetings/meeting-join/meeting-join.component.tsapps/lfx-one/src/app/shared/components/meeting-card/meeting-card.component.ts
📚 Learning: 2025-09-16T03:32:46.518Z
Learnt from: CR
Repo: linuxfoundation/lfx-v2-ui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-09-16T03:32:46.518Z
Learning: All PrimeNG components are wrapped in LFX components to keep UI library independence
Applied to files:
apps/lfx-one/src/app/shared/components/rsvp-scope-modal/rsvp-scope-modal.component.ts
🧬 Code graph analysis (4)
apps/lfx-one/src/app/shared/components/rsvp-scope-modal/rsvp-scope-modal.component.ts (3)
apps/lfx-one/src/app/shared/components/button/button.component.ts (1)
Component(11-82)apps/lfx-one/src/app/shared/components/rsvp-button-group/rsvp-button-group.component.ts (1)
Component(17-194)packages/shared/src/interfaces/meeting.interface.ts (1)
RsvpScope(729-729)
apps/lfx-one/src/app/shared/components/rsvp-button-group/rsvp-button-group.component.ts (4)
apps/lfx-one/src/app/shared/components/button/button.component.ts (1)
Component(11-82)apps/lfx-one/src/app/shared/components/rsvp-scope-modal/rsvp-scope-modal.component.ts (1)
Component(12-52)packages/shared/src/interfaces/auth.interface.ts (1)
User(8-41)packages/shared/src/interfaces/meeting.interface.ts (5)
Meeting(75-150)MeetingRsvp(750-771)RsvpResponse(723-723)RsvpScope(729-729)CreateMeetingRsvpRequest(777-790)
apps/lfx-one/src/server/services/meeting.service.ts (2)
packages/shared/src/interfaces/meeting.interface.ts (1)
MeetingRsvp(750-771)apps/lfx-one/src/server/utils/auth-helper.ts (1)
getUsernameFromAuth(10-22)
apps/lfx-one/src/app/shared/services/meeting.service.ts (1)
packages/shared/src/interfaces/meeting.interface.ts (1)
MeetingRsvp(750-771)
🔇 Additional comments (13)
.vscode/settings.json (1)
28-28: Spell-check configuration correctly updated.The addition of "rsvps" is properly placed in alphabetical order and aligns with the RSVP-related functionality introduced across the codebase in this PR.
apps/lfx-one/src/app/shared/components/radio-button/radio-button.component.html (2)
1-2: License header is present and correctly formatted.
4-14: Form control binding logic is sound.The removal of
[name]="name()"from the form-controlled branch (line 7) is correct for reactive forms—formControlNamehandles the binding internally. The non-form-controlled branch correctly retains[name]for template-driven forms. The two branches are appropriately divergent and logically consistent.Also applies to: 15-24
apps/lfx-one/src/app/shared/components/button/button.component.ts (1)
56-56: No issues found. The target default value change is safe and well-implemented.The verification shows:
- Zero TypeScript code references the
target()value or checks for undefined- All 60+ button usages across the codebase either don't specify target (using the new default) or explicitly override it (like the recording modal's
target="_blank")- Both
undefinedand'_self'produce identical same-window navigation behavior- Template correctly binds target to both anchor and PrimeNG button elements
- License header and coding guidelines are met
The change is semantically safe and aligns with the PR's RSVP/meeting flow objectives.
packages/shared/src/utils/rsvp-calculator.util.ts (1)
8-8: LGTM! Scope rename aligns with interface changes.The rename from "following" to "this_and_following" is consistent with the updated
RsvpScopetype in the shared interfaces. The logic correctly checks that the RSVP was created before or at the occurrence date.Also applies to: 105-114
apps/lfx-one/src/server/services/api-client.service.ts (1)
44-51: Verify that allowing customHeaders to override Authorization is intentional.The current implementation allows
customHeadersto override theAuthorizationheader, which could bypass authentication if not carefully controlled. If this behavior is intentional, please document it clearly.Consider using a safer merge strategy:
// Only add Authorization header if bearerToken is provided if (bearerToken) { headers['Authorization'] = `Bearer ${bearerToken}`; } if (customHeaders) { - Object.assign(headers, customHeaders); + // Merge custom headers but preserve critical headers + const { Authorization: _, ...safeHeaders } = customHeaders; + Object.assign(headers, safeHeaders); }Alternatively, if overriding Authorization is needed for specific use cases, add a comment explaining why.
apps/lfx-one/src/app/shared/components/meeting-card/meeting-card.component.html (1)
246-251: LGTM! RSVP section properly integrated.The RSVP section is correctly conditionally rendered for authenticated users who are not organizers on upcoming meetings. The integration with the
RsvpButtonGroupComponentis clean and follows established patterns.apps/lfx-one/src/app/shared/components/rsvp-button-group/rsvp-button-group.component.html (1)
1-58: LGTM! Well-structured RSVP button group template.The template follows best practices:
- License header is present
- Data-testid attributes are properly applied for testing
- Accessibility considerations (aria-hidden on decorative border)
- Clean integration with lfx-button components
packages/shared/src/interfaces/meeting.interface.ts (2)
729-729: LGTM! RsvpScope type update is consistent.The rename from
'following'to'this_and_following'provides clearer semantics and aligns with the calculator utility changes.
784-785: LGTM! Optional occurrence_id enables per-occurrence RSVP.The addition of
occurrence_id?: stringtoCreateMeetingRsvpRequestappropriately supports per-occurrence RSVP functionality for recurring meetings.apps/lfx-one/src/server/routes/meetings.route.ts (1)
55-57: LGTM! Clearer RSVP endpoint structure.The refactoring provides better API semantics:
GET /:uid/rsvp→ all RSVPs for the meetingGET /:uid/rsvp/me→ current user's RSVP (with optional occurrenceId support)This separation of concerns improves the API design.
apps/lfx-one/src/app/shared/components/rsvp-scope-modal/rsvp-scope-modal.component.html (1)
1-50: LGTM! Modal template follows guidelines.The template adheres to coding standards:
- License header is present
- Data-testid attributes are properly applied (as per coding guidelines)
- Accessibility is well-handled with proper labels and keyboard navigation
- Clean integration with LFX components
Based on coding guidelines.
apps/lfx-one/src/app/shared/components/rsvp-scope-modal/rsvp-scope-modal.component.ts (1)
1-52: LGTM! Well-implemented scope modal component.The component demonstrates good practices:
- License header is present
- TypeScript interfaces are used appropriately (RsvpScope)
- FormControl typing provides compile-time safety
- Default value of
'all'is sensible for recurring meetings- PrimeNG DynamicDialog is correctly utilized for modal interaction
Based on coding guidelines.
apps/lfx-one/src/app/modules/meetings/meeting-join/meeting-join.component.ts
Show resolved
Hide resolved
apps/lfx-one/src/app/shared/components/rsvp-button-group/rsvp-button-group.component.ts
Show resolved
Hide resolved
Summary
Updates the Angular meeting join component to match the new React design with improved layout, RSVP functionality placeholder, and compact date/time formatting.
Changes
severity="secondary"andsize="small"Technical Details
Test Plan
Scope
LFXV2-710
Generated with Claude Code