-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Janderson Souza Matias
authored and
Janderson Souza Matias
committed
Nov 27, 2023
1 parent
aaebfe3
commit 1cede63
Showing
12 changed files
with
300 additions
and
56 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import React, { useEffect } from 'react'; | ||
| import { Props } from './types'; | ||
| import { Controller, useForm } from 'react-hook-form'; | ||
| import { | ||
| Input, | ||
| Button, | ||
| Drawer, | ||
| FormLabel, | ||
| DrawerBody, | ||
| DrawerFooter, | ||
| DrawerHeader, | ||
| DrawerContent, | ||
| DrawerOverlay, | ||
| DrawerCloseButton, | ||
| } from '@chakra-ui/react'; | ||
| import { useTranslation } from 'react-i18next'; | ||
|
|
||
| const RegionForm: React.FC<Props> = ({ defaultValues, handleSubmitForm, handleClose }) => { | ||
| const { t } = useTranslation(); | ||
| const { | ||
| reset, | ||
| control, | ||
| handleSubmit, | ||
| formState: { isLoading }, | ||
| } = useForm({ defaultValues }); | ||
|
|
||
| useEffect(() => { | ||
| reset(defaultValues); | ||
| }, [defaultValues]); | ||
|
|
||
| return ( | ||
| <Drawer isOpen={!!defaultValues} placement="right" onClose={handleClose} size="md"> | ||
| <DrawerOverlay /> | ||
| <DrawerContent roundedLeft={14}> | ||
| <form | ||
| onSubmit={handleSubmit(handleSubmitForm)} | ||
| style={{ height: '100%', display: 'flex', flexDirection: 'column' }} | ||
| > | ||
| <DrawerCloseButton mt={2} color="Primary.$200" /> | ||
|
|
||
| <DrawerHeader> | ||
| {defaultValues && 'id' in defaultValues ? t('settings.tabs.region.edit') : t('settings.tabs.region.new')} | ||
| </DrawerHeader> | ||
|
|
||
| <DrawerBody> | ||
| <FormLabel htmlFor="name">{t('settings.tabs.region.form.name')}</FormLabel> | ||
| <Controller | ||
| rules={{ required: true }} | ||
| control={control} | ||
| name="name" | ||
| render={({ field, fieldState }) => ( | ||
| <Input id="name" {...field} value={field.value} isInvalid={!!fieldState.error} /> | ||
| )} | ||
| /> | ||
| </DrawerBody> | ||
|
|
||
| <DrawerFooter mt="auto"> | ||
| <Button colorScheme="blue" mr={3} type="submit" isLoading={isLoading}> | ||
| {t('common.save')} | ||
| </Button> | ||
| <Button variant="outline" mr={'auto'} onClick={handleClose} isLoading={isLoading}> | ||
| {t('common.cancel')} | ||
| </Button> | ||
| </DrawerFooter> | ||
| </form> | ||
| </DrawerContent> | ||
| </Drawer> | ||
| ); | ||
| }; | ||
|
|
||
| export default RegionForm; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import { IUser } from '@/types'; | ||
| import { SubmitHandler } from 'react-hook-form'; | ||
|
|
||
| export type Props = { | ||
| defaultValues: IUser; | ||
| handleClose: () => void; | ||
| handleSubmitForm: SubmitHandler<IUser>; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| import { useCallback, useContext, useEffect, useState } from 'react'; | ||
| import Icon from '@/components/Base/Icon'; | ||
| import Loader from '@/components/Base/Loader'; | ||
| import Menu from '@/components/Menu'; | ||
| import { IRegion, IUser } from '@/types'; | ||
| import { Center, HStack, Text, VStack, useTheme } from '@chakra-ui/react'; | ||
| import RegionForm from './Form'; | ||
| import { SubmitHandler } from 'react-hook-form'; | ||
| import { UserContext } from '@/contexts/UserContext'; | ||
| import { toast } from 'react-toastify'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import RegionService from '@/services/region'; | ||
|
|
||
| const Regions = () => { | ||
| const theme = useTheme(); | ||
| const { t } = useTranslation(); | ||
| const { user } = useContext(UserContext); | ||
| const [currentRegion, setCurrentRegion] = useState<IRegion>(); | ||
| const [regions, setRegions] = useState({ | ||
| isLoading: true, | ||
| data: [] as IRegion[], | ||
| }); | ||
|
|
||
| const refreshRegions = useCallback(() => { | ||
| RegionService.getRegions().then((regions) => setRegions({ isLoading: false, data: regions })); | ||
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| refreshRegions(); | ||
| }, [refreshRegions]); | ||
|
|
||
| const handleSubmitRegion: SubmitHandler<IRegion> = async (region) => { | ||
| try { | ||
| setRegions({ isLoading: true, data: [] }); | ||
| if ('id' in region) { | ||
| await RegionService.updateRegion(region.id, region); | ||
| } else { | ||
| await RegionService.saveRegion(region); | ||
| } | ||
| } catch (err) { | ||
| toast.error('An error as ocurred on management of user'); | ||
| } | ||
|
|
||
| setCurrentRegion(undefined); | ||
| refreshRegions(); | ||
| }; | ||
|
|
||
| const menuOptions = [ | ||
| { | ||
| label: t('settings.tabs.region.edit'), | ||
| handleClick: (user: IUser) => setCurrentRegion(user), | ||
| }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <> | ||
| {currentRegion && ( | ||
| <RegionForm | ||
| handleClose={() => setCurrentRegion(undefined)} | ||
| defaultValues={currentRegion as IUser} | ||
| handleSubmitForm={handleSubmitRegion} | ||
| /> | ||
| )} | ||
|
|
||
| <VStack alignItems={'flex-start'} width={'454px'} pl={'24px'}> | ||
| <Text fontWeight={600} fontSize={'20px'}> | ||
| {t('settings.tabs.region.title')} | ||
| </Text> | ||
|
|
||
| {regions.isLoading ? ( | ||
| <Center minW={'400px'} h={'400px'}> | ||
| <Loader /> | ||
| </Center> | ||
| ) : ( | ||
| <> | ||
| {regions.data.map((currentUser) => ( | ||
| <HStack | ||
| justifyContent={'space-between'} | ||
| borderBottom={'1px solid'} | ||
| borderColor={'Gray.$400'} | ||
| key={currentUser.id} | ||
| py={'12px'} | ||
| px={'16px'} | ||
| w={'100%'} | ||
| > | ||
| <HStack> | ||
| <Center w={'40px'} h={'40px'} borderRadius={'50%'} background={'Blue.$200'}> | ||
| <Icon name={'user'} /> | ||
| </Center> | ||
| <VStack justifyContent="center" gap={0} alignItems="flex-start"> | ||
| <Text>{currentUser.name}</Text> | ||
| <Text fontSize={'12px'}> | ||
| {t('settings.tabs.region.total_schools', { value: currentUser.schoolsCount })} | ||
| </Text> | ||
| </VStack> | ||
| </HStack> | ||
|
|
||
| {currentUser.id !== user?.id && <Menu items={menuOptions} currentItem={currentUser} />} | ||
| </HStack> | ||
| ))} | ||
|
|
||
| <HStack px={'16px'} py={'12px'} cursor={'pointer'} onClick={() => setCurrentRegion({} as any)}> | ||
| <Icon name={'plus'} color={theme.colors.Primary['$200']} /> | ||
| <Text color={'Primary.$200'}>{t('settings.tabs.region.new')}</Text> | ||
| </HStack> | ||
| </> | ||
| )} | ||
| </VStack> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default Regions; |
Oops, something went wrong.