Merge pull request #49 from CBNU-AACP/feature/#6-attendancebook

Feature/#6 attendancebook - Attendance list

package.json

@@ -7,6 +7,7 @@
     "@material-ui/core": "^4.12.3",
     "@material-ui/data-grid": "^4.0.0-alpha.35",
     "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.60",
     "@mui/x-data-grid": "^4.0.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",

src/App.js

@@ -15,10 +15,10 @@ import Register from './components/Register'
 import Home from './components/content/home'
 import Profile from './components/profile'
 import Courses from './components/course'
-import StyledApp from './style'
+import StyledApp from './styles/AppStyle'
 
 import { clearMessage } from './actions/message'
-import { history } from './helpers/history'
+import { history } from './utils/history'
 import { Button } from 'antd'
 
 function App() {

src/actions/attendance.js

@@ -0,0 +1,58 @@
+import { GET_COURSEDATES, GET_ATTENDANCEBOOK, PUT_COURSEDATES, PUT_ATTENDANCEBOOK } from './types'
+
+import AttendanceService from '../services/AttendanceService'
+
+export const getCourseDates = courseId => async dispatch => {
+  try {
+    const res = await AttendanceService.getCourseDates(courseId)
+    console.log(res.data.data)
+    dispatch({
+      type: GET_COURSEDATES,
+      payload: res.data.data,
+    })
+    return Promise.resolve(res.data.data)
+  } catch (err) {
+    return Promise.reject(err)
+  }
+}
+
+export const getAttendanceBook = courseId => async dispatch => {
+  try {
+    const res = await AttendanceService.getAttendanceBook(courseId)
+    console.log(res.data.data)
+    dispatch({
+      type: GET_ATTENDANCEBOOK,
+      payload: res.data.data,
+    })
+    return Promise.resolve(res.data.data)
+  } catch (err) {
+    return Promise.reject(err)
+  }
+}
+
+export const putCourseDates = courseDateId => async dispatch => {
+  try {
+    const res = await AttendanceService.putCourseDates(courseDateId)
+    console.log(res.data.data)
+    dispatch({
+      type: PUT_COURSEDATES,
+      payload: res.data.data,
+    })
+    return Promise.resolve(res.data.data)
+  } catch (err) {
+    return Promise.reject(err)
+  }
+}
+
+export const putAttendanceBook = courseDateId => async dispatch => {
+  try {
+    const res = await AttendanceService.put(courseDateId)
+    dispatch({
+      type: PUT_ATTENDANCEBOOK,
+      payload: res.data.data,
+    })
+    return Promise.resolve(res.data.data)
+  } catch (err) {
+    return Promise.reject(err)
+  }
+}

src/actions/types.js

@@ -20,3 +20,8 @@ export const DELETE_MEMBER = 'DELETE_MEMBER'
 export const DELETE_MEMBERLIST = 'DELETE_MEMBERLIST'
 
 export const RETRIEVE_USERS = 'RETRIEVE_USERS'
+
+export const GET_COURSEDATES = 'GET_COURSEDATES'
+export const GET_ATTENDANCEBOOK = 'GET_ATTENDANCEBOOK'
+export const PUT_COURSEDATES = 'PUT_COURSEDATES'
+export const PUT_ATTENDANCEBOOK = 'PUT_ATTENDANCEBOOK'

src/components/Attendance/getColumns.js

@@ -0,0 +1,38 @@
+import courseDate from '../../utils/courseDateIdtoString'
+
+export default function getColumns(courseDates) {
+  const columnsState = [
+    {
+      headerAlign: 'center',
+      field: '학번',
+      headerName: '학번',
+      width: 120,
+      editable: false,
+      sortable: false,
+      align: 'center',
+      headAlign: 'center',
+    },
+    {
+      headerAlign: 'center',
+      field: '이름',
+      headerName: '이름',
+      width: 120,
+      editable: false,
+      align: 'center',
+    },
+  ]
+
+  for (let i = 0; i < courseDates.length; i += 1) {
+    columnsState.push({
+      field: `${courseDate(courseDates, i)}`,
+      headerName: `${courseDate(courseDates, i)}`,
+      width: 180,
+      editable: true,
+      sortable: false,
+      type: 'boolean',
+      align: 'center',
+    })
+  }
+  console.log(columnsState)
+  return columnsState
+}

src/components/Attendance/getRows.js

@@ -0,0 +1,19 @@
+import courseDate from '../../utils/courseDateIdtoString'
+
+export default function getRows(courseDates, attendanceBook) {
+  const rowsState = []
+  const studentsState = []
+  const courseDateState = {}
+
+  for (let i = 0; i < attendanceBook[0].length; i += 1) {
+    studentsState.push({ id: i + 1, 이름: `${attendanceBook[0][i].name}`, 학번: `${attendanceBook[0][i].studentId}` })
+  }
+  for (let i = 0; i < studentsState.length; i += 1) {
+    for (let j = 1; j < attendanceBook.length; j += 1) {
+      courseDateState[courseDate(courseDates, j - 1)] = attendanceBook[j][i]
+    }
+    rowsState.push({ ...studentsState[i], ...courseDateState })
+  }
+  console.log(rowsState)
+  return rowsState
+}

src/components/Attendance/index.jsx

@@ -4,9 +4,20 @@ import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react'
 import { withRouter, Redirect } from 'react-router-dom'
 import StyledAttendance from './style'
 import PropTypes from 'prop-types'
-import { DataGrid } from '@mui/x-data-grid'
+import {
+  DataGrid,
+  GridToolbarContainer,
+  GridToolbarColumnsButton,
+  GridToolbarExport,
+  useGridSlotComponentProps,
+} from '@mui/x-data-grid'
+import Pagination from '@material-ui/lab/Pagination/Pagination'
 
 import CourseDataService from '../../services/CourseService'
+import { getCourseDates, getAttendanceBook } from '../../actions/attendance'
+
+import getColumns from './getColumns'
+import getRows from './getRows'
 
 function Attendance(props) {
   Attendance.propTypes = {
@@ -30,8 +41,36 @@ function Attendance(props) {
   }
 
   const [currentCourse, setCurrentCourse] = useState(initialCourseState) // 현재 강좌 정보 저장
+  const [columns, setColumns] = useState([])
+  const [rows, setRows] = useState([])
+  const [page, setPage] = useState(0)
+  const courseId = props.match.params.id
 
   const dispatch = useDispatch()
+  const courseDates = useSelector(state => state.courseDates)
+  const attendanceBook = useSelector(state => state.attendanceBook)
+
+  function CustomToolbar() {
+    // 툴바 커스텀
+    return (
+      <GridToolbarContainer>
+        <GridToolbarColumnsButton />
+        <GridToolbarExport />
+      </GridToolbarContainer>
+    )
+  }
+
+  function CustomPagination() {
+    // 출석부 페이지네이션
+    const { state, apiRef } = useGridSlotComponentProps()
+    return (
+      <Pagination
+        count={state.pagination.pageCount}
+        page={state.pagination.page + 1}
+        onChange={(event, value) => apiRef.current.setPage(value - 1)}
+      />
+    )
+  }
 
   const getCourse = id => {
     // 현재 강좌를 찾는 함수
@@ -44,66 +83,76 @@ function Attendance(props) {
       })
   }
 
+  const getAttendanceInfo = id => {
+    dispatch(getCourseDates(id))
+      .then(data => {
+        console.log('2', data)
+        dispatch(getAttendanceBook(id))
+          .then(data => console.log('2', data))
+          .catch(e => {
+            console.log(e)
+          })
+      })
+      .catch(e => {
+        console.log(e)
+      })
+  }
+
   useEffect(() => {
     // router의 params가 바뀌면 실행
-    getCourse(props.match.params.id)
-  }, [props.match.params.id])
-
-  const columns = [
-    {
-      field: '학번',
-      headerName: '학번',
-      width: 100,
-      editable: true,
-    },
-    {
-      field: '이름',
-      headerName: '학번',
-      width: 100,
-      editable: true,
-    },
-    {
-      field: '2021090613',
-      headerName: '2021090613',
-      type: 'number',
-      width: 200,
-      editable: true,
-    },
-  ]
-
-  const rows = [
-    { id: 1, 이름: 'Snow', 학번: 'Jon', 2021090613: 35 },
-    { id: 2, 이름: 'Lannister', 학번: 'Cersei', 2021090613: 42 },
-    { id: 3, 이름: 'Lannister', 학번: 'Jaime', 2021090613: 45 },
-    { id: 4, 이름: 'Stark', 학번: 'Arya', 2021090613: 16 },
-    { id: 5, 이름: 'Targaryen', 학번: 'Daenerys', 2021090613: null },
-    { id: 6, 이름: 'Melisandre', 학번: null, 2021090613: 150 },
-    { id: 7, 이름: 'Clifford', 학번: 'Ferrara', 2021090613: 44 },
-    { id: 8, 이름: 'Frances', 학번: 'Rossini', 2021090613: 36 },
-    { id: 9, 이름: 'Roxie', 학번: 'Harvey', 2021090613: 65 },
-  ]
+    getCourse(courseId)
+    getAttendanceInfo(courseId)
+  }, [courseId])
+
+  useEffect(() => {
+    // 쓸데없이 두 번 렌더링됨
+    console.log(1)
+    if (courseDates.length !== 0 && attendanceBook.length !== 0) {
+      console.log(3)
+      setColumns(getColumns(courseDates)) // columns 상태 저장
+      setRows(getRows(courseDates, attendanceBook)) // rows 상태 저장
+    }
+  }, [attendanceBook])
 
   return (
     <div>
       {userId && userId !== 'undefined' ? (
         <StyledAttendance>
-          {currentCourse.courseId !== null ? (
+          {courseId !== null && attendanceBook[0] ? (
             <div>
               <div>
                 <p>강좌명: {currentCourse.name}</p>
                 <p>설명: {currentCourse.description}</p>
-                <p>총 학생수: 35명</p>
+                <p>학생수: {attendanceBook[0].length}명</p>
               </div>
 
               <div className="datagrid">
                 <div className="gridparent">
                   <DataGrid
+                    page={page}
+                    onPageChange={newPage => setPage(newPage)}
+                    localeText={{
+                      toolbarColumns: '열',
+                      columnsPanelTextFieldLabel: '열 찾기',
+                      columnsPanelTextFieldPlaceholder: '열 이름을 입력해주세요.',
+                      columnsPanelShowAllButton: '모든 열 보이기',
+                      columnsPanelHideAllButton: '모든 열 감추기',
+                      toolbarExport: '추출',
+                      toolbarExportCSV: 'CSV로 다운로드',
+                    }}
+                    components={{
+                      Toolbar: CustomToolbar,
+                      Pagination: CustomPagination,
+                    }}
+                    columnBuffer={10}
+                    pagenation
                     autoHeight
                     rows={rows}
                     columns={columns}
                     pageSize={10}
                     rowsPerPageOptions={[10]}
                     disableSelectionOnClick
+                    disableColumnMenu
                   />
                 </div>
               </div>

src/components/Attendance/style.jsx

@@ -1,20 +1,15 @@
 import styled from 'styled-components'
 
 const Attendance = styled.div`
-  div {
-    .datagrid {
-      items-align: center;
-      display: flex;
-      height: 100%;
-      width: 100%;
-      max-width: 30rem;
-      @media screen and (max-width: 30rem) {
-        flex-direction: column;
-        .gridparent {
-          flexgrow: 1;
-          width: 30rem;
-        }
-      }
+  .datagrid {
+    items-align: center;
+    display: flex;
+    height: 100%;
+    width: 100%;
+    max-width: 30rem;
+    .gridparent {
+      flexgrow: 1;
+      width: 40rem;
     }
   }
 `

src/components/addmemberList/addmember/index.jsx

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types'
 
 const Member = ({ member, removeMember }) => {
   Member.propTypes = {
-    member: PropTypes.func.isRequired,
+    member: PropTypes.objectOf(PropTypes.shape).isRequired,
     removeMember: PropTypes.func.isRequired,
   }