Untitled

import React from 'react';
import { connect } from 'react-redux';
import { AdminPage, FormSelect, TableCell, renderDataTable, FormDatePicker, getValue, TableHead, FormCheckbox, AdminModal, FormRichTextBox } from 'view/component/AdminPage';
import { Link } from 'react-router-dom';
import { SelectAdapter_DmCoSo } from 'modules/mdDanhMuc/dmCoSo/redux';
class TraCuuThoiKhoaBieu extends AdminPage {

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

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

    getSchedule = (filter) => {
        //
    }

    handleKeySearch = () => {
        //
    }

    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.status == 1 && !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' onKeySearch={this.handleKeySearch} 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' onKeySearch={this.handleKeySearch} 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} />
                <TableHead style={{ minWidth: '100px', whiteSpace: 'nowrap' }} content='Tính chất' />
                <th style={{ width: '20vw' }}>Ghi chú</th>
                <th style={{ width: 'auto', whiteSpace: 'nowrap' }}>Thao tác</th>
            </tr>
        ),
        // renderRow: (item, index) => {

        // }

    });



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


        return (
            <div className='tile' style={{ marginBottom: '10px' }}>
                <div className='row'>
                    <FormSelect className='col-md-3' ref={e => this.maCoSo = e} label='Cơ sở' data={SelectAdapter_DmCoSo} allowClear />
                    <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 />
                    <FormSelect className='col-md-3' ref={e => this.status = e} label='Tính chất' data={[
                        { id: 1, text: 'Lịch dạy' },
                        { id: 2, text: 'Lịch thi' },
                        { id: 3, text: 'Sự kiện' },
                        { id: 4, text: 'Lịch dạy SĐH' },
                    ]} />

                    <div className='col-md-12'>
                        <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 = {
                                    coSo: getValue(this.maCoSo),
                                    ngayBatDau: getValue(this.fromTime).setHours(0, 0, 0, 0),
                                    ngayKetThuc: getValue(this.toTime).setHours(23, 59, 59, 999),
                                    status: getValue(this.status),
                                    buoi: getValue(this.buoi),
                                };
                                this.setState({ filter, coSo: filter.coSo }, () => {
                                    T.alert('Đang xử lý', 'warning', false, null, true);
                                    this.getSchedule(filter, () => T.alert('Xử lý thành công', 'success', true, 5000));
                                });
                            }
                        }}>
                            <i className='fa fa-fw fa-lg fa-search' />Tìm kiếm
                        </button>
                    </div>
                </div>



                {this.tableTKB(dataSearch)}
            </div>
        );


    }
}

const mapStateToProps = state => ({ system: state.system });
const mapActionsToPros = {};
export default connect(mapStateToProps, mapActionsToPros)(TraCuuThoiKhoaBieu);