#2590: index.jsx

Codestruktur

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

Importe von: ../../../../../../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

Enthält PropTypes für: DynamicTaskSelect

Verwendet CSS-Module für das Styling.

Quellcode (gekürzt)

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);

    // Behandlung von Mausereignissen
    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(`Interner Fehler: ${error}`));

    // Initialer Abruf
    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 });

                // onKost2Changed-Handler auslösen, falls definiert.
                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,
                });
            }
        };
// ... (gekürzt, insgesamt 214 Zeilen)

Git-Verlauf

3685edd6c lift to react 18 wip
a0c602b8c Time sheet editing: tooltip for task favorite star added.
06a8f9eaa More features in new calendar (refresh, link to list of calendars, tooltips, ...)
03060e7ba Timesheet editing: update consumption bar after changing selected task.
38329872e Favorites improved (tooltips added, icons improved, ...)