Register
Submit a solution
The challenge is finished.

Challenge Overview

Challenge Overview

  • Implement UI prototype for the given design. The APIs should be integrated as well. 

 

Project background

Our client Novus is a leading Telco provider that offers products (devices and accessories) online as well. To be able to maintain their online catalog they put together a system over the years based on many requirements, so they can make sure all the information that is being present in the catalog are available, correct and of good quality.

 

Currently, the system is based on Excel templates and a lot of manual process. Most data comes from existing Sharepoint databases (MAP DB) and a couple of other pieces of information have to be filled in by different employees. To be able to assign tasks relating to the tables and to keep an audit trail they utilize JIRA at the moment. 

 

JIRA is used by our external partners and will continue for the foreseeable future for cross-team tasks. However, this tool should help manage those tasks.

 

At the end of the process, the information has to be approved by a senior employee, so the content can go online. The data processed by the proposed system, the Novus ORDIS (Organizational Resource Document Intake System) will be saved to another working database, that feeds the online catalog. The data is not being saved back to the original source, the MAP database.

 

The purpose of this project is to create an end to end web-based system, in which all these tasks can be handled.

  

Technology Stack

  • ���NX
  • Ngrx
  • Angular 9
  • Angular Material

Page Requirements

The backend code is ready, and all APIs should be integrated properly. There is UI mapping file and postman files in the docs folder of the codebase, please check that for more details. 
The prototype should not call unnecessary apis, especially on the product details screen, it should maintain the product details in the store properly. We will reject the submission if the major issues in the submission require too much effort to fix. 

All remaining screens are in scope. And here is the marvelapp: https://marvelapp.com/5gc8906

Here are the details of the screens that are in scope. 

Product Details (20 - 29, 40, 41)

  • User can click on the product on dashboard to open the details screen, note that device and accessory have different fields
  • Call /products/:productId to get product details
  • The product fields are grouped, please define the field - group mappings in the config file
    • ���the screen in design is for accessory, please define multiple groups for accessory product
    • you only need to define one field-group for device's fields, and have another group for the compatible accessories
      • ���Only need to have the compatible accessory tab
  • For each field, please configure the field input type and options too:
    • text
    • radio group with Yes or No
    • Dropdown with single choice
    • Dropdown with multiple choices
  • If user clicks the "Edit" button on product details screen, the button is changed to "Save", and all fields are changed into edit mode.  Show a "Cancel" button before "Save" button to cancel the changes. 
    • ���the save product API will return the updated product data. No need to call the get product details API again. 
  • The "X Data Points" section should only be displayed if the returned needAttentionCount > 0 (in product details api response). 
    • And when it's clicked, call the /tasks?productId=xx&onlyMyTasks=true&status=OPEN&pageNo=0 to collect all the flagged fields and display them in edit mode with current product field values. 
    • Click Save will call the PUT /products/:productId to save the new values. 
    • You can reload this api too when user add/update/delete a task. 
  • User can edit the product group
  • Right side bar has following tabs
    • Overview - pull from product details
    • Activity Log - call the /activityLogs?referenceId=:productId&activityType=PRODUCT to get the activities for this product.
      • Click "Show more" to append next page to the list. Don't show it if there are no more pages
      • 41A - there is a new activityType dropdown list - show Field Edit and All options
        • when field edit option is selected, call the API with an extra action=EDIT parameter to load field edit activities
      • for field edit activities, user can click it to show the revert modal dialog to revert the field changes.  
      • use the createdAt and createdByUser of the 1st activity as the latest updated date and updated by user of the product on the overview tab. 
    • Tasks - call the /tasks?productId=xxx&status=OPEN to get open tasks for this product. Show a "Show more" link to next page
      • Use the total open task count as the total open tasks of the product on the overview tab
      • For the "Show completed tasks" link - when clicked, call the /tasks?productId=xxx&status=COMPLETED to show the completed tasks instead, and then show a "Show open tasks" link instead. Show a "Show more" link to load next page. 
        • ���Use the total completed task count as the total completed tasks of the product on the overview tab
      • Call GET /tasks/:taskId/comments?pageNo=0 to get all comments, and call the POST /tasks/:taskId/comments to add a comment.
        • Simply add the comment to the top of the list, there is no need to reload the comments list after addition. 
      • Add task
        • The flag data points dropdown list should come from the configured field list
        • Assign to - it should be an auto-complete user list, call the /users?search=xx?pageSize=10 to get the users. 
      • Update and Delete Task - call the corresponding apis. 
      • Mark the task as completed
      • You can reload the task list when you add or delete a task or mark task as completed 
    • Product Notes
      • Call GET /products/:productId/notes to get the product notes. Show a "show more" button if there is a next page to load. 
        • You need to use the 1st one as the product's latest note on the product overview tab. 
      • Call POST /products/:productId/notes to add product note,
        • simply add the note to the top of the list, no need to reload the whole notes list, and use it as the product's latest note too. 
      • Update and Delete Note - call the corresponding apis
      • You can reload the note list when you add or delete a note 
  • Revison History
    • ���41A - Remove the "Only fields with edit activities" toggle. 
    • User can hover the mouse over the field to show the options:
      • ���Edit - edit in place. Show the save and cancel buttons at the top too to save the changes and cancel it. 
      • Add task - show the add task panel with this field selected by default
      • Revision History - call the /activityLogs?referenceId=:productId&field=xxx to get the activity logs for this field only. 
    • there are two 41B - only implement the 2nd 41B screen
    • Call the corresponding revert API to revert the changes. 


Family Details (30)

  • User can click on the product family on dashboard to open the details screen
  • Call the /product-families/:productFamilyId to get the family details
  • Like the product, each filed input type and options should be configured
  • If user clicks the "Edit" button on details screen, the button is changed to "Save", and all fields are changed into edit mode.  


Bulk Edit Family (31)

  • User can select product families and click the bulk edit on the dashboard to open this screen
  • Carryover the selected product family ids and names
  • Show all the product family fields in edit mode
  • Call PUT /product-families/bulk api to save the changes - only edited fields' values are saved. 
  • Add more product families - Go back to the dashboard screen with the selection maintained.


Bulk Edit Product (32)

  • User can select product and click the bulk edit on the dashboard to open this screen
  • Carryover the selected product ids and names
  • Show all the product fields in edit mode
  • Call PUT /product/bulk api to save the changes - only edited fields' values are saved. 
  • Add more products - Go back to the dashboard screen with the selection maintained.


Tasks Page

  • Instance Edit: The fields should be displayed according to the configured input type & options. 
  • And if user drags any task into completed list, the instant-edit panel should be closed. 
  • The tasks api now returns a totalCount, use it in show all completed text


Notifications update
  • the notifications api now returns a hasUnRead flag, use it control whether the red dot should be displayed or not. 
  • add a "Mark All as Read" link at the top to call the /notifications/markAllAsRead to mark all notifications as read. 

 


 

GENERAL REQUIREMENTS

  • Must use Angular 9 and follow the provided design. 

  • Searching / filtering should work whenever applicable.

  • Pagination should work whenever applicable.

  • Filtering/pagination happens on the server side so you need to pass the query parameters and the server is expected to return the pagination info (pageSize, total etc).

  • Implement popup for confirmation and warning messages. Do NOT use browser alerts, but use custom styles popups as shown in the design

  • Show loading spinners when populating data from API to UI

  • Implement validation errors (for example: login error as shown in design), and restrict user inputs based upon data type (for example, for a year input, user should only be allowed to input numbers). 

  • No linting errors

  • No errors with prod builds

  • You are expected to create a detailed README file including information on how to setup, run and verify your application.

 

CODE REQUIREMENTS

  • interface should be created for types and any type should be avoided. 

  • Do not create a single .scss file for the whole app. Each component should have its own stylesheet file. You should also define variables and common scss for the whole application to avoid duplication. 

  • Ensure that there are no lint errors.

  • You should use SCSS and you need to use flex instead of float.

  • Follow a clean folder structure: https://itnext.io/choosing-a-highly-scalable-folder-structure-in-angular-d987de65ec7

  • Create small and reusable components.

  • Auth and Role Guard must be implemented

  • Follow Angular Style Guide: https://angular.io/guide/styleguide

  • Follow Angular Best Practice
     

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 and free for commercial use. MIT and Apache v2 licenses are ok, for any others please check with us to get 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+, Chrome latest, Firefox latest

  • Mac: Safari Latest, Chrome Latest, Firefox Latest



Final Submission Guidelines

Submission Deliverable
  • Patch file
  • Updated README with deployment and verification guide

ELIGIBLE EVENTS:

2020 Topcoder(R) Open

Review style

Final Review

Community Review Board

Approval

User Sign-Off

ID: 30122620