forked from actualbudget/actual
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Custom Reports AutoComplete (actualbudget#2350)
* updated saved work * merge fixes * Disable CREATE TABLE * notes * turn on db table * Fix TableGraph recall crash * table format changes * type fixes * fixing some card displays * merge fixes * revert table change * cardMenu width * Add Saved Reports Autocomplete * notes * fix invalid values crash * Title and auto-focus and esc * notes * fix filtering logic * reload saved filters * lint fix * visual graph changes * merge fixes * fix * review updates
- Loading branch information
Showing
13 changed files
with
319 additions
and
107 deletions.
There are no files selected for viewing
34 changes: 34 additions & 0 deletions
34
packages/desktop-client/src/components/autocomplete/ReportAutocomplete.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import React, { type ComponentProps } from 'react'; | ||
|
|
||
| import { useReports } from 'loot-core/client/data-hooks/reports'; | ||
| import { type CustomReportEntity } from 'loot-core/src/types/models/reports'; | ||
|
|
||
| import { Autocomplete } from './Autocomplete'; | ||
| import { ReportList } from './ReportList'; | ||
|
|
||
| export function ReportAutocomplete({ | ||
| embedded, | ||
| ...props | ||
| }: { | ||
| embedded?: boolean; | ||
| } & ComponentProps<typeof Autocomplete<CustomReportEntity>>) { | ||
| const reports = useReports() || []; | ||
|
|
||
| return ( | ||
| <Autocomplete | ||
| strict={true} | ||
| highlightFirst={true} | ||
| embedded={embedded} | ||
| suggestions={reports} | ||
| renderItems={(items, getItemProps, highlightedIndex) => ( | ||
| <ReportList | ||
| items={items} | ||
| getItemProps={getItemProps} | ||
| highlightedIndex={highlightedIndex} | ||
| embedded={embedded} | ||
| /> | ||
| )} | ||
| {...props} | ||
| /> | ||
| ); | ||
| } |
52 changes: 52 additions & 0 deletions
52
packages/desktop-client/src/components/autocomplete/ReportList.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import React, { Fragment, type ComponentProps } from 'react'; | ||
|
|
||
| import { theme } from '../../style/theme'; | ||
| import { View } from '../common/View'; | ||
|
|
||
| import { ItemHeader } from './ItemHeader'; | ||
|
|
||
| export function ReportList<T extends { id: string; name: string }>({ | ||
| items, | ||
| getItemProps, | ||
| highlightedIndex, | ||
| embedded, | ||
| }: { | ||
| items: T[]; | ||
| getItemProps: (arg: { item: T }) => ComponentProps<typeof View>; | ||
| highlightedIndex: number; | ||
| embedded?: boolean; | ||
| }) { | ||
| return ( | ||
| <View> | ||
| <View | ||
| style={{ | ||
| overflow: 'auto', | ||
| padding: '5px 0', | ||
| ...(!embedded && { maxHeight: 175 }), | ||
| }} | ||
| > | ||
| <Fragment>{ItemHeader({ title: 'Saved Reports' })}</Fragment> | ||
| {items.map((item, idx) => { | ||
| return [ | ||
| <div | ||
| {...(getItemProps ? getItemProps({ item }) : null)} | ||
| key={item.id} | ||
| style={{ | ||
| backgroundColor: | ||
| highlightedIndex === idx | ||
| ? theme.menuAutoCompleteBackgroundHover | ||
| : 'transparent', | ||
| padding: 4, | ||
| paddingLeft: 20, | ||
| borderRadius: embedded ? 4 : 0, | ||
| }} | ||
| data-highlighted={highlightedIndex === idx || undefined} | ||
| > | ||
| {item.name} | ||
| </div>, | ||
| ]; | ||
| })} | ||
| </View> | ||
| </View> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
82 changes: 82 additions & 0 deletions
82
packages/desktop-client/src/components/reports/SaveReportChoose.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import React, { createRef, useEffect, useState } from 'react'; | ||
|
|
||
| import { theme } from '../../style/theme'; | ||
| import { Button } from '../common/Button'; | ||
| import { Stack } from '../common/Stack'; | ||
| import { Text } from '../common/Text'; | ||
| import { View } from '../common/View'; | ||
| import { Tooltip } from '../tooltips'; | ||
| import { GenericInput } from '../util/GenericInput'; | ||
|
|
||
| type SaveReportChooseProps = { | ||
| onApply: (cond: string) => void; | ||
| onClose: () => void; | ||
| }; | ||
|
|
||
| export function SaveReportChoose({ onApply, onClose }: SaveReportChooseProps) { | ||
| const inputRef = createRef<HTMLInputElement>(); | ||
| const [err, setErr] = useState(''); | ||
| const [value, setValue] = useState(''); | ||
|
|
||
| useEffect(() => { | ||
| if (inputRef.current) { | ||
| inputRef.current.focus(); | ||
| } | ||
| }); | ||
|
|
||
| return ( | ||
| <Tooltip | ||
| position="bottom-right" | ||
| style={{ padding: 15, color: theme.menuItemText }} | ||
| width={275} | ||
| onClose={onClose} | ||
| > | ||
| <form> | ||
| <View style={{ flexDirection: 'row', align: 'center' }}> | ||
| <Text style={{ userSelect: 'none', flex: 1 }}>Choose Report</Text> | ||
| <View style={{ flex: 1 }} /> | ||
| </View> | ||
| <GenericInput | ||
| inputRef={inputRef} | ||
| field="report" | ||
| subfield={null} | ||
| type="saved" | ||
| value={value} | ||
| multi={false} | ||
| style={{ marginTop: 10 }} | ||
| onChange={(v: string) => setValue(v)} | ||
| /> | ||
|
|
||
| <Stack | ||
| direction="row" | ||
| justify="flex-end" | ||
| align="center" | ||
| style={{ marginTop: 15 }} | ||
| > | ||
| <View style={{ flex: 1 }} /> | ||
| <Button | ||
| type="primary" | ||
| onClick={e => { | ||
| e.preventDefault(); | ||
| if (!value) { | ||
| setErr('Invalid report entered'); | ||
| return; | ||
| } | ||
|
|
||
| onApply(value); | ||
| }} | ||
| > | ||
| Apply | ||
| </Button> | ||
| </Stack> | ||
| </form> | ||
| {err !== '' ? ( | ||
| <Stack direction="row" align="center" style={{ padding: 10 }}> | ||
| <Text style={{ color: theme.errorText }}>{err}</Text> | ||
| </Stack> | ||
| ) : ( | ||
| <View /> | ||
| )} | ||
| </Tooltip> | ||
| ); | ||
| } |
Oops, something went wrong.