Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lectures: Add PDF preview for instructors #8987

Merged
merged 87 commits into from
Sep 4, 2024

Conversation

eceeeren
Copy link
Contributor

@eceeeren eceeeren commented Jul 7, 2024

Checklist

General

Server

  • Important: I implemented the changes with a very good performance and prevented too many (unnecessary) database calls.
  • I strictly followed the server coding and design guidelines.
  • I added multiple integration tests (Spring) related to the features (with a high test coverage).
  • I added pre-authorization annotations according to the guidelines and checked the course groups for all new REST Calls (security).
  • I documented the Java code using JavaDoc style.

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.
  • 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, instructors must download attached PDF files and open them with external applications to view them, leading to a waste of time and resources. This process interrupts the user experience and creates inconsistency in file browsing due to varying external applications. This pull request aims to resolve these issues by introducing a specialized PDF previewer within the Artemis application. This previewer will allow users to view PDFs directly in the browser, enhancing the user experience. Additionally, the PDF previewer will serve as a foundation for future PDF editing capabilities within the browser.

Implements #8768

Description

n this pull request, several enhancements are made to improve PDF file handling within the Artemis application.

Firstly, a new component called PDFPreviewComponent is created. This component features a thumbnail grid, contained within an implemented container. On the server side, two API methods are added to the FileResource class to fetch files for Attachment and AttachmentUnit objects. Correspondingly, two service methods are created in AttachmentService and AttachmentUnitService to handle these file fetching requests.

Upon initialization, the component subscribes to file changes. Depending on the object type (Attachment or AttachmentUnit), it fetches the files and uses the PDF.js library to separate PDF files into individual pages. These pages are then rendered as thumbnails in a grid layout, providing a clear overview of the document.

Each grid item includes an overlay displaying the page number and is made clickable. When a user clicks on a thumbnail, the respective page is rendered on a larger canvas for an improved previewing experience. Users can navigate between pages using arrow buttons on the canvas or keyboard arrows. Additionally, the enlarged canvas displays page numbers and includes an exit button or background click option for users to exit the enlarged view.

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. Verify that the title is in this form: "Attachment {id} : {attachment_name}" with the correct values (Also in German)
  6. Verify that you can see the thumbnail grid and the pages are filled
  7. Verify that you can see the page numbers when you hover over them
  8. Verify that the grid elements are clickable and you can see the page on an enlarged canvas when you click on it
  9. Verify that you can change the pages without leaving the enlarged view by using arrow buttons on the page or on the keyboard
  10. Verify that you can see the page number on right bottom and it is the correct page number
  11. Verify that you can exit the enlarged canvas either clicking the "X" button or just clicking outside the slide
  12. Get back to all attachments, add an attachment that is not a PDF and verify that you can't see the View button
  13. Switch to German language or to Dark Mode and start from step 5
  14. Navigate to Course Management > Lectures > Units and add a PDF file (or use the existing one)
  15. Click eye button to view the PDF file
  16. Repeat steps 5 to 12 (Title form "Attachment: {attachment_name}" )

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

Performance Review

  • I (as a reviewer) confirm that the client changes (in particular related to REST calls and UI responsiveness) are implemented with a very good performance
  • I (as a reviewer) confirm that the server changes (in particular related to database calls) are implemented with a very good performance

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 95%
attachment.service.ts 96%
attachment-unit.service.ts 100%
lecture-unit-management.component.ts 92%
lecture-attachments.component.ts 96%

Screenshots

1. View Button on Attachments

Screenshot 2024-08-04 at 01 56 12

2. View Button on Attachment Units

Screenshot 2024-08-04 at 02 23 18

3. Thumbnail Grid

Screenshot 2024-08-04 at 01 57 32

4. Page Numbers on Hover

Screenshot 2024-08-04 at 01 58 24

5. Enlarged Canvas

Screenshot 2024-08-04 at 01 59 18

6. Thumbnail Grid Dark Mode

Screenshot 2024-08-04 at 01 59 59 Screenshot 2024-08-04 at 02 00 12

Summary by CodeRabbit

Summary by CodeRabbit

  • New Features

    • Added functionality to render and preview PDF documents directly within the application.
    • Introduced new RESTful endpoints for retrieving attachment files and attachment unit files.
    • Implemented a comprehensive PDF preview component, improving user interaction with attachment documents.
  • Bug Fixes

    • Improved error handling for cases where requested attachments could not be found.
  • Chores

    • Updated package dependencies to include the PDF.js library for rendering PDF documents.
    • Enhanced styling capabilities for the PDF preview component through new SCSS variables.
    • Established a comprehensive suite of unit tests for the PDF preview component to ensure reliability.

@eceeeren eceeeren self-assigned this Jul 7, 2024
@github-actions github-actions bot added server Pull requests that update Java code. (Added Automatically!) client Pull requests that update TypeScript code. (Added Automatically!) labels Jul 7, 2024
@eceeeren eceeeren changed the title Create Attachment File Preview for the Instructor Interface Create Attachment PDF Preview for the Instructor Interface Jul 24, 2024
Copy link

⚠️ Unable to deploy to test servers ⚠️

The docker build needs to run through before deploying.

@github-actions github-actions bot added the deployment-error Added by deployment workflows if an error occured label Jul 24, 2024
@eceeeren eceeeren added deploy:artemis-test1 and removed deployment-error Added by deployment workflows if an error occured labels Jul 24, 2024
@eceeeren eceeeren temporarily deployed to artemis-test1.artemis.cit.tum.de July 24, 2024 12:08 — with GitHub Actions Inactive
Copy link
Contributor

@JohannesStoehr JohannesStoehr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reapprove after merge

Copy link
Contributor

@pzdr7 pzdr7 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reapprove

Copy link
Contributor

@edkaya edkaya left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reapprove

@bassner bassner added this to the 7.5.2 milestone Sep 3, 2024
@bassner bassner temporarily deployed to artemis-test1.artemis.cit.tum.de September 3, 2024 13:53 — with GitHub Actions Inactive
@bassner bassner changed the title Create Attachment PDF Preview for the Instructor Interface Lectures: Create Attachment PDF Preview for the Instructor Interface Sep 4, 2024
@bassner bassner changed the title Lectures: Create Attachment PDF Preview for the Instructor Interface Lectures: Add PDF preview for instructors Sep 4, 2024
@bassner
Copy link
Member

bassner commented Sep 4, 2024

More changes will be added in a follow-up

@bassner bassner merged commit c2d63d1 into develop Sep 4, 2024
33 of 36 checks passed
@bassner bassner deleted the feature/course/attachment-pdf-preview branch September 4, 2024 08:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
client Pull requests that update TypeScript code. (Added Automatically!) ready to merge server Pull requests that update Java code. (Added Automatically!) tests
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

Updated Instructor Interface with PDF Editing Functionality
6 participants