ABB RCS Angular Prototype - Policy General & Assessment

CHALLENGE OBJECTIVES

• Update the Policy - General page implementation in an existing Angular 7 based prototype
• Implement new Assessment pages into the prototype
• There are basically 2 unique pages and some popups, with one of the pages having 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.
 
Policy SME can update the advanced policies now, here the entrance to the page:

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 General Information tab and currently disabled Assessment tab is what we need to work on

 
General Screens (General/02_01 - General/02_05)
The general screens are all in scope:

1. We already had the general screen implemented in the current code base, but in this challenge we need to update it based on the new design.
2. If user selects Action type “Advanced”, the Advanced tab will be activated else they will be disabled. In this challenge Advanced tab will be empty for now, but Assessment tab will be fully implemented.
3. Once user selects Action type as Advanced and then checks one of the Planning types, Reocurrence drop down will appear along with Rationale section.
4. New Rationale can be added to the table (attaching / adding PDF should work), functions like sorting, filtering etc… must work properly like other existing tables in the prototype.

 
Assessment Screens (18.01.01 - 18.07.02)
All the assessment screens are in scope. Note that in the general screen when user selects Maintenance type as “assessment” then the assessment tab gets activated.

1. User can add new questions here and save them.
2. Create Questions (first time or subsequent):
   1. Question can be expanded or collapsed
   2. When expanded, users can add question details
      1. Question Name & Description: String
      2. Reference number: auto generated in given format in screens
      3. Weightage factor: decimal
3. Maximum no of questions is 20
4. Individual Question can be deleted by clicking of delete button, it will show confirmation before deleting it
5. Reset will delete all questions on the page, it will show confirmation before resetting
6. Please take care of the tooltips as per the design

 
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)
• Properly implement internationalization-i18n. Please define the mechanism and provide all resources in English. Make all messages, labels, etc configurable. Please follow the same approach we have done in the base code.
• 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.