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';

class EditModal extends AdminModal {
    // componentDidMount() {
    //     this.onShown(() => {
    //         this.tenDeTai.focus();
    //     });
    // }

    onShow = (item) => {
        let { id, tenDeTai, mssv, ghiChu, noiDung, soQuyetDinh } = item ? item : { id: '', tenDeTai: '', mssv: '', ghiChu: '', noiDung: '', soQuyetDinh: '' };
        this.setState({ id }, () => {
            this.tenDeTai?.value(tenDeTai ?? '');
            this.mssv?.value(mssv ?? '');
            this.ghiChu?.value(ghiChu ?? '');
            this.noiDung?.value(noiDung ?? '');
            this.soQuyetDinh?.value(soQuyetDinh ?? '');
        });
    }
    onSubmit = (e) => {
        e.preventDefault();
        const changes = {
            tenDeTai: getValue(this.tenDeTai),
            mssv: getValue(this.mssv),
            ghiChu: getValue(this.ghiChu),
            noiDung: getValue(this.noiDung),
            soQuyetDinh: getValue(this.soQuyetDinh)
        };
        console.log(changes, 'sdsds');
        if (this.state.id) {
            this.props.update(this.state.id, changes, this.hide);
        }
        this.props.create(changes, this.hide);
        // this.props.create(changes);
        // this.hide();
    }
    render = () => {
        console.log(this.state.id);
        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-4' ref={e => this.tenDeTai = e} label='Tên đề tài' readOnly={readOnly} />
                <FormSelect className='col-md-4' label='MSSV' ref={e => this.mssv = e} data={SelectAdapter_FwSinhVienSDH} required />
                <FormTextBox className='col-md-4' ref={e => this.soQuyetDinh = e} placeholder={this.soQuyetDinh} label='Số quyết định' readOnly={readOnly} />
                <FormTextBox className='col-md-12' label='Mô tả quyết định' placeholder='Duyệt đề tài' readOnly={readOnly} disabled={!this.state.id}/>
                <FormRichTextBox className='col-md-12' ref={e => this.ghiChu = e} label='Ghi chú' readOnly={readOnly} />
                <FormRichTextBox className='col-md-12' ref={e => this.noiDung = e} label='Nội dung' readOnly={readOnly} />
            </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);
    }
    handleKeySearch = (data, pageNumber, pageSize, pageCondition) => {
        this.setState({ filter: { ...this.state.filter } }, () => {
            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;
        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='tenDeTai' content='Tên đề tài' style={{ minWidth: '260px', whiteSpace: 'nowrap' }} onKeySearch={onKeySearch} />
                    <TableHead keyCol='hoTenSinhVien' content='Tên sinh viên' style={{ minWidthwidth: '150px', whiteSpace: 'nowrap' }} onKeySearch={onKeySearch} />
                    <TableHead keyCol='tenHoiDong' content='Tên hội đồng' style={{ minWidth: '150px', whiteSpace: 'nowrap' }} onKeySearch={onKeySearch} />
                    <TableHead keyCol='phong' content='Phòng' style={{ minWidth: '50px', whiteSpace: 'nowrap' }} onKeySearch={onKeySearch} />
                    <TableHead keyCol='ngayBaoCao' typeSearch='date' style={{ minWidth: '50px', verticalAlign: 'middle' }} content='Ngày báo cáo' onKeySearch={onKeySearch} />
                    <TableHead style={{ minWidth: '50px', verticalAlign: 'middle' }} content='Số quyết định' />
                    <TableHead content='Mã' style={{ minWidth: '50px', whiteSpace: 'nowrap', textAlign: 'center', verticalAlign: 'middle' }} />
                    <TableHead content='Họ tên cán bộ' style={{ minWidth: '80px', whiteSpace: 'nowrap', textAlign: 'center', verticalAlign: 'middle' }} />
                    <TableHead content='Mã' style={{ minWidth: '50px', whiteSpace: 'nowrap', textAlign: 'center', verticalAlign: 'middle' }} />
                    <TableHead content='Họ tên cán bộ' style={{ minWidth: '80px', 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 type='link' onclick={() => this.modal.show(item)} content={item.tenDeTai ?? ''} permission={permission} />
                    <TableCell content={item.hoTenSinhVien ?? ''} />
                    <TableCell content={item.tenHoiDong ?? ''} />
                    <TableCell content={item.phong ?? ''} />
                    <TableCell type='date' dateFormat='dd/mm/yyyy HH:MM' content={item.ngayBaoCao ?? ''} />
                    <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} />
            </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);