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

fixed merge

Browse source
This commit is contained in:
StefanWout 2024-10-11 16:56:58 +01:00
commit cb89ab2358
1 changed files with 92 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

152
src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx
View file

@ -6,27 +6,47 @@ import { Button } from "@/app/shadcn_components/ui/button";
import { Input } from "@/app/shadcn_components/ui/input";
import { useRouter } from "next/navigation";
import { handleNumericKeyDown } from "@/app/utils";
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/app/shadcn_components/ui/select"
import { PortfolioStatus } from "@/app/db/schema/portfolio";
import { PortfolioGoal } from "@/app/db/schema/portfolio";
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from "@/app/shadcn_components/ui/select";
import { PortfolioStatus as PortfolioStatusOptions } from "@/app/db/schema/portfolio";
import { PortfolioGoal as PortfolioGoalOptions } from "@/app/db/schema/portfolio";
export function SettingsDropdown({
startingValue,
options,
setOption,
}: {
startingValue: string;
options: string[];
setOption: (option: string) => void;
}) {
function handleValueChange(newValue: string) {
setOption(newValue);
}
export function SettingsDropdown({startingValue}:{startingValue:string;}) {
return (
<Select>
<Select onValueChange={(newValue) => handleValueChange(newValue)}>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder={startingValue} />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="apple">Apple</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="blueberry">Blueberry</SelectItem>
<SelectItem value="grapes">Grapes</SelectItem>
<SelectItem value="pineapple">Pineapple</SelectItem>
{options.map((option, idx) => (
<SelectItem value={option} key={idx}>
{option}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
)
);
}
export default function PortfolioSettings({
@ -39,20 +59,14 @@ export default function PortfolioSettings({
// Running in the client
const router = useRouter();
//Renaming functionality
// Set up state
// Syntax const [variable, function whos only job is to update the value of variable] = useState(initial value)
const [portfolioName, setPortfolioName] = useState(
portfolioSettingsData.name
);
const [portfolioBudget, setPortfolioBudget] = useState<number|string|null>(
portfolioSettingsData.budget
);
const [portfolioGoal, setPortfolioGoal] = useState(
portfolioSettingsData.goal
);
const [portfolioStatus, setPortfolioStatus] = useState(
portfolioSettingsData.status
);
@ -69,16 +83,20 @@ export default function PortfolioSettings({
}
// Last thing we'd need to do is make that update in the db
//Change budget functionality
const [portfolioBudget, setPortfolioBudget] = useState<
number | string | null
>(portfolioSettingsData.budget);
function handleBudgetUpdate() {
// API call to change the budget
// apiFunction(portfolioBudget)
// Update portfolio function with budget is equal to portfolioBudget
console.log(portfolioBudget)
console.log(portfolioBudget);
router.refresh();
}
function handlePortfolioBudgetUpdate(e: React.ChangeEvent<HTMLInputElement>) {
setPortfolioBudget(Number(e.target.value));
}
@ -86,62 +104,76 @@ export default function PortfolioSettings({
return (
<>
<div className="p-4 mt-5 flex justify-center max-w-8xl w-8xl pt-5 bg-gray-50 rounded-lg text-brandblue">
<ul className="grid grid-cols-[max-content_1fr_min-content] gap-x-[5px] gap-y-4">
<div className="grid grid-cols-[max-content_1fr_min-content] gap-x-[5px] gap-y-4">
{/* Row 1: Name */}
<li className="flex items-center">
<div className="flex items-center">
<span>Name:</span>
</li>
<li className="flex items-center">
</div>
<div className="flex items-center">
<Input value={portfolioName} onChange={handlePortfolioNameChange} />
</li>
<li className="flex items-center">
<Button className="w-full" onClick={handleRename}>Rename</Button>
</li>
</div>
<div className="flex items-center">
<Button className="w-full" onClick={handleRename}>
Rename
</Button>
</div>
{/* Row 2: Budget */}
<li className="flex items-center">
<div className="flex items-center">
<span>Budget:</span>
</li>
<li className="flex items-center max-w-8xl">
</div>
<div className="flex items-center max-w-8xl">
<Input
type="number"
value={portfolioBudget ?? undefined}
onChange={handlePortfolioBudgetUpdate}
onKeyDown={(e) => handleNumericKeyDown(e)}
/>
</li>
<li className="flex items-center">
<Button className="w-full" onClick={handleBudgetUpdate}>Update</Button>
</li>
</div>
<div className="flex items-center">
<Button className="w-full" onClick={handleBudgetUpdate}>
Update
</Button>
</div>
{/* Row 3: Goal */}
<li className="flex items-center">
<div className="flex items-center">
<span>Goal:</span>
</li>
<li className="flex items-center">
{portfolioSettingsData.goal}
</li>
<li className="flex items-center">
<SettingsDropdown startingValue={portfolioGoal}/>
</li>
</div>
<div className="flex items-center">
<SettingsDropdown
startingValue={portfolioGoal}
options={PortfolioGoalOptions}
setOption={setPortfolioGoal}
/>
</div>
<Button className="w-full">Update</Button>
{/* Row 4: Status */}
<li className="flex items-center">
<div className="flex items-center">
<span>Status:</span>
</li>
<li className="flex items-center">
{portfolioSettingsData.status}
</li>
<li className="flex items-center">
<SettingsDropdown startingValue={portfolioStatus}/>
</li>
</div>
<div className="flex items-center">
<SettingsDropdown
startingValue={portfolioStatus}
options={PortfolioStatusOptions}
setOption={setPortfolioStatus}
/>
</div>
<Button className="w-full">Update</Button>
<div className="col-span-3"> Portfolio Name: {portfolioName}</div>
<div className="col-span-3"> Portfolio Budget: {portfolioBudget}</div>
<div className="col-span-3"> Goal value: {portfolioGoal}</div>
<div> Status value: {portfolioStatus}</div>
{/* Row 5: Delete */}
<li className="col-span-2"></li>
<li className="flex items-center">
<div className="col-span-2"></div>
<div className="flex items-center">
{/* <Button className="max-width: 100% bg-red-700" onClick={DeletePortfolio}>Delete Portfolio</Button> */}
</li>
</ul>
</div>
</div>
</div>
</>
);