Andras/BoundlessFlowCampus2K
4
7
Fork 0
Code Issues 90 Pull requests 7 Projects Releases Packages Wiki Activity Actions

1087-imageView-display-image #1184

Merged
a24julot merged 11 commits from 1087-imageView-display-image into both_teams_week_8 2026-05-28 08:20:05 +00:00
Conversation 6 Commits 11 Files changed 20 +194 -20
a24noabe commented 2026-05-26 13:27:28 +00:00
Collaborator
Copy link

Changes to imageView and fileService

imageView now displays images fetched from the fileService api.

Files modified and added

  • DockerCompose/stacks/file/example_files, DockerCompose/stacks/file/init_sql/04-files.sql
    • Added example images to volume and database
  • service/fileService/fileService/
    • DatabaseLogic/, IDatabaseQueries.cs, DatabaseQueries.cs
      • Added database query to fetch multiple rows of filedata
    • Endpoints/FileEndpoints.cs
      • Added an endpoint to fetch multiple rows, with a basic search function and row limit
    • Models/request, Models/response
      • Restructured models to either requests or responses
    • Models/request/ManyRequest.cs
      • Added a request model for /many/ endpoint
    • Models/response/DataResponse.cs
      • Added a response model for /many/ endpoint
    • Services/, IFileService.cs, FileService.cs
      • Added a method for fetching the files
  • frontend/src/features/image/
    • useImage.js
      • Added a function to fetch file data of multiple files
      • Added a function to fetch files
    • imageView.js
      • Added a dropdown to select images
      • Added so selected image appears in card

OG issue: #1087

## Changes to imageView and fileService imageView now displays images fetched from the fileService api. ## Files modified and added - `DockerCompose/stacks/file/example_files`, `DockerCompose/stacks/file/init_sql/04-files.sql` - Added example images to volume and database - `service/fileService/fileService/` - `DatabaseLogic/`, `IDatabaseQueries.cs`, `DatabaseQueries.cs` - Added database query to fetch multiple rows of filedata - `Endpoints/FileEndpoints.cs` - Added an endpoint to fetch multiple rows, with a basic search function and row limit - `Models/request`, `Models/response` - Restructured models to either requests or responses - `Models/request/ManyRequest.cs` - Added a request model for /many/ endpoint - `Models/response/DataResponse.cs` - Added a response model for /many/ endpoint - `Services/`, `IFileService.cs`, `FileService.cs` - Added a method for fetching the files - `frontend/src/features/image/` - `useImage.js` - Added a function to fetch file data of multiple files - Added a function to fetch files - `imageView.js` - Added a dropdown to select images - Added so selected image appears in card OG issue: #1087
b25marem commented 2026-05-27 10:40:19 +00:00
Collaborator
Copy link

Review on #1184

Whats done

Reviewed PR #1184 for issue #1087, ImageView display image.

Tested on Windows using Chrome

  • App starts.
  • fileService works after rebuilding the Docker environment.
  • Tested API directly:
    • http://localhost:8080/many?ContentType=image&Limit=4
    • The endpoint returns image data correctly.
  • Tested ImageView in the frontend.
    • Dropdown is shown.
    • Image list is loaded.
    • Selecting an image displays the image in the preview.
    • Card can be added to the dashboard.

Inspected following files

  • frontend/src/features/image/ImageView.js

    • Indentation/code styling
      • Mostly ok.
    • Naming convention
      • Component name follows PascalCase.
    • Printed text uses and follows localization standards
      • Hardcoded text is used, for example image and Please choose an image :).
    • General code quality
      • The first image is selected directly before the user actively chooses an image.
      • The text under the dropdown does not look very clean in the UI. It would be better to have a default dropdown option like Choose an image, or place the instruction next to the dropdown.
      • The preview image is placed very close to the dropdown and looks a bit “stuck” to it.
      • The image preview looks small/not centered inside the card.
      • After adding the card to the dashboard, the selected image does not seem to be saved/displayed correctly.

  • frontend/src/features/image/useImage.js

    • General code quality
      • Fetching image data works after the environment was rebuilt.
      • Loading handling should still be checked, especially .finally(...) usage.

  • service/fileService/fileService/Endpoints/FileEndpoints.cs

    • General code quality
      • /many endpoint works when tested directly.

  • package.json

    • Dependencies
      • No unapproved dependency changes noticed.

What needs to be done

  • frontend/src/features/image/ImageView.js

    • Add a default dropdown option, for example Choose an image, instead of selecting the first image immediately.
    • Improve the layout around the dropdown and instruction text.
    • Add spacing between the dropdown and the image.
    • Center the image inside the card and make the preview size look better.
    • Make sure the selected image is saved and still displayed after adding the card to the dashboard.
    • Replace hardcoded UI text with localization keys.

  • frontend/src/features/image/useImage.js

    • Check loading handling and .finally(...) usage.

Conclusion

  • Not ready for merge yet.
  • The backend/fileService works and the image can be displayed in the preview, but the frontend UX and dashboard persistence need to be improved before merge.
# Review on #1184 ## Whats done Reviewed PR #1184 for issue #1087, ImageView display image. ### Tested on Windows using Chrome + App starts. + `fileService` works after rebuilding the Docker environment. + Tested API directly: + `http://localhost:8080/many?ContentType=image&Limit=4` + The endpoint returns image data correctly. + Tested ImageView in the frontend. + Dropdown is shown. + Image list is loaded. + Selecting an image displays the image in the preview. + Card can be added to the dashboard. ### Inspected following files + `frontend/src/features/image/ImageView.js` + Indentation/code styling + Mostly ok. + Naming convention + Component name follows PascalCase. + Printed text uses and follows localization standards + Hardcoded text is used, for example `image` and `Please choose an image :)`. + General code quality + The first image is selected directly before the user actively chooses an image. + The text under the dropdown does not look very clean in the UI. It would be better to have a default dropdown option like `Choose an image`, or place the instruction next to the dropdown. + The preview image is placed very close to the dropdown and looks a bit “stuck” to it. + The image preview looks small/not centered inside the card. + After adding the card to the dashboard, the selected image does not seem to be saved/displayed correctly. + `frontend/src/features/image/useImage.js` + General code quality + Fetching image data works after the environment was rebuilt. + Loading handling should still be checked, especially `.finally(...)` usage. + `service/fileService/fileService/Endpoints/FileEndpoints.cs` + General code quality + `/many` endpoint works when tested directly. + `package.json` + Dependencies + No unapproved dependency changes noticed. ## What needs to be done + `frontend/src/features/image/ImageView.js` + Add a default dropdown option, for example `Choose an image`, instead of selecting the first image immediately. + Improve the layout around the dropdown and instruction text. + Add spacing between the dropdown and the image. + Center the image inside the card and make the preview size look better. + Make sure the selected image is saved and still displayed after adding the card to the dashboard. + Replace hardcoded UI text with localization keys. + `frontend/src/features/image/useImage.js` + Check loading handling and `.finally(...)` usage. ## Conclusion + Not ready for merge yet. + The backend/fileService works and the image can be displayed in the preview, but the frontend UX and dashboard persistence need to be improved before merge.
image.png
61 KiB
image.png
58 KiB
image.png
109 KiB
image.png image.png image.png
b25marem commented 2026-05-27 10:46:54 +00:00
Collaborator
Copy link
  • Add spacing between the dropdown and the image.
    • Center the image inside the card and make the preview size look better. ex
+ Add spacing between the dropdown and the image. + Center the image inside the card and make the preview size look better. ex
image.png
401 KiB
image.png
a24noabe commented 2026-05-27 12:23:00 +00:00
Author
Collaborator
Copy link

This PR is mostly for the functionality, I have for that reason not focused on the UI or persistance. I have fixed a default dropdown option so that an image doesnt load instantly, localisation, the .finally() and I switched one api call to use useApi for standardization

This PR is mostly for the functionality, I have for that reason not focused on the UI or persistance. I have fixed a default dropdown option so that an image doesnt load instantly, localisation, the .finally() and I switched one api call to use useApi for standardization
a24julot commented 2026-05-27 14:17:14 +00:00
Collaborator
Copy link

@b25marem is this ready to be merged?

@b25marem is this ready to be merged?
b25marem commented 2026-05-27 15:57:38 +00:00
Collaborator
Copy link

I tested the PR again and most of the earlier review comments seem resolved now.

However, I still noticed that the selected image is not persisted after the card is added to the dashboard. The image preview works correctly before adding the card, but after the card is placed on the dashboard the image disappears and only the dropdown remains visible.

So there still seems to be an issue with saving/restoring the selected image state/configuration for the dashboard card.

I tested the PR again and most of the earlier review comments seem resolved now. However, I still noticed that the selected image is not persisted after the card is added to the dashboard. The image preview works correctly before adding the card, but after the card is placed on the dashboard the image disappears and only the dropdown remains visible. So there still seems to be an issue with saving/restoring the selected image state/configuration for the dashboard card.
image.png
41 KiB
image.png
a24julot commented 2026-05-28 08:20:00 +00:00
Collaborator
Copy link

@b25marem This will possibly be fixed later, we want to merge this as the presentation is tomorrow, thank you for the review and we will try to fix it!

@b25marem This will possibly be fixed later, we want to merge this as the presentation is tomorrow, thank you for the review and we will try to fix it!
a24julot merged commit 6a0c045c4f into both_teams_week_8 2026-05-28 08:20:05 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
b25marem
Labels
Clear labels   
_CRITICAL_

Only use this label for critical tasks that are project-scope,and must be addressed ASAP.

  
API

   
app

   
backEnd

   
Blocked, waiting for further changes

   
bug

Something is not working

  
cleanup

Issues to cleanup the codebase (restructure folders, remove deprecated or smelly code)

  
close

Issue to close

  
design

   
duplicate

This issue or pull request already exists

  
enhancement

New feature

  
feature request

   
frontEnd

   
help wanted

Need some help

  
invalid

Something is wrong

  
low priority

   
needs input

Issue needs input from product owner or customer

  
needs review

issue is in need of review

  
project documentation

   
question

More information is needed

  
research

   
reviewed

This Issue has been reviewed

  
script

   
security

use this for security-related issues

  
SQL

  
style

   
testing

   
topLevel

Reserved for top-level, project-wide issues.

  
wontfix

This won't be fixed

No labels
_CRITICAL_
API
app
backEnd
Blocked, waiting for further changes
bug
cleanup
close
design
duplicate
enhancement
feature request
frontEnd
help wanted
invalid
low priority
needs input
needs review
project documentation
question
research
reviewed
script
security
SQL
style
testing
topLevel
wontfix
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
3 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
Andras/BoundlessFlowCampus2K!1184
No description provided.