TOSCA Admin

Welcome to the TOSCA Admin challenge. In this challenge, we are looking for you to create a new module called Admin in the existing TOSCA APP. The new module should make use of NgRx & Redux.

Let us know any question you have!

Technology stack

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

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/59039023
2. Storyboard source has been provided in the forum.
3. The existing TOSCA app has been attached in the forum.
4. NgRx docs

1 Sidebar

• Ref: https://marvelapp.com/62b5ae5/screen/59039023
• Clicking the admin icon from leftmost sidebar should navigate to the Admin Help page.
• The Admin menu options (Types, Node Types, Relationship types...) should come from a JSON. You can create a new JSON file for this.
• In the sidebar, the search should work same as it's there for the Components https://tc-tosca-nw.herokuapp.com/yaml-editor/policies-workflows .
• Clicking a parent menu links should toggle the show/hide state of its child menu links.

2 Admin Help

• Ref: https://marvelapp.com/62b5ae5/screen/59039023
• All the business data on this page should come from a JSON file, you can create this file based on your judgment.
• For the video sections, embed a youtube video. For the video player implement the default youtube player layout.

3 Node Types

• Clicking a Node Types menu link from sidebar should expand the "Node Types" menu section & show a "+" icon.
• Clicking the "+" icon should append the child item list with one more child menu link.
• Clicking a child menu link should show the details of that menu from where a user can add/edit the details.
• Clicking the cross button "x" should remove that menu from sidebar & the JSON object.
• The tile text ("Node2" here) should be editable. Clicking this should allow the user to edit it. https://d.pr/free/i/viHzkW
• In Properties, Capabilities, Requirements, Interfaces & Operation sections, clicking "+ Add" should add a new option from the top.
• Follow the height of these sections from the storyboard. When adding more options a scroll-bar should appear.
• In the drag & drop section, a user should be able to upload an image by either dragging & dropping an image in this area or clicking the Upload image. Show the image thumb based on the image uploaded.
• Ref: https://marvelapp.com/62b5ae5/screen/59333084 , Tooltip should be implemented. Data in this section should come from a JSON file

4 Relationship Types Capability Types & Requirement Types

• The content & functions in these two tabs should be similar to that of 3 Node Types.

5 Policy Types

• Ref: https://marvelapp.com/62b5ae5/screen/59333084
• Tooltip should be implemented. Data in this section should come from a JSON file
• In Properties & Triggers sections, clicking "+ Add" should add a new option from the top.
• Clicking the "x" button should remove the content row.
• Follow the height of these sections from the storyboard. When adding more options a scroll-bar should appear.

6 Workflow Types

• Ref: https://marvelapp.com/62b5ae5/screen/59333087
• Tooltip should be implemented. Data in this section should come from a JSON file
• In Properties & Steps sections, clicking "+ Add" should add a new option from the top.
• Clicking the "x" button should remove the content row.
• Follow the height of these sections from the storyboard. When adding more options a scroll-bar should appear.

7 API List

• Add the sidebar menu link only. Child menu items for this are not required.