Lectures: Allow hiding of multiple PDF pages at once

[eceeeren]

Checklist

General

• I tested all changes and their related features with all corresponding user types on a test server.
• This is a small issue that I tested locally and was confirmed by another developer 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 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

After the final presentation of Master's Thesis "Dynamic Lecture Content Management in Artemis", some requirements have been collected from the Instructors of Artemis. Some of these feedbacks included:

1. Hiding and showing multiple PDF pages at once
2. Making checkboxes bigger
3. Allowing only PDF files for "Append PDF" button
4. Grouping "Cancel" button with "Save button"
5. Disabling 'Save' button when saving
6. Adding an alert before cancelling the editing operation
7. Adding "loading spinner" in the middle to showcasing the loading of the PDF
8. Adding an alert in the middle when PDF is not available

Description

All of the described changes in the description are implemented on the Client level.

Steps for Testing

Prerequisites:

• 1 Instructor

1. Log in to Artemis
2. Navigate to Course Administration
3. Navigate to Lecture Units and add a file attachment
4. Click 'View' button
5. Confirm that you can see the loading spinner when the PDF is loading
6. Click 'Cancel' and confirm that you stay on the page when you click 'Cancel' again
7. Click 'Cancel' again and observe that you go back to the previous page when you click 'Confirm'
8. Click 'View' again and check if checkbox size is sufficient
9. Click on different checkboxes and click 'Hide Pages', confirm that these pages are hidden
10. Click on different checkboxes and click 'Show Pages', confirm that these pages are shown again
11. Click 'Append PDF' and confirm that you can only select PDF files
12. Click 'Save' button and confirm that the button is disabled when it is saving
13. Click on 'Download' button, confirm that your changes are applied
14. If there is already a file that you uploaded before and doesn't exist anymore, you can check for 'PDF is not available' warning

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.spec.ts	95%	✅
pdf-preview-thumbnail-grid.component.spec.ts	89%	✅

Screenshots

1. Hiding and showing multiple PDF pages

2. Cancelling confirmation alert

3. Loading spinner for loading pdf

4. No PDF availale warning

[dmytropolityka]

I get this when I try to upload a non-pdf file. Choosing "All files" in the upload dialog is still possible. Is that expected?

[dmytropolityka]

Everything else works as described besides that.

[dmytropolityka]

Tested on ts5. Works as expected now.