advanced stats filtering

pages/cart/publishers/stats.tsx

@@ -16,6 +16,7 @@ function ContactsPage({ allPublishers }) {
     const [selectedMonth, setSelectedMonth] = useState(currentMonth + 1);
     const isMounted = useRef(false);
 
+
     const [searchQuery, setSearchQuery] = useState('');
     const [publisherType, setPublisherType] = useState('');
     const [publishers, setPublishers] = useState(allPublishers);
@@ -35,12 +36,47 @@ function ContactsPage({ allPublishers }) {
     });
 
     const [hideEmptyFields, setHideEmptyFields] = useState({
-        availability: false,
+        availability: 'off', // 'on', 'off', 'onlyEmpty'
-        assignments: false,
+        assignments: 'off',  // 'on', 'off', 'onlyEmpty'
         lastLogin: false,
         notifiications: false
     });
 
+    const availabilityRef = useRef(null);
+    const assignmentsRef = useRef(null);
+    useEffect(() => {
+        if (availabilityRef.current) {
+            availabilityRef.current.indeterminate = hideEmptyFields.availability === 'off';
+        }
+    }, [hideEmptyFields.availability]);
+    useEffect(() => {
+        if (assignmentsRef.current) {
+            assignmentsRef.current.indeterminate = hideEmptyFields.assignments === 'off';
+        }
+    }, [hideEmptyFields.assignments]);
+
+
+    const getCheckboxState = (field) => {
+        switch (hideEmptyFields[field]) {
+            case 'on':
+                return true;
+            case 'onlyEmpty':
+                return false;
+            default:
+                return undefined; // this will be used to set indeterminate
+        }
+    };
+    const getCheckboxTooltip = (field, label) => {
+        switch (hideEmptyFields[field]) {
+            case 'on':
+                return 'Само със ' + label;
+            case 'onlyEmpty':
+                return 'Само без ' + label;
+            default:
+                return 'Всички ' + label;
+        }
+    }
+
     function handleSort(field) {
         const order = sortField === field && sortOrder === 'asc' ? 'desc' : 'asc';
         setSortField(field);
@@ -54,8 +90,12 @@ function ContactsPage({ allPublishers }) {
                 publisher.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
                 (publisher.phone?.toLowerCase().includes(searchQuery.toLowerCase())))
             && (publisherType ? publisher.type === publisherType : true)
-            && (!hideEmptyFields.availability || publisher.currentMonthAvailabilityDaysCount > 0)
+            // && (!hideEmptyFields.availability || publisher.currentMonthAvailabilityDaysCount > 0)
-            && (!hideEmptyFields.assignments || publisher.currentMonthAssignments > 0)
+            // && (!hideEmptyFields.assignments || publisher.currentMonthAssignments > 0)
+            && (hideEmptyFields.availability === 'on' ? publisher.currentMonthAvailabilityDaysCount > 0 :
+                hideEmptyFields.availability === 'onlyEmpty' ? !publisher.currentMonthAvailabilityDaysCount || publisher.currentMonthAvailabilityDaysCount === 0 : true)
+            && (hideEmptyFields.assignments === 'on' ? publisher.currentMonthAssignments > 0 :
+                hideEmptyFields.assignments === 'onlyEmpty' ? publisher.currentMonthAssignments === 0 : true)
             && (!hideEmptyFields.lastLogin || publisher.lastLogin)
             && (!hideEmptyFields.notifiications || publisher.isPushActive)
         );
@@ -155,9 +195,13 @@ function ContactsPage({ allPublishers }) {
                                         </p>
                                         <input
                                             type="checkbox" className='ml-2'
-                                            checked={hideEmptyFields.availability}
+                                            ref={availabilityRef}
-                                            onChange={() => setHideEmptyFields({ ...hideEmptyFields, availability: !hideEmptyFields.availability })}
+                                            checked={getCheckboxState('availability') ?? false}
-                                            title="Скрий редове без възможности"
+                                            onChange={() => {
+                                                const newState = hideEmptyFields.availability === 'on' ? 'onlyEmpty' : (hideEmptyFields.availability === 'onlyEmpty' ? 'off' : 'on');
+                                                setHideEmptyFields({ ...hideEmptyFields, availability: newState });
+                                            }}
+                                            title={getCheckboxTooltip('availability', "възможности")}
                                         />
                                     </th>
                                     <th className="border-b font-medium p-4 pt-0 pb-3 cursor-pointer" >
@@ -166,9 +210,13 @@ function ContactsPage({ allPublishers }) {
                                         </p>
                                         <input
                                             type="checkbox" className='ml-2'
-                                            checked={hideEmptyFields.assignments}
+                                            ref={assignmentsRef}
-                                            onChange={() => setHideEmptyFields({ ...hideEmptyFields, assignments: !hideEmptyFields.assignments })}
+                                            checked={getCheckboxState('assignments') ?? false}
-                                            title="Скрий редове без участия"
+                                            onChange={() => {
+                                                const newState = hideEmptyFields.assignments === 'on' ? 'onlyEmpty' : (hideEmptyFields.assignments === 'onlyEmpty' ? 'off' : 'on');
+                                                setHideEmptyFields({ ...hideEmptyFields, assignments: newState });
+                                            }}
+                                            title={getCheckboxTooltip('assignments', "участия")}
                                         />
                                     </th>
                                     <th className="border-b font-medium p-4 pt-0 pb-3 cursor-pointer" >