import getOptionsJson from "../jsonData/getOptionsJson";
import { getSelectOptions } from "../functions/apiCalls";
import { Button } from "react-bootstrap";
import { SelectComponent } from "../components/SelectComponent";
export const EditTableWithoutAdd = ({
Group,
handleInputChange,
FormName,
table_ID,
ConditionCheck,
errors,
formData,
setFormData,
formUpdateId,
}) => {
const [tableColumns, setTableColumns] = React.useState(Group.Component);
const [tableData, setTableData] = React.useState([]);
const [documentData, setDocumentData] = React.useState([]);
const [editable, setEditable] = React.useState([]);
const [removable, setRemovable] = React.useState([]);
const [formDataCopy, setFormDataCopy] = React.useState({ ...formData });
const [doctype, setDocType] = React.useState([]);
const [docsize, setDocSize] = React.useState([]);
const getTableStructure = (FormName, table_ID) => {
getOptionsJson.FormName = FormName;
getOptionsJson.table_ID = table_ID;
getOptionsJson.session_id = JSON.parse(
localStorage.getItem("sessionData")
).session_id;
getOptionsJson.rdid = JSON.parse(
localStorage.getItem("sessionData")
).session_id;
console.log("getOptionsJson in getTableStructure", getOptionsJson);
getSelectOptions(getOptionsJson)
.then((data) => {
setTableData(data.data.result[0]);
console.log("data here in get table structure ", data);
// return data?.result[0];
})
.catch((error) => {
console.log(error);
});
};
useEffect(() => {
setEditable([]);
setRemovable([]);
setDocType([]);
setDocSize([]);
getOptionsJson.FormName = FormName;
getOptionsJson.table_ID = table_ID;
getOptionsJson.formupdateid = formUpdateId;
getOptionsJson.session_id = JSON.parse(
localStorage.getItem("sessionData")
)?.session_id;
getOptionsJson.rdid = JSON.parse(
localStorage.getItem("sessionData")
)?.session_id;
console.log("getOptionsJson in getTableStructure", getOptionsJson);
getTableStructure(FormName, table_ID);
}, []);
const initializeFormData = () => {
// Create a copy of the current formData
const newFormData = { ...formData };
const newFormDataCopy = { ...formDataCopy };
const newTableData = [...tableData]; // Create a copy of tableData
console.log("PRINTING TABLEDATA HERE", tableData);
// Iterate over tableData to populate formData
newTableData.forEach((rowData, rowIndex) => {
Object.entries(rowData).forEach(([key, value], columnIndex) => {
if (
key === "Editable" ||
key === "Removable" ||
key === "doctype" ||
key === "docsize"
) {
if (key === "docsize") {
setDocSize((prevDocSize) => [...prevDocSize, value]);
}
if (key === "doctype") {
setDocType((prevDocType) => [...prevDocType, value]);
}
// Skip these columns
if (key === "Editable") {
setEditable((prevEditable) => [...prevEditable, value]);
}
if (key === "Removable") {
setRemovable((prevRemovable) => [...prevRemovable, value]);
}
console.log("PRINTING EDITABLE VALUE HERE", editable);
// Skip these columns
} else {
tableColumns.forEach((column, headerColumnIndex) => {
if (columnIndex === headerColumnIndex) {
// Set the value from tableData into formData
if (column.Component_Label) {
// Initialize formData[Group.Group_Name] if not already
if (!newFormData[Group.Group_Name]) {
newFormData[Group.Group_Name] = [];
newFormDataCopy[Group.Group_Name] = [];
}
// Initialize the specific row if not already
if (!newFormData[Group.Group_Name][rowIndex]) {
newFormData[Group.Group_Name][rowIndex] = {};
newFormDataCopy[Group.Group_Name][rowIndex] = {};
}
if (column.Component_Type === "checkbox" && !value) {
newFormData[Group.Group_Name][rowIndex][
column.Component_Label
] = "0";
}
// Ensure value is a string before attempting to split
if (typeof value === "string") {
const valueParts = value.split("-");
if (
valueParts.length > 1 &&
column.Component_Type !== "date"
) {
// If there is a second part, store it in formData
newFormData[Group.Group_Name][rowIndex][
column.Component_Label
] = valueParts[1];
newFormDataCopy[Group.Group_Name][rowIndex][
column.Component_Label
] = valueParts[0]; // Update the first part in the tableData
} else {
const cleanedValue = typeof value === 'string' ? value.replace(/\/g, '') : value;
newFormData[Group.Group_Name][rowIndex][
column.Component_Label
] = cleanedValue;
newFormDataCopy[Group.Group_Name][rowIndex][
column.Component_Label
] = cleanedValue; // Update the value in the tableData
}
} else {
// If the value is not a string, store it as-is
const cleanedValue = typeof value === 'string' ? value.replace(/\/g, '') : value;
newFormData[Group.Group_Name][rowIndex][
column.Component_Label
] = cleanedValue;
newFormDataCopy[Group.Group_Name][rowIndex][
column.Component_Label
] = cleanedValue;
}
}
if (column.Component_Type === "label") {
console.log("logging label tags here ====", value);
}
}
});
}
});
});
// Update both formData and tableData state
setFormDataCopy(newFormDataCopy);
setFormData(newFormData);
// setTableData(newTableData); // Set the updated tableData
};
useEffect(() => {
// initializeDocumentData();
initializeFormData();
}, [tableData]);
const initializeDocumentData = () => {
console.log("Printing tableData here in EditTableWithoutAdd", tableData);
const newDocumentData = tableData.map((data) => ({
Document_Type: data?.Document?.split("-")[1],
Document_Name: data?.Document?.split("-")[0],
doctype: data.doctype,
docsize: data.docsize,
doc_number: "",
}));
setDocumentData(newDocumentData);
};
const handleDocumentDataChange = (index, event) => {
const { value } = event.target;
// Create a new array with updated doc_number
const updatedDocumentData = documentData.map((data, i) =>
i === index ? { ...data, doc_number: value } : data
);
// Update state with new array
setDocumentData(updatedDocumentData);
};
// console.log("Printing documentData here in EditTableWithoutAdd", documentData);
console.log("Printing formData here in EditTableWithoutAdd", formData);
console.log(
"Printing formDataCopy here in EditTableWithoutAdd",
formDataCopy
);
return (
<>
<h2
style={{
fontSize: "24px",
textAlign: "center",
color: "white",
backgroundColor: "rgb(81 141 197)",
padding: "5px",
borderRadius: "5px",
}}
>
{Group.Group_Display}
</h2>
<div style={{ display: "flex" }} className="grp">
<table className="table table-border" border={2}>
<thead>
{tableColumns.map((column) => {
if (
column.Label_Display_name === "Save" ||
column.Label_Display_name ===
"Document/Certificate Reference Number"
) {
return null; // Skip rendering the "Save" column
}
return (
<th
key={column.Label_Display_name}
border={1}
dangerouslySetInnerHTML={{
__html:
(column.Component_Mandatory === 1
? ' <span style="color: red; background-color: #f2f2f2;">*</span>'
: "") + column.Label_Display_name,
}}
style={{ minWidth: "200px" }}
/>
);
})}
</thead>
<tbody>
{formData[Group.Group_Name]?.map((rowData, rowIndex) => (
<tr key={rowIndex}>
{Object.entries(rowData).map(([key, value], columnIndex) => {
if (
key === "Editable" ||
key === "Removable" ||
key === "Save"
// key === "doctype" ||
// key === "docsize"
) {
return null; // Skip rendering specific columns
}
return (
<td key={columnIndex}>
{tableColumns[columnIndex]?.Component_Type === "text" &&
value !== "hide" ? (
<input
className="form-control"
type="text"
value={value || ""}
onChange={(e) =>
handleInputChange(
Group.Group_Name,
tableColumns[columnIndex]?.Component_Label,
e.target.value,
rowIndex,
"",
undefined,
undefined,
undefined,
docsize[rowIndex]
)
}
style={{
fontSize: "14px",
padding: "8px",
border: "1px solid #ccc",
width: "100%",
backgroundColor:
tableColumns[columnIndex]?.Component_Read_Only
? "#f0f0f0"
: "#fff",
color: tableColumns[columnIndex]?.Component_Read_Only
? "#a0a0a0"
: "#000",
}}
placeholder={
tableColumns[columnIndex]?.Component_Help_Text
}
readOnly={parseInt(
tableColumns[columnIndex]?.Component_Read_Only
)}
/>
) : tableColumns[columnIndex]?.Component_Type ===
"label" ? (
formDataCopy[Group.Group_Name][rowIndex][
tableColumns[columnIndex]?.Component_Label
]
) : tableColumns[columnIndex]?.Component_Type ===
"file" && value !== "hide" ? (
<>
<input
type="file"
className="form-control"
accept={doctype[rowIndex]?.split(",")}
onChange={(e) =>
handleInputChange(
Group.Group_Name,
tableColumns[columnIndex]?.Component_Label,
e.target.files[0],
rowIndex,
"",
"file",
undefined,
undefined,
rowData
)
}
style={{
fontSize: "14px",
padding: "8px",
border: "1px solid #ccc",
width: "100%",
backgroundColor: "#f9f9f9",
}}
// readOnly = {parseInt(editable[rowIndex])}
/>
{value !== "" ? (
<a
href={`/FileViewer?fileId=${value}`}
target="_blank"
rel="noopener noreferrer"
>
View
</a>
) : null}
</>
) : tableColumns[columnIndex]?.Component_Type ===
"select" ? (
<>
{/* {JSON.stringify(value)} */}
<SelectComponent
FormName={FormName}
table_ID={
tableColumns[columnIndex].Component_List_values
}
groupName={Group.Group_Name}
componentLabel={
tableColumns[columnIndex].Component_Label
}
selectedValue={value}
handleInputChange={handleInputChange}
rowIndex={rowIndex}
ConditionCheck={ConditionCheck}
readOnly={
tableColumns[columnIndex]?.Component_Read_Only
}
/>
{/* {tableColumns[columnIndex]?.Component_Label === "select" && value === "hide" ? "Hide" : null} */}
</>
) : tableColumns[columnIndex]?.Component_Type ===
"checkbox" ? (
<input
type="checkbox"
checked={parseInt(value)}
onChange={(e) =>
handleInputChange(
Group.Group_Name,
tableColumns[columnIndex].Component_Label,
e.target.checked,
rowIndex
)
}
/>
) : tableColumns[columnIndex]?.Component_Type ===
"date" ? (
<input
type="text"
className="form-control"
value={value}
/>
) : tableColumns[columnIndex]?.Component_Type ===
"number" ? (
<input
className="form-control"
type="text"
value={value || ""}
onChange={(e) => {
const numericValue = e.target.value.replace(
/D/g,
""
); // Remove non-numeric characters
handleInputChange(
Group.Group_Name,
tableColumns[columnIndex]?.Component_Label,
parseInt(numericValue),
rowIndex,
"",
undefined,
undefined,
undefined,
docsize[rowIndex]
);
}}
style={{
fontSize: "14px",
padding: "8px",
border: "1px solid #ccc",
width: "100%",
backgroundColor: "#f9f9f9",
}}
placeholder={
tableColumns[columnIndex]?.Component_Help_Text
}
readOnly={parseInt(
tableColumns[columnIndex]?.Component_Read_Only
)}
/>
) : (
""
)}
{errors &&
errors[Group.Group_Name] &&
errors[Group.Group_Name][rowIndex] &&
errors[Group.Group_Name][rowIndex][
tableColumns[columnIndex]?.Component_Label
] && (
<p
style={{
color: "red",
}}
>
{errors[Group.Group_Name] &&
errors[Group.Group_Name][rowIndex][
tableColumns[columnIndex]?.Component_Label
]}
</p>
)}
</td>
);
})}
</tr>
))}
</tbody>
</table>
</div>
</>
);
};
sometimes formData shows in this component and sometimes not but if I use formDataCopy it always shows data and formDataCopy is just formData. But formData is received from another parent component as a prop and I have to change formData state onChange so i want to use formData as if I use formDataCopy I am unable to update formData state in another component. One thing we can do is that change formDataCopy first and then update formDataCopy but why it is behaving like that ?
