Fax Management Solution Angular 9 UI Prototype

Challenge Objectives

• Build a UI prototype with around 6 unique screens along with some popups using Angular 9

 

Project Background

• We are building a fax management solution and the purpose of this challenge is to implement the prototype.

 

Technology Stack

• Angular 9

• Angular Flex Framework / Layout

• Material UI

• HTML5

• Javascript

• CSS

 

API Integration

Although the API is not ready yet, you need to implement local controllers / services to fetch the data showing in the app from local JSON files. We should be able to replace the JSON files with actual API calls to integrate the app with the backend without much effort so hard coded data is not acceptable. This is evaluated as a major requirement.

 

Client specific requirements

• You are expected to build the UI using the Material Design library with the client's theme / style css and use Angular Flex framework / layout. We’ll provide the styles.css (you should not modify it) and a prototype for your reference (we should follow the same in this prototype).

• Angular 9 must be used, and browser compatibility requirements must be covered.

• This app should be built using ngrx for state management.

• The UI should be fluid and generally responsive to different screen sizes (desktop only, but need to support smaller size laptop screens).

• Field validation should be properly done on UI, more details in the sections below.

• These are evaluated as major requirements as well.

 

Screen requirements

Below is the list of screens that are supposed to be implemented in the prototype. Please cross compare this with the design, and if you see any inconsistencies or have any questions, raise them in the forum for clarification / confirmation.

 

Home

The home screen contains two buttons which will lead to the pages described in sections below:

• Send a Fax

• Index a Fax

 

Please have a local service method that will return either failure or the following json:

• home-user-permissions.json

 

On page load the UI code should call this method, and two buttons will be shown if the return is one of the above jsons; otherwise show an error message that says “You don’t have permission to view this page” instead (the two buttons should be hidden in this case).

 

Index - List

On entering the list page, you should populate the UI based on the following logic:

• Assigned To

  • The values of this dropdown depends on the json from the home page

  • If the user’s role is User (isAdmin = false) in all the queues, the dropdown will have two values: the user’s fullName (selected by default) and “Unassigned”

  • If the user’s role is Leader  (isAdmin = true) in some of the queues, the dropdown will include all the lists of users from these queues and the option “Unassigned” (selected by default)

• Category

  • The values of this dropdown consist of “All” (selected by default) and all unique category from the same index-list-fax-line.json file

• Fax Line

  • The values of this dropdown comes from the json file index-list-fax-line.json, please implement a service method to return this json

  • “All” will be the default selection on page load, the other values come from the queueName field in the json.

  • If a category is selected first then the values will only be the ones that belong to the category.

• Status

  • The dropdown will have these values: All, READY, DELETED, COMPLETED, FAILED, IN_PROGRESS

• From Date: default to Today minus 90 days

• To Date: default to Today, max is Today and min is Today minus 90 days

• Fax Number: a number only text input

 

The Reset button should reset all filter values, and Filter button will perform a search:

• On clicking Filter, please show a loading indicator while UI is getting data

• Please implement a service method that will return failure or one of these jsons. Display an error message in case of failure, or display the empty state or results state based on which json is returned:

  • Index-list-queue-poll.json

  • index-list-queue-poll-multiple.json

  • index-list-queue-poll-empty.json

• The data is used to populate into the table, field mapping:

  • Received: createdDate

  • ID: jobId

    • Clicking the ID link will navigate the user to Job Details page

  • Fax Line: queueName

  • Category: category

  • Fax Number: payload.fax.toPhoneNumber

  • Status: status

  • Assigned To: assignedTo

    • This field could be missing in the json which indicates it’s Unassigned

    • If the user is not admin of the current queue, then they are shown an Assign To Me button if the task is not assigned yet, clicking the button will invoke a service method which will update the assignee of the task to current user and status to IN_PROGRESS, then the user is navigated to Job Details page.

    • If the user is an admin they are shown an Assign To button (if not assigned yet) or the assignee’s name (if assigned). When clicked will pop up a model with a dropdown of all users the admin can assign the task to. If the admin selects himself / herself then the above will happen. If they choose another user then also call a service method which will set assignee to the selected user and status to IN_PROGRESS. The admin is then shown an updated table of information.

• The table needs to support pagination. It’s missing in the design but we’ll do it like the provided reference prototype.

 

Index - Details

• The location shown below the title is constructed as: queueName / category

• On page load please call a service method using the payload.dms object as parameter that will return index-details-download.json, the content field in this json is an actual PDF file which you need to load into the PDF previewer.

• Call another service method using category as parameter that will return index-details-document-config.json, you will use the fieldArray to populate the fields to show on the UI (there will be one location and one file per task):

  • Note the design just gave you a few different examples of what fields might be present, but this is totally dynamic and you have to construct the UI based on the json’s fieldArray

  • There are a few possible types of input: string, number, date, boolean, dropdown:

    • string, number: these will be text inputs, but for number make sure only numbers are allowed

    • date: show a date picker

    • boolean: a dropdown with two values Y and N

    • dropdown: when a given field object in fieldArray has a field named fieldEnumValue (with an array length > 0) then we use the objects in the array and map over the displayText value to populate the options. However, we use the value property on the object when sending the data to the API

  • You have to validate each field based on the required and length (if present) fields.

• If either of the above calls fails with an error, you should show an error message on the UI, otherwise populate the UI (pdf preview and the fields):

  • Show 'New' for tasks with a status of 'READY', and all input fields are editable and all the buttons are enabled.

  • Show 'In Progress' for tasks with a status of 'IN_PROGESS'. If the user viewing it is the user it is assigned to, all fields are editable and all buttons are enabled; If it's not the user it is assigned to, then all fields are disabled (readonly) and only the Download button is visible.

  • Show 'Indexed' for tasks with a status of 'COMPLETED', and all fields are disabled, and only the Download button is visible.

  • Show 'Deleted' for tasks with a status of 'DELETED', disable all the fields (readonly) and only the Download button is enabled.

  • Show 'Failed' for tasks with a status of 'FAILED', disable all the fields (readonly) and only the Download button is enabled.

• Download will save the content into a local file.

• When the Index button is clicked, validation must be performed on all the editable fields. If any field contains invalid value it needs to be highlighted with an error message shown below it. If there’s no validation error, call a service method that will simulate the upload / update of the file and document fields. If the response is an error, show an error message, else if the response is successful, the user is navigated back to the table page with the same filtered results shown.

• If the Split button is clicked, navigate to the Split page.

• Delete button: call a service method to simulate the deletion of task which will change its status to DELETED

• Move button: when clicked the user is given a dropdown of all the categories and another dropdown of all the queues (Fax Line) the user has access to. The user must select a category first and then the queues (Fax Line) belonging to the selected category will show in the 2nd dropdown.

  • Only when both dropdowns are selected should the Submit button be enabled. On clicking Submit please call a service method to simulate updating the location, and the location on the user must be updated to the new Fax Line / Category.

 

Index - Split

• On page load we display the document from the previous detail page using the PDF viewer. Once all pages are assigned to new documents and the user clicks Split, please call a service method to simulate the action.

• If the response indicates error, please show an error message. If the response indicates success, please call another service method to simulate document upload.

• If the upload fails with an error, show an error message. If the upload succeeds, call another service method to simulate updating the task.

• If updating the task fails, show an error message; If that succeeds, please navigate to the task list / table page with the new tasks added to the view.

 

Send

• On page load please make a service call that will return send-content-templates.json. If there’s an error please show a loading indicator, otherwise please populate the Cover Sheet dropdown with the following values:

  • For each element in the json array, use displayName as label, and name as value

  • Also include these two fixed options: Custom and None

• For both the Recipient and Sender sections, we only need the fax number field, please remove the other ones in your implementation

• When a cover sheet from the json is selected, we should dynamically create a section right below the dropdown with fields defined from configuration.inputs array in the json, the logic and validation should be the same as when you populate the job details page.

• For Custom and None cover sheets this section should be hidden.

• When a document is selected from local drive, the UI must show the preview of the document:

  • Ideally we should support previewing multiple types of documents, please explore this library and see if it meets our requirements: ngx-doc-viewer

  • If the above doesn’t work well enough, then we can use ng2-pdf-viewer for pdf viewing

  • Since there can be multiple documents, it would be ideal if the library accepts a list of documents and can iterate through them (or our custom code can do that).

• When the user clicks the Send button, the UI should validate all fields (they should all be required, design missed asterisk on some fields, please add them too), if any field is missing or valid, you need to highlight them and show an error message below the field.

• If all fields are valid, call a service method to simulate sending the fax, if the response indicates an error, show an error message; otherwise show a success message and then reset the forms to blank state.

 

General Requirements

• Make sure you don’t just copy & paste code to create the UI, it’s very important to maintain code reusability so that integration will be easier later. This will be evaluated in the scorecard as a major requirement.

• Do NOT use global z-indexes.

• No errors with production build.

• Must pass standard lint and NPM audit.

• The data to be displayed must come from local JSON files and cannot be hardcoded.

• The delivered UI must closely match the provided design.

• The pages should clearly indicate invalid input as shown in design.

• Must follow Angular best coding practices.

 

HTML Requirements

• HTML should be valid HTML5 compliant.

• Provide comments on the page elements to give a clear explanation of the code usage. The goal is to help future developers understand the code.

• Please use clean INDENTATION for all HTML code so future developers can follow the code.

• All HTML code naming should not have any conflicts or errors.

• Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)

• Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.

• No inline CSS styles- all styles must be placed in an external stylesheet.

• Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.

 

Code Requirements

• Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.

• Please use clean INDENTATION for all CSS so developers can follow the code.

• Do not create a single .css/.scss file for the whole app. Each component should have its own stylesheet file.

• Ensure that there are no lint errors.

• All CSS naming should not have any conflicts.

• You’re free to choose between CSS & SCSS but you need to use flex instead of float.

• Follow a clean folder structure.

• Use CSS3 Media Queries to load different styles for each page and don't build different pages for different devices / layout.

• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.

• Make sure npm run build works without any errors.

 

Javascript Requirements

• All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code. 

• Use typescript and linter for code quality

 

Licenses & Attribution

• Third-party assets used to build your item must be properly licensed or free for commercial use. MIT, some modified BSD, Apache 2 licenses are ok, but if a library is not commercial friendly you need to get our approval first.

• Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.

 

Browser Requirements

Windows: IE 11+, Edge (chromium based version), Chrome (latest)

Mac: Chrome (latest)

 

Documentation

Register to download the following documents we provided in the forum:

• Design Source File (in Sketch format)

• JSON files

• Client themed css

• Reference prototype

Final Submission Guidelines

• Code that covers all the requirements.

• A detailed README file including information on how to setup, run and verify your application.