feat: sorting at filters bar

taskany-inc · Apr 15, 2024 · 7c27d29 · 7c27d29
1 parent 1575984
commit 7c27d29
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 15 deletions.
diff --git a/src/components/FiltersPanel/FiltersPanel.i18n/en.json b/src/components/FiltersPanel/FiltersPanel.i18n/en.json
@@ -12,5 +12,9 @@
     "Participant": "Participant",
     "Filter": "Filter",
     "Reset": "Reset",
-    "Grouping": "Grouping"
+    "Grouping": "Grouping",
+    "Title": "Title",
+    "Activity": "Issuer",
+    "UpdatedAt": "Updated",
+    "CreatedAt": "Created"
 }
diff --git a/src/components/FiltersPanel/FiltersPanel.i18n/ru.json b/src/components/FiltersPanel/FiltersPanel.i18n/ru.json
@@ -12,5 +12,9 @@
     "Participant": "Участник",
     "Filter": "Фильтр",
     "Reset": "Сбросить",
-    "Grouping": "Группировка"
+    "Grouping": "Группировка",
+    "Title": "Название",
+    "Activity": "Автор",
+    "UpdatedAt": "Обновлено",
+    "CreatedAt": "Создано"
 }
diff --git a/src/components/FiltersPanel/FiltersPanel.tsx b/src/components/FiltersPanel/FiltersPanel.tsx
@@ -2,7 +2,7 @@ import { FC, useCallback, memo, useState, useEffect, ReactNode, useMemo } from '
 import { Button } from '@taskany/bricks/harmony';
 import { nullable, useLatest } from '@taskany/bricks';
 
-import { FilterQueryState, QueryState, useUrlFilterParams } from '../../hooks/useUrlFilterParams';
+import { FilterQueryState, QueryState, SortableProps, useUrlFilterParams } from '../../hooks/useUrlFilterParams';
 import { FilterById } from '../../../trpc/inferredTypes';
 import { filtersPanel, filtersPanelTitle, filtersPanelResetButton } from '../../utils/domObjects';
 import {
@@ -31,6 +31,7 @@ import { AppliedStateFilter } from '../AppliedStateFilter/AppliedStateFilter';
 import { AppliedUsersFilter } from '../AppliedUsersFilter/AppliedUsersFilter';
 import { PageUserMenu } from '../PageUserMenu';
 import { AppliedTagFilter } from '../AppliedTagFilter/AppliedTagFilter';
+import { SortButton } from '../SortButton/SortButton';
 
 import { tr } from './FiltersPanel.i18n';
 
@@ -51,6 +52,7 @@ export const FiltersPanel: FC<{
         queryState,
         resetQueryState,
         batchQueryState,
+        setSortFilter,
         queryFilterState,
         groupBy,
         setGroupBy,
@@ -151,6 +153,44 @@ export const FiltersPanel: FC<{
         ];
     }, []);
 
+    const sortItems: { id: SortableProps; title: string }[] = useMemo(
+        () => [
+            {
+                id: 'title',
+                title: tr('Title'),
+            },
+            {
+                id: 'state',
+                title: tr('State'),
+            },
+            {
+                id: 'priority',
+                title: tr('Priority'),
+            },
+            {
+                id: 'project',
+                title: tr('Project'),
+            },
+            {
+                id: 'activity',
+                title: tr('Activity'),
+            },
+            {
+                id: 'owner',
+                title: tr('Owner'),
+            },
+            {
+                id: 'updatedAt',
+                title: tr('UpdatedAt'),
+            },
+            {
+                id: 'createdAt',
+                title: tr('CreatedAt'),
+            },
+        ],
+        [],
+    );
+
     const restFilterItems = useMemo(() => {
         if (filterQuery && filterQuery.stateType) {
             filterQuery.state = [];
@@ -190,10 +230,11 @@ export const FiltersPanel: FC<{
                     <FiltersBarLayoutSwitch value={layout} />
                 </FiltersBarItem>
                 <Separator />
-                {nullable(enableViewToggle, () => (
-                    <>
-                        <FiltersBarItem>
-                            <FiltersBarViewDropdown>
+
+                <FiltersBarItem>
+                    <FiltersBarViewDropdown>
+                        {nullable(enableViewToggle, () => (
+                            <>
                                 <FiltersBarDropdownTitle>{tr('Grouping')}</FiltersBarDropdownTitle>
                                 <FiltersBarDropdownContent>
                                     <Button
@@ -202,11 +243,36 @@ export const FiltersPanel: FC<{
                                         onClick={() => setGroupBy(groupedByProject ? undefined : 'project')}
                                     />
                                 </FiltersBarDropdownContent>
-                            </FiltersBarViewDropdown>
-                        </FiltersBarItem>
-                        <Separator />
-                    </>
-                ))}
+                            </>
+                        ))}
+
+                        <FiltersBarDropdownTitle>{tr('Sort')}</FiltersBarDropdownTitle>
+                        <FiltersBarDropdownContent>
+                            {sortItems.map(({ id, title }) => (
+                                <SortButton
+                                    title={title}
+                                    key={id}
+                                    value={filterQuery?.sort?.[id]}
+                                    onChange={(value) => {
+                                        const newSortQuery = {
+                                            ...filterQuery?.sort,
+                                            ...{
+                                                [id]: value,
+                                            },
+                                        };
+
+                                        if (!value) {
+                                            delete newSortQuery[id];
+                                        }
+
+                                        setSortFilter(newSortQuery);
+                                    }}
+                                />
+                            ))}
+                        </FiltersBarDropdownContent>
+                    </FiltersBarViewDropdown>
+                </FiltersBarItem>
+                <Separator />
                 <FiltersBarItem>
                     <GlobalSearch />
                 </FiltersBarItem>

diff --git a/src/components/SortButton/SortButton.tsx b/src/components/SortButton/SortButton.tsx
@@ -0,0 +1,36 @@
+import { ComponentProps, FC } from 'react';
+import { Button } from '@taskany/bricks/harmony';
+import { nullable } from '@taskany/bricks';
+import { IconArrowDownOutline, IconArrowUpOutline } from '@taskany/icons';
+
+import { SortDirection } from '../../hooks/useUrlFilterParams';
+
+const getNextDirection = (currentDirection?: SortDirection): SortDirection => {
+    switch (currentDirection) {
+        case 'asc':
+            return 'desc';
+        case 'desc':
+            return null;
+        default:
+            return 'asc';
+    }
+};
+
+interface SortButtonProps extends Omit<ComponentProps<typeof Button>, 'value' | 'onChange'> {
+    title: string;
+    value?: SortDirection;
+    onChange?: (value: SortDirection) => void;
+}
+
+export const SortButton: FC<SortButtonProps> = ({ title, value, onChange }) => {
+    return (
+        <Button
+            text={title}
+            view={value ? 'checked' : 'default'}
+            iconLeft={nullable(value, (v) =>
+                v === 'asc' ? <IconArrowDownOutline size="s" /> : <IconArrowUpOutline size="s" />,
+            )}
+            onClick={() => onChange?.(getNextDirection(value))}
+        />
+    );
+};
diff --git a/src/hooks/useUrlFilterParams.ts b/src/hooks/useUrlFilterParams.ts
@@ -6,8 +6,16 @@ import { FilterById, StateType } from '../../trpc/inferredTypes';
 import { StateTypeEnum } from '../schema/common';
 import { setCookie } from '../utils/cookies';
 
-type SortDirection = 'asc' | 'desc' | null;
-type SortableProps = 'title' | 'state' | 'priority' | 'project' | 'activity' | 'owner' | 'updatedAt' | 'createdAt';
+export type SortDirection = 'asc' | 'desc' | null;
+export type SortableProps =
+    | 'title'
+    | 'state'
+    | 'priority'
+    | 'project'
+    | 'activity'
+    | 'owner'
+    | 'updatedAt'
+    | 'createdAt';
 
 export const filtersNoSearchPresetCookie = 'taskany.NoSearchPreset';
 

diff --git a/trpc/router/goal.ts b/trpc/router/goal.ts
@@ -170,10 +170,10 @@ export const goal = router({
                     take: limit + 1,
                     skip,
                     cursor: cursor ? { id: cursor } : undefined,
-                    ...(query ? goalsFilter(query, activityId, role) : {}),
                     orderBy: {
                         id: 'asc',
                     },
+                    ...(query ? goalsFilter(query, activityId, role) : {}),
                     include: getGoalDeepQuery({
                         activityId,
                         role,