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

Merge branch 'develop' of gurusainath:makeplane/plane into fix/issue-activity-property-comment

Browse Source
This commit is contained in:
gurusainath 2024-01-21 23:32:43 +05:30
commit 4703489192
20 changed files with 563 additions and 613 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

214
apiserver/plane/app/views/cycle.py
View File

@ -916,6 +916,115 @@ class ActiveCycleEndpoint(BaseAPIView):
permission_classes = [
WorkspaceUserPermission,
]
def get_results_controller(self, results, active_cycles=None):
for cycle in results:
assignee_distribution = (
Issue.objects.filter(
issue_cycle__cycle_id=cycle["id"],
project_id=cycle["project"],
workspace__slug=self.kwargs.get("slug"),
)
.annotate(display_name=F("assignees__display_name"))
.annotate(assignee_id=F("assignees__id"))
.annotate(avatar=F("assignees__avatar"))
.values("display_name", "assignee_id", "avatar")
.annotate(
total_issues=Count(
"assignee_id",
filter=Q(archived_at__isnull=True, is_draft=False),
),
)
.annotate(
completed_issues=Count(
"assignee_id",
filter=Q(
completed_at__isnull=False,
archived_at__isnull=True,
is_draft=False,
),
)
)
.annotate(
pending_issues=Count(
"assignee_id",
filter=Q(
completed_at__isnull=True,
archived_at__isnull=True,
is_draft=False,
),
)
)
.order_by("display_name")
)
label_distribution = (
Issue.objects.filter(
issue_cycle__cycle_id=cycle["id"],
project_id=cycle["project"],
workspace__slug=self.kwargs.get("slug"),
)
.annotate(label_name=F("labels__name"))
.annotate(color=F("labels__color"))
.annotate(label_id=F("labels__id"))
.values("label_name", "color", "label_id")
.annotate(
total_issues=Count(
"label_id",
filter=Q(archived_at__isnull=True, is_draft=False),
)
)
.annotate(
completed_issues=Count(
"label_id",
filter=Q(
completed_at__isnull=False,
archived_at__isnull=True,
is_draft=False,
),
)
)
.annotate(
pending_issues=Count(
"label_id",
filter=Q(
completed_at__isnull=True,
archived_at__isnull=True,
is_draft=False,
),
)
)
.order_by("label_name")
)
cycle["distribution"] = {
"assignees": assignee_distribution,
"labels": label_distribution,
"completion_chart": {},
}
if cycle["start_date"] and cycle["end_date"]:
cycle["distribution"][
"completion_chart"
] = burndown_plot(
queryset=active_cycles.get(pk=cycle["id"]),
slug=self.kwargs.get("slug"),
project_id=cycle["project"],
cycle_id=cycle["id"],
)
priority_issues = Issue.objects.filter(issue_cycle__cycle_id=cycle["id"], priority__in=["urgent", "high"])
# Priority Ordering
priority_order = ["urgent", "high"]
priority_issues = priority_issues.annotate(
priority_order=Case(
*[When(priority=p, then=Value(i)) for i, p in enumerate(priority_order)],
output_field=CharField(),
)
).order_by("priority_order")[:5]
cycle["issues"] = IssueSerializer(priority_issues, many=True).data
return results
def get(self, request, slug):
subquery = CycleFavorite.objects.filter(
user=self.request.user,
@ -1045,100 +1154,11 @@ class ActiveCycleEndpoint(BaseAPIView):
)
.order_by("-created_at")
)
cycles = CycleSerializer(active_cycles, many=True).data
for cycle in cycles:
assignee_distribution = (
Issue.objects.filter(
issue_cycle__cycle_id=cycle["id"],
project_id=cycle["project"],
workspace__slug=slug,
)
.annotate(display_name=F("assignees__display_name"))
.annotate(assignee_id=F("assignees__id"))
.annotate(avatar=F("assignees__avatar"))
.values("display_name", "assignee_id", "avatar")
.annotate(
total_issues=Count(
"assignee_id",
filter=Q(archived_at__isnull=True, is_draft=False),
),
)
.annotate(
completed_issues=Count(
"assignee_id",
filter=Q(
completed_at__isnull=False,
archived_at__isnull=True,
is_draft=False,
),
)
)
.annotate(
pending_issues=Count(
"assignee_id",
filter=Q(
completed_at__isnull=True,
archived_at__isnull=True,
is_draft=False,
),
)
)
.order_by("display_name")
)
label_distribution = (
Issue.objects.filter(
issue_cycle__cycle_id=cycle["id"],
project_id=cycle["project"],
workspace__slug=slug,
)
.annotate(label_name=F("labels__name"))
.annotate(color=F("labels__color"))
.annotate(label_id=F("labels__id"))
.values("label_name", "color", "label_id")
.annotate(
total_issues=Count(
"label_id",
filter=Q(archived_at__isnull=True, is_draft=False),
)
)
.annotate(
completed_issues=Count(
"label_id",
filter=Q(
completed_at__isnull=False,
archived_at__isnull=True,
is_draft=False,
),
)
)
.annotate(
pending_issues=Count(
"label_id",
filter=Q(
completed_at__isnull=True,
archived_at__isnull=True,
is_draft=False,
),
)
)
.order_by("label_name")
)
cycle["distribution"] = {
"assignees": assignee_distribution,
"labels": label_distribution,
"completion_chart": {},
}
if cycle["start_date"] and cycle["end_date"]:
cycle["distribution"][
"completion_chart"
] = burndown_plot(
queryset=active_cycles.get(pk=cycle["id"]),
slug=slug,
project_id=cycle["project"],
cycle_id=cycle["id"],
)
return Response(cycles, status=status.HTTP_200_OK)
return self.paginate(
request=request,
queryset=active_cycles,
on_results=lambda active_cycles: CycleSerializer(active_cycles, many=True).data,
controller=lambda results: self.get_results_controller(results, active_cycles),
default_per_page=int(request.GET.get("per_page", 3))
)

12
apiserver/plane/db/models/issue.py
View File

@ -9,6 +9,7 @@ from django.db.models.signals import post_save
from django.dispatch import receiver
from django.core.validators import MinValueValidator, MaxValueValidator
from django.core.exceptions import ValidationError
from django.utils import timezone
# Module imports
from . import ProjectBaseModel
@ -183,6 +184,17 @@ class Issue(ProjectBaseModel):
self.state = default_state
except ImportError:
pass
else:
try:
from plane.db.models import State
# Check if the current issue state group is completed or not
if self.state.group == "completed":
self.completed_at = timezone.now()
else:
self.completed_at = None
except ImportError:
pass
if self._state.adding:
# Get the maximum display_id value from the database

6
apiserver/plane/utils/analytics_plot.py
View File

@ -12,6 +12,7 @@ from django.db.models.functions import (
ExtractYear,
Concat,
)
from django.utils import timezone
# Module imports
from plane.db.models import Issue
@ -168,6 +169,9 @@ def burndown_plot(queryset, slug, project_id, cycle_id=None, module_id=None):
if item["date"] is not None and item["date"] <= date
)
cumulative_pending_issues -= total_completed
chart_data[str(date)] = cumulative_pending_issues
if date > timezone.now().date():
chart_data[str(date)] = None
else:
chart_data[str(date)] = cumulative_pending_issues
return chart_data

2
packages/types/src/cycles.d.ts vendored
View File

@ -62,7 +62,7 @@ export type TAssigneesDistribution = {
};
export type TCompletionChartDistribution = {
[key: string]: number;
[key: string]: number | null;
};
export type TLabelsDistribution = {

12
packages/types/src/workspace.d.ts vendored
View File

@ -1,5 +1,6 @@
import { EUserWorkspaceRoles } from "constants/workspace";
import type {
ICycle,
IProjectMember,
IUser,
IUserLite,
@ -182,3 +183,14 @@ export interface IProductUpdateResponse {
eyes: number;
};
}
export interface IWorkspaceActiveCyclesResponse {
count: number;
extra_stats: null;
next_cursor: string;
next_page_results: boolean;
prev_cursor: string;
prev_page_results: boolean;
results: ICycle[];
total_pages: number;
}

14
packages/ui/src/progress/linear-progress-indicator.tsx
View File

@ -4,31 +4,37 @@ import { Tooltip } from "../tooltip";
type Props = {
data: any;
noTooltip?: boolean;
inPercentage?: boolean;
};
export const LinearProgressIndicator: React.FC<Props> = ({ data, noTooltip = false }) => {
export const LinearProgressIndicator: React.FC<Props> = ({ data, noTooltip = false, inPercentage = false }) => {
const total = data.reduce((acc: any, cur: any) => acc + cur.value, 0);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
let progress = 0;
const bars = data.map((item: any) => {
const bars = data.map((item: any, index: Number) => {
const width = `${(item.value / total) * 100}%`;
const style = {
width,
backgroundColor: item.color,
borderTopLeftRadius: index === 0 ? "99px" : 0,
borderBottomLeftRadius: index === 0 ? "99px" : 0,
borderTopRightRadius: index === data.length - 1 ? "99px" : 0,
borderBottomRightRadius: index === data.length - 1 ? "99px" : 0,
};
progress += item.value;
if (noTooltip) return <div style={style} />;
if (width === "0%") return <></>;
else
return (
<Tooltip key={item.id} tooltipContent={`${item.name} ${Math.round(item.value)}%`}>
<Tooltip key={item.id} tooltipContent={`${item.name} ${Math.round(item.value)}${inPercentage ? "%" : ""}`}>
<div style={style} />
</Tooltip>
);
});
return (
<div className="flex h-1 w-full items-center justify-between gap-1">
<div className="flex h-1.5 w-full items-center justify-between gap-1 rounded-l-full rounded-r-full">
{total === 0 ? (
<div className="flex h-full w-full gap-1 bg-neutral-500">{bars}</div>
) : (

4
web/components/account/o-auth/o-auth-options.tsx
View File

@ -23,6 +23,8 @@ export const OAuthOptions: React.FC<Props> = observer((props) => {
const {
config: { envConfig },
} = useApplication();
// derived values
const areBothOAuthEnabled = envConfig?.google_client_id && envConfig?.github_client_id;
const handleGoogleSignIn = async ({ clientId, credential }: any) => {
try {
@ -73,7 +75,7 @@ export const OAuthOptions: React.FC<Props> = observer((props) => {
<p className="mx-3 flex-shrink-0 text-center text-sm text-onboarding-text-400">Or continue with</p>
<hr className="w-full border-onboarding-border-100" />
</div>
<div className="mx-auto mt-7 grid grid-cols-2 gap-4 overflow-hidden sm:w-96">
<div className={`mx-auto mt-7 grid gap-4 overflow-hidden sm:w-96 ${areBothOAuthEnabled ? "grid-cols-2" : ""}`}>
{envConfig?.google_client_id && (
<div className="h-[42px] flex items-center !overflow-hidden">
<GoogleSignInButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} type={type} />

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

@ -30,7 +30,7 @@ export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
<CircularProgressIndicator percentage={(completed / total) * 100} size={14} strokeWidth={2} />
</span>
<span className="w-8 text-right">
{isNaN(Math.floor((completed / total) * 100)) ? "0" : Math.floor((completed / total) * 100)}%
{isNaN(Math.round((completed / total) * 100)) ? "0" : Math.round((completed / total) * 100)}%
</span>
</div>
<span>of {total}</span>

287
web/components/cycles/active-cycle-details.tsx
View File

@ -3,7 +3,7 @@ import Link from "next/link";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
// hooks
import { useApplication, useCycle, useIssues, useProjectState } from "hooks/store";
import { useApplication, useCycle, useIssues, useProject } from "hooks/store";
import useToast from "hooks/use-toast";
// ui
import { SingleProgressStats } from "components/core";
@ -12,55 +12,27 @@ import {
Loader,
Tooltip,
LinearProgressIndicator,
ContrastIcon,
RunningIcon,
LayersIcon,
StateGroupIcon,
PriorityIcon,
Avatar,
CycleGroupIcon,
} from "@plane/ui";
// components
import ProgressChart from "components/core/sidebar/progress-chart";
import { ActiveCycleProgressStats } from "components/cycles";
import { ViewIssueLabel } from "components/issues";
import { StateDropdown } from "components/dropdowns";
// icons
import { AlarmClock, AlertTriangle, ArrowRight, CalendarDays, Star, Target } from "lucide-react";
import { ArrowRight, CalendarCheck, CalendarDays, Star, Target } from "lucide-react";
// helpers
import { renderFormattedDate, findHowManyDaysLeft } from "helpers/date-time.helper";
import { renderFormattedDate, findHowManyDaysLeft, renderFormattedDateWithoutYear } from "helpers/date-time.helper";
import { truncateText } from "helpers/string.helper";
// types
import { ICycle } from "@plane/types";
import { ICycle, TCycleGroups } from "@plane/types";
// constants
import { EIssuesStoreType } from "constants/issue";
import { ACTIVE_CYCLE_ISSUES } from "store/issue/cycle";
import { CYCLE_ISSUES_WITH_PARAMS } from "constants/fetch-keys";
const stateGroups = [
{
key: "backlog_issues",
title: "Backlog",
color: "#dee2e6",
},
{
key: "unstarted_issues",
title: "Unstarted",
color: "#26b5ce",
},
{
key: "started_issues",
title: "Started",
color: "#f7ae59",
},
{
key: "cancelled_issues",
title: "Cancelled",
color: "#d687ff",
},
{
key: "completed_issues",
title: "Completed",
color: "#09a953",
},
];
import { STATE_GROUPS_DETAILS } from "constants/cycle";
interface IActiveCycleDetails {
workspaceSlug: string;
@ -72,8 +44,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
const { workspaceSlug, projectId } = props;
// store hooks
const {
issues: { issues, fetchActiveCycleIssues },
issueMap,
issues: { fetchActiveCycleIssues },
} = useIssues(EIssuesStoreType.CYCLE);
const {
commandPalette: { toggleCreateCycleModal },
@ -85,7 +56,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
addCycleToFavorites,
removeCycleFromFavorites,
} = useCycle();
const { getProjectStates } = useProjectState();
const { currentProjectDetails } = useProject();
// toast alert
const { setToastAlert } = useToast();
@ -95,9 +66,8 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
);
const activeCycle = currentProjectActiveCycleId ? getActiveCycleById(currentProjectActiveCycleId) : null;
const issueIds = issues?.[ACTIVE_CYCLE_ISSUES];
useSWR(
const { data: activeCycleIssues } = useSWR(
workspaceSlug && projectId && currentProjectActiveCycleId
? CYCLE_ISSUES_WITH_PARAMS(currentProjectActiveCycleId, { priority: "urgent,high" })
: null,
@ -142,14 +112,13 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
const startDate = new Date(activeCycle.start_date ?? "");
const groupedIssues: any = {
backlog: activeCycle.backlog_issues,
unstarted: activeCycle.unstarted_issues,
started: activeCycle.started_issues,
completed: activeCycle.completed_issues,
cancelled: activeCycle.cancelled_issues,
started: activeCycle.started_issues,
unstarted: activeCycle.unstarted_issues,
backlog: activeCycle.backlog_issues,
};
const cycleStatus = activeCycle.status.toLocaleLowerCase();
const cycleStatus = activeCycle.status.toLowerCase() as TCycleGroups;
const handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
@ -177,7 +146,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
});
};
const progressIndicatorData = stateGroups.map((group, index) => ({
const progressIndicatorData = STATE_GROUPS_DETAILS.map((group, index) => ({
id: index,
name: group.title,
value:
@ -187,6 +156,8 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
color: group.color,
}));
const daysLeft = findHowManyDaysLeft(activeCycle.end_date ?? new Date());
return (
<div className="grid-row-2 grid divide-y rounded-[10px] border border-custom-border-200 bg-custom-background-100 shadow">
<div className="grid grid-cols-1 divide-y border-custom-border-200 lg:grid-cols-3 lg:divide-x lg:divide-y-0">
@ -196,68 +167,15 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
<div className="flex items-center justify-between gap-1">
<span className="flex items-center gap-1">
<span className="h-5 w-5">
<ContrastIcon
className="h-5 w-5"
color={`${
cycleStatus === "current"
? "#09A953"
: cycleStatus === "upcoming"
? "#F7AE59"
: cycleStatus === "completed"
? "#3F76FF"
: cycleStatus === "draft"
? "rgb(var(--color-text-200))"
: ""
}`}
/>
<CycleGroupIcon cycleGroup={cycleStatus} className="h-4 w-4" />
</span>
<Tooltip tooltipContent={activeCycle.name} position="top-left">
<h3 className="break-words text-lg font-semibold">{truncateText(activeCycle.name, 70)}</h3>
</Tooltip>
</span>
<span className="flex items-center gap-1 capitalize">
<span
className={`rounded-full px-1.5 py-0.5
${
cycleStatus === "current"
? "bg-green-600/5 text-green-600"
: cycleStatus === "upcoming"
? "bg-orange-300/5 text-orange-300"
: cycleStatus === "completed"
? "bg-blue-500/5 text-blue-500"
: cycleStatus === "draft"
? "bg-neutral-400/5 text-neutral-400"
: ""
}`}
>
{cycleStatus === "current" ? (
<span className="flex gap-1 whitespace-nowrap">
<RunningIcon className="h-4 w-4" />
{findHowManyDaysLeft(activeCycle.end_date ?? new Date())} Days Left
</span>
) : cycleStatus === "upcoming" ? (
<span className="flex gap-1 whitespace-nowrap">
<AlarmClock className="h-4 w-4" />
{findHowManyDaysLeft(activeCycle.start_date ?? new Date())} Days Left
</span>
) : cycleStatus === "completed" ? (
<span className="flex gap-1 whitespace-nowrap">
{activeCycle.total_issues - activeCycle.completed_issues > 0 && (
<Tooltip
tooltipContent={`${activeCycle.total_issues - activeCycle.completed_issues} more pending ${
activeCycle.total_issues - activeCycle.completed_issues === 1 ? "issue" : "issues"
}`}
>
<span>
<AlertTriangle className="h-3.5 w-3.5" />
</span>
</Tooltip>
)}{" "}
Completed
</span>
) : (
cycleStatus
)}
<span className="flex gap-1 whitespace-nowrap rounded-sm text-sm px-3 py-0.5 bg-amber-500/10 text-amber-500">
{`${daysLeft} ${daysLeft > 1 ? "Days" : "Day"} Left`}
</span>
{activeCycle.is_favorite ? (
<button
@ -344,7 +262,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
<div className="flex h-full w-full flex-col p-4 text-custom-text-200">
<div className="flex w-full items-center gap-2 py-1">
<span>Progress</span>
<LinearProgressIndicator data={progressIndicatorData} />
<LinearProgressIndicator data={progressIndicatorData} inPercentage />
</div>
<div className="mt-2 flex flex-col items-center gap-1">
{Object.keys(groupedIssues).map((group, index) => (
@ -355,7 +273,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
<span
className="block h-3 w-3 rounded-full "
style={{
backgroundColor: stateGroups[index].color,
backgroundColor: STATE_GROUPS_DETAILS[index].color,
}}
/>
<span className="text-xs capitalize">{group}</span>
@ -374,107 +292,66 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
</div>
</div>
<div className="grid grid-cols-1 divide-y border-custom-border-200 lg:grid-cols-2 lg:divide-x lg:divide-y-0">
<div className="flex flex-col justify-between p-4">
<div>
<div className="text-custom-primary">High Priority Issues</div>
<div className="my-3 flex max-h-[240px] min-h-[240px] flex-col gap-2.5 overflow-y-scroll rounded-md">
{issueIds ? (
issueIds.length > 0 ? (
issueIds.map((issue: any) => (
<Link
key={issue.id}
href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
className="flex cursor-pointer flex-wrap items-center justify-between gap-2 rounded-md border border-custom-border-200 bg-custom-background-90 px-3 py-1.5"
>
<div className="flex flex-col gap-1">
<div>
<Tooltip
tooltipHeading="Issue ID"
tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
>
<span className="flex-shrink-0 text-xs text-custom-text-200">
{issue.project_detail?.identifier}-{issue.sequence_id}
</span>
</Tooltip>
</div>
<Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
<span className="text-[0.825rem] text-custom-text-100">{truncateText(issue.name, 30)}</span>
</Tooltip>
</div>
<div className="flex items-center gap-1.5">
<div
className={`grid h-6 w-6 flex-shrink-0 place-items-center items-center rounded border shadow-sm ${
issue.priority === "urgent"
? "border-red-500/20 bg-red-500/20 text-red-500"
: "border-orange-500/20 bg-orange-500/20 text-orange-500"
}`}
>
<PriorityIcon priority={issue.priority} className="text-sm" />
</div>
<ViewIssueLabel labelDetails={issue.label_details} maxRender={2} />
<div className={`flex items-center gap-2 text-custom-text-200`}>
{issue.assignees && issue.assignees.length > 0 && Array.isArray(issue.assignees) ? (
<div className="-my-0.5 flex items-center justify-center gap-2">
<AvatarGroup showTooltip={false}>
{issue.assignee_details.map((assignee: any) => (
<Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
))}
</AvatarGroup>
</div>
) : (
""
)}
</div>
</div>
</Link>
))
) : (
<div className="grid place-items-center text-center text-sm text-custom-text-200">
No issues present in the cycle.
</div>
)
) : (
<Loader className="space-y-3">
<Loader.Item height="50px" />
<Loader.Item height="50px" />
<Loader.Item height="50px" />
</Loader>
)}
</div>
</div>
<div className="flex flex-col gap-3 p-4 max-h-60 overflow-hidden">
<div className="text-custom-primary">High Priority Issues</div>
<div className="flex flex-col h-full gap-2.5 overflow-y-scroll rounded-md">
{activeCycleIssues ? (
activeCycleIssues.length > 0 ? (
activeCycleIssues.map((issue: any) => (
<Link
key={issue.id}
href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
className="flex cursor-pointer flex-wrap items-center justify-between gap-2 rounded-md border border-custom-border-200 px-3 py-1.5"
>
<div className="flex items-center gap-1.5">
<PriorityIcon priority={issue.priority} withContainer size={12} />
{issueIds && issueIds.length > 0 && (
<div className="flex items-center justify-between gap-2">
<div className="h-1 w-full rounded-full bg-custom-background-80">
<div
className="h-1 rounded-full bg-green-600"
style={{
width:
issueIds &&
`${
(issueIds.filter((issue: any) => issue?.state_detail?.group === "completed")?.length /
issueIds.length) *
100 ?? 0
}%`,
}}
/>
</div>
<div className="w-16 text-end text-xs text-custom-text-200">
of{" "}
{
issueIds?.filter(
(issueId) =>
getProjectStates(issueMap[issueId]?.project_id)?.find(
(issue) => issue.id === issueMap[issueId]?.state_id
)?.group === "completed"
)?.length
}{" "}
of {issueIds?.length}
</div>
</div>
)}
<Tooltip
tooltipHeading="Issue ID"
tooltipContent={`${currentProjectDetails?.identifier}-${issue.sequence_id}`}
>
<span className="flex-shrink-0 text-xs text-custom-text-200">
{currentProjectDetails?.identifier}-{issue.sequence_id}
</span>
</Tooltip>
<Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
<span className="text-[0.825rem] text-custom-text-100">{truncateText(issue.name, 30)}</span>
</Tooltip>
</div>
<div className="flex items-center gap-1.5 flex-shrink-0">
<StateDropdown
value={issue.state_id ?? undefined}
onChange={() => {}}
projectId={projectId?.toString() ?? ""}
disabled={true}
buttonVariant="background-with-text"
/>
{issue.target_date && (
<Tooltip tooltipHeading="Target Date" tooltipContent={renderFormattedDate(issue.target_date)}>
<div className="h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80 cursor-not-allowed">
<CalendarCheck className="h-3 w-3 flex-shrink-0" />
<span className="text-xs">{renderFormattedDateWithoutYear(issue.target_date)}</span>
</div>
</Tooltip>
)}
</div>
</Link>
))
) : (
<div className="flex items-center justify-center h-full text-sm text-custom-text-200">
There are no high priority issues present in this cycle.
</div>
)
) : (
<Loader className="space-y-3">
<Loader.Item height="50px" />
<Loader.Item height="50px" />
<Loader.Item height="50px" />
</Loader>
)}
</div>
</div>
<div className="flex flex-col justify-between border-custom-border-200 p-4">
<div className="flex flex-col border-custom-border-200 p-4 max-h-60">
<div className="flex items-start justify-between gap-4 py-1.5 text-xs">
<div className="flex items-center gap-3 text-custom-text-100">
<div className="flex items-center justify-center gap-1">
@ -496,7 +373,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
</span>
</div>
</div>
<div className="relative h-64">
<div className="relative h-full">
<ProgressChart
distribution={activeCycle.distribution?.completion_chart ?? {}}
startDate={activeCycle.start_date ?? ""}

380
web/components/cycles/active-cycle-info.tsx
View File

@ -1,30 +1,19 @@
import { FC, MouseEvent, useCallback } from "react";
import { FC, useCallback } from "react";
import Link from "next/link";
// ui
import {
AvatarGroup,
Tooltip,
LinearProgressIndicator,
ContrastIcon,
RunningIcon,
LayersIcon,
StateGroupIcon,
Avatar,
} from "@plane/ui";
// components
import { SingleProgressStats } from "components/core";
import { ActiveCycleProgressStats } from "./active-cycle-stats";
// hooks
import { useCycle } from "hooks/store";
import useToast from "hooks/use-toast";
import useLocalStorage from "hooks/use-local-storage";
// icons
import { ArrowRight, CalendarDays, Star, Target } from "lucide-react";
// ui
import { Tooltip, LinearProgressIndicator, Loader, PriorityIcon, Button, CycleGroupIcon } from "@plane/ui";
import { CalendarCheck } from "lucide-react";
// components
import ProgressChart from "components/core/sidebar/progress-chart";
import { StateDropdown } from "components/dropdowns";
// types
import { ICycle, TCycleLayout, TCycleView } from "@plane/types";
import { ICycle, TCycleGroups, TCycleLayout, TCycleView } from "@plane/types";
// helpers
import { renderFormattedDate, findHowManyDaysLeft } from "helpers/date-time.helper";
import { renderFormattedDate, findHowManyDaysLeft, renderFormattedDateWithoutYear } from "helpers/date-time.helper";
import { truncateText } from "helpers/string.helper";
import { renderEmoji } from "helpers/emoji.helper";
// constants
import { STATE_GROUPS_DETAILS } from "constants/cycle";
@ -36,29 +25,11 @@ export type ActiveCycleInfoProps = {
export const ActiveCycleInfo: FC<ActiveCycleInfoProps> = (props) => {
const { cycle, workspaceSlug, projectId } = props;
// store
const { addCycleToFavorites, removeCycleFromFavorites } = useCycle();
// local storage
const { setValue: setCycleTab } = useLocalStorage<TCycleView>("cycle_tab", "active");
const { setValue: setCycleLayout } = useLocalStorage<TCycleLayout>("cycle_layout", "list");
// toast alert
const { setToastAlert } = useToast();
const groupedIssues: any = {
backlog: cycle.backlog_issues,
unstarted: cycle.unstarted_issues,
started: cycle.started_issues,
completed: cycle.completed_issues,
cancelled: cycle.cancelled_issues,
};
const progressIndicatorData = STATE_GROUPS_DETAILS.map((group, index) => ({
id: index,
name: group.title,
value: cycle.total_issues > 0 ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100 : 0,
color: group.color,
}));
const cycleIssues = cycle.issues ?? [];
const handleCurrentLayout = useCallback(
(_layout: TCycleLayout) => {
@ -75,93 +46,70 @@ export const ActiveCycleInfo: FC<ActiveCycleInfoProps> = (props) => {
[handleCurrentLayout, setCycleTab]
);
const handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
if (!workspaceSlug || !projectId) return;
addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycle.id).catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "Couldn't add the cycle to favorites. Please try again.",
});
});
const groupedIssues: any = {
completed: cycle.completed_issues,
started: cycle.started_issues,
unstarted: cycle.unstarted_issues,
backlog: cycle.backlog_issues,
};
const handleRemoveFromFavorites = (e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
if (!workspaceSlug || !projectId) return;
const progressIndicatorData = STATE_GROUPS_DETAILS.map((group, index) => ({
id: index,
name: group.title,
value: cycle.total_issues > 0 ? (cycle[group.key as keyof ICycle] as number) : 0,
color: group.color,
}));
removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), cycle.id).catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "Couldn't add the cycle to favorites. Please try again.",
});
});
};
const cuurentCycle = cycle.status.toLowerCase() as TCycleGroups;
const daysLeft = findHowManyDaysLeft(cycle.end_date ?? new Date());
return (
<div className="grid-row-2 grid divide-y rounded-[10px] border border-custom-border-200 bg-custom-background-100 shadow">
<div className="grid grid-cols-1 divide-y border-custom-border-200 lg:grid-cols-3 lg:divide-x lg:divide-y-0">
<div className="flex flex-col text-xs">
<div className="h-full w-full">
<div className="flex h-60 flex-col justify-between gap-5 rounded-b-[10px] p-4">
<div className="flex items-center justify-between gap-1">
<span className="flex items-center gap-1">
<span className="h-5 w-5">
<ContrastIcon className="h-5 w-5" color="#09A953" />
</span>
<Tooltip tooltipContent={cycle.name} position="top-left">
<h3 className="break-words text-lg font-semibold">{truncateText(cycle.name, 70)}</h3>
</Tooltip>
</span>
<span className="flex items-center gap-1 capitalize">
<span className="rounded-full px-1.5 py-0.5 bg-green-600/5 text-green-600">
<span className="flex gap-1 whitespace-nowrap">
<RunningIcon className="h-4 w-4" />
{findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left
</span>
</span>
{cycle.is_favorite ? (
<button
onClick={(e) => {
handleRemoveFromFavorites(e);
}}
>
<Star className="h-4 w-4 fill-orange-400 text-orange-400" />
</button>
) : (
<button
onClick={(e) => {
handleAddToFavorites(e);
}}
>
<Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
</button>
)}
</span>
</div>
<div className="flex items-center justify-start gap-5 text-custom-text-200">
<div className="flex items-start gap-1">
<CalendarDays className="h-4 w-4" />
{cycle?.start_date && <span>{renderFormattedDate(cycle?.start_date)}</span>}
</div>
<ArrowRight className="h-4 w-4 text-custom-text-200" />
<div className="flex items-start gap-1">
<Target className="h-4 w-4" />
{cycle?.end_date && <span>{renderFormattedDate(cycle?.end_date)}</span>}
</div>
</div>
<div className="flex items-center gap-4">
<div className="flex items-center gap-2.5 text-custom-text-200">
<>
<div className="flex items-center gap-1.5 px-3 py-1.5">
{cycle.project_detail.emoji ? (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
{renderEmoji(cycle.project_detail.emoji)}
</span>
) : cycle.project_detail.icon_prop ? (
<div className="grid h-7 w-7 flex-shrink-0 place-items-center">
{renderEmoji(cycle.project_detail.icon_prop)}
</div>
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
{cycle.project_detail?.name.charAt(0)}
</span>
)}
<h2 className="text-xl font-semibold">{cycle.project_detail.name}</h2>
</div>
<div className="flex flex-col gap-2 rounded border border-custom-border-200">
<div className="flex items-center justify-between px-3 pt-3 pb-1">
<div className="flex items-center gap-2 cursor-default">
<CycleGroupIcon cycleGroup={cuurentCycle} className="h-4 w-4" />
<Tooltip tooltipContent={cycle.name} position="top-left">
<h3 className="break-words text-lg font-medium">{truncateText(cycle.name, 70)}</h3>
</Tooltip>
<Tooltip
tooltipContent={`Start date: ${renderFormattedDate(
cycle.start_date ?? ""
)} Due Date: ${renderFormattedDate(cycle.end_date ?? "")}`}
position="top-left"
>
<span className="flex gap-1 whitespace-nowrap rounded-sm text-sm px-3 py-0.5 bg-amber-500/10 text-amber-500">
{`${daysLeft} ${daysLeft > 1 ? "Days" : "Day"} Left`}
</span>
</Tooltip>
</div>
<div className="flex items-center gap-2.5">
<span className="rounded-sm text-sm px-3 py-1 bg-custom-background-80">
<span className="flex gap-2 text-sm whitespace-nowrap font-medium">
<span>Lead:</span>
<div className="flex items-center gap-1.5">
{cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
<img
src={cycle.owned_by.avatar}
height={16}
width={16}
height={18}
width={18}
className="rounded-full"
alt={cycle.owned_by.display_name}
/>
@ -170,85 +118,143 @@ export const ActiveCycleInfo: FC<ActiveCycleInfoProps> = (props) => {
{cycle.owned_by.display_name.charAt(0)}
</span>
)}
<span className="text-custom-text-200">{cycle.owned_by.display_name}</span>
<span>{cycle.owned_by.display_name}</span>
</div>
{cycle.assignees.length > 0 && (
<div className="flex items-center gap-1 text-custom-text-200">
<AvatarGroup>
{cycle.assignees.map((assignee: any) => (
<Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} />
))}
</AvatarGroup>
</div>
)}
</div>
<div className="flex items-center gap-4 text-custom-text-200">
<div className="flex gap-2">
<LayersIcon className="h-4 w-4 flex-shrink-0" />
{cycle.total_issues} issues
</div>
<div className="flex items-center gap-2">
<StateGroupIcon stateGroup="completed" height="14px" width="14px" />
{cycle.completed_issues} issues
</div>
</div>
<div className="flex item-center gap-2">
<Link
href={`/${workspaceSlug}/projects/${projectId}/cycles`}
onClick={() => {
handleCurrentView("active");
}}
>
<span className="w-full rounded-md bg-custom-primary px-4 py-2 text-center text-sm font-medium text-white hover:bg-custom-primary/90">
View Cycle
</span>
</Link>
<Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
<span className="w-full rounded-md bg-custom-primary px-4 py-2 text-center text-sm font-medium text-white hover:bg-custom-primary/90">
View Cycle Issues
</span>
</Link>
</div>
</div>
</span>
</span>
<Link href={`/${workspaceSlug}/projects/${projectId}/cycles`}>
<Button
variant="primary"
size="sm"
onClick={() => {
handleCurrentView("active");
}}
>
View Cycle
</Button>
</Link>
</div>
</div>
<div className="col-span-2 grid grid-cols-1 divide-y border-custom-border-200 md:grid-cols-2 md:divide-x md:divide-y-0">
<div className="flex h-60 flex-col border-custom-border-200">
<div className="flex h-full w-full flex-col p-4 text-custom-text-200">
<div className="flex w-full items-center gap-2 py-1">
<span>Progress</span>
<LinearProgressIndicator data={progressIndicatorData} />
</div>
<div className="mt-2 flex flex-col items-center gap-1">
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
<div className="flex flex-col gap-4 px-3 pt-2 min-h-52 border-r-0 border-t border-custom-border-300 lg:border-r">
<div className="flex items-center justify-between gap-4">
<h3 className="text-xl font-medium">Progress</h3>
<span className="flex gap-1 text-sm whitespace-nowrap rounded-sm px-3 py-1 ">
{`${cycle.completed_issues + cycle.cancelled_issues}/${cycle.total_issues - cycle.cancelled_issues} ${
cycle.completed_issues + cycle.cancelled_issues > 1 ? "Issues" : "Issue"
} closed`}
</span>
</div>
<LinearProgressIndicator data={progressIndicatorData} />
<div>
<div className="flex flex-col gap-2">
{Object.keys(groupedIssues).map((group, index) => (
<SingleProgressStats
key={index}
title={
<div className="flex items-center gap-2">
<span
className="block h-3 w-3 rounded-full "
style={{
backgroundColor: STATE_GROUPS_DETAILS[index].color,
}}
/>
<span className="text-xs capitalize">{group}</span>
<>
{groupedIssues[group] > 0 && (
<div className="flex items-center justify-start gap-2 text-sm">
<div className="flex items-center gap-2">
<span
className="block h-3 w-3 rounded-full"
style={{
backgroundColor: STATE_GROUPS_DETAILS[index].color,
}}
/>
<span className="capitalize font-medium w-16">{group}</span>
</div>
<span>{`: ${groupedIssues[group]} ${groupedIssues[group] > 1 ? "Issues" : "Issue"}`}</span>
</div>
}
completed={groupedIssues[group]}
total={cycle.total_issues}
/>
)}
</>
))}
{cycle.cancelled_issues > 0 && (
<span className="flex items-center gap-2 text-sm text-custom-text-300">
<span>
{`${cycle.cancelled_issues} cancelled ${
cycle.cancelled_issues > 1 ? "issues are" : "issue is"
} excluded from this report.`}{" "}
</span>
</span>
)}
</div>
</div>
</div>
<div className="h-60 overflow-y-scroll border-custom-border-200">
<ActiveCycleProgressStats cycle={cycle} />
<div className="flex flex-col gap-4 px-3 pt-2 min-h-52 border-r-0 border-t border-custom-border-300 lg:border-r">
<div className="flex items-center justify-between gap-4">
<h3 className="text-xl font-medium">Issue Burndown</h3>
</div>
<div className="relative ">
<ProgressChart
distribution={cycle.distribution?.completion_chart ?? {}}
startDate={cycle.start_date ?? ""}
endDate={cycle.end_date ?? ""}
totalIssues={cycle.total_issues}
/>
</div>
</div>
<div className="flex flex-col gap-4 px-3 pt-2 min-h-52 overflow-hidden col-span-1 lg:col-span-2 xl:col-span-1 border-t border-custom-border-300">
<div className="flex items-center justify-between gap-4">
<h3 className="text-xl font-medium">Priority</h3>
</div>
<div className="flex flex-col gap-4 h-full w-full max-h-40 overflow-y-auto pb-3">
{cycleIssues ? (
cycleIssues.length > 0 ? (
cycleIssues.map((issue: any) => (
<Link
key={issue.id}
href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
className="flex cursor-pointer items-center justify-between gap-2 rounded-md border border-custom-border-200 px-3 py-1.5"
>
<div className="flex items-center gap-1.5 flex-grow w-full truncate">
<PriorityIcon priority={issue.priority} withContainer size={12} />
<Tooltip
tooltipHeading="Issue ID"
tooltipContent={`${cycle.project_detail?.identifier}-${issue.sequence_id}`}
>
<span className="flex-shrink-0 text-xs text-custom-text-200">
{cycle.project_detail?.identifier}-{issue.sequence_id}
</span>
</Tooltip>
<Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
<span className="text-[0.825rem] text-custom-text-100 truncate">{issue.name}</span>
</Tooltip>
</div>
<div className="flex items-center gap-1.5 flex-shrink-0">
<StateDropdown
value={issue.state_id ?? undefined}
onChange={() => {}}
projectId={projectId?.toString() ?? ""}
disabled={true}
buttonVariant="background-with-text"
/>
{issue.target_date && (
<Tooltip tooltipHeading="Target Date" tooltipContent={renderFormattedDate(issue.target_date)}>
<div className="h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80 cursor-not-allowed">
<CalendarCheck className="h-3 w-3 flex-shrink-0" />
<span className="text-xs">{renderFormattedDateWithoutYear(issue.target_date)}</span>
</div>
</Tooltip>
)}
</div>
</Link>
))
) : (
<div className="flex items-center justify-center h-full text-sm text-custom-text-200">
<span>There are no high priority issues present in this cycle.</span>
</div>
)
) : (
<Loader className="space-y-3">
<Loader.Item height="50px" />
<Loader.Item height="50px" />
<Loader.Item height="50px" />
</Loader>
)}
</div>
</div>
</div>
</div>
</div>
</>
);
};

2
web/components/cycles/active-cycle-stats.tsx
View File

@ -127,7 +127,7 @@ export const ActiveCycleProgressStats: React.FC<Props> = ({ cycle }) => {
</Tab.Panels>
) : (
<div className="mt-4 grid place-items-center text-center text-sm text-custom-text-200">
No issues present in the cycle.
There are no high priority issues present in this cycle.
</div>
)}
</Tab.Group>

1
web/components/cycles/form.tsx
View File

@ -126,6 +126,7 @@ export const CycleForm: React.FC<Props> = (props) => {
onChange={(date) => onChange(date ? renderFormattedPayloadDate(date) : null)}
buttonVariant="border-with-text"
placeholder="Start date"
minDate={new Date()}
maxDate={maxDate ?? undefined}
tabIndex={3}
/>

49
web/components/headers/workspace-active-cycle.tsx
View File

@ -1,40 +1,23 @@
import { observer } from "mobx-react-lite";
import { Search, SendToBack } from "lucide-react";
// hooks
import { useWorkspace } from "hooks/store";
import { SendToBack } from "lucide-react";
// ui
import { Breadcrumbs } from "@plane/ui";
export const WorkspaceActiveCycleHeader = observer(() => {
// store hooks
const { workspaceActiveCyclesSearchQuery, setWorkspaceActiveCyclesSearchQuery } = useWorkspace();
return (
<div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
<div className="flex items-center gap-2">
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
type="text"
icon={<SendToBack className="h-4 w-4 text-custom-text-300" />}
label="Active Cycles"
/>
</Breadcrumbs>
<span className="flex items-center justify-center px-3.5 py-0.5 text-xs leading-4 rounded-xl text-orange-500 bg-orange-500/20">
Beta
</span>
</div>
</div>
<div className="flex items-center gap-3">
<div className="flex w-full items-center justify-start gap-1 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1.5 text-custom-text-400">
<Search className="h-3.5 w-3.5" />
<input
className="w-full min-w-[234px] border-none bg-transparent text-sm focus:outline-none"
value={workspaceActiveCyclesSearchQuery}
onChange={(e) => setWorkspaceActiveCyclesSearchQuery(e.target.value)}
placeholder="Search"
export const WorkspaceActiveCycleHeader = observer(() => (
<div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
<div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
<div className="flex items-center gap-2">
<Breadcrumbs>
<Breadcrumbs.BreadcrumbItem
type="text"
icon={<SendToBack className="h-4 w-4 text-custom-text-300" />}
label="Active Cycles"
/>
</div>
</Breadcrumbs>
<span className="flex items-center justify-center px-3.5 py-0.5 text-xs leading-4 rounded-xl text-orange-500 bg-orange-500/20">
Beta
</span>
</div>
</div>
);
});
</div>
));

3
web/components/modules/form.tsx
View File

@ -70,7 +70,7 @@ export const ModuleForm: React.FC<Props> = ({
const startDate = watch("start_date");
const targetDate = watch("target_date");
const minDate = startDate ? new Date(startDate) : null;
const minDate = startDate ? new Date(startDate) : new Date();
minDate?.setDate(minDate.getDate());
const maxDate = targetDate ? new Date(targetDate) : null;
@ -159,6 +159,7 @@ export const ModuleForm: React.FC<Props> = ({
onChange={(date) => onChange(date ? renderFormattedPayloadDate(date) : null)}
buttonVariant="border-with-text"
placeholder="Start date"
minDate={new Date()}
maxDate={maxDate ?? undefined}
tabIndex={3}
/>

105
web/components/workspace/workspace-active-cycles-list.tsx
View File

@ -1,57 +1,90 @@
import { useEffect, useState } from "react";
import useSWR from "swr";
import { observer } from "mobx-react-lite";
import { useRouter } from "next/router";
import useSWR from "swr";
import isEqual from "lodash/isEqual";
// components
import { ActiveCycleInfo } from "components/cycles";
import { Button, ContrastIcon, Spinner } from "@plane/ui";
// services
import { CycleService } from "services/cycle.service";
const cycleService = new CycleService();
// hooks
import { useWorkspace } from "hooks/store";
// helpers
import { renderEmoji } from "helpers/emoji.helper";
// constants
import { WORKSPACE_ACTIVE_CYCLES_LIST } from "constants/fetch-keys";
// types
import { ICycle } from "@plane/types";
const per_page = 3;
export const WorkspaceActiveCyclesList = observer(() => {
// state
const [cursor, setCursor] = useState<string | undefined>(`3:0:0`);
const [allCyclesData, setAllCyclesData] = useState<ICycle[]>([]);
const [hasMoreResults, setHasMoreResults] = useState(true);
// router
const router = useRouter();
const { workspaceSlug } = router.query;
// fetching active cycles in workspace
const { data } = useSWR("WORKSPACE_ACTIVE_CYCLES", () => cycleService.workspaceActiveCycles(workspaceSlug as string));
// store
const { workspaceActiveCyclesSearchQuery } = useWorkspace();
// filter cycles based on search query
const filteredCycles = data?.filter(
(cycle) =>
cycle.project_detail.name.toLowerCase().includes(workspaceActiveCyclesSearchQuery.toLowerCase()) ||
cycle.project_detail.identifier?.toLowerCase().includes(workspaceActiveCyclesSearchQuery.toLowerCase()) ||
cycle.name.toLowerCase().includes(workspaceActiveCyclesSearchQuery.toLowerCase())
const { data: workspaceActiveCycles, isLoading } = useSWR(
workspaceSlug && cursor ? WORKSPACE_ACTIVE_CYCLES_LIST(workspaceSlug as string, cursor, `${per_page}`) : null,
workspaceSlug && cursor
? () => cycleService.workspaceActiveCycles(workspaceSlug.toString(), cursor, per_page)
: null
);
useEffect(() => {
if (workspaceActiveCycles && !isEqual(workspaceActiveCycles.results, allCyclesData)) {
setAllCyclesData((prevData) => [...prevData, ...workspaceActiveCycles.results]);
setHasMoreResults(workspaceActiveCycles.next_page_results);
}
}, [workspaceActiveCycles]);
const handleLoadMore = () => {
if (hasMoreResults) {
setCursor(workspaceActiveCycles?.next_cursor);
}
};
if (allCyclesData.length === 0 && !workspaceActiveCycles) {
return (
<div className="flex items-center justify-center h-full w-full">
<Spinner />
</div>
);
}
return (
<div>
{workspaceSlug &&
filteredCycles &&
filteredCycles.map((cycle) => (
<div key={cycle.id} className="px-5 py-7">
<div className="flex items-center gap-1.5 px-3 py-1.5">
{cycle.project_detail.emoji ? (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
{renderEmoji(cycle.project_detail.emoji)}
</span>
) : cycle.project_detail.icon_prop ? (
<div className="grid h-7 w-7 flex-shrink-0 place-items-center">
{renderEmoji(cycle.project_detail.icon_prop)}
</div>
) : (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
{cycle.project_detail?.name.charAt(0)}
</span>
)}
<h2 className="text-xl font-semibold">{cycle.project_detail.name}</h2>
<div className="h-full w-full">
{allCyclesData.length > 0 ? (
<>
{workspaceSlug &&
allCyclesData.map((cycle) => (
<div key={cycle.id} className="px-5 py-5">
<ActiveCycleInfo workspaceSlug={workspaceSlug?.toString()} projectId={cycle.project} cycle={cycle} />
</div>
))}
{hasMoreResults && (
<div className="flex items-center justify-center gap-4 text-xs w-full py-5">
<Button variant="outline-primary" size="sm" onClick={handleLoadMore}>
{isLoading ? "Loading..." : "Load More"}
</Button>
</div>
<ActiveCycleInfo workspaceSlug={workspaceSlug?.toString()} projectId={cycle.project} cycle={cycle} />
)}
</>
) : (
<div className="grid h-full place-items-center text-center">
<div className="space-y-2">
<div className="mx-auto flex justify-center">
<ContrastIcon className="h-40 w-40 text-custom-text-300" />
</div>
<h4 className="text-base text-custom-text-200">
No ongoing cycles are currently active in any of the projects.
</h4>
</div>
))}
</div>
)}
</div>
);
});

26
web/constants/cycle.ts
View File

@ -87,31 +87,25 @@ export const CYCLE_STATUS: {
},
];
export const STATE_GROUPS_DETAILS = [
{
key: "backlog_issues",
title: "Backlog",
color: "#dee2e6",
},
{
key: "unstarted_issues",
title: "Unstarted",
color: "#26b5ce",
key: "completed_issues",
title: "Completed",
color: "#46A758",
},
{
key: "started_issues",
title: "Started",
color: "#f7ae59",
color: "#FFC53D",
},
{
key: "cancelled_issues",
title: "Cancelled",
color: "#d687ff",
key: "unstarted_issues",
title: "Unstarted",
color: "#FB923C",
},
{
key: "completed_issues",
title: "Completed",
color: "#09a953",
key: "backlog_issues",
title: "Backlog",
color: "#F0F0F3",
},
];

2
web/constants/fetch-keys.ts
View File

@ -142,6 +142,8 @@ export const WORKSPACE_LABELS = (workspaceSlug: string) => `WORKSPACE_LABELS_${w
export const PROJECT_GITHUB_REPOSITORY = (projectId: string) => `PROJECT_GITHUB_REPOSITORY_${projectId.toUpperCase()}`;
// cycles
export const WORKSPACE_ACTIVE_CYCLES_LIST = (workspaceSlug: string, cursor: string, per_page: string) =>
`WORKSPACE_ACTIVE_CYCLES_LIST_${workspaceSlug.toUpperCase()}_${cursor.toUpperCase()}_${per_page.toUpperCase()}`;
export const CYCLES_LIST = (projectId: string) => `CYCLE_LIST_${projectId.toUpperCase()}`;
export const INCOMPLETE_CYCLES_LIST = (projectId: string) => `INCOMPLETE_CYCLES_LIST_${projectId.toUpperCase()}`;
export const CURRENT_CYCLE_LIST = (projectId: string) => `CURRENT_CYCLE_LIST_${projectId.toUpperCase()}`;

15
web/services/cycle.service.ts
View File

@ -1,7 +1,7 @@
// services
import { APIService } from "services/api.service";
// types
import type { CycleDateCheckData, ICycle, TIssue, TIssueMap } from "@plane/types";
import type { CycleDateCheckData, ICycle, IWorkspaceActiveCyclesResponse, TIssue } from "@plane/types";
// helpers
import { API_BASE_URL } from "helpers/common.helper";
@ -10,8 +10,17 @@ export class CycleService extends APIService {
super(API_BASE_URL);
}
async workspaceActiveCycles(workspaceSlug: string): Promise<ICycle[]> {
return this.get(`/api/workspaces/${workspaceSlug}/active-cycles/`)
async workspaceActiveCycles(
workspaceSlug: string,
cursor: string,
per_page: number
): Promise<IWorkspaceActiveCyclesResponse> {
return this.get(`/api/workspaces/${workspaceSlug}/active-cycles/`, {
params: {
per_page,
cursor,
},
})
.then((res) => res?.data)
.catch((err) => {
throw err?.response?.data;

26
web/store/project/project.store.ts
View File

@ -92,24 +92,26 @@ export class ProjectStore implements IProjectStore {
* Returns searched projects based on search query
*/
get searchedProjects() {
if (!this.rootStore.app.router.workspaceSlug) return [];
const projectIds = Object.keys(this.projectMap);
return this.searchQuery === ""
? projectIds
: projectIds?.filter((projectId) => {
this.projectMap[projectId].name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
this.projectMap[projectId].identifier.toLowerCase().includes(this.searchQuery.toLowerCase());
});
const workspaceDetails = this.rootStore.workspaceRoot.currentWorkspace;
if (!workspaceDetails) return [];
const workspaceProjects = Object.values(this.projectMap).filter(
(p) =>
p.workspace === workspaceDetails.id &&
(p.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
p.identifier.toLowerCase().includes(this.searchQuery.toLowerCase()))
);
return workspaceProjects.map((p) => p.id);
}
/**
* Returns project IDs belong to the current workspace
*/
get workspaceProjectIds() {
if (!this.rootStore.app.router.workspaceSlug) return null;
const projectIds = Object.keys(this.projectMap);
if (!projectIds) return null;
return projectIds;
const workspaceDetails = this.rootStore.workspaceRoot.currentWorkspace;
if (!workspaceDetails) return null;
const workspaceProjects = Object.values(this.projectMap).filter((p) => p.workspace === workspaceDetails.id);
const projectIds = workspaceProjects.map((p) => p.id);
return projectIds ?? null;
}
/**

14
web/store/workspace/index.ts
View File

@ -12,12 +12,9 @@ import { ApiTokenStore, IApiTokenStore } from "./api-token.store";
export interface IWorkspaceRootStore {
// observables
workspaces: Record<string, IWorkspace>;
workspaceActiveCyclesSearchQuery: string;
// computed
currentWorkspace: IWorkspace | null;
workspacesCreatedByCurrentUser: IWorkspace[] | null;
// actions
setWorkspaceActiveCyclesSearchQuery: (query: string) => void;
// computed actions
getWorkspaceBySlug: (workspaceSlug: string) => IWorkspace | null;
getWorkspaceById: (workspaceId: string) => IWorkspace | null;
@ -34,7 +31,6 @@ export interface IWorkspaceRootStore {
export class WorkspaceRootStore implements IWorkspaceRootStore {
// observables
workspaceActiveCyclesSearchQuery: string = "";
workspaces: Record<string, IWorkspace> = {};
// services
workspaceService;
@ -49,7 +45,6 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
makeObservable(this, {
// observables
workspaces: observable,
workspaceActiveCyclesSearchQuery: observable.ref,
// computed
currentWorkspace: computed,
workspacesCreatedByCurrentUser: computed,
@ -57,7 +52,6 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
getWorkspaceBySlug: action,
getWorkspaceById: action,
// actions
setWorkspaceActiveCyclesSearchQuery: action,
fetchWorkspaces: action,
createWorkspace: action,
updateWorkspace: action,
@ -108,14 +102,6 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
*/
getWorkspaceById = (workspaceId: string) => this.workspaces?.[workspaceId] || null; // TODO: use undefined instead of null
/**
* Sets search query
* @param query
*/
setWorkspaceActiveCyclesSearchQuery = (query: string) => {
this.workspaceActiveCyclesSearchQuery = query;
};
/**
* fetch user workspaces from API
*/