From 5bcfc71be67c6e7b7c8b444e4c4f60da9ea9fdaa Mon Sep 17 00:00:00 2001 From: Neil <55785687+carkom@users.noreply.github.com> Date: Mon, 11 Mar 2024 16:23:37 +0000 Subject: [PATCH] Hide hidden categories in auto-complete (#2429) * the work * notes * add to elements --- .../autocomplete/CategoryAutocomplete.tsx | 25 +++++++++++++++++++ .../components/autocomplete/ItemHeader.tsx | 12 ++++++++- .../budget/rollover/CoverTooltip.tsx | 1 + .../budget/rollover/TransferTooltip.tsx | 1 + .../src/components/modals/CloseAccount.tsx | 1 + .../modals/ConfirmCategoryDelete.tsx | 1 + .../src/components/modals/EditField.jsx | 1 + .../transactions/TransactionsTable.jsx | 1 + .../src/components/util/GenericInput.jsx | 1 + upcoming-release-notes/2429.md | 6 +++++ 10 files changed, 49 insertions(+), 1 deletion(-) create mode 100644 upcoming-release-notes/2429.md diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx index 3716847b661..90daa3b44d0 100644 --- a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx +++ b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx @@ -36,6 +36,7 @@ export type CategoryListProps = { ) => ReactNode; renderCategoryItemGroupHeader?: (props: ItemHeaderProps) => ReactNode; renderCategoryItem?: (props: CategoryItemProps) => ReactNode; + showHiddenItems?: boolean; }; function CategoryList({ items, @@ -46,6 +47,7 @@ function CategoryList({ renderSplitTransactionButton = defaultRenderSplitTransactionButton, renderCategoryItemGroupHeader = defaultRenderCategoryItemGroupHeader, renderCategoryItem = defaultRenderCategoryItem, + showHiddenItems, }: CategoryListProps) { let lastGroup: string | undefined | null = null; @@ -68,6 +70,10 @@ function CategoryList({ }); } + if ((item.hidden || item.group?.hidden) && !showHiddenItems) { + return ; + } + const showGroup = item.cat_group !== lastGroup; lastGroup = item.cat_group; return ( @@ -76,6 +82,13 @@ function CategoryList({ {renderCategoryItemGroupHeader({ title: item.group.name, + style: { + color: + showHiddenItems && item.group?.hidden + ? theme.pageTextSubdued + : theme.menuAutoCompleteTextHeader, + }, + item: item.group, })} )} @@ -85,6 +98,12 @@ function CategoryList({ item, highlighted: highlightedIndex === idx, embedded, + style: { + color: + showHiddenItems && item.hidden + ? theme.pageTextSubdued + : 'inherit', + }, })} @@ -104,6 +123,7 @@ type CategoryAutocompleteProps = ComponentProps & { ) => ReactNode; renderCategoryItemGroupHeader?: (props: ItemHeaderProps) => ReactNode; renderCategoryItem?: (props: CategoryItemProps) => ReactNode; + showHiddenItems?: boolean; }; export function CategoryAutocomplete({ @@ -114,6 +134,7 @@ export function CategoryAutocomplete({ renderSplitTransactionButton, renderCategoryItemGroupHeader, renderCategoryItem, + showHiddenItems, ...props }: CategoryAutocompleteProps) { const categorySuggestions: Array< @@ -167,6 +188,7 @@ export function CategoryAutocomplete({ renderSplitTransactionButton={renderSplitTransactionButton} renderCategoryItemGroupHeader={renderCategoryItemGroupHeader} renderCategoryItem={renderCategoryItem} + showHiddenItems={showHiddenItems} /> )} {...props} @@ -268,6 +290,7 @@ type CategoryItemProps = { export function CategoryItem({ item, className, + style, highlighted, embedded, ...props @@ -275,6 +298,7 @@ export function CategoryItem({ const { isNarrowWidth } = useResponsive(); return (
{item.name} + {item.hidden ? ' (hidden)' : null}
); } diff --git a/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx b/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx index 981c05bec26..7367280857f 100644 --- a/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx +++ b/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx @@ -1,5 +1,7 @@ import React from 'react'; +import { type CategoryGroupEntity } from 'loot-core/types/models/category-group'; + import { theme } from '../../style/theme'; import { type CSSProperties } from '../../style/types'; @@ -7,9 +9,16 @@ export type ItemHeaderProps = { title: string; style?: CSSProperties; type?: string; + item?: CategoryGroupEntity; }; -export function ItemHeader({ title, style, type, ...props }: ItemHeaderProps) { +export function ItemHeader({ + title, + style, + type, + item, + ...props +}: ItemHeaderProps) { return (
{title} + {item?.hidden ? ' (hidden)' : null}
); } diff --git a/packages/desktop-client/src/components/budget/rollover/CoverTooltip.tsx b/packages/desktop-client/src/components/budget/rollover/CoverTooltip.tsx index 2f33e371f7d..6ac8a4ab6ba 100644 --- a/packages/desktop-client/src/components/budget/rollover/CoverTooltip.tsx +++ b/packages/desktop-client/src/components/budget/rollover/CoverTooltip.tsx @@ -58,6 +58,7 @@ export function CoverTooltip({ } }, }} + showHiddenItems={false} /> )} diff --git a/packages/desktop-client/src/components/budget/rollover/TransferTooltip.tsx b/packages/desktop-client/src/components/budget/rollover/TransferTooltip.tsx index 0d27946f138..7806d7ce3df 100644 --- a/packages/desktop-client/src/components/budget/rollover/TransferTooltip.tsx +++ b/packages/desktop-client/src/components/budget/rollover/TransferTooltip.tsx @@ -101,6 +101,7 @@ export function TransferTooltip({ onUpdate={() => {}} onSelect={id => setCategory(id)} inputProps={{ onEnter: submit, placeholder: '(none)' }} + showHiddenItems={true} /> {categoryError && ( diff --git a/packages/desktop-client/src/components/modals/ConfirmCategoryDelete.tsx b/packages/desktop-client/src/components/modals/ConfirmCategoryDelete.tsx index a448f351ca0..6602febd308 100644 --- a/packages/desktop-client/src/components/modals/ConfirmCategoryDelete.tsx +++ b/packages/desktop-client/src/components/modals/ConfirmCategoryDelete.tsx @@ -113,6 +113,7 @@ export function ConfirmCategoryDelete({ placeholder: 'Select category...', }} onSelect={category => setTransferCategory(category)} + showHiddenItems={true} /> diff --git a/packages/desktop-client/src/components/modals/EditField.jsx b/packages/desktop-client/src/components/modals/EditField.jsx index 5b2b4d70b5a..22e2a9f8fdb 100644 --- a/packages/desktop-client/src/components/modals/EditField.jsx +++ b/packages/desktop-client/src/components/modals/EditField.jsx @@ -249,6 +249,7 @@ export function EditField({ modalProps, name, onSubmit, onClose }) { ), })} {...autocompleteProps} + showHiddenItems={false} /> ); break; diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.jsx b/packages/desktop-client/src/components/transactions/TransactionsTable.jsx index 89ca9550ba2..c5e853fa5cd 100644 --- a/packages/desktop-client/src/components/transactions/TransactionsTable.jsx +++ b/packages/desktop-client/src/components/transactions/TransactionsTable.jsx @@ -1281,6 +1281,7 @@ const Transaction = memo(function Transaction(props) { onUpdate={onUpdate} onSelect={onSave} menuPortalTarget={undefined} + showHiddenItems={false} /> )} diff --git a/packages/desktop-client/src/components/util/GenericInput.jsx b/packages/desktop-client/src/components/util/GenericInput.jsx index 3c46d3a4315..84b769cc45c 100644 --- a/packages/desktop-client/src/components/util/GenericInput.jsx +++ b/packages/desktop-client/src/components/util/GenericInput.jsx @@ -85,6 +85,7 @@ export function GenericInput({ multi={multi} openOnFocus={true} onSelect={onChange} + showHiddenItems={false} inputProps={{ inputRef, ...(showPlaceholder ? { placeholder: 'nothing' } : null), diff --git a/upcoming-release-notes/2429.md b/upcoming-release-notes/2429.md new file mode 100644 index 00000000000..4a0747e53bb --- /dev/null +++ b/upcoming-release-notes/2429.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [Shazib, carkom] +--- + +Hide hidden categories on the Category AutoComplete. Allow a prop for showing (with indication).