PILOS
PILOS copied to clipboard
THM-Health
add user picture to admin view
Fixes #
Type
- Bugfix
- Feature
- Documentation
- Refactoring (e.g. Style updates, Test implementation, etc.)
- Other (please describe):
Checklist
- [x] Code updated to current develop branch head
- [x] Passes CI checks
- [ ] Is a part of an issue
- [x] Tests added for the bugfix or newly implemented feature, describe below why if not
- [x] Changelog is updated
- [ ] Documentation of code and features exists
Changes
Simple Feature to also see "Profile Picture" in admin view:
Other information
Summary by CodeRabbit
- New Features
- Added a new column to the user table in the admin panel to display user profile images with a large avatar.
- Style
- Updated table header styles to properly size the new profile image column for different screen sizes.
- Tests
- Updated admin user table tests to include the new profile image column and adjusted sorting behavior accordingly.
[!CAUTION]
Review failed
The pull request is closed.
## Walkthrough
A new column for user profile images has been added to the DataTable in the AdminUsersIndex.vue component. This column renders a `UserAvatar` component showing the user's avatar with their name and image URL. Corresponding styling was added to set explicit widths for the new picture column header.
## Changes
| File(s) | Change Summary |
|-------------------------------------|-----------------------------------------------------------------------------------------------------------------|
| resources/js/views/AdminUsersIndex.vue | Added a DataTable column for user profile images using `UserAvatar` component with localized header. |
| resources/sass/app/_action-column.scss | Added CSS rules to set explicit widths for the new `picture-column` header cell, matching other column widths. |
| tests/Frontend/e2e/AdminUsersIndex.cy.js | Updated tests to include the new image column in header and row cell counts, and adjusted sorting column indices.|
| CHANGELOG.md | Added unreleased changelog entry for the new user picture feature in admin view and appended PR reference link. |
| lang/en/admin.php | Added new translation key 'title_short' for the user image column header. |
| tests/Frontend/fixtures/users.json | Added "image" field to user fixture data for frontend tests, with one user having a test image and others null. |
## Sequence Diagram(s)
```mermaid
sequenceDiagram
participant Admin as Admin User
participant Vue as AdminUsersIndex.vue
participant DataTable as DataTable Component
Admin->>Vue: Load Admin Users page
Vue->>DataTable: Render user data with columns
DataTable-->>Vue: For each user, get 'image' field
DataTable->>UserAvatar: Pass firstName, lastName, image URL, size="large"
UserAvatar-->>DataTable: Render avatar component
DataTable-->>Admin: Display avatar in picture column
<!-- walkthrough_end -->
<!-- This is an auto-generated comment: all tool run failures by coderabbit.ai -->
> [!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.
>
> <details>
> <summary>🔧 ESLint</summary>
>
> > If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.
>
> npm warn config production Use `--omit=dev` instead.
> npm error Exit handler never called!
> npm error This is an error with npm itself. Please report this error at:
> npm error <https://github.com/npm/cli/issues>
> npm error A complete log of this run can be found in: /.npm/_logs/2025-05-20T10_37_12_843Z-debug-0.log
>
>
>
> </details>
<!-- end of auto-generated comment: all tool run failures by coderabbit.ai -->
<!-- internal state start -->
<!-- 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= -->
<!-- internal state end -->
<!-- announcements_start -->
> [!NOTE]
> <details>
> <summary>⚡️ AI Code Reviews for VS Code, Cursor, Windsurf</summary>
>
> CodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback.
> Learn more [here](http://coderabbit.ai/ide).
>
> </details>
---
> [!NOTE]
> <details>
> <summary>⚡️ Faster reviews with caching</summary>
>
> CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure `Review - Disable Cache` at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the `Data Retention` setting under your Organization Settings.
> Enjoy the performance boost—your workflow just got faster.
>
> </details>
<!-- announcements_end -->
---
<details>
<summary>📜 Recent review details</summary>
**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**
**Cache: Disabled due to data retention organization setting**
**Knowledge Base: Disabled due to data retention organization setting**
<details>
<summary>📥 Commits</summary>
Reviewing files that changed from the base of the PR and between f3351fe2a5995285284bf2fe7c1838e3b04a92d6 and 88113f86771caf825d42acb83999c76f259b731b.
</details>
<details>
<summary>📒 Files selected for processing (5)</summary>
* `CHANGELOG.md` (2 hunks)
* `lang/en/admin.php` (1 hunks)
* `resources/js/views/AdminUsersIndex.vue` (1 hunks)
* `tests/Frontend/e2e/AdminUsersIndex.cy.js` (18 hunks)
* `tests/Frontend/fixtures/users.json` (4 hunks)
</details>
</details>
<!-- finishing_touch_checkbox_start -->
<details open="true">
<summary>✨ Finishing Touches</summary>
- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings
</details>
<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->
---
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
<details>
<summary>❤️ Share</summary>
- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai)
- [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)
</details>
<details>
<summary>🪧 Tips</summary>
### Chat
There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=THM-Health/PILOS&utm_content=2131):
- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- `I pushed a fix in commit <commit_id>, please review it.`
- `Explain this complex logic.`
- `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
- `@coderabbitai explain this code block.`
- `@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
- `@coderabbitai read src/utils.ts and explain its main purpose.`
- `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
- `@coderabbitai help me debug CodeRabbit configuration file.`
### Support
Need help? Create a ticket on our [support page](https://www.coderabbit.ai/contact-us/support) for assistance with any issues or questions.
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)
- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.
### Other keywords and placeholders
- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.
### CodeRabbit Configuration File (`.coderabbit.yaml`)
- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`
### Documentation and Community
- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.
</details>
<!-- tips_end -->
![coderabbitai[bot] avatar](https://avatars.githubusercontent.com/in/347564?v=4 "Published by a pub.dev verified publisher"){kind=small}
Codecov Report
All modified and coverable lines are covered by tests :white_check_mark:
Project coverage is 96.57%. Comparing base (
ed2e6d3) to head (88113f8). Report is 1 commits behind head on develop.
Additional details and impacted files
@@ Coverage Diff @@
## develop #2131 +/- ##
==========================================
Coverage 96.57% 96.57%
Complexity 1546 1546
==========================================
Files 401 401
Lines 10510 10510
Branches 973 973
==========================================
Hits 10150 10150
Misses 360 360
:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.
:rocket: New features to boost your workflow:
- :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
![codecov[bot] avatar](https://avatars.githubusercontent.com/in/254?v=4 "Published by a pub.dev verified publisher"){kind=small}
@q16marvin you could try to modify the test data so we cannot only simulate the profile placeholder with the first letter of firstname and lastname but also with a profile image set - so we cannot only simulate check the image src
@q16marvin also adjust the changelog file by adding a new entry in the unreleased section