add filter to show only publishers without training

This commit is contained in:
Dobromir Popov
2024-09-14 17:25:15 +03:00
parent 83f166ffb2
commit 51544873dd

View File

@ -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);
}, [filter, showZeroShiftsOnly]);
// trained filter
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 });
const { checked, indeterminate } = checkboxRef.current;
if (!checked && !indeterminate) {
// Checkbox was unchecked, set it to indeterminate state
checkboxRef.current.indeterminate = true;
setFilterIsImported({ checked: false, indeterminate: true });
} else if (!checked && indeterminate) {
// 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 });
if (name === 'filterIsImported') {
setFilterIsImported({ checked, indeterminate: false });
}
if (name === 'filterTrained') {
// const nextState = cbFilterTrainingState === false ? null : cbFilterTrainingState === null ? true : false;
// setcbFilterTrainingState(nextState);
setFilterNoTraining(checked);
}
}
};
@ -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">