junte/assessment-model
1
0
Fork 0
mirror of https://github.com/Hestia-Homes/assessment-model.git synced 2026-06-08 11:37:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Updated button enable logic to require upload of a csv

Browse source
This commit is contained in:
Khalim Conn-Kowlessar 2023-07-13 14:04:56 +01:00
parent a99b492e2b
commit 3b66371bb1
1 changed files with 67 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
src/app/components/portfolio/UploadCsvModal.tsx
View file

@ -72,11 +72,37 @@ export const SubmitPlan = ({
);
};
export function InputFile() {
export function InputFile({
handleButtonDisabled,
setCsvFile,
selectedGoal,
fundingScheme,
goalValue,
}: {
handleButtonDisabled: (
goal?: string,
scheme?: string,
value?: string,
file?: File | null
) => void;
setCsvFile: (file: File) => void;
selectedGoal: string;
fundingScheme: string;
goalValue: string;
}) {
return (
<div className="grid w-full max-w-sm items-center gap-1.5 text-sm font-semibold text-gray-600">
<Label htmlFor="csv-uploader">Upload your csv</Label>
<Input id="csv-uploader" type="file" className="cursor-pointer" />
<Input
id="csv-uploader"
type="file"
className="cursor-pointer"
onChange={(event) => {
const file = event.target.files[0];
setCsvFile(file); // Assuming you have a state to keep the file
handleButtonDisabled(selectedGoal, fundingScheme, goalValue, file);
}}
/>
</div>
);
}
@ -210,6 +236,12 @@ export default function UploadCsvModal({
const [fundingScheme, setFundingScheme] = useState<string>("");
const [goalValue, setGoalValue] = useState<string>("");
const [csvFile, setCsvFile] = useState<File | null>(null);
function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
setCsvFile(e.target.files ? e.target.files[0] : null);
}
function handleBudgeChange(e: React.ChangeEvent<HTMLInputElement>) {
setBudget(e.target.valueAsNumber);
}
@ -217,7 +249,8 @@ export default function UploadCsvModal({
function handleButtonDisabled(
goal?: string,
scheme?: string,
value?: string
value?: string,
file?: File | null
) {
// This function is defined as such to accomodate for the asynchonous nature of state setting
// The first time this is called, the setState function will be run before this but the state value
@ -225,7 +258,8 @@ export default function UploadCsvModal({
if (
(goal || selectedGoal) &&
(scheme || fundingScheme) &&
(value || goalValue)
(value || goalValue) &&
(file || csvFile)
) {
setButtonDisabled(false);
}
@ -283,19 +317,25 @@ export default function UploadCsvModal({
Budget
<span className="text-red-500">*</span>
</label>
<p className="text-sm text-gray-500 mb-2 leading-relaxed tracking-wider">
<p className="text-sm text-gray-500 mb-2 leading-relaxed tracking-wider">
If you don&apos;t set a budget, we will aim to minimise
cost anyway
</p>
<input
id="csv-upload-budget"
type="number"
placeholder="Set a budget"
required
value={budget}
onChange={(e) => handleBudgeChange(e)}
className="p-2 border border-gray-200 rounded-md focus:outline-none bg-gray-100"
/>
<div className="flex items-center border border-gray-200 rounded-md bg-gray-100">
<span className="mx-2 text-gray-700">£</span>
<input
id="csv-upload-budget"
type="number"
placeholder="Set a budget"
required
value={budget}
onChange={(e) => handleBudgeChange(e)}
onKeyDown={(e) =>
(e.key === "e" || e.key === "E") && e.preventDefault()
}
className="p-2 focus:outline-none bg-transparent w-full"
/>
</div>
</div>
<div className="flex flex-col mt-6">
@ -314,7 +354,8 @@ export default function UploadCsvModal({
handleButtonDisabled(
selectedGoal,
option.value,
goalValue
goalValue,
csvFile
);
}}
/>
@ -333,7 +374,8 @@ export default function UploadCsvModal({
handleButtonDisabled(
option.value,
fundingScheme,
goalValue
goalValue,
csvFile
);
}}
/>
@ -354,7 +396,8 @@ export default function UploadCsvModal({
handleButtonDisabled(
selectedGoal,
fundingScheme,
option.value
option.value,
csvFile
);
}}
/>
@ -364,7 +407,13 @@ export default function UploadCsvModal({
<div className="flex flex-col space-y-2 mt-7">
<div className="flex space-x-2">
<InputFile />
<InputFile
handleButtonDisabled={handleButtonDisabled}
setCsvFile={setCsvFile}
selectedGoal={selectedGoal}
fundingScheme={fundingScheme}
goalValue={goalValue}
/>
</div>
</div>