Skip to content

Commit

Permalink
Hide hidden groups and categories in spending report category selector
Browse files Browse the repository at this point in the history 
Signed-off-by: Johannes Löthberg <[email protected]>
  • Loading branch information
@kyrias
kyrias committed Sep 14, 2023
1 parent 0cc3479 commit 9087151
Show file tree
Hide file tree
Showing 3 changed files with 121 additions and 106 deletions.
2 changes: 2 additions & 0 deletions packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,13 @@ export type Category = {
cat_group: unknown;
groupName: string;
name: string;
hidden: 1 | 0;
};

export type CategoryGroup = {
id: string;
name: string;
hidden: 1 | 0;
categories: Array<Category>;
};

Expand Down
219 changes: 113 additions & 106 deletions packages/desktop-client/src/components/reports/CategorySelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,117 +53,124 @@ export default function CategorySelector({
}}
>
{categoryGroups &&
categoryGroups.map(categoryGroup => {
const allCategoriesInGroupSelected = categoryGroup.categories.every(
category =>
selectedCategories.some(
selectedCategory => selectedCategory.id === category.id,
),
);
const noCategorySelected = categoryGroup.categories.every(
category =>
!selectedCategories.some(
selectedCategory => selectedCategory.id === category.id,
),
);
return (
<Fragment key={categoryGroup.id}>
<li
style={{
display:
noCategorySelected && uncheckedHidden ? 'none' : 'flex',
marginBottom: 8,
flexDirection: 'row',
}}
>
<Checkbox
id={`form_${categoryGroup.id}`}
checked={allCategoriesInGroupSelected}
onChange={e => {
const selectedCategoriesExcludingGroupCategories =
selectedCategories.filter(
selectedCategory =>
!categoryGroup.categories.some(
groupCategory =>
groupCategory.id === selectedCategory.id,
),
);
if (allCategoriesInGroupSelected) {
setSelectedCategories(
selectedCategoriesExcludingGroupCategories,
);
} else {
setSelectedCategories(
selectedCategoriesExcludingGroupCategories.concat(
categoryGroup.categories,
),
);
}
}}
/>
<label
htmlFor={`form_${categoryGroup.id}`}
style={{ userSelect: 'none', fontWeight: 'bold' }}
>
{categoryGroup.name}
</label>
</li>
<li>
<ul
categoryGroups
.filter(categoryGroup => !categoryGroup.hidden)
.map(categoryGroup => {
const visibleCategories = categoryGroup.categories.filter(
category => !category.hidden,
);

const allCategoriesInGroupSelected = visibleCategories.every(
category =>
selectedCategories.some(
selectedCategory => selectedCategory.id === category.id,
),
);
const noCategorySelected = visibleCategories.every(
category =>
!selectedCategories.some(
selectedCategory => selectedCategory.id === category.id,
),
);
return (
<Fragment key={categoryGroup.id}>
<li
style={{
listStyle: 'none',
marginLeft: 0,
marginBottom: 10,
paddingLeft: 10,
display:
noCategorySelected && uncheckedHidden ? 'none' : 'flex',
marginBottom: 8,
flexDirection: 'row',
}}
>
{categoryGroup.categories.map((category, index) => {
const isChecked = selectedCategories.some(
selectedCategory => selectedCategory.id === category.id,
);
return (
<li
key={category.id}
style={{
display:
!isChecked && uncheckedHidden ? 'none' : 'flex',
flexDirection: 'row',
marginBottom: 4,
}}
>
<Checkbox
id={`form_${category.id}`}
checked={isChecked}
onChange={e => {
if (isChecked) {
setSelectedCategories(
selectedCategories.filter(
selectedCategory =>
selectedCategory.id !== category.id,
),
);
} else {
setSelectedCategories([
...selectedCategories,
category,
]);
}
<Checkbox
id={`form_${categoryGroup.id}`}
checked={allCategoriesInGroupSelected}
onChange={e => {
const selectedCategoriesExcludingGroupCategories =
selectedCategories.filter(
selectedCategory =>
!visibleCategories.some(
groupCategory =>
groupCategory.id === selectedCategory.id,
),
);
if (allCategoriesInGroupSelected) {
setSelectedCategories(
selectedCategoriesExcludingGroupCategories,
);
} else {
setSelectedCategories(
selectedCategoriesExcludingGroupCategories.concat(
visibleCategories,
),
);
}
}}
/>
<label
htmlFor={`form_${categoryGroup.id}`}
style={{ userSelect: 'none', fontWeight: 'bold' }}
>
{categoryGroup.name}
</label>
</li>
<li>
<ul
style={{
listStyle: 'none',
marginLeft: 0,
marginBottom: 10,
paddingLeft: 10,
}}
>
{visibleCategories.map((category, index) => {
const isChecked = selectedCategories.some(
selectedCategory =>
selectedCategory.id === category.id,
);
return (
<li
key={category.id}
style={{
display:
!isChecked && uncheckedHidden ? 'none' : 'flex',
flexDirection: 'row',
marginBottom: 4,
}}
/>
<label
htmlFor={`form_${category.id}`}
style={{ userSelect: 'none' }}
>
{category.name}
</label>
</li>
);
})}
</ul>
</li>
</Fragment>
);
})}
<Checkbox
id={`form_${category.id}`}
checked={isChecked}
onChange={e => {
if (isChecked) {
setSelectedCategories(
selectedCategories.filter(
selectedCategory =>
selectedCategory.id !== category.id,
),
);
} else {
setSelectedCategories([
...selectedCategories,
category,
]);
}
}}
/>
<label
htmlFor={`form_${category.id}`}
style={{ userSelect: 'none' }}
>
{category.name}
</label>
</li>
);
})}
</ul>
</li>
</Fragment>
);
})}
</ul>
</>
);
Expand Down
6 changes: 6 additions & 0 deletions upcoming-release-notes/1696.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
category: Enhancements
authors: [kyrias]
---

Hide hidden groups and categories from spending report category selector.

0 comments on commit 9087151

Please sign in to comment.