P8-Panels/app/panels/clnt_task_board/components/task_form.js

/*
    Парус 8 - Панели мониторинга - УДП - Доски задач
    Компонент панели: Форма события
*/

//---------------------
//Подключение библиотек
//---------------------

import React, { useState, useEffect } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Box, Typography, Tabs, Tab, InputAdornment, IconButton, Icon } from "@mui/material"; //Интерфейсные компоненты
import { TaskFormTabInfo } from "./task_form_tab_info"; //Вкладка основной информации
import { TaskFormTabExecutor } from "./task_form_tab_executor"; //Вкладка информации об исполнителе
import { TaskFormTabProps } from "./task_form_tab_props"; //Вкладка информации со свойствами
import { useDocsProps } from "../hooks/task_dialog_hooks"; //Хук для получения свойств раздела "События"
import { DP_TYPE_PREFIX } from "../layouts"; //Префикс типа данных свойства

//---------
//Константы
//---------

//Стили
const STYLES = {
    CONTAINER: { margin: "5px 0px", textAlign: "center" }
};

//------------------------------------
//Вспомогательные функции и компоненты
//------------------------------------

//Свойства вкладки
function a11yProps(index) {
    return {
        id: `simple-tab-${index}`,
        "aria-controls": `simple-tabpanel-${index}`
    };
}

//Вкладка информации
function CustomTabPanel(props) {
    const { children, value, index, ...other } = props;

    return (
        <Box role="tabpanel" hidden={value !== index} id={`simple-tabpanel-${index}`} aria-labelledby={`simple-tab-${index}`} {...other}>
            {value === index && <Box pt={1}>{children}</Box>}
        </Box>
    );
}

//Контроль свойств - Вкладка информации
CustomTabPanel.propTypes = {
    children: PropTypes.node,
    index: PropTypes.number.isRequired,
    value: PropTypes.number.isRequired
};

//Формирование кнопки для открытия раздела
export const getInputProps = (onClick, disabled = false, icon = "list") => {
    return {
        endAdornment: (
            <InputAdornment position="end">
                <IconButton disabled={disabled} aria-label={`select`} onClick={onClick} edge="end">
                    <Icon>{icon}</Icon>
                </IconButton>
            </InputAdornment>
        )
    };
};

//-----------
//Тело модуля
//-----------

//Форма события
const TaskForm = ({ task, taskType, setTask, editable, onEventNextNumbGet, onDPReady }) => {
    //Состояние вкладки
    const [tab, setTab] = useState(0);

    //Состояние допустимых дополнительных свойств
    const [docProps] = useDocsProps(taskType);

    //При изменении вкладки
    const handleTabChange = (e, newValue) => {
        setTab(newValue);
    };

    //При изменении поля
    const handleFieldEdit = e => {
        setTask(pv => ({
            ...pv,
            [e.target.id]: e.target.value,
            //Связанные значения, если меняется одно, то необходимо обнулить другое
            ...(e.target.id === "sclnt_clnperson" ? { sclnt_clnclients: "" } : {}),
            ...(e.target.id === "sclnt_clnclients" ? { sclnt_clnperson: "" } : {})
        }));
    };

    //При изменении свойства
    const handlePropEdit = e => {
        setTask(pv => ({
            ...pv,
            docProps: { ...pv.docProps, [e.target.id]: e.target.value }
        }));
    };

    //При заполнении всех обязательных свойств
    useEffect(() => {
        let i = 0;
        docProps.props.filter(dp => dp.require === true).map(prop => (!task.docProps[`${DP_TYPE_PREFIX[prop.format]}DP_${prop.rn}`] ? i++ : null));
        docProps.loaded && i === 0 ? onDPReady(true) : onDPReady(false);
    }, [docProps, onDPReady, task.docProps]);

    //Генерация содержимого
    return (
        <Box sx={STYLES.CONTAINER}>
            <Typography pb={1} variant="h6">
                {task.nrn ? "Исправление события" : "Добавление события"}
            </Typography>
            <Tabs value={tab} onChange={handleTabChange} aria-label="tabs of values">
                <Tab label="Событие" {...a11yProps(0)} />
                <Tab label="Исполнитель" {...a11yProps(1)} />
                {docProps.props.length > 0 ? <Tab label="Свойства" {...a11yProps(2)} /> : null}
            </Tabs>
            <CustomTabPanel value={tab} index={0}>
                <TaskFormTabInfo task={task} editable={editable} onFieldEdit={handleFieldEdit} onEventNextNumbGet={onEventNextNumbGet} />
            </CustomTabPanel>
            <CustomTabPanel value={tab} index={1}>
                <TaskFormTabExecutor task={task} onFieldEdit={handleFieldEdit} />
            </CustomTabPanel>
            {docProps.props.length > 0 ? (
                <CustomTabPanel value={tab} index={2}>
                    <TaskFormTabProps task={task} taskType={taskType} docProps={docProps} onPropEdit={handlePropEdit} />
                </CustomTabPanel>
            ) : null}
        </Box>
    );
};

//Контроль свойств - Форма события
TaskForm.propTypes = {
    task: PropTypes.object.isRequired,
    taskType: PropTypes.string.isRequired,
    setTask: PropTypes.func.isRequired,
    editable: PropTypes.bool.isRequired,
    onEventNextNumbGet: PropTypes.func.isRequired,
    onDPReady: PropTypes.func.isRequired
};

//----------------
//Интерфейс модуля
//----------------

export { TaskForm };