diff --git a/CHANGELOG.md b/CHANGELOG.md index d5e1447f..b1c1f19d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,17 @@ # Change Log +## [9.3.0] - 2023-xx-xx + +### ✨ New features + +### 🎨 Enhancements + +- [#659](https://github.com/estruyf/vscode-front-matter/issues/659): Implement a filter for the taxonomy dashboard + +### ⚡️ Optimizations + +### 🐞 Fixes + ## [9.2.0] - 2023-09-11 ### ✨ New features diff --git a/src/dashboardWebView/components/TaxonomyView/FilterInput.tsx b/src/dashboardWebView/components/TaxonomyView/FilterInput.tsx new file mode 100644 index 00000000..5e370fcd --- /dev/null +++ b/src/dashboardWebView/components/TaxonomyView/FilterInput.tsx @@ -0,0 +1,56 @@ +import { FilterIcon, XCircleIcon } from '@heroicons/react/outline'; +import * as React from 'react'; + +export interface IFilterInputProps { + label?: string; + placeholder?: string; + value?: string; + disabled?: boolean; + onChange?: (value: string) => void; + onReset?: () => void; +} + +export const FilterInput: React.FunctionComponent = ({ + label, + placeholder, + value, + disabled, + onChange, + onReset, +}: React.PropsWithChildren) => { + return ( +
+
+ { + label && ( + + ) + } + +
+
+
+ + onChange && onChange(e.target.value)} + disabled={disabled} + /> + + {value && ( + + )} +
+
+
+ ); +}; \ No newline at end of file diff --git a/src/dashboardWebView/components/TaxonomyView/TaxonomyManager.tsx b/src/dashboardWebView/components/TaxonomyView/TaxonomyManager.tsx index 3ec28d3e..269dc7eb 100644 --- a/src/dashboardWebView/components/TaxonomyView/TaxonomyManager.tsx +++ b/src/dashboardWebView/components/TaxonomyView/TaxonomyManager.tsx @@ -13,6 +13,9 @@ import { TaxonomyLookup } from './TaxonomyLookup'; import useThemeColors from '../../hooks/useThemeColors'; import * as l10n from '@vscode/l10n'; import { LocalizationKey } from '../../../localization'; +import { FilterInput } from './FilterInput'; +import { useDebounce } from '../../../hooks/useDebounce'; +import { usePrevious } from '../../../panelWebView/hooks/usePrevious'; export interface ITaxonomyManagerProps { data: TaxonomyData | undefined; @@ -27,6 +30,9 @@ export const TaxonomyManager: React.FunctionComponent = ( }: React.PropsWithChildren) => { const settings = useRecoilValue(SettingsSelector); const { getColors } = useThemeColors(); + const [filterValue, setFilterValue] = React.useState(''); + const debounceFilterValue = useDebounce(filterValue, 500); + const prevTaxonomy = usePrevious(taxonomy); const onCreate = () => { Messenger.send(DashboardMessage.createTaxonomy, { @@ -63,11 +69,15 @@ export const TaxonomyManager: React.FunctionComponent = ( return 0; }); + if (debounceFilterValue) { + crntItems = crntItems.filter((i) => i.toLowerCase().includes(debounceFilterValue.toLowerCase())); + } + return crntItems.filter(i => i); } return []; - }, [data, taxonomy]); + }, [data, taxonomy, debounceFilterValue]); const unmappedItems = useMemo(() => { let unmapped: string[] = []; @@ -108,8 +118,20 @@ export const TaxonomyManager: React.FunctionComponent = ( } } - return [...new Set(unmapped)].filter(i => i); - }, [items, taxonomy, pages, settings?.contentTypes]); + const unmappedItems = [...new Set(unmapped)].filter(i => i); + + if (debounceFilterValue) { + return unmappedItems.filter((i) => i.toLowerCase().includes(debounceFilterValue.toLowerCase())); + } + + return unmappedItems; + }, [items, taxonomy, pages, settings?.contentTypes, debounceFilterValue]); + + React.useEffect(() => { + if (prevTaxonomy !== taxonomy) { + setFilterValue(''); + } + }, [prevTaxonomy, taxonomy]) if (!taxonomy) { return null; @@ -134,19 +156,27 @@ export const TaxonomyManager: React.FunctionComponent = ( {l10n.t(LocalizationKey.dashboardTaxonomyViewTaxonomyManagerDescription, taxonomy)}

-
- +
+ setFilterValue(value)} + onReset={() => setFilterValue('')} /> + +
+ +
diff --git a/src/dashboardWebView/components/TaxonomyView/TaxonomyView.tsx b/src/dashboardWebView/components/TaxonomyView/TaxonomyView.tsx index b37653a6..d12411ca 100644 --- a/src/dashboardWebView/components/TaxonomyView/TaxonomyView.tsx +++ b/src/dashboardWebView/components/TaxonomyView/TaxonomyView.tsx @@ -90,7 +90,10 @@ export const TaxonomyView: React.FunctionComponent = ({
- +