TOSCA Nodes attributes II | Requirements & Capabilities

Welcome to the TOSCA Nodes attributes - II | Requirements & Capabilities challenge. In this challenge, we are looking for you to create a new module Nodes attributes in the existing TOSCA APP. The new module should make use of NgRx & Redux.

Let us know any question you have!

This challenge is a continuation of [Fast 48 hrs] TOSCA node attributes | Properties.
Participants should enhance their submission form the previous challenge based on the requirements of this challenge such that the submission here should implement the requirements from the [Fast 48 hrs] TOSCA node attributes | Properties challenge as well as this challenge. We are only going to review your submission based on the requirements here. However, it must implement the requirements of the prev. challenges, it's okay if there are bugs in that.

Technology stack

• Angular 7
• NodeJS
• HTML
• SCSS
• JavaScript
• Redux
• NgRx

General requirements

Layout

• The UI should support resolutions 1920px x 1080px and above.

Framework specific

• Follow the best practices of NgRx listed here.
• Create a state that should be accessed by many components and services.
• Follow the SHARI principle:
• • Shared: a state that is accessed by many components and services.
• • Hydrated: a state that is persisted and rehydrated from external storage.
• • Available: a state that needs to be available when re-entering routes.
• • Retrieved: a state that must be retrieved with a side-effect.
• • Impacted: a state that is impacted by actions from other sources.
• Store & Store Devtools integration should be added.

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

The layout of the given app should be updated based on the new storyboard. As much as possible use the same directory structure.

0 Resources & links

1. Marvel storyboard https://marvelapp.com/62b5ae5/screen/59039051
2. Storyboard source has been provided in the forum.
3. The TOSCA app has been attached in the forum.
4. NgRx docs

1 Requirements

• Ref: https://marvelapp.com/62b5ae5/screen/59039048

• The requirement list should list the requirements of the inherited node selected in the *Derived From` tab & the user added requirements.

• Clicking the Add New should allow a user to add a new requirement.

• Append the requirement list with a new requirement name.

• The user added requirement names should be editable. Clicking/focusing the requirement name should select that requirement & show an underline/border below the requirement name text. On removing focus from the requirement name, it should hide the underline/border, however, the requirement should remain selected unless the user clicks any other requirement name form the list or adds a new requirement using Add new button.

• For the right side sections use a placeholder image for now. These will be implemented in the next challenge.

• For every requirement (including inherited requirement) user should be able to edit/update the linked attributes.

• Follow the storyboard for properties tab layout.

• Left side section contains the properties *modable_entity, target_entity, requirement_type & *. This should be editable only for user-added properties.

• Right side section shows the value editor. The value editor has been implemented in the given application. Please reuse the same. Ref: https://d.pr/free/i/cqWmcg

3 Capabilities

• Ref: https://marvelapp.com/62b5ae5/screen/59039025
• The capabilities list should list the capabilities of the inherited node selected in the *Derived From` tab & the user added capabilities.
• Clicking the Add New should allow a user to add a new capability.
• Append the capabilities list with a new capability name.
• The user added capabilities names should be editable. Clicking/focusing the capability name should select that capability & show an underline/border below the capability name text. On removing focus from the capability name, it should hide the underline/border, however, the capability should remain selected unless the user clicks any other capability name form the list or adds a new capability using Add new button.
• For the right side sections use a placeholder image for now. These will be implemented in the next challenge.

4 Synching Requirement & Capability with the network diagram

• Every node has Requirements & Capabilities. If any of the requirement_name matches any of the capability_name then only those two nodes can be connected.
• As a user updates the requirements and capabilities of a node the network diagram should also be updated based on these changes.
• Let's say two nodes are connected & user updates the capabilities & requirements such that capabilities of the node no longer match any requirement of the other nodes. In this case, the existing connection should be removed from the network diagram.
• Ref: https://d.pr/free/i/JjqpDO the tick & cross icons when selecting a node should also be updated based on the change made by a user for a node.

5 Existing Function

• All the existing functions implemented in this application should work as it is.