frontend/src/components/Modals/EditNodesModal.js - master - Krams/nodemon

frontend/src/components/Modals/EditNodesModal.js
103 строки4 KB
Krams
first_commit
08 июн 2025, 12:17
08 июн 2025, 12:1725d7395
// Модальное окно для массового изменения состояния узлов в списке
import { useDispatch, useSelector } from 'react-redux';
import { updateNodesInListThunk } from '../../features/nodes/nodeThunks';
import { Modal, Form, Button, Dropdown } from 'react-bootstrap';
import { useState } from 'react';
import ColorDot from '../ColorDot';
import stateColors from '../../utils/stateFormatter';

const EditNodesModal = ({ show, onClose, onSave }) => {
    // Redux хуки и состояние
    const dispatch = useDispatch();
    const { 
        selectedNodes,
        nodes,
        loading: loadingNodes,
        editListMode,
        selectionMode,
        listId 
    } = useSelector(state => state.nodes);

    const [state, setState] = useState('Работает');

    // Обработчик сохранения изменений
    const handleSave = () => {
        const data = {
            listId,
            state: state
        }
        dispatch(updateNodesInListThunk(data));
        onSave();
    }

    return (
        <Modal data-bs-theme="dark" show={show} onHide={onClose}>
            <Modal.Header closeButton>
                <Modal.Title>Редактирование узлов</Modal.Title>
            </Modal.Header>

            <Modal.Body>
                <Form>
                    <Form.Group className="mb-3">
                        <Form.Label>
                            Состояние для выбранных узлов ({selectedNodes.length})
                        </Form.Label>

                        {/* Выпадающий список для выбора состояния */}
                        <Dropdown>
                            <Dropdown.Toggle
                                variant="secondary"
                                id="dropdown-state"
                                style={{
                                    backgroundColor: '#343a40',
                                    borderColor: '#6c757d',
                                    color: '#fff',
                                    display: 'flex',
                                    alignItems: 'center',
                                    gap: '8px',
                                }}
                            >
                                <ColorDot color={stateColors[state]} />
                                {state || "Выберите новое состояние"}
                            </Dropdown.Toggle>

                            <Dropdown.Menu style={{ backgroundColor: '#343a40' }}>
                                {Object.entries(stateColors).map(([stateKey, color]) => (
                                    <Dropdown.Item
                                        key={stateKey}
                                        onClick={() => setState(stateKey)}
                                        active={state === stateKey}
                                        style={{ 
                                            display: 'flex', 
                                            alignItems: 'center', 
                                            gap: '8px', 
                                            color: '#fff' 
                                        }}
                                    >
                                        <ColorDot color={color} />
                                        {stateKey}
                                    </Dropdown.Item>
                                ))}
                            </Dropdown.Menu>
                        </Dropdown>

                        <Form.Text className="text-muted">
                            Выбранное состояние будет применено ко всем {selectedNodes.length} выбранным узлам
                        </Form.Text>
                    </Form.Group>
                </Form>
            </Modal.Body>

            <Modal.Footer>
                <Button variant="secondary" onClick={onClose}>
                    Закрыть
                </Button>
                <Button variant="primary" onClick={handleSave}>
                    Сохранить
                </Button>
            </Modal.Footer>
        </Modal>
    )
}

export default EditNodesModal;