popov/mwitnessing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implement stats null filters in column headers

Browse Source
This commit is contained in:
Dobromir Popov
2024-05-12 17:25:35 +03:00
parent 8e69e3b933
commit 163e1e1167
1 changed files with 42 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
pages/cart/publishers/stats.tsx
View File

@ -13,7 +13,7 @@ import { set } from 'date-fns';
function ContactsPage({ allPublishers }) { function ContactsPage({ allPublishers }) {
const currentMonth = new Date().getMonth(); const currentMonth = new Date().getMonth();
const [selectedMonth, setSelectedMonth] = useState(""); const [selectedMonth, setSelectedMonth] = useState(currentMonth + 1);
const isMounted = useRef(false); const isMounted = useRef(false);
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
@ -33,9 +33,12 @@ function ContactsPage({ allPublishers }) {
index: monthIndex + 1 index: monthIndex + 1
}; };
}); });
const datesOn15th = Array.from({ length: 7 }, (_, i) => new Date(new Date().getFullYear(), new Date().getMonth() - 3 + i, 15))
.map(date => date.toISOString().split('T')[0]);
const [hideEmptyFields, setHideEmptyFields] = useState({
availability: false,
assignments: false,
lastLogin: false
});
function handleSort(field) { function handleSort(field) {
const order = sortField === field && sortOrder === 'asc' ? 'desc' : 'asc'; const order = sortField === field && sortOrder === 'asc' ? 'desc' : 'asc';
@ -48,8 +51,11 @@ function ContactsPage({ allPublishers }) {
(publisher.firstName.toLowerCase().includes(searchQuery.toLowerCase()) || (publisher.firstName.toLowerCase().includes(searchQuery.toLowerCase()) ||
publisher.lastName.toLowerCase().includes(searchQuery.toLowerCase()) || publisher.lastName.toLowerCase().includes(searchQuery.toLowerCase()) ||
publisher.email.toLowerCase().includes(searchQuery.toLowerCase()) || publisher.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
(publisher.phone?.toLowerCase().includes(searchQuery.toLowerCase()))) && (publisher.phone?.toLowerCase().includes(searchQuery.toLowerCase())))
(publisherType ? publisher.type === publisherType : true) && (publisherType ? publisher.type === publisherType : true)
&& (!hideEmptyFields.availability || publisher.currentMonthAvailabilityDaysCount > 0)
&& (!hideEmptyFields.assignments || publisher.currentMonthAssignments > 0)
&& (!hideEmptyFields.lastLogin || publisher.lastLogin)
); );
if (sortField) { if (sortField) {
@ -68,7 +74,7 @@ function ContactsPage({ allPublishers }) {
} }
setFilteredPublishers(filtered); setFilteredPublishers(filtered);
setPubWithAssignmentsCount(filtered.filter(publisher => publisher.currentMonthAvailabilityHoursCount && publisher.currentMonthAvailabilityHoursCount > 0).length); setPubWithAssignmentsCount(filtered.filter(publisher => publisher.currentMonthAvailabilityHoursCount && publisher.currentMonthAvailabilityHoursCount > 0).length);
}, [searchQuery, publisherType, sortField, sortOrder, allPublishers]); }, [searchQuery, publisherType, sortField, sortOrder, allPublishers, hideEmptyFields]);
useEffect(() => { useEffect(() => {
if (isMounted.current) { if (isMounted.current) {
@ -141,14 +147,38 @@ function ContactsPage({ allPublishers }) {
<th className="border-b font-medium p-4 pl-8 pt-0 pb-3 cursor-pointer" onClick={() => handleSort('name')}> <th className="border-b font-medium p-4 pl-8 pt-0 pb-3 cursor-pointer" onClick={() => handleSort('name')}>
Име{renderSortArrow('name')} Име{renderSortArrow('name')}
</th> </th>
<th className="border-b font-medium p-4 pt-0 pb-3 cursor-pointer" onClick={() => handleSort('currentMonthAvailabilityDaysCount')}> <th className="border-b font-medium p-4 pt-0 pb-3 cursor-pointer" >
Възможности{renderSortArrow('currentMonthAvailabilityDaysCount')} <p className="inline-block" onClick={() => handleSort('currentMonthAvailabilityDaysCount')}>
Възможности{renderSortArrow('currentMonthAvailabilityDaysCount')}
</p>
<input
type="checkbox" className='ml-2'
checked={hideEmptyFields.availability}
onChange={() => setHideEmptyFields({ ...hideEmptyFields, availability: !hideEmptyFields.availability })}
title="Скрий редове без възможности"
/>
</th> </th>
<th className="border-b font-medium p-4 pt-0 pb-3 cursor-pointer" onClick={() => handleSort('currentMonthAssignments')}> <th className="border-b font-medium p-4 pt-0 pb-3 cursor-pointer" >
Участия{renderSortArrow('currentMonthAssignments')} <p className="inline-block" onClick={() => handleSort('currentMonthAssignments')}>
Участия{renderSortArrow('currentMonthAssignments')}
</p>
<input
type="checkbox" className='ml-2'
checked={hideEmptyFields.assignments}
onChange={() => setHideEmptyFields({ ...hideEmptyFields, assignments: !hideEmptyFields.assignments })}
title="Скрий редове без участия"
/>
</th> </th>
<th className="border-b font-medium p-4 pt-0 pb-3 cursor-pointer" onClick={() => handleSort('lastLogin')}> <th className="border-b font-medium p-4 pt-0 pb-3 cursor-pointer" >
Последно влизане{renderSortArrow('lastLogin')} <p className="inline-block" onClick={() => handleSort('lastLogin')}>
Последно влизане{renderSortArrow('lastLogin')}
</p>
<input
type="checkbox" className='ml-2'
checked={hideEmptyFields.lastLogin}
onChange={() => setHideEmptyFields({ ...hideEmptyFields, lastLogin: !hideEmptyFields.lastLogin })}
title="Скрий редове без последно влизане"
/>
</th> </th>
</tr> </tr>
</thead> </thead>