Untitled

import React from 'react';
import { Link } from 'react-router-dom';
import { AdminModal, AdminPage, FormCheckbox, FormDatePicker, FormSelect, FormTextBox, TableCell, TableHead, getValue, renderDataTable, renderTable } from 'view/component/AdminPage';
import { createSdhHoiDong, getSdhHoiDongPage, updateSdhHoiDong } from './redux';
import { connect } from 'react-redux';
import { SelectAdapter_FwCbhd, SelectAdapter_FwSinhVienWithDeTaiSDH } from '../sdhDeTai/redux';
import { SelectAdapter_FwVaiTroCbhd } from '../sdhVaiTroCanBoHuongDan/redux';
import Pagination from 'view/component/Pagination';

class EditCBHD extends React.Component {
  state = { data: {} }
  componentDidMount() {
    this.shcc?.value(this.props.item?.shcc);
    this.vaiTro?.value(this.props.item?.vaiTro);
    // this.ghiChu?.value(this.props.item?.ghiChu);
    // this.hoTenCanBo?.value(this.props.item?.hoTenCanBo);
  }

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

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

  // handleGhiChuCbhd = (ghiChu, callback) => {
  //   const expectedFormat = /^[^\-]+ [^\-]+ [^\-]+$/;
  //   if (!expectedFormat.test(ghiChu)) {
  //     T.notify('Định dạng ghi chú không đúng. Mong đợi: Chức danh cao nhất | Học vị cao nhất | Họ và tên', 'danger');
  //     return;
  //   }
  //   let fullInfo = ghiChu.trim();
  //   let infoParts = fullInfo.split(' ');
  //   let trinhDo = infoParts.slice(0, 2).join(' ');
  //   let hoTenCanBo = infoParts.slice(2).join(' ');

  //   let shcc = this.state.data.shcc || '';
  //   this.setState({ data: { ...this.state.data, ghiChu: ghiChu, hoTenCanBo: hoTenCanBo, shcc: shcc, trinhDo: trinhDo } }, () => {
  //     callback(this.state.data);
  //   });
  // }

  handleSubmit = (e) => {
    e.preventDefault();
    // const { listTvhd } = this.props;
    // const { data } = this.state;
    T.notify('cap nhat thanh cong', 'success');
    this.props.onSave(this.state.data);

  };

  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={false} onChange={e => this.handleShccCbhd(e)} />
      <FormSelect ref={e => this.vaiTro = e} label='Vai trò' data={SelectAdapter_FwVaiTroCbhd} className='col-md-6' readOnly={false} allowClear onChange={e => this.handleVaiTroCbhd(e)} />
      {/* <FormRichTextBox ref={e => this.ghiChu = e} maxLength={1999} label='Ghi chú' placeholder='<Chức danh cao nhất> <Học vị cao nhất> <Họ và tên>. Vd: PGS TS Nguyễn Văn A' className='col-md-12' readOnly={false} /> */}
      {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)}>
          <i className='fa fa-fw fa-lg fa-trash' />Xoá
        </button>
      </div>}
    </div>;
  }


}
class EditModal extends AdminModal {
  state = { data: {}, listTvhd: [], mssv: '' }
  listRow = [];

  onShow = (item) => {
    console.log(item, 'item');
    let { id, tenHoiDong, phong, ngayBaoCao, action, mssv, thanhVienHoiDong } = item ? item : { id: '', tenHoiDong: '', phong: '', ngayBaoCao: '', action: '', mssv: '', thanhVienHoiDong: '' };
    if (thanhVienHoiDong.length > 0) {
      const listTvhd = thanhVienHoiDong.map(tvhd => ({ shcc: `${tvhd.MSCB} - ${tvhd.from}`, vaiTro: tvhd.vaiTro, ghiChu: '', hoTenCanBo: '' }));
      this.setState({ listTvhd });
    }

    this.setState({ id }, () => {
      this.tenHoiDong.value(tenHoiDong ?? '');
      this.phong.value(phong ?? '');
      this.ngayBaoCao.value(ngayBaoCao ?? '');
      console.log(ngayBaoCao, '1');
      this.soQuyetDinh.value(this.props.newSoQuyetDinh + 1 ?? '');
      this.action.value(action ?? '');
      this.mssv.value(mssv ?? '');
    });
  }

  createTempCbhd = () => {
    this.setState({ listTvhd: [...this.state.listTvhd, {}] });
  }

  handleMssvChange = (selectMssv) => {
    console.log(selectMssv, 'selectMssv');
    this.setState({ mssv: selectMssv?.id });
  }

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

  onSubmit = (e) => {
    e.preventDefault();
    console.log(this.state, 'state');
    let changes = {
      tenHoiDong: getValue(this.tenHoiDong),
      phong: getValue(this.phong),
      ngayBaoCao: new Date(getValue(this.ngayBaoCao)).getTime(),
      soQuyetDinh: getValue(this.soQuyetDinh),
      action: getValue(this.action),
      mssv: this.state.mssv || getValue(this.mssv),
      tvhd: this.state.listTvhd
    };
    console.log(this.state, 'state22', changes.mssv, 'mssv');
    if (this.state.id) {
      console.log('01');
      this.props.update(this.state.idHoiDong, changes, () => {
        this.setState({ listTvhd: [] });
        this.hide();
      });
    }
    else {
      changes.action = 'Tạo hội đồng';
      console.log('2', 'taomoi');
      this.props.create(changes, () => {
        this.setState({ listTvhd: [] });
        this.hide();
      });
    }
  }

  render = () => {
    const { listTvhd } = 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'>
        <FormTextBox className='col-md-8' ref={e => this.tenHoiDong = e} label='Tên hội đồng' />
        <FormTextBox className='col-md-4' ref={e => this.soQuyetDinh = e} label='Số quyết định' required />
        <FormTextBox className='col-md-8' ref={e => this.action = e} label='Hành động' placeholder={this.state.id ? '' : 'Tạo hội đồng'} disabled={!this.state.id} />
        <FormTextBox className='col-md-4' ref={e => this.phong = e} label='Phòng báo cáo' />
        <FormDatePicker className='col-md-6' ref={e => this.ngayBaoCao = e} label='Ngày báo cáo' type='date' />
        <FormSelect className='col-md-6' ref={e => this.mssv = e} label='MSSV' data={SelectAdapter_FwSinhVienWithDeTaiSDH} onChange={(e) => this.handleMssvChange(e)} required />
        <div className='col-md-12' style={{ marginTop: 5 }}>
          {listTvhd?.map((item, index) => <EditCBHD ref={e => this.listRow[index + 1] = e}
            key={index}
            item={item}
            listTvhd={listTvhd}
            onChange={(updateCbhd) => this.handleCbhdChange(index, updateCbhd)}
            onSave={(savedCbhd) => this.handleCbhdChange(index, savedCbhd)}
            onDelete={() => this.setState({ listTvhd: listTvhd.filter((_, i) => i !== index) })}
          ></EditCBHD>)}
          <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 SDHHoiDongPage extends AdminPage {
  state = { filter: {}, isKeySearch: false, isCoDinh: false, isFixCol: false };
  componentDidMount() {
    T.ready('/user/sau-dai-hoc', () => {
      this.getPage();
      console.log(this.getPage(), 'page');
    });
  }
  onEdit = (e, item) => {
    e.preventDefault();
    this.modal.show(item);
  }
  onDelete = (e, item) => {
    e.preventDefault();
    T.confirm('Xoá hội đồng', 'Bạn có chắc chắn muốn xoá hội đồng này?', true, isConfirm => {
      isConfirm && this.props.deleteSdhHoiDong(item.Id);
    });
  }

  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.getSdhHoiDongPage(pageN, pageS, pageC, filter);
  }

  render() {
    const permission = this.getUserPermission('sdhHoiDong');
    const { pageNumber, pageSize, pageTotal, totalItem, pageCondition, newestSoQuyetDinh, list } = this.props.sdhHoiDong?.page || { pageNumber: 1, pageSize: 25, pageTotal: 0, totalItem: 0, pageCondition: '', newestSoQuyetDinh: '', 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='tenDeTai' content='Tên đề tài' style={{ minWidth: '260px', whiteSpace: 'nowrap' }} onKeySearch={onKeySearch} />
          <TableHead keyCol='tenSinhVien' content='Tên sinh viên' style={{ minWidth: '220px', whiteSpace: 'nowrap' }} onKeySearch={onKeySearch} />
          <TableHead keyCol='tenHoiDong' content='Tên hội đồng' style={{ minWidth: '200px', whiteSpace: 'nowrap' }} onKeySearch={onKeySearch} />
          <TableHead content='Phòng' style={{ minWidth: '80px', whiteSpace: 'nowrap' }} onKeySearch={onKeySearch} />
          <TableHead content='Tên CBHD' style={{ minWidth: '220px', whiteSpace: 'nowrap' }} />
          <TableHead content='Ngày báo cáo' style={{ width: 'auto', whiteSpace: 'nowrap' }} />
          <TableHead content='Thao tác' style={{ width: 'auto', whiteSpace: 'nowrap' }} />
        </tr>
      ),
      renderRow: (item, index) => (
        <tr key={index}>
          <TableCell content={(pageNumber - 1) * pageSize + index + 1} />
          <TableCell content={item.tenDeTai ?? ''} />
          <TableCell content={item.hoTenSinhVien ?? ''} />
          <TableCell content={item.tenHoiDong ?? ''} />
          <TableCell content={item.phong ?? ''} />
          <TableCell content={item.tenCBHD ?? ''} />
          <TableCell type='date' dateFormat='dd/mm/yyyy HH:MM' content={item.ngayBaoCao ?? ''} />
          <TableCell type='buttons' permission={{ ...permission }} onEdit={(e) => this.onEdit(e, item)} onDelete={(e) => this.onDelete(e, item)} />
        </tr>
      )
    });
    return this.renderPage({
      icon: 'fa fa-list',
      title: 'Danh mục hội đồng',
      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} create={this.props.createSdhHoiDong} update={this.props.updateSdhHoiDong} newSoQuyetDinh={newestSoQuyetDinh} />
      </div>
      ,
      backRoute: '/user/sau-dai-hoc/topic-program',
      collapse: [
        { icon: 'fa-plus-square', name: 'Tạo hội đồng', 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, sdhHoiDong: state.sdh.sdhHoiDong });
const mapActionsToProps = { getSdhHoiDongPage, createSdhHoiDong, updateSdhHoiDong };
export default connect(mapStateToProps, mapActionsToProps)(SDHHoiDongPage);