ABB RCS Angular Prototype - Execution

Challenge Objectives
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.
 
Challenge Objectives
For the purpose of this challenge, we need the community to help build the Execution screens into the prototype using Angular 6 / Bootstrap / HTML5 / CSS, please check the documents in the forum to help you get started.
 
Please note that winner is responsible of raising a merge request to our code repo.
 
Technology Stack

• Angular 6
• Bootstrap
• HTML5
• Javascript
• CSS

Code Base
We’ll provide a code base with full git logs in it, please use it directly as your base for development but do NOT do local commits since we want to track all the changes and make sure your code is based on the exact commit id we specified. Failing to do so may get your submission rejected or fail review. Please be careful about this!!!

Challenge Requirements
The following screens are all in scope of this challenge, and we’ll provide sketch file which contains full design.
 
We will have two new roles in this challenge:

1. Execution TeamLead
2. Maintenance Technician

As they login to the system they will see different dashboards from the current ones for existing roles (olduser and newuser).
 
8.1.1 / Execution/Overview
When an Execution TeamLead logs in, this is the dashboard for the role. Check 8.1.1.1 / Execution/Overview, there are quite a few things to take care of this dashboard: <register to see full spec>

Here are some requirements to pay attention to:

1. Table filter should work like other table filters in app.
2. Link to SWMS page: login as olduser -> click the little shield icon on top right corner -> check any row in the table and click Edit -> go to Procedure tab -> Create new SWMS, this is the page we need to link to.
3. For assigning Members: “Assign Task Validator”, “Assign Task Preparator”, “Assign Task Owner”, we should use below design: <register to see full spec>
   And The fields name must be
   1)      FirstName
   2)      LastName
   3)      TeamName
   4)      HourlyRate
   5)      NoOfTasksAssigned
   6)      TopSkills
   (Ex: Ashwin , Kumar , Team-A, 4 , 12, C#, asp.net)
    
4. Link to asset information page: login as olduser -> Project Modelling -> SLD Edit mode -> drag a widget to the editor -> double click it -> on the popup click the document icon on top right, this is the page we need to link to.
5. Priority Dropdown: (0-20, 20-40, 40-60, 60-80, 80-100)
6. Equipment Dropdown: (Power Transformer, Load, Ground Switch) -> Multiselect
7. Substation: Multiselect (you can use some sample values from a local json file)
8. Search box: Search will filter contents from table
9. By default all drop down should say "Select ..."
10. As soon as we select Priority, “Not acknowledged” tab will be selected and table will show tasks filtered by “Not acknowledged”
11. Left panel label count will equals to the number of tasks being filtered in the right side table.
12. Paging needs to be there for the table view. Page size will be 10.
13. The plan horizon view must match the records displayed in the table.
14. The plan horizon view by default will show weekly view but can be zoomed up till yearly view.
15. Cancelled tasks will not have any buttons to edit details.
16.  “Maintenance Type” column name should be “Regularity”.
17. In timeline widget, If multiple outages are there in a day, its should say “n Outages” where n is the number of outages.
18. Also check the notes in the screenshot below: <register to see full spec> 

If we login as Execution TeamLead, the following tabs will be displayed:

1. Not Acknowledged: once user select a row and click the Review button, the following screens will come:
   1. 8.1.2 / Execution/Workspace
   2. 8.1.3/ Execution/Workspace
   3. 8.1.3.1 / Execution/Workspace
2. Under Preparation: once user select a row and click the Review button, the following screens will come:
   1. 8.2.2 / Technician/PreparationFlow
   2. Reschedule would work like this: once the user clicks on task pill and reschedule button is enabled, user uses the dates option from “schedule section” (no new date picker) and selects a new date and clicks on reschedule.
   3. Drag drop of tasks in the plan horizon is also possible to reschedule it to same week or different week by going to monthly view. User drags and drops but needs to be evaluated how the user will be warned if the duration of task exceeds the outage when placing on a new date. Proposal from client was to warn the user rather than stop as for some types of task the duration can be reduced by adding  more people. So user shouldn’t be stopped by system to choose a different outage
   4. "Task Pill" is the task that we show on timeline widget
3. Planned: Sync button will appear instead of Review button when user selects this. The following screens are involved in this flow:
   1. 8.3.1 / Technician/SyncFlow
   2. 8.3.1 / Technician/SyncFlow
   3. 8.3.2 / Technician/SyncFlow
   4. 8.3.3 / Technician/SyncFlow Copy
   5. 8.3.4 / Technician/SyncFlow Copy 2: As soon as the task is synced, sync button will be disabled and using top left arrow button, we can go back to main dashboard
   6. 8.3.5 / Technician/SyncFlow Copy
4. Under Execution: Sync button will appear instead of Review button when user selects this. The following screens are involved in this flow:
   1. 8.3.1 / Technician/SyncFlow
   2. 8.3.1 / Technician/SyncFlow
   3. 8.3.2 / Technician/SyncFlow
   4. 8.3.3 / Technician/SyncFlow Copy
   5. 8.3.4 / Technician/SyncFlow Copy 2
   6. 8.3.5 / Technician/SyncFlow Cop
5. Under Validation: when user selects this, the Plan Overview section should be hidden. And selecting a row and clicking the Review button will lead to this:
   1. 8.4.1 / Execution/ValidationFlow/Overview
   2. 8.4.2/Execution/ValidationFlow/Workspace
      1. Remove the Accept and Reject buttons at the bottom
   3. Note if a task is rejected, it will go back to Under Preparation
   4. Also note 3.5 stars is a valid input
   5. 8.4.2.1 /Execution/ValidationFlow/Recommendation view
   6. 8.4.2.2 /Execution/ValidationFlow/Recommendation view: the buttons will need to work:
      1. Edit: does nothing
      2. Delete: removes the photo
      3. Accept: accepts the recommendation
      4. Reject: rejects the recommendation
6. Cancelled: when user selects this, Plan Overview section should be hidden
   1. 8.5.1 / Execution/Cancelled tasks Flow/Overview
   2. 8.5.2/Execution/Cancelled task Flow/Workspace

8.2.1 / Technician/PreparationFlow
When Maintenance Technician logs in, this is dashboard to show. Here are a few things to pay attention to on this page:

1. Under preparation: flow and logic is the same as described above.
2. Planned: flow and logic is the same as described above
3. Under execution: flow and logic is the same as described above
4. Under validation: flow and logic is the same as described above

                <register to see full spec>

Client Specific Requirements
1. Avoid ngx datatable for records display.
 
2. Please 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

 
General Requirements

• Must use Angular 6 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

What To Submit

• Full code that covers all the requirements.
• A detailed README file including information on how to setup and run your application.