Skip to content

Commit

Permalink
Merge pull request #720 from egovernments/HLM-6019
Browse files Browse the repository at this point in the history
  • Loading branch information
@nipunarora-eGov
nipunarora-eGov authored May 29, 2024
2 parents 43288dd + 9301e4a commit 9a7b939
Show file tree
Hide file tree
Showing 12 changed files with 409 additions and 265 deletions.
2 changes: 1 addition & 1 deletion micro-ui/web/micro-ui-internals/packages/css/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@egovernments/digit-ui-css",
"version": "1.0.30-microplan",
"version": "1.0.31-microplan",
"license": "MIT",
"main": "dist/index.css",
"author": "Jagankumar <[email protected]>",
Expand Down
7 changes: 5 additions & 2 deletions micro-ui/web/micro-ui-internals/packages/css/src/components/microplanning.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -688,14 +688,17 @@ $border-color: rgba(214, 213, 212, 1);
width: 100%;
border: 0.063rem solid #ccc;
border-collapse: collapse;

th,
td {
min-width: 7.578rem;
border: 0.063rem solid #ccc;
padding: 8px;
font-family: Arial, sans-serif;
font-size: 14px;
font-size: 0.875rem;
height: 100%;
outline-offset: -0.07rem;
box-sizing: border-box;
}

th {
Expand Down
123 changes: 67 additions & 56 deletions ...ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/components/Hypothesis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const Hypothesis = ({ campaignType = "SMC", microplanData, setMicroplanData, che
else setEditable(true);
}
if (microplanData && microplanData.hypothesis) {
const temp = microplanData?.hypothesis.filter(item=>item.active)
const temp = microplanData?.hypothesis.filter((item) => item.active);
setAssumptions(temp);
}

Expand Down Expand Up @@ -175,7 +175,7 @@ const Hypothesis = ({ campaignType = "SMC", microplanData, setMicroplanData, che
popupModuleMianStyles={{ padding: 0, margin: 0 }}
style={{
flex: 1,
height:"2.5rem",
height: "2.5rem",
border: `0.063rem solid ${PRIMARY_THEME_COLOR}`,
}}
headerBarMainStyle={{ padding: 0, margin: 0 }}
Expand Down Expand Up @@ -241,7 +241,7 @@ const addAssumptionsHandler = (setAssumptions) => {
// previous.length ? previous[previous.length - 1].id + 1 : 0,
key: "",
value: "",
active:true
active: true,
},
]);
};
Expand Down Expand Up @@ -270,49 +270,49 @@ const InterractableSection = React.memo(
}
}, [expandedIndex]);

useEffect(() => {
useEffect(() => {
// Scroll to the expanded item after the state has updated and the DOM has re-rendered
if (renderCycle < 2) {
setRenderCycle(prev => prev + 1); // Increment render cycle count
setRenderCycle((prev) => prev + 1); // Increment render cycle count
} else if (expandedIndex !== null && itemRefs.current[expandedIndex]) {
try {
const parentElement = itemRefs.current[expandedIndex];
const childElement = itemRefs.current[expandedIndex].children[1];
const childElement = itemRefs.current[expandedIndex].children[1];

if (parentElement) {
const scrollContainer = scrollContainerRef.current;
const parentRect = parentElement.getBoundingClientRect();
const containerRect = scrollContainer.getBoundingClientRect();

// Calculate the offset from the top of the container
const offset = parentRect.top - containerRect.top;

// Scroll the container
scrollContainer.scrollTo({
top: scrollContainer.scrollTop + offset - 10,
behavior: 'smooth'
behavior: "smooth",
});
}

if (childElement) {
childElement.focus();
}
} catch (error) {
console.error("Error scrolling to element:", error);
}
}
}, [renderCycle,expandedIndex]);
}, [renderCycle, expandedIndex]);

useEffect(() => {
if (expandedIndex !== null) {
const observer = new MutationObserver(() => {
setRenderCycle((prev) => prev + 1); // Trigger render cycle when the DOM changes
});

if (itemRefs.current[expandedIndex]) {
observer.observe(itemRefs.current[expandedIndex], { childList: true, subtree: true });
}

return () => observer.disconnect();
}
}, [expandedIndex]);
Expand All @@ -331,7 +331,7 @@ const InterractableSection = React.memo(
);

return (
<div className="user-input-section" ref={scrollContainerRef}>
<div className="user-input-section" ref={scrollContainerRef}>
<Example exampleOption={exampleOption} t={t} />
<div className="interactable-section">
<div className="headerbar">
Expand All @@ -351,39 +351,48 @@ const InterractableSection = React.memo(
</button>
</div>
</div>
{assumptions?.filter(item=>item.active)?.map((item, index) => (
<div
key={index}
className={`${index === 0 ? "select-and-input-wrapper-first" : "select-and-input-wrapper"} ${index ===assumptions?.filter(item=>item.active)?.length -1 ?"last-container":""} `}
>
<div className="key"
ref={el => { itemRefs.current[index] = el; }}
onClick={() => {toggleExpand(index)}}
{assumptions
?.filter((item) => item.active)
?.map((item, index) => (
<div
key={index}
className={`${index === 0 ? "select-and-input-wrapper-first" : "select-and-input-wrapper"} ${
index === assumptions?.filter((item) => item.active)?.length - 1 ? "last-container" : ""
} `}
>
<Select
key={item.id}
item={item}
assumptions={assumptions}
setAssumptions={setAssumptions}
options={hypothesisAssumptionsList}
setOptions={setHypothesisAssumptionsList}
t={t}
/>
</div>
<div className="value">
<Input key={item.id} item={item} t={t} assumptions={assumptions} setAssumptions={setAssumptions} />
</div>
<div>
<button className="delete-button delete-button-help-locator" onClick={() => deleteHandler(item)}>
<div>
{" "}
<Trash width={"0.8rem"} height={"1rem"} fill={PRIMARY_THEME_COLOR} />
</div>
<p>{t("DELETE")}</p>
</button>
<div
className="key"
ref={(el) => {
itemRefs.current[index] = el;
}}
onClick={() => {
toggleExpand(index);
}}
>
<Select
key={item.id}
item={item}
assumptions={assumptions}
setAssumptions={setAssumptions}
options={hypothesisAssumptionsList}
setOptions={setHypothesisAssumptionsList}
t={t}
/>
</div>
<div className="value">
<Input key={item.id} item={item} t={t} assumptions={assumptions} setAssumptions={setAssumptions} />
</div>
<div>
<button className="delete-button delete-button-help-locator" onClick={() => deleteHandler(item)}>
<div>
{" "}
<Trash width={"0.8rem"} height={"1rem"} fill={PRIMARY_THEME_COLOR} />
</div>
<p>{t("DELETE")}</p>
</button>
</div>
</div>
</div>
))}
))}
</div>
</div>
);
Expand Down Expand Up @@ -430,9 +439,9 @@ const deleteAssumptionHandler = (item, setItemForDeletion, setAssumptions, setHy
return previous;
}
// const filteredData = previous.filter((data) => data.id !== item.id);
const deletionElementIndex = previous.findIndex(data=>data.id !== item.id)
let filteredData = _.cloneDeep(previous)
filteredData[deletionElementIndex].active = false
const deletionElementIndex = previous.findIndex((data) => data.id !== item.id);
let filteredData = _.cloneDeep(previous);
filteredData[deletionElementIndex].active = false;
return filteredData || [];
});
if (add && item && item.key)
Expand Down Expand Up @@ -511,15 +520,16 @@ const Input = React.memo(({ item, setAssumptions, t, disabled = false }) => {

const inputChangeHandler = useCallback(
(e) => {
if ((e.target.value <= 0 || e.target.value / 100000000000 >= 1) && e.target.value ) return;
if ((e.target.value <= 0 || e.target.value > 10000000000) && e.target.value !== "" && ["+", "e"].includes(e.target.value)) return;
let value;
const decimalIndex = e.target.value.indexOf(".");
if (decimalIndex !== -1) {
const numDecimals = e.target.value.length - decimalIndex - 1;
if (numDecimals > 2) {
value = parseFloat(e.target.value.substring(0, decimalIndex + 3));
} else {
value = parseFloat(e.target.value);
value = e.target.value;
if (numDecimals <= 2) {
value = e.target.value;
} else if (numDecimals > 2) {
value = value.substring(0, decimalIndex + 3);
}
} else value = parseFloat(e.target.value);

Expand All @@ -546,14 +556,15 @@ const Input = React.memo(({ item, setAssumptions, t, disabled = false }) => {
return (
<TextInput
name={"input"}
type={"number"}
type={"text"}
value={inputValue}
t={t}
config={{}}
onChange={
// valueChangeHandler({ item, newValue: value?.target?.value }, setTempHypothesisList, boundarySelections, setToast, t)
inputChangeHandler
}
style={{ paddingRight: "0.7rem" }}
disable={false}
/>
);
Expand All @@ -568,7 +579,7 @@ const setAutofillHypothesisData = (autofillHypothesis, assumptions, setAssumptio
id: uuid,
key: autofillHypothesis[Number(i)],
value: "",
active:true
active: true,
});
}
setAssumptions(newAssumptions);
Expand Down
11 changes: 10 additions & 1 deletion ...-ui-internals/packages/modules/hcm-microplanning/src/components/JsonPreviewInExcelForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,17 @@ export const JsonPreviewInExcelForm = (props) => {
{sheetsData?.[currentSheetName]?.slice(1).map((rowData, rowIndex) => (
<tr key={rowIndex}>
{Object.values(sheetsData?.[currentSheetName]?.[0])?.map((_, cellIndex) => {
const headerName = sheetsData?.[currentSheetName]?.[0]?.[cellIndex]
const error = headerName ? props?.errorLocationObject?.[currentSheetName]?.[rowIndex]?.[headerName] : undefined;
return (
<td key={cellIndex} style={!Number.isNaN(parseFloat(rowData[cellIndex])) ? { textAlign: "end" } : {}}>
<td
key={cellIndex}
style={{
...(!isNaN(rowData[cellIndex]) && isFinite(rowData[cellIndex]) ? { textAlign: "end" } : {}),
...( error? {backgroundColor:"rgb(250,148,148)"} : {}),
}}
title={error? t(error):undefined}
>
{rowData[cellIndex] || ""}
</td>
);
Expand Down
13 changes: 7 additions & 6 deletions .../micro-ui-internals/packages/modules/hcm-microplanning/src/components/MicroplanPreview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -398,7 +398,7 @@ const HypothesisValues = memo(({ boundarySelections, hypothesisAssumptionsList,
{/* Dropdown for boundaries */}
<TextInput
name={"hyopthesis_" + index}
type={"number"}
type={"text"}
value={item?.value}
t={t}
config={{}}
Expand Down Expand Up @@ -824,15 +824,16 @@ const useHypothesis = (tempHypothesisList, hypothesisAssumptionsList) => {
return setToast({ state: "error", message: t("HYPOTHESIS_CAN_BE_ONLY_APPLIED_ON_ADMIN_LEVEL_ZORO") });

// validating user input
if ((e?.newValue <= 0 || e?.newValue / 100000000000 >= 1) && e?.newValue !== "") return;
if ((e?.newValue <= 0 || e.newValue > 10000000000) && e?.newValue !== "" || ["+","e"].includes(e?.newValue) ) return;
let value;
const decimalIndex = e.newValue.indexOf(".");
if (decimalIndex !== -1) {
const numDecimals = e.newValue.length - decimalIndex - 1;
if (numDecimals > 2) {
value = parseFloat(e.newValue.substring(0, decimalIndex + 3));
} else {
value = parseFloat(e.newValue);
if(numDecimals <= 2 ){
value = e.newValue;
}
else if (numDecimals > 2) {
value = e.newValue.substring(0, decimalIndex + 3);
}
} else value = parseFloat(e.newValue);
value = !isNaN(value) ? value : "";
Expand Down
18 changes: 12 additions & 6 deletions ...-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/components/Nagivator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,16 +43,22 @@ const Navigator = memo((props) => {

// Might need it later
// Effect to handle data completion validation and show toast
// useEffect(() => {
// if (checkDataCompletion === "false" || checkDataCompletion === "true" || checkDataCompletion === "valid") return;
// if (checkDataCompletion === "invalid") setToast(t("COMMON_PLEASE_FILL_ALL_THE_FIELDS"));
// setCheckDataCompletion("false");
// }, [checkDataCompletion]);
useEffect(() => {
if (checkDataCompletion === "invalid") {
if (navigationEvent && navigationEvent.name === "next") {
setToast(t("MICROPLAN_PLEASE_FILL_ALL_THE_FIELDS_AND_RESOLVE_ALL_THE_ERRORS"));
} else if (navigationEvent && navigationEvent.name === "step" && navigationEvent.step != undefined) {
if (navigationEvent.step > currentPage.id) setToast(t("MICROPLAN_PLEASE_FILL_ALL_THE_FIELDS_AND_RESOLVE_ALL_THE_ERRORS"));
else onStepClick(navigationEvent.step);
} else if (navigationEvent && navigationEvent.name === "previousStep") previousStep();
setCheckDataCompletion("false");
}
}, [checkDataCompletion]);

// Effect to handle navigation events and transition between steps
useEffect(() => {
// if (checkDataCompletion !== "valid" || navigationEvent === undefined) return;
if (checkDataCompletion === "valid" || checkDataCompletion === "invalid") {
if (checkDataCompletion === "valid" && ((navigationEvent.step && currentPage.id + 1 === navigationEvent.step || currentPage.id > navigationEvent.step) || !navigationEvent.step)) {
if (typeof props.nextEventAddon === "function") {
if (LoadCustomComponent({ component: props.components[currentPage?.component] }) !== null)
props.nextEventAddon(currentPage, checkDataCompletion, setCheckDataCompletion);
Expand Down
Loading

0 comments on commit 9a7b939

Please sign in to comment.