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 3716847b6..90daa3b44 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 <Fragment key={item.id} />;
+ }
+
const showGroup = item.cat_group !== lastGroup;
lastGroup = item.cat_group;
return (
@@ -76,6 +82,13 @@ function CategoryList({
<Fragment key={item.group.name}>
{renderCategoryItemGroupHeader({
title: item.group.name,
+ style: {
+ color:
+ showHiddenItems && item.group?.hidden
+ ? theme.pageTextSubdued
+ : theme.menuAutoCompleteTextHeader,
+ },
+ item: item.group,
})}
</Fragment>
)}
@@ -85,6 +98,12 @@ function CategoryList({
item,
highlighted: highlightedIndex === idx,
embedded,
+ style: {
+ color:
+ showHiddenItems && item.hidden
+ ? theme.pageTextSubdued
+ : 'inherit',
+ },
})}
</Fragment>
</Fragment>
@@ -104,6 +123,7 @@ type CategoryAutocompleteProps = ComponentProps<typeof Autocomplete> & {
) => 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 (
<div
+ style={style}
// See comment above.
role="button"
className={`${className} ${css([
@@ -294,6 +318,7 @@ export function CategoryItem({
{...props}
>
{item.name}
+ {item.hidden ? ' (hidden)' : null}
</div>
);
}
diff --git a/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx b/packages/desktop-client/src/components/autocomplete/ItemHeader.tsx
index 981c05bec..736728085 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 (
<div
style={{
@@ -21,6 +30,7 @@ export function ItemHeader({ title, style, type, ...props }: ItemHeaderProps) {
{...props}
>
{title}
+ {item?.hidden ? ' (hidden)' : null}
</div>
);
}
diff --git a/packages/desktop-client/src/components/budget/rollover/CoverTooltip.tsx b/packages/desktop-client/src/components/budget/rollover/CoverTooltip.tsx
index 2f33e371f..6ac8a4ab6 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}
/>
)}
</InitialFocus>
diff --git a/packages/desktop-client/src/components/budget/rollover/TransferTooltip.tsx b/packages/desktop-client/src/components/budget/rollover/TransferTooltip.tsx
index 0d27946f1..7806d7ce3 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}
/>
<View
diff --git a/packages/desktop-client/src/components/modals/CloseAccount.tsx b/packages/desktop-client/src/components/modals/CloseAccount.tsx
index 9266c584b..b4ca4d38d 100644
--- a/packages/desktop-client/src/components/modals/CloseAccount.tsx
+++ b/packages/desktop-client/src/components/modals/CloseAccount.tsx
@@ -151,6 +151,7 @@ export function CloseAccount({
setCategoryError(false);
}
}}
+ showHiddenItems={true}
/>
{categoryError && (
diff --git a/packages/desktop-client/src/components/modals/ConfirmCategoryDelete.tsx b/packages/desktop-client/src/components/modals/ConfirmCategoryDelete.tsx
index a448f351c..6602febd3 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}
/>
</View>
diff --git a/packages/desktop-client/src/components/modals/EditField.jsx b/packages/desktop-client/src/components/modals/EditField.jsx
index 5b2b4d70b..22e2a9f8f 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 89ca9550b..c5e853fa5 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}
/>
)}
</CustomCell>
diff --git a/packages/desktop-client/src/components/util/GenericInput.jsx b/packages/desktop-client/src/components/util/GenericInput.jsx
index 3c46d3a43..84b769cc4 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 000000000..4a0747e53
--- /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).
--
GitLab