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

feat: add button component

Browse Source
This commit is contained in:
Sergey Yarkov 2021-12-07 00:32:31 +03:00
parent 677e4d9ef5
commit 546a92bc8c
7 changed files with 26 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Buttons/index.tsx Normal file
View File

@ -0,0 +1,9 @@
import React from 'react';
import { ButtonProps, Button } from '@chakra-ui/button';
import { AddIcon } from '@chakra-ui/icons';
export const CreateButton: React.FC<ButtonProps> = props => (
<Button variant='outline' size='sm' leftIcon={<AddIcon />} {...props}>
Create new
</Button>
);

12
src/pages/courses/courses.tsx
View File

@ -27,6 +27,7 @@ import { useRootStore } from '@educt/hooks/useRootStore';
import { useHistory } from 'react-router';
import CategoryItem from './components/CategoryList/CategoryItem';
import CourseItem from './components/CourseList/CourseItem';
import { CreateButton } from '@educt/components/Buttons';
/**
* Courses page
@ -47,16 +48,7 @@ const CoursesPage: React.FC<IPageProps> = () => {
<Heading as='h1'>Courses</Heading>
<Text mt='2'>List of all courses.</Text>
</Box>
{(me.isAdmin || me.isTeacher) && (
<Button
onClick={() => history.push('/courses/create')}
variant='outline'
colorScheme='blue'
leftIcon={<AddIcon />}
>
Create new
</Button>
)}
{(me.isAdmin || me.isTeacher) && <CreateButton onClick={() => history.push('/courses/create')} />}
</Flex>
<Box mt='7'>
{(me.isAdmin || me.isTeacher) && <CourseStatusTabs />}

2
src/pages/courses/edit/components/StudentTableList/BulkActionsMenu.tsx
View File

@ -24,7 +24,7 @@ const BulkActionsMenu: React.FC<BulkActionsMenuPropsType> = ({ selected, rows, s
return (
<Menu isLazy>
<MenuButton as={Button} mr='3' ml='auto' rightIcon={<ChevronDownIcon />}>
<MenuButton as={Button} size='sm' variant='outline' mr='3' ml='auto' rightIcon={<ChevronDownIcon />}>
Bulk Actions
</MenuButton>
<MenuList>

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

@ -17,6 +17,7 @@ import type { ICourse } from '@educt/interfaces';
*/
import { useCallback, useState } from 'react';
import { useDisclosure } from '@chakra-ui/react';
import { AddIcon } from '@chakra-ui/icons';
type StudentTableListPropsType = {
render: React.FC<StudentTableRowPropsType>;
@ -90,7 +91,7 @@ const StudentTableList: React.FC<StudentTableListPropsType> = ({ render: Row, st
<Flex mb='2'>
<InputGroup mr='2'>
<InputLeftElement pointerEvents='none' children={<MdSearch color='gray.300' />} />
<Input value={search} onChange={handleSearch} type='text' placeholder='Search for student...' />
<Input value={search} size='sm' onChange={handleSearch} type='text' placeholder='Search for student...' />
</InputGroup>
</Flex>
@ -103,7 +104,7 @@ const StudentTableList: React.FC<StudentTableListPropsType> = ({ render: Row, st
<BulkActionsMenu selected={selected} rows={rows} setRows={setRows} />
</>
)}
<Button onClick={onOpenAddStudentModal} variant='outline' colorScheme='blue'>
<Button onClick={onOpenAddStudentModal} leftIcon={<AddIcon />} size='sm' variant='outline'>
Add new
</Button>
</Flex>
@ -121,6 +122,9 @@ const StudentTableList: React.FC<StudentTableListPropsType> = ({ render: Row, st
))}
</Tbody>
</Table>
<Text mt='4' fontSize='sm' color='gray.500'>
{students.length} students
</Text>
</Box>
);
};

5
src/pages/users/components/CreateUserForm/CreateUserForm.tsx
View File

@ -50,6 +50,7 @@ import { UsersPageContext } from '@educt/contexts';
* Schema
*/
import CreateUserSchema from './CreateUserForm.validator';
import { CreateButton } from '@educt/components/Buttons';
type CreateUserFormPropsType = {};
@ -108,9 +109,7 @@ const CreateUserModal: React.FC<CreateUserFormPropsType> = () => {
return (
<>
<Button onClick={onOpen} variant='outline' colorScheme='blue' leftIcon={<AddIcon />}>
Create new
</Button>
<CreateButton onClick={onOpen} />
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>

4
src/pages/users/components/UserList/UserList.tsx
View File

@ -77,7 +77,7 @@ const UserList: React.FC<UserListPropsType> = ({ render: Item, limit }) => {
{users.length !== 0 ? (
<>
<Box>
<Flex mt='7' p='0 10px' fontWeight='bold' alignItems='center' justifyContent='space-between'>
<Flex mt='5' p='0 10px' fontWeight='bold' alignItems='center' justifyContent='space-between'>
<Text>Total: ({pagination.total})</Text>
<Text>Actions</Text>
</Flex>
@ -98,7 +98,9 @@ const UserList: React.FC<UserListPropsType> = ({ render: Item, limit }) => {
</Box>
<Flex margin='2rem 0' flexDirection={{ base: 'column', sm: 'column', md: 'row' }}>
<Box textAlign={{ base: 'center', sm: 'center', md: 'left' }} mb={{ base: '2', md: '0' }}>
<Text fontSize='sm'>
Page <b>{pagination.current_page}</b> of {pagesCount}
</Text>
</Box>
<Flex ml='auto' mr='auto' justifyContent='center' flexWrap='wrap' alignItems='center' sx={{ gap: '30px' }}>
<Button

4
src/pages/users/components/UserSearch/UserSearch.tsx
View File

@ -43,13 +43,13 @@ const UserSearch: React.FC = () => {
return (
<Flex flexBasis='600px'>
<Select value={searchingRole} onChange={onSearchRole} w='full' mr='2'>
<Select value={searchingRole} onChange={onSearchRole} size='sm' w='full' mr='2'>
<option value='any'>Any role</option>
<option value={UserRoleEnum.ADMIN}>Administrator</option>
<option value={UserRoleEnum.TEACHER}>Teacher</option>
<option value={UserRoleEnum.STUDENT}>Student</option>
</Select>
<InputGroup maxW='400px' w='full'>
<InputGroup maxW='400px' w='full' size='sm'>
<InputLeftElement pointerEvents='none' children={<SearchIcon color='gray.300' />} />
<Input placeholder='Search for a user...' value={search || ''} onChange={onSearch} />
</InputGroup>