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_FwCbhd, createSdhDeTai, getDeTaiPage, updateSdhDeTai } from './redux';
import { connect } from 'react-redux';
import Pagination from 'view/component/Pagination';
// import { SelectAdapter_FwCanBoGiangVien } from 'modules/mdTccb/tccbCanBo/redux';
import T from 'view/js/common';
import { SelectAdapter_FwVaiTroCbhd } from '../sdhVaiTroCanBoHuongDan/redux';
// import { FormChildren } from '../sdhTsThiSinhHoSo/FormChildren';


class EditCBHD extends React.Component {
    state = { data: {} }
    componentDidMount() {
        console.log(this.props, 'alllllllllll');
        this.shcc?.value(this.props.item?.shcc);
        this.vaiTro?.value(this.props.item?.vaiTro);
        this.ghiChu?.value(this.props.item?.ghiChu);
        this.hoTenCanBo?.value(this.props.item?.hoTenCanBo);
    }
    handleShccCbhd = (selectCbhd) => {
        // let { id, text } = selectCbhd;
        console.log(selectCbhd, 'selectCbhd');
        this.setState({ data: { ...this.state.data, shcc: selectCbhd?.shcc, belongTo: selectCbhd?.belongTo } });
        console.log(this.props.item, 'trtrtr', this.props, 'ssss');
        // this.props.onChange({ ...this.props.item, shcc: id });
        console.log(this.props.onChange, 'onChange');
    }

    handleVaiTroCbhd = (selectVaiTro) => {
        // let { id, text } = selectVaiTro;
        // this.props.onChange({ ...this.props.item, id });
        this.setState({ data: { ...this.state.data, vaiTro: selectVaiTro?.id } });
    }
    handleGhiChuCbhd = (ghiChu) => {
        console.log(ghiChu, 'ghiChu');
        const expectedFormat = /^[^\-]+ [^\-.]+ [^\-]+ - .+$/;
        if (!expectedFormat.test(ghiChu)) {
            T.notify('Định dạng ghi chú không đúng. Định dạng mong đợi: "<Chức danh cao nhất> <Học vị cao nhất> <Họ và tên> - <Vai trò>"', 'danger');
            return;
        }
        let hoTenCanBo = ghiChu?.split('. ').join(' ').split(' - ')[0]?.trim() || '';
        let vaiTro = vaiTro || ghiChu?.split('.').join(' ').split(' - ')[1]?.trim() || '';
        let shcc = shcc || '';
        this.setState({ data: { ...this.state.data, ghiChu: ghiChu, hoTenCanBo: hoTenCanBo, shcc: shcc, vaiTro: vaiTro } }, () => { console.log(this.state.data, 'data'); });
    }
    handleSubmit = (e) => {
        e.preventDefault();
        console.log(this.state.data, 'item', this.props.listCbhd, 'listCbhd');
        console.log(Object.keys(this.state.data).length, 'length1', this.props.listCbhd.length, 'length2');
        if (this.props.listCbhd.length == 1 || this.props.listCbhd.length == 2) {
            if (Object.keys(this.state.data).length == 0) {
                // T.notify('Đã cập nhật lại CBHD', 'success');
                T.notify('Bắt buộc phải có CBHD hoặc ghi Chú', 'danger');
                return;
            }
            else {
                if (this.props.listCbhd.length == 1) {
                    if (this.state.data.shcc) {
                        T.notify('Cập nhật thông tin CBHD thành công', 'success');
                        this.props.onSave(this.state.data);
                    }
                    else {
                        if (this.ghiChu.value()) {
                            this.handleGhiChuCbhd(this.ghiChu.value(), (updatedData) => {
                                this.props.onSave(updatedData);
                            });
                            T.notify('Cập nhật thông tin CBHD thành công', 'success');
                        }
                        else {
                            T.notify('Bắt buộc phải có CBHD hoặc ghi Chú', 'danger');
                            return;
                        }
                    }
                }
                else if (this.props.listCbhd.length == 2) {
                    if (this.state.data.shcc) {
                        const isDuplicate = this.props.listCbhd.some(cbhd => cbhd.shcc === this.state.data.shcc);
                        if (isDuplicate) {
                            T.notify('Không thể đăng kí 1 CBHD 2 lần', 'danger');
                            return;
                        }
                        T.notify('Cập nhật thông tin CBHD thành công', 'success');
                        this.props.onSave(this.state.data);
                    }
                    else {
                        if (this.ghiChu.value()) {
                            this.handleGhiChuCbhd(this.ghiChu.value(), (updatedData) => {
                                this.props.onSave(updatedData);
                                T.notify('Cập nhật thông tin CBHD thành công', 'success');
                            });
                        }
                        else {
                            T.notify('Bắt buộc phải có CBHD hoặc ghi Chú', 'danger');
                            return;
                        }
                    }
                }
            }
        }
        // const { listCbhd } = this.props;
        // const { data } = this.state;

        // if (listCbhd.length === 1 || listCbhd.length === 2) {
        //     if (data.length === 0) {
        //         T.notify('Bắt buộc phải có CBHD hoặc ghi Chú', 'danger');
        //         return;
        //     }

        //     const hasCbhd = !!data.shcc;
        //     const hasGhiChu = !!this.ghiChu.value();

        //     if (listCbhd.length === 1) {
        //         if (hasCbhd) {
        //             T.notify('Cập nhật thông tin CBHD thành công', 'success');
        //             this.props.onSave(data);
        //         } else if (hasGhiChu) {
        //             this.handleGhiChuCbhd(this.ghiChu.value(), (updatedData) => {
        //                 this.props.onSave(updatedData);
        //                 T.notify('Cập nhật thông tin CBHD thành công', 'success');
        //             });
        //         } else {
        //             T.notify('Bắt buộc phải có CBHD hoặc ghi Chú', 'danger');
        //         }
        //     } else if (listCbhd.length === 2) {
        //         if (hasCbhd) {
        //             const isDuplicate = listCbhd.some(cbhd => cbhd.shcc === data.shcc);
        //             if (isDuplicate) {
        //                 T.notify('Không thể đăng kí 1 CBHD 2 lần', 'danger');
        //             } else {
        //                 T.notify('Cập nhật thông tin CBHD thành công', 'success');
        //                 this.props.onSave(data);
        //             }
        //         } else if (hasGhiChu) {
        //             this.handleGhiChuCbhd(this.ghiChu.value(), (updatedData) => {
        //                 this.props.onSave(updatedData);
        //                 T.notify('Cập nhật thông tin CBHD thành công', 'success');
        //             });
        //         } else {
        //             T.notify('Bắt buộc phải có CBHD hoặc ghi Chú', 'danger');
        //         }
        //     }
        // }


    };
    render() {
        const { readOnly } = this.props;
        return <div className='row'>
            <FormSelect ref={e => this.shcc = e} label='Cán bộ hướng dẫn' data={SelectAdapter_FwCbhd} className='col-md-6' allowClear readOnly={false} onChange={this.handleShccCbhd} />
            <FormSelect ref={e => this.vaiTro = e} label='Vai trò' data={SelectAdapter_FwVaiTroCbhd} className='col-md-6' readOnly={false} allowClear onChange={this.handleVaiTroCbhd} />
            <FormRichTextBox ref={e => this.ghiChu = 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} />
            {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) => { this.handleSubmit(e); }}>
                    <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.props.onDelete(this.props.item)}>
                    <i className='fa fa-fw fa-lg fa-trash' />Xoá
                </button>
            </div>}
        </div>;
    }

}
class EditModal extends AdminModal {
    componentDidMount() {
        this.disabledClickOutside();
        this.onHidden(this.onHide);
    }
    onHide = () => {
        this.setState({ listCbhd: [] });
    }
    state = { data: {}, listCbhd: [], listCbhdTemp: [], flag: false }
    listRow = [];
    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');
        // let { canBo } = item ? item : { canBo: [] };
        // this.setState({ listCbhd: item.canBo });
        let { id, tenDeTai, ghiChu, noiDung, mssv, tenSqd, canBo } = item ? item : { id: '', tenDeTai: '', ghiChu: '', noiDung: '', mssv: '', tenSqd: '', canBo: [] };
        // canBo = item.canBo;
        console.log(canBo.length, 'canBo');
        if (canBo.length > 0) {
            const listCbhd = canBo.map(cb => ({ shcc: cb.MSCB, vaiTro: cb.vaiTro, ghiChu: '', hoTenCanBo: '' }));
            this.setState({ listCbhd });
        }
        this.setState({ id, mssv }, () => {
            this.tenDeTai?.value(tenDeTai ?? '');
            this.ghiChu?.value(ghiChu ?? '');
            this.noiDung?.value(noiDung ?? '');
            this.soQuyetDinh?.value(this.props.newSoQuyetDinh + 1 ?? '');
            this.tenSqd?.value(tenSqd ?? '');

        });
        console.log(this.state.mssv, 'scs');

    }
    handleCbhdChange = (index, updatedCbhd) => {
        let listCbhd = this.state.listCbhd;
        listCbhd = listCbhd.filter((item, idx) => idx == index ? false : true);
        listCbhd.push(updatedCbhd);
        this.setState({ listCbhd });
        // const listCbhd = [...this.state.listCbhd];
        // console.log(this.state.listCbhd, 'listCbhd2');
        // listCbhd[index] = updatedCbhd;
        // console.log(listCbhd, 'listCbhd3');
        // this.setState({ listCbhd });
        // const listCbhdTemp = updatedCbhd;
        // console.log(listCbhdTemp, 'listCbhdTemp');
        // this.setState({ listCbhdTemp });
        // console.log(this.state.listCbhdTemp, 'listCbhdTemp1');
        // const listCbhdTemp = [...this.state.listCbhdTemp];
        // console.log(this.state.listCbhdTemp, 'listCbhdTemp2');
        // listCbhdTemp[index] = updatedCbhd;
        // console.log(listCbhdTemp, 'listCbhdTemp3');
        // this.setState({ listCbhdTemp });
        // const { shcc, ghiChu, hoTenCanBo, vaiTro } = updatedCbhd;
        // if (shcc) {
        //     this.setState({ listCbhdTemp: shcc });
        // }
        // if (ghiCHu)
        //     this.setState({ listCbhdTemp: [...this.state.listCbhdTemp, updatedCbhd] }, () => console.log(this.state.listCbhd, 'listCbhd'));

    }
    // handleSubmit = (index) => {
    //     console.log(this.state.listCbhd, 'listCbhd1');
    //     const listCbhd = [...this.state.listCbhd];
    //     console.log(this.state.listCbhd, 'listCbhd2');
    //     listCbhd[index] = this.state.listCbhdTemp;
    //     console.log(listCbhd, 'listCbhd3');
    //     this.setState({ listCbhd });
    // }
    onSubmit = (e) => {
        e.preventDefault();
        let changes = {
            tenDeTai: getValue(this.tenDeTai),
            mssv: this.state.mssv,
            ghiChu: getValue(this.ghiChu),
            noiDung: getValue(this.noiDung),
            soQuyetDinh: getValue(this.soQuyetDinh),
            tenSqd: getValue(this.tenSqd),
            cbhd: this.state.listCbhd
        };
        if (this.state.id) {
            // update
            this.props.update(this.state.id, changes, () => {
                this.setState({ listCbhd: [] });
                this.hide();
            });
        } else {
            this.props.create(changes, () => {
                this.setState({ listCbhd: [] });
                this.hide();
            });
        }

    }

    createTempCbhd = () => {
        this.setState({ listCbhd: [...this.state.listCbhd, { shcc: '', vaiTro: '', ghiChu: '', hoTenCanBo: '' }] }, () => console.log(this.state.listCbhd, 'aaaaaaaaaaaa'));
        // console.log(this.state.listCbhd, 'listCbhdsdsd');
        // if (this.state.listCbhd.length > 1) {
        //     let { vaiTro, shcc, ghiChu } = this.state.listCbhd;
        //     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 = {
        //         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 != shcc);
        //     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;
        //     }
        // }
    }
    render = () => {
        console.log(this, 'all');
        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} />
                <div className='col-md-12' style={{ marginTop: 5 }}>
                    {this.state?.listCbhd?.map((item, index) => <EditCBHD ref={e => this.listRow[index + 1] = e}
                        key={index}
                        item={item}
                        selectVaiTro={this.selectVaiTro}
                        readOnly={readOnly}
                        listCbhd={this.state.listCbhd}
                        listCbhdTemp={this.state.listCbhdTemp}
                        onChange={(updateCbhd) => this.handleCbhdChange(index, updateCbhd)}
                        onSave={(savedCbhd) => this.handleCbhdChange(index, savedCbhd)}
                        onDelete={() => this.setState({ listCbhd: this.state.listCbhd.filter((_, i) => i !== index) })}
                    ></EditCBHD>)}
                    {((this.state.listCbhd?.length == 0) || (this.state?.listCbhd?.length < 2 && this.state?.listCbhd[0].shcc != '')) &&
                        <tr>
                            <TableCell style={{ width: 'auto', textAlign: 'center', whiteSpace: 'nowrap' }} colSpan={5}
                                content={
                                    <div className='d-flex justify-content-center'>
                                        <button className='btn btn-success rounded-0' onClick={(e) => e.preventDefault() || this.createTempCbhd()}>
                                            <i className='fa fa-fw fa-lg fa-plus' />Thêm CBHD mới
                                        </button>
                                    </div>
                                }
                            >
                            </TableCell>
                        </tr>}
                </div>
            </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: [] };
        console.log(newestSoQuyetDinh, 'dr');
        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} update={this.props.updateSdhDeTai} 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, updateSdhDeTai };
export default connect(mapStateToProps, mapActionsToProps)(sdhDeTai);