src/components/forms/FormEntryWorker/FormEntryWorker.jsx - master - DevDenzo/ERP

src/components/forms/FormEntryWorker/FormEntryWorker.jsx
311 строк16 KB
Denis Sklyarskij
Инициализирован репозиторий
14 янв 2026, 23:32
14 янв 2026, 23:321df3d47
// Подключаем библиотеку React
import React, {
    useState, // Подключаем хук управления состоянием компонента
    memo // Подключаем хук кэширования параметров компонента
} from "react";

// Подключаем библиотека объединения классов
import classNames from "classnames";

// Подключаем компонент базовой формы
import { BaseForm } from "../index.js";

// Подключаем отображение для полей формы сотрудников
import { formWorkerMapping } from "./formWorkerMapping.js";
// Подключаем объект действительных отображений
import { validFieldsMapping } from "./validFieldsMapping.js";
// Подключаем объект недействительных отображений
import { invalidFieldsMapping } from "./invalidFieldsMapping.js";
// Подключаем объект отображения обязательных полей
import { requiredFieldsMapping } from "./requiredFieldsMapping.js";

// Подключаем общие стили для формы добавления
import '../styles/_form-entry.less';

// Форма добавления сотрудника
const FormEntryWorker = memo(({ workers }) => {
    // Создаем состояние редактируемого поля
    const [isEditing, setIsEditing] = useState(false);
    // Храним состояние переключателя
    const [activeSwitch, setActiveSwitch] = useState(false);

    // Создаем состояние для проверки полей ввода
    const [isValid, setIsValid] = useState({});
    // Состояние отслеживания изменения поля ввода
    const [fieldValue, setFieldValue] = useState({});

    // Создаем состояние отслеживания изменений в самом поле
    const [editedValue, setEditedValue] = useState({});
    // Создаем состояние отслеживания изменений редактируемых полей ввода
    const [isEditValid, setIsEditValid] = useState(false);

    // Обработчик изменения поля ввода
    const handleFieldChange = (e) => {
        // Получаем имя поля и его значения из объекта события
        const { name, value } = e.target;

        // Обновляем состояние поля ввода, сохраняя предыдущее значение
        setFieldValue(prevState => ({
            ...prevState,
            [name]: value
        }));

        // Обновляем состояние поля, исключая пустые значения
        setIsValid(prevState => ({
            ...prevState,
            [name]: value.trim() !== ""
        }));
    };

    // Обработчик изменения редактируемого поля
    const handleEditedChange = (e) => {
        // Получаем имя и значение поля из объекта события
        const { name, value } = e.target;

        // Обновляем состояние текста в редактируемом поле ввода
        setEditedValue(prevState => ({
            ...prevState,
            [name]: value
        }));

        // Меняем состояние самого редактируемого поля
        setIsEditValid(prevState => ({
            ...prevState,
            [name]: value
        }));
    };

    // Добавляем обработчик сохранения изменений
    const handleSave = () => {
        console.log('!!!');
    };

    // Получаем значения подписей для полей формы
    const workersKeys = Object.keys(workers[0]);

    // Создаем конфигурацию пропсов с состоянием и функциями
    const formProps = {
        visible: {
            activeSwitch,
            isEditing
        },
        functions: {
            setActiveSwitch,
            setIsEditing
        }
    };

    // Отображаем представление формы сотрудников
    return (
        <BaseForm props={formProps}>
            {workersKeys.map(item => {
                if (
                    item === "id" || // Прячем идентификатор
                    item === "slug" || // Скрываем уникальный идентификатор
                    item === "equipmentIds" // Скрываем идентификаторы станков
                ) return null;

                // Для отделов отображаем другой фрагмент
                if (item === "department") {
                    return (
                        <div className={classNames("input-group mb-3")}>
                            <label
                                className={classNames(
                                "form-label",
                                    "form-group__label",
                                    {
                                        "is-active-switch": activeSwitch
                                    }
                                )}
                            >
                                {isEditing ? (
                                  <div className={classNames("d-flex")}>
                                      <input
                                          name={item}
                                          type="text"
                                          className={classNames(
                                          "form-control",
                                              "form-group__edited-input",
                                              {
                                                  "is-valid": isEditValid,
                                                  "is-invalid": !isEditValid[item],
                                                  "is-active-switch": activeSwitch
                                              }
                                          )}
                                          defaultValue={formWorkerMapping[item]}
                                          value={editedValue[item]}
                                          onChange={handleEditedChange}
                                      />
                                      <button
                                          type="button"
                                          className={classNames(
                                          "btn",
                                              "btn-link",
                                              "btn-sm",
                                              {
                                                  "text-white": activeSwitch,
                                                  "text-muted": !activeSwitch
                                              }
                                          )}
                                          onClick={handleSave}
                                      >
                                          Сохранить
                                      </button>
                                  </div>
                                ) : (
                                    <>
                                        {formWorkerMapping[item]}
                                    </>
                                )}
                            </label>
                            <select
                                name={item}
                                className={classNames(
                                "custom-select",
                                    "form-group__selected-list",
                                    {
                                        "is-valid": isValid[item],
                                        "is-invalid": !isValid[item],
                                        "is-active-switch": activeSwitch
                                    }
                                )}
                                value={fieldValue[item]}
                                onChange={handleFieldChange}
                            >
                                <option value="">Выбрать...</option>
                                <option value="1">Доменный цех</option>
                                <option value="2">Сталеплавильный цех</option>
                                <option value="3">Прокатный цех</option>
                                <option value="4">Коксохимическое производство</option>
                                <option value="5">Литейное производство</option>
                                <option value="6">Цех подготовки сырья</option>
                                <option value="7">Энергетическое хозяйство</option>
                                <option value="8">Ремонтные службы</option>
                                <option value="9">Подразделения охраны труда</option>
                                <option value="10">Транспортная служба</option>
                                <option value="11">Цех механической обработки</option>
                                <option value="12">Цех металлоконструкций</option>
                            </select>
                            <div className={classNames("valid-feedback")}>
                                { validFieldsMapping[item] }
                            </div>
                            <div className={classNames("invalid-feedback")}>
                                { invalidFieldsMapping[item] }
                            </div>
                        </div>
                    );
                }

                return (
                    <div
                        className={classNames(
                        "input-group mb-3",
                            "form-group"
                        )}
                    >
                        <label
                            className={classNames(
                            "form-label",
                                "form-group__label",
                                {
                                    "is-active-switch": activeSwitch
                                }
                            )}
                        >
                            {isEditing ? (
                                <div className={classNames("d-flex")}>
                                    <input
                                        name={item}
                                        type="text"
                                        className={classNames(
                                            "form-control",
                                                "form-group__edited-input", {
                                                "is-valid": isEditValid[item],
                                                "is-invalid": !isEditValid[item],
                                                "is-active-switch": activeSwitch
                                            }
                                        )}
                                        defaultValue={formWorkerMapping[item]}
                                        value={editedValue[item]}
                                        onChange={handleEditedChange}
                                    />
                                    <button
                                        type="button"
                                        className={classNames(
                                        "btn",
                                            "btn-link",
                                            "btn-sm",
                                            {
                                                "text-white": activeSwitch,
                                                "text-muted": !activeSwitch
                                            }
                                        )}
                                        onClick={handleSave}
                                    >
                                        Сохранить
                                    </button>
                                </div>
                            ): (
                                <>
                                    { formWorkerMapping[item] }
                                </>
                            )}
                        </label>
                        {item === "startDate" ? (
                            <>
                                <input
                                    type="date"
                                    name={item}
                                    className={classNames(
                                    "form-control",
                                        {
                                            "is-valid": isValid[item],
                                            "is-invalid": !isValid[item],
                                            "is-active-switch": activeSwitch
                                        },
                                        "form-group__input"
                                    )}
                                    value={fieldValue[item]} // Связываем значение
                                    onChange={handleFieldChange} // Навешиваем обработчик
                                />
                                <div className={classNames("valid-feedback")}>
                                    { validFieldsMapping[item] }
                                </div>
                                <div className={classNames("invalid-feedback")}>
                                    { invalidFieldsMapping[item] }
                                </div>
                            </>
                        ) : (
                            <>
                                <input
                                    type={item === "salary" ? "number" : "text"}
                                    name={item}
                                    className={classNames(
                                        "form-control",
                                        {
                                            "is-valid": isValid[item],
                                            "is-invalid": !isValid[item],
                                            "is-active-switch": activeSwitch
                                        },
                                        "form-group__input"
                                    )}
                                    value={fieldValue[item]}
                                    onChange={handleFieldChange}
                                    required={requiredFieldsMapping[item]} // Устанавливаем обязательные для заполнения поля
                                />
                                <div className={classNames("valid-feedback")}>
                                    { validFieldsMapping[item] }
                                </div>
                                <div className={classNames("invalid-feedback")}>
                                    { invalidFieldsMapping[item] }
                                </div>
                            </>
                        )}
                    </div>
                );
            })}
        </BaseForm>
    );
});

export default FormEntryWorker;