FSM v1.2.1 - FSTPO UI
- Nabeel Md
In FSTP, We are trying to decouple the vehicle dispose from FSM application. No matter whether vehicle is attached to any FSM application or not, we allow the vehicle to dispose in the FSTP plant.
FSTP Home UI:
After logging as a FSTP user, we have now Home button option:
Technical Implementation:
code changes path are :
DIGIT-Dev/frontend/micro-ui/web/micro-ui-internals/packages/modules/fsm/src/components/FsmCard.js
FSTP Operations UI:
After moving into “home” option, FSTP user can choose respective options.
FSTP can choose Add Vehicle Log option if he/she wants to check whether Vehicle is linked to any application and dispose.
FSTP can choose Inbox if he wants to check all the application which is ready to dispose.
Technical Implementation Details:
Below are the path for code:
frontend/micro-ui/web/micro-ui-internals/packages/modules/fsm/src/pages/employee/FstpOperations.js
Below are the code snippet for populating the options:
Below are the code snippet for rendering the icon:
ULBHomeCard.js is the common component used to populate options in the screen.
Below are the paths:
frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/atoms/ULBHomeCard.js
FSTP Add Vehicle Log UI:
FSTP can Add vehicle log using vehicle number ( in proper format with spaces e.g. AB 00 CD 1234). Note:- Improper format will throw an error.
Techincal Implementation Details:
Below are the path for the code:
frontend/micro-ui/web/micro-ui-internals/packages/modules/fsm/src/pages/employee/FstpAddVehicle.js
Below are the code snippet for populating the Add vehicle Log field and it’s validation:
Below are the code snippet for rendering the screen:
FSTP Service Request Screen:
After entering the vehicle number in Add vehicle log screen. We are fetching the FSM application which is linked to that specific vehicle number and render the data as below.
Technical Implementation Details:
Below are the path for the code:
frontend/micro-ui/web/micro-ui-internals/packages/modules/fsm/src/pages/employee/FstpServiceRequest.js
Below are the code snippets for fetching the FSM application linked to vehicle number:
Below are the code snippets to render the data:
Vehicle Log screen:
After selecting application, FSTPO can dispose the vehice log in vehicle log screen.
Additional details and Attachments fields are introduced in new updates in FSM v1.2.1 .
Below are the screen for existing Vehicle log:
Below are the screen for new vehicle log in case when no application is found for vehicle. FSTPO can dispose the new vehicle log by providing all the details below.
Technical Implementation Details:
Below are the path for the code:
frontend/micro-ui/web/micro-ui-internals/packages/modules/fsm/src/pages/employee/FstpOperatorDetails.js
Below are code snippet for Additional details and attachments field:
For new vehicle Log:
Below are the code snippets to render input field for new vehicle log:
PR:
https://github.com/egovernments/DIGIT-Dev/pull/3422
https://github.com/egovernments/DIGIT-Dev/pull/3468