Project Spark | Display documents in a carousel manner

Challenge Objectives

• To provide an alternate view of displaying the documents in an existing app

 

Project Background

• Our client has created an app that allows their users to process financial documents

• The user verify that the information extracted from the documents using machine learning is accurate or not. If not, then they will correct it manually.

 

Technology Stack

• Angular 7

 

Code access

We will share the existing code base with you in the contest forum

 

Individual requirements

The details below are for your information only. This is just to give you a background on the CLASSIFY FILE tab.

• When you launch the app and login, click on CLASSIFY FILE in the left sidebar

• Here, you can see a bunch of documents. In a row, there can be a maximum of 3 documents. The documents are arranged such that documents with the same document type (BST Bank Statement / CDI Closing Disclosure) occupy the same row. The moment there is a document with a different document type, it will be displayed on the next row.

• You can double click a document to enlarge it. When enlarged, you can see that we have pagination at the bottom along with the zoom in / zoom out and rotate document features.

• You can select single or multiple documents (consecutive documents only) by holding the Shift button and clicking on them (you don’t have to hold the Shift button for selecting a single document). You can then change the document type of the selected documents by selecting a value from the “Select Doctype” dropdown at the top.

• The user can delete the selected document and rotate it too.

• The documents that you see are actually different pages of one single document. Thus, the order in which they appear matters.

• Once the user is done making the changes, the user will then have three choices for further actions - submit the changes, cancel the changes or escalate. Each of these action buttons can be seen in the top right (The check mark, the cancel and the up arrow icons)

Display documents in a carousel manner (Major Requirement)

• For this contest, you will be creating an alternate view to see the documents.

• Start off by providing two icons at the top, in the same section where the delete and rotate icons can be seen. The first icon, which will be set by default, will indicate the current view - documents arranged in a row fashion. The next icon will be for the new view.

• When the user clicks on the new icon, hide / remove the current display (only the documents, the document type selection row and other icons in the same row will continue to be seen) and display the new view.

• The new view is as described below:

  • All documents will be part of a carousel. Please check the asset shared in the contest forum to get an idea of what we are aiming for.

  • Initially the carousel will not be “playing”. The user will have to manually click the play icon, which will then display each page for two seconds. Make this time value a configurable property.

  • The carousel will have a “main” page - the page at the center, that is displayed slightly bigger than the others. The user can double click only the main page, to view the enlarged version (as they do in the current view).

  • When enlarged, the features in the page work the same way as they do currently. If the carousel was playing at the time, it gets paused.

  • No changes expected in the enlarged view. It is shown as it does currently. This means pagination, zoom and rotate features will continue to be available. When the user closes the enlarged page, they will see the carousel again.

  • Note that, if the user enlarged a page, then used pagination to jump to another page, when they close the enlarged page, they need to be seeing the page that was last shown before they closed the window. That is, pagination should also update the current main page in the carousel.

  • In the carousel if the user clicks on the left or right side of the main page, the carousel will move correspondingly.

  • The user can select the main page and change the document type as before. When they pull the dropdown to change the document type, kindly pause the carousel (if it is playing).

  • The carousel mode will work with both TIFF and JPEG modes (left bottom of sidebar). The behaviour here will be similar to that in the current view.

  • Rewind and Forward

  • The rotate icons next to the delete icon will not be shown in carousel model. When a page is enlarged, the rotate icons will be shown (within the enlarged page, at the bottom in the pagination row, as seen currently).

  • In the carousel, when the user clicks on the main page, they select it (They cannot select non main pages). Pause the carousel if it is playing. Note that they can unselect it only by clicking on it again (This does not resume the playing of the carousel). Clicking outside the carousel does not deselect the page.

  • Users can use the mouse scroll to scroll in the carousel. Users can also use the left and right keyboard buttons. These are nice-to-have.

  • The carousel will only occupy the same height as the current view. We don’t expect a scrollbar to be shown.

• All existing features such as delete, submit, cancel and escalate will continue to work, like they do with the current view.

 

Deployment guide and validation document

No changes expected to the current deployment document. For verification, you can provide an unlisted video on youtube demonstrating your changes. Please make sure the video is unlisted and not publicly visible.

 

Important Notes

• Focus on the task at hand. Don’t make changes that are not needed for this contest.

• The existing source code might not be following best practices. The reviewers need to take this into consideration. But for your changes, you need to write quality code. You will still be judged based on what you write and not based on the conventions you followed from the code.

• You will have to go through the existing code to determine the data structure in parsing the api request that fetches the documents and displays them. Not just that, you also need to also observe the data passed when we invoke the submit, cancel and escalate actions. Please follow them and match it when the user uses the carousel mode and performs the same actions.

• Use Angular 7. Please don’t upgrade the Angular version

Final Submission Guidelines

You can upload the zip file containing the source code with your updates.