TOSCA POC VI | Constraint Editor 2nd and 3rd Lvl functions

Welcome to the TOSCA POC VI | Constrain Editor 2nd & 3rd Lvl 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 challenge, we had created the Level 1 function. In this challenge, we are going to create level 2 & level 3 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 2 & Level 3 functions are attached in the forum.

1. Storyboard:

Only the sections marked in green are in scope. Other than that the sidebar should also be updated & button functions should work.

1. This is the list of function in the imported YAML.
2. Constraint Editor: This is the Detailed view of a single function.
3. Pink bracket represents the 2nd level function.
4. Orange bracket represents the 3rd level function.

2. Existing Submission overview

• Importing blueprint YAML, creating sidebar structure & level 1 function implementation has already been done in the previous challenges.

2. Updating sidebar section's Inputs node.

• The sidebar section's inputs node should show more details. Current it only has 1st level functions. Update the YAML to have a few 2nd level & 3rd level functions by default.

3. Main View

3.1 Inputs

• Clicking any Sidebar > Inputs > tree node should show the details of that node in the right side main view. It's already been implement make sure it works even after implementing the requirements of this challenge.

4 Constraint Editor

Ref: 1.2 Storyboard section

1. Update this constraint editor to support 2nd level & 3rd Level functions along with the 1st level function.
2. The 2nd level function is a grouping of 1st level functions.
3. The 3rd level function is a grouping of 2nd level function.
4. Refer to the attached ppt in the forum to know more.
5. Constraint editor is a reusable component. Here we are showing its use in inputs.

5. Navigation to different Inputs list items

• When a user navigates to different Input list items in the sidebar, then the main area content changes based on the selected node.
• If the user goes back to any previously edited node, then the changes there should be preserved. The existing submission uses local-storage to achieve this.

6. View Yaml & Download

• Clicking the View YAML button should show the YAML content in the editor based on the updated data.
• Clicking the Download button should download the YAML file based on the updated data.