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 = ({
-
+