Challenge Overview
App environment:
- AngularJS application
Basic requirements for this challenge:
- Fix existing AngularJS app and Mockup services to meet the requirements
- Continue Build AngularJS app for the remaining screens
- Implement all required services to fetch the data showing in the app from JSON files. We should be able to replace the JSON files with actual API calls to integrate the app with the backend without much effort.
Project Background
The Early Alert Tool (EAT) is a data store for all of the Codes and Standards which Thor needs to follow when developing products. As codes and standards change or improve, the divisions within Thor (specifically the division leaders and product managers) need to be alerted of these changes.
The division leaders document the issues which arise from any of these changes along with and need to track details on the action plans for those issues. A number of different users would will be using the application. There could be codes & standards committee representatives who notify other key point people (product managers or division leaders) of the changes.
The main goal of the application is three-fold:
1. Highlight the standards which have been identified by the business divisions as important
2. Notify people within divisions of standards changes (email functionality)
3. Track the internal corporate action plans issues related to standards changes
We just received winning AngularJS app. This time, we need your help to continue build the AngularJS app to cover all pages requirements.
Read the challenge description carefully and lets discuss any questions you have on challenge forum.
Overall Requirements
- Application to be developed using AngularJS
- Each page will have its own specific url suffix
- The page content shall be modular so that we can create new page and renders appropriately.
- AngularJS codes written to be modular and should contain necessary factory/service methods to ensure code design & best practices.
- Check here for complete API specification to help you build the JSON file structure: swagger.yml
- Use separated JSON files to load the datas
- Important! Create best practice JSON Services that will be easy to swap with the actual REST API service on the next development.
- Requests parameters to be encapsulated as object rather than individual parameters.
- This application need build using web application with focus on Desktop only.
Important!
- Make sure to always read the challenge specs and design carefully and ask for clarifications in the challenge forum as soon as possible. Don't hesitate to not ask questions and don't just assume how to implement any possible vague requirement.
- Provide a detailed documentation on how to setup, deploy and test your submission (preferably in a README.md file). Writing clean code is very important but providing detailed instructions on how to run your code is also an important part of your submission
- Create clear documentation about how to set up your submission locally and on Heroku.
- Upload your submission to Heroku for client review, Include the link on your README.md
- Remove unnecessary / unused code from your application. You should always make sure you submit what you are required to submit.
- Create a clean folder structure and follow the latest best practices for the technology you are using.
Technology Stack
Deployment environment requirements
- Localhost
- Heroku
AngularJS as base submission:
Click Ragnar Self Registration on challenge forum!
Design Assets:
Storyboard Source Files: https://drive.google.com/open?id=1Ya28C5W22wXaWNNKHggjhdbFcxLhAzG-
MarvelApp flow: https://marvelapp.com/40d8gb0
General Requirements
- This is ERD information about the table collections in the database https://www.lucidchart.com/publicSegments/view/5345b6fa-1a47-498d-a6e6-66dafc46b17a/image.jpeg
- This is additional information about the data type https://docs.google.com/spreadsheets/d/14usuK-pnbZvywBf0NT5nek1y2L0YQEZEPz0Ra4_4ntE/edit?usp=sharing
- We just received the winning submission from Open APi for all endpoints and table/collections. You can follow each endpoints and data type to make easier when change to REST API services later.
- Your submission must explicitly address Client General Code Standard from this document: https://docs.google.com/document/d/1JLDieRq7Q8gw86FoQd2qjza33sH5Dq0PD23JH7804pc/edit
- Let us know if you need some clarifications.
Individual Requirements
1). Issues on current AngularJS app
- App look good when running locally, but when deploy the app to Heroku, json-server still using fixed http://localhost:3000, please check sample here: https://thor-eat.herokuapp.com
- We need fix this to accept environment variables based on the instance.
- If needed we can move the json-server to separated folder to make them running as separated app. You can split the code and files to separate folder for angularjs and json-server. Let us know if you have any questions.
- Fix AngularJS passing the ng test, ng e2e command, and make sure lint working.
- Edit ReadME to use best practice instructions.
- Validate and testing the steps.
- Remove unused descriptions.
- Follow correct font size implementations on current AngularJS app
- Check updated submissions on all required browsers!
- Make sure existing AngularJS app ready to deploy locally and live site!
- Overall we need the updated AngularJS app use the best practice solution and easy to expand on the future challenges.
- Let us know if you need some clarifications
User Role and Flow
Fix user role and the related page that user role can accessed:
1). Data Manager Role
- Keyword Search
- Standard Org Search
- C&S Issues
- Data Input
2). Admin Approver Role
- Keyword Search
- Standard Org Search
- Change Request
- C&S Issues
- User Management
3). System Admin Role
- Keyword Search
- Standard Org Search
- Data Input
- C&S Issues
- User Management
Keyword Search
- Hamburger menu on left sidebar need to be in same place when expand/collapse state
- Add line separator | between “Terms & conditions, Privacy policy, & Copyrights” on the footer
- When click on +4 more email link, EXD text is not aligned
- There’s scrollbar horizontal background in the bottom of browser window. Need to fix this layout to make sure that does not show up
- Clicking the Email button needs to take the visitor to the Send Email page
- After navigating to another page, the dropdown on filters becomes hidden below the table. Fix that.
- For the non-login user, there is no need to display the action column for Edit and Delete button
- Display confirmation modal like on Print button when user clicks the delete button
- Clicking the Edit button needs to take the visitor to a separate screen for the Edit page.
Edit Standard
- You can re-use same layout like on /data-input page
- Add breadcrumb with this title: “Keyword Search > Standard Name > Edit Standard”
- Need able take user back to Keyword Search
- Just need re-use the existing Create New Standard tab, remove another tabs
- Capture data on required fields.
Standard Org Organization
- Need able to use autocomplete when searching any standard
- Clicking different standard needs to load the different standard on the right side.
Send email
- When navigating to this to screen, we need to force user to login
- Clicking the Organization dropdown on the right side needs to load all data
- Click Add more button need add new row
- Use left alignment when display Date and timepicker, also need reduce the size. they look too big now.
- Cancel and Set button need follow design look and feel as another button
- Click Organization dropdown need load the Organization list. Pull for JSON file
- Click add more need add new row that allow user to Input of Identifying #, organization, id, and divisions.
- Display send email Success and email failed when click Send button
Data Input - Create New Standard
- Remove Index No field on page
- Product line need support tag
- Missing Standard Emails Email Participants field
Data Input - Create New C&S Issue
- Person Responsible for Action Plan need support tag
2). C&S Issues Screen
- There is a representation of the top 3 Standards-related issues that are the highest priority to the user’s division.
- Each C&S issues will be connected with Codes & Standards data.
For example, data collected includes: a description of the issue, a priority level, a description of an action plan for the issue, whether the action plan is offensive or defensive, the date(s) the action plan was reviewed with leadership, names of who is working on the action plan, financial impact, target date for completion, etc.
- Need to have read all function on table
- Show only issues created by me, need to be able to display hidden access column
- Click Access options need to load Add Data, Edit data and Modify Data options
3). CnS Issue Detail
- This is CnS issue detail page
- On top there are some quick information about the Issue details
- User needs ability to drag and drop the box placement
- Needs functionality to drag and drop horizontally
- Needs to be able to expand and collapse the boxes
4). User Management Page
- We need to make the user delete a "Soft Delete" operation so users are not removed from the database table, but instead marked inactive and are no longer allowed to login.
- Add new field for user status
- Need able to add/edit new user
- need to be able to filter by search input
- When clicking the delete button, needs to load the confirmation modal window. Re-use from previous Print modal window
5). Notification
- Clicking notification icon on header bar needs to load the notification sidebar
6). Change Request
- This is the change request page for any standard request to change
- Need to be able to filter by search input
- All source code that implement the challenge requirements.
- README in markup language
Web Browsers Requirements
- IE11
- Microsoft Edge
- Firefox latest version
- Safari latest version
- Chrome latest version
- AngularJS application
Basic requirements for this challenge:
- Fix existing AngularJS app and Mockup services to meet the requirements
- Continue Build AngularJS app for the remaining screens
- Implement all required services to fetch the data showing in the app from JSON files. We should be able to replace the JSON files with actual API calls to integrate the app with the backend without much effort.
Project Background
The Early Alert Tool (EAT) is a data store for all of the Codes and Standards which Thor needs to follow when developing products. As codes and standards change or improve, the divisions within Thor (specifically the division leaders and product managers) need to be alerted of these changes.
The division leaders document the issues which arise from any of these changes along with and need to track details on the action plans for those issues. A number of different users would will be using the application. There could be codes & standards committee representatives who notify other key point people (product managers or division leaders) of the changes.
The main goal of the application is three-fold:
1. Highlight the standards which have been identified by the business divisions as important
2. Notify people within divisions of standards changes (email functionality)
3. Track the internal corporate action plans issues related to standards changes
We just received winning AngularJS app. This time, we need your help to continue build the AngularJS app to cover all pages requirements.
Read the challenge description carefully and lets discuss any questions you have on challenge forum.
Overall Requirements
- Application to be developed using AngularJS
- Each page will have its own specific url suffix
- The page content shall be modular so that we can create new page and renders appropriately.
- AngularJS codes written to be modular and should contain necessary factory/service methods to ensure code design & best practices.
- Check here for complete API specification to help you build the JSON file structure: swagger.yml
- Use separated JSON files to load the datas
- Important! Create best practice JSON Services that will be easy to swap with the actual REST API service on the next development.
- Requests parameters to be encapsulated as object rather than individual parameters.
- This application need build using web application with focus on Desktop only.
Important!
- Make sure to always read the challenge specs and design carefully and ask for clarifications in the challenge forum as soon as possible. Don't hesitate to not ask questions and don't just assume how to implement any possible vague requirement.
- Provide a detailed documentation on how to setup, deploy and test your submission (preferably in a README.md file). Writing clean code is very important but providing detailed instructions on how to run your code is also an important part of your submission
- Create clear documentation about how to set up your submission locally and on Heroku.
- Upload your submission to Heroku for client review, Include the link on your README.md
- Remove unnecessary / unused code from your application. You should always make sure you submit what you are required to submit.
- Create a clean folder structure and follow the latest best practices for the technology you are using.
Technology Stack
Deployment environment requirements
- Localhost
- Heroku
AngularJS as base submission:
Click Ragnar Self Registration on challenge forum!
Design Assets:
Storyboard Source Files: https://drive.google.com/open?id=1Ya28C5W22wXaWNNKHggjhdbFcxLhAzG-
MarvelApp flow: https://marvelapp.com/40d8gb0
General Requirements
- This is ERD information about the table collections in the database https://www.lucidchart.com/publicSegments/view/5345b6fa-1a47-498d-a6e6-66dafc46b17a/image.jpeg
- This is additional information about the data type https://docs.google.com/spreadsheets/d/14usuK-pnbZvywBf0NT5nek1y2L0YQEZEPz0Ra4_4ntE/edit?usp=sharing
- We just received the winning submission from Open APi for all endpoints and table/collections. You can follow each endpoints and data type to make easier when change to REST API services later.
- Your submission must explicitly address Client General Code Standard from this document: https://docs.google.com/document/d/1JLDieRq7Q8gw86FoQd2qjza33sH5Dq0PD23JH7804pc/edit
- Let us know if you need some clarifications.
Individual Requirements
1). Issues on current AngularJS app
- App look good when running locally, but when deploy the app to Heroku, json-server still using fixed http://localhost:3000, please check sample here: https://thor-eat.herokuapp.com
- We need fix this to accept environment variables based on the instance.
- If needed we can move the json-server to separated folder to make them running as separated app. You can split the code and files to separate folder for angularjs and json-server. Let us know if you have any questions.
- Fix AngularJS passing the ng test, ng e2e command, and make sure lint working.
- Edit ReadME to use best practice instructions.
- Validate and testing the steps.
- Remove unused descriptions.
- Follow correct font size implementations on current AngularJS app
- Check updated submissions on all required browsers!
- Make sure existing AngularJS app ready to deploy locally and live site!
- Overall we need the updated AngularJS app use the best practice solution and easy to expand on the future challenges.
- Let us know if you need some clarifications
User Role and Flow
Fix user role and the related page that user role can accessed:
1). Data Manager Role
- Keyword Search
- Standard Org Search
- C&S Issues
- Data Input
2). Admin Approver Role
- Keyword Search
- Standard Org Search
- Change Request
- C&S Issues
- User Management
3). System Admin Role
- Keyword Search
- Standard Org Search
- Data Input
- C&S Issues
- User Management
Keyword Search
- Hamburger menu on left sidebar need to be in same place when expand/collapse state
- Add line separator | between “Terms & conditions, Privacy policy, & Copyrights” on the footer
- When click on +4 more email link, EXD text is not aligned
- There’s scrollbar horizontal background in the bottom of browser window. Need to fix this layout to make sure that does not show up
- Clicking the Email button needs to take the visitor to the Send Email page
- After navigating to another page, the dropdown on filters becomes hidden below the table. Fix that.
- For the non-login user, there is no need to display the action column for Edit and Delete button
- Display confirmation modal like on Print button when user clicks the delete button
- Clicking the Edit button needs to take the visitor to a separate screen for the Edit page.
Edit Standard
- You can re-use same layout like on /data-input page
- Add breadcrumb with this title: “Keyword Search > Standard Name > Edit Standard”
- Need able take user back to Keyword Search
- Just need re-use the existing Create New Standard tab, remove another tabs
- Capture data on required fields.
Standard Org Organization
- Need able to use autocomplete when searching any standard
- Clicking different standard needs to load the different standard on the right side.
Send email
- When navigating to this to screen, we need to force user to login
- Clicking the Organization dropdown on the right side needs to load all data
- Click Add more button need add new row
- Use left alignment when display Date and timepicker, also need reduce the size. they look too big now.
- Cancel and Set button need follow design look and feel as another button
- Click Organization dropdown need load the Organization list. Pull for JSON file
- Click add more need add new row that allow user to Input of Identifying #, organization, id, and divisions.
- Display send email Success and email failed when click Send button
Data Input - Create New Standard
- Remove Index No field on page
- Product line need support tag
- Missing Standard Emails Email Participants field
Data Input - Create New C&S Issue
- Person Responsible for Action Plan need support tag
2). C&S Issues Screen
- There is a representation of the top 3 Standards-related issues that are the highest priority to the user’s division.
- Each C&S issues will be connected with Codes & Standards data.
For example, data collected includes: a description of the issue, a priority level, a description of an action plan for the issue, whether the action plan is offensive or defensive, the date(s) the action plan was reviewed with leadership, names of who is working on the action plan, financial impact, target date for completion, etc.
- Need to have read all function on table
- Show only issues created by me, need to be able to display hidden access column
- Click Access options need to load Add Data, Edit data and Modify Data options
3). CnS Issue Detail
- This is CnS issue detail page
- On top there are some quick information about the Issue details
- User needs ability to drag and drop the box placement
- Needs functionality to drag and drop horizontally
- Needs to be able to expand and collapse the boxes
4). User Management Page
- We need to make the user delete a "Soft Delete" operation so users are not removed from the database table, but instead marked inactive and are no longer allowed to login.
- Add new field for user status
- Need able to add/edit new user
- need to be able to filter by search input
- When clicking the delete button, needs to load the confirmation modal window. Re-use from previous Print modal window
5). Notification
- Clicking notification icon on header bar needs to load the notification sidebar
6). Change Request
- This is the change request page for any standard request to change
- Need to be able to filter by search input
Final Submission Guidelines
Deliverables- All source code that implement the challenge requirements.
- README in markup language
Web Browsers Requirements
- IE11
- Microsoft Edge
- Firefox latest version
- Safari latest version
- Chrome latest version