Challenge Overview
Welcome to Quartz Energy - Offset Operator Frac Schedule AngularJS REST API Integration Code Challenge
For this is challenge, you need to continue updating Angular 5 application from previous winning submission to tackle these following tasks:
- Integrate Angular app with REST API
- Add more data on REST API scripts to follow JSON format on current AngularApp
Let’s discuss any questions you have on challenge forum.
MarvelApp Flow:
https://marvelapp.com/cb7ggce
AngularApp Source Code
https://gitlab.com/quartz-energy/ops-frac-schedule/web-application
REST API Source Code
https://gitlab.com/quartz-energy/ops-frac-schedule/api-services-alt
Postman Collection for API endpoints Testing
https://gitlab.com/quartz-energy/ops-frac-schedule/api-services-alt/tree/master/docs
Submission Requirements
General
- Updated Angular App services need implemented the integration testings
- Updated REST API need re-use same data content like on current JSON files: https://gitlab.com/quartz-energy/ops-frac-schedule/web-application/tree/master/src/assets
- You must update the initial data on REST API based on current JSON files.
- Create preloader when change the route Or apply the filter. Feel free to suggest any style as long fits with current design
- Remove unused files after your updates
- As possible we need you follow existing code structure, rule and formats. Do not break existing codes!
- Make sure your updated submission fully tested!
- Let us know if need some clarifications about the implementation
1). Login
API endpoint to use: POST {{URL}}/login
- Create proper data for username and password
- Error validation from API need highlight the text input and display the message above the text input
- Capture user information, re-use existing user thumbnail
2). Learn More
API endpoint to use: n/a
- This is remain using static content on Angular app
3). Dashboard - Map View
API endpoint to use: GET {{URL}}/schedules?
- Display data above the map
- For schedule summary need use this endpoint: {{URL}}/schedules/summary?
- Click filter need filter data on map, you might need re-use filter function on Angular app instead call the endpoint again.
- Region, improve data to contains all sample regions. Endpoint: {{URL}}/lookups/regions
- Operator, you can call existing {{URL}}/schedules? To load all Operators
- Capture the color differences.
4). Dashboard - List View
API endpoint to use: GET {{URL}}/schedules?
- This page need able load more data when user scrolling on the bottom
- On current Angular app, it load with different json format. How do you anticipate that when integrate with this endpoints
- Make sure sort function remain works like existing
- Filter need remain working to the table content
5). Dashboard - Chart View
API endpoint to use: GET {{URL}}/schedules?
- Match the icon and color format
- Filter need remain working to the Chart view
6) Upload Data
- When click submit need call these 2 upload endpoint
- For WellName we need pull all Wells from this endpoint: GET {{URL}}/well?wellName=well
- Manual Update: POST {{URL}}/upload/single
- Batch Upload: POST {{URL}}/upload/batch
- Ignore if the fields empty
- On success upload need call another email api endpoint: POST {{URL}}/email
7). Company Page
API endpoint to use: GET {{URL}}/companies?
- On the left side pull all company from this endpoint
- Capture that alert icon
- Display all contact based on selected company
- Click Add contact need load the flyout. User this endpoint: PUT {{URL}}/companies/2
8). Company Page - Card View
API endpoint to use: GET {{URL}}/companies?
- Card view need re-use same data set
9). Upcoming Schedule
API endpoint to use: GET {{URL}}/schedules?
- Group data per-month based on the existing app
- Scrolling to the bottom need load more data set
- All source code that implement the challenge requirements.
- Updated Scripts input file.
- README in markup language (if Any)
- Updated Swagger File (If Any)
Web Browsers Requirements
- IE11
- Microsoft Edge
- Firefox latest version
- Safari latest version
- Chrome latest version
For this is challenge, you need to continue updating Angular 5 application from previous winning submission to tackle these following tasks:
- Integrate Angular app with REST API
- Add more data on REST API scripts to follow JSON format on current AngularApp
Let’s discuss any questions you have on challenge forum.
MarvelApp Flow:
https://marvelapp.com/cb7ggce
AngularApp Source Code
https://gitlab.com/quartz-energy/ops-frac-schedule/web-application
REST API Source Code
https://gitlab.com/quartz-energy/ops-frac-schedule/api-services-alt
Postman Collection for API endpoints Testing
https://gitlab.com/quartz-energy/ops-frac-schedule/api-services-alt/tree/master/docs
Submission Requirements
General
- Updated Angular App services need implemented the integration testings
- Updated REST API need re-use same data content like on current JSON files: https://gitlab.com/quartz-energy/ops-frac-schedule/web-application/tree/master/src/assets
- You must update the initial data on REST API based on current JSON files.
- Create preloader when change the route Or apply the filter. Feel free to suggest any style as long fits with current design
- Remove unused files after your updates
- As possible we need you follow existing code structure, rule and formats. Do not break existing codes!
- Make sure your updated submission fully tested!
- Let us know if need some clarifications about the implementation
1). Login
API endpoint to use: POST {{URL}}/login
- Create proper data for username and password
- Error validation from API need highlight the text input and display the message above the text input
- Capture user information, re-use existing user thumbnail
2). Learn More
API endpoint to use: n/a
- This is remain using static content on Angular app
3). Dashboard - Map View
API endpoint to use: GET {{URL}}/schedules?
- Display data above the map
- For schedule summary need use this endpoint: {{URL}}/schedules/summary?
- Click filter need filter data on map, you might need re-use filter function on Angular app instead call the endpoint again.
- Region, improve data to contains all sample regions. Endpoint: {{URL}}/lookups/regions
- Operator, you can call existing {{URL}}/schedules? To load all Operators
- Capture the color differences.
4). Dashboard - List View
API endpoint to use: GET {{URL}}/schedules?
- This page need able load more data when user scrolling on the bottom
- On current Angular app, it load with different json format. How do you anticipate that when integrate with this endpoints
- Make sure sort function remain works like existing
- Filter need remain working to the table content
5). Dashboard - Chart View
API endpoint to use: GET {{URL}}/schedules?
- Match the icon and color format
- Filter need remain working to the Chart view
6) Upload Data
- When click submit need call these 2 upload endpoint
- For WellName we need pull all Wells from this endpoint: GET {{URL}}/well?wellName=well
- Manual Update: POST {{URL}}/upload/single
- Batch Upload: POST {{URL}}/upload/batch
- Ignore if the fields empty
- On success upload need call another email api endpoint: POST {{URL}}/email
7). Company Page
API endpoint to use: GET {{URL}}/companies?
- On the left side pull all company from this endpoint
- Capture that alert icon
- Display all contact based on selected company
- Click Add contact need load the flyout. User this endpoint: PUT {{URL}}/companies/2
8). Company Page - Card View
API endpoint to use: GET {{URL}}/companies?
- Card view need re-use same data set
9). Upcoming Schedule
API endpoint to use: GET {{URL}}/schedules?
- Group data per-month based on the existing app
- Scrolling to the bottom need load more data set
Final Submission Guidelines
Deliverables- All source code that implement the challenge requirements.
- Updated Scripts input file.
- README in markup language (if Any)
- Updated Swagger File (If Any)
Web Browsers Requirements
- IE11
- Microsoft Edge
- Firefox latest version
- Safari latest version
- Chrome latest version