ABC Price Optimisation Web App - User Registration and User Management

Challenge Objectives

• Implement the User Registration and User Management pages from the web app.

 

Project Background

• Our client who is a worldwide IT company would like to modernise the UI of one of its internal web applications, which is a price optimization tool. They are satisfied with the flow and the interaction within the current app, so they would like to keep those and would like to have a more modern style for the UI. 

• The application is used to support price management through several functions and has many modules.

• The application contains many complicated tables which mostly consume dynamic data.

 

Technology Stack

• Angular 8

• HTML5

• Javascript

• CSS

 

API Integration

Although the API is not ready yet, you need to implement simple controllers to fetch the data showing in the app from 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.

 

Please follow the way we are doing this in the current code base with any new data to be used in the prototype.

 

Dynamic Table Component

This prototype must utilize the dynamic table component wherever possible to implement common table features like multi-sort, column resizing / repositioning by drag and drop, etc.

 

Screen Resolution Support

• Existing pages support a minimum width of 1024px, this challenge must support the same width

• Our client can have a height as small as 600px, so it’s important that all pages still work under this height. This means when there’s not enough vertical space, a scrollbar must be present for the users to scroll to the bottom of the page. And also means you must adhere to the spacing / margin in the design because it is specifically optimized for this.

 

Screen requirements

All screens from User Registration and User Management are in scope. Please cross compare the following with the design, and if you see any inconsistencies or have any questions, raise them in the forum for clarification / confirmation.

*** Note: the winner will be asked to raise a merge request to our repo. 
 

1. User Registration

• On page load, please show a loading indicator first

• The dropdowns will be populated with values from 01.1 user-info.json, please note the dimTypeList from the json is used to populate the list in the Dimensions panel below

• The Validate button is disabled until user enters a valid email address

• On clicking Validate, show a loading indicator, and then based on the response the behavior will be a bit different. Please check 01.2 Validate-User-Info.txt which contains three different responses, if userId in the json is not 0, then show the “User has already registered.” message and nothing else can be done by the user. If userId is 0, then the user can proceed. If userId is -1, it means the user doesn’t exist (note this part may change during the challenge).

• The User Information section will use the data from the json to populate the fields. Please note that you need to convert userRegionCode to human readable Country name, which is available in the existing Geography hierarchy data already.

• For the Geography, Product Hierarchy and Pricing Hierarchy dimensions, use the existing hierarchy v2 service methods to get the list.

  • Please note two of them are required dimensions so the Register button cannot be enabled until at least one of each if added. The filter box must work like they did on all existing pages

  • Whatever the user selects and adds will show up in the corresponding panel in the Selected Dimensions section. For example: if the user adds root node a, then child node b, then leaf node c, then all 3 will show up in the list. If the user only adds root node a, then only node a is shown in the list.

• On clicking Register, please show the loading indicator, then show the green success message based on status from Registor-response.json. If status is not success then show the red error message.

 

2. User Management

• Both the Search and Reset buttons are disabled by default, one user enters something both buttons are enabled

• On clicking Reset the user input will be cleared and buttons will be disabled again. On clicking Searching please show a loading indicator, then load data from 01. SearchUserbyNameEmail.json

• The export and refresh buttons are disabled until data is populated with data. Tooltips must be present for both icons

• Export will dump all table data into a csv with the same format as User.csv, but data must be coming the table instead of hardcoded

• Refresh will show a confirmation popup, and if confirmed, should show a loading indicator, then refresh the page (with same data)

• On clicking Details link of any row, please show a loading indicator first, then show the user details page (which is almost identical to the User Registration page but without the Validate button), the user email address field should be readonly on this page, and data is loaded from 03. getDetails.json, it should be pretty straightforward to map the data from json to the UI, but some fields like User Role comes from the previous json instead of this one.

• On the details page, there are some validations needed, please check Validations.txt for details.

• If any changes are made, the Save button is enabled (unless either Geography or Product Hierarchy doesn’t have values because they are required). On clicking Save please show a loading indicator, then a popup showing a message of “Data has been successfully saved and the user list will refresh.” if status is success (see 04. Save_Details_Success.json), or a message of “Data could not be saved.” if status is not success (see 05. Save_Details_Fail.json). After dismissing the popup, the user can click Close to go back to the table page.

 

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 linting and production build.

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

• The main content should have fluid width to fill all available space.

• Pagination should work whenever applicable.

• Must use Angular 8 and follow the provided design.

• The pages should clearly indicate invalid input data to users, for example: if user tries to submit a page without providing a required text field, the textbox should be highlighted with an error message

• Must follow Angular best coding practices

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

 

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 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

• Chrome Latest, Edget Latest (Chromium based version)

Final Submission Guidelines

• Full code that covers all the requirements.

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