educoder/public/react/src/modules/courses/members/CourseGroupListTable.js

import React, { useState, useEffect } from 'react'

import { Input,Checkbox,Table, Pagination, Modal,Menu ,Spin, Tooltip , Badge, Popconfirm } from "antd";
import axios from 'axios'

import { WordsBtn, trigger, on, off, getUrl, downloadFile , sortDirections } from 'educoder'
import ClipboardJS from 'clipboard'

/** 
    角色数组, CREATOR: 创建者, PROFESSOR: 教师, ASSISTANT_PROFESSOR: 助教, STUDENT: 学生
    course_members_count: 0
    id: 2441
    invite_code: "WUNX9K"
    member_manager: "全部教师"
    name: "e'e'e"
*/

const clipboardMap = {}
function CourseGroupListTable(props) {
    const [serachValue, setSerachValue] = useState('')

    const courseId = props.match.params.coursesId    

    useEffect(() => {
        const course_groups = props.course_groups
        if (!course_groups) {
            return;
        }
        course_groups.forEach((record) => {
            const id = record.id
            debugger;
            let _clipboard = new ClipboardJS(`.copyBtn_${id}`);
            _clipboard.on('success', (e) => {
                props.showNotification('复制成功')
            });    
            clipboardMap[id] = _clipboard
        })
        return () => {
            course_groups.forEach((record) => {
                const id = record.id

                if (clipboardMap[id]) {
                    clipboardMap[id].destroy();
                    clipboardMap[id] = null;
                }
            })
        }
    }, [props.course_groups])
    function buildColumns() {
        const columns=[{
            title: '序号',
            dataIndex: 'id',
            key: 'id',
            align:'center',
            width:"5%",
            className:"color-grey-6",
            render: (id, record, index) => {
                return index + 1
            }
        },
        {
            title: '分班名称',
            dataIndex: 'name',
            key: 'name',
            align:'center',
            width:"25%",
            className:"color-grey-6",
            render: (name, record, index) => {
                return <WordsBtn title={name.length > 11 ? name : ''} onClick={() => onGoDetail(record)} style={''}
                    className="overflowHidden1" style2={{maxWidth: '180px', verticalAlign: 'bottom'}}>
                {name}</WordsBtn>
            }
        },
        
        {
            title: '学生成员',
            dataIndex: 'course_members_count',
            key: 'course_members_count',
            align:'center',
            width:"8%",
            className:"color-grey-6",
            render: (course_members_count, record, index) => {
                return course_members_count
            }
        }
        ];
        if (!isNotMember) {
            columns.push({
                title: '管理教师',
                dataIndex: 'member_manager',
                key: 'member_manager',
                align:'center',
                width:"27%",
                className:"color-grey-6",
                render: (member_manager, record, index) => {
                    return <span className=""
                        title={record.subStringOfMember_manager ? member_manager : ''}
                    >{record.subStringOfMember_manager || member_manager}</span>
                }
            })
            const aCol = (isAdmin ? {
                title: '邀请码',
                dataIndex: 'invite_code',
                key: 'invite_code',
                align:'center',
                width:"10%",
                className:"color-grey-6",
                render: (invite_code, record, index) => {
                    return invite_code
                }
            } : {
                title: '你当前所在分班',
                dataIndex: 'group',
                key: 'group',
                align:'center',
                width:"20%",
                className:"color-grey-6",
                render: (invite_code, record, index) => {
                    return props.current_group_id == record.id && <Badge status="processing" text="" />
                }
            })
            columns.push( aCol );
        }

        columns.push({
            title: '操作',
            dataIndex: 'setting',
            key: 'setting',
            align:'center',
            width:"25%",
            className:"color-grey-6",
            render: (none, record, index) => {
                return <React.Fragment>
                    {!isCourseEnd && isAdmin && <WordsBtn style2={{ marginRight: '12px' }} onClick={() => onDelete(record)} style={'grey'}>删除分班</WordsBtn>}
                    {isAdmin && <WordsBtn style2={{ marginRight: '12px' }} data-clipboard-text={record.invite_code} 
                        className={`copyBtn_${record.id}`} style={''}>复制邀请码</WordsBtn>    }  
                    {isStudent && <WordsBtn style2={{ marginRight: '12px' }} onClick={() => addToDir(record)} style={''}>加入分班</WordsBtn>}        
                    <WordsBtn style2={{ marginRight: '12px' }} onClick={() => onGoDetail(record)} style={''}>查看</WordsBtn>              
                </React.Fragment>
            }
        })
        
        return columns 
    }
    const addToDir = async (record) => {
        const courseId = props.match.params.coursesId    
        const url = `/courses/${courseId}/join_course_group.json`
        const course_group_id = record.id

        const response = await axios.post(url, {
            course_group_id
        })
        if (response && response.data.status == 0) {
            props.showNotification('加入成功')
            props.updataleftNavfun()
            props.onOperationSuccess && props.onOperationSuccess()
        }
    }
    
    function onDelete(record) {
        props.confirm({
            content: <div>
                <div>该分班的学生将被移动到“未分班”</div>
                <div>是否确认删除?</div>
                </div>,
            onOk: () => {
                // const cid = this.props.match.params.coursesId

                const url = `/course_groups/${record.id}.json`
                axios.delete(url)
                    .then((response) => {
                        if (response.data.status == 0) {
                            props.showNotification('删除成功')
                            props.onOperationSuccess && props.onOperationSuccess()
                            // props.history.push(response.data.right_url)
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });    
            }
        })
    }    
    function onGoDetail(record) {
        props.history.push(`/courses/${courseId}/course_groups/${record.id}`)
    }
    const isAdmin = props.isAdmin();
    const isSuperAdmin = props.isSuperAdmin();
    const isStudent = props.isStudent()
    const isNotMember = props.isNotMember()
    

    const isParent = true;
    const isCourseEnd= props.isCourseEnd();

    const course_groups = props.course_groups
    const columns = buildColumns()
    const dataSource = course_groups.map(item => {
        return {
            ...item,
            subStringOfMember_manager : (item.member_manager && item.member_manager.length > 92)
                ? item.member_manager.substring(0, 92) + '...' : null
        }
    })
    return (
        <React.Fragment>
            <style>{`
                .groupListTable .ant-badge-status-processing {
                    width: 10px;
                    height: 10px;
                }
            `}</style>
            {/* onChange={onTableChange}  */}
            <Table columns={columns} dataSource={dataSource} pagination={false} className="groupListTable"></Table>
           
        </React.Fragment>
    )
}
export default CourseGroupListTable