make uncategorized transactions drag/droppable

johnpc · Nov 7, 2024 · 5ea4ad7 · 5ea4ad7
1 parent d2d6243
commit 5ea4ad7
Show file tree

Hide file tree

Showing 10 changed files with 415 additions and 73 deletions.
diff --git a/ios/App/App.xcodeproj/project.pbxproj b/ios/App/App.xcodeproj/project.pbxproj
@@ -361,7 +361,7 @@
 				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.finance";
 				IPHONEOS_DEPLOYMENT_TARGET = 17.4;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 1.0.10;
+				MARKETING_VERSION = 1.0.11;
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
 				PRODUCT_BUNDLE_IDENTIFIER = com.johncorser.finance;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -384,7 +384,7 @@
 				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.finance";
 				IPHONEOS_DEPLOYMENT_TARGET = 17.4;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 1.0.10;
+				MARKETING_VERSION = 1.0.11;
 				PRODUCT_BUNDLE_IDENTIFIER = com.johncorser.finance;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,6 +32,11 @@
     "date-fns": "^3.6.0",
     "plaid": "^23.0.0",
     "react": "^18.2.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dnd-multi-backend": "^8.0.3",
+    "react-dnd-preview": "^8.0.3",
+    "react-dnd-touch-backend": "^16.0.1",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.6",
     "react-plaid-link": "^3.5.1",

diff --git a/src/App.tsx b/src/App.tsx
@@ -11,12 +11,72 @@ import {
 } from "@aws-amplify/ui-react";
 import { Capacitor } from "@capacitor/core";
 import TabsView from "./components/TabsView";
+import { HTML5Backend, HTML5BackendOptions } from "react-dnd-html5-backend";
+import { DndProvider, DragPreviewImage } from "react-dnd";
+import { TouchBackend, TouchBackendOptions } from "react-dnd-touch-backend";
+import {
+  MultiBackend,
+  TouchTransition,
+  MouseTransition,
+  MultiBackendOptions,
+} from "react-dnd-multi-backend";
+import { Preview, PreviewGenerator } from "react-dnd-preview";
+import { knightImage } from "./components/Budget/knightImage";
+
+const generatePreview: PreviewGenerator = ({ itemType, item, style }) => {
+  console.log({ item, itemType });
+  return <img className="item-list__item" style={style} src={knightImage} />;
+  // return <div className="item-list__item" style={style}><>{itemType}</></div>
+};
+
+const html5BackendOptions: HTML5BackendOptions = {
+  rootElement: document.body,
+};
+console.log({
+  html5BackendOptions,
+  HTML5Backend,
+  DragPreviewImage,
+  MouseTransition,
+});
+
+const touchBackendOptions: TouchBackendOptions = {
+  delay: 0,
+  delayTouchStart: 0, // in milliseconds
+  enableTouchEvents: true,
+  enableKeyboardEvents: true,
+  enableMouseEvents: true,
+  ignoreContextMenu: true,
+  enableHoverOutsideTarget: true,
+  delayMouseStart: 0,
+  touchSlop: 10,
+  rootElement: document.body,
+};
+const multiBackendOptions: MultiBackendOptions = {
+  backends: [
+    {
+      id: "html5",
+      backend: HTML5Backend,
+      transition: MouseTransition,
+      options: html5BackendOptions,
+    },
+    {
+      id: "touch",
+      backend: TouchBackend,
+      options: touchBackendOptions,
+      preview: true,
+      transition: TouchTransition,
+    },
+  ],
+};
 
 function App() {
   return (
     <>
       <Header />
-      <TabsView />
+      <DndProvider backend={MultiBackend} options={multiBackendOptions}>
+        <TabsView />
+        <Preview generator={generatePreview} />
+      </DndProvider>
       <Footer />
     </>
   );

diff --git a/src/components/Budget/BudgetTable.tsx b/src/components/Budget/BudgetTable.tsx
@@ -14,11 +14,10 @@ import {
   BudgetEntity,
   TransactionEntity,
   createBudgetCategory,
-  removeBudgetCategory,
   updateBudgetCategory,
 } from "../../data/entity";
 import { Fragment, useState } from "react";
-import { Delete } from "@mui/icons-material";
+import BudgetTableCategoryRow from "./BudgetTableCategoryRow";
 
 export default function BudgetTable(props: {
   budget: BudgetEntity;
@@ -140,53 +139,14 @@ export default function BudgetTable(props: {
               </TableHead>
               <TableBody>
                 {categories.map((category) => {
-                  const planned = category.plannedAmount / 100;
-                  let total = category.transactions.reduce(
-                    (acc, transaction) => transaction.amount / 100 + acc,
-                    0,
-                  );
-                  if (category.type === "Income") {
-                    total = total * -1;
-                  }
-                  const remaining = planned - total;
-                  let backgroundColor = "";
-                  if (total > planned - planned * 0.1)
-                    backgroundColor = tokens.colors.yellow[20].value;
-                  if (total > planned - planned * 0.01)
-                    backgroundColor = tokens.colors.green[20].value;
-                  if (total > planned)
-                    backgroundColor = tokens.colors.red[20].value;
                   return (
-                    <TableRow key={category.id} style={{ backgroundColor }}>
-                      <TableCell onClick={() => updateName(category)}>
-                        {category.name}
-                      </TableCell>
-                      {preferRemaining ? (
-                        <TableCell
-                          onClick={() => props.onClickBudgetCategory(category)}
-                        >
-                          ${remaining.toFixed(2)}
-                        </TableCell>
-                      ) : (
-                        <Fragment>
-                          <TableCell
-                            onClick={() => updatePlannedAmount(category)}
-                          >
-                            ${planned.toFixed(2)}
-                          </TableCell>
-                          <TableCell
-                            onClick={() =>
-                              props.onClickBudgetCategory(category)
-                            }
-                          >
-                            ${total.toFixed(2)}
-                          </TableCell>
-                        </Fragment>
-                      )}
-                      <TableCell onClick={() => removeBudgetCategory(category)}>
-                        <Delete />
-                      </TableCell>
-                    </TableRow>
+                    <BudgetTableCategoryRow
+                      category={category}
+                      updateName={updateName}
+                      preferRemaining={preferRemaining}
+                      onClickBudgetCategory={props.onClickBudgetCategory}
+                      updatePlannedAmount={updatePlannedAmount}
+                    />
                   );
                 })}
                 <TableRow>