Search Water & Sewerage

Search Connection

Objective

To provide users facility to search connections in the application by providing various search criteria's. Search activity can be performed in two ways.

• Search by Connection

• Search by Application

Search by Connection:

User can search Connection by providing any one of the parameter either Connection number or Mobile Number. When user has entered connection number then only one record will be displayed if the record associated with the connection number exist. All the fields have pattern validation rule. Consumer No is nothing but connection number.

Reset operation clears all the data entered in the screen.

Open

Search by Application:

This screen provides facility to search Application by providing Application no in search criteria. Few fields are common in both the screens like Owner mobile number and consumer No. All the fields in the screen have pattern validation rule.

Reset operation clears all the data entered in the screen.

Open

Technical Implementation Details:

All the screens are developed under the egov-wns- dev package. 

https://github.com/egovernments/frontend/tree/master/web/rainmaker/dev-packages/egov-wns-dev

It follows egov-ui framework principles. All the screens have their configuration in the egov-wns dev package folder. search connection configuration listed in the below file.

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

Search screen is divided into two tabs. The configuration for these two tabs are written in searchTabs.js file under searchResource folder. Tabs internally refers to the Tabs custom component written in rainmaker-ws module. It has a search resource folder which consists of files that has code for calling search API, validating search criteria, building search table etc.

https://github.com/egovernments/frontend/tree/master/web/rainmaker/dev-packages/egov-wns-dev/src/ui-config/screens/specs/wns/searchResource

MDMS data:

Only one MDMS call is made to get the documents data to show the documents list in popup at the time clicking the New application button. Below is the snippet from search.js file

Localization :

Localization keys are added under the ‘rainmaker-ws locale module. In future if any new labels are implemented in the search screen that should also be pushed in the locale DB under rainmaker-ws locale module. Below is the example of few locale lables.

Search Connection Table

Objective:

search connection table is created to display the search results in a tabular format. search connection table contains various columns as per product requirements. Table Columns can be configured from the Table component configuration written in source file.

Table has few features like sorting, pagination, table search, rows limit. All these features are configurable. Default no of rows in the table configured as 10.

For Employee:

 In above search connection table consumer No and Action are clickable link. If we click on consumer No it will navigate to the Connection details page. https://github.com/egovernments/frontend/blob/master/web/rainmaker/dev-packages/egov-wns-dev/src/ui-config/screens/specs/wns/connection-details.js .

Connection details document is available here https://digit-discuss.atlassian.net/wiki/spaces/EGR/pages/465961154

For employee Action as “Collect “ so that employee can collect the amount from customer for particular Connection. onclick of collect it will navigate to the Bill details page where we can see the bill amount from there we can do the PAY.https://github.com/egovernments/frontend/blob/master/web/rainmaker/dev-packages/egov-wns-dev/src/ui-config/screens/specs/wns/viewBill.js

Bill details document is available here https://digit-discuss.atlassian.net/wiki/spaces/EGR/pages/465961170

For Citizen:

The only difference between employee search connection table and citizen search connection table Consumer No are non-clickable event. Citizen can only Pay the bill. onclick of PAY button it will navigate to the employee Bill Details page we can find above.

Technical Implementation Details:

Two table components are created; one for search Connection and one for search application. These two components imported in the search.js file and used inside Search page configuration.

Each table configuration internally uses the custom Table component written in custom-molecules-local folder inside rainmaker-ws module.

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

Table body initializes with the search connection page initialization. By default tables are hidden. Once the search operation completed successfully then all the search records formatted into to expected tabular format and supplied to the table by making Table as visible.

Below is the file link.

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

consumer No and Application no in the search table are made as hyperlink. On click of consumer No user navigates to connection Details page where all the data related to connection displayed.

On click of Application no also it navigates to the Water & Sewerage Application page( i.e search-preview). Only difference here is workflow actions is added based on the status of the application.

Localization Implementation:

Locale keys for table headers are pushed in the ‘rainmaker-common’ locale module. These locale keys are available in the localStorage. We map the Table header text to the locale keys obtained from locale DB.

API Call Role Action mapping: