bubble/educt-client
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/educt-client.git synced 2026-10-11 18:29:15 +03:00
Code Issues Packages Projects Releases Wiki Activity

refactor: add students modal

Browse Source
This commit is contained in:
Sergey Yarkov 2021-12-06 00:03:22 +03:00
parent 093247899a
commit 4368498dcd
3 changed files with 31 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Modals/AddStudentsModal/AddSudentsModal.tsx
View File

@ -13,16 +13,14 @@ import {
import { useDisclosure, Divider } from '@chakra-ui/react';
import { MdGroup } from 'react-icons/md';
type AddStudentsModalPropsType = {};
const AddStudentsModal: React.FC<AddStudentsModalPropsType> = () => {
const { isOpen, onOpen, onClose } = useDisclosure();
type AddStudentsModalPropsType = {
isOpen: boolean;
onClose: () => void;
};
const AddStudentsModal: React.FC<AddStudentsModalPropsType> = ({ isOpen, onClose }) => {
return (
<>
<Button onClick={onOpen} mt='3' size='sm' colorScheme='blue' variant='outline'>
Add students
</Button>
<Modal isOpen={isOpen} onClose={onClose} size='md'>
<ModalOverlay />
<ModalContent>

10
src/pages/courses/edit/components/LessonList/LessonList.tsx
View File

@ -46,7 +46,7 @@ const CreateLessonButton: React.FC<{ id: string }> = ({ id }) => {
const handleCreateLesson = (): void => history.push(`${id}/create-lesson`);
return (
<Button onClick={handleCreateLesson} size='sm' colorScheme='blue' variant='outline'>
<Button onClick={handleCreateLesson} mt='2' size='sm' colorScheme='blue' variant='outline'>
Create new lesson
</Button>
);
@ -206,7 +206,9 @@ const LessonList: React.FC<LessonListPropsType> = ({ course }) => {
)}
<Flex mt='2' mb='3' padding='0 20px' alignItems='center' justifyContent='space-between'>
<Text fontWeight='medium'>Total: ({lessons.length})</Text>
<Button onClick={handleCreateLesson}>Create new</Button>
<Button onClick={handleCreateLesson} variant='outline' colorScheme='blue'>
Add new
</Button>
</Flex>
<DragDropContext onDragEnd={handleDragEnd}>
<Droppable
@ -249,9 +251,7 @@ const LessonList: React.FC<LessonListPropsType> = ({ course }) => {
) : (
<Box mt='10' textAlign='center'>
<Text>No lessons have been added to this course yet</Text>
<Box p='10px 0'>
<CreateLessonButton id={course.id} />
</Box>
<CreateLessonButton id={course.id} />
</Box>
)}
</Box>

33
src/pages/courses/edit/components/StudentTableList/StudentTableList.tsx
View File

@ -1,11 +1,9 @@
import React from 'react';
import { Table, Tbody, Button, Menu, MenuButton, MenuList, MenuItem } from '@chakra-ui/react';
import { Input, InputGroup, InputLeftElement } from '@chakra-ui/react';
import { Flex, Box, Text } from '@chakra-ui/react';
import { DeleteIcon, ChevronDownIcon } from '@chakra-ui/icons';
import { MdSearch, MdImportExport, MdRemove } from 'react-icons/md';
import { Table, Tbody, Button, Input, InputGroup, InputLeftElement, Flex, Box, Text } from '@chakra-ui/react';
import { MdSearch } from 'react-icons/md';
import AddStudentsModal from '@educt/components/Modals/AddStudentsModal';
import BulkActionsMenu from './BulkActionsMenu';
import StudentTableHead from './StudentTableHead';
/**
@ -18,7 +16,7 @@ import type { ICourse } from '@educt/interfaces';
* Hooks
*/
import { useCallback, useState } from 'react';
import BulkActionsMenu from './BulkActionsMenu';
import { useDisclosure } from '@chakra-ui/react';
type StudentTableListPropsType = {
render: React.FC<StudentTableRowPropsType>;
@ -29,6 +27,11 @@ const StudentTableList: React.FC<StudentTableListPropsType> = ({ render: Row, st
const [rows, setRows] = useState<ICourse['students']>(students);
const [selected, setSelected] = useState<ICourse['students']>([]);
const [search, setSearch] = useState<string>('');
const {
isOpen: isOpenAddStudentModal,
onOpen: onOpenAddStudentModal,
onClose: onCloseAddStudentModal,
} = useDisclosure();
/**
* Search for a student by input
@ -68,15 +71,21 @@ const StudentTableList: React.FC<StudentTableListPropsType> = ({ render: Row, st
if (rows.length === 0) {
return (
<Box textAlign='center' mt='10'>
<Text>There are no students in the course yet</Text>
<AddStudentsModal />
</Box>
<>
<AddStudentsModal isOpen={isOpenAddStudentModal} onClose={onCloseAddStudentModal} />
<Box textAlign='center' mt='10'>
<Text>There are no students in the course yet</Text>
<Button mt='2' onClick={onOpenAddStudentModal} size='sm' colorScheme='blue' variant='outline'>
Add student
</Button>
</Box>
</>
);
}
return (
<Box>
<AddStudentsModal isOpen={isOpenAddStudentModal} onClose={onCloseAddStudentModal} />
<Flex justifyContent='space-between' flexDir={{ base: 'column', lg: 'row' }}>
<Flex mb='2'>
<InputGroup mr='2'>
@ -94,12 +103,12 @@ const StudentTableList: React.FC<StudentTableListPropsType> = ({ render: Row, st
<BulkActionsMenu selected={selected} rows={rows} setRows={setRows} />
</>
)}
<Button variant='outline' colorScheme='blue'>
<Button onClick={onOpenAddStudentModal} variant='outline' colorScheme='blue'>
Add new
</Button>
</Flex>
</Flex>
<Table overflowX='hidden' borderRadius='lg' mt='2'>
<Table overflow='hidden' borderRadius='lg' mt='2'>
<StudentTableHead onSelectAll={handleSelectAll} />
<Tbody>
{rows.map(student => (