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

src/components/forms/FormEntrySale/FormEntrySale.jsx
309 строк15 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 { formSalesMapping } from "./formSalesMapping.js";
// Подключаем объект отображения невалидных полей формы
import { invalidFieldsMapping } from "./invalidFieldsMapping.js";
// Подключаем объект отображения валидных полей формы
import { validFieldsMapping } from "./validFieldsMapping.js";
// Подключаем объект отображения обязательных полей формы
import { requiredFieldsMapping } from "./requiredFieldsMapping.js";

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

const FormEntrySale = memo(({ sales }) => {
    // Создаем состояние для отслеживания изменений полей ввода
    const [isValid, setIsValid] = useState({});
    // Состояние отслеживания изменений в поле ввода
    const [inputValue, setInputValue] = useState({});

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

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

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

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

        // Обновляем состояние поля ввода учитывая предыдущее
        setInputValue(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 formProps = {
        visible: {
            activeSwitch,
            isEditing
        },
        functions: {
            setActiveSwitch,
            setIsEditing
        }
    };

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

                // Отображаем список множественного выбора для категорий
                if (item === "category") {
                    return (
                        <div
                            key={`${item.orderId}-${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={formSalesMapping[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>
                                ) : (
                                    <>
                                        {formSalesMapping[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={inputValue[item]}
                                onChange={handleInputChange}
                                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>
                            </select>
                            <div className={classNames("valid-feedback")}>
                                {validFieldsMapping[item]}
                            </div>
                            <div className={classNames("invalid-feedback")}>
                                {invalidFieldsMapping[item]}
                            </div>
                        </div>
                    );
                }

                return (
                    <div
                        key={`${item.orderId}-${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={formSalesMapping[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>
                            ) : (
                                <>
                                    { formSalesMapping[item] }
                                </>
                            )}

                        </label>
                        {item === "date" ? (
                            <>
                                <input
                                    type="date"
                                    name={item}
                                    className={classNames(
                                    "form-control",
                                        "form-group__input",
                                        {
                                            "is-valid": isValid[item],
                                            "is-invalid": !isValid[item],
                                            "is-active-switch": activeSwitch
                                        }
                                    )}
                                    value={inputValue[item]}
                                    onChange={handleInputChange}
                                    required={requiredFieldsMapping[item]}
                                />
                                <div className={classNames("valid-feedback")}>
                                    {validFieldsMapping[item]}
                                </div>
                                <div className={classNames("invalid-feedback")}>
                                    {invalidFieldsMapping[item]}
                                </div>
                            </>
                        ): (
                            <>
                                <input
                                    type={(item === "quantity" || item === "price") ? "number" : "text"}
                                    name={item}
                                    className={classNames(
                                    "form-control",
                                        "form-group__input",
                                        {
                                            "is-valid": isValid[item],
                                            "is-invalid": !isValid[item],
                                            "is-active-switch": activeSwitch
                                        }
                                     )}
                                    value={inputValue[item]}
                                    onChange={handleInputChange}
                                    required={requiredFieldsMapping[item]}
                                />
                                <div className={classNames("valid-feedback")}>
                                    {validFieldsMapping[item]}
                                </div>
                                <div className={classNames("invalid-feedback")}>
                                    {invalidFieldsMapping[item]}
                                </div>
                            </>
                        )}
                    </div>
                );
            })}
        </BaseForm>
    );
});

export default FormEntrySale;