diff --git a/packages/types/src/cycle/cycle.d.ts b/packages/types/src/cycle/cycle.d.ts index b0528ccc11..a2b3814ed3 100644 --- a/packages/types/src/cycle/cycle.d.ts +++ b/packages/types/src/cycle/cycle.d.ts @@ -1,4 +1,4 @@ -import type { TIssue, IIssueFilterOptions } from "@plane/types"; +import type {TIssue, IIssueFilterOptions} from "@plane/types"; export type TCycleGroups = "current" | "upcoming" | "completed" | "draft"; @@ -61,6 +61,10 @@ export type TProgressSnapshot = { estimate_distribution?: TCycleEstimateDistribution; }; +export interface IProjectDetails { + id: string; +} + export interface ICycle extends TProgressSnapshot { progress_snapshot: TProgressSnapshot | undefined; @@ -85,6 +89,7 @@ export interface ICycle extends TProgressSnapshot { filters: IIssueFilterOptions; }; workspace_id: string; + project_detail: IProjectDetails; } export interface CycleIssueResponse { @@ -102,7 +107,7 @@ export interface CycleIssueResponse { } export type SelectCycleType = - | (ICycle & { actionType: "edit" | "delete" | "create-issue" }) + | (ICycle & {actionType: "edit" | "delete" | "create-issue"}) | undefined; export type CycleDateCheckData = { diff --git a/packages/types/src/workspace.d.ts b/packages/types/src/workspace.d.ts index de653a3603..f5cec8eadb 100644 --- a/packages/types/src/workspace.d.ts +++ b/packages/types/src/workspace.d.ts @@ -1,5 +1,6 @@ -import { EUserWorkspaceRoles } from "@/constants/workspace"; +import {EUserWorkspaceRoles} from "@/constants/workspace"; import type { + ICycle, IProjectMember, IUser, IUserLite, @@ -46,7 +47,7 @@ export interface IWorkspaceMemberInvitation { } export interface IWorkspaceBulkInviteFormData { - emails: { email: string; role: EUserWorkspaceRoles }[]; + emails: {email: string; role: EUserWorkspaceRoles}[]; } export type Properties = { @@ -197,3 +198,25 @@ 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; +} + +export interface IWorkspaceProgressResponse { + completed_issues: number; + total_issues: number; + started_issues: number; + cancelled_issues: number; + unstarted_issues: number; +} +export interface IWorkspaceAnalyticsResponse { + completion_chart: any; +} diff --git a/web/core/components/cycles/active-cycle/cycle-stats.tsx b/web/core/components/cycles/active-cycle/cycle-stats.tsx index d823237503..e93658de26 100644 --- a/web/core/components/cycles/active-cycle/cycle-stats.tsx +++ b/web/core/components/cycles/active-cycle/cycle-stats.tsx @@ -30,11 +30,12 @@ import useLocalStorage from "@/hooks/use-local-storage"; export type ActiveCycleStatsProps = { workspaceSlug: string; projectId: string; - cycle: ICycle; + cycle: ICycle | null; + cycleId?: string | null; }; export const ActiveCycleStats: FC = observer((props) => { - const { workspaceSlug, projectId, cycle } = props; + const { workspaceSlug, projectId, cycle, cycleId } = props; const { storedValue: tab, setValue: setTab } = useLocalStorage("activeCycleTab", "Assignees"); @@ -63,22 +64,29 @@ export const ActiveCycleStats: FC = observer((props) => { const { currentProjectDetails } = useProject(); useSWR( - workspaceSlug && projectId && cycle.id ? CYCLE_ISSUES_WITH_PARAMS(cycle.id, { priority: "urgent,high" }) : null, - workspaceSlug && projectId && cycle.id - ? () => fetchActiveCycleIssues(workspaceSlug, projectId, 30, cycle.id) - : null, + workspaceSlug && projectId && cycleId ? CYCLE_ISSUES_WITH_PARAMS(cycleId, { priority: "urgent,high" }) : null, + workspaceSlug && projectId && cycleId ? () => fetchActiveCycleIssues(workspaceSlug, projectId, 30, cycleId) : null, { revalidateIfStale: false, revalidateOnFocus: false } ); - const cycleIssueDetails = getActiveCycleById(cycle.id); + const cycleIssueDetails = cycleId ? getActiveCycleById(cycleId) : { nextPageResults: false }; const loadMoreIssues = useCallback(() => { - fetchNextActiveCycleIssues(workspaceSlug, projectId, cycle.id); - }, [workspaceSlug, projectId, cycle.id, issuesLoaderElement, cycleIssueDetails?.nextPageResults]); + if (!cycleId) return; + fetchNextActiveCycleIssues(workspaceSlug, projectId, cycleId); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [workspaceSlug, projectId, cycleId, issuesLoaderElement, cycleIssueDetails?.nextPageResults]); useIntersectionObserver(issuesContainerRef, issuesLoaderElement, loadMoreIssues, `0% 0% 100% 0%`); - return ( + const loaders = ( + + + + + + ); + return cycleId ? (
= observer((props) => { ref={issuesContainerRef} className="flex flex-col gap-1 h-full w-full overflow-y-auto vertical-scrollbar scrollbar-sm" > - {cycleIssueDetails && cycleIssueDetails.issueIds ? ( + {cycleIssueDetails && "issueIds" in cycleIssueDetails ? ( cycleIssueDetails.issueCount > 0 ? ( <> {cycleIssueDetails.issueIds.map((issueId: string) => { @@ -229,11 +237,7 @@ export const ActiveCycleStats: FC = observer((props) => {
) ) : ( - - - - - + loaders )} @@ -242,44 +246,52 @@ export const ActiveCycleStats: FC = observer((props) => { as="div" className="flex h-52 w-full flex-col gap-1 overflow-y-auto text-custom-text-200 vertical-scrollbar scrollbar-sm" > - {cycle?.distribution?.assignees && cycle.distribution.assignees.length > 0 ? ( - cycle.distribution?.assignees?.map((assignee, index) => { - if (assignee.assignee_id) - return ( - - + {cycle ? ( + cycle?.distribution?.assignees && cycle.distribution.assignees.length > 0 ? ( + cycle.distribution?.assignees?.map((assignee, index) => { + if (assignee.assignee_id) + return ( + + - {assignee.display_name} - - } - completed={assignee.completed_issues} - total={assignee.total_issues} - /> - ); - else - return ( - -
- User + {assignee.display_name}
- No assignee - - } - completed={assignee.completed_issues} - total={assignee.total_issues} - /> - ); - }) + } + completed={assignee.completed_issues} + total={assignee.total_issues} + /> + ); + else + return ( + +
+ User +
+ No assignee + + } + completed={assignee.completed_issues} + total={assignee.total_issues} + /> + ); + }) + ) : ( +
+ +
+ ) ) : ( -
- -
+ loaders )} @@ -287,33 +299,41 @@ export const ActiveCycleStats: FC = observer((props) => { as="div" className="flex h-52 w-full flex-col gap-1 overflow-y-auto text-custom-text-200 vertical-scrollbar scrollbar-sm" > - {cycle?.distribution?.labels && cycle.distribution.labels.length > 0 ? ( - cycle.distribution.labels?.map((label, index) => ( - - - {label.label_name ?? "No labels"} - - } - completed={label.completed_issues} - total={label.total_issues} - /> - )) + {cycle ? ( + cycle?.distribution?.labels && cycle.distribution.labels.length > 0 ? ( + cycle.distribution.labels?.map((label, index) => ( + + + {label.label_name ?? "No labels"} + + } + completed={label.completed_issues} + total={label.total_issues} + /> + )) + ) : ( +
+ +
+ ) ) : ( -
- -
+ loaders )} + ) : ( + + + ); }); diff --git a/web/core/components/cycles/active-cycle/productivity.tsx b/web/core/components/cycles/active-cycle/productivity.tsx index cc10fb808a..0e44e66f8b 100644 --- a/web/core/components/cycles/active-cycle/productivity.tsx +++ b/web/core/components/cycles/active-cycle/productivity.tsx @@ -2,7 +2,7 @@ import { FC, Fragment, useState } from "react"; import { observer } from "mobx-react"; import Link from "next/link"; import { ICycle, TCyclePlotType } from "@plane/types"; -import { CustomSelect, Spinner } from "@plane/ui"; +import { CustomSelect, Loader, Spinner } from "@plane/ui"; // components import ProgressChart from "@/components/core/sidebar/progress-chart"; import { EmptyState } from "@/components/empty-state"; @@ -15,7 +15,7 @@ import { EEstimateSystem } from "@/plane-web/constants/estimates"; export type ActiveCycleProductivityProps = { workspaceSlug: string; projectId: string; - cycle: ICycle; + cycle: ICycle | null; }; const cycleBurnDownChartOptions = [ @@ -51,10 +51,11 @@ export const ActiveCycleProductivity: FC = observe isCurrentProjectEstimateEnabled && currentActiveEstimateId && estimateById(currentActiveEstimateId); const isCurrentEstimateTypeIsPoints = estimateDetails && estimateDetails?.type === EEstimateSystem.POINTS; - const chartDistributionData = plotType === "points" ? cycle?.estimate_distribution : cycle?.distribution || undefined; + const chartDistributionData = + cycle && plotType === "points" ? cycle?.estimate_distribution : cycle?.distribution || undefined; const completionChartDistributionData = chartDistributionData?.completion_chart || undefined; - return ( + return cycle ? (
@@ -135,5 +136,9 @@ export const ActiveCycleProductivity: FC = observe )}
+ ) : ( + + + ); }); diff --git a/web/core/components/cycles/active-cycle/progress.tsx b/web/core/components/cycles/active-cycle/progress.tsx index ca03e2c0bc..4f876b106e 100644 --- a/web/core/components/cycles/active-cycle/progress.tsx +++ b/web/core/components/cycles/active-cycle/progress.tsx @@ -5,7 +5,7 @@ import Link from "next/link"; // types import { ICycle } from "@plane/types"; // ui -import { LinearProgressIndicator } from "@plane/ui"; +import { LinearProgressIndicator, Loader } from "@plane/ui"; // components import { EmptyState } from "@/components/empty-state"; // constants @@ -15,7 +15,7 @@ import { EmptyStateType } from "@/constants/empty-state"; export type ActiveCycleProgressProps = { workspaceSlug: string; projectId: string; - cycle: ICycle; + cycle: ICycle | null; }; export const ActiveCycleProgress: FC = (props) => { @@ -24,18 +24,20 @@ export const ActiveCycleProgress: FC = (props) => { const progressIndicatorData = CYCLE_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, + value: cycle && cycle.total_issues > 0 ? (cycle[group.key as keyof ICycle] as number) : 0, color: group.color, })); - const groupedIssues: any = { - completed: cycle.completed_issues, - started: cycle.started_issues, - unstarted: cycle.unstarted_issues, - backlog: cycle.backlog_issues, - }; + const groupedIssues: any = cycle + ? { + completed: cycle.completed_issues, + started: cycle.started_issues, + unstarted: cycle.unstarted_issues, + backlog: cycle.backlog_issues, + } + : {}; - return ( + return cycle ? ( = (props) => {
)} + ) : ( + + + ); }; diff --git a/web/core/components/cycles/active-cycle/root.tsx b/web/core/components/cycles/active-cycle/root.tsx index 6294ae3cfa..c654e011db 100644 --- a/web/core/components/cycles/active-cycle/root.tsx +++ b/web/core/components/cycles/active-cycle/root.tsx @@ -28,7 +28,7 @@ export const ActiveCycleRoot: React.FC = observer((props) = // props const { workspaceSlug, projectId } = props; // store hooks - const { fetchActiveCycle, currentProjectActiveCycleId, getActiveCycleById } = useCycle(); + const { currentProjectActiveCycle, fetchActiveCycle, currentProjectActiveCycleId, getActiveCycleById } = useCycle(); // derived values const activeCycle = currentProjectActiveCycleId ? getActiveCycleById(currentProjectActiveCycleId) : null; // fetch active cycle details @@ -38,7 +38,7 @@ export const ActiveCycleRoot: React.FC = observer((props) = ); // show loader if active cycle is loading - if (!activeCycle && isLoading) + if (!currentProjectActiveCycle && isLoading) return ( @@ -54,10 +54,10 @@ export const ActiveCycleRoot: React.FC = observer((props) = - {!activeCycle ? ( + {!currentProjectActiveCycle ? ( ) : ( -
+
{currentProjectActiveCycleId && ( = observer((props) = projectId={projectId} cycle={activeCycle} /> - +
diff --git a/web/core/services/cycle.service.ts b/web/core/services/cycle.service.ts index c74f6485ad..5d4b9d7b8b 100644 --- a/web/core/services/cycle.service.ts +++ b/web/core/services/cycle.service.ts @@ -1,15 +1,64 @@ // services -import type { CycleDateCheckData, ICycle, TIssuesResponse } from "@plane/types"; +import type { + CycleDateCheckData, + ICycle, + TIssuesResponse, + IWorkspaceActiveCyclesResponse, + IWorkspaceProgressResponse, + IWorkspaceAnalyticsResponse, +} from "@plane/types"; import { API_BASE_URL } from "@/helpers/common.helper"; import { APIService } from "@/services/api.service"; -// types -// helpers export class CycleService extends APIService { constructor() { super(API_BASE_URL); } + async workspaceActiveCyclesAnalytics( + workspaceSlug: string, + projectId: string, + cycleId: string, + analytic_type: string = "points" + ): Promise { + return this.get( + `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/analytics?type=${analytic_type}` + ) + .then((res) => res?.data) + .catch((err) => { + throw err?.response?.data; + }); + } + + async workspaceActiveCyclesProgress( + workspaceSlug: string, + projectId: string, + cycleId: string + ): Promise { + return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/progress/`) + .then((res) => res?.data) + .catch((err) => { + throw err?.response?.data; + }); + } + + async workspaceActiveCycles( + workspaceSlug: string, + cursor: string, + per_page: number + ): Promise { + return this.get(`/api/workspaces/${workspaceSlug}/active-cycles/`, { + params: { + per_page, + cursor, + }, + }) + .then((res) => res?.data) + .catch((err) => { + throw err?.response?.data; + }); + } + async getWorkspaceCycles(workspaceSlug: string): Promise { return this.get(`/api/workspaces/${workspaceSlug}/cycles/`) .then((response) => response?.data) diff --git a/web/core/store/cycle.store.ts b/web/core/store/cycle.store.ts index 4c1541a789..e47bac6ef0 100644 --- a/web/core/store/cycle.store.ts +++ b/web/core/store/cycle.store.ts @@ -32,6 +32,8 @@ export interface ICycleStore { currentProjectDraftCycleIds: string[] | null; currentProjectActiveCycleId: string | null; currentProjectArchivedCycleIds: string[] | null; + currentProjectActiveCycle: ICycle | null; + // computed actions getFilteredCycleIds: (projectId: string, sortByManual: boolean) => string[] | null; getFilteredCompletedCycleIds: (projectId: string) => string[] | null; @@ -100,6 +102,8 @@ export class CycleStore implements ICycleStore { currentProjectDraftCycleIds: computed, currentProjectActiveCycleId: computed, currentProjectArchivedCycleIds: computed, + currentProjectActiveCycle: computed, + // actions setPlotType: action, fetchWorkspaceCycles: action, @@ -208,7 +212,7 @@ export class CycleStore implements ICycleStore { get currentProjectActiveCycleId() { const projectId = this.rootStore.router.projectId; if (!projectId) return null; - const activeCycle = Object.keys(this.activeCycleIdMap ?? {}).find( + const activeCycle = Object.keys(this.cycleMap ?? {}).find( (cycleId) => this.cycleMap?.[cycleId]?.project_id === projectId ); return activeCycle || null; @@ -228,6 +232,12 @@ export class CycleStore implements ICycleStore { return archivedCycleIds; } + get currentProjectActiveCycle() { + const projectId = this.rootStore.router.projectId; + if (!projectId && !this.currentProjectActiveCycleId) return null; + return this.cycleMap?.[this.currentProjectActiveCycleId!] ?? null; + } + /** * @description returns filtered cycle ids based on display filters and filters * @param {TCycleDisplayFilters} displayFilters