Merge pull request #1024 from ita-social-projects/#1023-Fix-Search-Fu…

…nctionality-in-the-Users-Table #1023 fix search functionality in the users table
ita-social-projects · Dec 19, 2024 · cfb63a8 · cfb63a8
2 parents 8501cfb + c96dbfb
commit cfb63a8
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 47 deletions.
diff --git a/FrontEnd/src/pages/AdminPage/UserProfilesTable/UserTable.jsx b/FrontEnd/src/pages/AdminPage/UserProfilesTable/UserTable.jsx
@@ -21,8 +21,7 @@ function UserTable() {
     const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
     const [sortInfo, setSortInfo] = useState({ field: null, order: null });
     const [statusFilters, setStatusFilters] = useState([]);
-    const [searchText, setSearchText] = useState('');
-    const [searchedColumn, setSearchedColumn] = useState('');
+    const [searchParams, setSearchParams] = useState({});
 
     useEffect(() => {
         const queryParams = new URLSearchParams(location.search);
@@ -32,7 +31,8 @@ function UserTable() {
 
     const ordering = sortInfo.field ? `&ordering=${sortInfo.order === 'ascend' ? sortInfo.field : '-' + sortInfo.field}` : '';
     const filtering = statusFilters ? statusFilters.map((filter) => `&${filter}=true`).join('') : '';
-    const url = `${process.env.REACT_APP_BASE_API_URL}/api/admin/users?page=${currentPage}&page_size=${pageSize}${ordering}${filtering}`;
+    const query = new URLSearchParams(searchParams).toString();
+    const url = `${process.env.REACT_APP_BASE_API_URL}/api/admin/users?page=${currentPage}&page_size=${pageSize}${ordering}${filtering}&${query}`;
 
     async function fetcher(url) {
         const response = await axios.get(url);
@@ -78,59 +78,77 @@ function UserTable() {
             <CaretDownOutlined className={css['icon']} />
         );
     };
+
     const handleSearch = (selectedKeys, confirm, dataIndex) => {
         confirm();
-        setSearchText(selectedKeys[0]);
-        setSearchedColumn(dataIndex);
-  };
-    const handleReset = (clearFilters) => {
+
+        if (selectedKeys[0]) {
+          setSearchParams((prev) => ({ ...prev, [dataIndex]: selectedKeys[0] }));
+        } else {
+          setSearchParams((prev) => {
+            const updatedParams = { ...prev };
+            delete updatedParams[dataIndex];
+            return updatedParams;
+          });
+        }
+      };
+
+    const handleReset = (clearFilters, confirm, dataIndex) => {
         clearFilters();
-        setSearchText('');
+        setSearchParams((prev) => {
+            const updatedParams = { ...prev };
+            delete updatedParams[dataIndex];
+            return updatedParams;
+        });
+        confirm();
     };
+
     const getColumnSearchProps = (dataIndex) => ({
-        filterDropdown: ({setSelectedKeys, selectedKeys, confirm, clearFilters}) => (
-            <div className={css['dropdownMenu']}>
-                <Input
-                    placeholder="Пошук"
-                    value={selectedKeys[0]}
-                    onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value]: [])}
-                    onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
-                    className={css['antInput']}
-                ></Input>
-                <Space>
-              <Button
-                type="primary"
-                onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
-                icon={<SearchOutlined />}
-                size="small"
-                className={css['antBtn']}
-              >
-                Пошук
-              </Button>
-              <Button
-                onClick={() => clearFilters && handleReset(clearFilters)}
-                size="small"
-                className={css['ant-btn']}
-              >
-                Скинути
-              </Button>
+        filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
+          <div className={css['dropdownMenu']}>
+            <Input
+              placeholder="Пошук"
+              value={selectedKeys[0]}
+              onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
+              onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
+              className={css['antInput']}
+            />
+            <Space>
+                <Button
+                    type="primary"
+                    onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
+                    icon={<SearchOutlined />}
+                    size="small"
+                    className={css['antBtn']}
+                >
+                    Пошук
+                </Button>
+                <Button
+                    onClick={() => handleReset(clearFilters, confirm, dataIndex)}
+                    size="small"
+                    className={css['antBtn']}
+                >
+                    Скинути
+                </Button>
             </Space>
           </div>
-            ),
-        filterIcon: (filtered) => <SearchOutlined className={ filtered ? css['filteredIcon'] : css['icon']}/>,
-        onFilter: (value, record) =>
-            record[dataIndex]?.toString().toLowerCase().includes(value.toLowerCase()),
-        render: (text) =>
-            searchedColumn === dataIndex ? (
+        ),
+        filterIcon: (filtered) => (
+          <SearchOutlined className={ filtered ? css['filteredIcon'] : css['icon']} />
+        ),
+        render: (text) => {
+            const searchValue = searchParams[dataIndex] || '';
+            return searchValue ? (
                 <Highlighter
                     highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
-                    searchWords={[searchText]}
+                    searchWords={[searchValue]}
                     autoEscape
                     textToHighlight={text ? text.toString() : ''}
                 />
             ) : (
-                text
-            ),
+              text
+            );
+        }
     });
 
     const renderStatusTags = (status) => {
@@ -232,8 +250,7 @@ function UserTable() {
             key: 'registration_date',
             sorter: true,
             sortOrder: sortInfo.field === 'registration_date' ? sortInfo.order : null,
-            sortIcon: ({ sortOrder }) => getSortIcon(sortOrder),
-            ...getColumnSearchProps('registration_date'),
+            sortIcon: ({ sortOrder }) => getSortIcon(sortOrder)
         },
         {
             title: 'Дії',

diff --git a/FrontEnd/src/pages/AdminPage/UserProfilesTable/UserTable.module.scss b/FrontEnd/src/pages/AdminPage/UserProfilesTable/UserTable.module.scss
@@ -42,5 +42,5 @@
 .filteredIcon {
     font-size: 25px;
     font-weight: bold;
-    color: #46c636;
+    color: #1f9a7c;
 }
diff --git a/FrontEnd/src/pages/CustomThemes/customAdminTheme.js b/FrontEnd/src/pages/CustomThemes/customAdminTheme.js
@@ -5,7 +5,7 @@ const customAdminTheme = {
         colorPrimaryHover: '#0b6c61',
         fontWeight: 600,
         contentFontSize: 16,
-        fontFamilyCode: 'Inter',
+        fontFamilyCode: 'Geologica',
         colorLink: '#1f9a7c',
         colorLinkActive: '#1f9a7c',
         colorLinkHover: '#0b6c61'
@@ -32,6 +32,9 @@ const customAdminTheme = {
     },
     token: {
       fontFamily: 'Geologica',
+      colorPrimary: '#1f9a7c',
+      colorPrimaryHover: '#1f9a7c',
+      controlOutline: 'rgba(31, 154, 124, 0.4)'
     }
   };