Delete setting implemented

rylorin · Dec 19, 2024 · 0d4e4c3 · 0d4e4c3
1 parent 75d2d66
commit 0d4e4c3
Show file tree

Hide file tree

Showing 27 changed files with 399 additions and 213 deletions.
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
     "release": "yarn lint && yarn qc && yarn doc && yarn build && yarn run storybook:build",
     "serve": "vite preview",
     "server:build": "tsc --project tsconfig.server.json",
-    "server:dev": "ts-node-dev --project tsconfig.server.json src/index -watch -server -account -import",
+    "server:dev": "ts-node-dev --project tsconfig.server.json src/index -watch -server -account -import -trader",
     "start": "node dist/index.js -server",
     "start:dev": "concurrently \"yarn server:dev\" \"yarn client:dev\"",
     "storybook": "storybook dev -p 6006",
@@ -41,7 +41,7 @@
     "@chakra-ui/system": "^2.6.2",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
-    "@stoqey/ib": "stoqey/ib#af290a9eec07a6038c237d8114fd107d274ed400",
+    "@stoqey/ib": "stoqey/ib#befe2050946d4768c694d5e21296f6b7eaafc310",
     "@tanstack/react-table": "^8.20.5",
     "chakra-react-select": "^5.0.2",
     "chart.js": "^4.4.7",

diff --git a/src/app/components/Portfolio/Portfolio/PortfolioEdit.tsx b/src/app/components/Portfolio/Portfolio/PortfolioEdit.tsx
@@ -1,63 +1,100 @@
 import { ArrowBackIcon, CheckIcon } from "@chakra-ui/icons";
-import { Center, Flex, Text } from "@chakra-ui/layout";
+import { Flex, IconButton, Select, Text } from "@chakra-ui/react";
+import { Field, Formik, FormikProps } from "formik";
 import React, { FunctionComponent } from "react";
-import { Link as RouterLink, useLoaderData, useNavigate } from "react-router-dom";
-import { Portfolio as PortfolioModel } from "../../../../models/portfolio.model";
+import { Form, useLoaderData, useNavigate, useSubmit } from "react-router-dom";
+import { PortfolioEntry } from "../../../../routers";
 import { obfuscate } from "../../../utils";
 
 type PortfolioShowProps = Record<string, never>;
 
 const PortfolioEdit: FunctionComponent<PortfolioShowProps> = ({ ..._rest }): React.ReactNode => {
-  const thisPortfolio = useLoaderData() as PortfolioModel;
+  const thisPortfolio = useLoaderData() as PortfolioEntry;
   const navigate = useNavigate();
+  const submit = useSubmit();
 
   return (
-    <>
-      <Flex justifyContent="center" gap="2">
-        <Text w="90px" as="b" textAlign="right">
-          Id:
-        </Text>
-        <Text textAlign="left" w="120px">
-          {thisPortfolio.id}
-        </Text>
-      </Flex>
-      <Flex justifyContent="center" gap="2">
-        <Text w="90px" as="b" textAlign="right">
-          Name:
-        </Text>
-        <Text w="120px" textAlign="left">
-          {thisPortfolio.name}
-        </Text>
-      </Flex>
-      <Flex justifyContent="center" gap="2">
-        <Text w="90px" as="b" textAlign="right">
-          Account:
-        </Text>
-        <Text w="120px" textAlign="left">
-          {obfuscate(thisPortfolio.account)}
-        </Text>
-      </Flex>
-      <Flex justifyContent="center" gap="2">
-        <Text w="90px" as="b" textAlign="right">
-          Currency:
-        </Text>
-        <Text w="120px" textAlign="left">
-          {thisPortfolio.baseCurrency}
-        </Text>
-      </Flex>
-      <Flex justifyContent="center" gap="2" mt="1">
-        <Center w="40px" h="40px">
-          <ArrowBackIcon
-            onClick={async () => navigate(-1)} // eslint-disable-line @typescript-eslint/no-misused-promises
-          />
-        </Center>
-        <RouterLink to={`../`}>
-          <Center w="40px" h="40px">
-            <CheckIcon />
-          </Center>
-        </RouterLink>
-      </Flex>
-    </>
+    <Formik
+      initialValues={thisPortfolio}
+      onSubmit={(values, _actions): void => {
+        // console.log("submit values", values);
+        submit(
+          values,
+          // {
+          //   ...values,
+          // Select values are returned as string, therefore we have to convert them to numbers, if needed
+          //   status: parseInt(values.status as unknown as string),
+          //   strategy: parseInt(values.strategy as unknown as string),
+          // },
+          { method: "POST" },
+        ).catch(() => console.error("Failed to submit data!"));
+      }}
+    >
+      {(formik: FormikProps<PortfolioEntry>): React.ReactNode => {
+        return (
+          <Form method="post" onSubmit={formik.handleSubmit}>
+            {" "}
+            <Flex justifyContent="center" gap="2">
+              <Text w="90px" as="b" textAlign="right">
+                Id:
+              </Text>
+              <Text textAlign="left" w="120px">
+                {thisPortfolio.id}
+              </Text>
+            </Flex>
+            <Flex justifyContent="center" gap="2">
+              <Text w="90px" as="b" textAlign="right">
+                Name:
+              </Text>
+              <Text w="120px" textAlign="left">
+                {thisPortfolio.name}
+              </Text>
+            </Flex>
+            <Flex justifyContent="center" gap="2">
+              <Text w="90px" as="b" textAlign="right">
+                Account:
+              </Text>
+              <Text w="120px" textAlign="left">
+                {obfuscate(thisPortfolio.account)}
+              </Text>
+            </Flex>
+            <Flex justifyContent="center" gap="2">
+              <Text w="90px" as="b" textAlign="right">
+                Currency:
+              </Text>
+              <Text w="120px" textAlign="left">
+                {thisPortfolio.baseCurrency}
+              </Text>
+            </Flex>
+            <Flex justifyContent="center" gap="2">
+              <Text w="90px" as="b" textAlign="right">
+                Cash:
+              </Text>
+              <Field as={Select} name="benchmark_id" w="200px" type="number" variant="outline">
+                <option value={thisPortfolio.benchmark_id} key={`k${thisPortfolio.benchmark_id}`}>
+                  {thisPortfolio.benchmark.symbol} ({thisPortfolio.benchmark_id})
+                </option>
+                <option disabled={true}>-</option>
+                {/* {Object.entries(TradeStrategy).map((v, k) => (
+                    <option value={v[1]} key={`k${k}`}>
+                      {v[0]} ({v[1]})
+                    </option>
+                  ))} */}
+              </Field>
+            </Flex>
+            <Flex justifyContent="center" gap="2" mt="1">
+              <IconButton
+                aria-label="Back"
+                icon={<ArrowBackIcon />}
+                variant="ghost"
+                onClick={async () => navigate(-1)} // eslint-disable-line @typescript-eslint/no-misused-promises
+              />
+              <IconButton aria-label="Save" icon={<CheckIcon />} variant="ghost" type="submit" />
+            </Flex>
+          </Form>
+        );
+      }}
+    </Formik>
   );
 };
 

diff --git a/src/app/components/Portfolio/Portfolio/PortfolioShow.tsx b/src/app/components/Portfolio/Portfolio/PortfolioShow.tsx
@@ -48,7 +48,7 @@ const PortfolioShow: FunctionComponent<PortfolioShowProps> = ({ ..._rest }): Rea
       {thisPortfolio.benchmark && (
         <Flex justifyContent="center" gap="2">
           <Text w="90px" as="b" textAlign="right">
-            Benchmark:
+            Cash:
           </Text>
           <Text w="120px" textAlign="left">
             {thisPortfolio.benchmark.symbol}

diff --git a/src/app/components/Portfolio/Portfolio/SettingsTable.tsx b/src/app/components/Portfolio/Portfolio/SettingsTable.tsx
@@ -1,8 +1,10 @@
-import { Table, TableCaption, TableContainer, Tbody, Td, Tfoot, Thead, Tr } from "@chakra-ui/react";
+import { DeleteIcon, EditIcon, SearchIcon } from "@chakra-ui/icons";
+import { IconButton, Link, Table, TableCaption, TableContainer, Tbody, Td, Tfoot, Thead, Tr } from "@chakra-ui/react";
 import { FunctionComponent, default as React } from "react";
-import { useLoaderData } from "react-router-dom";
+import { Form, Link as RouterLink, useLoaderData, useParams } from "react-router-dom";
 import { Setting } from "../../../../models/setting.model";
 import Number from "../../Number/Number";
+import { PortfolioLink } from "./links";
 
 type Props = { content?: Setting[] };
 
@@ -12,6 +14,7 @@ type Props = { content?: Setting[] };
  * @returns
  */
 const SettingsTable: FunctionComponent<Props> = ({ content, ..._rest }): React.ReactNode => {
+  const { portfolioId } = useParams();
   const theSettings = content || (useLoaderData() as Setting[]);
 
   return (
@@ -23,6 +26,7 @@ const SettingsTable: FunctionComponent<Props> = ({ content, ..._rest }): React.R
             <Tr>
               <Td>Symbol</Td>
               <Td>NAV Ratio</Td>
+              <Td>Actions</Td>
             </Tr>
           </Thead>
           <Tbody>
@@ -32,7 +36,24 @@ const SettingsTable: FunctionComponent<Props> = ({ content, ..._rest }): React.R
                 <Tr key={item.id}>
                   <Td>{item.underlying.symbol}</Td>
                   <Td isNumeric>
-                    <Number value={item.navRatio} decimals={1} isPercent />
+                    <Number value={item.navRatio} decimals={1} isPercent color="-" />
+                  </Td>
+                  <Td>
+                    <Link to={PortfolioLink.toSetting(portfolioId, item.id)} as={RouterLink}>
+                      <IconButton aria-label="Show setting" icon={<SearchIcon />} size="xs" variant="ghost" />
+                    </Link>
+                    <Link to={PortfolioLink.toSettingEdit(portfolioId, item.id)} as={RouterLink}>
+                      <IconButton aria-label="Edit setting" icon={<EditIcon />} size="xs" variant="ghost" />
+                    </Link>
+                    <Form method="post" action={`DeleteSetting/${item.id}`} className="inline">
+                      <IconButton
+                        aria-label="Delete setting"
+                        icon={<DeleteIcon />}
+                        size="xs"
+                        variant="ghost"
+                        type="submit"
+                      />
+                    </Form>
                   </Td>
                 </Tr>
               ))}

diff --git a/src/app/components/Portfolio/Portfolio/actions.ts b/src/app/components/Portfolio/Portfolio/actions.ts
@@ -0,0 +1,18 @@
+import { ActionFunctionArgs, redirect } from "react-router-dom";
+
+/**
+ * Delete a setting
+ * @param params
+ * @returns
+ */
+export const settingDelete = async ({ request, params }: ActionFunctionArgs): Promise<Response> => {
+  const { portfolioId, itemId } = params;
+  return request
+    .formData()
+    .then(async (formData: Iterable<readonly [PropertyKey, any]>) => {
+      const _data = Object.fromEntries(formData);
+      return fetch(`/api/portfolio/${portfolioId}/settings/${itemId}/`, { method: "DELETE" });
+    })
+    .then(async (response: Response) => response.text())
+    .then((_data) => redirect("../"));
+};
diff --git a/src/app/components/Portfolio/Portfolio/links.ts b/src/app/components/Portfolio/Portfolio/links.ts
@@ -1,3 +1,6 @@
 export const PortfolioLink = {
   toIndex: (portfolioId: number | string): string => `/portfolio/${portfolioId}/parameters`,
+  toSetting: (portfolioId: number | string, _itemId: number | string): string => `/portfolio/${portfolioId}/parameters`,
+  toSettingEdit: (portfolioId: number | string, _itemId: number | string): string =>
+    `/portfolio/${portfolioId}/parameters`,
 };
diff --git a/src/app/components/Portfolio/Report/DividendsDetails.tsx b/src/app/components/Portfolio/Report/DividendsDetails.tsx
@@ -4,7 +4,7 @@ import { createColumnHelper } from "@tanstack/react-table";
 import { default as React } from "react";
 import { Link as RouterLink, useParams } from "react-router-dom";
 import { StatementTypes } from "../../../../models/types";
-import { DividendStatementEntry, ReportEntry, TaxStatementEntry } from "../../../../routers/types";
+import { DividendStatementEntry, ReportEntry, TaxStatementEntry } from "../../../../routers";
 import Number from "../../Number/Number";
 import { StatementLink } from "../Statement/links";
 import { DataTable } from "./DataTable";

diff --git a/src/app/components/Portfolio/Report/FeesDetails.tsx b/src/app/components/Portfolio/Report/FeesDetails.tsx
@@ -4,7 +4,7 @@ import { createColumnHelper } from "@tanstack/react-table";
 import { default as React } from "react";
 import { Link as RouterLink, useParams } from "react-router-dom";
 import { StatementTypes } from "../../../../models/types";
-import { FeeStatementEntry, ReportEntry } from "../../../../routers/types";
+import { FeeStatementEntry, ReportEntry } from "../../../../routers";
 import Number from "../../Number/Number";
 import { StatementLink } from "../Statement/links";
 import { DataTable } from "./DataTable";

diff --git a/src/app/components/Portfolio/Report/InterestsDetails.tsx b/src/app/components/Portfolio/Report/InterestsDetails.tsx
@@ -4,7 +4,7 @@ import { createColumnHelper } from "@tanstack/react-table";
 import { default as React } from "react";
 import { Link as RouterLink, useParams } from "react-router-dom";
 import { StatementTypes } from "../../../../models/types";
-import { InterestStatementEntry, ReportEntry, WithHoldingStatementEntry } from "../../../../routers/types";
+import { InterestStatementEntry, ReportEntry, WithHoldingStatementEntry } from "../../../../routers";
 import Number from "../../Number/Number";
 import { StatementLink } from "../Statement/links";
 import { DataTable } from "./DataTable";

diff --git a/src/app/components/Portfolio/Report/OtherDetails.tsx b/src/app/components/Portfolio/Report/OtherDetails.tsx
@@ -4,7 +4,7 @@ import { createColumnHelper } from "@tanstack/react-table";
 import { default as React } from "react";
 import { Link as RouterLink, useParams } from "react-router-dom";
 import { StatementTypes } from "../../../../models/types";
-import { ReportEntry, StatementEntry } from "../../../../routers/types";
+import { ReportEntry, StatementEntry } from "../../../../routers";
 import Number from "../../Number/Number";
 import { StatementLink } from "../Statement/links";
 import { DataTable } from "./DataTable";

diff --git a/src/app/components/Portfolio/Report/PnLsDetails.tsx b/src/app/components/Portfolio/Report/PnLsDetails.tsx
@@ -12,7 +12,7 @@ import {
   ReportEntry,
   StatementUnderlyingEntry,
   StatementUnderlyingOption,
-} from "../../../../routers/types";
+} from "../../../../routers";
 import Number from "../../Number/Number";
 import { StatementLink } from "../Statement/links";
 import { DataTable } from "./DataTable";

diff --git a/src/app/main.tsx b/src/app/main.tsx
@@ -14,6 +14,7 @@ import PortfolioLayout from "./components/Portfolio/Layout/PortfolioLayout";
 import { action as PortfolioAction } from "./components/Portfolio/Layout/actions";
 import PortfolioEdit from "./components/Portfolio/Portfolio/PortfolioEdit";
 import PortfolioShow from "./components/Portfolio/Portfolio/PortfolioShow";
+import { settingDelete } from "./components/Portfolio/Portfolio/actions";
 import { portfolioLoader } from "./components/Portfolio/Portfolio/loaders";
 import PortfolioIndex from "./components/Portfolio/PortfolioIndex";
 import OptionsPositions from "./components/Portfolio/Position/OptionsPositions";
@@ -108,12 +109,13 @@ const router = createBrowserRouter(
                 </PortfolioLayout>
               ),
               children: [
-                /* Portfolio parameters */
+                /* Portfolio settings */
                 {
                   path: "parameters",
                   children: [
                     { index: true, element: <PortfolioShow />, loader: portfolioLoader },
                     { path: "edit", element: <PortfolioEdit />, loader: portfolioLoader },
+                    { path: "DeleteSetting/:itemId", action: settingDelete },
                   ],
                 },