Feature/yh 1915

public/locales/en/task.json

@@ -78,6 +78,19 @@
 	"companies": {
 		"title": "Companies"
 	},
+	"sort": {
+			"fields": {
+					"title": "Sort by field",
+					"name": "Name",
+					"difficulty": "Difficulty",
+					"createdAt": "Date created"
+			},
+			"order": {
+					"title": "Sort by",
+					"asc": "Ascending",
+					"desc": "Descending"
+			}
+	},
 	"subscription.level": {
 		"title": "Subscription level",
 		"subtitle": "Specify the required subscription level for access to the task",

public/locales/ru/task.json

@@ -93,6 +93,19 @@
 	"companies": {
 		"title": "Компании"
 	},
+	"sort": {
+		"fields": {
+			"title": "Сортировать по полю",
+			"name": "Название",
+			"difficulty": "Сложность",
+			"createdAt": "Дата создания"
+		},
+		"order": {
+			"title": "Сортировать по",
+			"asc": "Возрастанию",
+			"desc": "Убыванию"
+		}
+	},
 	"subscription.level": {
 		"title": "Уровень подписки",
 		"subtitle": "Укажите требуемый уровень подписки для допуска к задаче",

src/entities/task/index.ts

@@ -12,6 +12,7 @@ export type {
 	TaskSubscriptionLevel,
 	TaskTestCaseResult,
 	TaskTestCaseResultTest,
+	TaskFilterOrderBy,
 } from './model/types/task';
 export type { TasksFilterParams } from './model/types/filters';
 export { taskApiUrls } from './model/constants/task';

src/entities/task/model/types/filters.ts

@@ -1,4 +1,6 @@
-import type { TaskCategoryCode, TaskDifficulty } from './task';
+import { SortOrder } from '@/shared/libs';
+
+import type { TaskCategoryCode, TaskDifficulty, TaskFilterOrderBy } from './task';
 
 export interface TasksFilterParams {
 	page?: number;
@@ -7,4 +9,6 @@ export interface TasksFilterParams {
 	category?: TaskCategoryCode;
 	langIds?: number[];
 	companyId?: string;
+	sortBy?: TaskFilterOrderBy;
+	sortOrder?: SortOrder;
 }

src/entities/task/model/types/task.ts

@@ -94,6 +94,8 @@ export interface TaskCategory {
 
 export type GetTaskCategoriesResponse = TaskCategory[];
 
+export type TaskFilterOrderBy = 'name' | 'difficulty' | 'createdAt' | 'updatedAt';
+
 export interface GetTasksListParams {
 	page?: number;
 	limit?: number;
@@ -105,7 +107,7 @@ export interface GetTasksListParams {
 	langIds?: number[];
 	isActive?: boolean;
 	search?: string;
-	sortBy?: 'name' | 'difficulty' | 'createdAt' | 'updatedAt';
+	sortBy?: TaskFilterOrderBy;
 	sortOrder?: SortOrder;
 	canSolve?: boolean;
 	collectionId?: number;

src/entities/topic/index.ts

@@ -1,3 +1,5 @@
+export { TopicFilterField } from './ui/TopicFilterField/TopicFilterField';
+
 export { TopicForm } from './ui/TopicForm/TopicForm';
 export { TopicFilterField } from './ui/TopicFilterField/TopicFilterField';
 

src/features/task/filterTasks/index.ts

@@ -3,3 +3,5 @@ export { useTasksFilters } from './model/hooks/useTasksFilters';
 export { TasksFiltersSkeleton } from './ui/TaskFilters/TasksFilters.skeleton';
 export { TaskDifficultyFilterSkeleton } from './ui/TaskDifficultyFilter/TaskDifficultyFilter.skeleton';
 export { TaskLanguagesFilterSkeleton } from './ui/TaskLanguagesFilter/TaskLanguagesFilter.skeleton';
+export { SortTasksByOrder } from './ui/SortTasksByOrder/SortTasksByOrder';
+export { SortTasksByField } from './ui/SortTasksByField/SortTasksByField';

src/features/task/filterTasks/model/hooks/useTasksFilters.ts

@@ -18,7 +18,9 @@ export const useTasksFilters = (initialParams: TasksFilterParams) => {
 		Boolean(filters.difficulty) ||
 		Boolean(filters.category) ||
 		Boolean(filters.companyId) ||
-		(filters.langIds || []).length > 0;
+		(filters.langIds || []).length > 0 || 
+		Boolean(filters.sortBy) || 
+		Boolean(filters.sortOrder);
 
 	const onChangePage = (page: TasksFilterParams['page']) => {
 		onFilterChange({ page });
@@ -45,6 +47,14 @@ export const useTasksFilters = (initialParams: TasksFilterParams) => {
 		onFilterChange({ langIds, page: 1 });
 	};
 
+	const onChangeSortField = (sortBy?: TasksFilterParams['sortBy']) => {
+		onFilterChange({ sortBy, page: 1 });
+	};
+
+	const onChangeSortOrder = (sortOrder?: TasksFilterParams['sortOrder']) => {
+		onFilterChange({ sortOrder, page: 1 });
+	};
+
 	return {
 		filters,
 		hasFilters,
@@ -54,6 +64,8 @@ export const useTasksFilters = (initialParams: TasksFilterParams) => {
 		onChangeLangIds,
 		onChangeCategory,
 		onChangeCompanyId,
+		onChangeSortField,
+		onChangeSortOrder,
 		onResetFilters,
 	};
 };

src/features/task/filterTasks/ui/SortTasksByField/SortTasksByField.tsx

@@ -0,0 +1,38 @@
+import { useTranslation } from 'react-i18next';
+
+import { i18Namespace, Tasks } from '@/shared/config';
+import { BaseFilterItem, BaseFilterSection } from '@/shared/ui/BaseFilterSection';
+
+import { TaskFilterOrderBy } from '@/entities/task';
+
+interface SortTasksFieldProps {
+	selectedOrderBy?: TaskFilterOrderBy;
+	onChangeSortField: (field?: TaskFilterOrderBy) => void;
+}
+
+export const SortTasksByField = ({ onChangeSortField, selectedOrderBy }: SortTasksFieldProps) => {
+	const { t } = useTranslation(i18Namespace.task);
+
+	const field: BaseFilterItem<TaskFilterOrderBy>[] = [
+		{ id: 'name', title: t(Tasks.SORT_FIELDS_NAME) },
+		{ id: 'difficulty', title: t(Tasks.SORT_DIFFICULTY) },
+		{ id: 'createdAt', title: t(Tasks.SORT_CREATED_AT) },
+	];
+
+	const preparedData = field.map((item) => ({
+		...item,
+		active: selectedOrderBy === item.id,
+	}));
+
+	const onChangeOrder = (orderBy: TaskFilterOrderBy) => {
+		onChangeSortField(orderBy === selectedOrderBy ? undefined : orderBy);
+	};
+
+	return (
+		<BaseFilterSection
+			title={t(Tasks.SORT_FIELDS_TITLE)}
+			data={preparedData}
+			onClick={onChangeOrder}
+		/>
+	);
+};

src/features/task/filterTasks/ui/SortTasksByOrder/SortTasksByOrder.tsx

@@ -0,0 +1,36 @@
+import { useTranslation } from 'react-i18next';
+
+import { i18Namespace, Tasks } from '@/shared/config';
+import { SortOrder } from '@/shared/libs';
+import { BaseFilterItem, BaseFilterSection } from '@/shared/ui/BaseFilterSection';
+
+interface SortTasksByOrderProps {
+	selectedOrder?: SortOrder;
+	onChangeSortOrder: (sortOrder?: SortOrder) => void;
+}
+
+export const SortTasksByOrder = ({ onChangeSortOrder, selectedOrder }: SortTasksByOrderProps) => {
+	const { t } = useTranslation(i18Namespace.task);
+
+	const order: BaseFilterItem<SortOrder>[] = [
+		{ id: 'ASC', title: t(Tasks.SORT_ASC) },
+		{ id: 'DESC', title: t(Tasks.SORT_DESC) },
+	];
+
+	const preparedData = order.map((item) => ({
+		...item,
+		active: selectedOrder === item.id,
+	}));
+
+	const onChangeOrder = (orderBy: SortOrder) => {
+		onChangeSortOrder(orderBy === selectedOrder ? undefined : orderBy);
+	};
+
+	return (
+		<BaseFilterSection
+			title={t(Tasks.SORT_ORDER_TITLE)}
+			onClick={onChangeOrder}
+			data={preparedData}
+		/>
+	);
+};

src/features/task/filterTasks/ui/TaskFilters/TasksFilters.tsx

@@ -7,25 +7,33 @@ import { SearchInput } from '@/shared/ui/SearchInput';
 import { PublicCompanySelect } from '@/entities/company';
 import { TaskCategoryFilterList, TasksFilterParams } from '@/entities/task';
 
+import { SortTasksByField } from '../SortTasksByField/SortTasksByField';
+import { SortTasksByOrder } from '../SortTasksByOrder/SortTasksByOrder';
 import { TaskDifficultyFilter } from '../TaskDifficultyFilter/TaskDifficultyFilter';
 import { TaskLanguagesFilter } from '../TaskLanguagesFilter/TaskLanguagesFilter';
 
 interface TasksFiltersProps {
 	filters: TasksFilterParams;
+	withSorting?: boolean;
 	onChangeTitle: (title: TasksFilterParams['title']) => void;
 	onChangeDifficulty: (difficulty?: TasksFilterParams['difficulty']) => void;
 	onChangeLangIds: (langIds?: TasksFilterParams['langIds']) => void;
 	onChangeCategory: (category?: TasksFilterParams['category']) => void;
 	onChangeCompanyId: (companyId?: TasksFilterParams['companyId']) => void;
+	onChangeSortField?: (sortBy?: TasksFilterParams['sortBy']) => void;
+	onChangeSortOrder?: (sortOrder?: TasksFilterParams['sortOrder']) => void;
 }
 
 export const TasksFilters = ({
 	filters,
+	withSorting,
 	onChangeTitle,
 	onChangeDifficulty,
 	onChangeLangIds,
 	onChangeCategory,
 	onChangeCompanyId,
+	onChangeSortField,
+	onChangeSortOrder,
 }: TasksFiltersProps) => {
 	const { title, difficulty, langIds, category, companyId } = filters;
 	const { t } = useTranslation(i18Namespace.task);
@@ -46,6 +54,18 @@ export const TasksFilters = ({
 			<TaskLanguagesFilter selectedLangIds={langIds} onChangeLangIds={onChangeLangIds} />
 			<TaskCategoryFilterList onChooseCategory={onChangeCategory} selectedCategory={category} />
 			<PublicCompanySelect value={companyId} onChange={onChangeCompanyId} />
+			{withSorting && onChangeSortField && onChangeSortOrder && (
+				<>
+					<SortTasksByField
+						selectedOrderBy={filters.sortBy}
+						onChangeSortField={onChangeSortField}
+					/>
+					<SortTasksByOrder
+						selectedOrder={filters.sortOrder}
+						onChangeSortOrder={onChangeSortOrder}
+					/>
+				</>
+			)}
 		</Flex>
 	);
 };

src/pages/admin/task/tasks/ui/TasksTablePage/TasksTablePage.tsx

@@ -33,6 +33,8 @@ const TasksTablePage = () => {
 		onChangeLangIds,
 		onChangeCategory,
 		onChangeCompanyId,
+		onChangeSortField,
+		onChangeSortOrder,
 	} = useTasksFilters({ page: 1 });
 
 	const {
@@ -47,6 +49,8 @@ const TasksTablePage = () => {
 		langIds: filters.langIds,
 		category: filters.category,
 		companyId: filters.companyId,
+		sortBy: filters.sortBy,
+		sortOrder: filters.sortOrder,
 	});
 
 	const onSelectTasks = (ids: SelectedAdminEntities<string>) => {
@@ -104,11 +108,14 @@ const TasksTablePage = () => {
 						renderFilter={() => (
 							<TasksFilters
 								filters={filters}
+								withSorting={true}
 								onChangeTitle={onChangeTitle}
 								onChangeDifficulty={onChangeDifficulty}
 								onChangeLangIds={onChangeLangIds}
 								onChangeCategory={onChangeCategory}
 								onChangeCompanyId={onChangeCompanyId}
+								onChangeSortField={onChangeSortField}
+								onChangeSortOrder={onChangeSortOrder}
 							/>
 						)}
 					/>

src/shared/config/i18n/i18nTranslations.ts

@@ -1680,6 +1680,13 @@ export enum Tasks {
 	DESCRIPTION_TAB_TITLE = 'description.tab.title',
 	DESCRIPTION_CONSTRAINTS_TITLE = 'description.constraints.title',
 	DESCRIPTION_TAB_SUBTITLE = 'description.tab.subtitle',
+	SORT_FIELDS_TITLE = 'sort.fields.title',
+	SORT_FIELDS_NAME = 'sort.fields.name',
+	SORT_DIFFICULTY = 'sort.fields.difficulty',
+	SORT_CREATED_AT = 'sort.fields.createdAt',
+	SORT_ORDER_TITLE = 'sort.order.title',
+	SORT_ASC = 'sort.order.asc',
+	SORT_DESC = 'sort.order.desc',
 	STATUS_ATTEMPTED = 'status.attempted',
 	STATUS_NOT_STARTED = 'status.not.started',
 	STATUS_SOLVED = 'status.solved',