i have a problem in stepper where i want to pass the value From step 1 into step 2. In step 1, there shows a list of 'Senarai Barang' which the table has checkbox for doing selection. User must tick at least 1 rows before go to next step. In step 2, i want to display the list that has been selected in step 1. Here my codes:
export default function MohonQTB() {
const [senaraiBarang, setSenaraiBarang] = useState<senaraiBarangItem[]>([]);
const [selectedRows, setSelectedRows] = useState<number[]>([]);
interface senaraiBarangItem{
id: "",
no_kenalan: "",
nama_barang: "",
kuantiti: "",
no_permohonan: "",
no_kawalan: "",
}
const onSelect = (rows: any) => {
console.log("Selected Rows:", rows)
}
const handleNextStep = () => {
setActiveStep((prevActiveStep) => prevActiveStep + 1);
};
const handleNext = () => {
const newActiveStep =
isLastStep() && !allStepsCompleted()
? steps.findIndex((step, i) => !(i in completed))
: activeStep + 1;
setActiveStep(newActiveStep);
};
const handleComplete = () => {
const newCompleted = completed;
newCompleted[activeStep] = true;
setCompleted(newCompleted);
handleNext();
};
/*-------------- Hantar -----------*/
const kembali = () => {
console.log(TAG + "DBG:Go To Next Page : Permohonan QTB");
console.log(TAG + " DBG:Please Put Path to router.push()");
router.push(`/perolehan-qtb/`);
};
/*-------------- Go Back -----------*/
const hantar = () => {
console.log(TAG + "DBG:Go To Next Page : Hantar Permohonan QTB");
console.log(TAG + " DBG:Please Put Path to router.push()");
router.push(`/perolehan-qtb/`);
};
const handleRowSelection = (rows: number[]) => {
setSelectedRows(rows);
};
return (
<div>
{allStepsCompleted() ? (
<React.Fragment/>
) : (
<React.Fragment>
{activeStep === 0 && (
<Box sx={{ padding: 2 }}>
<Grid container spacing={3}>
<Grid item xs={12} lg={12}>
<Grid container spacing={3}>
<Grid item xs={12} lg={12}>
<Box justifyContent="center" alignItems={"center"}>
<Box>
{senaraiBarang.length > 0 ? (
<>
<DataTable
columns={columns}
rows={senaraiBarang.map((item: any, index: any) => {
return {
...(item as Record<string, unknown>),
id: index + 1,
userInput: (
<input type="checkbox"
checked={selectedRows.includes(item.id)}
onChange={() => handleRowSelection([...selectedRows, item.id])}
/>
),
};
})}
initialState={{
pagination: {
paginationModel: {page: 0, pageSize: 10},
},
}}
customPageSize={10}
sx={{
width: "100%",
padding: "0rem",
}}
// disableRowSelectionOnClick
checkboxSelection
/>
</>
) : (
<Grid sx={{ textAlign: "center" }}>
<Typography
variant="subtitle2"
sx={{ color: "#242424", opacity: "0.5" }}
>
Tiada Maklumat
</Typography>
</Grid>
)}
</Box>
</Box>
</Grid>
</Grid>
</Grid>
</Grid>
</Box>
)}
{activeStep === 1 && (
<Box sx={{ padding: 2 }}>
<Grid container spacing={3}>
<Grid item xs={12} lg={12}>
<Grid container spacing={2}>
<Grid item xs={12} lg={12}>
<Grid container spacing={3}>
<Grid item xs={12} lg={12}>
<Box justifyContent="center" alignItems={"center"}>
{/* <Box>
{senaraiBarang.length > 0 ? (
<DataTable
columns={columns}
rows={senaraiBarang
.map((item: any, index: any) => {
return {
...(item as Record<string, unknown>),
id: index + 1,
};
})}
initialState={{
pagination: {
paginationModel: { page: 0, pageSize: 10},
},
}}
customPageSize={10}
sx={{
width: "100%",
padding: "0rem",
}}
/>
) : (
<Grid sx={{ textAlign: "center" }}>
<Typography
variant="subtitle2"
sx={{ color: "#242424", opacity: "0.5" }}
>
Tiada Maklumat
</Typography>
</Grid>
)}
</Box> */}
<Box sx={{ padding: 2 }}>
<DataTable
columns={confirmBarangColumns}
rows={senaraiBarang
.filter((item: any) => selectedRows.includes(item.id))
.map((item: any, index: any) => {
return {
...(item as Record<string, unknown>),
id: index + 1,
};
})}
initialState={{
pagination: {
paginationModel: { page: 0, pageSize: 10 },
},
}}
customPageSize={10}
sx={{
width: "100%",
padding: "0rem",
}}
/>
</Box>
</Box>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<Grid container spacing={2} sx={{ marginTop: "1rem" }}>
<Grid item xs={12} sm={1.5}>
<CustomFormLabel
htmlFor="nama_pelulus"
sx={{ mt: 0, mb: {xs: "-10px", sm: 0} }}
>
{t("Mat.NamaPelulus", { ns: "mat" })}
</CustomFormLabel>
</Grid>
<Grid item xs={12} sm={5}>
<CustomTextField
id="nama_qtb"
name="nama_qtb"
disabledValue="nama_qtb"
fullWidth
/>
</Grid>
</Grid>
</Grid>
</Grid>
</Box>
)}
<Box
sx={{ display: "flex", flexDirection: "row", pt: 2 }}
>
{(() => {
if(activeStep != 0) {
return (
<Button
color="primary"
onClick={handleBack}
>
{t("Mat.Kembali", { ns: "mat" })}
</Button>
);
} else {
return (
<Button onClick={kembali} sx={{ mr: 1 }}>
{t("Mat.Kembali", { ns: "mat" })}
</Button>
);
}
})()}
<Box sx={{ flex: "1 1 auto" }} />
{(() => {
if (activeStep != 1) {
return (
// <Button onClick={handleNextStep} sx={{ mr: 1 }}>
<Button onClick={() => setActiveStep(1)}>
{t("Umum.Seterusnya")}
</Button>
);
} else {
return (
<Button
color="success"
sx={{ mr: 1 }}
type="submit"
onClick={hantar}
>
{t("Mat.Hantar", { ns: "mat" })}
</Button>
);
}
})()}
</Box>
</React.Fragment>
)}
</div>
);
}
The problem that i facing is, step 2 does not shows any data that has been selected in step 1. Help me to solve this problem. Thank you.