mirror of
https://github.com/Hestia-Homes/assessment-model.git
synced 2026-06-08 11:37:25 +00:00
Finally got the ui for the uploader roughly working and bug free
This commit is contained in:
Khalim Conn-Kowlessar
parent
d1ae0c8470
commit
1bb8406f2e
1 changed files with 159 additions and 140 deletions
|
|
@ -7,15 +7,7 @@ import ModalSubmit from "@/app/components/home/ModalSubmit";
|
|||
|
||||
import { Input } from "@/app/shadcn_components/ui/input";
|
||||
import { Label } from "@/app/shadcn_components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/app/shadcn_components/ui/select";
|
||||
import { set } from "cypress/types/lodash";
|
||||
|
||||
export function InputFile() {
|
||||
return (
|
||||
|
|
@ -26,24 +18,29 @@ export function InputFile() {
|
|||
);
|
||||
}
|
||||
|
||||
interface SelectDropdownProps {
|
||||
options: string[];
|
||||
placeholder: string;
|
||||
onValueChange: (value: string) => void;
|
||||
}
|
||||
type Option = {
|
||||
label: string;
|
||||
value: string;
|
||||
};
|
||||
|
||||
type DropdownProps = {
|
||||
options: Option[];
|
||||
selectedOption: string;
|
||||
onSelectOption: (option: Option) => void;
|
||||
};
|
||||
|
||||
export function SelectDropdown({
|
||||
options,
|
||||
placeholder,
|
||||
onValueChange,
|
||||
}: SelectDropdownProps) {
|
||||
selectedOption,
|
||||
onSelectOption,
|
||||
}: DropdownProps) {
|
||||
return (
|
||||
<Menu as="div" className="relative inline-block text-left w-full">
|
||||
<Float>
|
||||
<Menu.Button className="inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-gray-900 bg-gray-200 rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-opacity-75">
|
||||
{placeholder}
|
||||
<Menu.Button className="inline-flex justify-center w-1/2 px-4 py-2 text-sm font-medium text-white bg-brandblue rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
|
||||
{selectedOption || "Select an option"}
|
||||
<ChevronDownIcon
|
||||
className="ml-2 -mr-1 h-5 w-5 text-gray-500 hover:text-gray-400"
|
||||
className="ml-2 -mr-1 h-5 w-5 text-violet-200 hover:text-violet-100"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Menu.Button>
|
||||
|
|
@ -56,17 +53,19 @@ export function SelectDropdown({
|
|||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="origin-top right-0 w-full rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
{options.map((option, idx) => (
|
||||
<Menu.Item key={idx}>
|
||||
<Menu.Items className=" origin-bottom left-0 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
{options.map((option) => (
|
||||
<Menu.Item key={option.value}>
|
||||
{({ active }) => (
|
||||
<button
|
||||
className={`${
|
||||
active ? "bg-blue-500 text-white" : "text-gray-900"
|
||||
} group flex items-center w-full px-4 py-2 text-sm`}
|
||||
onClick={() => onValueChange(option)}
|
||||
active
|
||||
? "bg-brandmidblue text-white w-full"
|
||||
: "text-gray-900 w-full"
|
||||
} group flex items-center px-4 py-2 text-sm `}
|
||||
onClick={() => onSelectOption(option)}
|
||||
>
|
||||
{option}
|
||||
{option.label}
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
|
|
@ -81,8 +80,49 @@ export function SelectDropdown({
|
|||
const hiddenInputArrows =
|
||||
"[-moz-appearance:_textfield] [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none";
|
||||
|
||||
const selectFundingSchemeOptions = ["None", "SHDF", "ECO4"];
|
||||
const selectGoalOptions = ["None", "Increase EPC", "Reduce energy consumption"];
|
||||
const selectFundingSchemeOptions = [
|
||||
{
|
||||
label: "None",
|
||||
value: "None",
|
||||
},
|
||||
{
|
||||
label: "SHDF",
|
||||
value: "SHDF",
|
||||
},
|
||||
{
|
||||
label: "ECO4",
|
||||
value: "ECO4",
|
||||
},
|
||||
];
|
||||
const selectGoalOptions = [
|
||||
// {
|
||||
// label: "None",
|
||||
// value: "None",
|
||||
// },
|
||||
{
|
||||
label: "Increase EPC",
|
||||
value: "Increase EPC",
|
||||
},
|
||||
{
|
||||
label: "Reduce energy consumption",
|
||||
value: "Reduce energy consumption",
|
||||
},
|
||||
];
|
||||
|
||||
const goalValueOptions = [
|
||||
{
|
||||
label: "C",
|
||||
value: "C",
|
||||
},
|
||||
{
|
||||
label: "B",
|
||||
value: "B",
|
||||
},
|
||||
{
|
||||
label: "A",
|
||||
value: "A",
|
||||
},
|
||||
];
|
||||
|
||||
export default function UploadCsvModal({
|
||||
isOpen = false,
|
||||
|
|
@ -91,47 +131,33 @@ export default function UploadCsvModal({
|
|||
isOpen?: boolean;
|
||||
setIsOpen: (isOpen: boolean) => void;
|
||||
}) {
|
||||
// There is a lingering issue with selecting a dropdown inside of a dialog
|
||||
// https://github.com/radix-ui/primitives/issues/1658
|
||||
// This issue will affect shadcn since it's built on top of radix
|
||||
// The problem comes strictly from the select component propagating clicks to the dialog being, causing the
|
||||
// dialog to close
|
||||
|
||||
const [portfolioName, setPortfolioName] = useState("");
|
||||
const [budget, setBudget] = useState<undefined | number>(undefined);
|
||||
const [selectedOutcome, setSelectedOutcome] =
|
||||
useState<string>("Nothing Specific");
|
||||
|
||||
const [buttonDisabled, setButtonDisabled] = useState(true);
|
||||
const [selectedGoal, setSelectedGoal] = useState<string>("");
|
||||
const [selectedEPC, setSelectedEPC] = useState<string>("");
|
||||
|
||||
function closeModal() {
|
||||
setIsOpen(false);
|
||||
}
|
||||
|
||||
// function handlePortfolioNameChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
// if (e.target.value.length > 0) {
|
||||
// setButtonDisabled(false);
|
||||
// } else {
|
||||
// setButtonDisabled(true);
|
||||
// }
|
||||
// setPortfolioName(e.target.value);
|
||||
// }
|
||||
const [fundingScheme, setFundingScheme] = useState<string>("");
|
||||
const [goalValue, setGoalValue] = useState<string>("");
|
||||
|
||||
function handleGoalChange(value: string) {
|
||||
// e.stopPropagation();
|
||||
console.log(value);
|
||||
setSelectedGoal(value);
|
||||
}
|
||||
|
||||
function handleFundingSchemeChange(e: React.ChangeEvent<HTMLSelectElement>) {
|
||||
setSelectedEPC(e.target.value);
|
||||
function handleFundingSchemeChange(value: string) {
|
||||
setFundingScheme(value);
|
||||
}
|
||||
|
||||
function handleBudgeChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
setBudget(e.target.valueAsNumber);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-10" onClose={closeModal}>
|
||||
<Dialog
|
||||
as="div"
|
||||
className="relative z-10"
|
||||
onClose={() => setIsOpen(false)}
|
||||
>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
|
|
@ -162,104 +188,97 @@ export default function UploadCsvModal({
|
|||
>
|
||||
Upload a CSV of properties
|
||||
</Dialog.Title>
|
||||
<form className="space-y-4">
|
||||
<div className="flex flex-col">
|
||||
<label
|
||||
htmlFor="csv-upload-budget"
|
||||
className="text-sm font-semibold text-gray-600 mb-1 relative"
|
||||
>
|
||||
Budget
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<p className="text-sm text-gray-500 mb-1">
|
||||
If you don'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={portfolioName}
|
||||
// onChange={(e) => handlePortfolioNameChange(e)}
|
||||
className="p-2 border border-gray-200 rounded-md focus:outline-none bg-gray-100"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<label
|
||||
htmlFor="csv-upload-budget"
|
||||
className="text-sm font-semibold text-gray-600 mb-1 relative"
|
||||
>
|
||||
Budget
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<p className="text-sm text-gray-500 mb-1">
|
||||
If you don'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={portfolioName}
|
||||
onChange={(e) => handleBudgeChange(e)}
|
||||
className="p-2 border border-gray-200 rounded-md focus:outline-none bg-gray-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<label
|
||||
htmlFor="portfolio-name"
|
||||
className="text-sm font-semibold text-gray-600 mb-1 relative"
|
||||
>
|
||||
Funding Scheme
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<SelectDropdown
|
||||
options={selectFundingSchemeOptions}
|
||||
placeholder="Select a value "
|
||||
onValueChange={handleFundingSchemeChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<label
|
||||
htmlFor="portfolio-name"
|
||||
className="text-sm font-semibold text-gray-600 mb-1 relative"
|
||||
>
|
||||
Funding Scheme
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<SelectDropdown
|
||||
options={selectFundingSchemeOptions}
|
||||
selectedOption={fundingScheme}
|
||||
onSelectOption={(option) =>
|
||||
setFundingScheme(option.value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<label
|
||||
htmlFor="portfolio-name"
|
||||
className="text-sm font-semibold text-gray-600 mb-1 relative"
|
||||
>
|
||||
Select your goal
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<SelectDropdown
|
||||
options={selectGoalOptions}
|
||||
placeholder="Select a value "
|
||||
onValueChange={handleGoalChange}
|
||||
/>
|
||||
{selectedGoal && (
|
||||
<div className="mt-4">
|
||||
<label
|
||||
htmlFor="csv-upload-epc"
|
||||
className="text-sm font-semibold text-gray-600 mb-1 relative"
|
||||
>
|
||||
Choose a target EPC value
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Select
|
||||
// id="csv-upload-epc"
|
||||
// placeholder="Select a target EPC value"
|
||||
required
|
||||
value={selectedEPC}
|
||||
// onChange={handleEPCChange}
|
||||
// className="p-2 border border-gray-200 rounded-md focus:outline-none bg-gray-100"
|
||||
>
|
||||
<option value="C">C</option>
|
||||
<option value="B">B</option>
|
||||
<option value="A">A</option>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col space-y-2">
|
||||
<div className="flex space-x-2">
|
||||
<InputFile />
|
||||
<div className="flex flex-col">
|
||||
<label className="text-sm font-semibold text-gray-600 mb-1 relative">
|
||||
Select your goal
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<SelectDropdown
|
||||
options={selectGoalOptions}
|
||||
selectedOption={selectedGoal}
|
||||
onSelectOption={(option) => setSelectedGoal(option.value)}
|
||||
/>
|
||||
{selectedGoal && (
|
||||
<div className="mt-4">
|
||||
<label
|
||||
htmlFor="csv-upload-epc"
|
||||
className="text-sm font-semibold text-gray-600 mb-1 relative"
|
||||
>
|
||||
Choose a target EPC value
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<SelectDropdown
|
||||
options={goalValueOptions}
|
||||
selectedOption={goalValue}
|
||||
onSelectOption={(option) =>
|
||||
setGoalValue(option.value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col space-y-2">
|
||||
<div className="flex space-x-2">
|
||||
<InputFile />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
|
||||
onClick={closeModal}
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<ModalSubmit
|
||||
{"Submit button goes here"}
|
||||
{/* <ModalSubmit
|
||||
buttonDisabled={buttonDisabled}
|
||||
portfolioName={portfolioName}
|
||||
// portfolioName={portfolioName}
|
||||
budget={budget}
|
||||
objective={selectedOutcome}
|
||||
/>
|
||||
/> */}
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue