Skip to content
This repository has been archived by the owner on Apr 14, 2024. It is now read-only.

Commit

Permalink
refactor: страница поиска для декстопа (#100)
Browse files Browse the repository at this point in the history
  • Loading branch information
@DieWerkself
DieWerkself authored Mar 25, 2024
1 parent 88b9eaf commit 704ad68
Show file tree
Hide file tree
Showing 12 changed files with 428 additions and 199 deletions.
6 changes: 3 additions & 3 deletions src/app/providers/router/Layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,9 @@ export const Layout = () => {
</Stack>
) : (
<Flex alignItems="start" h="full">
<BlankPage />
{/* <BlankPage /> */}
{/* ВОТ ТУТ ДЛЯ ДЕСКТОПА РАСКОММЕНТИРУЙ, А BlankPage ЗАКОММЕНТЬ */}
{/* {!isNotFoundPage && <MenuDesktop />}
{!isNotFoundPage && <MenuDesktop />}
<Container
maxW="6xl"
minW="4xl"
Expand All @@ -61,7 +61,7 @@ export const Layout = () => {
flexDirection="column"
>
<Routes />
</Container> */}
</Container>
</Flex>
)}
</AuthProvider>
Expand Down
1 change: 1 addition & 0 deletions src/app/providers/router/router.paths.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ export const routerPaths = [
path: PATHS.search,
view: {
base: SearchPage,
desktop: SearchPageDesktop,
},
},
{
Expand Down
206 changes: 139 additions & 67 deletions src/entities/project/filter/ui/Filter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ import {
Container,
Stack,
Input,
Drawer,
DrawerOverlay,
DrawerContent,
} from '@chakra-ui/react';
import { useEffect } from 'react';
import { IoOptions } from 'react-icons/io5';
Expand Down Expand Up @@ -74,90 +77,159 @@ export const Filter = ({
}
/>

<Modal onClose={onClose} size="full" isOpen={isOpen}>
<ModalOverlay />
<ModalContent bg="bg" display="flex" alignItems="center">
<Container maxW="md">
<Flex alignItems="center" justifyContent="space-between" my={4}>
<Flex alignItems="baseline">
<CloseButton onClick={onClose} mr={2} />
<Heading variant="h2" mb={0}>
{!isMobile ? (
<Drawer onClose={onClose} placement="right" isOpen={isOpen} size="sm">
<DrawerOverlay />
<DrawerContent bg="bg" display="flex" alignItems="center" overflow="auto">
<Container maxW="md" px={6} py={8}>
<Flex alignItems="center" justifyContent="space-between" mb={8}>
<Heading variant="h2" mb={0} fontWeight="medium">
Фильтры
</Heading>
<CloseButton onClick={onClose} mr={2} />
</Flex>

<Stack spacing={6}>
<Box>
<Heading variant="h3" fontSize="lg" mb={3}>
Специализация
</Heading>
<FilterSpec
userSpecs={filter.specs}
setUserSpecs={(values) => {
updateFilter({ specs: values });
}}
/>
</Box>
<Box>
<Stack gap={1} mb={3}>
<Heading variant="h3" fontSize="lg" mb={3}>
Профессиональные навыки
</Heading>
<SearchSelect
isSearchFilter={true}
selectedItems={filter.skills}
setSelectedItems={(values) => {
updateFilter({ skills: values });
}}
/>
</Stack>
</Box>
</Stack>
</Container>
<Container maxW="md" py={6} bg="bg" position="sticky" bottom="0" mt="auto">
<Button
isLoading={isLoading}
fontSize="sm"
fontWeight="600"
w="full"
onClick={onClose}
>
{totalItems
? `Найдено позиций для проектов: ${totalItems}`
: 'Позиций для проектов не найдено'}
</Button>
<Button
variant="flat"
w="full"
fontSize="sm"
fontWeight="500"
colorScheme="purple"
// colorScheme="purple"
onClick={() => {
removeFilter();
}}
>
Сбросить
Сбросить фильтры
</Button>
</Flex>

<Stack spacing={6}>
<Box>
<Heading variant="h2" mb={3}>
Специализация
</Heading>
<FilterSpec
userSpecs={filter.specs}
setUserSpecs={(values) => {
updateFilter({ specs: values });
</Container>
</DrawerContent>
</Drawer>
) : (
<Modal onClose={onClose} size="full" isOpen={isOpen}>
<ModalOverlay />
<ModalContent bg="bg" display="flex" alignItems="center">
<Container maxW="md">
<Flex alignItems="center" justifyContent="space-between" my={4}>
<Flex alignItems="baseline">
<CloseButton onClick={onClose} mr={2} />
<Heading variant="h2" mb={0}>
Фильтры
</Heading>
</Flex>
<Button
variant="flat"
fontSize="sm"
fontWeight="500"
colorScheme="purple"
onClick={() => {
removeFilter();
}}
/>
</Box>
<Box>
<Stack gap={1} mb={3}>
>
Сбросить
</Button>
</Flex>

<Stack spacing={6}>
<Box>
<Heading variant="h2" mb={3}>
Профессиональные навыки
Специализация
</Heading>
<SearchSelect
isSearchFilter={true}
selectedItems={filter.skills}
setSelectedItems={(values) => {
updateFilter({ skills: values });
<FilterSpec
userSpecs={filter.specs}
setUserSpecs={(values) => {
updateFilter({ specs: values });
}}
/>
</Stack>
</Box>
<Box>
<Heading variant="h2">Дата начала проекта</Heading>
<Input
variant="filled"
bg="white"
borderRadius="full"
fontSize="sm"
color="gray.500"
placeholder="Выберите дату"
type="date"
value={filter.date.split('T', 1)[0]}
onChange={(e) => {
const value = e.target.value;
updateFilter({ date: value ? stringToServerDate(value) : value });
}}
/>
</Box>
</Stack>
</Container>
<Container maxW="md" py={6} bg="bg" position="sticky" bottom="0" mt="auto">
<Button
isLoading={isLoading}
fontSize="sm"
fontWeight="600"
w="full"
onClick={onClose}
>
{totalItems
? `Найдено позиций для проектов: ${totalItems}`
: 'Позиций для проектов не найдено'}
</Button>
</Container>
</ModalContent>
</Modal>
</Box>
<Box>
<Stack gap={1} mb={3}>
<Heading variant="h2" mb={3}>
Профессиональные навыки
</Heading>
<SearchSelect
isSearchFilter={true}
selectedItems={filter.skills}
setSelectedItems={(values) => {
updateFilter({ skills: values });
}}
/>
</Stack>
</Box>
<Box>
<Heading variant="h2">Дата начала проекта</Heading>
<Input
variant="filled"
bg="white"
borderRadius="full"
fontSize="sm"
color="gray.500"
placeholder="Выберите дату"
type="date"
value={filter.date.split('T', 1)[0]}
onChange={(e) => {
const value = e.target.value;
updateFilter({ date: value ? stringToServerDate(value) : value });
}}
/>
</Box>
</Stack>
</Container>
<Container maxW="md" py={6} bg="bg" position="sticky" bottom="0" mt="auto">
<Button
isLoading={isLoading}
fontSize="sm"
fontWeight="600"
w="full"
onClick={onClose}
>
{totalItems
? `Найдено позиций для проектов: ${totalItems}`
: 'Позиций для проектов не найдено'}
</Button>
</Container>
</ModalContent>
</Modal>
)}
</>
);
};
11 changes: 6 additions & 5 deletions src/features/filter/FilterSpecialization.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
Tag,
TagLabel,
IconButton,
useDisclosure,
} from '@chakra-ui/react';
import { useState } from 'react';

Expand All @@ -27,7 +28,7 @@ export const FilterSpecialization = ({
setUserSpecs,
doubleChecked,
}: FilterSpecializationProps) => {
const [specFilter, setSpecFilter] = useState(false);
const { isOpen, onOpen, onClose } = useDisclosure();
const [searchText, setSearchText] = useState('');

const { data: specGroup } = useGetSpecsGroups();
Expand All @@ -50,7 +51,7 @@ export const FilterSpecialization = ({
readOnly
placeholder="Например, Фронтенд разработчик"
onClick={() => {
setSpecFilter(true);
onOpen();
}}
/>
<InputRightElement pointerEvents="none">
Expand Down Expand Up @@ -89,11 +90,11 @@ export const FilterSpecialization = ({
</Flex>

<FilterSpecializationModal
isVisible={specFilter}
changeVisible={setSpecFilter}
isOpen={isOpen}
onClose={onClose}
stateGroup={specGroup}
state={specs}
userFilter={userSpecs}
userFilter={[...userSpecs]}
resetSpec={() => {
setUserSpecs([]);
}}
Expand Down
Loading

0 comments on commit 704ad68

Please sign in to comment.