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

refactor: страница поиска для декстопа #100

Merged
merged 3 commits into from
Mar 25, 2024
Merged

refactor: страница поиска для декстопа #100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
957bdcf
refactor: страница поиска для декстопа
DieWerkself Mar 23, 2024
684206d
refactor: загрузка следующих страниц
DieWerkself Mar 23, 2024
0380d4b
refactor: отступы и скроллбар
DieWerkself Mar 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/app/providers/router/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { useEffect, useRef } from 'react';
import { ScrollRestoration, useLocation } from 'react-router-dom';

import { BlankPage } from '~/pages/blank';

Check warning on line 5 in src/app/providers/router/Layout.tsx

View workflow job for this annotation

GitHub Actions / checks 

'BlankPage' is defined but never used. Allowed unused vars must match /^_/u

import { MenuBase, MenuDesktop } from '~/widgets/menu';

Expand Down Expand Up @@ -47,9 +47,9 @@
</Stack>
) : (
<Flex alignItems="start" h="full">
<BlankPage />
{/* <BlankPage /> */}
{/* ВОТ ТУТ ДЛЯ ДЕСКТОПА РАСКОММЕНТИРУЙ, А BlankPage ЗАКОММЕНТЬ */}
{/* {!isNotFoundPage && <MenuDesktop />}
{!isNotFoundPage && <MenuDesktop />}
<Container
maxW="6xl"
minW="4xl"
Expand All @@ -61,7 +61,7 @@
flexDirection="column"
>
<Routes />
</Container> */}
</Container>
</Flex>
)}
</AuthProvider>
Expand Down
1 change: 1 addition & 0 deletions src/app/providers/router/router.paths.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@
import {
DeletedProfile,
ProfileMePage,
ProfilePageDesktop,

Check warning on line 12 in src/app/providers/router/router.paths.ts

View workflow job for this annotation

GitHub Actions / checks 

'ProfilePageDesktop' is defined but never used. Allowed unused vars must match /^_/u
ProfileUserPage,
} from '~/pages/profile';
import {
AddProjectPage,
ProjectPage,
ProjectsPage,
ProjectsPageDesktop,

Check warning on line 19 in src/app/providers/router/router.paths.ts

View workflow job for this annotation

GitHub Actions / checks 

'ProjectsPageDesktop' is defined but never used. Allowed unused vars must match /^_/u
} from '~/pages/projects';
import { SearchPage, SearchPageDesktop } from '~/pages/search';
import {
Expand Down Expand Up @@ -80,6 +80,7 @@
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
Open in desktop
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
Open in desktop
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
Loading