Support PDF file format

anny320 commented 2 years ago

adds pdf file type to supporting documents
updates documentViewer to support PDFs page select
some UI updates. cleans up button placement
adds button to view full page from declaration review

Acceptance criteria

GIVEN I am on the supporting documents page WHEN I click upload button THEN I can select .pdf type of files

GIVEN I have uploaded a pdf WHEN I click preview (the name of the file linl) THEN I open the full page documentViewer

GIVEN I have uploaded a pdf WHEN I click preview (the name of the file linl) THEN I open the full page documentViewer and show the page select button

GIVEN I have uploaded a pdf WHEN I on the declaration preview THEN I show the page selects in the documentViewer

GIVEN I am previewing a pdf WHEN I click on the page select THEN switch to the next page

GIVEN I am on the first page THEN disable the left arrow page switcher

GIVEN I am on the last page THEN disable the right arrow page switcher

GIVEN I click the full page Icon button THEN open the documentViewer in full page.

Design

https://www.figma.com/file/SsqCzO2eherXXCKyixmli9/OpenCRVS-Design-System-v2-WIP?node-id=993%3A12438

Dev tasks

[ ] Task 1

jpye-finch commented 2 years ago

How to handle the preview? Can we show a .pdf.
What if there are more than one page in the .pdf?

euanmillar commented 2 years ago

@jpye-finch when viewing the document full screen from the form, there is a trash button. In this design for full screen the trash button is gone. I assume because you wrote A/C from the perspective of the review page. However when looking at the document full screen from the form, we need to know where to put the trash button. I think the A/C must cover both cases

euanmillar commented 11 months ago

The quick way to do this would be to open the PDF in a new tab rather than use / build a custom PDF viewer inside the DocumentViewer component. Thats a lot of new code to maintain and a bit of a sink for dev effort.

jpye-finch commented 5 months ago

Could we embed Chrome native pdf viewer? into the DocumentPreview Component?

rikukissa commented 4 months ago

We should try to do that. It can for instance be an iframe element. I do agree with Euan, non-native PDF viewer could double the size of our application.

jpye-finch commented 4 months ago

One issue with this is the native pdf viewer has print and download buttons.

There seem to be ways to disable using #toolbar=0 at the end of the url

opencrvs / opencrvs-core