Mobile balance cover/transfer/rollover overspending (actualbudget#1802)

* Mobile balance cover/transfer * Release notes * Fix errors * Cleanup * Fix hit boxes and add line clamp * Fix styling * Prevent simultaneous field edits * Use onPointerDown * Remove balanceTooltip close effect
FlorianLang06 · Oct 30, 2023 · a1e5bee · a1e5bee
1 parent 839da0b
commit a1e5bee
Show file tree

Hide file tree

Showing 22 changed files with 777 additions and 556 deletions.
diff --git a/...est.js-snapshots/Budget-transfer-funds-to-another-category-1-chromium-linux.png b/...est.js-snapshots/Budget-transfer-funds-to-another-category-1-chromium-linux.png
diff --git a/...apshots/Mobile-loads-the-budget-page-with-budgeted-amounts-1-chromium-linux.png b/...apshots/Mobile-loads-the-budget-page-with-budgeted-amounts-1-chromium-linux.png
diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
@@ -7,28 +7,20 @@ import React, {
 
 import { css } from 'glamor';
 
+import {
+  type CategoryEntity,
+  type CategoryGroupEntity,
+} from 'loot-core/src/types/models';
+
 import Split from '../../icons/v0/Split';
 import { theme } from '../../style';
 import Text from '../common/Text';
 import View from '../common/View';
 
 import Autocomplete, { defaultFilterSuggestion } from './Autocomplete';
 
-export type Category = {
-  id: string;
-  cat_group: unknown;
-  groupName: string;
-  name: string;
-};
-
-export type CategoryGroup = {
-  id: string;
-  name: string;
-  categories: Array<Category>;
-};
-
 export type CategoryListProps = {
-  items: Array<Category>;
+  items: Array<CategoryEntity & { group?: CategoryGroupEntity }>;
   getItemProps?: (arg: { item }) => Partial<ComponentProps<typeof View>>;
   highlightedIndex: number;
   embedded: boolean;
@@ -122,7 +114,7 @@ function CategoryList({
                   }}
                   data-testid="category-item-group"
                 >
-                  {item.groupName}
+                  {`${item.group?.name}`}
                 </div>
               )}
               <div
@@ -157,7 +149,7 @@ function CategoryList({
 }
 
 type CategoryAutocompleteProps = ComponentProps<typeof Autocomplete> & {
-  categoryGroups: CategoryGroup[];
+  categoryGroups: Array<CategoryGroupEntity>;
   showSplitOption?: boolean;
   groupHeaderStyle?: object;
 };
@@ -169,19 +161,23 @@ export default function CategoryAutocomplete({
   groupHeaderStyle,
   ...props
 }: CategoryAutocompleteProps) {
-  let categorySuggestions = useMemo(
+  let categorySuggestions: Array<
+    CategoryEntity & { group?: CategoryGroupEntity }
+  > = useMemo(
     () =>
       categoryGroups.reduce(
         (list, group) =>
           list.concat(
-            group.categories.map(category => ({
-              ...category,
-              groupName: group.name,
-            })),
+            group.categories
+              .filter(category => category.cat_group === group.id)
+              .map(category => ({
+                ...category,
+                group: group,
+              })),
           ),
-        showSplitOption ? [{ id: 'split', name: '' }] : [],
+        showSplitOption ? [{ id: 'split', name: '' } as CategoryEntity] : [],
       ),
-    [categoryGroups],
+    [showSplitOption, categoryGroups],
   );
 
   return (

diff --git a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
@@ -1,6 +1,7 @@
 import React, { type ComponentProps } from 'react';
 
 import ArrowThinRight from '../../icons/v1/ArrowThinRight';
+import { type CSSProperties } from '../../style';
 import View from '../common/View';
 import CellValue from '../spreadsheet/CellValue';
 import useSheetValue from '../spreadsheet/useSheetValue';
@@ -11,17 +12,23 @@ type BalanceWithCarryoverProps = {
   carryover: ComponentProps<typeof CellValue>['binding'];
   balance: ComponentProps<typeof CellValue>['binding'];
   disabled?: boolean;
+  style?: CSSProperties;
+  balanceStyle?: CSSProperties;
+  carryoverStyle?: CSSProperties;
 };
 export default function BalanceWithCarryover({
   carryover,
   balance,
   disabled,
+  style,
+  balanceStyle,
+  carryoverStyle,
 }: BalanceWithCarryoverProps) {
   let carryoverValue = useSheetValue(carryover);
   let balanceValue = useSheetValue(balance);
 
   return (
-    <>
+    <View style={style}>
       <CellValue
         binding={balance}
         type="financial"
@@ -32,9 +39,10 @@ export default function BalanceWithCarryover({
             cursor: 'pointer',
             ':hover': { textDecoration: 'underline' },
           }),
+          ...balanceStyle,
         }}
       />
-      {carryoverValue === true && (
+      {carryoverValue && (
         <View
           style={{
             alignSelf: 'center',
@@ -44,6 +52,7 @@ export default function BalanceWithCarryover({
             top: 0,
             bottom: 0,
             justifyContent: 'center',
+            ...carryoverStyle,
           }}
         >
           <ArrowThinRight
@@ -53,6 +62,6 @@ export default function BalanceWithCarryover({
           />
         </View>
       )}
-    </>
+    </View>
   );
 }
diff --git a/packages/desktop-client/src/components/budget/CategoryGroupsContext.js b/packages/desktop-client/src/components/budget/CategoryGroupsContext.js
diff --git a/packages/desktop-client/src/components/budget/DynamicBudgetTable.js b/packages/desktop-client/src/components/budget/DynamicBudgetTable.js
@@ -8,7 +8,6 @@ import View from '../common/View';
 import { useBudgetMonthCount } from './BudgetMonthCountContext';
 import BudgetPageHeader from './BudgetPageHeader';
 import BudgetTable from './BudgetTable';
-import { CategoryGroupsContext } from './CategoryGroupsContext';
 
 function getNumPossibleMonths(width) {
   let estimatedTableWidth = width - 200;
@@ -61,36 +60,34 @@ const DynamicBudgetTableInner = forwardRef(
     }
 
     return (
-      <CategoryGroupsContext.Provider value={categoryGroups}>
-        <View
-          style={{
-            width,
-            height,
-            alignItems: 'center',
-            opacity: width <= 0 || height <= 0 ? 0 : 1,
-          }}
-        >
-          <View style={{ width: '100%', maxWidth }}>
-            <BudgetPageHeader
-              startMonth={prewarmStartMonth}
-              numMonths={numMonths}
-              monthBounds={monthBounds}
-              onMonthSelect={onMonthSelect}
-            />
-            <BudgetTable
-              ref={ref}
-              categoryGroups={categoryGroups}
-              prewarmStartMonth={prewarmStartMonth}
-              startMonth={startMonth}
-              numMonths={numMonths}
-              monthBounds={monthBounds}
-              prefs={prefs}
-              {...actions}
-              {...props}
-            />
-          </View>
+      <View
+        style={{
+          width,
+          height,
+          alignItems: 'center',
+          opacity: width <= 0 || height <= 0 ? 0 : 1,
+        }}
+      >
+        <View style={{ width: '100%', maxWidth }}>
+          <BudgetPageHeader
+            startMonth={prewarmStartMonth}
+            numMonths={numMonths}
+            monthBounds={monthBounds}
+            onMonthSelect={onMonthSelect}
+          />
+          <BudgetTable
+            ref={ref}
+            categoryGroups={categoryGroups}
+            prewarmStartMonth={prewarmStartMonth}
+            startMonth={startMonth}
+            numMonths={numMonths}
+            monthBounds={monthBounds}
+            prefs={prefs}
+            {...actions}
+            {...props}
+          />
         </View>
-      </CategoryGroupsContext.Provider>
+      </View>
     );
   },
 );