LiquidCode/LiquidCode_Frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add filter

Browse Source
This commit is contained in:
Виталий Лавшонок
2025-11-08 15:54:49 +03:00
parent f7924cd564
commit 1cbd2dc0b3
14 changed files with 373 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/assets/icons/filters/index.ts
View File

@@ -1,6 +1,7 @@
import FilterActive from './filters-active.svg';
import Filter from './filters.svg';
import Sort from './sort.svg';
import SortActive from './sort-active.svg';
import iconFilterActive from './filters-active.svg';
import iconFilter from './filters.svg';
import iconSort from './sort.svg';
import iconSortActive from './sort-active.svg';
import iconSearch from './search.svg';
export { Filter, FilterActive, Sort, SortActive };
export { iconFilter, iconFilterActive, iconSort, iconSortActive, iconSearch };

3
src/assets/icons/filters/search.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.927 17.04L20.4001 20.4M19.2801 11.44C19.2801 15.7699 15.77 19.28 11.4401 19.28C7.11019 19.28 3.6001 15.7699 3.6001 11.44C3.6001 7.11009 7.11019 3.60001 11.4401 3.60001C15.77 3.60001 19.2801 7.11009 19.2801 11.44Z" stroke="#576466" stroke-width="2" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 389 B

21
src/components/drop-down-list/Filter.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react';
import { cn } from '../../lib/cn';
import { checkMark } from '../../assets/icons/input';
import { useClickOutside } from '../../hooks/useClickOutside';
import { Sort, SortActive } from '../../assets/icons/filters';
import { iconFilter, iconFilterActive } from '../../assets/icons/filters';
export interface FilterItem {
text: string;
@@ -17,7 +17,7 @@ interface FilterProps {
items: FilterItem[];
}
export const Filter: React.FC<FilterProps> = ({
export const FilterDropDown: React.FC<FilterProps> = ({
disabled = false,
className = '',
onChange,
@@ -53,7 +53,8 @@ export const Filter: React.FC<FilterProps> = ({
'items-center h-[40px] rounded-full bg-liquid-lighter w-[40px] flex',
'text-[18px] font-bold cursor-pointer select-none',
'overflow-hidden',
(active || value.length > 0) && 'w-fit border-liquid-brightmain border-[1px] border-solid',
(active || value.length > 0) &&
'w-fit border-liquid-brightmain border-[1px] border-solid',
)}
onClick={() => {
if (!disabled) setActive(!active);
@@ -64,15 +65,15 @@ export const Filter: React.FC<FilterProps> = ({
</div>
</div>
{/* Sort icons */}
{/* Filter icons */}
<img
src={Sort}
src={iconFilter}
className={cn(
'absolute left-[8px] top-[8px] h-[24px] w-[24px] rotate-0 transition-all duration-300 pointer-events-none',
)}
/>
<img
src={SortActive}
src={iconFilterActive}
className={cn(
'absolute left-[8px] top-[8px] h-[24px] w-[24px] rotate-0 transition-all duration-300 pointer-events-none opacity-0',
(active || value.length > 0) && 'opacity-100',
@@ -84,13 +85,17 @@ export const Filter: React.FC<FilterProps> = ({
className={cn(
'absolute rounded-[10px] bg-liquid-lighter w-[460px] left-0 top-[48px] z-50 transition-all duration-300',
'grid overflow-hidden',
active ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0',
active
? 'grid-rows-[1fr] opacity-100'
: 'grid-rows-[0fr] opacity-0',
)}
>
<div className="overflow-hidden p-[8px]">
<div className="overflow-y-scroll max-h-[200px] thin-scrollbar pr-[8px] grid grid-cols-2 gap-[20px]">
{items.map((v) => {
const selected = value.some((val) => val.value === v.value);
const selected = value.some(
(val) => val.value === v.value,
);
return (
<div
key={v.value}

26
src/components/drop-down-list/Sorter.tsx
View File

@@ -1,8 +1,8 @@
import React from 'react';
import { FC, useEffect, useRef, useState } from 'react';
import { cn } from '../../lib/cn';
import { checkMark } from '../../assets/icons/input';
import { useClickOutside } from '../../hooks/useClickOutside';
import { Sort, SortActive } from '../../assets/icons/filters';
import { iconSort, iconSortActive } from '../../assets/icons/filters';
export interface SorterItem {
text: string;
@@ -17,7 +17,7 @@ interface SorterProps {
items: SorterItem[];
}
export const Sorter: React.FC<SorterProps> = ({
export const SorterDropDown: FC<SorterProps> = ({
// disabled = false,
className = '',
onChange,
@@ -26,14 +26,15 @@ export const Sorter: React.FC<SorterProps> = ({
}) => {
if (items.length == 0) items.push({ text: '', value: '' });
const [value, setValue] = React.useState<SorterItem>(
const [value, setValue] = useState<SorterItem>(
defaultState != undefined ? defaultState : items[0],
);
const [active, setActive] = React.useState<boolean>(false);
const [active, setActive] = useState<boolean>(false);
const [activate, setActivate] = useState<Boolean>(false);
React.useEffect(() => onChange(value.value), [value]);
useEffect(() => onChange(value.value), [value]);
const ref = React.useRef<HTMLDivElement>(null);
const ref = useRef<HTMLDivElement>(null);
useClickOutside(ref, () => {
setActive(false);
@@ -46,7 +47,8 @@ export const Sorter: React.FC<SorterProps> = ({
'grid items-center h-[40px] rounded-full bg-liquid-lighter grid-cols-[40px]',
'text-[18px] font-bold cursor-pointer select-none',
'overflow-hidden',
active && ' grid-cols-[1fr] border-liquid-brightmain border-[1px] border-solid',
(active || activate) &&
' grid-cols-[1fr] border-liquid-brightmain border-[1px] border-solid',
)}
onClick={() => {
setActive(!active);
@@ -63,18 +65,17 @@ export const Sorter: React.FC<SorterProps> = ({
</div>
</div>
<div className="h-[24px] w-[24px]"></div>
<img
src={Sort}
src={iconSort}
className={cn(
' absolute right-[16px] h-[24px] w-[24px] top-[8px] left-[8px] rotate-0 transition-all duration-300 pointer-events-none',
)}
/>
<img
src={SortActive}
src={iconSortActive}
className={cn(
' absolute right-[16px] h-[24px] w-[24px] top-[8px] left-[8px] rotate-0 transition-all duration-300 pointer-events-none opacity-0',
active && ' opacity-100',
(active || activate) && ' opacity-100',
)}
/>
@@ -107,6 +108,7 @@ export const Sorter: React.FC<SorterProps> = ({
onClick={() => {
setValue(v);
setActive(false);
setActivate(true);
}}
>
{v.text}

59
src/components/input/SearchInput.tsx Normal file
View File

@@ -0,0 +1,59 @@
import React from 'react';
import { cn } from '../../lib/cn';
import { iconSearch } from '../../assets/icons/filters';
interface searchInputProps {
name?: string;
error?: string;
disabled?: boolean;
required?: boolean;
label?: string;
placeholder?: string;
className?: string;
onChange: (state: string) => void;
defaultState?: string;
autocomplete?: string;
onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
}
export const SearchInput: React.FC<searchInputProps> = ({
placeholder = '',
className = '',
onChange,
defaultState = '',
name = '',
autocomplete = '',
onKeyDown,
}) => {
const [value, setValue] = React.useState<string>(defaultState);
React.useEffect(() => onChange(value), [value]);
React.useEffect(() => setValue(defaultState), [defaultState]);
return (
<label
className={cn(
'relative bg-liquid-lighter w-[200px] h-[40px] rounded-full px-[16px] pl-[50px] py-[8px] cursor-text',
className,
)}
>
<input
className={cn(
'placeholder:text-liquid-light w-full bg-transparent outline-none text-liquid-white',
)}
value={value}
name={name}
autoComplete={autocomplete}
type="text"
placeholder={placeholder}
onChange={(e) => {
setValue(e.target.value);
}}
onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
if (onKeyDown) onKeyDown(e);
}}
/>
<img src={iconSearch} className=" absolute top-[8px] left-[16px]" />
</label>
);
};

1
src/views/home/account/missions/MyMissionItem.tsx
View File

@@ -1,5 +1,4 @@
import { cn } from '../../../../lib/cn';
import { IconError, IconSuccess } from '../../../../assets/icons/missions';
import { useNavigate } from 'react-router-dom';
import { Edit } from '../../../../assets/icons/input';

3
src/views/home/articles/Articles.tsx
View File

@@ -5,6 +5,7 @@ import ArticleItem from './ArticleItem';
import { setMenuActivePage } from '../../../redux/slices/store';
import { useNavigate } from 'react-router-dom';
import { fetchArticles } from '../../../redux/slices/articles';
import Filters from './Filter';
export interface Article {
id: number;
@@ -42,7 +43,7 @@ const Articles = () => {
/>
</div>
<div className="bg-liquid-lighter h-[50px] mb-[20px]"></div>
<Filters />
<div>
{articles.map((v, i) => (

51
src/views/home/articles/Filter.tsx Normal file
View File

@@ -0,0 +1,51 @@
import {
FilterDropDown,
FilterItem,
} from '../../../components/drop-down-list/Filter';
import { SorterDropDown } from '../../../components/drop-down-list/Sorter';
import { SearchInput } from '../../../components/input/SearchInput';
const Filters = () => {
const items: FilterItem[] = [
{ text: 'React', value: 'react' },
{ text: 'Vue', value: 'vue' },
{ text: 'Angular', value: 'angular' },
{ text: 'Svelte', value: 'svelte' },
{ text: 'Next.js', value: 'next' },
{ text: 'Nuxt', value: 'nuxt' },
{ text: 'Solid', value: 'solid' },
{ text: 'Qwik', value: 'qwik' },
];
return (
<div className=" h-[50px] mb-[20px] flex gap-[20px] items-center">
<SearchInput onChange={() => {}} placeholder="Поиск задачи" />
<SorterDropDown
items={[
{
value: '1',
text: 'Сложность',
},
{
value: '2',
text: 'Дата создания',
},
{
value: '3',
text: 'ID',
},
]}
onChange={(v) => console.log(v)}
/>
<FilterDropDown
items={items}
defaultState={[]}
onChange={(values) => console.log(values)}
/>
</div>
);
};
export default Filters;

25
src/views/home/contests/Contests.tsx
View File

@@ -6,6 +6,7 @@ import ContestsBlock from './ContestsBlock';
import { setMenuActivePage } from '../../../redux/slices/store';
import { fetchContests } from '../../../redux/slices/contests';
import ModalCreateContest from './ModalCreate';
import Filters from './Filter';
const Contests = () => {
const dispatch = useAppDispatch();
@@ -48,16 +49,24 @@ const Contests = () => {
/>
</div>
<div className="bg-liquid-lighter h-[50px] mb-[20px]" />
{status == 'loading' && <div className="text-liquid-white p-4">Загрузка контестов...</div>}
{status == 'failed' && <div className="text-red-500 p-4">Ошибка: {error}</div>}
{status == 'successful' &&
<Filters />
{status == 'loading' && (
<div className="text-liquid-white p-4">
Загрузка контестов...
</div>
)}
{status == 'failed' && (
<div className="text-red-500 p-4">Ошибка: {error}</div>
)}
{status == 'successful' && (
<>
<ContestsBlock
className="mb-[20px]"
title="Текущие"
contests={contests.filter((contest) => {
const endTime = new Date(contest.endsAt ?? new Date().toDateString()).getTime();
const endTime = new Date(
contest.endsAt ?? new Date().toDateString(),
).getTime();
return endTime >= now.getTime();
})}
/>
@@ -66,12 +75,14 @@ const Contests = () => {
className="mb-[20px]"
title="Прошедшие"
contests={contests.filter((contest) => {
const endTime = new Date(contest.endsAt ?? new Date().toDateString()).getTime();
const endTime = new Date(
contest.endsAt ?? new Date().toDateString(),
).getTime();
return endTime < now.getTime();
})}
/>
</>
}
)}
</div>
<ModalCreateContest

51
src/views/home/contests/Filter.tsx Normal file
View File

@@ -0,0 +1,51 @@
import {
FilterDropDown,
FilterItem,
} from '../../../components/drop-down-list/Filter';
import { SorterDropDown } from '../../../components/drop-down-list/Sorter';
import { SearchInput } from '../../../components/input/SearchInput';
const Filters = () => {
const items: FilterItem[] = [
{ text: 'React', value: 'react' },
{ text: 'Vue', value: 'vue' },
{ text: 'Angular', value: 'angular' },
{ text: 'Svelte', value: 'svelte' },
{ text: 'Next.js', value: 'next' },
{ text: 'Nuxt', value: 'nuxt' },
{ text: 'Solid', value: 'solid' },
{ text: 'Qwik', value: 'qwik' },
];
return (
<div className=" h-[50px] mb-[20px] flex gap-[20px] items-center">
<SearchInput onChange={() => {}} placeholder="Поиск задачи" />
<SorterDropDown
items={[
{
value: '1',
text: 'Сложность',
},
{
value: '2',
text: 'Дата создания',
},
{
value: '3',
text: 'ID',
},
]}
onChange={(v) => console.log(v)}
/>
<FilterDropDown
items={items}
defaultState={[]}
onChange={(values) => console.log(values)}
/>
</div>
);
};
export default Filters;

51
src/views/home/groups/Filter.tsx Normal file
View File

@@ -0,0 +1,51 @@
import {
FilterDropDown,
FilterItem,
} from '../../../components/drop-down-list/Filter';
import { SorterDropDown } from '../../../components/drop-down-list/Sorter';
import { SearchInput } from '../../../components/input/SearchInput';
const Filters = () => {
const items: FilterItem[] = [
{ text: 'React', value: 'react' },
{ text: 'Vue', value: 'vue' },
{ text: 'Angular', value: 'angular' },
{ text: 'Svelte', value: 'svelte' },
{ text: 'Next.js', value: 'next' },
{ text: 'Nuxt', value: 'nuxt' },
{ text: 'Solid', value: 'solid' },
{ text: 'Qwik', value: 'qwik' },
];
return (
<div className=" h-[50px] mb-[20px] flex gap-[20px] items-center">
<SearchInput onChange={() => {}} placeholder="Поиск задачи" />
<SorterDropDown
items={[
{
value: '1',
text: 'Сложность',
},
{
value: '2',
text: 'Дата создания',
},
{
value: '3',
text: 'ID',
},
]}
onChange={(v) => console.log(v)}
/>
<FilterDropDown
items={items}
defaultState={[]}
onChange={(values) => console.log(values)}
/>
</div>
);
};
export default Filters;

3
src/views/home/groups/Groups.tsx
View File

@@ -7,6 +7,7 @@ import { setMenuActivePage } from '../../../redux/slices/store';
import { fetchMyGroups } from '../../../redux/slices/groups';
import ModalCreate from './ModalCreate';
import ModalUpdate from './ModalUpdate';
import Filters from './Filter';
export interface GroupUpdate {
id: number;
@@ -86,7 +87,7 @@ const Groups = () => {
/>
</div>
<div className="bg-liquid-lighter h-[50px] mb-[20px]"></div>
<Filters />
<GroupsBlock
className="mb-[20px]"

16
src/views/home/missions/Filter.tsx
View File

@@ -1,5 +1,9 @@
import { Filter, FilterItem } from '../../../components/drop-down-list/Filter';
import { Sorter } from '../../../components/drop-down-list/Sorter';
import {
FilterDropDown,
FilterItem,
} from '../../../components/drop-down-list/Filter';
import { SorterDropDown } from '../../../components/drop-down-list/Sorter';
import { SearchInput } from '../../../components/input/SearchInput';
const Filters = () => {
const items: FilterItem[] = [
@@ -14,10 +18,10 @@ const Filters = () => {
];
return (
<div className=" h-[50px] mb-[20px] flex gap-[20px]">
<div></div>
<div className=" h-[50px] mb-[20px] flex gap-[20px] items-center">
<SearchInput onChange={() => {}} placeholder="Поиск задачи" />
<Sorter
<SorterDropDown
items={[
{
value: '1',
@@ -35,7 +39,7 @@ const Filters = () => {
onChange={(v) => console.log(v)}
/>
<Filter
<FilterDropDown
items={items}
defaultState={[]}
onChange={(values) => console.log(values)}

2
tsconfig.app.tsbuildinfo
View File

@@ -1 +1 @@
{"root":["./src/app.tsx","./src/axios.ts","./src/main.tsx","./src/vite-env.d.ts","./src/assets/icons/account/index.ts","./src/assets/icons/auth/index.ts","./src/assets/icons/groups/index.ts","./src/assets/icons/header/index.ts","./src/assets/icons/input/index.ts","./src/assets/icons/menu/index.ts","./src/assets/icons/missions/index.ts","./src/assets/logos/index.ts","./src/components/button/primarybutton.tsx","./src/components/button/reversebutton.tsx","./src/components/button/secondarybutton.tsx","./src/components/checkbox/checkbox.tsx","./src/components/drop-down-list/dropdownlist.tsx","./src/components/input/daterangeinput.tsx","./src/components/input/input.tsx","./src/components/modal/modal.tsx","./src/components/router/protectedroute.tsx","./src/components/switch/switch.tsx","./src/config/colors.ts","./src/hooks/useclickoutside.ts","./src/hooks/usequery.ts","./src/lib/cn.ts","./src/pages/article.tsx","./src/pages/articleeditor.tsx","./src/pages/contesteditor.tsx","./src/pages/home.tsx","./src/pages/mission.tsx","./src/redux/hooks.ts","./src/redux/store.ts","./src/redux/slices/account.ts","./src/redux/slices/articles.ts","./src/redux/slices/auth.ts","./src/redux/slices/contests.ts","./src/redux/slices/groups.ts","./src/redux/slices/missions.ts","./src/redux/slices/store.ts","./src/redux/slices/submit.ts","./src/views/article/header.tsx","./src/views/articleeditor/editor.tsx","./src/views/articleeditor/header.tsx","./src/views/articleeditor/marckdownpreview.tsx","./src/views/home/account/account.tsx","./src/views/home/account/accoutmenu.tsx","./src/views/home/account/rightpanel.tsx","./src/views/home/account/articles/articlesblock.tsx","./src/views/home/account/contests/contests.tsx","./src/views/home/account/contests/contestsblock.tsx","./src/views/home/account/contests/mycontestitem.tsx","./src/views/home/account/contests/registercontestitem.tsx","./src/views/home/account/missions/missionsblock.tsx","./src/views/home/articles/articleitem.tsx","./src/views/home/articles/articles.tsx","./src/views/home/auth/login.tsx","./src/views/home/auth/register.tsx","./src/views/home/contest/contest.tsx","./src/views/home/contest/missionitem.tsx","./src/views/home/contest/missions.tsx","./src/views/home/contest/submissionitem.tsx","./src/views/home/contest/submissions.tsx","./src/views/home/contests/contestitem.tsx","./src/views/home/contests/contests.tsx","./src/views/home/contests/contestsblock.tsx","./src/views/home/contests/modalcreate.tsx","./src/views/home/groups/group.tsx","./src/views/home/groups/groupitem.tsx","./src/views/home/groups/groups.tsx","./src/views/home/groups/groupsblock.tsx","./src/views/home/groups/modalcreate.tsx","./src/views/home/groups/modalupdate.tsx","./src/views/home/menu/menu.tsx","./src/views/home/menu/menuitem.tsx","./src/views/home/missions/missionitem.tsx","./src/views/home/missions/missions.tsx","./src/views/home/missions/modalcreate.tsx","./src/views/mission/codeeditor/codeeditor.tsx","./src/views/mission/statement/header.tsx","./src/views/mission/statement/latextcontainer.tsx","./src/views/mission/statement/missionsubmissions.tsx","./src/views/mission/statement/statement.tsx","./src/views/mission/statement/submissionitem.tsx","./src/views/mission/submission/submission.tsx"],"version":"5.6.2"}
{"root":["./src/app.tsx","./src/axios.ts","./src/main.tsx","./src/vite-env.d.ts","./src/assets/icons/account/index.ts","./src/assets/icons/auth/index.ts","./src/assets/icons/filters/index.ts","./src/assets/icons/groups/index.ts","./src/assets/icons/header/index.ts","./src/assets/icons/input/index.ts","./src/assets/icons/menu/index.ts","./src/assets/icons/missions/index.ts","./src/assets/logos/index.ts","./src/components/button/primarybutton.tsx","./src/components/button/reversebutton.tsx","./src/components/button/secondarybutton.tsx","./src/components/checkbox/checkbox.tsx","./src/components/drop-down-list/dropdownlist.tsx","./src/components/drop-down-list/filter.tsx","./src/components/drop-down-list/sorter.tsx","./src/components/input/daterangeinput.tsx","./src/components/input/input.tsx","./src/components/input/searchinput.tsx","./src/components/modal/modal.tsx","./src/components/router/protectedroute.tsx","./src/components/switch/switch.tsx","./src/config/colors.ts","./src/hooks/useclickoutside.ts","./src/hooks/usequery.ts","./src/lib/cn.ts","./src/pages/article.tsx","./src/pages/articleeditor.tsx","./src/pages/contesteditor.tsx","./src/pages/home.tsx","./src/pages/mission.tsx","./src/redux/hooks.ts","./src/redux/store.ts","./src/redux/slices/articles.ts","./src/redux/slices/auth.ts","./src/redux/slices/contests.ts","./src/redux/slices/groups.ts","./src/redux/slices/missions.ts","./src/redux/slices/store.ts","./src/redux/slices/submit.ts","./src/views/article/header.tsx","./src/views/articleeditor/editor.tsx","./src/views/articleeditor/header.tsx","./src/views/articleeditor/marckdownpreview.tsx","./src/views/home/account/account.tsx","./src/views/home/account/accoutmenu.tsx","./src/views/home/account/rightpanel.tsx","./src/views/home/account/articles/articlesblock.tsx","./src/views/home/account/contests/contests.tsx","./src/views/home/account/contests/contestsblock.tsx","./src/views/home/account/contests/mycontestitem.tsx","./src/views/home/account/contests/registercontestitem.tsx","./src/views/home/account/missions/missions.tsx","./src/views/home/account/missions/missionsblock.tsx","./src/views/home/account/missions/mymissionitem.tsx","./src/views/home/articles/articleitem.tsx","./src/views/home/articles/articles.tsx","./src/views/home/articles/filter.tsx","./src/views/home/auth/login.tsx","./src/views/home/auth/register.tsx","./src/views/home/contest/contest.tsx","./src/views/home/contest/missionitem.tsx","./src/views/home/contest/missions.tsx","./src/views/home/contest/submissionitem.tsx","./src/views/home/contest/submissions.tsx","./src/views/home/contests/contestitem.tsx","./src/views/home/contests/contests.tsx","./src/views/home/contests/contestsblock.tsx","./src/views/home/contests/filter.tsx","./src/views/home/contests/modalcreate.tsx","./src/views/home/groups/filter.tsx","./src/views/home/groups/group.tsx","./src/views/home/groups/groupitem.tsx","./src/views/home/groups/groups.tsx","./src/views/home/groups/groupsblock.tsx","./src/views/home/groups/modalcreate.tsx","./src/views/home/groups/modalupdate.tsx","./src/views/home/menu/menu.tsx","./src/views/home/menu/menuitem.tsx","./src/views/home/missions/filter.tsx","./src/views/home/missions/missionitem.tsx","./src/views/home/missions/missions.tsx","./src/views/home/missions/modalcreate.tsx","./src/views/mission/codeeditor/codeeditor.tsx","./src/views/mission/statement/header.tsx","./src/views/mission/statement/latextcontainer.tsx","./src/views/mission/statement/missionsubmissions.tsx","./src/views/mission/statement/statement.tsx","./src/views/mission/statement/submissionitem.tsx","./src/views/mission/submission/submission.tsx"],"version":"5.6.2"}