[Improvement] Update Broken UI for "Employee/Team" Column in Project List View (#8539) #8898
Conversation
Summary by CodeRabbit
WalkthroughThe changes streamline the employee display in the UI component. The template now iterates directly over a new Changes
Sequence Diagram(s)sequenceDiagram
participant UI as Template/UI
participant C as EmployeeWithLinksComponent
participant Data as Employee Data
Data->>C: Provide employee list (value input)
C-->>C: Call initializeEmployees()
C->>C: Select up to 5 employees into displayedEmployees
C->>C: Calculate remainingCount for extra employees
C->>UI: Render avatar group with displayedEmployees
alt remainingCount > 0
C->>UI: Render extra count element
end
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
yarn install v1.22.22 ResponseError: Request failed "503 Service Unavailable" Node.js v22.9.0 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
⏰ Context from checks skipped due to timeout of 90000ms (3)
🔇 Additional comments (4)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
View your CI Pipeline Execution ↗ for commit e521c8b.
☁️ Nx Cloud last updated this comment at |
|
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here: https://app.greptile.com/review/github.
💡 (5/5) You can turn off certain types of comments like style here!
3 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings | Greptile
![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: ASSERTIVE
Plan: Pro
📒 Files selected for processing (3)
packages/ui-core/shared/src/lib/table-components/employee-with-links/employee-with-links.component.html(1 hunks)packages/ui-core/shared/src/lib/table-components/employee-with-links/employee-with-links.component.scss(3 hunks)packages/ui-core/shared/src/lib/table-components/employee-with-links/employee-with-links.component.ts(1 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
packages/ui-core/shared/src/lib/table-components/employee-with-links/employee-with-links.component.ts
[error] 16-16: This type annotation is trivially inferred from its initialization.
Safe fix: Remove the type annotation.
(lint/style/noInferrableTypes)
[error] 17-17: This type annotation is trivially inferred from its initialization.
Safe fix: Remove the type annotation.
(lint/style/noInferrableTypes)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Codacy Static Code Analysis
🔇 Additional comments (8)
packages/ui-core/shared/src/lib/table-components/employee-with-links/employee-with-links.component.html (1)
2-26: Improved employee list display implementationThe HTML structure has been simplified by directly iterating over
displayedEmployeesinstead of using nested containers with groups. The addition of the remaining count indicator provides better user experience by showing when there are more employees than can be displayed.packages/ui-core/shared/src/lib/table-components/employee-with-links/employee-with-links.component.scss (4)
16-16: Improved alignment with flex-startChanging from
centertoflex-startimproves the alignment of the avatars, providing a more natural left-to-right reading flow.
43-43: Enhanced hover behavior with z-indexAdding z-index to the avatar hover state ensures the expanded text remains visible over other elements.
47-66: Well-implemented remaining count indicator stylingThe styling for the remaining count indicator is comprehensive and visually consistent with the avatar elements, while ensuring it stands out appropriately with the blue background.
81-81: Fixed selector syntaxCorrected the CSS selector syntax for adjacent avatar elements.
packages/ui-core/shared/src/lib/table-components/employee-with-links/employee-with-links.component.ts (3)
22-22: Updated initialization method callMethod call correctly updated to match the new method name.
26-28: Updated documentation to reflect new implementationThe JSDoc comments have been updated to accurately describe the new functionality that limits displayed employees and calculates remaining count.
31-42: Improved employee display logic with limit and overflow indicationThe new implementation is more straightforward and user-friendly:
- Limits displayed employees to a maximum of 5
- Calculates and stores the count of remaining employees
- Properly handles edge cases (null/non-array values and small arrays)
...ui-core/shared/src/lib/table-components/employee-with-links/employee-with-links.component.ts
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
packages/ui-core/shared/src/lib/table-components/employee-with-links/employee-with-links.component.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Codacy Static Code Analysis
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: test
- GitHub Check: build
🔇 Additional comments (1)
packages/ui-core/shared/src/lib/table-components/employee-with-links/employee-with-links.component.ts (1)
31-43: Implementation logic looks good.This approach correctly slices the array to display only the maximum allowed number of employees and calculates the remaining count, aligning with the specified UI requirements.
...ui-core/shared/src/lib/table-components/employee-with-links/employee-with-links.component.ts
Outdated
Show resolved
Hide resolved
...ui-core/shared/src/lib/table-components/employee-with-links/employee-with-links.component.ts
Outdated
Show resolved
Hide resolved
|
@samuelmbabhazi hm, why you removed grouping of employees for 3 in one row? I think it was done to make sure it's more visible compared to how you did it - all in one row. Did you understand what was that grouping for before remove!? |
PR
Please note: we will close your PR without comment if you do not check the boxes above and provide ALL requested information.