diff --git a/web/ce/components/issues/worklog/activity/sort-root.tsx b/web/ce/components/issues/worklog/activity/sort-root.tsx new file mode 100644 index 00000000000..75cd1cd0337 --- /dev/null +++ b/web/ce/components/issues/worklog/activity/sort-root.tsx @@ -0,0 +1,28 @@ +"use client"; + +import { FC, memo } from "react"; +import { ArrowUpWideNarrow, ArrowDownWideNarrow } from "lucide-react"; +import { getButtonStyling } from "@plane/ui"; +// helpers +import { cn } from "@/helpers/common.helper"; + +export type TActivitySortRoot = { + sortOrder: "asc" | "desc"; + toggleSort: () => void; +}; +export const ActivitySortRoot: FC = memo((props) => ( +
{ + props.toggleSort(); + }} + > + {props.sortOrder === "asc" ? ( + + ) : ( + + )} +
+)); + +ActivitySortRoot.displayName = "ActivitySortRoot"; \ No newline at end of file diff --git a/web/ce/store/issue/issue-details/activity.store.ts b/web/ce/store/issue/issue-details/activity.store.ts index 510f00dc15e..6c0029c4f8c 100644 --- a/web/ce/store/issue/issue-details/activity.store.ts +++ b/web/ce/store/issue/issue-details/activity.store.ts @@ -1,8 +1,8 @@ /* eslint-disable no-useless-catch */ import concat from "lodash/concat"; +import orderBy from "lodash/orderBy"; import set from "lodash/set"; -import sortBy from "lodash/sortBy"; import uniq from "lodash/uniq"; import update from "lodash/update"; import { action, makeObservable, observable, runInAction } from "mobx"; @@ -29,6 +29,7 @@ export interface IIssueActivityStoreActions { export interface IIssueActivityStore extends IIssueActivityStoreActions { // observables + sortOrder: 'asc' | 'desc' loader: TActivityLoader; activities: TIssueActivityIdMap; activityMap: TIssueActivityMap; @@ -36,10 +37,12 @@ export interface IIssueActivityStore extends IIssueActivityStoreActions { getActivitiesByIssueId: (issueId: string) => string[] | undefined; getActivityById: (activityId: string) => TIssueActivity | undefined; getActivityCommentByIssueId: (issueId: string) => TIssueActivityComment[] | undefined; + toggleSortOrder: ()=>void; } export class IssueActivityStore implements IIssueActivityStore { // observables + sortOrder: "asc" | "desc" = 'asc'; loader: TActivityLoader = "fetch"; activities: TIssueActivityIdMap = {}; activityMap: TIssueActivityMap = {}; @@ -50,11 +53,13 @@ export class IssueActivityStore implements IIssueActivityStore { constructor(protected store: CoreRootStore) { makeObservable(this, { // observables + sortOrder: observable.ref, loader: observable.ref, activities: observable, activityMap: observable, // actions fetchActivities: action, + toggleSortOrder: action }); // services this.issueActivityService = new IssueActivityService(); @@ -99,11 +104,15 @@ export class IssueActivityStore implements IIssueActivityStore { }); }); - activityComments = sortBy(activityComments, "created_at"); + activityComments = orderBy(activityComments, (e)=>new Date(e.created_at || 0), this.sortOrder); return activityComments; }); + toggleSortOrder = ()=>{ + this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc'; + } + // actions public async fetchActivities( workspaceSlug: string, diff --git a/web/core/components/issues/issue-detail/issue-activity/root.tsx b/web/core/components/issues/issue-detail/issue-activity/root.tsx index dbf44413b0c..7df297d2cc8 100644 --- a/web/core/components/issues/issue-detail/issue-activity/root.tsx +++ b/web/core/components/issues/issue-detail/issue-activity/root.tsx @@ -14,6 +14,7 @@ import { IssueActivityCommentRoot } from "@/components/issues/issue-detail"; import { useIssueDetail, useProject, useUser, useUserPermissions } from "@/hooks/store"; // plane web components import { ActivityFilterRoot, IssueActivityWorklogCreateButton } from "@/plane-web/components/issues/worklog"; +import { ActivitySortRoot } from "@/plane-web/components/issues/worklog/activity/sort-root"; // plane web constants import { TActivityFilters, defaultActivityFilters } from "@/plane-web/constants/issues"; import { EUserPermissions } from "@/plane-web/constants/user-permissions"; @@ -43,6 +44,7 @@ export const IssueActivity: FC = observer((props) => { // hooks const { issue: { getIssueById }, + activity: { sortOrder, toggleSortOrder}, createComment, updateComment, removeComment, @@ -162,6 +164,7 @@ export const IssueActivity: FC = observer((props) => { disabled={disabled} /> )} +