Challenge Overview
Welcome to the TOSCA Admin II challenge. In this challenge, we are looking for you to enhance the Admin module. 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
- Marvel storyboard https://marvelapp.com/62b5ae5/screen/59333085
- Storyboard source has been provided in the forum.
- The existing TOSCA app has been attached in the forum.
- NgRx docs
1 Update Node Types
- Ref: https://marvelapp.com/62b5ae5/screen/59333085
- Form the Capabilities section and Requirement section, remote the + Add icon.
- There should be only one value for each of these so keep only one drop-down input control & remove rest of the dro-downs from both of these sections.
- Remove the "x" icons & increate the width of the drop-down control to cover the empty area.
- In the upload image icon section, replace the upload button, the label "Drag to upload image..." and the drag-drop function with a drop-down.
- The drop-down should have 7 options to allow selecting one of these 7 icons
- The drop-down options should appear similar to this drop-down. Data for drop-down options should come from JSON. You can go to the network editor in the give submission to see the drop-down in the snapshot.
2 Update Capability types & Requirement types
- Ref: https://marvelapp.com/62b5ae5/screen/59333089 & https://marvelapp.com/62b5ae5/screen/59333088
- Based on these layouts updated the Capability types & Requirement types tab content
- On the Right side there is a multi-level constraint editor. You can reuse the existing multi-level constraint editor implemented in the give submission.
3 API List
- Ref: https://marvelapp.com/62b5ae5/screen/59333086
- Implement the add function to add new API list.
- Clicking the "+" from sidebar should add a new API-list item.
- Implement the Upload Excel file function & only allow uploading file with extensions *.xls & *.xlsx.
- Add content to this tab by following the storyboard.
- Tooltip section should also match the storyboard when this tab is selected.
Final Submission Guidelines
- Full source code with all the requirements implemented.
- Detailed readme in markdown format that describes how to configure, build and run the app.
- Verification video or doc.
Licenses & attribution
- Third-party assets used to build your item must be properly licensed or free for commercial use. MIT, some modified BSD, Apache 2 licenses are ok. If a library is not commercial friendly you will need to get our 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.
FAQs
After submission as a submitter what should be my next step?
Once the challenge submission phase is over the assigned reviewers are going to review all the submissions based on the challenge scorecard. They are expected to raise all issues found in the submissions they are reviewing. After the completion of review phase the Appeal phase status. In this phase, the submitters should go to the Online Review page, select the project & have a look at the issues raised by the reviewers. If you disagree with the reviewer on any issue/comment, raise an appeal by clicking the 'Appeal' button associated with the section and entering the appeal comment.
When & where I can see the challenge results?
After the Appeal response phase is over the results are displayed on the challenge specification page as well as on the online reivew page.