diff --git a/FrontEnd/src/pages/AdminPage/UserProfilesTable/UserTable.jsx b/FrontEnd/src/pages/AdminPage/UserProfilesTable/UserTable.jsx index 760185e1..0a1d4838 100644 --- 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() { ); }; + 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}) => ( -
- setSelectedKeys(e.target.value ? [e.target.value]: [])} - onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)} - className={css['antInput']} - > - - - + filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => ( +
+ setSelectedKeys(e.target.value ? [e.target.value] : [])} + onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)} + className={css['antInput']} + /> + + +
- ), - filterIcon: (filtered) => , - onFilter: (value, record) => - record[dataIndex]?.toString().toLowerCase().includes(value.toLowerCase()), - render: (text) => - searchedColumn === dataIndex ? ( + ), + filterIcon: (filtered) => ( + + ), + render: (text) => { + const searchValue = searchParams[dataIndex] || ''; + return searchValue ? ( ) : ( - 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 index 13882c5b..70d197be 100644 --- 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; } \ No newline at end of file diff --git a/FrontEnd/src/pages/CustomThemes/customAdminTheme.js b/FrontEnd/src/pages/CustomThemes/customAdminTheme.js index 545c6783..630dca75 100644 --- 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)' } };