CheckList view checklist cards

frontend/web/micro-ui-internals/example/src/setupProxy.js

@@ -70,6 +70,7 @@ module.exports = function (app) {
     "/sw-services",
     "/ws-calculator",
     "/sw-calculator/",
+    "/health-service-request",
     "/egov-searcher",
     "/report",
     "/inbox/v1/dss/_search",

frontend/web/micro-ui-internals/packages/modules/PublicServices/src/components/CheckListCard.js

@@ -0,0 +1,71 @@
+import React from "react";
+import { Card, TextBlock, Button } from "@egovernments/digit-ui-components";
+import { transformViewApplication } from "../utils/createUtils";
+import { useEffect, useState } from "react";
+import { useHistory } from "react-router-dom";
+
+const CheckListCard = (props) => {
+    const [filled, setFilled] = useState(false);
+    const history = useHistory();
+
+    const style = {
+        display: "flex",
+        alignItems: "center",
+        gap: "1rem",
+        margin: "20px"
+    };
+
+    const request = {
+        url: "/health-service-request/service/v1/_search",
+        params: {},
+        body: {},
+        method: "POST",
+        headers: {},
+        config: {
+            enable: false,
+        },
+    }
+    const mutation = Digit.Hooks.useCustomAPIMutationHook(request);
+
+    const isFilled = async (id, accid) => {
+
+        await mutation.mutate(
+            {
+                url: '/health-service-request/service/v1/_search',
+                method: "POST",
+                body: transformViewApplication(id, accid),
+                config: {
+                    enable: false,
+                },
+            },
+            {
+                onSuccess: (res) => {
+                    if (res.Services && res.Services.length > 0) {
+                        setFilled(true);
+                    }
+                },
+                onError: () => {
+                    console.log("Error checking filled status");
+                },
+            }
+        )
+    }
+
+    useEffect(() => {
+        isFilled(props.item.code, props.accid)
+    }, [props.item.code, props.accid]);
+
+    return (
+        <Card type="primary" style={style}>
+            <TextBlock body={props.item.code} />
+            {filled ? (
+                <Button label="View Response" onClick={() => history.push({ pathname: `/${window.contextPath}/employee/publicservices/viewresponse/${props.accid}/${props.item.id}/${props.item.code}` })} />
+            ) : (
+                <Button label="Fill Checklist" onClick={() => history.push({
+                    pathname: `/${window.contextPath}/employee/publicservices/checklist/${props.accid}/${props.item.id}/${props.item.code}`})} />
+            )}
+        </Card>
+    );
+};
+
+export default CheckListCard;

frontend/web/micro-ui-internals/packages/modules/PublicServices/src/components/PublicServicesCard.js

@@ -21,6 +21,10 @@ const PublicServicesCard = () => {
         label: t("Services Apply (PGR)"),
         link: `/${window?.contextPath}/employee/publicservices/pgr/Apply`,
       },
+      {
+        label: t("CheckList"),
+        link: `/${window?.contextPath}/employee/publicservices/viewapp`,
+      },
     ],
   };
 

frontend/web/micro-ui-internals/packages/modules/PublicServices/src/configs/checkListConfig.js

@@ -0,0 +1,61 @@
+import React from "react";
+
+export const CheckListConfig = (item) => {
+    let response =item[0];
+    const createConfig = (field, label, codes, hide) => {
+        let type = field.dataType === "SingleValueList" ? "radio" : "text";
+        return {
+            isMandatory: field.required,
+            key: field.code,
+            type: type,
+            label: `${label}.${codes}`,
+            disable: false,
+            populators: {
+                name: field.code,
+                optionsKey: "name",
+                hideInForm: hide,
+                alignVertical: true,
+                options: field.values?.slice(0, -1).map(item => ({
+                    code: item,
+                    name: `${label}.${codes}.${item}`,
+                }))
+            },
+        };
+    };
+    let config = [];
+    let fields = response.attributes;
+    fields.forEach(item => {
+        const codeParts = item.code.split(".");
+        if (codeParts.length === 1) {
+            config.push(createConfig(item, response.code, item.code, false));
+        }
+        else {
+            config.push(createConfig(item, response.code, item.code, true));
+        }
+    });
+    return [
+        {
+            body: config
+        }
+    ];
+}
+
+export const updateCheckListConfig = (config, values) => {
+    config[0].body.forEach(item => {
+        const part = item.key.split(".");
+        if (part.length > 1) {
+            const code = part[0];  
+            const value = part[1];
+            const selectedValue = values[code]?.code || values[code];
+            if (values[code] && selectedValue === value && item.populators.hideInForm == true) {
+                item.populators.hideInForm = false;
+            }
+            if (values[code] && selectedValue !== value && item.populators.hideInForm == false){
+                item.populators.hideInForm = true;
+            }
+        }
+    });
+    return config;
+}
+
+export default CheckListConfig;

frontend/web/micro-ui-internals/packages/modules/PublicServices/src/pages/employee/DigitDemo/checkList.js

@@ -0,0 +1,110 @@
+import React from "react";
+import { useLocation } from "react-router-dom/cjs/react-router-dom.min";
+import { useState, useEffect, useReducer } from "react";
+import { useTranslation } from "react-i18next";
+import { FormComposerV2, Loader } from "@egovernments/digit-ui-components";
+import CheckListConfig from "../../../configs/checkListConfig.js";
+import { updateCheckListConfig } from "../../../configs/checkListConfig.js";
+import { useParams } from "react-router-dom";
+import transformViewCheckList from "../../../utils/createUtils.js";
+
+const formReducer = (states, action) => {
+  switch (action.type) {
+    case 'UPDATE_FORM':
+      return {
+        ...states,
+        formData: action.payload
+      };
+    default:
+      return states;
+  }
+};
+
+const CheckList = () => {
+  const { state } = useLocation();
+  const { accid, id, code } = useParams();
+  const { t } = useTranslation();
+  const [cardItems, setCardItems] = useState([]);
+  const [states, dispatch] = useReducer(formReducer, {
+    formData: {}
+  });
+
+  const [config, setConfig] = useState(null);
+
+  const request = {
+    url: "/health-service-request/service/definition/v1/_search",
+    params: {},
+    body: {},
+    method: "POST",
+    headers: {},
+    config: {
+      enable: false,
+    },
+  }
+  const mutation = Digit.Hooks.useCustomAPIMutationHook(request);
+
+  const getcarditems = async (code) => {
+    await mutation.mutate(
+      {
+        url: "/health-service-request/service/definition/v1/_search",
+        method: "POST",
+        body: transformViewCheckList(code),
+        config: {
+          enable: false,
+        },
+      },
+      {
+        onSuccess: (res) => {
+          console.log(res, "application_response");
+          setCardItems(res?.ServiceDefinitions || []);
+        },
+        onError: () => {
+          console.log("Error occurred");
+          setCardItems([]);
+        },
+      }
+    )
+  }
+  useEffect(() => {
+    getcarditems([code]);
+  }, [code]);
+
+  useEffect(() => {
+    if (cardItems && cardItems.length > 0) {
+      setConfig(CheckListConfig(cardItems));
+    }
+  }, [cardItems]);
+
+  const onSubmit = async (data) => {
+    console.log(data, "data");
+  };
+
+  const handleFormValueChange = (formData) => {
+    console.log(formData,"formdata");
+    if (JSON.stringify(formData) !== JSON.stringify(states.formData)) {
+      dispatch({
+        type: 'UPDATE_FORM',
+        payload: formData
+      });
+      setConfig(updateCheckListConfig(config, formData));
+    }
+  };
+
+  return (
+    <div>
+      {config ? (
+        <FormComposerV2
+          label={t("Submit")}
+          config={config}
+          onFormValueChange={(setValue, formData) => { handleFormValueChange(formData) }}
+          onSubmit={onSubmit}
+          fieldStyle={{ marginRight: 2 }}
+        />
+      ) : (
+        <Loader/>
+      )}
+    </div>
+  );
+};
+
+export default CheckList;

frontend/web/micro-ui-internals/packages/modules/PublicServices/src/pages/employee/DigitDemo/viewCheckListCards.js

@@ -0,0 +1,65 @@
+import React from "react";
+import { Card, TextBlock, Button } from "@egovernments/digit-ui-components";
+import { useEffect, useState } from "react";
+import { useHistory } from "react-router-dom";
+import transformViewCheckList from "../../../utils/createUtils.js"
+import CheckListCard from "../../../components/CheckListCard.js";
+
+const ViewCheckListCards = () => {
+
+    const code = [
+        "SMC BHAVYA.TRAINING_SUPERVISION.TEAM_SUPERVISOR",
+        "LLIN-mz_april_2025.TRAINING_SUPERVISION.PROVINCIAL_SUPERVISOR"
+    ];
+    const accountID = "56756756755";
+    const [cardItems, setCardItems] = useState([]);
+
+    const request = {
+        url: "/health-service-request/service/definition/v1/_search",
+        params: {},
+        body: {},
+        method: "POST",
+        headers: {},
+        config: {
+            enable: false,
+        },
+    }
+    const mutation = Digit.Hooks.useCustomAPIMutationHook(request);
+
+    const getcarditems = async (code) => {
+        await mutation.mutate(
+            {
+                url: "/health-service-request/service/definition/v1/_search",
+                method: "POST",
+                body: transformViewCheckList(code),
+                config: {
+                    enable: false,
+                },
+            },
+            {
+                onSuccess: (res) => {
+                    setCardItems(res?.ServiceDefinitions);
+                },
+                onError: () => {
+                    console.log("Error occured");
+                },
+            }
+        )
+    }
+
+    useEffect(() => {
+        getcarditems(code);
+    }, []);
+
+    return (
+        <React.Fragment>
+            {
+                cardItems.map((item, index) => (
+                    <CheckListCard item={item} accid={accountID} />
+                ))
+            }
+        </React.Fragment>
+    );
+};
+
+export default ViewCheckListCards;

frontend/web/micro-ui-internals/packages/modules/PublicServices/src/pages/employee/index.js

@@ -5,6 +5,8 @@ import { useTranslation } from "react-i18next";
 import { Switch } from "react-router-dom";
 // import Inbox from "./SampleInbox";
 import DigitDemoComponent from "./DigitDemo/digitDemoComponent";
+import ViewCheckListCards from "./DigitDemo/viewCheckListCards";
+import CheckList from "./DigitDemo/checkList";
 
 const SampleBreadCrumbs = ({ location }) => {
   const { t } = useTranslation();
@@ -30,6 +32,8 @@ const App = ({ path, stateCode, userType, tenants }) => {
           <SampleBreadCrumbs location={location} />
         </React.Fragment>
         <PrivateRoute path={`${path}/:module/Apply`} component={() => <DigitDemoComponent />} />
+        <PrivateRoute path={`${path}/viewapp`} component={() => <ViewCheckListCards />} />
+        <PrivateRoute path={`${path}/checklist/:accid/:id/:code`} component={() => <CheckList />} />
       </AppContainer>
     </Switch>
   );

frontend/web/micro-ui-internals/packages/modules/PublicServices/src/utils/createUtils.js

@@ -169,4 +169,33 @@ export const transformHRMSCreateData = (data)=>{
     ]
     }
 
-}
+}
+
+export const transformViewApplication = (id, accid) => {
+    let requestBody = {
+        "ServiceCriteria": {
+            "clientId": "",
+            "serviceDefId": id,
+            "accountId": accid,
+            "tenantId": "dev",
+            "rowVersion": 1,
+            "isDeleted": false
+        },
+        "apiOperation": "CREATE",
+    }
+    return requestBody;
+}
+
+ const transformViewCheckList = (code) => {
+    const tenantId = Digit.ULBService.getCurrentTenantId();
+    let requestBody = {
+        "ServiceDefinitionCriteria": {
+            "code": code,
+            "tenantId": tenantId,
+        },
+        "includeDeleted": true
+    }
+    return requestBody;
+}
+
+export default transformViewCheckList;