feat(studies): SJIP-1104 add search logic

include-dcc · Dec 2, 2024 · 3783f2f · 3783f2f
1 parent 55a2bb5
commit 3783f2f
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 14 deletions.
diff --git a/src/views/PublicStudies/components/PageContent/index.tsx b/src/views/PublicStudies/components/PageContent/index.tsx
@@ -1,11 +1,10 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import intl from 'react-intl-universal';
 import ProLabel from '@ferlab/ui/core/components/ProLabel';
 import ProTable from '@ferlab/ui/core/components/ProTable';
-import { ProColumnType } from '@ferlab/ui/core/components/ProTable/types';
 import GridCard from '@ferlab/ui/core/view/v2/GridCard';
 import { Input, Space, Typography } from 'antd';
-import { TABLE_ID } from 'views/PublicStudies/utils';
+import { getColumns, TABLE_ID } from 'views/PublicStudies/utils';
 
 import { useGlobals } from 'store/global';
 import { getProTableDictionary } from 'utils/translation';
@@ -14,24 +13,34 @@ import styles from './index.module.css';
 
 const { Title } = Typography;
 
-type OwnProps = {
-  defaultColumns: ProColumnType<any>[];
-};
-
-const PageContent = ({ defaultColumns = [] }: OwnProps) => {
+const PageContent = () => {
   const [searchValue, setSearchValue] = useState('');
 
   const { stats, isFetchingStats } = useGlobals();
   const { studiesParticipants = [] } = stats || {};
 
+  const [filteredStudies, setFilteredStudies] = useState(studiesParticipants);
+
+  useEffect(() => {
+    setFilteredStudies(studiesParticipants);
+  }, [studiesParticipants]);
+
   const searchPrescription = (value: any) => {
     if (value?.target?.value) {
-      setSearchValue(value.target.value);
+      const searchValue = value.target.value;
+      setSearchValue(searchValue);
+
+      const filteredValues = studiesParticipants.filter((study) =>
+        study.study_name.toLowerCase().includes(searchValue.toLowerCase()),
+      );
+      setFilteredStudies(filteredValues);
     } else {
       setSearchValue('');
     }
   };
 
+  const defaultColumns = getColumns();
+
   return (
     <Space direction="vertical" size={16} className={styles.pageContent}>
       <Title className={styles.title} level={4}>
@@ -64,11 +73,11 @@ const PageContent = ({ defaultColumns = [] }: OwnProps) => {
               itemCount: {
                 pageIndex: 0,
                 pageSize: 20,
-                total: studiesParticipants.length,
+                total: filteredStudies.length,
               },
             }}
             size="small"
-            dataSource={studiesParticipants.map((i) => ({ ...i, key: i.study_code }))}
+            dataSource={filteredStudies.map((i) => ({ ...i, key: i.study_code }))}
             dictionary={getProTableDictionary()}
           />
         }

diff --git a/src/views/PublicStudies/index.tsx b/src/views/PublicStudies/index.tsx
@@ -6,7 +6,7 @@ import PageContent from 'views/PublicStudies/components/PageContent';
 import PublicLayout from 'components/PublicLayout';
 import { fetchStats } from 'store/global/thunks';
 
-import { getColumns, SCROLL_WRAPPER_ID } from './utils';
+import { SCROLL_WRAPPER_ID } from './utils';
 
 import style from './index.module.css';
 
@@ -21,7 +21,7 @@ const PublicStudies = () => {
     <PublicLayout>
       <div className={style.studiesPage}>
         <ScrollContent id={SCROLL_WRAPPER_ID} className={style.scrollContent}>
-          <PageContent defaultColumns={getColumns()} />
+          <PageContent />
         </ScrollContent>
       </div>
     </PublicLayout>

diff --git a/src/views/PublicStudies/utils.tsx b/src/views/PublicStudies/utils.tsx
@@ -17,7 +17,7 @@ import style from './index.module.css';
 export const SCROLL_WRAPPER_ID = 'public-studies-scroll-wrapper';
 export const TABLE_ID = 'public-studies';
 
-export const getColumns = (): ProColumnType<IStudiesParticipants>[] => [
+export const getColumns = (): ProColumnType<any>[] => [
   {
     key: 'is_harmonized',
     iconTitle: <AuditOutlined />,