From ac82d090247f02d15b84eca9a70113869cee26f5 Mon Sep 17 00:00:00 2001 From: StefanWout Date: Thu, 10 Oct 2024 15:50:46 +0100 Subject: [PATCH 01/10] fixed issues with number input on firefox, created handleNumericKeydown function to deal with that issue --- .../settings/PortfolioSettings.tsx | 36 +++++++++++++++++-- src/app/utils.ts | 14 ++++++++ 2 files changed, 47 insertions(+), 3 deletions(-) diff --git a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx index 3f1530a8..cc5081cd 100644 --- a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx +++ b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx @@ -5,6 +5,8 @@ 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"; + export default function PortfolioSettings({ portfolioId, @@ -16,6 +18,8 @@ export default function PortfolioSettings({ // Running in the client const router = useRouter(); + //Renaming functionality + const [portfolioName, setPortfolioName] = useState( portfolioSettingsData.name ); @@ -33,16 +37,42 @@ 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( + portfolioSettingsData.budget + ); + + function handleBudgetUpdate() { + // API call to change the budget + // apiFunction(portfolioBudget) + // Update portfolio function with budget is equal to portfolioBudget + console.log(portfolioBudget) + router.refresh(); + } + + function handlePortfolioBudgetUpdate(e: React.ChangeEvent) { + setPortfolioBudget(Number(e.target.value)); + } + return ( <>
  • - Name:{" "} - {" "} + Name: +
    • -
  • Budget: {portfolioSettingsData.budget}
    • +
  • + Budget: + {handleNumericKeyDown(e)}} + /> + +
  • Goal: {portfolioSettingsData.goal}
  • Status: {portfolioSettingsData.status}
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; } + + From dd516b80d161b733ae9f2a219a326cc6bf99c07b Mon Sep 17 00:00:00 2001 From: StefanWout Date: Thu, 10 Oct 2024 17:10:14 +0100 Subject: [PATCH 02/10] placed settings page elements into a table --- .../settings/PortfolioSettings.tsx | 75 ++++++++++++++++--- 1 file changed, 66 insertions(+), 9 deletions(-) diff --git a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx index cc5081cd..adde28b2 100644 --- a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx +++ b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx @@ -6,6 +6,7 @@ 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 { DropdownMenu } from "@/app/shadcn_components/ui/dropdown-menu"; export default function PortfolioSettings({ @@ -56,27 +57,83 @@ export default function PortfolioSettings({ return ( <> -
-
    -
  • - Name: +
    +
      + {/* Row 1: Name */} +
    • + Name: +
      • +
    • +
      • +
      • -
    • - Budget: + + {/* Row 2: Budget */} +
    • + Budget: +
      • +
    • {handleNumericKeyDown(e)}} + onKeyDown={(e) => handleNumericKeyDown(e)} /> +
      • +
      • -
    • Goal: {portfolioSettingsData.goal}
      • -
    • Status: {portfolioSettingsData.status}
      • + + {/* Row 3: Goal */} +
    • + Goal: +
      • +
    • + {portfolioSettingsData.goal} +
      • +
    • + +
      • + + {/* Row 4: Status */} +
    • + Status: +
      • +
    • + {portfolioSettingsData.status} +
      • +
    • + +
    ); + // return ( + // <> + //
    + //
      + //
    • + // Name: + // + // + //
      • + //
    • + // Budget: + // {handleNumericKeyDown(e)}} + // /> + // + //
      • + //
    • Goal: {portfolioSettingsData.goal}
      • + //
    • Status: {portfolioSettingsData.status}
      • + //
    + //
    + // + // ); } From b899cd18b7ca1dbe4695e2e2ec3fec429f8cbf83 Mon Sep 17 00:00:00 2001 From: StefanWout Date: Fri, 11 Oct 2024 15:55:13 +0100 Subject: [PATCH 03/10] trying to write a select function --- .../settings/PortfolioSettings.tsx | 71 ++++++++++--------- .../[slug]/(portfolio)/settings/page.tsx | 3 +- 2 files changed, 40 insertions(+), 34 deletions(-) diff --git a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx index adde28b2..cbd19499 100644 --- a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx +++ b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx @@ -6,8 +6,29 @@ 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 { DropdownMenu } from "@/app/shadcn_components/ui/dropdown-menu"; +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"; +export function SettingsDropdown({startingValue}:{startingValue:string;}) { + return ( + + ) +} export default function PortfolioSettings({ portfolioId, @@ -25,6 +46,10 @@ export default function PortfolioSettings({ portfolioSettingsData.name ); + const [portfolioGoal, setPortfolioGoal] = useState( + portfolioSettingsData.goal + ); + function handleRename() { // API call to rename the portfolio // apiFunction(portfolioName) @@ -57,8 +82,8 @@ export default function PortfolioSettings({ return ( <> -
    -
      +
      +
        {/* Row 1: Name */}
      • Name: @@ -67,14 +92,14 @@ export default function PortfolioSettings({
      • - +
        • {/* Row 2: Budget */}
      • Budget:
        • -
      • +
      • - +
        • {/* Row 3: Goal */} @@ -94,7 +119,7 @@ export default function PortfolioSettings({ {portfolioSettingsData.goal}
      • - +
        • {/* Row 4: Status */} @@ -105,35 +130,15 @@ export default function PortfolioSettings({ {portfolioSettingsData.status}
      • - +
        • + + {/* Row 5: Delete */} +
      • +
      • + {/* */}
      ); - // return ( - // <> - //
      - //
        - //
      • - // Name: - // - // - //
        • - //
      • - // Budget: - // {handleNumericKeyDown(e)}} - // /> - // - //
        • - //
      • Goal: {portfolioSettingsData.goal}
        • - //
      • Status: {portfolioSettingsData.status}
        • - //
      - //
      - // - // ); } 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 From 932e80a64711e2a6b2367c521c9d0dea200da737 Mon Sep 17 00:00:00 2001 From: Khalim Conn-Kowlessar Date: Fri, 11 Oct 2024 16:48:19 +0100 Subject: [PATCH 04/10] implementing dropdowns --- .../settings/PortfolioSettings.tsx | 150 +++++++++++------- 1 file changed, 93 insertions(+), 57 deletions(-) diff --git a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx index cbd19499..c8be4865 100644 --- a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx +++ b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx @@ -6,28 +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 ( - handleValueChange(newValue)}> - Fruits - Apple - Banana - Blueberry - Grapes - Pineapple + {options.map((option, idx) => ( + + {option} + + ))} - ) + ); } export default function PortfolioSettings({ @@ -40,15 +59,17 @@ 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 [portfolioGoal, setPortfolioGoal] = useState( portfolioSettingsData.goal ); + const [portfolioStatus, setPortfolioStatus] = useState( + portfolioSettingsData.status + ); function handleRename() { // API call to rename the portfolio @@ -64,18 +85,18 @@ 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( - portfolioSettingsData.budget - ); + 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) { setPortfolioBudget(Number(e.target.value)); } @@ -83,61 +104,76 @@ export default function PortfolioSettings({ return ( <>
      -
        +
        {/* Row 1: Name */} -
      • +
        Name: -
        • -
      • +
        • +
        - -
      • - -
        • - +
        +
        + +
        + {/* Row 2: Budget */} -
      • +
        Budget: -
        • -
      • +
      +
      handleNumericKeyDown(e)} /> - -
    • - -
      • - +
      +
      + +
      + {/* Row 3: Goal */} -
    • +
      Goal: -
      • -
    • - {portfolioSettingsData.goal} -
      • -
    • - -
      • - +
    + +
    + +
    + + {/* Row 4: Status */} -
  • +
    Status: -
    • -
  • - {portfolioSettingsData.status} -
    • -
  • -
    • +
+
+ +
+ + +
Portfolio Name: {portfolioName}
+
Portfolio Budget: {portfolioBudget}
+
Goal value: {portfolioGoal}
+
Status value: {portfolioStatus}
{/* Row 5: Delete */} -
  • -
  • +
    +
    {/* */} -
    • - +
    + ); From b46d88b55951a96cc84cca7fca74028ff20f4cfd Mon Sep 17 00:00:00 2001 From: StefanWout Date: Fri, 11 Oct 2024 16:52:54 +0100 Subject: [PATCH 05/10] the non useable changes --- .../(portfolio)/settings/PortfolioSettings.tsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx index cbd19499..de28e584 100644 --- a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx +++ b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx @@ -18,7 +18,6 @@ export function SettingsDropdown({startingValue}:{startingValue:string;}) { - Fruits Apple Banana Blueberry @@ -46,10 +45,18 @@ export default function PortfolioSettings({ portfolioSettingsData.name ); + const [portfolioBudget, setPortfolioBudget] = useState( + portfolioSettingsData.budget + ); + const [portfolioGoal, setPortfolioGoal] = useState( portfolioSettingsData.goal ); + const [portfolioStatus, setPortfolioStatus] = useState( + portfolioSettingsData.status + ); + function handleRename() { // API call to rename the portfolio // apiFunction(portfolioName) @@ -62,11 +69,7 @@ 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( - portfolioSettingsData.budget - ); + function handleBudgetUpdate() { // API call to change the budget @@ -130,6 +133,7 @@ export default function PortfolioSettings({ {portfolioSettingsData.status}
  • +
    • {/* Row 5: Delete */} From dba36b850ccc442af3fbc234f5e5f13f9bdd5e8e Mon Sep 17 00:00:00 2001 From: StefanWout Date: Thu, 17 Oct 2024 17:18:54 +0100 Subject: [PATCH 06/10] added notes to better understand state management and marked where the functions for updating the DB need to be created --- .../settings/PortfolioSettings.tsx | 34 ++++++++++--------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx index c8be4865..d351544e 100644 --- a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx +++ b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx @@ -64,43 +64,45 @@ export default function PortfolioSettings({ 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 ); - function handleRename() { - // API call to rename the portfolio - // apiFunction(portfolioName) - // Update portfolio function with name is equal to portfolioName - router.refresh(); - } + // Renaming functionality function handlePortfolioNameChange(e: React.ChangeEvent) { setPortfolioName(e.target.value); } - // Last thing we'd need to do is make that update in the db + function handleRename() { + // API call to rename the portfolio + // apiFunction(portfolioName) + // Update portfolioName + router.refresh(); + } //Change budget functionality - const [portfolioBudget, setPortfolioBudget] = useState< - number | string | null - >(portfolioSettingsData.budget); + + function handlePortfolioBudgetUpdate(e: React.ChangeEvent) { + setPortfolioBudget(Number(e.target.value)); + } function handleBudgetUpdate() { // API call to change the budget // apiFunction(portfolioBudget) - // Update portfolio function with budget is equal to portfolioBudget - console.log(portfolioBudget); + // Update portfolioBudget router.refresh(); } - function handlePortfolioBudgetUpdate(e: React.ChangeEvent) { - setPortfolioBudget(Number(e.target.value)); - } - return ( <>
    From 42782a8db1ed41e40cf13100076aa8573b05f007 Mon Sep 17 00:00:00 2001 From: StefanWout Date: Fri, 18 Oct 2024 14:56:42 +0100 Subject: [PATCH 07/10] added state for modal and modal input, added modal html and tested functionality, just need to add api calls to functions and the page should be functional and ready for a design update --- .../settings/PortfolioSettings.tsx | 93 ++++++++++++++++--- 1 file changed, 81 insertions(+), 12 deletions(-) diff --git a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx index d351544e..1c7f888f 100644 --- a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx +++ b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx @@ -15,9 +15,17 @@ import { 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, @@ -59,7 +67,8 @@ export default function PortfolioSettings({ // Running in the client const router = useRouter(); - // Set up state + // 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 @@ -77,32 +86,73 @@ export default function PortfolioSettings({ portfolioSettingsData.status ); - // Renaming functionality + // Set up state for deleteModal and deleteConfirmation + + const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false) + + const [deleteConfirmationByName, setDeleteConfirmationByName] = useState("") + + function handleDeleteConfirmation() { + // if (deleteConfirmationByName === portfolioName) + console.log("we be deletin stuff") + } + + // RENAMING FUNCTIONS + + // Change NAME functionality - changing state function handlePortfolioNameChange(e: React.ChangeEvent) { setPortfolioName(e.target.value); } - function handleRename() { + // The onClick function called to update the NAME in the DB + + function handleRenameDb() { // API call to rename the portfolio - // apiFunction(portfolioName) + // apiFunction(portfolioSettingsData.name) // Update portfolioName router.refresh(); } - //Change budget functionality + // BUDGET CHANGING FUNCTIONS + + // Change BUDGET functionality - changing state function handlePortfolioBudgetUpdate(e: React.ChangeEvent) { setPortfolioBudget(Number(e.target.value)); } - function handleBudgetUpdate() { + // The onClick function called to update the BUDGET in the DB + + function handleBudgetUpdateDb() { // API call to change the budget - // apiFunction(portfolioBudget) + // apiFunction(portfolioSettingsData.budget) // Update portfolioBudget router.refresh(); } + // CHANGING GOAL AND STATUS FUNCTIONALITY + + // The onClick function called to update the GOAL in the DB + + function handleGoalUpdateDb() { + // API call to change the goal + // apiFunction(portfolioSettingsData.goal) + // Update portfolioGoal + router.refresh(); + } + + // The onClick function called to update the BUDGET in the DB + + function handleStatusUpdateDb() { + // API call to change the status + // apiFunction(portfolioSettingsData.status) + // Update portfolioStatus + router.refresh(); + } + + // HTML to render the page + return ( <>
    @@ -115,7 +165,7 @@ export default function PortfolioSettings({
    -
    @@ -133,7 +183,7 @@ export default function PortfolioSettings({ />
    -
    @@ -150,7 +200,7 @@ export default function PortfolioSettings({ setOption={setPortfolioGoal} /> - + {/* Row 4: Status */}
    @@ -163,7 +213,7 @@ export default function PortfolioSettings({ setOption={setPortfolioStatus} />
    - +
    Portfolio Name: {portfolioName}
    Portfolio Budget: {portfolioBudget}
    @@ -173,10 +223,29 @@ export default function PortfolioSettings({ {/* Row 5: Delete */}
    - {/* */} +
    + {/* Delete portfolio modal */} + + + Are you sure? +

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

    + setDeleteConfirmationByName(e.target.value)} + placeholder="Type portfolio name" /> + + + + +     +     ); } + From 36ec9a8df248d65675576b3e112b5a79e6b736cb Mon Sep 17 00:00:00 2001 From: StefanWout Date: Fri, 18 Oct 2024 15:05:59 +0100 Subject: [PATCH 08/10] complete the if statement determining if the portfolioName and deleteConfirmationByName match,added some error handling to the handleDeleteConfirmation function --- .../(portfolio)/settings/PortfolioSettings.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx index 1c7f888f..d99da549 100644 --- a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx +++ b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx @@ -93,8 +93,18 @@ export default function PortfolioSettings({ const [deleteConfirmationByName, setDeleteConfirmationByName] = useState("") function handleDeleteConfirmation() { - // if (deleteConfirmationByName === portfolioName) console.log("we be deletin stuff") + if (deleteConfirmationByName === portfolioName) { + //API call to delete portfolio + //deletePortfolio(portfolioId) + router.refresh(); + setIsDeleteModalOpen(false); + } else { + // Error if the names don't match + console.log("Portfolio name does not match"); + } + } + } // RENAMING FUNCTIONS From b2b82160849ffbce92a6d6968cbb701e9c3a4922 Mon Sep 17 00:00:00 2001 From: StefanWout Date: Fri, 18 Oct 2024 15:48:12 +0100 Subject: [PATCH 09/10] fixed issue with handleDeleteConfirmation to allow the page to compile --- .../settings/PortfolioSettings.tsx | 31 ++++++++----------- 1 file changed, 13 insertions(+), 18 deletions(-) diff --git a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx index d99da549..91183391 100644 --- a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx +++ b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx @@ -94,17 +94,15 @@ export default function PortfolioSettings({ function handleDeleteConfirmation() { console.log("we be deletin stuff") - if (deleteConfirmationByName === portfolioName) { - //API call to delete portfolio - //deletePortfolio(portfolioId) + // 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.refresh(); - setIsDeleteModalOpen(false); - } else { - // Error if the names don't match - console.log("Portfolio name does not match"); - } - } - } // RENAMING FUNCTIONS @@ -118,8 +116,7 @@ export default function PortfolioSettings({ // The onClick function called to update the NAME in the DB function handleRenameDb() { - // API call to rename the portfolio - // apiFunction(portfolioSettingsData.name) + // apiRanameFunction(portfolioSettingsData.name) // Update portfolioName router.refresh(); } @@ -135,8 +132,7 @@ export default function PortfolioSettings({ // The onClick function called to update the BUDGET in the DB function handleBudgetUpdateDb() { - // API call to change the budget - // apiFunction(portfolioSettingsData.budget) + // apiBudgetChangeFunction(portfolioSettingsData.budget) // Update portfolioBudget router.refresh(); } @@ -146,8 +142,7 @@ export default function PortfolioSettings({ // The onClick function called to update the GOAL in the DB function handleGoalUpdateDb() { - // API call to change the goal - // apiFunction(portfolioSettingsData.goal) + // apiGoalChangeFunction(portfolioSettingsData.goal) // Update portfolioGoal router.refresh(); } @@ -155,8 +150,7 @@ export default function PortfolioSettings({ // The onClick function called to update the BUDGET in the DB function handleStatusUpdateDb() { - // API call to change the status - // apiFunction(portfolioSettingsData.status) + // apiStatusChangeFunction(portfolioSettingsData.status) // Update portfolioStatus router.refresh(); } @@ -259,3 +253,4 @@ export default function PortfolioSettings({ ); } + From dca71dc2c5e0de1e3bf12a95947cfc2cfc0f4fdf Mon Sep 17 00:00:00 2001 From: Khalim Conn-Kowlessar Date: Fri, 18 Oct 2024 16:27:07 +0100 Subject: [PATCH 10/10] peer proframming --- .../settings/PortfolioSettings.tsx | 67 +++++++++++++------ 1 file changed, 47 insertions(+), 20 deletions(-) diff --git a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx index 91183391..d7263825 100644 --- a/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx +++ b/src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx @@ -16,9 +16,9 @@ import { SelectValue, } from "@/app/shadcn_components/ui/select"; import { - Dialog, - DialogContent, - DialogTitle, + Dialog, + DialogContent, + DialogTitle, DialogFooter, } from "@/app/shadcn_components/ui/dialog"; import { PortfolioStatus as PortfolioStatusOptions } from "@/app/db/schema/portfolio"; @@ -88,12 +88,17 @@ export default function PortfolioSettings({ // Set up state for deleteModal and deleteConfirmation - const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false) + const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); - const [deleteConfirmationByName, setDeleteConfirmationByName] = useState("") + const [deleteConfirmationByName, setDeleteConfirmationByName] = useState(""); + + function handleOpenDeleteModal() { + setDeleteConfirmationByName(""); + setIsDeleteModalOpen(true); + } function handleDeleteConfirmation() { - console.log("we be deletin stuff") + console.log("we be deletin stuff"); // if (deleteConfirmationByName === portfolioName) { // //apiDeletePortfolio(portfolioId) // router.refresh(); @@ -102,10 +107,10 @@ export default function PortfolioSettings({ // // Error if the names don't match // console.log("Portfolio name does not match"); // } - router.refresh(); + router.push("/home"); } - // RENAMING FUNCTIONS + // RENAMING FUNCTIONS // Change NAME functionality - changing state @@ -117,7 +122,7 @@ export default function PortfolioSettings({ function handleRenameDb() { // apiRanameFunction(portfolioSettingsData.name) - // Update portfolioName + // Update portfolioName router.refresh(); } @@ -148,7 +153,7 @@ export default function PortfolioSettings({ } // The onClick function called to update the BUDGET in the DB - + function handleStatusUpdateDb() { // apiStatusChangeFunction(portfolioSettingsData.status) // Update portfolioStatus @@ -204,7 +209,9 @@ export default function PortfolioSettings({ setOption={setPortfolioGoal} /> - + {/* Row 4: Status */}
    @@ -217,7 +224,9 @@ export default function PortfolioSettings({ setOption={setPortfolioStatus} />
    - +
    Portfolio Name: {portfolioName}
    Portfolio Budget: {portfolioBudget}
    @@ -227,23 +236,43 @@ export default function PortfolioSettings({ {/* Row 5: Delete */}
    - +
    {/* Delete portfolio modal */} Are you sure?

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

    - setDeleteConfirmationByName(e.target.value)} - placeholder="Type portfolio name" /> + placeholder="Type portfolio name" + /> - - + +     @@ -252,5 +281,3 @@ export default function PortfolioSettings({ ); } - -