Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#1023 fix search functionality in the users table #1024

Merged
merged 4 commits into from
Dec 19, 2024
Merged

#1023 fix search functionality in the users table #1024

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
18efe90
fixed search for users table
Andrewakiv Dec 17, 2024
be9ef8b
deleted comments
Andrewakiv Dec 17, 2024
fd289f4
removed ref
Andrewakiv Dec 17, 2024
c96dbfb
removed search for the date field
Andrewakiv Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 64 additions & 44 deletions FrontEnd/src/pages/AdminPage/UserProfilesTable/UserTable.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState, useEffect } from 'react';
import { useState, useEffect, useRef } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import Highlighter from 'react-highlight-words';
import axios from 'axios';
Expand All @@ -21,8 +21,8 @@ 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({});
const searchInput = useRef(null);

useEffect(() => {
const queryParams = new URLSearchParams(location.search);
Expand All @@ -32,7 +32,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);
Expand Down Expand Up @@ -78,59 +79,78 @@ 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
ref={searchInput}
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) => {
Expand Down
2 changes: 1 addition & 1 deletion FrontEnd/src/pages/AdminPage/UserProfilesTable/UserTable.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,5 +42,5 @@
.filteredIcon {
font-size: 25px;
font-weight: bold;
color: #46c636;
color: #1f9a7c;
}
5 changes: 4 additions & 1 deletion FrontEnd/src/pages/CustomThemes/customAdminTheme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const customAdminTheme = {
colorPrimaryHover: '#0b6c61',
fontWeight: 600,
contentFontSize: 16,
fontFamilyCode: 'Inter',
fontFamilyCode: 'Geologica',
colorLink: '#1f9a7c',
colorLinkActive: '#1f9a7c',
colorLinkHover: '#0b6c61'
Expand All @@ -32,6 +32,9 @@ const customAdminTheme = {
},
token: {
fontFamily: 'Geologica',
colorPrimary: '#1f9a7c',
colorPrimaryHover: '#1f9a7c',
controlOutline: 'rgba(31, 154, 124, 0.4)'
}
};

Expand Down
Loading