Page Comparison

Search NOC

Objective

Provide Employee to search existing NOC and its current status.

Route - https://egov-micro-qa.egovernments.org/employee/egov-common-noc/search

...

Technical Implementation Details

• https://github.com/egovernments/frontend/blob/develop/web/rainmaker/dev-packages/egov-common-noc-dev/src/ui-config/screens/specs/egov-common-noc/search.js - Initial page.

• All the Forms and its functionality are in https://github.com/egovernments/frontend/tree/develop/web/rainmaker/dev-packages/egov-common-noc-dev/src/ui-config/screens/specs/egov-common-noc/searchResource path.

• Table rendering is taken care in https://github.com/egovernments/frontend/blob/develop/web/rainmaker/dev-packages/egov-common-noc-dev/src/ui-config/screens/specs/egov-common-noc/searchResource/searchResults.js

• The BPA/BPA OC search API and formatting data is in done in https://github.com/egovernments/frontend/blob/develop/web/rainmaker/dev-packages/egov-common-noc-dev/src/ui-config/screens/specs/egov-common-noc/searchResource/functions.js

Table Structure

• MUIDataTable is used to implement Table component.

• Every columns are entry given as an Object

{ labelName: "Application No", labelKey: "NOC_APP_NO_LABEL" },

• Any customizations at column level is by customBodyRender hook available in all the colums ‘option’ property.

Data fetch,load and render :

Once the data is fetched using /bpa-services/v1/bpa/_search API, the returned data is formatted and dispatched to redux

• https://github.com/egovernments/frontend/blob/develop/web/rainmaker/dev-packages/egov-common-noc-dev/src/ui-config/screens/specs/egov-common-noc/searchResource/functions.js

...

As we can see from the image above, the data is put to specific path inside props.

https://github.com/egovernments/frontend/blob/master/web/rainmaker/dev-packages/egov-bpa-dev/src/ui-config/screens/specs/egov-bpa/searchResource/searchResults.js

...

Tabel component now fetches the data from its props as shown below.

...

API Call Role Action mapping: