ABB RCS Angular Prototype - Advanced Policies Formula Editor

CHALLENGE OBJECTIVES

• Implement new Policy Advanced - Formula Editor pages into an existing Angular 7 based prototype
• There’s basically 1 unique page with some complex operations to be built

 
PROJECT BACKGROUND

• RCS is an Asset Reliability Centered Business Performance Tool, specifically designed for Power Grids and Substations asset reliability management. For this project, we are going to run a series of prototype challenges to build a web based UI for the tool.

 
TECHNOLOGY STACK

• Angular 7
• Bootstrap
• HTML5
• Javascript
• CSS

 
SCREEN REQUIREMENTS
The following screens are all in scope of this challenge, and we’ll provide sketch file which contains full design.
 
We are creating a smart editor here which will create statements, please check the details below:
 

1. Login as olduser
2. Select the Policy SME role on the top right corner
3. Check any row in the table, click the Edit button at the bottom
4. Now you are on Policy page, the Advanced tab is what we need to work on, “Advanced” tab will only be activated, if we have selected “Action Type” as “Advanced” on “General Information” screen.

 
***IMPORTANT: Please note that 16.01 - 16.13 are only showing the UX / workflow of the screens, you follow them for functions / workflow only. For styling you MUST follow the ones in Visual Design - Key Screens section instead.

***Note: register to download full spec from forum which contains some screenshots.
 
16.01 Add First Statement
Once we click on add first statement or + button, new statement will be added and detailed box will be opened in right panel.
 
So all statement will have the following fields:

1. Property category: Dropdown
2. Property: Values will be populated after selection of Category dropdown
3. Relational Operators: (=, < , > , <= , >=  and != )
4. Value: textbox

 
Whenever we select any statement right side statement detail panel will be shown. Also from center editor you can edit anything in statement, whatever details will be entered in right panel will be shown here immediately.
 
16.02 Add Subsequent Statement - Same level
Once we have added statement, on click of + button, we can add more statement on different or same level.
 
16.03 Add subsequent statement – nested level
16.04 Add subsequent statement – nesting level
16.05 Add subsequent nested level
We can do subsequent level nesting also, please check the flow on zeplin, they should be pretty straightforward.
 
16.09 Delete Level
16.10 Deleve Level 1

• Select a statement, go to the right panel, click on the top right (...) and delete it.
• Delete Level: select operators for statement, go to the right panel, click on the top right (...) and delete it.
• Delete level 1: if we delete a top level, all its child levels will be deleted.It will show the alert with detailed information about its leveling, Please check the flow and screens in details. Alert messages will be dynamic depending on statements and level (see 16.10.03  and 16.10.04).

 
16.11 Reset Formula
It will clear the editor screen, make sure confirmation is shown before actually resetting the formula.
 
16.12 Scroll Window
16.13 Tooltips
These show general styling for scrolling window and tooltips and need to be implemented on this screen.
 
CLIENT SPECIFIC REQUIREMENTS
1. Avoid ngx datatable for records display.
 
2. Please tell your developers to use the below example as reference.
Implement bootstrap in all pages – i.e. use the 12-column grid layout provided by bootstrap.
 
<div class = col col-sm-6 col-md-4 col-lg-3 col-xl-3> </div>
 
Col - screen size < 576px
SM - ≥576px and < 768px.
MD - ≥768px and < 992px.
LG - ≥992px and < 1200PX
XL - > 1200PX.
All pages must be responsive.
 
3. Support for the following browsers Chrome , Safari and Internet explorer-11 and above.
 
4. We need to make sure all the screens (except SLD) are responsive (bootstrap enabled) . Also there is no restriction on the size of the screen like 760PX etc.
 
In short they must be responsive using Bootstrap and should adapt to screens size.
 
IMPORTANT REQUIREMENTS

• Bootstrap 4 should be used
• Prototype should use configurable field names and validation messages (Key and Values are Defined in JSON file)
• Implement field level validation (error message should be displayed below the mandatory fields)
• Show loading spinners when populating data from API / local JSON to UI
• Implement popup for confirmation and warning messages. Do NOT use browser alerts, but use custom styles popups like the ones we have in the prototype
• No linting errors
• No errors with prod builds
• Please follow zeplin designs accurately, follow fonts, colors, padding, margins everything.

 
GENERAL REQUIREMENTS

• Must use Angular 7 and follow the provided design.
• The main content should have fluid width to fill all the available space.
• Pagination should work whenever applicable.
• 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 page for different device/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

• Windows: IE 11+, Chrome Latest, Firefox Latest
• Mac: Safari Latest, Chrome Latest, Firefox Latest
• Tablets: Safari / Chrome on iPad, Chrome on Android Tablets

Final Submission Guidelines

FINAL DELIVERABLES

• Full code that covers all the requirements.
• A detailed README file including information on how to setup and run your application.
• Please note that winner is responsible of raising a merge request to our code repo.