Untitled

import React from 'react';
import { connect } from 'react-redux';
import { Tooltip } from '@mui/material';
import { AdminModal, FormSelect, TableCell, renderTable, FormTextBox } from 'view/component/AdminPage';
import { SelectAdapter_LoaiDiem } from 'modules/mdSauDaiHoc/sdhDmLoaiDiem/redux';


// const dataDiemLamTron = ['0.1', '0.01', '0.5'];
class AdjustThanhPhanDiem extends AdminModal {
    state = { listDiem: [] }

    diem = {};
    // loaiLamTron = {}
    mapperKey = {
        'Backspace': '',
        'Delete': '',
        'End': '',
        'PageDown': '',
        'PageUp': '',
        'Home': '',
        'ArrowLeft': '',
        'ArrowRight': '',
    }


    componentDidMount() {
        this.onHidden(() => {
            this.diem = {};
            this.setState({ listDiem: [] });
        });
    }

    onShow = (item) => {
        let dataConfigHocPhan = item ? item.dataConfigHocPhan : [];
        this.setState({ listDiem: dataConfigHocPhan }, () => {
            let loaiDiem = dataConfigHocPhan.map(e => e.loaiThanhPhan);
            this.loaiDiem.value(loaiDiem);
            for (let diem of dataConfigHocPhan) {
                this.diem[diem.loaiThanhPhan].value(diem.phanTram);
                // this.loaiLamTron[diem.loaiThanhPhan].value(diem.loaiLamTron);
            }
        });
    }

    onSubmit = () => {
        let { listDiem } = this.state;
        if (listDiem.some(i => i.phanTram == null || i.phanTram == '')) {
            T.notify('Vui lòng điền đầy đủ dữ liệu phần trăm điểm!', 'danger');
            return;
        }

        for (const tp of listDiem) {
            const { phanTram, phanTramMax, phanTramMin, tenThanhPhan } = tp;
            if (parseInt(phanTramMax) < phanTram || parseInt(phanTramMin) > phanTram) {
                T.notify(`Phần trăm điểm của thành phần ${tenThanhPhan} vượt quá khoảng quy định!`, 'danger');
                return;
            }
        }

        let sum = listDiem.reduce((x, y) => { return x + y.phanTram; }, 0);
        if (sum != 100) {
            T.notify('Tổng phần trăm điểm phải là 100%', 'danger');
            return;
        }
        T.alert('Cập nhật thành công!', 'success', false, 500);

        // T.alert('Đang cập nhật thành phần điểm!', 'warning', false, null, true);
        // this.props.UpdateThanhPhanDiem(this.props.dataHocPhan, listDiem, () => {
        //     this.hide();
        //     this.props.setData([this.props.dataHocPhan], () => T.alert('Cập nhật thành công!', 'success', false, 500));
        // });
    }

    handleLoaiDiem = (value) => {
        if (value) {
            let { listDiem } = this.state;
            if (value.selected) {
                let thanhPhan = this.props.dataConfigHocPhan.find(i => i.loaiThanhPhan == value.id);
                let data = {
                    loaiThanhPhan: value.id,
                    tenThanhPhan: value.text,
                    phanTram: '',
                    // loaiLamTron: 0.5,
                    phanTramMax: thanhPhan?.phanTramMax || 100,
                    phanTramMin: thanhPhan?.phanTramMin || 0,
                };
                listDiem.push(data);
            } else listDiem = listDiem.filter(e => e.loaiThanhPhan != value.id);
            this.setState({ listDiem });
        }
    }

    handleChange = (value, item) => {
        let { listDiem } = this.state;
        let index = listDiem.findIndex(tp => tp.loaiThanhPhan == item.loaiThanhPhan);
        listDiem[index].phanTram = value;
        this.setState({ listDiem });
    }

    loaiDiemConfigTable = (list) => {
        return renderTable({
            getDataSource: () => list,
            header: 'thead-light',
            emptyTable: '',
            renderHead: () => (
                <tr>
                    <th style={{ width: 'auto', textAlign: 'center', }}>#</th>
                    <th style={{ width: '20%', textAlign: 'center', whiteSpace: 'nowrap' }}>Mã</th>
                    <th style={{ width: '50%', textAlign: 'center', whiteSpace: 'nowrap' }}>Tên thành phần điểm</th>
                    <th style={{ width: 'auto', textAlign: 'center', whiteSpace: 'nowrap' }}>Khoảng phần trăm cho phép</th>
                    <th style={{ width: '30%', textAlign: 'center', whiteSpace: 'nowrap' }}>Phần trăm</th>
                    {/* <th style={{ width: 'auto', textAlign: 'center', whiteSpace: 'nowrap' }}>Loại làm tròn</th> */}
                </tr>
            ),
            renderRow: (item, index) => {
                return <tr key={index}>
                    <TableCell style={{ textAlign: 'right' }} content={index + 1} />
                    <TableCell content={item.loaiThanhPhan} />
                    <TableCell content={item.tenThanhPhan} />
                    <TableCell style={{ width: 'auto%', whiteSpace: 'nowrap' }} content={`Từ ${item.phanTramMin ? item.phanTramMin : '0'}% đến ${item.phanTramMax ? item.phanTramMax : '0'}%`} />
                    <TableCell style={{ textAlign: 'center' }} content={<FormTextBox style={{ marginBottom: '0' }} ref={e => this.diem[item.loaiThanhPhan] = e} placeholder='Phần trăm' required allowNegative={false} onChange={e => this.handleChange(e, item)} value={item.phanTram} onKeyDown={e => {
                        const diem = this.diem[item.loaiThanhPhan].value() || '';
                        if (e.code == 'ArrowDown' || e.code == 'Enter' || e.code == 'NumPadEnter') {
                            e.preventDefault();
                            if (index + 1 < list.length) {
                                this.diem[list[index + 1].loaiThanhPhan].focus();
                            }
                            else {
                                this.diem[list[0].loaiThanhPhan].focus();
                            }
                        }
                        else if (e.code == 'ArrowUp' || e.code == 'Enter' || e.code == 'NumPadEnter') {
                            e.preventDefault();
                            if (index - 1 >= 0) {
                                this.diem[list[index - 1].loaiThanhPhan].focus();
                            }
                            else {
                                this.diem[list[list.length - 1].loaiThanhPhan].focus();
                            }
                        }
                        else if (e.code in this.mapperKey) {
                            //
                        }
                        else if (!(/^[0-9]{1,3}?$/).test((`${diem}${e.key}`))) return e.preventDefault();
                    }} />} />
                    {/* <TableCell content={<FormSelect ref={e => this.loaiLamTron[item.loaiThanhPhan] = e} data={dataDiemLamTron} className='mb-0' onChange={(value) => item.loaiLamTron = value.id} required />} /> */}
                </tr>;
            }
        });
    }

    render = () => {
        let { listDiem } = this.state;
        // { namHoc, hocKy } = this.props.dataHocPhan || { namHoc: '', hocKy: '' };

        return this.renderModal({
            title: 'Cấu hình thành phần điểm',
            size: 'large',
            body: <div>
                <FormSelect className='col-md-12' ref={e => this.loaiDiem = e} data={SelectAdapter_LoaiDiem} multiple label='Thành phần điểm' onChange={this.handleLoaiDiem} required />

                <div className='col-md-12'>
                    {this.loaiDiemConfigTable(listDiem)}
                    <Tooltip title='Sao chép cấu hình điểm môn học' arrow placement='top'>
                        <button style={{ height: 'fit-content', float: 'right', display: listDiem.length ? 'none' : '' }} className='btn btn-success mb-2' type='button'
                            onClick={() => {
                                T.alert('Sao chép cấu hình điểm thành công', 'success', false, 500);
                            }}>
                            <i className='fa fa-fw fa-lg fa-cogs' /> Sao chép CHĐ
                        </button>
                    </Tooltip>

                </div>
            </div>,
        });
    }
}

const mapStateToProps = state => ({ system: state.system, });
const mapActionsToProps = {

};
export default connect(mapStateToProps, mapActionsToProps, null, { forwardRef: true })(AdjustThanhPhanDiem);