Lectures: Add editing functionality to attachment PDF preview

[eceeeren]

NOTE: Please only test on Non-Chromium Browsers! (Mozilla Firefox, Safari etc.)

NOTE 2: Undefined course problem is fixed in this branch: #9601, please do not mention it here!

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

Currently, in PDF Preview Component, the users are limited to viewing PDFs, but as the related Feature Request mentioned before, for a more interactive and efficient file handling system, there is a need to streamline the process of organizing and editing PDF content without relying on external tools. By introducing advanced file manipulation capabilities, we aim to reduce the time and effort spent on managing PDF files, further enhancing the overall user experience and ensuring consistency within the application. The motivation behind this pull request is to provide users with greater control and flexibility when managing PDF files directly within the Artemis application by providing the most basic functionalities: removing and adding pages to a PDF File.

Implements #8768

Description

This pull request introduces several new features to enhance PDF handling within the Artemis application. The existing PDFPreviewComponent has been upgraded to allow users to interact with PDF files more efficiently. Users can now select individual pages using checkboxes on each thumbnail, enabling multiple pages to be selected for various actions, such as removing or appending new pages. Additionally, users can append pages from other PDF files and save their modifications as a new document. These improvements streamline the process of managing PDF content directly in the application, providing a more flexible and intuitive experience.

NOTE: This PR will be divided into multiple parts in the next PR, it is not in the scope of this PR.

Steps for Testing

Prerequisites:

• 1 Instructor

1. Log in to Artemis
2. Navigate to Course Management > Lectures > Attachments
3. Add a PDF file as attachment or use a PDF file that has already been uploaded
4. Click "View" button to view it
5. Memorize the total page number of the PDF file
6. Select different pages in different locations and Click "Remove pages"
7. Verify that related pages are removed and page numbers are updated when you hover over them
8. Verify that total page number has changed after the removal
9. Click Append File button and select a PDF file and upload
10. Verify that the page automatically scrolled down to the end after the addition
11. Verify that new pages are added correctly after the last page of the first file
12. Click 'Save' and verify that you can see the success notification
13. Return back the "Attachments" page and verify that the version got 1 number higher
14. Switch to German mode to check if the buttons are translated correctly
15. Switch to Dark Mode to check if the colours of the buttons are correct
16. Click cancel to get back to Attachments page
17. Navigate to Course Management > Lectures > Lecture Units
18. Repeat from 3 to 16
19. Click cancel to get back to Lecture Units page

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	91%	✅

Screenshots

1. General View with new Buttons

2. Delete Page Dialog Box

3. Append File Dialog Box

4. Alerts

Summary by CodeRabbit

Summary by CodeRabbit

• New Features

  • Enhanced PDF management capabilities, allowing users to view, delete, and append PDF files.
  • Introduced a "Remove Page(s)" button for deleting selected slides from PDFs.
  • Added a dedicated PDF display area with navigation controls for improved user interaction.
  • Improved layout and responsiveness of the PDF preview component using flexbox for better alignment and spacing.
  • Added loading indicators for PDF operations to provide visual feedback during loading states.
  • Integrated a new dependency for enhanced PDF functionality.
  • New methods for merging PDFs and handling file inputs.
  • Conditional save button that activates based on file state and loading conditions.

• Bug Fixes

  • Enhanced error handling for PDF operations, providing better feedback to users.

• Tests

  • Expanded test coverage for PDF management functionalities and user interactions, including new scenarios for merging PDFs and handling file inputs.

[zagemello]

All works as expected, implemented on TS2

[SimonEntholzer]

Code lgtm

[HawKhiem]

Tested on TS3. Reapprove

fixed