Page Comparison

Search Bill

Objective

Provide Citizen/Employee to search existing Bill , generate expired bill ,

pay for the active bill, download bill , download receipt (if paid ) and its current status.

Route - https://qa.digit.org/employee/bills/billSearch

Image Added

Technical Implementation Details

• Initial page.https://github.com/egovernments/frontend/blob/master/web/rainmaker/dev-packages/egov-abg-dev/src/ui-config/screens/specs/bills/billSearch.js

• Initial MDMS call is being made on page load.

  Image Added

   

• All the Forms and its functionality are in https://github.com/egovernments/frontend/tree/master/web/rainmaker/dev-packages/egov-abg-dev/src/ui-config/screens/specs/bills/billSearchResources path.

• Table rendering is taken care in https://github.com/egovernments/frontend/blob/80c5bff5b0869ba44f1626fabe4a5a6133afa558/web/rainmaker/dev-packages/egov-abg-dev/src/ui-config/screens/specs/abg/billSearchResources/searchResults.js

• The Bill search API and formatting data is in done in https://github.com/egovernments/frontend/blob/63e2295cf784b937c296078dc8bdb27efc85513e/web/rainmaker/dev-packages/egov-abg-dev/src/ui-config/screens/specs/abg/billSearchResources/function.js

Table Structure

• MUIDataTable is used to implement Table component.

• Every columns are entry given as an Object

{
   labelName: "Bill No.",
   labelKey: "ABG_COMMON_TABLE_COL_BILL_NO"
}

,

• 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 egov-searcher/bill-genie/billswithaddranduser/_get API, the returned data is formatted and dispatched to redux

https://github.com/egovernments/frontend/blob/63e2295cf784b937c296078dc8bdb27efc85513e/web/rainmaker/dev-packages/egov-abg-dev/src/ui-config/screens/specs/abg/billSearchResources/function.js

...

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

https://github.com/egovernments/frontend/blob/80c5bff5b0869ba44f1626fabe4a5a6133afa558/web/rainmaker/dev-packages/egov-abg-dev/src/ui-config/screens/specs/abg/billSearchResources/searchResults.js

...

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

...

Api Used :

1.   egov-mdms-service/v1/_search,

2. egov-searcher/bill-genie/billswithaddranduser/_get

ROLE ACTION MAPPING