Added updated api for census and workflow integration (#1598)

* added updated api for census and workflow integration

* updated approve popup to workflow popup

* updated workflow action

* resolved coderabbit comments

---------

Co-authored-by: rachana-egov <[email protected]>
Co-authored-by: Nipun Arora <[email protected]>

health/micro-ui/web/micro-ui-internals/example/public/index.html

@@ -16,7 +16,7 @@
   /> -->
   <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" />
   <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" />
-  <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].3/dist/index.css" />
+  <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].4/dist/index.css" />
 
   <!-- added below css for hcm-workbench module inclusion-->
   <!-- <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" /> -->

health/micro-ui/web/micro-ui-internals/packages/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-health-css",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <[email protected]>",

health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss

@@ -1146,5 +1146,5 @@ tbody {
 }
 
 .digit-action-bar-wrap div {
-  width: 100%;
+  width: unset;
 }

health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/villageView.scss

@@ -56,4 +56,20 @@
 
 .middle-child {
     margin-bottom: 1.5rem;
+}
+
+.comment-label {
+    margin-bottom: .25rem;
+    @extend .typography.label;
+    color: theme(digitv2.lightTheme.text-primary);
+}
+
+.comment-label .required {
+    color: theme(digitv2.alert.error);
+}
+
+.security-question-label {
+    margin-bottom: 1rem;
+    @extend .typography.heading-m;
+    color: theme(digitv2.lightTheme.text-primary);
 }

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/WorkflowPopUp.js

@@ -0,0 +1,104 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { PopUp, Button, TextArea, ErrorMessage } from "@egovernments/digit-ui-components";
+import { useMyContext } from "../utils/context"; // Ensure that the translation function `t` is handled here
+
+
+{/* use this component for comment like this
+    <WorkflowPopUp
+    onClose={() => setShowPopup(false)}
+    onSubmit={(comment) => console.log("Submitted comment:", comment)}
+    census={censusData}
+/> */}
+
+const WorkflowPopUp = ({ onClose, onSubmit, heading }) => {
+    const { state } = useMyContext(); // Extract state from context
+    const { t } = useTranslation();
+
+    const [comment, setComment] = useState("");  // Track TextArea input
+    const [error, setError] = useState(false);   // Track error state
+
+    // Handle TextArea input change
+    const handleTextAreaChange = (e) => {
+        setComment(e.target.value);
+        if (e.target.value.trim()) {
+            setError(false);  // Reset error when input is not empty
+        }
+    };
+
+    // Handle keypress "Enter" to submit the form
+    const handleKeyPress = (e) => {
+        if (e.key === "Enter") {
+            handleSave();
+        }
+    };
+
+    // Handle Save
+    const handleSave = () => {
+        if (!comment.trim()) {
+            setError(true);  // Show error if TextArea is empty
+            return;          // Do not proceed further
+        }
+
+        // Send the comment to the parent component or handle it here
+        if (onSubmit) {
+            onSubmit(comment);  // Pass the comment via onSubmit prop
+        }
+
+        // Close the popup after submitting the comment
+        onClose();
+    };
+
+    return (
+        <PopUp
+            onClose={onClose}
+            heading={t(heading)}
+            children={[
+                <div>
+                    <div key="comment-section" className="comment-label">
+                        {t(`HCM_MICROPLAN_ADD_COMMENT_LABEL`)}{" "}
+                        <span className="required">*</span>
+                    </div>
+                    <TextArea
+                        style={{ maxWidth: "100%" }}
+                        value={comment}
+                        onChange={handleTextAreaChange}
+                        onKeyPress={handleKeyPress} // Handle "Enter" key to submit
+                        error={error ? true : false}  // Show error message if needed
+                    />
+                    {error && (
+                        <ErrorMessage
+                            message={t('HCM_MICROPLAN_ADD_COMMENT_REQUIRED')}
+                            truncateMessage={true}
+                            maxLength={256}
+                            showIcon={true}
+                        />
+                    )}
+                </div>
+            ]}
+            onOverlayClick={onClose}
+            footerChildren={[
+                <Button
+                    key="close-button"
+                    className={"campaign-type-alert-button"}
+                    type={"button"}
+                    size={"large"}
+                    variation={"secondary"}
+                    label={t(`HCM_MICROPLAN_EDIT_POPULATION_CLOSE`)}
+                    onClick={onClose}
+                />,
+                <Button
+                    key="approve-button"
+                    className={"campaign-type-alert-button"}
+                    type={"button"}
+                    size={"large"}
+                    variation={"primary"}
+                    label={t(`HCM_MICROPLAN_EDIT_POPULATION_SEND_FOR_APPOVAL`)}
+                    onClick={handleSave}  // Call the save function
+                />,
+            ]}
+        />
+    );
+};
+
+export default WorkflowPopUp;

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/editVillagePopulationPopUP.js

@@ -4,6 +4,8 @@ import { PopUp, Button, Card, Divider, TextInput } from '@egovernments/digit-ui-
 
 const EditVillagePopulationPopUp = ({ onClose, census }) => {
   const { t } = useTranslation();
+  const userInfo = Digit.UserService.getUser();
+  const userRoles = userInfo?.info?.roles?.map((roleData) => roleData?.code);
 
   // State to manage confirmed population and target population
   const [confirmedTotalPopulation, setConfirmedTotalPopulation] = useState("");
@@ -17,24 +19,50 @@ const EditVillagePopulationPopUp = ({ onClose, census }) => {
     }
   }, [census]);
 
-  const handleSave = () => {
-    // Prepare the updated census data with new population values
-    const updatedCensus = {
-      ...census,
-      additionalDetails: {
-        ...census.additionalDetails,
-        confirmedTotalPopulation,
-        confirmedTargetPopulation,
-      },
-    };
 
-    // Log the updated data or trigger a save function with it
-    console.log("Updated Census Data: ", updatedCensus);
+  // Define the mutation configuration
+  const mutation = Digit.Hooks.useCustomAPIMutationHook({
+    url: "/census-service/_update", // Replace with the appropriate API endpoint
+  });
 
-    // Close the popup after saving
-    onClose();
+  const handleSave = async () => {
+    // Determine workflow action based on user roles
+    let workflowAction = ""; // Default action
+
+    // Check user roles and set workflow action accordingly
+    if (userRoles && userRoles.includes('POPULATION_DATA_APPROVER')) {
+      workflowAction = "EDIT_AND_SEND_FOR_APPROVAL";
+    } else if (userRoles && userRoles.includes('ROOT_POPULATION_DATA_APPROVER')) {
+      workflowAction = "EDIT_AND_VALIDATE";
+    }
+
+    await mutation.mutate(
+      {
+        body: {
+          Census: {
+            ...census,
+            additionalDetails: {
+              ...census.additionalDetails,
+              confirmedTotalPopulation,
+              confirmedTargetPopulation,
+            },
+            workflow: {
+              action: workflowAction,
+            },
+          },
+        }
+
+      }
+    );
   };
 
+  // Close the popup when the mutation is successful
+  useEffect(() => {
+    if (!mutation.isLoading && mutation.data) {
+      onClose(); // Close popup after saving
+    }
+  }, [mutation.data, mutation.isLoading, onClose]);
+
   return (
     <PopUp
       onClose={onClose}

health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/securityPopUp.js

@@ -69,12 +69,12 @@ const SecurityPopUp = ({ onClose, census }) => {
                 key={q.id}
                 style={{
                   marginBottom: index !== questions.length - 1 ? "1rem" : "0", // No margin after the last question
-                  marginTop: "1rem"
+                  //marginTop: "1rem"
                 }}
               >
-                <label style={{ marginBottom: "1rem", display: "block" }}>
-                  {q.question} {q.required && "*"}
-                </label>
+                <div class="security-question-label">
+                  {q.question}
+                </div>
                 <div> {/* Add margin for space between label and options */}
                   <RadioButtons
                     isMandatory={q.required}