Untitled

import React from 'react';
import { Link } from 'react-router-dom';
import { AdminModal, AdminPage, FormCheckbox, FormRichTextBox, FormSelect, FormTextBox, TableCell, TableHead, getValue, renderDataTable } from 'view/component/AdminPage';
import { SelectAdapter_FwSinhVienSDH, createSdhDeTai, getDeTaiPage } from './redux';
import { connect } from 'react-redux';
import Pagination from 'view/component/Pagination';
import { SelectAdapter_FwCanBoGiangVien } from 'modules/mdTccb/tccbCanBo/redux';
import { FormChildren } from '../sdhTsThiSinhHoSo/FormChildren';

class EditModal extends AdminModal {
    // componentDidMount() {
    //     this.onShown(() => {
    //         this.tenDeTai.focus();
    //     });
    // }
    state = { data: {}, listCbhd: [] }
    selectVaiTro = [{ id: 'Cán bộ hướng dẫn chính', text: 'Cán bộ hướng dẫn chính' }, { id: 'Cán bộ hướng dẫn phụ', text: 'Cán bộ hướng dẫn phụ' }, { id: 'Cán bộ hướng dẫn độc lập', text: 'Cán bộ hướng dẫn độc lập' }, { id: 'Đồng hướng dẫn', text: 'Đồng hướng dẫn' }];
    onShow = (item) => {
        console.log(item, 'cshiuj');
        console.log(this.mssv?.value(item.mssv ?? ''), 'ggg');
        let { id, tenDeTai, ghiChu, noiDung, mssv, soQuyetDinh, tenSqd } = item ? item : { id: '', tenDeTai: '', ghiChu: '', noiDung: '', mssv: '', soQuyetDinh: this.props.newSoQuyetDinh + 1, tenSqd: '' };
        this.setState({ id }, () => {
            this.tenDeTai?.value(tenDeTai ?? '');
            this.mssv?.value(mssv ?? '');
            this.ghiChu?.value(ghiChu ?? '');
            this.noiDung?.value(noiDung ?? '');
            this.soQuyetDinh?.value(soQuyetDinh + 1 ?? '');
            this.tenSqd?.value(tenSqd ?? '');
        });
    }
    onSubmit = (e) => {
        e.preventDefault();
        console.log(this.state.listCbhd, 'ssssss');
        console.log(getValue(this.tenDeTai), 'tendetai');
        console.log(getValue(this.mssv), 'mssv');
        console.log(getValue(this.ghiChu), 'ghichu');
        console.log(getValue(this.noiDung), 'noidung');
        console.log(getValue(this.soQuyetDinh), 'soquyetdinh');
        console.log(getValue(this.tenSqd), 'tenSqd');

        let changes = {
            tenDeTai: getValue(this.tenDeTai),
            mssv: getValue(this.mssv),
            ghiChu: getValue(this.ghiChu),
            noiDung: getValue(this.noiDung),
            soQuyetDinh: getValue(this.soQuyetDinh),
            tenSqd: getValue(this.tenSqd),
            cbhd: getValue(this.state.listCbhd)
        };
        console.log(changes, 'changes');
        if (this.state.id) {
            changes = { ...changes, mode: 1 };
            // update
            this.props.create(this.state.id, changes, this.hide);
        } else {
            changes = { ...changes, mode: 0 };
            this.props.create(null, changes, this.hide);
        }

    }

    handleCbhd = (idCbhd, action) => {
        const [ghiChu, vaiTro, shcc] = [
            this['ghiChuCbhd' + idCbhd].value() || '',
            this['vaiTro' + idCbhd]?.value() || '',
            this['shcc' + idCbhd]?.value() || '',
        ];
        let condition = (vaiTro && shcc) || ghiChu;
        if (!condition) {
            T.notify('Vui lòng điền đầy đủ thông tin người hướng dẫn');
            return;
        }
        let changes = {
            idThiSinh: this.props.idThiSinh,
            hoTen: ghiChu?.split('. ').join(' ').split(' - ')[0]?.trim() || '',
            vaiTro: vaiTro || ghiChu?.split('.').join(' ').split(' - ')[1]?.trim() || '',
            shcc: shcc || ''
        };
        let another = this.state.listCbhd.find(({ id }) => id != idCbhd);
        if (another && another.shcc && another.shcc == changes.shcc) {
            T.notify('Không thể đăng ký một cán bộ hướng dẫn hai lần', 'danger');
            return;
        }
        else {
            let struct = { dataDeTai: { dataCbhd: { ...changes } } };
            action == 'update' ? this.props.updateThiSinh(idCbhd, struct) : '';
        }
    }
    handleTempCbhd = () => {
        const [ghiChu, vaiTro, shcc] = [
            this['ghiChuCbhdTemp']?.value(),
            this['vaiTroTemp']?.value(),
            this['shccTemp']?.value()
        ];
        let condition = ghiChu || (vaiTro && shcc);
        let newData = {
            // idThiSinh: this.props.idThiSinh,
            // hoTen: ghiChu && ghiChu?.split('. ').join(' ').split(' - ')[0]?.trim(),
            vaiTro: vaiTro || ghiChu && ghiChu?.split('.').join(' ').split(' - ')[1]?.trim(),
            shcc
        };
        console.log(newData, 'newdata');
        // this.setState(prevState => ({
        //     listCbhd: [
        //         ...prevState.listCbhd,
        //         newData
        //     ]
        // }));
        this.setState(prevState => ({
            listCbhd: [
                ...prevState.listCbhd,
                newData
            ]
        }), () => {

            console.log(this.state.listCbhd, 'datatest');
        });
        // console.log(this.state.listCbhd, 'datatest');
        if (!condition) {
            T.notify('Vui lòng điền đầy đủ thông tin người hướng dẫn');
            return;
        } else {
            const curCbhd = this.state.listCbhd;
            if (curCbhd.length) {
                if (curCbhd.find(i => i.shcc == newData.shcc)) {
                    T.notify('Không thể đăng ký một cán bộ hướng dẫn hai lần', 'danger');
                    return;
                }
            }
            // const changes = { dataDeTai: { dataCbhd: newData } };
            // console.log('1');
            // this.props.updateThiSinh('Temp', changes, () => this.getData());
        }
    }
    // setVal = (data) => {
    //     const { tenDeTai, listCbhd } = data;
    //     this.tenDeTai?.value(tenDeTai);
    //     if (listCbhd.length)
    //         for (const cbhd of listCbhd) {
    //             let idCbhd = cbhd.id;
    //             for (const key in cbhd) {
    //                 if (key == 'shcc' && !cbhd[key]) {
    //                     this['ghiChuCbhd' + idCbhd].value(`${cbhd.hoTen} - ${cbhd.vaiTro}`);
    //                     break;
    //                 }
    //                 this[key + idCbhd]?.value(cbhd[key] || '');
    //             }
    //         }
    // }
    renderCbhdForm = () => {
        const { data } = this.state;
        console.log(data, 'req');
        const dataCbhd = this.state.listCbhd || [];
        const readOnly = this.props.readOnly;
        const formOld = (idCbhd, cbhd) => {
            console.log({ idCbhd, cbhd }, 'formOld');
            return (
                <div className='row'>
                    <h5 className='tile-sub col-md-12' style={{ marginBottom: '5px' }}>Thông tin nguời hướng dẫn</h5><br />
                    <strong className='col-md-12 text-danger' style={{ paddingLeft: 15 }}>Trường hợp không tìm thấy cán bộ hướng dẫn (CBHD) hoặc CBHD là cán bộ ngoài trường, vui lòng nhập ở ghi chú theo mẫu</strong><br />
                    <FormSelect ref={e => this['shcc' + idCbhd] = e} label='Cán bộ hướng dẫn' data={SelectAdapter_FwCanBoGiangVien} className='col-md-6' allowClear readOnly={readOnly} value={cbhd?.shcc} />
                    <FormSelect ref={e => this['vaiTro' + idCbhd] = e} label='Vai trò' data={this.selectVaiTro} className='col-md-6' readOnly={readOnly} allowClear value={cbhd?.vaiTro} />
                    <FormRichTextBox ref={e => this['ghiChuCbhd' + idCbhd] = e} maxLength={1999} label='Ghi chú' placeholder='<Chức danh cao nhất> <Học vị cao nhất> <Họ và tên> - <Vai trò>. Vd: PGS TS Nguyễn Văn A - Cán bộ hướng dẫn chính' className='col-md-12' readOnly={readOnly} value={cbhd?.hoTen} />
                    {readOnly ? '' : <div className='col-md-12 d-flex justify-content-end' style={{ marginTop: 15, marginBottom: 15 }}>
                        <button type='button' className='btn btn-success rounded-0' onClick={(e) => e.preventDefault() || this.handleCbhd(idCbhd, 'update')}>
                            <i className='fa fa-fw fa-lg fa-save' />Lưu
                        </button>
                        <button type='button' className='btn btn-danger rounded-0' onClick={(e) => e.preventDefault() || this.handleCbhd(idCbhd, 'delete')}>
                            <i className='fa fa-fw fa-lg fa-trash' />Xoá
                        </button>
                    </div>}
                </div>
            );
        };
        const formNew = () => {
            let idCbhd = 'Temp';
            return <div className='row'>
                <FormSelect ref={e => this['shcc' + idCbhd] = e} label='Cán bộ hướng dẫn' data={SelectAdapter_FwCanBoGiangVien} className='col-md-6' allowClear readOnly={false} />
                <FormSelect ref={e => this['vaiTro' + idCbhd] = e} label='Vai trò' data={this.selectVaiTro} className='col-md-6' readOnly={false} allowClear />
                <FormRichTextBox ref={e => this['ghiChuCbhd' + idCbhd] = e} maxLength={1999} label='Ghi chú' placeholder='<Chức danh cao nhất> <Học vị cao nhất> <Họ và tên> - <Vai trò>. Vd: PGS TS Nguyễn Văn A - Cán bộ hướng dẫn chính' className='col-md-12' readOnly={false} />
                <div className='col-md-12 d-flex justify-content-center' style={{ marginTop: 15 }}>
                    <button type='button' className='btn btn-success rounded-0' onClick={(e) => e.preventDefault() || this.handleTempCbhd(idCbhd)}>
                        <i className='fa fa-fw fa-lg fa-plus' />Lưu người hướng dẫn
                    </button>
                </div>
            </div>;
        };
        if (dataCbhd.length == 0) {
            return <div className='col-md-12' style={{ marginTop: 5 }}>
                {!readOnly ? <div className='tile'>
                    <h5 className='text-primary' style={{ color: 'green' }}>Thêm mới người hướng dẫn</h5>
                    {formNew()}
                </div> : ''}</div>;
        }
        else if (dataCbhd.length == 1) {
            return <div className='col-md-12' style={{ marginTop: 5 }}>
                <FormChildren title='Chỉnh sửa người hướng dẫn' className='tile' titleClassName='tile-title' titleSize='h5' titleStyle={{ color: 'orange' }} content={formOld(dataCbhd[0].id, dataCbhd[0])} />
                {!readOnly ? <FormChildren title='Thêm mới người hướng dẫn' className='tile' titleClassName='tile-title' titleSize='h5' titleStyle={{ color: 'green' }} content={formNew(this.temp)} /> : ''}
            </div>;
        } else {
            return <div className='col-md-12' style={{ marginTop: 5 }}>
                <div className='tile'>
                    <h5 style={{ color: 'orange' }}>Chỉnh sửa người hướng dẫn</h5>
                    {dataCbhd.map(i => formOld(i.id))}
                </div>
            </div>;
        }
    }
    render = () => {
        console.log(this.state.id);
        console.log(this.mssv, 'mssv');
        const readOnly = this.props.readOnly;
        return this.renderModal({
            title: this.state.id ? 'Cập nhật đề tài' : 'Tạo mới đề tài',
            size: 'large',
            body: <div className='row'>
                <FormTextBox className='col-md-8' ref={e => this.tenSqd = e} label='Mô tả quyết định' placeholder={this.state.id ? '' : 'Duyệt đề tài'} readOnly={readOnly} disabled={!this.state.id} />
                <FormTextBox className='col-md-4' ref={e => this.soQuyetDinh = e} label='Số quyết định' readOnly={readOnly} />
                <FormTextBox className='col-md-12' ref={e => this.tenDeTai = e} label='Tên đề tài' readOnly={readOnly} />
                <FormRichTextBox className='col-md-12' ref={e => this.ghiChu = e} label='Ghi chú đề tài' readOnly={readOnly} />
                <FormRichTextBox className='col-md-12' ref={e => this.noiDung = e} label='Nội dung đề tài' readOnly={readOnly} />
                {this.renderCbhdForm()}
            </div>
        });
    };
}
class sdhDeTai extends AdminPage {
    state = { filter: {}, isKeySearch: false, isCoDinh: false, isFixCol: false };
    componentDidMount() {
        T.ready('/user/sau-dai-hoc', () => {
            this.getPage();
        });
    }
    onEdit = (e, item) => {
        e.preventDefault();
        console.log(item);
        this.modal.show(item);
    }
    handleKeySearch = (data, pageNumber, pageSize, pageCondition) => {
        this.setState({ filter: { ...this.state.filter, [data.split(':')[0]]: data.split(':')[1] } }, () => {
            console.log(this.state.filter, 'filter2');
            this.getPage(pageNumber, pageSize, pageCondition);
        });
    }

    getPage = (pageN, pageS, pageC) => {
        let filter = { ...this.state.filter };
        console.log(filter, 'filter');
        this.props.getDeTaiPage(pageN, pageS, pageC, filter);
    }
    render() {
        const permission = this.getUserPermission('sdhDeTai');
        console.log(this.props.sdhDeTai, 'sdsdcdcdcdcd');
        const { pageNumber, pageSize, pageTotal, totalItem, pageCondition, newestSoQuyetDinh, list } = this.props.sdhDeTai?.page || { pageNumber: 1, pageSize: 25, pageTotal: 0, totalItem: 0, pageCondition: '', newestSoQuyetDinh: '', list: [] };
        const onKeySearch = this.state.isKeySearch ? this.handleKeySearch : null;
        console.log(list, 'sdsdsds');
        let table = renderDataTable({
            className: this.state.isFixCol ? 'dsts table-fix-col' : 'dsts',
            data: list,
            getDataSource: () => list,
            stickyHead: this.state.isCoDinh,
            header: 'thead-light',
            empty: 'Chưa có dữ liệu',
            renderHead: () => (
                <tr>
                    <th style={{ width: 'auto', verticalAlign: 'middle' }} >#</th>
                    <TableHead keyCol='mssv' content='MSSV' style={{ minWidth: '50px', whiteSpace: 'nowrap' }} onKeySearch={onKeySearch} />
                    <TableHead keyCol='hoTenSinhVien' content='Tên sinh viên' style={{ minWidth: '150px', whiteSpace: 'nowrap' }} onKeySearch={onKeySearch} />
                    <TableHead keyCol='tenDeTai' content='Tên đề tài' style={{ minWidth: '260px', whiteSpace: 'nowrap' }} onKeySearch={onKeySearch} />
                    <TableHead style={{ minWidth: '50px', verticalAlign: 'middle' }} content='Số quyết định' />
                    <TableHead content='Mã CBHD1' style={{ minWidth: '80px', whiteSpace: 'nowrap', textAlign: 'center', verticalAlign: 'middle' }} />
                    <TableHead content='Tên CBHD1' style={{ minWidth: '170px', whiteSpace: 'nowrap', textAlign: 'center', verticalAlign: 'middle' }} />
                    <TableHead content='Mã CBHD2' style={{ minWidth: '50px', whiteSpace: 'nowrap', textAlign: 'center', verticalAlign: 'middle' }} />
                    <TableHead content='Tên CBHD2' style={{ minWidth: '170px', whiteSpace: 'nowrap', textAlign: 'center', verticalAlign: 'middle' }} />
                    <TableHead style={{ width: 'auto', whiteSpace: 'nowrap', verticalAlign: 'middle' }} content='Thao tác' />
                </tr>
            ),
            renderRow: (item, index) => (
                <tr key={index}>
                    <TableCell content={(pageNumber - 1) * pageSize + index + 1} />
                    <TableCell content={item.mssv ?? ''} />
                    <TableCell content={item.hoTenSinhVien ?? ''} />
                    <TableCell type='link' onClick={() => this.modal.show(item)} content={item.tenDeTai ?? ''} permission={permission} />
                    <TableCell content={item.soQuyetDinh ?? ''} />
                    <TableCell content={item.canBo[0]?.MSCB ?? ''} />
                    <TableCell content={item.canBo[0]?.hoTenCanBo ?? ''} />
                    <TableCell content={item.canBo[1]?.MSCB ?? ''} />
                    <TableCell content={item.canBo[1]?.hoTenCanBo ?? ''} />
                    <TableCell type='buttons' permission={{ ...permission }} onEdit={(e) => this.onEdit(e, item)} />
                </tr>
            )
        });
        return this.renderPage({
            icon: 'fa fa-list',
            title: 'Danh mục cấu trúc khung đào tạo',
            breadcrumb: [
                <Link key={1} to='/user/sau-dai-hoc'>Sau đại học</Link>,
                'Quản lý đề tài'
            ],
            content: <div className='p-2' style={{ background: 'white' }}>
                <div className='d-flex justify-content-between align-items-center'>
                    <div style={{ gap: 10, display: 'inline-flex', width: '800px' }}>
                        <FormCheckbox label='Tìm theo cột' onChange={value => this.setState({ isKeySearch: value })} ref={e => this.isKeySearch = e} style={{ marginBottom: '0' }} />
                        <FormCheckbox label='Cố định bảng' onChange={value => this.setState({ isCoDinh: value })} ref={e => this.isCoDinh = e} style={{ marginBottom: '0' }} />
                        <FormCheckbox label='Thao tác nhanh' onChange={value => this.setState({ isFixCol: value })} ref={e => this.isFixCol = e} style={{ marginBottom: '0' }} />
                    </div>
                    <Pagination style={{ position: 'unset', justifyContent: 'end', marginBottom: '1rem' }} {...{ pageNumber, pageSize, pageTotal, totalItem, pageCondition }}
                        getPage={this.getPage} />
                </div>

                <div className='tile'>{table}</div>
                <EditModal ref={e => this.modal = e} readOnly={!permission.write} create={this.props.createSdhDeTai} newSoQuyetDinh={newestSoQuyetDinh} />
            </div>,
            backRoute: '/user/sau-dai-hoc/topic-program',
            collapse: [
                { icon: 'fa-plus-square', name: 'Tạo công trình cán bộ hướng dẫn', permission: permission.write, onClick: e => e.preventDefault() || this.modal.show(), type: 'info' },
                // { icon: 'fa-cloud-upload', name: 'Import công trình cán bộ hướng dẫn', permission: permission.write, onClick: e => e.preventDefault() || this.uploadModal.show(), type: 'warning' },
                // { icon: 'fa-file-text', name: 'Export công trình cán bộ hướng dẫn', permission: permission.export || permission.write, onClick: e => e.preventDefault() || this.exportCongTrinhCBHD(), type: 'danger' },
                // { icon: 'fa-print', name: 'Export TuyenSinh', permission: permission.export || permission.write, onClick: e => e.preventDefault() || this.exportDSTuyenSinh(), type: 'primary' }
            ],

        });
    }
}


const mapStateToProps = state => ({ system: state.system, sdhDeTai: state.sdh.sdhDeTai });
const mapActionsToProps = { getDeTaiPage, createSdhDeTai };
export default connect(mapStateToProps, mapActionsToProps)(sdhDeTai);