Untitled

import React from 'react';
import { connect } from 'react-redux';
import { createDmMonHocSdhMoi, getDmMonHocSdhMoiPage, updateDmMonHocSdhMoi, deleteDmMonHocSdhMoi, updateKhoaDmMonHocSdhMoi, checkMonHoc } from './redux';
import { Link } from 'react-router-dom';
import { SelectAdapter_DmKhoaSdh, getDmKhoaSdhAll } from 'modules/mdSauDaiHoc/dmKhoaSauDaiHoc/redux';
import { SelectAdapter_LoaiDiem } from 'modules/mdSauDaiHoc/sdhDmLoaiDiem/redux';
import Pagination from 'view/component/Pagination';
import { AdminPage, AdminModal, TableCell, FormTextBox, FormCheckbox, FormSelect, getValue, renderDataTable, TableHead, renderTable } from 'view/component/AdminPage';
import { Tooltip } from '@mui/material';


class EditKhoaModal extends AdminModal {
    state = { listMonHoc: [] };
    componentDidMount = () => {
        this.onHidden(() => {
            this.setState({ listMonHoc: [] }, () => this.khoaSdhMoi.value(''));
        });
    }

    onShow = (list) => {
        this.setState({ listMonHoc: list });
    };

    delete = (e, item) => {
        e.preventDefault();
        let { listMonHoc } = this.state;
        listMonHoc = listMonHoc.filter(mh => mh.ma != item.ma);
        this.setState({ listMonHoc });
    }

    monHocTable = (list) => renderTable({
        getDataSource: () => list,
        header: 'thead-light',
        stickyHead: list.length > 8,
        divStyle: { height: '50vh' },
        renderHead: () => <tr>
            <TableHead content='#' style={{ width: 'auto' }} />
            <TableHead content='Mã' style={{ width: '10%' }} />
            <TableHead content='Tên' style={{ width: '65%' }} />
            <TableHead content='Khoa/Bộ môn' style={{ width: '25%' }} />
            <TableHead content='Thao tác' style={{ width: 'auto' }} />
        </tr>,
        renderRow: (item, index) => <tr key={item.ma}>
            <TableCell content={index + 1} style={{ textAlign: 'right' }} />
            <TableCell content={item.ma} />
            <TableCell content={item.tenTiengViet} nowrap />
            <TableCell content={item.tenKhoa} nowrap />
            <TableCell content={item} type='buttons' permission={this.props.permission} onDelete={this.delete} />
        </tr>
    })

    onSubmit = (e) => {
        e.preventDefault();
        let { listMonHoc } = this.state,
            listMa = listMonHoc.map(item => item.ma),
            khoaSdh = getValue(this.khoaSdhMoi);
        this.setState({ isLoading: true }, () => {
            this.props.update(listMa.join(', '), khoaSdh, () => this.setState({ isLoading: false }, () => this.hide() || this.props.reset()));
        });
    }

    render = () => {
        let { listMonHoc, isLoading } = this.state;
        return this.renderModal({
            title: 'Cập nhật Khoa/Bộ môn',
            size: 'large',
            isShowSubmit: !!this.state.listMonHoc.length,
            isLoading,
            body: <div className='row'>
                <FormSelect className='col-md-12' ref={e => this.khoaSdhMoi = e} data={SelectAdapter_DmKhoaSdh} label='Khoa/Bộ môn mới' required />
                <div className='col-md-12'>
                    {!!this.state.listMonHoc.length && this.monHocTable(listMonHoc)}
                </div>
            </div>
        });
    }
}
class EditModal extends AdminModal {
    diem = {};
    state = { listDiem: [] };
    mapperKey = {
        'Backspace': '',
        'Delete': '',
        'End': '',
        'PageDown': '',
        'PageUp': '',
        'Home': ''
    }

    componentDidMount() {
        $(document).ready(() => this.onShown(() => {
            // this.tenTiengViet.focus();
            // !this.props.permission.manage ? this.ma.focus() : this.tenTiengViet.focus();
        }));
        this.onHidden(() => {
            this.diem = {};
            this.setState({ listDiem: [] });
        });
    }

    onShow = (item) => {
        const { ma, tenTiengViet, tenTiengAnh, kichHoat, tcLyThuyet, tcThucHanh, khoa, tietLt, tietTh, loaiDiem, checkMonHoc, checkDiem } = item ? item : { ma: '', tenTiengViet: '', tenTiengAnh: '', tcLyThuyet: '', tcThucHanh: '', kichHoat: 1, khoa: '', loaiDiem: null, checkMonHoc: 0, checkDiem: 0 };
        this.setState({ ma: ma, item, checkMonHoc: checkMonHoc == 1, checkDiem: checkDiem == 1 });
        this.ma.value(ma);
        this.tenTiengViet.value(tenTiengViet);
        this.tenTiengAnh.value(tenTiengAnh || '');
        this.tcLyThuyet.value(tcLyThuyet || 0);
        this.tcThucHanh.value(tcThucHanh || 0);
        this.tietLt.value(tietLt || 0);
        this.tietTh.value(tietTh || 0);
        this.kichHoat.value(kichHoat);
        this.khoaSdh.value(khoa);
        this.loaiDiem.value(loaiDiem);

        if (ma) {
            let listDiem = [];
            if (loaiDiem) {
                listDiem = loaiDiem.map(i => ({
                    maMonHoc: ma,
                    loaiThanhPhan: i.maLoaiDiem,
                    phanTram: Number(i.phanTramMacDinh),
                    phanTramMax: Number(i.phanTramMax),
                    phanTramMin: Number(i.phanTramMin),
                    tenThanhPhan: i.maLoaiDiem === 'GK' ? 'Giữa kỳ' : (i.maLoaiDiem === 'CK' ? 'Cuối kỳ' : 'Điểm danh')
                }));

                this.setState({ listDiem }, () => {
                    let loaiDiem = listDiem.map(e => e.loaiThanhPhan);
                    this.loaiDiem.value(loaiDiem);
                    if (listDiem.length) {
                        for (let diem of listDiem) {
                            this.diem[diem.loaiThanhPhan].value(diem.phanTram);
                            this.diem[diem.loaiThanhPhan + 'min'].value(diem.phanTramMin);
                            this.diem[diem.loaiThanhPhan + 'max'].value(diem.phanTramMax);
                        }
                    }
                });
            } else {
                this.setState({ listDiem: [] }, () => {
                    this.loaiDiem.value([]);
                });
            }
        }
    }

    onSubmit = (e) => {
        e.preventDefault();
        const changes = {
            ma: getValue(this.ma),
            tenTiengViet: getValue(this.tenTiengViet),
            tenTiengAnh: getValue(this.tenTiengAnh),
            tcLyThuyet: Number(getValue(this.tcLyThuyet)),
            tcThucHanh: Number(getValue(this.tcThucHanh)),
            tongTc: Number(getValue(this.tcLyThuyet)) + Number(getValue(this.tcThucHanh)),
            tietLt: Number(getValue(this.tcLyThuyet)) * 15,
            tietTh: Number(getValue(this.tcThucHanh)) * 30,
            tongTiet: Number(getValue(this.tietTh)) + Number(getValue(this.tietLt)),
            kichHoat: getValue(this.kichHoat),
            khoaSdh: getValue(this.khoaSdh),
        };

        let { listDiem } = this.state, data = [];
        if (listDiem.length) {
            for (let diem of listDiem) {
                let item = {
                    maMonHoc: changes.ma,
                    loaiThanhPhan: diem.loaiThanhPhan,
                    phanTram: parseInt(getValue(this.diem[diem.loaiThanhPhan])),
                    tenThanhPhan: diem.tenThanhPhan,
                    phanTramMax: parseInt(getValue(this.diem[diem.loaiThanhPhan + 'max'])),
                    phanTramMin: parseInt(getValue(this.diem[diem.loaiThanhPhan + 'min'])),
                };

                if (item.phanTram < item.phanTramMin || item.phanTram > item.phanTramMax) {
                    return T.notify('Phần trăm mặc định phải giữa phần trăm Min và Max', 'danger');
                }
                if (item.phanTramMin >= item.phanTramMax) {
                    return T.notify('Phần trăm min không được vượt quá phần trăm max', 'danger');
                }
                data.push(item);
            }
        }

        if (changes.tenTiengViet == '') {
            this.tenTiengViet.focus();
            return T.notify('Tên môn học (tiếng Việt) bị trống!', 'danger');
        } else if (changes.tcLyThuyet + changes.tcThucHanh <= 0) {
            this.tcLyThuyet.focus();
            return T.notify('Số tín chỉ lý thuyết phải lớn hơn 0!', 'danger');
        } else {
            let checked = true,
                count = 0,
                loaiDiem = this.loaiDiem.value();
            for (let item of data) {
                if (!item.phanTram) {
                    checked = false;
                    this.diem[item.loaiThanhPhan].focus();
                    return T.notify(`Phần trăm ${item.tenThanhPhan} bị trống!`, 'danger');
                } else if (item.phanTram <= 0) {
                    checked = false;
                    this.diem[item.loaiThanhPhan].focus();
                    return T.notify(`Phần trăm ${item.tenThanhPhan} phải lớn hơn 0!`, 'dangers');
                } else {
                    count = count + Number(item.phanTram);
                }
            }
            if (count != 100 && loaiDiem.length != 0 && checked != false) {
                checked = false;
                this.diem[data[0].loaiThanhPhan].focus();
                return T.notify('Tổng phần trăm phải bằng 100!', 'danger');
            }
            if (checked == true) {
                if (this.state.ma) {
                    this.props.update(this.state.ma, changes, data, this.hide);
                } else {
                    this.props.checkMonHoc(changes.ma, (value) => {
                        if (!value) {
                            this.props.create(changes, data, this.hide);
                        } else {
                            this.ma.focus();
                            return T.notify('Mã môn học bị trùng!', 'danger');
                        }
                    });
                }
            }
        }
    }

    changeKichHoat = value => this.kichHoat.value(Number(value));

    loaiDiemConfigTable = (list) => {
        let { checkDiem } = this.state;
        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: '30%', textAlign: 'center', whiteSpace: 'nowrap' }} >Phần trăm</th>
                </tr>
            ),

            renderRow: (item, index) => {
                return (
                    <tr key={item.loaiThanhPhan}>
                        <TableCell style={{ textAlign: 'right' }} content={index + 1} />
                        <TableCell content={item.loaiThanhPhan} />
                        <TableCell content={item.tenThanhPhan} />
                        <TableCell style={{ textAlign: 'center' }} content={
                            <div style={{ display: 'flex' }}>
                                <FormTextBox ref={e => this.diem[item.loaiThanhPhan + 'min'] = e} placeholder='Min' style={{ marginBottom: '0', width: '50%' }} required allowNegative={false} readOnly={checkDiem} onKeyDown={e => {
                                    const diem = this.diem[item.loaiThanhPhan + 'min'].value() || '';
                                    if (e.code == 'ArrowDown') {
                                        if (index + 1 < list.length) {
                                            this.diem[list[index + 1].loaiThanhPhan + 'min'].focus();
                                        }
                                    }
                                    else if (e.code == 'ArrowUp') {
                                        if (index - 1 >= 0) {
                                            this.diem[list[index - 1].loaiThanhPhan + 'min'].focus();
                                        }
                                    }
                                    else if (e.code == 'ArrowRight' || e.code == 'Enter') {
                                        this.diem[item.loaiThanhPhan].focus();
                                        e.preventDefault();
                                    }
                                    else if (e.code == 'ArrowLeft') {
                                        if (index - 1 >= 0) {
                                            this.diem[list[index - 1].loaiThanhPhan + 'max'].focus();
                                        }
                                    }
                                    else if (e.code in this.mapperKey) {
                                        //
                                    }
                                    else if (!(/^[0-9]{1,3}?$/).test((`${diem}${e.key}`))) return e.preventDefault();
                                }} />
                                <FormTextBox ref={e => this.diem[item.loaiThanhPhan] = e} placeholder='Mặc định' style={{ width: 'auto', marginBottom: '0' }} required allowNegative={false} readOnly={checkDiem} onKeyDown={e => {
                                    const diem = this.diem[item.loaiThanhPhan].value() || '';
                                    if (e.code == 'ArrowDown') {
                                        if (index + 1 < list.length) {
                                            this.diem[list[index + 1].loaiThanhPhan].focus();
                                        }
                                    }
                                    else if (e.code == 'ArrowUp') {
                                        if (index - 1 >= 0) {
                                            this.diem[list[index - 1].loaiThanhPhan].focus();
                                        }
                                    }
                                    else if (e.code == 'ArrowRight' || e.code == 'Enter') {
                                        this.diem[item.loaiThanhPhan + 'max'].focus();
                                        e.preventDefault();
                                    }
                                    else if (e.code == 'ArrowLeft') {
                                        this.diem[item.loaiThanhPhan + 'min'].focus();
                                    }
                                    else if (e.code in this.mapperKey) {
                                        //
                                    }
                                    else if (!(/^[0-9]{1,3}?$/).test((`${diem}${e.key}`))) return e.preventDefault();
                                }} />
                                <FormTextBox ref={e => this.diem[item.loaiThanhPhan + 'max'] = e} placeholder='Max' style={{ marginBottom: '0', width: '50%' }} required allowNegative={false} readOnly={checkDiem} onKeyDown={e => {
                                    const diem = this.diem[item.loaiThanhPhan + 'max'].value() || '';
                                    if (e.code == 'ArrowDown') {
                                        if (index + 1 < list.length) {
                                            this.diem[list[index + 1].loaiThanhPhan + 'max'].focus();
                                        }
                                    }
                                    else if (e.code == 'ArrowUp') {
                                        if (index - 1 >= 0) {
                                            this.diem[list[index - 1].loaiThanhPhan + 'max'].focus();
                                        }
                                    }
                                    else if (e.code == 'ArrowRight' || e.code == 'Enter') {
                                        if (index + 1 < list.length) {
                                            this.diem[list[index + 1].loaiThanhPhan + 'min'].focus();
                                        }
                                        e.preventDefault();
                                    }
                                    else if (e.code == 'ArrowLeft') {
                                        this.diem[item.loaiThanhPhan].focus();
                                    }
                                    else if (e.code in this.mapperKey) {
                                        //
                                    }
                                    else if (!(/^[0-9]{1,3}?$/).test((`${diem}${e.key}`))) return e.preventDefault();
                                }} />
                            </div>
                        } />
                    </tr >
                );
            }
        });
    };

    handleLoaiDiem = (value) => {
        if (value) {
            let { listDiem } = this.state;
            if (value.selected) {
                let data = {
                    maMonHoc: this.state.ma,
                    loaiThanhPhan: value.id,
                    tenThanhPhan: value.text,
                    phanTram: ''
                };
                listDiem.push(data);
            } else listDiem = listDiem.filter(e => e.loaiThanhPhan != value.id);
            this.setState({ listDiem });
        }
    };

    render = () => {
        const readOnly = this.props.readOnly;
        let { listDiem, checkMonHoc, checkDiem } = this.state;
        return this.renderModal({
            title: this.state.ma ? 'Cập nhật môn học mới (sau 2022)' : 'Tạo mới môn học mới (sau 2022)',
            size: 'large',
            body: <div className='row'>
                <FormTextBox className='col-md-6' ref={e => this.ma = e} label='Mã môn học' readOnly={checkMonHoc} required />
                <FormCheckbox className='col-md-6' ref={e => this.kichHoat = e} label='Kích hoạt' isSwitch={true}
                    readOnly={readOnly} style={{ display: 'inline-flex', margin: 0 }}
                    onChange={value => this.changeKichHoat(value ? 1 : 0)} />
                <FormTextBox className='col-md-12' ref={e => this.tenTiengViet = e} label='Tên tiếng Việt' readOnly={checkMonHoc} required />
                <FormTextBox className='col-md-12' ref={e => this.tenTiengAnh = e} label='Tên tiếng Anh' readOnly={readOnly} />
                <FormTextBox type='number' className='col-md-6' ref={e => this.tcLyThuyet = e} onChange={e => this.tietLt.value(e * 15)} label='Tín chỉ lý thuyết' readOnly={checkMonHoc} required />
                <FormTextBox type='number' className='col-md-6' ref={e => this.tcThucHanh = e} onChange={e => this.tietTh.value(e * 30)} label='Tín chỉ thực hành' readOnly={checkMonHoc} required />
                <FormTextBox type='number' className='col-md-6' ref={e => this.tietLt = e} label='Tiết lý thuyết' readOnly={true} />
                <FormTextBox type='number' className='col-md-6' ref={e => this.tietTh = e} label='Tiết thực hành' readOnly={true} />
                <FormSelect ref={e => this.khoaSdh = e} className='col-md-12' data={SelectAdapter_DmKhoaSdh} label='Khoa phụ trách' readOnly={readOnly} required />
                <FormSelect ref={e => this.loaiDiem = e} className='col-md-12' data={SelectAdapter_LoaiDiem} label='Thành phần điểm' multiple onChange={this.handleLoaiDiem} readOnly={checkDiem} required />

                <div className='col-md-12'>
                    {this.loaiDiem?.value() ? this.loaiDiemConfigTable(listDiem) : ''}
                </div>
            </div>
        });
    }
}

class DmMonHocSdhMoiPage extends AdminPage {
    //cập nhật multi môn vào khoa mới
    state = { sortTerm: 'tenTV_ASC', donViFilter: '', listChosen: [] }
    defaultSortTerm = 'tenTV_ASC'
    selectKichHoat = [
        { id: '1', text: 'Kích hoạt' },
        { id: '0', text: 'Chưa kích hoạt' },
    ]
    componentDidMount() {
        let route = T.routeMatcher('/user/sau-dai-hoc/mon-hoc-moi').parse(window.location.pathname);
        this.menu = route.menu == 'sau-dai-hoc' ? 'sau-dai-hoc' : 'category';
        T.ready('/user/sau-dai-hoc', () => {
            this.props.getDmKhoaSdhAll(items => {
                this.getPage();
                this.setState({ dmKhoaSdh: items.map(i => ({ id: i.ma, text: i.ten })) });
            });
            T.clearSearchBox();
            T.onSearch = (searchText) => this.getPage(undefined, undefined, searchText);
            T.showSearchBox();
        });

    }

    getPage = (pageN, pageS, pageC, done) => {
        let filter = { ...this.state.filter, sort: this.state?.sortTerm || this.defaultSortTerm, donViFilter: this.state.donViFilter };
        this.props.getDmMonHocSdhMoiPage(pageN, pageS, pageC, filter, done);
    }

    showModal = (e) => {
        e.preventDefault();
        this.modal.show();
    }

    changeActive = item => this.props.updateDmMonHocSdhMoi(item.ma, { kichHoat: item.kichHoat });

    delete = (e, item) => {
        e.preventDefault();
        T.confirm('Xóa danh mục môn học mới (sau 2022)', 'Bạn có chắc bạn muốn xóa môn học này?', true, isConfirm =>
            isConfirm && this.props.deleteDmMonHocSdhMoi(item.ma));
    }

    reset = () => {
        this.setState({ listChosen: [] }, () => this.checkAll.value(false));
    }

    searchAdvance = () => {
        const advance = {
            ma: getValue(this.ma),
            khoaSdh: getValue(this.khoaSdh),
            tenTiengViet: getValue(this.tenTiengViet),
            tenTiengAnh: getValue(this.tenTiengAnh)
        };
        this.props.getDmMonHocSdhMoiPage(undefined, undefined, '', undefined, advance);
    }

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

    onSort = (sortTerm, pageNumber, pageSize, pageCondition) => {
        this.setState({ sortTerm }, () => this.getPage(pageNumber, pageSize, pageCondition));
    }

    chooseAll = (value, list) => {
        let { listChosen } = this.state;
        if (value) {
            listChosen = listChosen.concat(list);
            listChosen = [...new Set(listChosen)];
        } else {
            listChosen = [];
        }
        this.setState({ listChosen });
    }

    chonMonHoc = (value, item) => {
        let { listChosen } = this.state;
        if (value) {
            listChosen.push(item);
            listChosen = [...new Set(listChosen)];
        } else {
            listChosen = listChosen.filter(mh => mh.ma != item.ma);
        }
        this.setState({ listChosen }, () => listChosen.length >= this.props.dmMonHocSdhMoi?.page.list?.length ? this.checkAll.value(true) : this.checkAll.value(false));
    }

    render() {
        const permission = this.getUserPermission('dmMonHocSdhMoi', ['manage', 'write', 'delete']);
        const { pageNumber, pageSize, pageTotal, pageCondition, totalItem, list } = this.props.dmMonHocSdhMoi && this.props.dmMonHocSdhMoi.page ?
            this.props.dmMonHocSdhMoi.page : { pageNumber: 1, pageSize: 50, pageTotal: 1, pageCondition: '', totalItem: 0, list: null };
        const onKeySearch = this.handleKeySearch,
            onSort = this.onSort;
        let table = renderDataTable({
            emptyTable: 'Dữ liệu học phần trống',
            data: list,
            stickyHead: list && list.length > 8, style: { fontSize: '0.8rem' },
            divStyle: { height: '64vh' },
            header: 'thead-light',
            renderHead: () => (
                <tr>
                    <th style={{ width: 'auto', textAlign: 'right' }}>#</th>
                    <th style={{ width: 'auto', textAlign: 'center' }}>Chọn<br />
                        <FormCheckbox ref={e => this.checkAll = e} onChange={value => this.chooseAll(value, list)} readOnly={!permission.write} />
                    </th>
                    <TableHead keyCol='ma' content='Mã' onKeySearch={onKeySearch} onSort={onSort} />
                    <TableHead keyCol='tenTV' content='Tên tiếng Việt' onKeySearch={onKeySearch} onSort={onSort} />
                    {/* <TableHead keyCol='tenTA' content='Tên tiếng Anh' onKeySearch={onKeySearch} onSort={onSort} /> */}
                    <TableHead keyCol='tclt' content='TC Lý thuyết' onKeySearch={onKeySearch} onSort={onSort} />
                    <TableHead keyCol='tcth' content='TC Thực hành' onKeySearch={onKeySearch} onSort={onSort} />
                    <TableHead keyCol='tongTc' content='Tổng TC' onKeySearch={onKeySearch} onSort={onSort} />
                    <TableHead keyCol='tietLT' content='Tiết LT' onKeySearch={onKeySearch} onSort={onSort} />
                    <TableHead keyCol='tietTH' content='Tiết TH' onKeySearch={onKeySearch} onSort={onSort} />
                    <TableHead keyCol='tongTiet' content='Tổng tiết' onKeySearch={onKeySearch} onSort={onSort} />
                    <TableHead keyCol='khoa' content='Khoa' onKeySearch={onKeySearch} onSort={onSort} />
                    <TableHead keyCol='phanTramDiem' content='Thành phần điểm' />
                    <TableHead keyCol='kichHoat' content='Kích hoạt' onKeySearch={onKeySearch} onSort={onSort} typeSearch='select' data={this.selectKichHoat} />
                    <TableHead content='Thao tác' />
                </tr>
            ),
            renderRow: (item, index) => (
                <tr key={index}>
                    <TableCell type='number' content={(pageNumber - 1) * pageSize + index + 1} />
                    <TableCell style={{ textAlign: 'center' }} type='checkbox' isCheck permission={permission} content={!!this.state.listChosen.includes(item)}
                        onChanged={value => this.chonMonHoc(value, item)} />
                    <TableCell type='link' style={{ textAlign: 'right' }} content={item.ma ? item.ma : ''}
                        onClick={() => this.modal.show(item)} />
                    <TableCell content={item.tenTiengViet ? item.tenTiengViet : ''} />
                    <TableCell style={{ textAlign: 'center' }} content={item.tcLyThuyet ? item.tcLyThuyet : '0'} />
                    <TableCell style={{ textAlign: 'center' }} content={item.tcThucHanh ? item.tcThucHanh : '0'} />
                    <TableCell style={{ textAlign: 'center' }} content={item.tongTinChi ? item.tongTinChi : '0'} />
                    <TableCell style={{ textAlign: 'center' }} content={item.tietLt ? item.tietLt : '0'} />
                    <TableCell style={{ textAlign: 'center' }} content={item.tietTh ? item.tietTh : '0'} />
                    <TableCell style={{ textAlign: 'center' }} content={item.tongTiet ? item.tongTiet : '0'} />
                    <TableCell content={item.tenKhoa ?? ''} />
                    <TableCell style={{ whiteSpace: 'nowrap', textAlign: 'center' }} content={item.loaiDiem?.map((i, j) => (
                        <div key={j}>
                            {i?.phanTramMacDinh ? `${i.maLoaiDiem}: ${i.phanTramMacDinh}% (${i.phanTramMin}% - ${i.phanTramMax}%)` : ''}
                        </div>
                    ))} />
                    <TableCell type='checkbox' style={{ textAlign: 'center' }} content={item.kichHoat} permission={permission}
                        onChanged={value => this.props.updateDmMonHocSdhMoi(item.ma, { kichHoat: Number(value) })} />
                    <TableCell type='buttons' style={{ textAlign: 'center' }} content={item} permission={permission}
                        onEdit={() => this.modal.show(item)} onDelete={e => this.delete(e, item)} />
                </tr>
            )

        });

        return this.renderPage({
            icon: 'fa fa-list-alt',
            title: 'Danh mục môn học mới (sau 2022) ',
            breadcrumb: [
                <Link key={0} to='/user/sau-dai-hoc'>Sau đại học</Link>,
                'Môn học mới (sau 2022)'
            ],
            header: <FormSelect style={{ width: '300px', marginBottom: '0' }} placeholder='Danh sách khoa/bộ môn' ref={e => this.donVi = e} onChange={value => {
                T.clearSearchBox();
                this.setState({ donViFilter: value ? value.id : '' }, () => this.getPage());
            }} data={this.state.dmKhoaSdh} allowClear={true} />,
            content: <>
                <div className='tile'>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                        <h4 className='tile-title'>Danh sách môn học hiện tại</h4>
                        <div style={{ display: 'flex' }}>
                            {!!this.state.listChosen.length && <Tooltip title='Cập nhật Khoa/Bộ môn' arrow>
                                <button className='btn btn-primary' style={{ height: ' 34px' }} onClick={e => e.preventDefault() || this.editKhoaModal.show(this.state.listChosen)}>
                                    <i className='fa fa-lg fa-edit' />
                                </button>
                            </Tooltip>}
                            <Pagination style={{ marginLeft: '70px', position: 'initial' }} {...{ pageNumber, pageSize, pageTotal, pageCondition, totalItem }}
                                getPage={this.getPage} pageRange={3} done={() => this.checkAll.value(false)} />
                        </div>
                    </div>
                    {table}
                </div>
                <EditModal ref={e => this.modal = e} permission={permission}
                    create={this.props.createDmMonHocSdhMoi} update={this.props.updateDmMonHocSdhMoi} checkMonHoc={this.props.checkMonHoc} readOnly={!permission.write} />
                <EditKhoaModal ref={e => this.editKhoaModal = e} permission={permission} update={this.props.updateKhoaDmMonHocSdhMoi} reset={this.reset} readOnly={!permission.write} />
            </>,
            backRoute: '/user/sau-dai-hoc',
            collapse: [
                { icon: 'fa-plus-square', name: 'Tạo môn học', permission: permission.write, type: 'info', onClick: e => this.showModal(e) },
                { icon: 'fa-upload', name: 'Import danh sách môn học', permission: permission.write, type: 'warning', onClick: e => e.preventDefault() || this.props.history.push('/user/sau-dai-hoc/mon-hoc-moi/upload') },
                { icon: 'fa-print', name: 'Tải về danh sách môn học', permission: permission.write, type: 'success', onClick: e => e.preventDefault() || T.download(T.url(`/api/sdh/mon-hoc-moi/download-danh-sach?filter=${this.state.filter}`)), },
            ],
        });
    }
}

const mapStateToProps = state => ({ system: state.system, dmMonHocSdhMoi: state.sdh.dmMonHocSdhMoi });
const mapActionsToProps = { createDmMonHocSdhMoi, getDmMonHocSdhMoiPage, updateDmMonHocSdhMoi, deleteDmMonHocSdhMoi, getDmKhoaSdhAll, updateKhoaDmMonHocSdhMoi, checkMonHoc };
export default connect(mapStateToProps, mapActionsToProps)(DmMonHocSdhMoiPage);