CourseGroupListTable

public/react/src/common/course/WordsBtn.js

@@ -8,20 +8,20 @@ class WordsBtn extends Component {
   }
 
   render() {
-    let{to, href,targets, style2 }=this.props
+    let{to, href,targets, style2, style, ...others }=this.props
     return(
       <React.Fragment>
         {
           to==undefined&&targets==undefined ?
           <a href={href || "javascript:void(0)"} onClick={this.props.onClick} className={"btn "+`${map[this.props.style]} ${this.props.className}`}
-              style={style2}
+              style={style2} {...others}
           >{this.props.children}</a>:
 						targets!=undefined? <a href={to} target="_blank" className={"btn "+`${map[this.props.style]} ${this.props.className}`}
-              style={style2}
+              style={style2} {...others}
             >{this.props.children}</a>
           :
           <Link to={to} className={"btn "+`${map[this.props.style]} ${this.props.className}`}
-            style={style2}
+            style={style2} {...others}
           >{this.props.children}</Link>
         }
       </React.Fragment>

public/react/src/modules/courses/members/CourseGroupList.js

@@ -1,6 +1,6 @@
 // 分班列表 加入分班
 
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 
 import { Input,Checkbox,Table, Pagination, Modal,Menu ,Spin, Tooltip , Divider, Popconfirm } from "antd";
 import ClipboardJS from 'clipboard'
@@ -21,6 +21,8 @@ import DownloadMessageysl from "../../modals/DownloadMessageysl";
 import CreateGroupByImportModal from './modal/CreateGroupByImportModal'
 import ChangeRolePop from './ChangeRolePop'
 import CourseGroupListTable from './CourseGroupListTable'
+
+import './studentsList.css'
 /** 
     角色数组, CREATOR: 创建者, PROFESSOR: 教师, ASSISTANT_PROFESSOR: 助教, STUDENT: 学生
 */
@@ -31,12 +33,20 @@ function CourseGroupList(props) {
     const [DownloadMessageval, setDownloadMessageval] = useState()
 
     const [listRes, setListRes] = useState({})
+    const createGroupModalEl = useRef(null);
 
     const courseId = props.match.params.coursesId    
 
     useEffect(() => {
         fetchAll()
+        on('updateNavSuccess', onOperationSuccess)
+        return () => {
+            off('updateNavSuccess', onOperationSuccess)
+        }
     }, [])
+    function onOperationSuccess() {
+        fetchAll()
+    }
     async function fetchAll() {
         const url = `/courses/${courseId}/course_groups.json`
         const response = await axios.get(url, { params: {
@@ -54,7 +64,7 @@ function CourseGroupList(props) {
 
     }
     function addDir() {
-
+        trigger('groupAdd', props.coursesids)
     }
     function deleteDir() {
 
@@ -96,8 +106,8 @@ function CourseGroupList(props) {
         });
     }
     
-    const isAdmin = true;
-    const isSuperAdmin = true;
+    const isAdmin = props.isAdmin();
+    const isSuperAdmin = props.isSuperAdmin();
     const isParent = true;
     const searchValue = '';
     const isCourseEnd= '';
@@ -107,6 +117,7 @@ function CourseGroupList(props) {
     const total_count = listRes.group_count;
     const none_group_member_count = listRes.none_group_member_count;
     const course_groups = listRes.course_groups
+    const current_group_id = listRes.current_group_id
 
     let exportUrl = `/courses/${courseId}/export_member_scores_excel.xlsx?`; //总成绩
     let exportUrltwo = `/courses/${courseId}/export_couser_info.xlsx?`; //课堂信息
@@ -131,16 +142,17 @@ function CourseGroupList(props) {
                         isSuperAdmin && <React.Fragment>
                         {/* ref="createGroupByImportModal"  */}
                         <CreateGroupByImportModal {...props}
+                            ref={createGroupModalEl}
                             createGroupImportSuccess={createGroupImportSuccess}
                         ></CreateGroupByImportModal>
                         {/* this.refs['createGroupByImportModal'].setVisible(true) */}
-                        <WordsBtn style="blue" className="mr30" onClick={()=> {}}>导入创建分班</WordsBtn>
+                        <WordsBtn style="blue" className="mr30" onClick={()=> {createGroupModalEl.current.setVisible(true)}}>导入创建分班</WordsBtn>
                     </React.Fragment> }
                     { 
                         // pageType !== TYPE_STUDENTS && 
-                        !isCourseEnd && isAdmin && isParent && <WordsBtn style="blue" className="mr30" onClick={()=>addDir()}>添加分班</WordsBtn> }
-                    { 
-                        isAdmin && !isParent && course_group_id != 0 && <WordsBtn style="blue" className="mr30" onClick={()=>deleteDir()}>删除分班</WordsBtn> }
+                        !isCourseEnd && isAdmin && isParent && <WordsBtn style="blue" className="mr30" onClick={()=>addDir()}>新建分班</WordsBtn> }
+                    {/* { 
+                        isAdmin && !isParent && course_group_id != 0 && <WordsBtn style="blue" className="mr30" onClick={()=>deleteDir()}>删除分班</WordsBtn> } */}
               {/* { 
                   isAdmin && !isParent && course_group_id != 0 && <WordsBtn style="blue" className="mr30" onClick={()=>this.renameDir()}>分班重命名</WordsBtn> } */}
                 <style>{`
@@ -193,10 +205,14 @@ function CourseGroupList(props) {
                 onPressEnter={onPressEnter}
             ></Titlesearchsection>
             
+            <div className="mt20 edu-back-white padding20 courseGroupList">
                 <CourseGroupListTable
                     course_groups={course_groups}
+                    onOperationSuccess={onOperationSuccess}
+                    current_group_id={current_group_id}
                     {...props}
                 ></CourseGroupListTable>
+            </div>
         </React.Fragment>
     )
 }

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

@@ -1,8 +1,11 @@
 import React, { useState, useEffect } from 'react'
 
-import { Input,Checkbox,Table, Pagination, Modal,Menu ,Spin, Tooltip , Divider, Popconfirm } from "antd";
+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
@@ -11,13 +14,45 @@ import { WordsBtn, trigger, on, off, getUrl, downloadFile , sortDirections } fro
     member_manager: "全部教师"
     name: "e'e'e"
 */
-function buildColumns() {
+
+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:"10%",
+            width:"5%",
             className:"color-grey-6",
             render: (id, record, index) => {
                 return index + 1
@@ -28,29 +63,21 @@ function buildColumns() {
             dataIndex: 'name',
             key: 'name',
             align:'center',
-        width:"20%",
+            width:"25%",
             className:"color-grey-6",
             render: (name, record, index) => {
-            return name
-        }
-    },
-    {
-        title: '邀请码',
-        dataIndex: 'invite_code',
-        key: 'invite_code',
-        align:'center',
-        width:"10%",
-        className:"color-grey-6",
-        render: (invite_code, record, index) => {
-            return invite_code
+                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:"10%",
+            width:"8%",
             className:"color-grey-6",
             render: (course_members_count, record, index) => {
                 return course_members_count
@@ -61,12 +88,33 @@ function buildColumns() {
             dataIndex: 'member_manager',
             key: 'member_manager',
             align:'center',
-        width:"25%",
+            width:"27%",
             className:"color-grey-6",
             render: (member_manager, record, index) => {
                 return member_manager
             }
         },
+        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="" />
+            }
+        },
         {
             title: '操作',
             dataIndex: 'setting',
@@ -75,34 +123,66 @@ function buildColumns() {
             width:"25%",
             className:"color-grey-6",
             render: (none, record, index) => {
-            return 
+                return <React.Fragment>
+                    {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 
-}
-function CourseGroupListTable(props) {
-    const [serachValue, setSerachValue] = useState('')
-
+    }
+    const addToDir = async (record) => {
         const courseId = props.match.params.coursesId    
+        const url = `/courses/${courseId}/join_course_group.json`
+        const course_group_id = record.id
 
-    useEffect(() => {
-        
-    }, [])
-    
-    const onConfirm = async () => {
+        const response = await axios.post(url, {
+            course_group_id
+        })
+        if (response && response.data.status == 0) {
+            props.showNotification('加入成功')
+            props.updataleftNavfun()
+            props.onOperationSuccess && props.onOperationSuccess()
+        }
     }
     
-    function deleteDir() {
+    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);
+                    });    
+            }
+        })
     }    
-    const isAdmin = true;
-    const isSuperAdmin = true;
+    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 isParent = true;
-    const searchValue = '';
     const isCourseEnd= '';
-    const course_group_id= '';
-
 
     const course_groups = props.course_groups
     const columns = buildColumns()

public/react/src/modules/courses/members/studentsList.css

@@ -1,3 +1,4 @@
-.stu_table .ant-table-thead > tr > th, .stu_table .ant-table-tbody > tr > td {
+.stu_table .ant-table-thead > tr > th, .stu_table .ant-table-tbody > tr > td,
+.courseGroupList .ant-table-thead > tr > th, .courseGroupList .ant-table-tbody > tr > td {
     padding: 14px 6px;
 }