GnG Integration | EPC

Welcome to the GnG Integration | EPC Challenge. In this challenge, we are looking for you to integrate the backend API with the existing Angular 2+ Application.

Technology Stack

• NodeJS
• Angular 7
• JavaScript
• REST

General Requirements

Data Loading & Alerts

• Use loading animation effect to show the progress when loading data.
• Sanck-bar/toast should be used to show the error, success & warning messages when data is loaded from API. It shouldn't be shown for every successful API call, use your best judgment to show these.

Code Quality

• Reuse the existing code, components, CSS, js, etc as much as possible instead of duplicating the code.

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.

Framework specific

• Use Observable & Observable.subscribe() method wherever applicable. You may refer this: https://angular.io/tutorial/toh-pt4#subscribe-in-heroescomponent
• Use Dependency Injection coding pattern.
• ng build should work without throwing any error.
• All type of responses 200, 401, 403 & 404 should be handled.

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

App Requirement

0 Resources & links

• API mappings, API details, base submission & storyboard details are provided in the challenge forum.
• Base branch is dev-int
• Storyboard
• Most of the code of EPC module is kept inside app/electric folder. While integrating APIs keep all your code/updates in this folder. Avoid doing changes in other folders unless it's required.

1 Sidebar & Header

1. Thess sections are already been developed. No change is required here.

2 Landing page

• ref: https://marvelapp.com/1fj39i6g/screen/58733920
• Based on the API mapping doc implement these:
• For the autocomplete list get the list items by calling GET /lookup/wells?page=0&limit=10 & GET /lookup/samples?limit=10&page=0. Merge these responses to show in a single autocomplete list.
• Selecting any autocomplete list item takes to its details page.

3 Details page

• ref: https://marvelapp.com/1fj39i6g/screen/58733922
• Based on the API mapping doc implement these:
• The right sidebar show: -- A selected Sample list item if a user has selected a sample list item from the landing page. -- A selected Summary list item if a user has selected a well-name list item from the landing page.
• If a user has selected well-name from the landing page then the Summary button in the sidebar should stay enabled on the details page.
• In the sidebar, a user should be able to search samples using samples autocomplete & add them to the sample list.
• In the sidebar, a user should be able to search well-name using wellname autocomplete & add them to the wellname list below.
• Clicking Reset all should reset/clear both the samples list & summary (wellname) list. The Summary button should get disabled if it's enabled.

3.1 Details page content

ref: https://marvelapp.com/1fj39i6g/screen/58733921 & https://marvelapp.com/1fj39i6g/screen/58733929

• Initially the right side main section content should be populated based on the list item selected on the landing page.
• For the sidebar, on selecting a sample or well name should show it's detailed by requesting data from the API server.

3.2 Export

• Implement Export functions on these pages:
• To export make a call to this GET /services/brp/data/export/{id}.

4 Add, Edit & Import

• These are out of scope for this challenge.