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 SqdModal from './section/sqd_modal';
import CreateSqdModal from './section/create_sqd';
import { SelectAdapter_FwVaiTroCbhd } from '../sdhVaiTroCanBoHuongDan/redux';
import CreateRequest from 'modules/mdHanhChinhTongHop/hcthSoDangKy/components/createRequest';
import { SelectAdapter_SoDangKyAlternative } from 'modules/mdHanhChinhTongHop/hcthSoDangKy/redux/soDangKy';
import { Tooltip } from '@mui/material';
class EditCBHD extends React.Component {
    state = { data: {} }
    componentDidMount() {
        const { item } = this.props;
        this.shcc?.value(item?.shcc && item?.belongTo ? `${item?.shcc} - ${item?.belongTo}` : '');
        this.vaiTro?.value(item?.vaiTro);
        this.ghiChu?.value(item?.ghiChu);
        this.hoTenCanBo?.value(item?.hoTenCanBo);
    }

    handleShccCbhd = (selectCbhd) => {
        this.setState({ data: { ...this.state.data, shcc: selectCbhd?.shcc, belongTo: selectCbhd?.belongTo } });
    }

    handleVaiTroCbhd = (selectVaiTro) => {
        this.setState({ data: { ...this.state.data, vaiTro: selectVaiTro?.id } });
    }

    handleSubmit = (e) => {
        e.preventDefault();
        const { listCbhd } = this.props;
        const { data } = this.state;

        const hasCbhdTemp = !!data.shcc;
        const hasListCbhd = !!listCbhd[0].shcc;
        if (listCbhd.length == 1) {
            if (hasCbhdTemp || hasListCbhd) {
                T.notify('Cập nhật thông tin CBHD thành công', 'success');
                this.props.onSave(data);
            } else {
                T.notify('Chưa chọn cán bộ hướng dẫn', 'danger');
            }
        }
        if (listCbhd.length == 2) {
            if (hasCbhdTemp || hasListCbhd) {
                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 {
                T.notify('Chưa chọn cán bộ hướng dẫn', '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={readOnly} onChange={e => this.handleShccCbhd(e)} />
            <FormSelect ref={e => this.vaiTro = e} label='Vai trò' data={SelectAdapter_FwVaiTroCbhd} className='col-md-6' readOnly={readOnly} allowClear onChange={e => this.handleVaiTroCbhd(e)} />
            {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.shcc)}>
                    <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: [] }
    listRow = [];
    onShow = (item) => {
        console.log(item);
        const { id, tenDeTai, ghiChu, noiDung, mssv, tenSqd, soQuyetDinh, canBo, isDuyet } = item ? item : { id: '', tenDeTai: '', ghiChu: '', noiDung: '', mssv: '', tenSqd: '', soQuyetDinh: '', canBo: [], isDuyet: false };
        if (canBo.length > 0) {
            const listCbhd = canBo.map(cb => ({ shcc: `${cb.mscb} - ${cb.from}`, vaiTro: cb.vaiTro, belongTo: cb.from, hoTenCanBo: '' }));
            this.setState({ listCbhd });
        }
        this.setState({ id, mssv, isDuyet }, () => {
            this.tenDeTai?.value(tenDeTai ?? '');
            this.ghiChu?.value(ghiChu ?? '');
            this.noiDung?.value(noiDung ?? '');
            this.soQuyetDinh?.value(soQuyetDinh ?? '');
            this.tenSqd?.value(tenSqd ?? '');

        });
    }

    handleCbhdChange = (index, updatedCbhd) => {
        let listCbhd = [...this.state.listCbhd];
        listCbhd[index] = {
            ...listCbhd[index],
            ...updatedCbhd
        };
        this.setState({ listCbhd });

    }

    handleDelete = (shcc) => {
        this.setState({ listCbhd: this.state.listCbhd?.filter(item => item.shcc != shcc) }, () => {
            delete this.listRow[shcc];
        });
    }

    onSubmit = (e) => {
        e.preventDefault();
        console.log(this.state);
        let changes = {};
        if (this.state.isDuyet != null) {
            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
            };
        } else {
            changes = {
                tenDeTai: getValue(this.tenDeTai),
                mssv: this.state.mssv,
                ghiChu: getValue(this.ghiChu),
                noiDung: getValue(this.noiDung),
                tenSqd: getValue(this.tenSqd),
                cbhd: this.state.listCbhd
            };
        }

        console.log(changes);
        for (const idx of changes.cbhd) {
            if (!idx.shcc) {
                return T.notify('Chưa chọn cán bộ hướng dẫn', 'danger');
            }
        }
        if (this.state.id) {
            // update
            this.props.update(this.state.id, changes, () => {
                this.setState({ listCbhd: [] });
                this.hide();
            });
        } else {
            changes.tenSqd = 'Duyệt đề tài';
            this.props.create(changes, () => {
                this.setState({ listCbhd: [] });
                this.hide();
            });
        }
    }

    onShowRequestModal = () => {
        $(this.modal).modal('hide');
        setTimeout(() => {
            this.props.requestModal.show({
                onHide: () => $(this.modal).modal('show'), onCreateCallback: (data, done) => {
                    done && done();
                    data.soVanBan && this.soQuyetDinh.value(data.soVanBan);
                },
                loaiVanBan: 42,
                lyDo: this.formType?.data()?.text
            });
        }, 300);
    }
    changeSoQuyetDinh = (value) => {
        this.soQuyetDinh.value(value.id);
    }
    createTempCbhd = () => {
        this.setState({ listCbhd: [...this.state.listCbhd, { shcc: '', vaiTro: '', hoTenCanBo: '', trinhDo: '', belongTo: '' }] });
    }

    render = () => {
        const readOnly = this.props.readOnly;
        const { listCbhd } = this.state;

        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'>
                {!!this.state.id && <FormCheckbox ref={e => this.vanBanDaPhatHanh = e} label='Văn bản đã tồn tại bên vpdt' className='col-md-12' onChange={value => this.setState({ vanBanDaPhatHanh: value }, () => this.soQuyetDinh.value(''))} />}
                {!!this.state.id && <FormSelect ref={e => this.soQuyetDinh = e} className='col-md-12' label={<div>Số quyết định <span className='text-danger'>*&nbsp;</span> <Link to='#' onClick={this.onShowRequestModal}>(Nhấn vào đây để thêm)</Link></div>} data={SelectAdapter_SoDangKyAlternative([80], 'TRUONG', ['QĐ'], this.state.vanBanDaPhatHanh ? 1 : 0)} placeholder='Số quyết định' onChange={value => this.changeSoQuyetDinh(value)} />}
                <FormTextBox className='col-md-12' 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-12' ref={e => this.tenDeTai = e} label='Tên đề tài' readOnly={readOnly} required />
                <FormRichTextBox className='col-md-12' ref={e => this.noiDung = e} label='Nội dung đề tài' readOnly={readOnly} />
                <FormRichTextBox className='col-md-12' ref={e => this.ghiChu = e} label='Ghi chú đề tài' readOnly={readOnly} />
                <div className='col-md-12' style={{ marginTop: 5 }} key={this.state.listCbhd.length}>
                    {listCbhd?.map((item, index) => <EditCBHD ref={e => this.listRow[index + 1] = e}
                        key={index}
                        item={item}
                        readOnly={readOnly}
                        listCbhd={listCbhd}
                        onChange={(updateCbhd) => this.handleCbhdChange(index, updateCbhd)}
                        onSave={(savedCbhd) => this.handleCbhdChange(index, savedCbhd)}
                        onDelete={this.handleDelete}
                    />)}
                    {((listCbhd.length == 0 || (listCbhd.length == 1 && (listCbhd[0]?.hoTenCanBo || 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();
        this.modal.show(item);
    }

    onCreateSqd = (e, item) => {
        e.preventDefault();
        console.log(item);
        console.log(!!item.isDuyet && !item.id, 'create');
        this.createSqdModal.show(item);
    }

    handleKeySearch = (data, pageNumber, pageSize, pageCondition) => {
        this.setState({ filter: { ...this.state.filter, [data.split(':')[0]]: data.split(':')[1] } }, () => {
            this.getPage(pageNumber, pageSize, pageCondition);
        });
    }

    getPage = (pageN, pageS, pageC) => {
        let filter = { ...this.state.filter };
        this.props.getDeTaiPage(pageN, pageS, pageC, filter);
    }

    render() {
        const permission = this.getUserPermission('sdhDeTai');
        const { pageNumber, pageSize, pageTotal, totalItem, pageCondition, list } = this.props.sdhDeTai?.page || { pageNumber: 1, pageSize: 25, pageTotal: 0, totalItem: 0, pageCondition: '', list: [] };
        const onKeySearch = this.state.isKeySearch ? this.handleKeySearch : null;
        let table = renderDataTable({
            className: this.state.isFixCol ? 'table-fix-col' : '',
            data: 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', width: '10%', whiteSpace: 'nowrap' }} onKeySearch={onKeySearch} />
                    <TableHead keyCol='hoTenSinhVien' content=' Họ tên học viên' style={{ minWidth: '150px', width: '20%', whiteSpace: 'nowrap' }} onKeySearch={onKeySearch} />
                    <TableHead keyCol='tenDeTai' content='Tên đề tài' style={{ minWidth: '250px', width: '20%', whiteSpace: 'nowrap' }} onKeySearch={onKeySearch} />
                    <TableHead style={{ width: 'auto', verticalAlign: 'middle' }} content='Số quyết định' />
                    <TableHead content='Mã CBHD1' style={{ width: 'auto', whiteSpace: 'nowrap', textAlign: 'center', verticalAlign: 'middle' }} />
                    <TableHead content='Tên CBHD1' style={{ width: '15%', whiteSpace: 'nowrap', textAlign: 'center', verticalAlign: 'middle' }} />
                    <TableHead content='Vai trò CBHD1' style={{ width: '10%', whiteSpace: 'nowrap', textAlign: 'center', verticalAlign: 'middle' }} />
                    <TableHead content='Mã CBHD2' style={{ width: 'auto', whiteSpace: 'nowrap', textAlign: 'center', verticalAlign: 'middle' }} />
                    <TableHead content='Tên CBHD2' style={{ width: '15%', whiteSpace: 'nowrap', textAlign: 'center', verticalAlign: 'middle' }} />
                    <TableHead content='Vai trò CBHD2' style={{ width: '10%', whiteSpace: 'nowrap', textAlign: 'center', verticalAlign: 'middle' }} />
                    <TableHead style={{ width: 'auto', whiteSpace: 'nowrap', verticalAlign: 'middle', textAlign: 'center' }} 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 type='link' onClick={(e) => { e.preventDefault(); this.sqdModal.show(item); }} content={item.soQuyetDinh ?? ''} permission={permission} />
                    <TableCell content={item.canBo[0]?.mscb ?? ''} />
                    <TableCell content={item.canBo[0]?.hoTenCanBo ?? ''} />
                    <TableCell content={item.canBo[0]?.tenVaiTro ?? ''} />
                    <TableCell content={item.canBo[1]?.mscb ?? ''} />
                    <TableCell content={item.canBo[1]?.hoTenCanBo ?? ''} />
                    <TableCell content={item.canBo[1]?.tenVaiTro ?? ''} />
                    <TableCell type='buttons' permission={{ ...permission }} onEdit={(e) => this.onEdit(e, item)}>
                        <Tooltip title={'Duyệt đề tài'} arrow>
                            <span style={{ cursor: 'not-allowed' }}>
                                <button className='btn btn-success' onClick={(e) => this.onCreateSqd(e, item)} disabled={!item.id || (!item.isDuyet == true) && (!item.id == true)}>
                                    <i className='fa fa-check' />
                                </button>
                            </span>
                        </Tooltip>
                    </TableCell>
                </tr>
            )
        });

        return this.renderPage({
            icon: 'fa fa-list',
            title: 'Danh mục đề tài',
            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} requestModal={this.requestModal} />
                <SqdModal ref={e => this.sqdModal = e} readOnly={!permission.write} />
                <CreateRequest ref={e => this.requestModal = e} onHide={this.onHideRequest} />
                <CreateSqdModal ref={e => this.createSqdModal = e} readOnly={!permission.write} requestModal={this.requestModal} />
            </div>,
            backRoute: '/user/sau-dai-hoc/topic-program',
        });
    }
}


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