FSM DSO (Complete Request): UI Implementation Details

The link for the changes made is given below.

https://github.com/egovernments/DIGIT-Dev/pull/1372

Fetching data from the mdms:

Customizing fields in a form

The config can be found at CompleteApplication.js at https://github.com/egovernments/DIGIT-Dev/blob/SAN-817/frontend/micro-ui/web/micro-ui-internals/packages/modules/fsm/src/pages/employee/ApplicationDetails/config/CompleteApplication.js

{
          label: "ES_NEW_APPLICATION_PROPERTY_TYPE",
          isMandatory: true,
          type: "component",
          route: "property-type",
          key: "propertyType",
          component: "SelectPropertyType",
          texts: {
            headerCaption: "",
            header: "CS_FILE_APPLICATION_PROPERTY_LABEL",
            cardText: "CS_FILE_APPLICATION_PROPERTY_TEXT",
            submitBarLabel: "CS_COMMON_NEXT",
          },
          nextStep: "property-subtype",
        },
        {
          label: "ES_NEW_APPLICATION_PROPERTY_SUB-TYPE",
          isMandatory: true,
          type: "component",
          route: "property-subtype",
          key: "subtype",
          component: "SelectPropertySubtype",
          texts: {
            headerCaption: "",
            header: "CS_FILE_APPLICATION_PROPERTY_SUBTYPE_LABEL",
            cardText: "CS_FILE_APPLICATION_PROPERTY_SUBTYPE_TEXT",
            submitBarLabel: "CS_COMMON_NEXT",
          },
          nextStep: "map",
        },
        {
          label: "ES_NEW_APPLICATION_PIT_TYPE",
          isMandatory: false,
          type: "component",
          route: "pit-type",
          key: "pitType",
          component: "SelectPitType",
          texts: {
            header: "CS_FILE_PROPERTY_PIT_TYPE",
            cardText: "CS_FILE_PROPERTY_PIT_TYPE_TEXT",
            submitBarLabel: "CS_COMMON_NEXT",
            skipText: "CORE_COMMON_SKIP_CONTINUE",
          },
          nextStep: "tank-size",
        },
        {
          route: "tank-size",
          component: "SelectTankSize",
          isMandatory: false,
          texts: {
            headerCaption: "",
            header: "CS_FILE_APPLICATION_PIT_SEPTIC_TANK_SIZE_TITLE",
            cardText: "CS_FILE_APPLICATION_PIT_SEPTIC_TANK_SIZE_TEXT",
            submitBarLabel: "CS_COMMON_NEXT",
          },
          type: "component",
          key: "pitDetail",
          nextStep: null,
          label: "ES_NEW_APPLICATION_PIT_DIMENSION",
        },

Upload Pit Photo Button

UploadPitPhoto.js molecule can be found under molecules folder in react-components.

https://github.com/egovernments/DIGIT-Dev/blob/SAN-817/frontend/micro-ui/web/micro-ui-internals/packages/react-components/src/molecules/UploadPitPhoto.js

Saving Image fileId in FSM service:

const uploadImage = useCallback(async () => {
        if (uploadedImagesIds === null || uploadedImagesIds.length < 3) {
            const response = await Digit.UploadServices.Filestorage("FSM", image, props.tenantId);
            setUploadedImagesIds(addUploadedImageIds(response));
        } else {
            console.log("disabled")
        }
    }, [addUploadedImageIds, image]);