Untitled

import React from 'react';
import { connect } from 'react-redux';
import { AdminPage, TableCell, renderDataTable, getValue, TableHead, FormCheckbox, AdminModal, FormTextBox } from 'view/component/AdminPage';
import { sdhTKBTraCuuSchedule, updateSdhTKBIsNghi } from 'modules/mdSauDaiHoc/sdhQuanLyNghiBuHP/redux';
import { Tooltip } from '@mui/material';

class BaoNghiModal extends AdminModal {
    state = { lyDo: '' };
    componentDidMount() {
        this.onShown(() => this.lyDo.focus());
    }
    onShow = (item) => {
        this.lyDo.value('');
        this.setState({ item });
    }
    onSubmit = () => {
        const lyDo = getValue(this.lyDo);
        const { maHocPhan, giangVien, emailGiangVien, tenMonHoc, thoiGian, idTuan, ngayHoc } = this.state.item;
        const data = { maHocPhan, idTuan, changes: { isNghi: 1, ghiChu: lyDo }, dataEmail: { giangVien, emailGiangVien, tenMonHoc, thoiGian, lyDo, ngayHoc } };
        this.props.update(data, () => {
            this.props.baoNghi();
            this.hide();
        });
    }
    render = () => {
        return this.renderModal({
            title: 'Lý do nghỉ',
            body: <FormTextBox ref={e => this.lyDo = e} placeholder='Lý do nghỉ' required className='col-md-12' />
        });
    }
}
class TraCuuThoiKhoaBieu extends AdminPage {

    state = ({ dataSearch: [] });
    defaultSortTerm = 'time_ASC'

    componentDidMount() {
        T.ready('/user/sau-dai-hoc', () => {
            this.showAdvanceSearch();
            T.showSearchBox(() => {
                this.showAdvanceSearch();
            });
        });
    }

    getSchedule = (filter, done) => {
        const { fromTime, toTime } = filter;
        const newFilter = { fromTime, toTime };
        console.log('new filter', newFilter);
        this.props.sdhTKBTraCuuSchedule({ ...newFilter, sort: this.state.sortTerm || this.defaultSortTerm }, result => {
            this.setState({ dataSearch: result, filter: newFilter }, () => {
                this.checkAll.value('');
                done && done();
            });
        });
    }

    handleKeySearch = (data) => {
        let { filter } = this.state;
        this.setState({ filter: { ...filter, [data.split(':')[0]]: data.split(':')[1] } }, () => {
            this.getSchedule(this.state.filter);
        });
    }

    handleCheck = (item, list) => {
        item.isCheck = !item.isCheck;
        this.setState({ dataSearch: list }, () => {
            this.checkAll.value(list.filter(i => !i.isVang && !i.isNghi).every(i => i.isCheck));
        });
    }

    onSort = (sortTerm) => {
        this.setState({ sortTerm }, () => this.getSchedule(this.state.filter));
    }

    tableTKB = (list) => renderDataTable({
        emptyTable: 'Không có dữ liệu',
        data: list,
        stickyHead: list.length > 15,
        className: 'dataTable',
        header: 'thead-light',
        divStyle: { height: '60vh' },
        renderHead: () => (
            <tr>
                <th style={{ widht: 'auto', whiteSpace: 'nowrap' }}>#</th>
                <th style={{ width: 'auto', whiteSpace: 'nowrap' }}>
                    <FormCheckbox ref={e => this.checkAll = e} onChange={(value) => {
                        this.setState({ dataSearch: list.map(i => (!i.isVang && !i.isNghi) ? ({ ...i, isCheck: value }) : i) });
                    }} />
                </th>
                <TableHead style={{ width: '30%', whiteSpace: 'nowrap' }} content='Mã học phần' keyCol='maHocPhan' onKeySearch={this.handleKeySearch} onSort={this.onSort} />
                <TableHead style={{ width: '70%', minWidth: '200px', maxWidth: '200px', whiteSpace: 'nowrap' }} content='Tên môn học' keyCol='tenMon' onKeySearch={this.handleKeySearch} onSort={this.onSort} />
                <TableHead style={{ width: 'auto', whiteSpace: 'nowrap' }} content='Lớp' keyCol='lop' onKeySearch={this.handleKeySearch} onSort={this.onSort} />
                <TableHead style={{ width: 'auto', whiteSpace: 'nowrap' }} content='Ngày học' keyCol='ngayHoc' typeSearch='date' onSort={this.onSort} />
                <TableHead style={{ width: 'auto', whiteSpace: 'nowrap' }} content='Thứ' keyCol='thu' onKeySearch={this.handleKeySearch} onSort={this.onSort} />
                <TableHead style={{ width: 'auto', whiteSpace: 'nowrap' }} content='Thời gian' keyCol='time' />
                <TableHead style={{ width: 'auto', whiteSpace: 'nowrap' }} content='Phòng' keyCol='phong' onKeySearch={this.handleKeySearch} onSort={this.onSort} />
                <TableHead style={{ width: 'auto', whiteSpace: 'nowrap' }} content='Cơ sở' keyCol='tenCoSo' onSort={this.onSort} />
                <TableHead style={{ width: 'auto', whiteSpace: 'nowrap' }} content='Khoa' keyCol='khoa' onKeySearch={this.handleKeySearch} onSort={this.onSort} />
                <TableHead style={{ width: 'auto', whiteSpace: 'nowrap' }} content='Giảng viên' keyCol='giangVien' onKeySearch={this.handleKeySearch} onSort={this.onSort} />
                <TableHead style={{ width: 'auto', whiteSpace: 'nowrap' }} content='Trợ giảng' keyCol='troGiang' onKeySearch={this.handleKeySearch} onSort={this.onSort} />
                <th style={{ width: '20vw' }}>Ghi chú</th>
                <th style={{ width: 'auto', whiteSpace: 'nowrap' }}>Thao tác</th>
            </tr>
        ),
        renderRow: (item, index) => {
            let thu = item.thu,
                tiet = `${item.tietBatDau} - ${(item.tietBatDau + item.soTietBuoi - 1)}`,
                ten = item.tenMonHoc,
                ngay = `${T.dateToText(item.time, 'dd/mm/yyyy')}`;
            if (thu == 8) thu = 'CN';

            return (
                <Tooltip title={item.isNghi ? 'Buổi học nghỉ' : (item.isVang ? 'Buổi học vắng' : '')} arrow>
                    <tr key={index} style={{ backgroundColor: item.isNghi ? '#ffcccb' : (item.isVang ? '#f7de97' : '#ffffff') }}>
                        <TableCell content={index + 1} />
                        <TableCell type='checkbox' isCheck style={{ textAlign: 'center', display: Number(this.props.system.user?.isPhongDaoTao) ? '' : 'none' }} content={item.isCheck} permission={{ write: !item.isVang && !item.isNghi }} onChanged={() => this.handleCheck(item, list)} />
                        <TableCell content={item.isEvent ? '' : item.maHocPhan} />
                        <TableCell content={ten} />
                        <TableCell style={{ whiteSpace: 'pre-wrap' }} content={item.lop} />
                        <TableCell content={ngay} />
                        <TableCell style={{ whiteSpace: 'nowrap' }} content={thu} />
                        <TableCell style={{ whiteSpace: 'nowrap' }} content={tiet} />
                        <TableCell style={{ whiteSpace: 'nowrap' }} content={item.phong} />
                        <TableCell content={T.parse(item.tenCoSo, { vi: '' })?.vi} />
                        <TableCell style={{ whiteSpace: 'nowrap' }} content={item.tenKhoaDangKy} />
                        <TableCell content={item.dataTenGiangVien && item.dataTenGiangVien.length ? item.dataTenGiangVien.split(',').map((item, i) => <div style={{ whiteSpace: 'nowrap' }} key={i}>{item}</div>) : ''} />
                        <TableCell content={item.dataTenTroGiang && item.dataTenTroGiang.length ? item.dataTenTroGiang.split(',').map((item, i) => <div style={{ whiteSpace: 'nowrap' }} key={i}>{item}</div>) : ''} />
                        <TableCell content={<div style={{ width: '20vw' }}>{item.ghiChu}</div>} />
                        <TableCell type='buttons' style={{ textAlign: 'center', display: item.isVang || item.isNghi ? 'none' : '' }} content={item}>
                            <Tooltip title='Báo nghỉ tuần học' arrow>
                                <button className='btn btn-danger' style={{ display: Number(this.props.system.user?.isPhongDaoTao) ? '' : 'none' }} onClick={e => e.preventDefault() || T.confirm('Cảnh báo', `Bạn có muốn báo nghỉ học phần ${item.maHocPhan} không?`, 'warning', true, isConfirm => {
                                    if (isConfirm) {
                                        const currentDate = new Date();
                                        const oneWeekInMilliseconds = 7 * 24 * 60 * 60 * 1000;
                                        if (item.ngayHoc - currentDate < oneWeekInMilliseconds) T.notify('Chỉ có thể báo nghỉ trước ngày học ít nhất một tuần', 'danger');
                                        else {
                                            let dataModal = {
                                                maHocPhan: item.maHocPhan,
                                                thoiGian: `Ngày ${T.convertDate(item.ngayHoc, 'DD/MM/YYYY')}, ${item.thu == 8 ? 'CN' : `thứ ${item.thu}`}, thời gian ${item.tgBatDau}-${item.tgKetThuc}, phòng ${item.phong}`,
                                                giangVien: item.dataTenGiangVien,
                                                emailGiangVien: item.emailGiangVien ?? '',
                                                tenMonHoc: item.tenMonHoc,
                                                idTuan: item.idTuan,
                                                ngayHoc: item.ngayHoc,
                                            };
                                            this.baoNghiModal.show(dataModal);
                                        }
                                    }
                                })}>
                                    <i className='fa fa-lg fa-power-off' />
                                </button>
                            </Tooltip>
                        </TableCell>
                    </tr>
                </Tooltip>
            );
        }

    });

    render() {
        let { dataSearch } = this.state;

        return (
            <div className='tile' style={{ marginBottom: '10px' }}>
                {/* <div className='row'>
                    <FormDatePicker type='date' ref={e => this.fromTime = e} label='Từ thời điểm' className='col-md-3' required />
                    <FormDatePicker type='date' ref={e => this.toTime = e} label='Đến thời điểm' className='col-md-3' required />

                    <div className='col-md-12 mb-2'>
                        <button className='btn btn-success' type='button' onClick={() => {
                            if (!this.fromTime.value()) {
                                T.notify('Vui lòng nhập thời điểm bắt đầu!', 'danger');
                            } else if (!this.toTime.value()) {
                                T.notify('Vui lòng nhập thời điểm kết thúc!', 'danger');
                            } else {
                                let filter = {
                                    ngayBatDau: getValue(this.fromTime).setHours(0, 0, 0, 0),
                                    ngayKetThuc: getValue(this.toTime).setHours(23, 59, 59, 999),
                                };
                                this.setState({ filter }, () => {
                                    T.alert('Đang xử lý', 'warning', false, null, true);
                                    this.getSchedule(filter, () => T.alert('Xử lý thành công', 'success', false, 1000));
                                });
                            }
                        }}>
                            <i className='fa fa-fw fa-lg fa-search' />Tìm kiếm
                        </button>
                    </div>
                </div> */}

                {this.props.isSearch && this.tableTKB(dataSearch)}
                <BaoNghiModal ref={e => this.baoNghiModal = e} baoNghi={() => this.getSchedule(this.state.filter)} update={this.props.updateSdhTKBIsNghi} />
            </div>
        );
    }
}

const mapStateToProps = state => ({ system: state.system });
const mapActionsToPros = { sdhTKBTraCuuSchedule, updateSdhTKBIsNghi };
export default connect(mapStateToProps, mapActionsToPros, null, { forwardRef: true })(TraCuuThoiKhoaBieu);