ABC Price Optimisation Web App - Geo Management

Challenge Objectives

• Implement the Geo Management, 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 Geo Management, 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. 

Geo Management

1.1. Geo Assignment

• This is the landing screen when the user clicks the Geo Management menu.

• Data should be loaded from this file: 01.1 geo-mgmt-json-list.json, a loading indicator must be shown on page load.

• You need to use the table component here to support multi-sort, column resizing and column repositioning via drag and drop. However deletion should be disabled on this table.

• When a row is double clicked, show a loading indicator and then the Geo Selection section is shown:

  • The Region and Business Area values are populated from the row

  • The Geography tree is loaded from this file: 01.2 Geo-Assignment-GetAvaliableGeos.json

    • Please note that the filter must work on the tree

    • Please note we already have this component built and you can reuse it, however you cannot use the existing service method to get the Geography data and must use the new one we provided (i.e. you need to create a new service method for this)

  • The Selected list is loaded from this file: 01.3 Geo-Assignment-SelectedGeographies-resp.json

  • Users can move folder nodes or file nodes to the right but each unique node will only appear at most once in the right side list. If a parent node is already in the right side list, moving a child node should not be allowed (disable the arrow icon); If a child node is already in the right side list, moving a parent node is allowed and that will remove all child nodes from the right side list and simply show the parent node.

  • Users can delete selected values from the right

  • Save button is enabled if any changes were made from the original state. On clicking Save the confirmation popup must be shown, then a loading indicator, and finally the success message should be shown and the section is hidden again.

  • Clicking cancel will hide the Geo Selection section.

 

1.2. Sub-Region Maintenance

• Data should be loaded from this file: 02.1 sub-region-json-list.json, a loading indicator must be shown on page load:

  • Sub-Region will be shown as: subRegionDesc - subRegionCode

  • Last Mod Date must be formatted exactly as shown in design

• You need to use the table component here to support multi-sort, column resizing and column repositioning via drag and drop. However deletion should be disabled on this table.

• This Region dropdown will contain the regions from the 1st tab (i.e. the ones from 01.1 geo-mgmt-json-list.json)

• There are two action icons: New and Deactivate. Please make sure these icons have tooltips on hover.

• New:

  • This will show the new popup, with the Parent Geo panel populated using the sub tree under the selected Region (the selected value in the Region dropdown). This tree can be expanded to show all the child nodes even though that’s not shown in design. The datasource of the tree is the same one we used in the 1st tab, i.e. 01.2 Geo-Assignment-GetAvaliableGeos.json.

  • Users can enter a description, select any folder node, and then click the Create button. Please note the button is disabled until the description is provided and a folder node is selected. Please note this tree view will only show folder nodes.

  • On clicking Create the Children Geo panel is expanded, and the bottom left panel will show the tree view with all nodes (including file nodes) shown.

  • Save button is disabled until at least one node (folder or file node) is moved to the right. Clicking Save should show a loading indicator first, then the success popup, and finally back to the table when the success popup is dismissed. Please note the message to be shown on the popup is from 02.2 create-sub-region.json.

• Deactivate:

  • There are two client side validations to be done here:

    • Any row with Data Source of Polaris cannot be deactivated

    • Any region or subregion with non-empty children (check 01.2 Geo-Assignment-GetAvaliableGeos.json) cannot be deactivated.

  • If there’s no error, show a loading indicator and then the green success message.

• Double clicking a row will show the Edit popup, on this popup:

  • Show a loading indicator first before populating the tree and list at the bottom

  • The tree shows all child nodes (both folder and file nodes) under the Region indicated by the row being clicked, data again comes from 01.2 Geo-Assignment-GetAvaliableGeos.json

  • The Selected Geography list is loaded from this file: 02.3 getSelectedGeographies-bySubregion.json

  • Save button is disabled until some changes are made, the Selected Geography list cannot be empty (if empty the Save button must be disabled)

  • When the subregion itself (or any child nodes of it) is clicked in the tree view, the move icon is disabled.

  • On clicking Save, show a loading indicator, then a popup with message from 02.4 save-children.json, dismissing the popup will go back to the main table, with the green success message shown at the top of the 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.