Merge pull request #771 from egovernments/HLM-6172

HLM-6172 template download and save and highlight the data after data is adjusted in microplan generation page.
egovernments · Jun 4, 2024 · 8f4d589 · 8f4d589
2 parents db64fe8 + 6c80b72
commit 8f4d589
Show file tree

Hide file tree

Showing 21 changed files with 263 additions and 136 deletions.
diff --git a/micro-ui/web/micro-ui-internals/example/package.json b/micro-ui/web/micro-ui-internals/example/package.json
@@ -10,7 +10,7 @@
   },
   "devDependencies": {
     "@egovernments/digit-ui-libraries": "1.8.1-beta.1",
-    "@egovernments/digit-ui-module-core": "1.8.1-beta.17",
+    "@egovernments/digit-ui-module-core": "1.8.1-beta.23",
     "@egovernments/digit-ui-module-utilities": "1.0.1-beta.1",
     "@egovernments/digit-ui-react-components": "1.8.1-beta.20",
     "@egovernments/digit-ui-module-hcmmicroplanning":"0.0.1",

diff --git a/micro-ui/web/micro-ui-internals/example/src/UICustomizations.js b/micro-ui/web/micro-ui-internals/example/src/UICustomizations.js
@@ -234,6 +234,7 @@ export const UICustomizations = {
       data.body.CampaignDetails.pagination = data?.state?.tableForm
       data.body.CampaignDetails.tenantId = Digit.ULBService.getCurrentTenantId();
       // data.body.CampaignDetails.boundaryCode = boundaryCode;
+      data.body.CampaignDetails.createdBy = Digit.UserService.getUser().info.uuid;
       data.body.CampaignDetails.campaignName = campaignName;
       data.body.CampaignDetails.status = ["drafted"]
       if (startDate) {

diff --git a/micro-ui/web/micro-ui-internals/packages/css/package.json b/micro-ui/web/micro-ui-internals/packages/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-css",
-  "version": "1.0.32-microplan",
+  "version": "1.0.33-microplan",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <[email protected]>",

diff --git a/micro-ui/web/micro-ui-internals/packages/css/src/components/microplanning.scss b/micro-ui/web/micro-ui-internals/packages/css/src/components/microplanning.scss
@@ -579,13 +579,15 @@ $border-color: rgba(214, 213, 212, 1);
     display: block;
     overflow: auto;
     padding-bottom: 0;
+    position: relative;
 
     @include select-dropdown;
 
     table {
-      background-color: rgb(0, 0, 0, 0);
+      background-color: rgb(0, 0, 0, 0) !important;
       width: 100%;
-
+      border-collapse: collapse;
+
       .select-dropdown {
         background-color: rgb(0, 0, 0, 0);
         font-family: Roboto;
@@ -594,22 +596,32 @@ $border-color: rgba(214, 213, 212, 1);
         text-align: left;
       }
 
-      th {
+      thead {
+        position: sticky !important;
+        z-index: 100;
+        top:0;
+        background-color: rgba(250, 250, 250);
+        padding: 0;
+      }
+
+      th{
         width: 50%;
         font-weight: 700;
         font-size: 1rem;
         padding: 1.5rem;
         margin: 0;
         text-align: left;
+        border-bottom: 0.063rem solid rgba(214, 213, 212, 1) ;
       }
-
+      
       td {
         width: 50%;
         font-weight: 400;
         font-size: 1rem;
         padding: 1.5rem;
         margin: 0;
-
+        border-top: 0 !important;
+        border-bottom: 0.063rem solid rgba(214, 213, 212, 1) ;
         p {
           max-width: 20.594rem;
           font-weight: 700;
@@ -2124,7 +2136,7 @@ $border-color: rgba(214, 213, 212, 1);
               height: 100%;
               background-color: rgb(244, 119, 56, 0.12) !important;
             }
-
+            
             th,
             td {
               min-width: 7.578rem;
@@ -2136,6 +2148,20 @@ $border-color: rgba(214, 213, 212, 1);
               font-family: Arial, sans-serif;
               font-size: 0.875rem;
               cursor: pointer;
+              position: relative;
+
+              .edited-row-marker{
+                width: 0.313rem;
+                position: absolute;
+                top: 0;
+                left: -0.313rem;
+                padding: 0;
+                margin: 0;
+                height: 100%;
+                border-top-left-radius: 0.125rem;
+                border-bottom-left-radius: 0.125rem ;
+                background-color: $primary-theme-color;
+              }
             }
 
             th {

diff --git a/...ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/components/Hypothesis.js b/...ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/components/Hypothesis.js
@@ -107,7 +107,7 @@ const Hypothesis = ({ campaignType = "SMC", microplanData, setMicroplanData, che
       if (check) {
         setMicroplanData((previous) => ({ ...previous, hypothesis: assumptions }));
         let checkValid = validateAssumptions(assumptions);
-        checkValid = checkValid && assumptions.length !== 0;
+        checkValid = checkValid && assumptions.filter((subItem) => subItem?.active).length !== 0;
         if (checkValid) setCheckDataCompletion("valid");
         else setCheckDataCompletion("invalid");
       } else {
@@ -121,7 +121,7 @@ const Hypothesis = ({ campaignType = "SMC", microplanData, setMicroplanData, che
   );
 
   const validateAssumptions = useCallback((assumptions) => {
-    return assumptions.every((item) => Object.values(item).filter(subItem => subItem.active).every((data) => data !== "")) && assumptions.length !== 0;
+    return assumptions.filter((item) => item?.active).every((item) => Object.values(item).every((data) => data !== "")) && assumptions.length !== 0;
   }, []);
 
   const cancelUpdateData = useCallback(() => {
@@ -143,6 +143,7 @@ const Hypothesis = ({ campaignType = "SMC", microplanData, setMicroplanData, che
   return (
     <>
       <div className={sectionClass}>
+        <div className="hypothesis-help" style={{ position: "absolute", top: "70%", left: "40%", zIndex: "-100" }} />
         {/* NonInterractable Section */}
         <NonInterractableSection t={t} />
         {/* Interractable Section that includes the example as well as the assumptions */}
@@ -432,15 +433,15 @@ const Example = ({ exampleOption, t }) => {
 const deleteAssumptionHandler = (item, setItemForDeletion, setAssumptions, setHypothesisAssumptionsList, setToast, t) => {
   let add = true;
   setAssumptions((previous) => {
-  if (!previous.length) return [];
+    if (!previous.length) return [];
     if (previous?.length <= 1) {
       setToast({ state: "error", message: t("ERROR_CANNOT_DELETE_LAST_HYPOTHESIS") });
       add = false;
       return previous;
     }
     // const filteredData = previous.filter((data) => data.id !== item.id);
     const deletionElementIndex = previous.findIndex((data) => data.id === item.id);
-    const filteredData = previous.map((data, index) => index === deletionElementIndex ? { ...data, active: false } : data);
+    const filteredData = previous.map((data, index) => (index === deletionElementIndex ? { ...data, active: false } : data));
     return filteredData || [];
   });
   if (add && item && item.key)
@@ -486,7 +487,7 @@ const Select = React.memo(({ item, assumptions, setAssumptions, disabled = false
       });
 
       setOptions((previous) => {
-        let newOptions = previous.filter((item) => item !== e?.code);
+        let newOptions = previous.filter((item) => item?.active && item !== e?.code);
         if (selected && !newOptions.includes(selected)) newOptions.unshift(selected);
         return newOptions;
       });
@@ -495,18 +496,20 @@ const Select = React.memo(({ item, assumptions, setAssumptions, disabled = false
   );
 
   return (
-    <Dropdown
-      variant="select-dropdown"
-      t={t}
-      isMandatory={false}
-      option={filteredOptions?.map((item) => ({ code: item }))}
-      selected={selected}
-      optionKey="code"
-      select={selectChangeHandler}
-      // style={{ width: "100%", backgroundColor: "rgb(0,0,0,0)", position:"sticky" }}
-      optionCardStyles={{ position: "absolute" }}
-      placeholder={t("SELECT_OPTION")}
-    />
+    <div title={selected?.code ? t(selected.code) : undefined}>
+      <Dropdown
+        variant="select-dropdown"
+        t={t}
+        isMandatory={false}
+        option={filteredOptions?.map((item) => ({ code: item }))}
+        selected={selected}
+        optionKey="code"
+        select={selectChangeHandler}
+        // style={{ width: "100%", backgroundColor: "rgb(0,0,0,0)", position:"sticky" }}
+        optionCardStyles={{ position: "absolute" }}
+        placeholder={t("SELECT_OPTION")}
+      />
+    </div>
   );
 });
 
@@ -519,7 +522,7 @@ const Input = React.memo(({ item, setAssumptions, t, disabled = false }) => {
 
   const inputChangeHandler = useCallback(
     (e) => {
-      if( e.target.value.includes("+") || e.target.value.includes("e") ) return
+      if (e.target.value.includes("+") || e.target.value.includes("e")) return;
       if ((e.target.value <= 0 || e.target.value > 10000000000) && e.target.value !== "") return;
       let value;
       const decimalIndex = e.target.value.indexOf(".");

diff --git a/.../micro-ui-internals/packages/modules/hcm-microplanning/src/components/MicroplanPreview.js b/.../micro-ui-internals/packages/modules/hcm-microplanning/src/components/MicroplanPreview.js
@@ -148,8 +148,8 @@ const MicroplanPreview = ({
       ...previous,
       microplanPreview: {
         previewData: dataToShow,
-        userEditedResources
-      }
+        userEditedResources,
+      },
     }));
     setCheckDataCompletion("perform-action");
   }, [dataToShow, setMicroplanData, userEditedResources, setCheckDataCompletion]);
@@ -481,6 +481,9 @@ const DataPreview = memo(
     if (!previewData) return;
     const [tempResourceChanges, setTempResourceChanges] = useState(userEditedResources);
     const [selectedRow, setSelectedRow] = useState();
+    const conmmonColumnIndex = useMemo(() => {
+      return previewData?.[0]?.indexOf(commonColumn);
+    }, [previewData]);
     if (isCampaignLoading || ishierarchyLoading) {
       return (
         <div className="api-data-loader">
@@ -520,12 +523,20 @@ const DataPreview = memo(
             </thead>
             <tbody>
               {previewData.slice(1).map((rowData, rowIndex) => {
-                const rowDataList = Object.values(previewData[0]).map((_, cellIndex) => (
+                const rowDataList = Object.values(previewData[0]).map((header, cellIndex) => (
                   <td
                     className={`${selectedRow && selectedRow - 1 === rowIndex ? "selected-row" : ""}`}
                     key={cellIndex}
-                    style={rowData[cellIndex] || rowData[cellIndex] === 0 ? (!isNaN(rowData[cellIndex]) ? { textAlign: "end" } : {}) : {}}
+                    style={{
+                      ...(rowData[cellIndex] || rowData[cellIndex] === 0 ? (!isNaN(rowData[cellIndex]) ? { textAlign: "end" } : {}) : {}),
+                      ...(userEditedResources?.[rowData?.[conmmonColumnIndex]]?.[header] ||
+                      userEditedResources?.[rowData?.[conmmonColumnIndex]]?.[header] === 0
+                        ? { backgroundColor: "rgba(244, 119, 56, 0.12)" }
+                        : {}),
+                    }}
                   >
+                    {cellIndex==0 && userEditedResources?.[rowData?.[conmmonColumnIndex]] && Object.keys(userEditedResources?.[rowData?.[conmmonColumnIndex]]).length !==0 && <div className="edited-row-marker"></div>}
+
                     {rowData[cellIndex] || rowData[cellIndex] === 0 ? rowData[cellIndex] : t("NO_DATA")}
                   </td>
                 ));
@@ -535,6 +546,9 @@ const DataPreview = memo(
                     onDoubleClick={() => {
                       rowClick(rowIndex + 1);
                     }}
+                    // style={{...(userEditedResources?.[rowData?.[conmmonColumnIndex]] && Object.keys(userEditedResources?.[rowData?.[conmmonColumnIndex]]).length !==0
+                    //     ? { borderL: "1px solid rgba(244, 119, 56, 0.12)" }
+                    //     : {}),}}
                   >
                     {rowDataList}
                   </tr>
@@ -550,7 +564,6 @@ const DataPreview = memo(
               display: "flex",
               flex: 1,
               justifyContent: "flex-end",
-              padding: 0,
               width: "100%",
               padding: "1rem",
             }}
@@ -560,6 +573,7 @@ const DataPreview = memo(
               marginTop: "0.5rem",
               marginBottom: "0.5rem",
               marginRight: "1.4rem",
+              height: "2.5rem",
               width: "12.5rem",
             }}
             headerBarMainStyle={{ padding: "0 0 0 0.5rem" }}
@@ -1007,8 +1021,9 @@ const EditResourceData = ({ previewData, selectedRow, resources, tempResourceCha
 
   const valueChangeHandler = (item, value) => {
     if (!conmmonColumnData) return;
+    if (isNaN(value) || (!isFinite(value) && value !== "")) return;
     let changedDataAgainstBoundaryCode = tempResourceChanges?.[conmmonColumnData] || {};
-    changedDataAgainstBoundaryCode[item] = value;
+    changedDataAgainstBoundaryCode[item] = value == "" ? undefined : parseFloat(value);
     setTempResourceChanges((previous) => ({ ...previous, [conmmonColumnData]: changedDataAgainstBoundaryCode }));
   };
 
@@ -1051,6 +1066,7 @@ const EditResourceData = ({ previewData, selectedRow, resources, tempResourceCha
             let index = previewData?.[0]?.indexOf(item);
             if (index === -1) return;
             const currentData = previewData?.[selectedRow]?.[index];
+
             return (
               <tr key={item}>
                 <td className="column-names">
@@ -1062,9 +1078,13 @@ const EditResourceData = ({ previewData, selectedRow, resources, tempResourceCha
                 <td className="new-value no-left-padding">
                   <TextInput
                     name={"hyopthesis_" + index}
-                    value={item?.value}
+                    value={
+                      tempResourceChanges?.[conmmonColumnData]?.[item] || tempResourceChanges?.[conmmonColumnData]?.[item] === 0
+                        ? tempResourceChanges[conmmonColumnData][item]
+                        : ""
+                    }
+                    type="text"
                     style={{ margin: 0 }}
-                    type="number"
                     t={t}
                     onChange={(value) => valueChangeHandler(item, value.target.value)}
                   />

diff --git a/...cro-ui-internals/packages/modules/hcm-microplanning/src/components/MicroplanningHeader.js b/...cro-ui-internals/packages/modules/hcm-microplanning/src/components/MicroplanningHeader.js
@@ -18,7 +18,7 @@ const MicroplanningHeader = () => {
 
   return (
     <>
-      <Tutorial tutorial={tourState} updateTutorial={setTourState} theme={{zIndex:9999}} />
+      <Tutorial tutorial={tourState} updateTutorial={setTourState} theme={{zIndex:100}} />
       <div className="wbh-header">
         <Help startTour={startTour} labelClassName="help-label"/>
       </div>