src/added-tools/Lists/TaskList.jsx - master - DevDenzo/ERP

src/added-tools/Lists/TaskList.jsx
195 строк8 KB
Denis Sklyarskij
Инициализирован репозиторий
14 янв 2026, 23:32
14 янв 2026, 23:321df3d47
// Подключаем библиотеку React и хук состояния
import React, { useState } from 'react';
// Подключаем библиотеку шаблонных строк
import classNames from 'classnames';

// Подключаем генератор случайных ID
import { v4 } from 'uuid';

// Подключаем необходимые иконки bootstrap
import { Plus } from "react-bootstrap-icons";

// Подключаем стили
import '../../cores/styles/services/components/_task-list.less';

const TaskList = () => {
    // Состояние отображения формы ввода задачи
    const [showTask, setShowTask] = useState(false);

    // Состояние самого списка задач
    const [tasks, setTasks] = useState([]);

    // Состояния формы ввода задачи
    const [taskTitle, setTaskTitle] = useState(''); // заголовок задачи
    const [taskDescription, setTaskDescription] = useState(''); // описание задачи

    // Состояние для хранения дополнительного поля
    const [taskAdd, setTaskAdd] = useState('');

    // Создаем массив дополнительных полей
    const [taskAdds, setTaskAdds] = useState(Array(28).fill(''));

    // Состояния отображения ошибок

    // Состояние для отображения ошибки заголовка
    const [validTitle, setValidTitle] = useState(false);
    // Состояние для отображения ошибки описания
    const [validDescription, setValidDescription] = useState(false);

    // Обработчик изменения текста в поле ввода заголовка
    const handleTitleChange = (e) => {
        // Получаем текущее значение заголовка
        const value = e.target.value;
        // Если заголовок пустой
        if (value.trim() === '') {
            // Показываем ошибку заголовка
            setValidTitle(true);
        }
        // Отображаем значение заголовка
        setTaskTitle(e.target.value);
    };


    // Обработчик изменения полей с описанием
    const handleAddsTaskChange = (index, e) => {
        // Получаем текущее значение поля ввода описания
        const value = e.target.value;
        // Если поле ввода описания пустое
        if (value.trim() === '') {
            // Показываем ошибку описания задачи
            setValidDescription(true);
        } else {
            setValidDescription(false)
        }
        // Сохраняем элементы массива в переменную
        const newTaskAdds = [...taskAdds];
        // Находим элемент массива по индексу
        // сохраняем в него значение некоторого поля
        newTaskAdds[index] = value;

        // Если поле не пустое и это не последнее поле
        if (e.target.value && index < taskAdds.length - 1) {
            // Очищаем следующее поле если оно было заполнено
            newTaskAdds[index + 1] = '';
        }

        // Отображаем значение поля с описанием
        setTaskAdds(newTaskAdds);
    };

    // Обработчик добавления новой задачи
    const handleAddTask = () => {

        if (
            taskAdd.trim() === '' ||
            taskDescription.trim() === '' ||
            taskAdd.trim() === ''
        ) {
            const newTask = {
                id: v4(),
                title: taskTitle,
                description: taskDescription,
                added: taskAdd,
            };

            setTasks([...tasks, newTask]);

            // Очищаем поля ввода
            setTaskTitle('');
            setTaskDescription('');
            setTaskAdd(''); // Добавлена очистка taskAdd

            // Скрываем форму добавления задачи
            setShowTask(false);
        }
    };

    // Обработчик отображения формы добавления задачи
    const handleShowTask = (e) => {
        // Блокируем дальнейшее распространение события по DOM
        e.stopPropagation();
        // Показываем форму добавления задачи
        setShowTask(true);
    };

    return (
        <div className={classNames('task-list')}>
            {showTask && (
                <div className={classNames('task-list-header')}>
                    <button
                        type="button"
                        className={classNames('add-task-button')}
                        onClick={handleAddTask}
                    >
                        Отправить
                    </button>
                </div>
            )}
            <div
                className={classNames('task-list-content')}
                onClick={e => e.stopPropagation()}
            >
                {showTask && (
                    <div className={classNames('task-add-form')}>
                        <input
                            type="text"
                            className={classNames('form-control', 'task-input')}
                            value={taskTitle}
                            onChange={handleTitleChange}
                            placeholder="Название"
                        />
                        {validTitle && (
                            <label className={classNames('task-input-error')}>
                                Название задачи не должно быть пустым
                            </label>
                        )}
                        {taskAdds.map((value, index) => {
                            if (index === 0 || taskAdds[index - 1].trim() !== '') {
                                return (
                                    <>
                                        <input
                                            key={index}
                                            type="text"
                                            className={classNames('form-control', 'task-input')}
                                            value={value}
                                            onChange={e => handleAddsTaskChange(index, e)}
                                            placeholder="Добавить задачу"
                                        />
                                        {validDescription && (
                                            <label className={classNames('task-input-error')}>
                                                Описание задачи не должно быть пустым
                                            </label>
                                        )}
                                    </>
                                );
                            }
                        })}
                        <label className={classNames('tasks-total')}>
                            Можно добавить еще: {taskAdds.length - (taskAdds.filter(v => v.trim() !== '').length)}
                        </label>
                    </div>
                )}
                {!showTask && (
                    <button
                        type="button"
                        className={classNames('btn', 'btn-light', 'show-task-button')}
                        onClick={handleShowTask}
                    >
                        <Plus size={22} />
                    </button>
                )}
            </div>
            <ul className={classNames('task-items')}>
                {tasks.map((task) => (
                    <li key={task.id} className={classNames('task-item')}>
                        <h3>{task.title}</h3>
                        <p>{task.description}</p>
                        <p>{task.added}</p>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default TaskList;