github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: module and cycle sidebar stats item filter implementation (#4286)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2024-04-26 12:58:27 +05:30 committed by GitHub
parent 42cceb5e65
commit 88165a8fdb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 135 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
web/components/core/sidebar/sidebar-progress-stats.tsx
View File

@ -4,6 +4,8 @@ import Image from "next/image";
// headless ui // headless ui
import { Tab } from "@headlessui/react"; import { Tab } from "@headlessui/react";
import { import {
IIssueFilterOptions,
IIssueFilters,
IModule, IModule,
TAssigneesDistribution, TAssigneesDistribution,
TCompletionChartDistribution, TCompletionChartDistribution,
@ -37,6 +39,9 @@ type Props = {
roundedTab?: boolean; roundedTab?: boolean;
noBackground?: boolean; noBackground?: boolean;
isPeekView?: boolean; isPeekView?: boolean;
isCompleted?: boolean;
filters?: IIssueFilters | undefined;
handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
}; };
export const SidebarProgressStats: React.FC<Props> = ({ export const SidebarProgressStats: React.FC<Props> = ({
@ -47,6 +52,9 @@ export const SidebarProgressStats: React.FC<Props> = ({
roundedTab, roundedTab,
noBackground, noBackground,
isPeekView = false, isPeekView = false,
isCompleted = false,
filters,
handleFiltersUpdate,
}) => { }) => {
const { storedValue: tab, setValue: setTab } = useLocalStorage("tab", "Assignees"); const { storedValue: tab, setValue: setTab } = useLocalStorage("tab", "Assignees");
@ -145,20 +153,11 @@ export const SidebarProgressStats: React.FC<Props> = ({
} }
completed={assignee.completed_issues} completed={assignee.completed_issues}
total={assignee.total_issues} total={assignee.total_issues}
{...(!isPeekView && { {...(!isPeekView &&
onClick: () => { !isCompleted && {
// TODO: set filters here onClick: () => handleFiltersUpdate("assignees", assignee.assignee_id ?? ""),
// if (filters?.assignees?.includes(assignee.assignee_id ?? "")) selected: filters?.filters?.assignees?.includes(assignee.assignee_id ?? ""),
// setFilters({ })}
// assignees: filters?.assignees?.filter((a) => a !== assignee.assignee_id),
// });
// else
// setFilters({
// assignees: [...(filters?.assignees ?? []), assignee.assignee_id ?? ""],
// });
},
// selected: filters?.assignees?.includes(assignee.assignee_id ?? ""),
})}
/> />
); );
else else
@ -192,35 +191,52 @@ export const SidebarProgressStats: React.FC<Props> = ({
className="flex w-full flex-col gap-1.5 overflow-y-auto pt-3.5 vertical-scrollbar scrollbar-sm" className="flex w-full flex-col gap-1.5 overflow-y-auto pt-3.5 vertical-scrollbar scrollbar-sm"
> >
{distribution && distribution?.labels.length > 0 ? ( {distribution && distribution?.labels.length > 0 ? (
distribution.labels.map((label, index) => ( distribution.labels.map((label, index) => {
<SingleProgressStats if (label.label_id) {
key={label.label_id ?? `no-label-${index}`} return (
title={ <SingleProgressStats
<div className="flex items-center gap-2"> key={label.label_id}
<span title={
className="block h-3 w-3 rounded-full" <div className="flex items-center gap-2">
style={{ <span
backgroundColor: label.color ?? "transparent", className="block h-3 w-3 rounded-full"
}} style={{
/> backgroundColor: label.color ?? "transparent",
<span className="text-xs">{label.label_name ?? "No labels"}</span> }}
</div> />
} <span className="text-xs">{label.label_name ?? "No labels"}</span>
completed={label.completed_issues} </div>
total={label.total_issues} }
{...(!isPeekView && { completed={label.completed_issues}
// TODO: set filters here total={label.total_issues}
onClick: () => { {...(!isPeekView &&
// if (filters.labels?.includes(label.label_id ?? "")) !isCompleted && {
// setFilters({ onClick: () => handleFiltersUpdate("labels", label.label_id ?? ""),
// labels: filters?.labels?.filter((l) => l !== label.label_id), selected: filters?.filters?.labels?.includes(label.label_id ?? `no-label-${index}`),
// }); })}
// else setFilters({ labels: [...(filters?.labels ?? []), label.label_id ?? ""] }); />
}, );
// selected: filters?.labels?.includes(label.label_id ?? ""), } else {
})} return (
/> <SingleProgressStats
)) key={`no-label-${index}`}
title={
<div className="flex items-center gap-2">
<span
className="block h-3 w-3 rounded-full"
style={{
backgroundColor: label.color ?? "transparent",
}}
/>
<span className="text-xs">{label.label_name ?? "No labels"}</span>
</div>
}
completed={label.completed_issues}
total={label.total_issues}
/>
);
}
})
) : ( ) : (
<div className="flex h-full flex-col items-center justify-center gap-2"> <div className="flex h-full flex-col items-center justify-center gap-2">
<div className="flex h-20 w-20 items-center justify-center rounded-full bg-custom-background-80"> <div className="flex h-20 w-20 items-center justify-center rounded-full bg-custom-background-80">

62
web/components/cycles/sidebar.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react"; import React, { useCallback, useEffect, useState } from "react";
import isEmpty from "lodash/isEmpty"; import isEmpty from "lodash/isEmpty";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
@ -16,7 +16,7 @@ import {
} from "lucide-react"; } from "lucide-react";
import { Disclosure, Transition } from "@headlessui/react"; import { Disclosure, Transition } from "@headlessui/react";
// types // types
import { ICycle } from "@plane/types"; import { ICycle, IIssueFilterOptions } from "@plane/types";
// ui // ui
import { Avatar, ArchiveIcon, CustomMenu, Loader, LayersIcon, TOAST_TYPE, setToast, TextArea } from "@plane/ui"; import { Avatar, ArchiveIcon, CustomMenu, Loader, LayersIcon, TOAST_TYPE, setToast, TextArea } from "@plane/ui";
// components // components
@ -27,12 +27,13 @@ import { DateRangeDropdown } from "@/components/dropdowns";
// constants // constants
import { CYCLE_STATUS } from "@/constants/cycle"; import { CYCLE_STATUS } from "@/constants/cycle";
import { CYCLE_UPDATED } from "@/constants/event-tracker"; import { CYCLE_UPDATED } from "@/constants/event-tracker";
import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
import { EUserWorkspaceRoles } from "@/constants/workspace"; import { EUserWorkspaceRoles } from "@/constants/workspace";
// helpers // helpers
import { findHowManyDaysLeft, getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper"; import { findHowManyDaysLeft, getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
import { copyUrlToClipboard } from "@/helpers/string.helper"; import { copyUrlToClipboard } from "@/helpers/string.helper";
// hooks // hooks
import { useEventTracker, useCycle, useUser, useMember } from "@/hooks/store"; import { useEventTracker, useCycle, useUser, useMember, useIssues } from "@/hooks/store";
// services // services
import { CycleService } from "@/services/cycle.service"; import { CycleService } from "@/services/cycle.service";
@ -191,25 +192,36 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
} }
}; };
// TODO: refactor this const {
// const handleFiltersUpdate = useCallback( issuesFilter: { issueFilters, updateFilters },
// (key: keyof IIssueFilterOptions, value: string | string[]) => { } = useIssues(EIssuesStoreType.CYCLE);
// if (!workspaceSlug || !projectId) return;
// const newValues = issueFilters?.filters?.[key] ?? [];
// if (Array.isArray(value)) { const handleFiltersUpdate = useCallback(
// value.forEach((val) => { (key: keyof IIssueFilterOptions, value: string | string[]) => {
// if (!newValues.includes(val)) newValues.push(val); if (!workspaceSlug || !projectId) return;
// }); const newValues = issueFilters?.filters?.[key] ?? [];
// } else {
// if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
// else newValues.push(value);
// }
// updateFilters(workspaceSlug.toString(), projectId.toString(), EFilterType.FILTERS, { [key]: newValues }, cycleId); if (Array.isArray(value)) {
// }, // this validation is majorly for the filter start_date, target_date custom
// [workspaceSlug, projectId, cycleId, issueFilters, updateFilters] value.forEach((val) => {
// ); if (!newValues.includes(val)) newValues.push(val);
else newValues.splice(newValues.indexOf(val), 1);
});
} else {
if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
else newValues.push(value);
}
updateFilters(
workspaceSlug.toString(),
projectId.toString(),
EIssueFilterType.FILTERS,
{ [key]: newValues },
cycleId
);
},
[workspaceSlug, projectId, cycleId, issueFilters, updateFilters]
);
const cycleStatus = cycleDetails?.status?.toLocaleLowerCase(); const cycleStatus = cycleDetails?.status?.toLocaleLowerCase();
const isCompleted = cycleStatus === "completed"; const isCompleted = cycleStatus === "completed";
@ -251,8 +263,8 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
? "0 Issue" ? "0 Issue"
: `${cycleDetails.progress_snapshot.completed_issues}/${cycleDetails.progress_snapshot.total_issues}` : `${cycleDetails.progress_snapshot.completed_issues}/${cycleDetails.progress_snapshot.total_issues}`
: cycleDetails.total_issues === 0 : cycleDetails.total_issues === 0
? "0 Issue" ? "0 Issue"
: `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`; : `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`;
const daysLeft = findHowManyDaysLeft(cycleDetails.end_date); const daysLeft = findHowManyDaysLeft(cycleDetails.end_date);
@ -551,6 +563,9 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
}} }}
totalIssues={cycleDetails.progress_snapshot.total_issues} totalIssues={cycleDetails.progress_snapshot.total_issues}
isPeekView={Boolean(peekCycle)} isPeekView={Boolean(peekCycle)}
isCompleted={isCompleted}
filters={issueFilters}
handleFiltersUpdate={handleFiltersUpdate}
/> />
</div> </div>
)} )}
@ -570,6 +585,9 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
}} }}
totalIssues={cycleDetails.total_issues} totalIssues={cycleDetails.total_issues}
isPeekView={Boolean(peekCycle)} isPeekView={Boolean(peekCycle)}
isCompleted={isCompleted}
filters={issueFilters}
handleFiltersUpdate={handleFiltersUpdate}
/> />
</div> </div>
)} )}

39
web/components/modules/sidebar.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react"; import React, { useCallback, useEffect, useState } from "react";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
@ -15,7 +15,7 @@ import {
UserCircle2, UserCircle2,
} from "lucide-react"; } from "lucide-react";
import { Disclosure, Transition } from "@headlessui/react"; import { Disclosure, Transition } from "@headlessui/react";
import { ILinkDetails, IModule, ModuleLink } from "@plane/types"; import { IIssueFilterOptions, ILinkDetails, IModule, ModuleLink } from "@plane/types";
// ui // ui
import { import {
CustomMenu, CustomMenu,
@ -41,13 +41,14 @@ import {
MODULE_LINK_UPDATED, MODULE_LINK_UPDATED,
MODULE_UPDATED, MODULE_UPDATED,
} from "@/constants/event-tracker"; } from "@/constants/event-tracker";
import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
import { MODULE_STATUS } from "@/constants/module"; import { MODULE_STATUS } from "@/constants/module";
import { EUserProjectRoles } from "@/constants/project"; import { EUserProjectRoles } from "@/constants/project";
// helpers // helpers
import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper"; import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
import { copyUrlToClipboard } from "@/helpers/string.helper"; import { copyUrlToClipboard } from "@/helpers/string.helper";
// hooks // hooks
import { useModule, useUser, useEventTracker } from "@/hooks/store"; import { useModule, useUser, useEventTracker, useIssues } from "@/hooks/store";
// types // types
const defaultValues: Partial<IModule> = { const defaultValues: Partial<IModule> = {
@ -82,6 +83,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
const { getModuleById, updateModuleDetails, createModuleLink, updateModuleLink, deleteModuleLink, restoreModule } = const { getModuleById, updateModuleDetails, createModuleLink, updateModuleLink, deleteModuleLink, restoreModule } =
useModule(); useModule();
const { setTrackElement, captureModuleEvent, captureEvent } = useEventTracker(); const { setTrackElement, captureModuleEvent, captureEvent } = useEventTracker();
const {
issuesFilter: { issueFilters, updateFilters },
} = useIssues(EIssuesStoreType.MODULE);
const moduleDetails = getModuleById(moduleId); const moduleDetails = getModuleById(moduleId);
const moduleState = moduleDetails?.status?.toLocaleLowerCase(); const moduleState = moduleDetails?.status?.toLocaleLowerCase();
@ -245,6 +249,33 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
}); });
}, [moduleDetails, reset]); }, [moduleDetails, reset]);
const handleFiltersUpdate = useCallback(
(key: keyof IIssueFilterOptions, value: string | string[]) => {
if (!workspaceSlug || !projectId) return;
const newValues = issueFilters?.filters?.[key] ?? [];
if (Array.isArray(value)) {
// this validation is majorly for the filter start_date, target_date custom
value.forEach((val) => {
if (!newValues.includes(val)) newValues.push(val);
else newValues.splice(newValues.indexOf(val), 1);
});
} else {
if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
else newValues.push(value);
}
updateFilters(
workspaceSlug.toString(),
projectId.toString(),
EIssueFilterType.FILTERS,
{ [key]: newValues },
moduleId
);
},
[workspaceSlug, projectId, moduleId, issueFilters, updateFilters]
);
const startDate = getDate(moduleDetails?.start_date); const startDate = getDate(moduleDetails?.start_date);
const endDate = getDate(moduleDetails?.target_date); const endDate = getDate(moduleDetails?.target_date);
const isStartValid = startDate && startDate <= new Date(); const isStartValid = startDate && startDate <= new Date();
@ -599,6 +630,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
totalIssues={moduleDetails.total_issues} totalIssues={moduleDetails.total_issues}
module={moduleDetails} module={moduleDetails}
isPeekView={Boolean(peekModule)} isPeekView={Boolean(peekModule)}
filters={issueFilters}
handleFiltersUpdate={handleFiltersUpdate}
/> />
</div> </div>
)} )}