import React, { useEffect, useMemo, useState } from "react"; import { Button, Col, Row } from "react-bootstrap"; import { useDispatch, useSelector } from "react-redux"; import { CardContainer, IconApp } from "@components"; import { CrudApp } from "@components/Crud/CrudApp"; import { CoordinationSelectApp } from "@components/CoordinationSelectApp"; import { SelectSearchMainCyclesApp } from "@components/SelectSearchMainCyclesApp"; import { SelectTeachersApp } from "@components/schedule/SelectTeachersApp"; import { TooltipAntdApp } from "@components/TooltipAntdApp"; import { orderMainCycles } from "@helpers/orderMainCycles"; import { useForm } from "@hooks/useForm"; import { startShow as startListCycles } from "@redux/slices/teachers/v2/cycleSlice"; import { startShow as startListCoordination } from "@redux/slices/teachers/v2/coordinationSlice"; import { startShow as startListTeachers } from "@redux/slices/teachers/teacherSlice"; import { clearReport, startExportProgrammaticAdvancesReport, startShowProgrammaticAdvancesReport, } from "@redux/slices/users/ProgrammaticAdvances"; import ModalApp from "@components/ModalApp"; import { ProgrammaticAdvanceTable } from "@components/ProgrammaticAdvance/ProgrammaticAdvanceTable"; import { startShowPlanningSheetCriteria, startShowPlanningSheetsList, } from "@redux/slices/users/PlanningSheets"; const defaultValues = { page: 1, query: "", number_rows: 25, cycles: null, coordination_id: null, teacher_id: null, refresh: false, errors: {}, }; const modalDefaultValues = { page: 1, query: "", number_rows: 50, class_type: null, only_unseen: false, refresh: false, errors: {}, }; export default function ProgrammaticAdvances() { const dispatch = useDispatch(); const { report } = useSelector((state) => state.programmaticAdvances); const { list: cyclesList } = useSelector((state) => state.cycle); const { list: teachersList } = useSelector((state) => state.teacher); const { list: planningSheetsList } = useSelector( (state) => state.planningSheets, ); const [showModal, setShowModal] = useState(false); const [activeRow, setActiveRow] = useState(null); const [criteriaList, setCriteriaList] = useState([]); const { values, handleInputChange, setInputValue } = useForm(defaultValues); const { values: modalValues, handleInputChange: handleModalInputChange, setInputValue: setModalInputValue, setFormValues: setModalFormValues, } = useForm(modalDefaultValues); const { cycles, coordination_id, teacher_id, page, number_rows, query, refresh, errors, } = values; const { enable_programmatic_advance_evaluation_criteria } = useSelector( (state) => state.config, ); const showEvaluationCriteria = !!enable_programmatic_advance_evaluation_criteria && !!activeRow?.teacher_id; const handleReportInputChange = (event) => { handleInputChange(event); if (event.target.name !== "page") { setInputValue("page", 1); } }; const setReportInputValue = (name, value) => { setInputValue(name, value); if (name !== "page" && name !== "refresh") { setInputValue("page", 1); } }; const filteredPlanningSheets = useMemo(() => { const search = modalValues.query?.trim().toLowerCase(); const classType = modalValues.class_type; const onlyUnseen = modalValues.only_unseen; let filtered = planningSheetsList || []; if (search) { filtered = filtered.filter((planningSheet) => [ planningSheet.topic, planningSheet.content, planningSheet.class_type, planningSheet.objectives_section, planningSheet.sequence, planningSheet.resources, planningSheet.evaluation_technique, planningSheet.evaluation_instrument, planningSheet.activities_tasks, ] .filter(Boolean) .some((value) => String(value).toLowerCase().includes(search), ), ); } if (classType) { filtered = filtered.filter((ps) => ps.class_type === classType); } if (onlyUnseen) { filtered = filtered.filter( (ps) => !ps.attendance_dates_current_cycle || ps.attendance_dates_current_cycle.length === 0, ); } return filtered; }, [ modalValues.query, modalValues.class_type, modalValues.only_unseen, planningSheetsList, ]); const modalPagination = useMemo(() => { const total = filteredPlanningSheets.length; const perPage = Number(modalValues.number_rows) || 50; const lastPage = Math.max(Math.ceil(total / perPage), 1); const currentPage = Math.min(Number(modalValues.page) || 1, lastPage); const from = total === 0 ? 0 : (currentPage - 1) * perPage + 1; const to = Math.min(currentPage * perPage, total); return { data: filteredPlanningSheets.slice(from > 0 ? from - 1 : 0, to), current_page: currentPage, last_page: lastPage, total, per_page: perPage, from, to, }; }, [filteredPlanningSheets, modalValues.number_rows, modalValues.page]); const handleModalTableInputChange = (event) => { handleModalInputChange(event); if (event.target.name !== "page") { setModalInputValue("page", 1); } }; const setModalTableInputValue = (name, value) => { setModalInputValue(name, value); if (name !== "page" && name !== "refresh") { setModalInputValue("page", 1); } }; useEffect(() => { return () => { dispatch(clearReport()); }; }, [dispatch]); useEffect(() => { dispatch(startListCycles({ asList: true })); dispatch(startListCoordination({ asList: true })); dispatch(startListTeachers({ asList: true })); }, [dispatch]); useEffect(() => { if (cycles) { dispatch(startShowProgrammaticAdvancesReport(values)); } else { dispatch(clearReport()); } }, [ cycles, coordination_id, teacher_id, page, number_rows, query, refresh, ]); const handleExportExcel = () => { dispatch(startExportProgrammaticAdvancesReport(values)); }; const handleViewAdvances = (item) => { setActiveRow(item); setModalFormValues(modalDefaultValues, true); setShowModal(true); dispatch( startShowPlanningSheetsList({ teacherId: item.teacher_id, subjectId: item.school_subject_id, cycleId: item.cycle_id, }), ); dispatch( startShowPlanningSheetCriteria( { school_subject_id: item.school_subject_id, cycle_id: item.cycle_id, teacher_id: item.teacher_id, }, setCriteriaList, ), ); }; return ( 0 && report?.cycles?.length > 0 ? ( Lista completa de ciclos incluidos{" "} Lista de ciclos } bodyContent={
    {report.cycles.map( (cycle, index) => (
  • {cycle}
    • ), )}
} bodyCenter={false} >
) : ( "" ) } name="cycles" value={cycles} required onChange={handleReportInputChange} options={orderMainCycles(cyclesList, false)} errorText={errors.cycles && errors.cycles[0]} /> ({ value: t.id, label: t.username, }))} /> {cycles && ( <>
Registros: {report?.count || 0}
{report?.pagination?.data?.map((item, index) => (
{item.teacher_name ?.split(" ") .map((n) => n[0]) .join("") .slice(0, 2) .toUpperCase()}
#{item.no_employe || "-"}
{item.teacher_name || "-"}
{item.subject_key}
{item.subject_name || "-"}
{item.curriculum || "-"}
{item.cycle || "-"} {item.group || "-"} {item.programmatic_advances_loaded_count || 0} {item.programmatic_advances_seen_count || 0}
{item.percentage_seen || 0}%
= 100 ? "bg-success" : (item.percentage_seen || 0) >= 50 ? "bg-primary" : "bg-warning" }`} role="progressbar" style={{ width: `${ item.percentage_seen || 0 }%`, }} aria-valuenow={ item.percentage_seen || 0 } aria-valuemin="0" aria-valuemax="100" >
handleViewAdvances(item)} /> ))} null} >
)} ); }