Development: Decompose PDF Preview components

[eceeeren]

NOTE: Please test it with both vertical and horizontal PDFs!

Checklist

General

• I tested all changes and their related features with all corresponding user types on a test server.
• Language: I followed the guidelines for inclusive, diversity-sensitive, and appreciative language.
• I chose a title conforming to the naming conventions for pull requests.

Client

• Important: I implemented the changes with a very good performance, prevented too many (unnecessary) REST calls and made sure the UI is responsive, even with large data (e.g. using paging).
• I strictly followed the principle of data economy for all client-server REST calls.
• I strictly followed the client coding and design guidelines.
• Following the theming guidelines, I specified colors only in the theming variable files and checked that the changes look consistent in both the light and the dark theme.
• I added multiple integration tests (Jest) related to the features (with a high test coverage), while following the test guidelines.
• I added authorities to all new routes and checked the course groups for displaying navigation elements (links, buttons).
• I documented the TypeScript code using JSDoc style.
• I added multiple screenshots/screencasts of my UI changes.
• I translated all newly inserted strings into English and German.

Motivation and Context

The current PDF Preview component enables instructors to individually view uploaded lecture slides and make adjustments, such as deleting or adding pages. However, the component's structure is overly complex, with all functionalities layered within a single component, resulting in lengthy, difficult-to-maintain code. To improve maintainability and flexibility, the component should be modularized into several smaller components, each focused on a specific function. This approach will streamline the codebase, making it easier to manage and adapt over time.

Description

The PDF Preview has been decomposed into 3 different components:

1. PDF Preview Component: Holds the general structure of the view and the buttons, along with their functionalities. This structure consists of

• Attachment Title
• Delete Pages button
• Append PDF button
• PDF Preview Thumbnail Grid component
• Cancel button (goes back to previous page)
• Save button (saves the edited PDF)

2. PDF Preview Thumbnail Grid Component: Holds the grid structure of the slide pages. Consists of

• PDF Container
• Slide pages canvases
• Page checkboxes
• Page number overlay (on hover)
• PDF Preview Enlarged Canvas Component

3. PDF Preview Enlarged Canvas Component: Created when the user clicks on one canvas, from the canvas image. Holds the bigger version of the slide page. Consists of

• Close button (to close enlarged view)
• Left & Right arrow buttons (to change slide page)

Steps for Testing

Prerequisites:

• 1 Instructor

1. Log in to Artemis
2. Navigate to Course Administration
3. Navigate to Lectures > Attachments
4. Add an attachment and click 'View' button
5. Observe that 'loading icon' is working during the loading of the PDF
6. Observe that Save/Append PDF/Delete Pages buttons are disabled during loading
7. Observe that PDF is loaded correctly
8. Observe that all of the canvases are populated correctly and shows correct page number during hover
9. Observe that 'Save' button is disabled when no changed have been made
10. Observe that 'Delete Pages' button is disabled when no slides are selected
11. Select one or multiple slides, click 'Delete Pages' and observe that they are disappeared
12. Click 'Append PDF' button, select a suitable PDF file and observe that the pages are added correctly and the thumbnail grid should scroll all the way down
13. Click 'Save' button and observe that it is saved correctly
14. Click 'Cancel' button and observe that you are returned to the previous page
15. Navigate to Lecture Units, add an attachment and repeat the steps from 4 to 14

Testserver States

Note

These badges show the state of the test servers.
Green = Currently available, Red = Currently locked
Click on the badges to get to the test servers.

Review Progress

Code Review

• Code Review 1
• Code Review 2

Manual Tests

• Test 1
• Test 2

Test Coverage

Class/File	Line Coverage	Confirmation (assert/expect)
pdf-preview.component.ts	100%	✅
pdf-preview-thumbnail-grid.component.ts	85%	✅
pdf-preview-enlarged-canvas.component.ts	84%	✅

Screenshots

1. Buttons when no slides are selected and no changes are made

2. Buttons when slides are selected

3. New pages are added

4. Horizontal zoom

5. Vertical zoom

Summary by CodeRabbit

Release Notes

• New Features

  • Introduced an enlarged PDF canvas view with navigation controls and loading feedback.
  • Added a thumbnail grid for displaying PDF pages with enhanced user interaction.

• Bug Fixes

  • Improved error handling for PDF loading and rendering processes.

• Documentation

  • Updated component structure and usage guidelines to reflect new features and changes.

• Tests

  • Implemented comprehensive test suites for the PdfPreviewComponent, PdfPreviewEnlargedCanvasComponent, and PdfPreviewThumbnailGridComponent to ensure functionality and reliability.

[asliayk]

tested on ts5 with Firefox, and everything worked correctly

[github-actions]

There hasn't been any activity on this pull request recently. Therefore, this pull request has been automatically marked as stale and will be closed if no further activity occurs within seven days. Thank you for your contributions.

[FelixTJDietrich]

Code looks good to me, good job on using signals etc. :)

I tested on TS1 both on safari and chromium and it works as expected but I think there are a few minor improvements that could be done as a follow-up issue in a separate PR:

• The select checkbox is tiny and should be a bit larger, I think at least twice as big
• When pressing "Append PDF" limit the allowed file extensions to just .pdf, I could select a PNG and got: "Failed to merge files: Failed to parse PDF document (line:1620 col:357 offset=260789): No PDF header found"
• Save button
  • There is no immediate user feedback once you press Save and it is processing, I waited 5 seconds before something happened and pressed twice in confusion
  • Prevent users from pressing it multiple times and present a loading spinner
• Cancel button
  • Group with Save button to the right, no need to keep them them apart. I did not immediately see it
  • "View" tooltip on the button is not necessary
  • If there unsaved changes alert the user before leaving the page
• When you open a large pdf initially there is no loading spinner and you see an empty canvas, IMO there needs to be a big one in the middle so you know there is something going on
• Some kind of move or reorder 2D drag and drop functionality is missing. If I delete a slide and append an replacement then I cannot move it to the correct spot