TOSCA POC VII | Constraint Editor Extend Functions

Welcome to the TOSCA POC VII | Constraint Editor Extend Functions Challenge. In this challenge, we are looking for you to enhance the POC application based on Angular 2+ framework with the requirements listed below.

Let us know any question you have!

Technology stack

• Angular 7
• NodeJS
• HTML
• SCSS
• JavaScript

General requirements

Layout

• The POC should support resolutions 1920px x 1080px and above.
• The application layout should appear somewhat similar to the sides provided.
• It's NOT required to exactly match font, font-size, color, element dimension, etc because the focus is mainly on the POC functions.

Framework specific

• Imp!: Blueprint data should be fetched from YAML file for other application data JSON format mock files can be used.
• Use Observable & Observable.subscribe() method wherever applicable. You may refer this: https://angular.io/tutorial/toh-pt4#subscribe-in-heroescomponent
• Use Dependency Injection coding pattern.
• ng build should work without throwing any error.

Code formatting

• Make sure code is well documented, all classes, methods, variables, parameters, return values must be documented in every single code file, and appropriate inline comments should be provided too where the code is not straightforward to understand.
• Please use clean INDENTATION for all HTML code so future developers can follow the code.
• Use appropriate linter to validate your code.

HTML Specific

• HTML should be valid HTML5 compliant.
• 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.

CSS Specific

• Use CSS3 Media Queries to load different styles for each page. Do not build a different page for different device/layout.
• You may use SCSS in the project.

Platform

• Desktop: Chrome latest, Firefox latest (Mac & Windows), Safari latest (Mac), IE11+ (Windows), MS Edge
• IE11 is the primary browser.

App Requirement

In the previous challenges Challenge 1 & Challenge 2 we had created the Level 1, Level 2 & Level 3 functions. In this challenge, we are going to extend the support for these functions.

0 Resources & links

1. Storyboard powerpoint slides are attached in the challenge forum. Only the sides mentioned in the forum are in scope.
2. Slides explaining Level 1, Level 2 & Level 3 functions are attached in the forum.

1. Add new function

Add a 'New +' section here: https://d.pr/free/i/IeKJSb. No need to update the layout only add icons & functions.

1. Clicking the new "+" ico button should add a new function block in the list below.

2. Add new constraint editor elements

Only the sections marked in green are in scope. Other than that the sidebar should also be updated & button functions should work.
Update this section: https://d.pr/free/i/xg2vEW by adding more feature. No need to update the layout only add icons & functions.

1. Represents Level 1 fn
2. Represents Level 2 fn
3. Represents Level 3 fn
4. ...
5. ...
6. Clicking the 'x' button removes the level-2 function.
7. ...
8. Add this section in every 2nd level function. Clicking this add button "+" adds a new "AND" block & a new level-1 function.
9. Clicking the add button "+" adds a new "AND" block & a new level-2 function.

3. Adding/Removing 1st level & 2nd functions

3.1 Adding/Removing 1st level function

• New 1st level funtion can be added within a gray color group (2nd level fucntion)
• To add a new 1st level function a user should click the add button + <- Adds a function within a group. Ref the above image.
• Clicking this add a new 1st level function and a new "And/Or" block.
• Similarly we can add more new 1st level function by cliking the add button +.
• To Remove a 1st level function a user can click the Delete a function -> button on the left side for the function drop-down.

3.2 Adding/Removing 2nd level function

• A new 2nd level function (Gray colored group in above image) can be added by clicking the + <- Adds a new group button.
• To remove a 2nd level function (Gray colored group), click the - <- Removes the group icon.

4. Updating sidebar, YAML editor code & other elements

• On performing the above add/remove actions the sidebar should be updated.
• The YAML code that appears on clicking View YAML button should also show the updated code.
• Similarly clicking Download should download the updated code.

5. Actions buttons

• All the actions button present on the upper right function should work even after completing the requirements here.