#2590: index.jsx

Estructura del código

Hooks utilizados: Context, State, State, State, State, Ref, ClickOutsideHandler, Effect, Effect, Memo

Importaciones de: ../../../../../../containers/panel/favorite/FavoritesPanel, ../../../../../../containers/panel/task/TaskTreePanel, ../../../../../../utilities/hooks, ../../../../../../utilities/rest, ../../../../../design, ../../../../../design/input/Input.module.scss, ../../../context, ./TaskPath, ./TaskSelect.module.scss, @fortawesome/free-solid-svg-icons, @fortawesome/react-fontawesome, prop-types, react, reactstrap

Tiene PropTypes para: DynamicTaskSelect

Utiliza Módulos CSS para el estilo.

Código fuente (resumido)

import { faBarsStaggered, faChevronDown } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import PropTypes from 'prop-types';
import React from 'react';
import { UncontrolledTooltip } from 'reactstrap';
import FavoritesPanel from '../../../../../../containers/panel/favorite/FavoritesPanel';
import TaskTreePanel from '../../../../../../containers/panel/task/TaskTreePanel';
import { useClickOutsideHandler } from '../../../../../../utilities/hooks';
import { getServiceURL, handleHTTPErrors } from '../../../../../../utilities/rest';
import { Button, Collapse } from '../../../../../design';
import inputStyle from '../../../../../design/input/Input.module.scss';
import { DynamicLayoutContext } from '../../../context';
import TaskPath from './TaskPath';
import taskStyle from './TaskSelect.module.scss';

function DynamicTaskSelect(
    {
        id,
        label,
        onKost2Changed,
        showRootForAdmins = false,
    },
) {
    const {
        setData, ui, variables, setVariables,
    } = React.useContext(DynamicLayoutContext);

    const [panelVisible, setPanelVisible] = React.useState(false);
    const [modalHighlight, setModalHighlight] = React.useState(undefined);
    const [task, setStateTask] = React.useState(undefined);
    const [favorites, setFavorites] = React.useState(undefined);
    const panelRef = React.useRef(null);

    // Manejo de eventos del ratón
    useClickOutsideHandler(panelRef, () => setPanelVisible(false), panelVisible);

    const fetchFavorites = (action, params = {}, callback = setFavorites) => fetch(
        getServiceURL(`task/favorites/${action}`, params),
        {
            method: 'GET',
            credentials: 'include',
            headers: {
                Accept: 'application/json',
            },
        },
    )
        .then(handleHTTPErrors)
        .then((response) => response.json())
        .then(callback)
        .catch((error) => alert(`Error interno: ${error}`));

    // Carga inicial
    React.useEffect(() => {
        fetchFavorites('list');
    }, []);

    React.useEffect(() => {
        if (variables.task) {
            setStateTask(variables.task);
        }
    }, [setStateTask, variables]);

    return React.useMemo(() => {
        const setTask = (taskId, selectedTask) => {
            if (selectedTask) {
                setPanelVisible(false);
            }

            if (!taskId) {
                setStateTask(undefined);
                setData({ [id]: undefined });

                // Emitir el manejador onKost2Changed si está definido.
                if (onKost2Changed) {
                    onKost2Changed();
                }

                setModalHighlight(undefined);

                return;
            }

            fetch(
                getServiceURL(`task/info/${taskId}`),
                {
                    method: 'GET',
                    credentials: 'include',
                    headers: {
                        Accept: 'application/json',
                    },
                },
            )
                .then(handleHTTPErrors)
                .then((response) => response.json())
                .then((json) => {
                    setStateTask(json);

                    if (json) {
                        setData({ [id]: { id: json.id } });
                        setVariables({
                            ...variables,
                            task: json,
                        });
                        if (onKost2Changed) {
                            onKost2Changed(json.kost2List);
                        }

                        setStateTask(json);
                    }
                });
        };

        const handleFavoriteCreate = (name) => {
            if (task) {
                fetchFavorites('create', {
                    name,
                    taskId: task.id,
                });
            }
        };
// ... (truncado, total 214 líneas)

Historial de Git

3685edd6c actualización a react 18 wip
a0c602b8c Edición de hoja de tiempos: tooltip para estrella de tarea favorita añadido.
06a8f9eaa Más funciones en el nuevo calendario (actualizar, enlace a lista de calendarios, tooltips, ...)
03060e7ba Edición de hoja de tiempos: actualizar barra de consumo después de cambiar la tarea seleccionada.
38329872e Favoritos mejorados (tooltips añadidos, iconos mejorados, ...)