diff --git a/src/components/Dialogs/FiltersModal.tsx b/src/components/Dialogs/FiltersModal.tsx index 8479606a4..eb401d453 100644 --- a/src/components/Dialogs/FiltersModal.tsx +++ b/src/components/Dialogs/FiltersModal.tsx @@ -1,10 +1,13 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState, useMemo } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import cx from 'classnames'; +import { Icon } from '@mdi/react'; +import { mdiChevronUp, mdiMagnify } from '@mdi/js'; import ModalPanel from '../Panels/ModalPanel'; -import { useDispatch, useSelector } from 'react-redux'; import { RootState } from '../../core/store'; import { setStatus } from '../../core/slices/modals/filters'; -import { useLazyGetTopFiltersQuery } from '../../core/rtkQuery/collectionApi'; +import { useLazyGetTopFiltersQuery, useLazyGetFiltersQuery } from '../../core/rtkQuery/collectionApi'; import type { CollectionFilterType } from '../../core/types/api/collection'; @@ -12,14 +15,25 @@ function FiltersModal() { const dispatch = useDispatch(); const status = useSelector((state: RootState) => state.modals.filters.status); const [trigger, filtersResult] = useLazyGetTopFiltersQuery({}); + const [triggerSubFilter, subFiltersResult] = useLazyGetFiltersQuery({}); const filters: Array = filtersResult?.data?.List ?? [] as Array; + const subFilters: Array = subFiltersResult?.data?.List ?? [] as Array; + + const [activeTab, setActiveTab] = useState('Filters'); + const [activeFilter, setActiveFilter] = useState('0'); + const [search, setSearch] = useState(''); useEffect(() => { if (!status) { return; } - trigger({}).catch(() => {}); - }, [status]); + if (activeFilter === '0') { + trigger({}).catch(() => {}); + } else { + triggerSubFilter(activeFilter).catch(() => {}); + } + }, [status, activeFilter]); const handleClose = () => dispatch(setStatus(false)); + const filteredList = useMemo(() => subFilters.filter(item => !item.Directory && (search === '' || item.Name.toLowerCase().indexOf(search) !== -1) ), [subFilters, search]); const renderItem = (item: CollectionFilterType) => (
@@ -28,10 +42,24 @@ function FiltersModal() {
); - const renderTab = item => ( -
-

{item.Name}

-
+ const renderTab = (title, filterId) => ( + +
+

{title}

+ { setActiveTab(title); setActiveFilter(filterId); setSearch(''); }}> +
+
+
+
+ + ) => setSearch(event.target.value)} /> +
+
+ {filteredList.filter(item => !item.Directory).map(item => renderItem(item))} +
+
+
+
); return ( @@ -43,13 +71,12 @@ function FiltersModal() { >
-
-

Filters

-
-
+ {renderTab('Filters', '0')} +
{filters.filter(item => !item.Directory).map(item => renderItem(item))}
- {filters.filter(item => item.Directory).map(item => renderTab(item))} + {filters.filter(item => item.Directory).map(item => renderTab(item.Name, item.IDs.ID))} +
diff --git a/src/core/rtkQuery/collectionApi.ts b/src/core/rtkQuery/collectionApi.ts index 663f389d5..e713937f2 100644 --- a/src/core/rtkQuery/collectionApi.ts +++ b/src/core/rtkQuery/collectionApi.ts @@ -25,6 +25,9 @@ export const collectionApi = createApi({ getTopFilters: build.query>, PaginationType>({ query: params => ({ url: 'Filter', params: { page: params.page ?? 1, pageSize: params.pageSize ?? 0 } }), }), + getFilters: build.query>, string>({ + query: filterId => ({ url: `Filter/${filterId}/Filter`, params: { page: 1, pageSize: 0 } }), + }), }), }); @@ -32,4 +35,5 @@ export const { useLazyGetGroupsQuery, useGetGroupSeriesQuery, useLazyGetTopFiltersQuery, + useLazyGetFiltersQuery, } = collectionApi; \ No newline at end of file