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

frontend/src/components/Modals/EditBlockModal.js
82 строки4 KB
Krams
first_commit
08 июн 2025, 12:17
08 июн 2025, 12:1725d7395
// Импорты
import React from 'react';
import { Modal, Form, Button, Dropdown} from 'react-bootstrap';
import stateColors from '../../utils/stateFormatter';
import ColorDot from '../ColorDot';

// Вспомогательная функция для форматирования строки
function capitalizeFirstLetter(str) {
    if (!str) return "";
    return str.charAt(0).toUpperCase() + str.slice(1);
}

// Модальное окно для редактирования блока
const EditBlockModal = ({ show, onClose, onSave, editState, editComment, onChange }) => {
    console.log(editState, editComment);

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

            <Modal.Body>
                <Form>
                    {/* Выбор состояния блока */}
                    <Form.Group className="mb-3">
                        <Form.Label>Состояние</Form.Label>
                        <Dropdown>
                            <Dropdown.Toggle
                                variant="secondary"
                                id="dropdown-state"
                                style={{
                                    backgroundColor: '#343a40',
                                    borderColor: '#6c757d',
                                    color: editState ? '#fff' : '#aaa',
                                    display: 'flex',
                                    alignItems: 'center',
                                    gap: '8px',
                                }}
                            >
                                {editState && <ColorDot color={stateColors[editState]} />}
                                {editState || "Выберите состояние"}
                            </Dropdown.Toggle>

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

                    {/* Поле для комментария */}
                    <Form.Group className="mb-3">
                        <Form.Label>Комментарий</Form.Label>
                        <Form.Control
                            type="text"
                            value={editComment}
                            onChange={(e) => onChange('comment', e.target.value)}
                            className="bg-dark text-light border-secondary"
                        />
                    </Form.Group>
                </Form>
            </Modal.Body>

            <Modal.Footer>
                <Button variant="secondary" onClick={onClose}>Отмена</Button>
                <Button variant="primary" onClick={onSave}>Сохранить</Button>
            </Modal.Footer>
        </Modal>
    );
}

export default EditBlockModal;