diff --git a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx index 3f1530a8..d7263825 100644 --- a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx +++ b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx @@ -5,6 +5,57 @@ import { PortfolioSettingsType } from "../../utils"; 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 { + Dialog, + DialogContent, + DialogTitle, + DialogFooter, +} from "@/app/shadcn_components/ui/dialog"; +import { PortfolioStatus as PortfolioStatusOptions } from "@/app/db/schema/portfolio"; +import { PortfolioGoal as PortfolioGoalOptions } from "@/app/db/schema/portfolio"; + +// dropdown selection component for both goal and status + +export function SettingsDropdown({ + startingValue, + options, + setOption, +}: { + startingValue: string; + options: string[]; + setOption: (option: string) => void; +}) { + function handleValueChange(newValue: string) { + setOption(newValue); + } + + return ( + + ); +} export default function PortfolioSettings({ portfolioId, @@ -16,36 +67,216 @@ export default function PortfolioSettings({ // Running in the client const router = useRouter(); + // Set up state for portfolioName, portfolioBudget, portfolioGoal and portfolioStatus + + // Syntax const [variable, function whos only job is to update the value of variable] = useState(initial value) const [portfolioName, setPortfolioName] = useState( portfolioSettingsData.name ); - function handleRename() { - // API call to rename the portfolio - // apiFunction(portfolioName) - // Update portfolio function with name is equal to portfolioName - router.refresh(); + const [portfolioBudget, setPortfolioBudget] = useState< + number | string | null + >(portfolioSettingsData.budget); + + const [portfolioGoal, setPortfolioGoal] = useState( + portfolioSettingsData.goal + ); + + const [portfolioStatus, setPortfolioStatus] = useState( + portfolioSettingsData.status + ); + + // Set up state for deleteModal and deleteConfirmation + + const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); + + const [deleteConfirmationByName, setDeleteConfirmationByName] = useState(""); + + function handleOpenDeleteModal() { + setDeleteConfirmationByName(""); + setIsDeleteModalOpen(true); } + function handleDeleteConfirmation() { + console.log("we be deletin stuff"); + // if (deleteConfirmationByName === portfolioName) { + // //apiDeletePortfolio(portfolioId) + // router.refresh(); + // setIsDeleteModalOpen(false); + // } else { + // // Error if the names don't match + // console.log("Portfolio name does not match"); + // } + router.push("/home"); + } + + // RENAMING FUNCTIONS + + // Change NAME functionality - changing state + function handlePortfolioNameChange(e: React.ChangeEvent) { setPortfolioName(e.target.value); } - // Last thing we'd need to do is make that update in the db + // The onClick function called to update the NAME in the DB + + function handleRenameDb() { + // apiRanameFunction(portfolioSettingsData.name) + // Update portfolioName + router.refresh(); + } + + // BUDGET CHANGING FUNCTIONS + + // Change BUDGET functionality - changing state + + function handlePortfolioBudgetUpdate(e: React.ChangeEvent) { + setPortfolioBudget(Number(e.target.value)); + } + + // The onClick function called to update the BUDGET in the DB + + function handleBudgetUpdateDb() { + // apiBudgetChangeFunction(portfolioSettingsData.budget) + // Update portfolioBudget + router.refresh(); + } + + // CHANGING GOAL AND STATUS FUNCTIONALITY + + // The onClick function called to update the GOAL in the DB + + function handleGoalUpdateDb() { + // apiGoalChangeFunction(portfolioSettingsData.goal) + // Update portfolioGoal + router.refresh(); + } + + // The onClick function called to update the BUDGET in the DB + + function handleStatusUpdateDb() { + // apiStatusChangeFunction(portfolioSettingsData.status) + // Update portfolioStatus + router.refresh(); + } + + // HTML to render the page return ( <> -
-
    -
  • - Name:{" "} - {" "} - -
    • -
  • Budget: {portfolioSettingsData.budget}
    • -
  • Goal: {portfolioSettingsData.goal}
    • -
  • Status: {portfolioSettingsData.status}
    • -
+
+
+ {/* Row 1: Name */} +
+ Name: +
+
+ +
+
+ +
+ + {/* Row 2: Budget */} +
+ Budget: +
+
+ handleNumericKeyDown(e)} + /> +
+
+ +
+ + {/* Row 3: Goal */} +
+ Goal: +
+ +
+ +
+ + + {/* Row 4: Status */} +
+ Status: +
+
+ +
+ + +
Portfolio Name: {portfolioName}
+
Portfolio Budget: {portfolioBudget}
+
Goal value: {portfolioGoal}
+
Status value: {portfolioStatus}
+ + {/* Row 5: Delete */} +
+
+ +
+ {/* Delete portfolio modal */} + + + Are you sure? +

+ To confirm, please type the name of the portfolio ( + {portfolioSettingsData.name}) +

+ setDeleteConfirmationByName(e.target.value)} + placeholder="Type portfolio name" + /> + + + + + + +
); diff --git a/src/app/portfolio/[slug]/(portfolio)/settings/page.tsx b/src/app/portfolio/[slug]/(portfolio)/settings/page.tsx index a8a61f3a..533713cc 100644 --- a/src/app/portfolio/[slug]/(portfolio)/settings/page.tsx +++ b/src/app/portfolio/[slug]/(portfolio)/settings/page.tsx @@ -10,7 +10,8 @@ export default async function PortfolioSettingsPage({ // fetch data securely on the server // Stef's page!!!! // 1) Rename - // 2) Delete - much harder + // 2) Update budget, status, goal + // 3) Delete - much harder // fetch data in the server - name, budget, goal, // pass it to a client component to render and take user input diff --git a/src/app/utils.ts b/src/app/utils.ts index f8371c7a..319ae0ce 100644 --- a/src/app/utils.ts +++ b/src/app/utils.ts @@ -1,4 +1,16 @@ import { Rating } from "./db/schema/property"; +import { KeyboardEvent} from "react"; + + export function handleNumericKeyDown(event: KeyboardEvent) { + + /** + * Allowing: Integers | Backspace | Tab | Delete | Left & Right arrow keys + **/ + + const regex = new RegExp(/(^\d*$)|(Backspace|Tab|Delete|ArrowLeft|ArrowRight|ArrowUp|ArrowDown)/); + + return !event.key.match(regex) && event.preventDefault(); + } export function convertDaysToWorkingWeeks(days: number | null) { if (days === null) { @@ -149,3 +161,5 @@ export function roundToDecimalPlaces( const factor = 10 ** decimalPlaces; return Math.round(number * factor) / factor; } + +