add filter to show only publishers without training

pages/cart/publishers/index.tsx

@@ -15,6 +15,7 @@ import { levenshteinEditDistance } from "levenshtein-edit-distance";
 import ProtectedRoute from '../../../components/protectedRoute';
 import ConfirmationModal from '../../../components/ConfirmationModal';
 import { relative } from "path";
+import { set } from "lodash";
 
 
 
@@ -24,14 +25,31 @@ interface IProps {
 
 function PublishersPage({ publishers = [] }: IProps) {
   const [shownPubs, setShownPubs] = useState(publishers);
+
   const [filter, setFilter] = useState("");
+  const [showZeroShiftsOnly, setShowZeroShiftsOnly] = useState(false);
   const [filterIsImported, setFilterIsImported] = useState({
     checked: false,
     indeterminate: true,
   });
-  const [showZeroShiftsOnly, setShowZeroShiftsOnly] = useState(false);
-  const [isDeleting, setIsDeleting] = useState(false);
 
+  // const cbRefFilterTraining = useRef<HTMLInputElement>(null);
+
+  // const getCheckboxState = (currentState: boolean | null) => {
+  //   if (currentState === true) return 'unchecked';
+  //   if (currentState === false) return 'checked';
+  //   return 'indeterminate';
+  // };
+  // const cbRefFilterTraining = useRef<HTMLInputElement>(null);
+  // const [cbFilterTrainingState, setcbFilterTrainingState] = useState<boolean | null>(null);
+  // useEffect(() => {
+  //   if (cbRefFilterTraining.current) {
+  //     cbRefFilterTraining.current.indeterminate = cbFilterTrainingState === null;
+  //   }
+  // }, [cbFilterTrainingState]);
+  const [flterNoTraining, setFilterNoTraining] = useState(false);
+
+  const [isDeleting, setIsDeleting] = useState(false);
   const [isModalOpenDeleteAllVisible, setIsModalOpenDeleteAllVisible] = useState(false);
   const [isModalOpenDeleteAllAvaillabilities, setIsModalOpenDeleteAllAvaillabilities] = useState(false);
 
@@ -102,10 +120,15 @@ function PublishersPage({ publishers = [] }: IProps) {
       ? filteredPublishers.filter(p => p.assignments.length === 0)
       : filteredPublishers;
 
-    setShownPubs(filteredPublishers);
+    // trained filter
-  }, [filter, showZeroShiftsOnly]);
+    if (flterNoTraining) {
+      filteredPublishers = filteredPublishers.filter(p => p.isTrained === false);
+    }
+
+    setShownPubs(filteredPublishers);
+  }, [filter, showZeroShiftsOnly, flterNoTraining]);
+
 
-  const checkboxRef = useRef();
 
   const renderPublishers = () => {
     if (shownPubs.length === 0) {
@@ -138,27 +161,13 @@ function PublishersPage({ publishers = [] }: IProps) {
     if (type === 'text') {
       setFilter(value);
     } else if (type === 'checkbox') {
-      // setFilterIsImported({ ...checkboxFilter, [name]: checked });
+      if (name === 'filterIsImported') {
-      const { checked, indeterminate } = checkboxRef.current;
+        setFilterIsImported({ checked, indeterminate: false });
-      if (!checked && !indeterminate) {
+      }
-        // Checkbox was unchecked, set it to indeterminate state
+      if (name === 'filterTrained') {
-        checkboxRef.current.indeterminate = true;
+        // const nextState = cbFilterTrainingState === false ? null : cbFilterTrainingState === null ? true : false;
-        setFilterIsImported({ checked: false, indeterminate: true });
+        // setcbFilterTrainingState(nextState);
-      } else if (!checked && indeterminate) {
+        setFilterNoTraining(checked);
-        // Checkbox was indeterminate, set it to checked state
-        checkboxRef.current.checked = true;
-        checkboxRef.current.indeterminate = false;
-        setFilterIsImported({ checked: true, indeterminate: false });
-      } else if (checked && !indeterminate) {
-        // Checkbox was checked, set it to unchecked state
-        checkboxRef.current.checked = false;
-        checkboxRef.current.indeterminate = false;
-        setFilterIsImported({ checked: false, indeterminate: false });
-      } else {
-        // Checkbox was checked and indeterminate (should not happen), set it to unchecked state
-        checkboxRef.current.checked = false;
-        checkboxRef.current.indeterminate = false;
-        setFilterIsImported({ checked: false, indeterminate: false });
       }
     }
   };
@@ -212,7 +221,17 @@ function PublishersPage({ publishers = [] }: IProps) {
                 <span className="ml-2">само без смени</span>
               </label>
 
-              <span id="filter-info" className="ml-4">{publishers.length} от {publishers.length} вестителя</span>
+              <label htmlFor="filterTrained" className="ml-4 inline-flex items-center">
+                <input type="checkbox" id="filterTrained" name="filterTrained"
+                  // support intermediate state if checkboxState is null
+                  checked={flterNoTraining}
+                  onChange={handleFilterChange}
+                  className="form-checkbox text-indigo-600"
+                />
+                <span className="ml-2">без обучение</span>
+              </label>
+
+              <span id="filter-info" className="ml-4">{shownPubs.length} от {publishers.length} вестителя</span>
             </div>
           </div>
           <div className="grid gap-4 grid-cols-1 md:grid-cols-4 z-0">