From bd7ece54d990e5426985bd0215a13940afedc46c Mon Sep 17 00:00:00 2001
From: hidden4003 <hidden4003@users.noreply.github.com>
Date: Fri, 5 Aug 2022 18:22:45 +0300
Subject: [PATCH] Make filter panels switchable, add local filter

---
 src/components/Dialogs/FiltersModal.tsx | 55 ++++++++++++++++++-------
 src/core/rtkQuery/collectionApi.ts      |  4 ++
 2 files changed, 45 insertions(+), 14 deletions(-)

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<CollectionFilterType> = filtersResult?.data?.List ?? [] as Array<CollectionFilterType>;
+  const subFilters: Array<CollectionFilterType> = subFiltersResult?.data?.List ?? [] as Array<CollectionFilterType>;
+
+  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) => (
     <div className="flex justify-between font-semibold">
@@ -28,10 +42,24 @@ function FiltersModal() {
     </div>
   );
 
-  const renderTab = item => (
-    <div className="grow px-4 py-2 bg-background-alt self-stretch border-b border-background-border shadow">
-      <p className="text-base font-semibold text-gray-300">{item.Name}</p>
-    </div>
+  const renderTab = (title, filterId) => (
+    <React.Fragment>
+      <div className="grow px-4 py-2 bg-background-alt self-stretch border-b border-background-border shadow flex justify-between">
+        <p className="text-base font-semibold text-gray-300">{title}</p>
+        <span onClick={() => { setActiveTab(title); setActiveFilter(filterId); setSearch(''); }}><Icon className="cursor-pointer" path={mdiChevronUp} size={1} rotate={activeTab === title ? 0 : 180} /></span>
+      </div>
+      <div className={cx('flex flex-col grow w-full p-4', { hidden: activeTab !== title || filterId === '0' })}>
+        <div className="box-border flex flex-col bg-background-alt border border-background-border items-center rounded-md px-3 py-2">
+          <div className="flex w-full  border-background-border border-b pb-2 mb-2">
+            <Icon path={mdiMagnify} size={1} />
+            <input type="text" placeholder="Search..." className="ml-2 bg-background-alt" value={search} onChange={(event: React.ChangeEvent<HTMLInputElement>) => setSearch(event.target.value)} />
+          </div>
+          <div className="flex flex-col w-full p-4 space-y-1 max-h-80 shoko-scrollbar overflow-y-auto">
+            {filteredList.filter(item => !item.Directory).map(item => renderItem(item))}
+          </div>
+        </div>
+      </div>
+    </React.Fragment>
   );
   
   return (
@@ -43,13 +71,12 @@ function FiltersModal() {
     >
       <div className="flex flex-col w-full border-l border-background-border drop-shadow-[4px_0_4px_rgba(0,0,0,0.25)]">
         <div className="flex flex-col items-center justify-start bg-color-nav">
-          <div className="grow px-4 py-2 bg-background-alt self-stretch border-b border-background-border shadow">
-            <p className="text-base font-semibold text-gray-300">Filters</p>
-          </div>
-          <div className="flex flex-col w-full p-4 space-y-1">
+          {renderTab('Filters', '0')}
+          <div className={cx('flex flex-col w-full p-4 space-y-1', { hidden: activeTab !== 'Filters' })}>
           {filters.filter(item => !item.Directory).map(item => renderItem(item))}
           </div>
-          {filters.filter(item => item.Directory).map(item => renderTab(item))}
+          {filters.filter(item => item.Directory).map(item => renderTab(item.Name, item.IDs.ID))}
+          
         </div>
       </div>
     </ModalPanel>
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<ListResultType<Array<CollectionFilterType>>, PaginationType>({
       query: params => ({ url: 'Filter', params: { page: params.page ?? 1, pageSize: params.pageSize ?? 0 } }),
     }),
+    getFilters: build.query<ListResultType<Array<CollectionFilterType>>, 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