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

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

// Подключаем библиотеку генерации CSS классов
import classNames from "classnames";

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

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

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

// Форма ввода данных заказа
const FormEntryOrder = memo(({ orders }) => {
    // Определяем состояние для управления полями ввода
    const [isValid, setIsValid] = useState({});
    // Создаем состояние для отслеживания изменений в полях ввода
    const [fieldValue, setFieldValue] = useState({});

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

    // Храним активное состояние переключателя
    const [activeSwitch, setActiveSwitch] = useState(false);

    // Получаем подписи полей формы / ключи объекта заказа из массива order
    const orderKeys = Object.keys(orders[0]);

    // Создаем обработчик для изменения полей ввода
    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('Save mappingIcons!!!');
    };

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

    // отображаем представление формы ввода заказа
    return (
        <BaseForm props={formProps}>
            {orderKeys.map((item, index) => {
                // Пропускаем идентификатор заказа
                if (item === "id") return null;

                // Для категории отображаем список с множественным выбором
                if (item === "category") {
                    return (
                        <div
                            key={index}
                            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[item],
                                                    "is-invalid": !isEditValid[item],
                                                    "is-active-switch": activeSwitch
                                                }
                                            )}
                                            defaultValue={formOrdersMapping[item]}
                                            value={editedValue[item]}
                                            onChange={handleEditedChange}
                                        />
                                        <button
                                            type="button"
                                            className={classNames(
                                                "btn",
                                                "btn-link",
                                                "btn-sm",
                                                "text-muted"
                                            )}
                                            onClick={handleSave}
                                        >
                                            Сохранить
                                        </button>
                                    </div>
                                ) : (
                                    <>
                                        { formOrdersMapping[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}
                                required={requiredFieldsMapping[item]}
                            >
                                <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="2">Гайки самоконтрящиеся</option>
                            </select>
                            <div className={classNames("valid-feedback")}>
                                {validFieldsMapping[item]}
                            </div>
                            <div className={classNames("invalid-feedback")}>
                                {invalidFieldsMapping[item]}
                            </div>
                        </div>
                    );
                }

                return (
                    <div
                        key={index}
                        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={formOrdersMapping[item]}
                                        value={editedValue[item]}
                                        onChange={handleEditedChange}
                                    />
                                    <button
                                        type="button"
                                        className={classNames(
                                        "btn",
                                            "btn-link",
                                            "btn-sm",
                                            "text-muted"
                                        )}
                                    >
                                        Сохранить
                                    </button>
                                </div>
                            ) : (
                                <>
                                    { formOrdersMapping[item] }
                                </>
                            )}
                        </label>
                        {(item === "receiptDate" || item === "startingDate") ? (
                            <>
                                <input
                                    name={item}
                                    type="date"
                                    className={classNames(
                                        "form-control",
                                        "form-group__input",
                                        {
                                            "is-valid": isValid[item],
                                            "is-invalid": !isValid[item],
                                            "is-active-switch": activeSwitch
                                        }
                                    )}
                                    value={fieldValue[item]}
                                    onChange={handleFieldChange}
                                    required={requiredFieldsMapping[item]}
                                />
                                <div className={classNames("valid-feedback")}>
                                    { validFieldsMapping[item] }
                                </div>
                                <div className={classNames("invalid-feedback")}>
                                    { invalidFieldsMapping[item] }
                                </div>
                            </>
                        ) : (
                            <>
                                <input
                                    name={item}
                                    type={(item === "quantity") ? "number" : "text"}
                                    className={classNames(
                                    "form-control",
                                        "form-group__input",
                                        {
                                            "is-valid": isValid[item],
                                            "is-invalid": !isValid[item],
                                            "is-active-switch": activeSwitch
                                        }
                                    )}
                                    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 FormEntryOrder;