-
|
-
+ Your requested data export from Plane Analytics is now ready. The information has been compiled into a CSV format for your convenience.
+ Please find the attachment and download the CSV file. This file can easily be imported into any spreadsheet program for further analysis.
+ If you require any assistance or have any questions, please do not hesitate to contact us.
+ Thank you + diff --git a/apps/app/Dockerfile.web b/apps/app/Dockerfile.web index 11bf98bd4..0b3e45f7a 100644 --- a/apps/app/Dockerfile.web +++ b/apps/app/Dockerfile.web @@ -3,6 +3,7 @@ RUN apk add --no-cache libc6-compat RUN apk update # Set working directory WORKDIR /app +ENV NEXT_PUBLIC_API_BASE_URL=http://NEXT_PUBLIC_API_BASE_URL_PLACEHOLDER RUN yarn global add turbo COPY . . @@ -12,10 +13,10 @@ RUN turbo prune --scope=app --docker # Add lockfile and package.json's of isolated subworkspace FROM node:18-alpine AS installer - RUN apk add --no-cache libc6-compat RUN apk update WORKDIR /app +ARG NEXT_PUBLIC_API_BASE_URL=http://localhost:8000 # First install the dependencies (as they change less often) COPY .gitignore .gitignore @@ -26,9 +27,17 @@ RUN yarn install # Build the project COPY --from=builder /app/out/full/ . COPY turbo.json turbo.json +COPY replace-env-vars.sh /usr/local/bin/ +USER root +RUN chmod +x /usr/local/bin/replace-env-vars.sh RUN yarn turbo run build --filter=app +ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL \ + BUILT_NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL + +RUN /usr/local/bin/replace-env-vars.sh http://NEXT_PUBLIC_WEBAPP_URL_PLACEHOLDER ${NEXT_PUBLIC_API_BASE_URL} + FROM node:18-alpine AS runner WORKDIR /app @@ -43,8 +52,20 @@ COPY --from=installer /app/apps/app/package.json . # Automatically leverage output traces to reduce image size # https://nextjs.org/docs/advanced-features/output-file-tracing COPY --from=installer --chown=captain:plane /app/apps/app/.next/standalone ./ -# COPY --from=installer --chown=captain:plane /app/apps/app/.next/standalone/node_modules ./apps/app/node_modules -COPY --from=installer --chown=captain:plane /app/apps/app/.next/static ./apps/app/.next/static + +COPY --from=installer --chown=captain:plane /app/apps/app/.next ./apps/app/.next + +ARG NEXT_PUBLIC_API_BASE_URL=http://localhost:8000 +ENV NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL \ + BUILT_NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL + +USER root +COPY replace-env-vars.sh /usr/local/bin/ +COPY start.sh /usr/local/bin/ +RUN chmod +x /usr/local/bin/replace-env-vars.sh +RUN chmod +x /usr/local/bin/start.sh + +USER captain ENV NEXT_TELEMETRY_DISABLED 1 diff --git a/apps/app/components/analytics/custom-analytics/create-update-analytics-modal.tsx b/apps/app/components/analytics/custom-analytics/create-update-analytics-modal.tsx new file mode 100644 index 000000000..afaaf1b98 --- /dev/null +++ b/apps/app/components/analytics/custom-analytics/create-update-analytics-modal.tsx @@ -0,0 +1,158 @@ +import React from "react"; + +import { useRouter } from "next/router"; + +// react-hook-form +import { useForm } from "react-hook-form"; +// headless ui +import { Dialog, Transition } from "@headlessui/react"; +// services +import analyticsService from "services/analytics.service"; +// hooks +import useToast from "hooks/use-toast"; +// ui +import { Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui"; +// types +import { IAnalyticsParams, ISaveAnalyticsFormData } from "types"; + +// types +type Props = { + isOpen: boolean; + handleClose: () => void; + params?: IAnalyticsParams; +}; + +type FormValues = { + name: string; + description: string; +}; + +const defaultValues: FormValues = { + name: "", + description: "", +}; + +export const CreateUpdateAnalyticsModal: React.FC
+
+ );
+};
diff --git a/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx b/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx
new file mode 100644
index 000000000..7fd0c1396
--- /dev/null
+++ b/apps/app/components/analytics/custom-analytics/graph/custom-tooltip.tsx
@@ -0,0 +1,57 @@
+// nivo
+import { BarTooltipProps } from "@nivo/bar";
+import { DATE_KEYS } from "constants/analytics";
+import { renderMonthAndYear } from "helpers/analytics.helper";
+// types
+import { IAnalyticsParams, IAnalyticsResponse } from "types";
+
+type Props = {
+ datum: BarTooltipProps
+
+
+
+
+ )
+ ) : (
+
+
+
+ ) : (
+
+
+ )
+ ) : (
+
+
+ No matching issues found. Try changing the parameters.
+
+
+ )}
+
+
+ There was some error in fetching the data.
+
+ {
+ if (!workspaceSlug) return;
+
+ mutate(ANALYTICS(workspaceSlug.toString(), params));
+ }}
+ >
+ Refresh
+
+
+
+
+
+ {tooltipValue}:
+
+ {datum.value}
+
+ );
+};
diff --git a/apps/app/components/analytics/custom-analytics/graph/index.tsx b/apps/app/components/analytics/custom-analytics/graph/index.tsx
new file mode 100644
index 000000000..cce93204c
--- /dev/null
+++ b/apps/app/components/analytics/custom-analytics/graph/index.tsx
@@ -0,0 +1,119 @@
+// nivo
+import { BarDatum } from "@nivo/bar";
+// components
+import { CustomTooltip } from "./custom-tooltip";
+// ui
+import { BarGraph } from "components/ui";
+// helpers
+import { findStringWithMostCharacters } from "helpers/array.helper";
+import { generateBarColor } from "helpers/analytics.helper";
+// types
+import { IAnalyticsParams, IAnalyticsResponse } from "types";
+// constants
+
+type Props = {
+ analytics: IAnalyticsResponse;
+ barGraphData: {
+ data: BarDatum[];
+ xAxisKeys: string[];
+ };
+ params: IAnalyticsParams;
+ yAxisKey: "count" | "estimate";
+ fullScreen: boolean;
+};
+
+export const AnalyticsGraph: React.FC
+ {!isProjectLevel && (
+
+);
diff --git a/apps/app/components/analytics/custom-analytics/sidebar.tsx b/apps/app/components/analytics/custom-analytics/sidebar.tsx
new file mode 100644
index 000000000..e9a9d5d7f
--- /dev/null
+++ b/apps/app/components/analytics/custom-analytics/sidebar.tsx
@@ -0,0 +1,331 @@
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// services
+import analyticsService from "services/analytics.service";
+import projectService from "services/project.service";
+import cyclesService from "services/cycles.service";
+import modulesService from "services/modules.service";
+// hooks
+import useProjects from "hooks/use-projects";
+import useToast from "hooks/use-toast";
+// ui
+import { PrimaryButton, SecondaryButton } from "components/ui";
+// icons
+import {
+ ArrowDownTrayIcon,
+ ArrowPathIcon,
+ CalendarDaysIcon,
+ UserGroupIcon,
+} from "@heroicons/react/24/outline";
+import { ContrastIcon, LayerDiagonalIcon } from "components/icons";
+// helpers
+import { renderShortDate } from "helpers/date-time.helper";
+// types
+import { IAnalyticsParams, IAnalyticsResponse, IExportAnalyticsFormData, IProject } from "types";
+// fetch-keys
+import { ANALYTICS, CYCLE_DETAILS, MODULE_DETAILS, PROJECT_DETAILS } from "constants/fetch-keys";
+// constants
+import { NETWORK_CHOICES } from "constants/project";
+
+type Props = {
+ analytics: IAnalyticsResponse | undefined;
+ params: IAnalyticsParams;
+ fullScreen: boolean;
+ isProjectLevel: boolean;
+};
+
+export const AnalyticsSidebar: React.FC
+ (
+
+ )}
+ Project
+
+ (
+
+ Measure (y-axis)
+
+ (
+ {
+ if (params.segment === val) setValue("segment", null);
+
+ onChange(val);
+ }}
+ />
+ )}
+ />
+
+ Dimension (x-axis)
+
+ (
+
+ Group
+
+
+ );
+};
diff --git a/apps/app/components/analytics/custom-analytics/table.tsx b/apps/app/components/analytics/custom-analytics/table.tsx
new file mode 100644
index 000000000..df3953b35
--- /dev/null
+++ b/apps/app/components/analytics/custom-analytics/table.tsx
@@ -0,0 +1,135 @@
+// nivo
+import { BarDatum } from "@nivo/bar";
+// icons
+import { getPriorityIcon } from "components/icons";
+// helpers
+import { addSpaceIfCamelCase } from "helpers/string.helper";
+// helpers
+import { generateBarColor, renderMonthAndYear } from "helpers/analytics.helper";
+// types
+import { IAnalyticsParams, IAnalyticsResponse } from "types";
+// constants
+import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES, DATE_KEYS } from "constants/analytics";
+
+type Props = {
+ analytics: IAnalyticsResponse;
+ barGraphData: {
+ data: BarDatum[];
+ xAxisKeys: string[];
+ };
+ params: IAnalyticsParams;
+ yAxisKey: "count" | "estimate";
+};
+
+export const AnalyticsTable: React.FC
+
+
+
+ {isProjectLevel && (
+
+
+ )}
+
+ {fullScreen ? (
+ <>
+ {!isProjectLevel && selectedProjects && selectedProjects.length > 0 && (
+
+
+
+ )}
+ {projectId ? (
+ cycleId && cycleDetails ? (
+ Selected Projects
+
+ {selectedProjects.map((projectId) => {
+ const project: IProject = projects.find((p) => p.id === projectId);
+
+ return (
+
+
+
+ );
+ })}
+
+ {project.emoji ? (
+
+ {String.fromCodePoint(parseInt(project.emoji))}
+
+ ) : project.icon_prop ? (
+
+
+
+ {project.icon_prop.name}
+
+
+ ) : (
+
+ {project?.name.charAt(0)}
+
+ )}
+ + {project.name} + + ({project.identifier}) + +
+
+
+
+
+
+
+ {project.total_members}
+ Total members
+
+
+
+
+ {project.total_cycles}
+ Total cycles
+
+
+
+
+ {project.total_modules}
+ Total modules
+
+
+ ) : moduleId && moduleDetails ? (
+ Analytics for {cycleDetails.name}
+
+
+
+
+ Lead
+ + {cycleDetails.owned_by?.first_name} {cycleDetails.owned_by?.last_name} + +
+
+ Start Date
+ + {cycleDetails.start_date && cycleDetails.start_date !== "" + ? renderShortDate(cycleDetails.start_date) + : "No start date"} + +
+
+ Target Date
+ + {cycleDetails.end_date && cycleDetails.end_date !== "" + ? renderShortDate(cycleDetails.end_date) + : "No end date"} + +
+
+ ) : (
+ Analytics for {moduleDetails.name}
+
+
+
+
+ Lead
+ + {moduleDetails.lead_detail?.first_name}{" "} + {moduleDetails.lead_detail?.last_name} + +
+
+ Start Date
+ + {moduleDetails.start_date && moduleDetails.start_date !== "" + ? renderShortDate(moduleDetails.start_date) + : "No start date"} + +
+
+ Target Date
+ + {moduleDetails.target_date && moduleDetails.target_date !== "" + ? renderShortDate(moduleDetails.target_date) + : "No end date"} + +
+
+ )
+ ) : null}
+
+ ) : null}
+
+ {projectDetails?.emoji ? (
+
+
+ {String.fromCodePoint(parseInt(projectDetails.emoji))}
+
+ ) : projectDetails?.icon_prop ? (
+
+
+ {projectDetails.icon_prop.name}
+
+
+ ) : (
+
+ {projectDetails?.name.charAt(0)}
+
+ )}
+ {projectDetails?.name}
+
+
+
+
+ Network
+ + { + NETWORK_CHOICES[ + `${projectDetails?.network}` as keyof typeof NETWORK_CHOICES + ] + } + +
+ {
+ if (!workspaceSlug) return;
+
+ mutate(ANALYTICS(workspaceSlug.toString(), params));
+ }}
+ >
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/apps/app/components/analytics/index.ts b/apps/app/components/analytics/index.ts
new file mode 100644
index 000000000..ec0fd5dc1
--- /dev/null
+++ b/apps/app/components/analytics/index.ts
@@ -0,0 +1,4 @@
+export * from "./custom-analytics";
+export * from "./scope-and-demand";
+export * from "./select";
+export * from "./project-modal";
diff --git a/apps/app/components/analytics/project-modal.tsx b/apps/app/components/analytics/project-modal.tsx
new file mode 100644
index 000000000..c2072642c
--- /dev/null
+++ b/apps/app/components/analytics/project-modal.tsx
@@ -0,0 +1,174 @@
+import React, { Fragment, useState } from "react";
+
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// react-hook-form
+import { useForm } from "react-hook-form";
+// headless ui
+import { Tab } from "@headlessui/react";
+// services
+import analyticsService from "services/analytics.service";
+import projectService from "services/project.service";
+import cyclesService from "services/cycles.service";
+import modulesService from "services/modules.service";
+// components
+import { CustomAnalytics, ScopeAndDemand } from "components/analytics";
+// icons
+import {
+ ArrowsPointingInIcon,
+ ArrowsPointingOutIcon,
+ XMarkIcon,
+} from "@heroicons/react/24/outline";
+// types
+import { IAnalyticsParams } from "types";
+// fetch-keys
+import { ANALYTICS, CYCLE_DETAILS, MODULE_DETAILS, PROJECT_DETAILS } from "constants/fetch-keys";
+
+type Props = {
+ isOpen: boolean;
+ onClose: () => void;
+};
+
+const defaultValues: IAnalyticsParams = {
+ x_axis: "priority",
+ y_axis: "issue_count",
+ segment: null,
+ project: null,
+};
+
+const tabsList = ["Scope and Demand", "Custom Analytics"];
+
+export const AnalyticsProjectModal: React.FC
+
+
+
+
+
+
+ | + {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === params.x_axis)?.label} + | + {params.segment ? ( + barGraphData.xAxisKeys.map((key) => ( +
+
+ {params.segment === "priority" ? (
+ getPriorityIcon(key)
+ ) : (
+
+ )}
+ {DATE_KEYS.includes(params.segment ?? "")
+ ? renderMonthAndYear(key)
+ : params.segment === "assignees__email"
+ ? renderAssigneeName(key)
+ : key}
+
+ |
+ ))
+ ) : (
+ + {ANALYTICS_Y_AXIS_VALUES.find((v) => v.value === params.y_axis)?.label} + | + )} +
|---|---|---|
| + {params.x_axis === "priority" ? ( + getPriorityIcon(`${item.name}`) + ) : ( + + )} + {params.x_axis === "assignees__email" + ? renderAssigneeName(`${item.name}`) + : addSpaceIfCamelCase(`${item.name}`)} + | + {params.segment ? ( + barGraphData.xAxisKeys.map((key, index) => ( ++ {item[key] ?? 0} + | + )) + ) : ( +{item[yAxisKey]} | + )} +
+
+ );
+};
diff --git a/apps/app/components/analytics/scope-and-demand/demand.tsx b/apps/app/components/analytics/scope-and-demand/demand.tsx
new file mode 100644
index 000000000..4a454b564
--- /dev/null
+++ b/apps/app/components/analytics/scope-and-demand/demand.tsx
@@ -0,0 +1,63 @@
+// icons
+import { PlayIcon } from "@heroicons/react/24/outline";
+// types
+import { IDefaultAnalyticsResponse } from "types";
+// constants
+import { STATE_GROUP_COLORS } from "constants/state";
+
+type Props = {
+ defaultAnalytics: IDefaultAnalyticsResponse;
+};
+
+export const AnalyticsDemand: React.FC
+
+
+ {tabsList.map((tab) => (
+
+ `rounded-3xl border border-brand-base px-4 py-2 text-xs hover:bg-brand-surface-2 ${
+ selected ? "bg-brand-surface-2" : ""
+ }`
+ }
+ >
+ {tab}
+
+ ))}
+
+ {/*
+
+
+
+
+
+
+
+
+
+ + Analytics for{" "} + {cycleId ? cycleDetails?.name : moduleId ? moduleDetails?.name : projectDetails?.name} +
+
+
+
+
+ Analytics for
*/} +
+
+);
diff --git a/apps/app/components/analytics/scope-and-demand/index.ts b/apps/app/components/analytics/scope-and-demand/index.ts
new file mode 100644
index 000000000..ae756a961
--- /dev/null
+++ b/apps/app/components/analytics/scope-and-demand/index.ts
@@ -0,0 +1,5 @@
+export * from "./demand";
+export * from "./leaderboard";
+export * from "./scope-and-demand";
+export * from "./scope";
+export * from "./year-wise-issues";
diff --git a/apps/app/components/analytics/scope-and-demand/leaderboard.tsx b/apps/app/components/analytics/scope-and-demand/leaderboard.tsx
new file mode 100644
index 000000000..9e28d0f3e
--- /dev/null
+++ b/apps/app/components/analytics/scope-and-demand/leaderboard.tsx
@@ -0,0 +1,52 @@
+import Image from "next/image";
+
+type Props = {
+ users: {
+ avatar: string | null;
+ email: string | null;
+ firstName: string;
+ lastName: string;
+ count: number;
+ }[];
+ title: string;
+};
+
+export const AnalyticsLeaderboard: React.FCDEMAND
+
+
+ Total open tasks
+{defaultAnalytics.open_issues}
+
+ {defaultAnalytics?.open_issues_classified.map((group) => {
+ const percentage = ((group.state_count / defaultAnalytics.total_issues) * 100).toFixed(0);
+
+ return (
+
+
+
+ );
+ })}
+
+
+
+
+
+ {group.state_group}
+ + {group.state_count} + +{percentage}%
+
+
+
+
+
+ + + Estimate Demand: +
++ {defaultAnalytics.open_estimate_sum}/{defaultAnalytics.total_estimate_sum} +
+
+
+);
diff --git a/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx b/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx
new file mode 100644
index 000000000..d5bf10bc2
--- /dev/null
+++ b/apps/app/components/analytics/scope-and-demand/scope-and-demand.tsx
@@ -0,0 +1,101 @@
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// services
+import analyticsService from "services/analytics.service";
+// components
+import {
+ AnalyticsDemand,
+ AnalyticsLeaderboard,
+ AnalyticsScope,
+ AnalyticsYearWiseIssues,
+} from "components/analytics";
+// ui
+import { Loader, PrimaryButton } from "components/ui";
+// fetch-keys
+import { DEFAULT_ANALYTICS } from "constants/fetch-keys";
+
+type Props = {
+ fullScreen?: boolean;
+};
+
+export const ScopeAndDemand: React.FC{title}
+ {users.length > 0 ? ( +
+ {users.map((user) => (
+
+ ) : (
+
+
+ ))}
+
+ {user && user.avatar && user.avatar !== "" ? (
+
+ {user.count}
+
+
+ ) : (
+
+ {user.firstName !== "" ? user.firstName[0] : "?"}
+
+ )}
+
+ {user.firstName !== "" ? `${user.firstName} ${user.lastName}` : "No assignee"}
+
+ No matching data found.
+ )}
+
+
+ ) : (
+
+ ({
+ avatar: user?.created_by__avatar,
+ email: user?.created_by__email,
+ firstName: user?.created_by__first_name,
+ lastName: user?.created_by__last_name,
+ count: user?.count,
+ }))}
+ title="Most issues created"
+ />
+ ({
+ avatar: user?.assignees__avatar,
+ email: user?.assignees__email,
+ firstName: user?.assignees__first_name,
+ lastName: user?.assignees__last_name,
+ count: user?.count,
+ }))}
+ title="Most issues closed"
+ />
+
+
+
+
+
+ )}
+
+ );
+};
diff --git a/apps/app/components/analytics/scope-and-demand/scope.tsx b/apps/app/components/analytics/scope-and-demand/scope.tsx
new file mode 100644
index 000000000..b0a422ed4
--- /dev/null
+++ b/apps/app/components/analytics/scope-and-demand/scope.tsx
@@ -0,0 +1,84 @@
+// ui
+import { BarGraph } from "components/ui";
+// types
+import { IDefaultAnalyticsResponse } from "types";
+
+type Props = {
+ defaultAnalytics: IDefaultAnalyticsResponse;
+};
+
+export const AnalyticsScope: React.FC
+
+ There was some error in fetching the data.
+
+ mutateDefaultAnalytics()}>Refresh
+
+
+
+);
diff --git a/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx b/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx
new file mode 100644
index 000000000..863eb664b
--- /dev/null
+++ b/apps/app/components/analytics/scope-and-demand/year-wise-issues.tsx
@@ -0,0 +1,54 @@
+// ui
+import { LineGraph } from "components/ui";
+// types
+import { IDefaultAnalyticsResponse } from "types";
+// constants
+import { MONTHS_LIST } from "constants/calendar";
+
+type Props = {
+ defaultAnalytics: IDefaultAnalyticsResponse;
+};
+
+export const AnalyticsYearWiseIssues: React.FCSCOPE
+
+
+
+ `#f97316`}
+ customYAxisTickValues={defaultAnalytics.pending_issue_user.map((d) => d.count)}
+ tooltip={(datum) => {
+ const assignee = defaultAnalytics.pending_issue_user.find(
+ (a) => a.assignees__email === `${datum.indexValue}`
+ );
+
+ return (
+
+
+ );
+ else
+ return (
+
+
+ {datum.value ? `${datum.value}`.toUpperCase()[0] : "?"}
+
+
+ );
+ },
+ }}
+ margin={{ top: 20 }}
+ theme={{
+ background: "rgb(var(--color-bg-base))",
+ axis: {},
+ }}
+ />
+ ) : (
+
+ Pending issues
+ {defaultAnalytics.pending_issue_user.length > 0 ? ( +
+
+ {assignee
+ ? assignee.assignees__first_name + " " + assignee.assignees__last_name
+ : "No assignee"}
+ :{" "}
+
+ {datum.value}
+
+ );
+ }}
+ axisBottom={{
+ renderTick: (datum) => {
+ const avatar =
+ defaultAnalytics.pending_issue_user[datum.tickIndex]?.assignees__avatar ?? "";
+
+ if (avatar && avatar !== "")
+ return (
+
+ No matching data found.
+
+ )}
+
+ ({
+ x: month.label.substring(0, 3),
+ y:
+ defaultAnalytics.issue_completed_month_wise.find(
+ (data) => data.month === month.value
+ )?.count || 0,
+ })),
+ },
+ ]}
+ customYAxisTickValues={defaultAnalytics.issue_completed_month_wise.map((data) => {
+ if (quarterMonthsList.includes(data.month)) return data.count;
+
+ return 0;
+ })}
+ height="300px"
+ colors={(datum) => datum.color}
+ curve="monotoneX"
+ margin={{ top: 20 }}
+ theme={{
+ background: "rgb(var(--color-bg-base))",
+ }}
+ enableArea
+ />
+ ) : (
+
+ );
+};
diff --git a/apps/app/components/analytics/select/index.ts b/apps/app/components/analytics/select/index.ts
new file mode 100644
index 000000000..0c89bd2ad
--- /dev/null
+++ b/apps/app/components/analytics/select/index.ts
@@ -0,0 +1,4 @@
+export * from "./project";
+export * from "./segment";
+export * from "./x-axis";
+export * from "./y-axis";
diff --git a/apps/app/components/analytics/select/project.tsx b/apps/app/components/analytics/select/project.tsx
new file mode 100644
index 000000000..0cc88aa3b
--- /dev/null
+++ b/apps/app/components/analytics/select/project.tsx
@@ -0,0 +1,41 @@
+// ui
+import { CustomSearchSelect } from "components/ui";
+// types
+import { IProject } from "types";
+
+type Props = {
+ value: string[] | null | undefined;
+ onChange: (val: string[] | null) => void;
+ projects: IProject[];
+};
+
+export const SelectProject: React.FCIssues closed in a year
+ {defaultAnalytics.issue_completed_month_wise.length > 0 ? ( +No matching data found.
+ )}
+
+ {project.identifier}
+ {project.name}
+
+ ),
+ }));
+
+ return (
+
+
= ({ actionButton, type }) => {
alt="ProjectSettingImg"
/>
-
Oops! You are not authorized to view this page
++ Oops! You are not authorized to view this page +
{user ? (
diff --git a/apps/app/components/auth-screens/project/join-project.tsx b/apps/app/components/auth-screens/project/join-project.tsx
index 098469114..06ae1c240 100644
--- a/apps/app/components/auth-screens/project/join-project.tsx
+++ b/apps/app/components/auth-screens/project/join-project.tsx
@@ -41,11 +41,11 @@ export const JoinProject: React.FC = () => {
};
return (
-
+
{
>
diff --git a/apps/app/components/core/board-view/all-boards.tsx b/apps/app/components/core/board-view/all-boards.tsx
index 69346cd18..495cee0a5 100644
--- a/apps/app/components/core/board-view/all-boards.tsx
+++ b/apps/app/components/core/board-view/all-boards.tsx
@@ -44,7 +44,7 @@ export const AllBoards: React.FC = ({
return (
<>
{groupedByIssues ? (
-
You are not a member of this project
+You are not a member of this project
diff --git a/apps/app/components/command-palette/command-pallette.tsx b/apps/app/components/command-palette/command-pallette.tsx index 9d23d84e2..bed84f5ad 100644 --- a/apps/app/components/command-palette/command-pallette.tsx +++ b/apps/app/components/command-palette/command-pallette.tsx @@ -821,7 +821,7 @@ export const CommandPalette: React.FC = () => { >
+
{Object.keys(groupedByIssues).map((singleGroup, index) => {
const currentState =
selectedGroup === "state" ? states?.find((s) => s.id === singleGroup) : null;
diff --git a/apps/app/components/core/board-view/single-board.tsx b/apps/app/components/core/board-view/single-board.tsx
index 76226f0cf..16fe0e887 100644
--- a/apps/app/components/core/board-view/single-board.tsx
+++ b/apps/app/components/core/board-view/single-board.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
import { useRouter } from "next/router";
@@ -60,51 +60,46 @@ export const SingleBoard: React.FC = ({
const isNotAllowed = userAuth.isGuest || userAuth.isViewer || isCompleted;
- useEffect(() => {
- if (currentState?.group === "completed" || currentState?.group === "cancelled")
- setIsCollapsed(false);
- }, [currentState]);
-
return (
-
-
-
- {(provided, snapshot) => (
- = ({
// context menu
const [contextMenu, setContextMenu] = useState(false);
const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 });
+ const [isMenuActive, setIsMenuActive] = useState(false);
+
+ const actionSectionRef = useRef(null);
const { orderBy, params } = useIssuesView();
@@ -98,7 +104,7 @@ export const SingleBoardIssue: React.FC = ({
const { setToastAlert } = useToast();
const partialUpdateIssue = useCallback(
- (formData: Partial) => {
+ (formData: Partial, issueId: string) => {
if (!workspaceSlug || !projectId) return;
if (cycleId)
@@ -164,7 +170,7 @@ export const SingleBoardIssue: React.FC = ({
}
issuesService
- .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
+ .patchIssue(workspaceSlug as string, projectId as string, issueId, formData)
.then(() => {
if (cycleId) {
mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
@@ -178,18 +184,7 @@ export const SingleBoardIssue: React.FC = ({
console.log(error);
});
},
- [
- workspaceSlug,
- projectId,
- cycleId,
- moduleId,
- issue,
- groupTitle,
- index,
- selectedGroup,
- orderBy,
- params,
- ]
+ [workspaceSlug, projectId, cycleId, moduleId, groupTitle, index, selectedGroup, orderBy, params]
);
const getStyle = (
@@ -217,6 +212,7 @@ export const SingleBoardIssue: React.FC = ({
title: "Link Copied!",
message: "Issue link copied to clipboard.",
});
+ setIsMenuActive(false);
});
};
@@ -224,6 +220,8 @@ export const SingleBoardIssue: React.FC = ({
if (snapshot.isDragging) handleTrashBox(snapshot.isDragging);
}, [snapshot, handleTrashBox]);
+ useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
+
const isNotAllowed = userAuth.isGuest || userAuth.isViewer || isCompleted;
return (
@@ -276,9 +274,23 @@ export const SingleBoardIssue: React.FC = ({
>
- {orderBy !== "sort_order" && (
- <>
-
-
);
};
diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx
index 8007f3216..7f8a89aa2 100644
--- a/apps/app/components/core/board-view/single-issue.tsx
+++ b/apps/app/components/core/board-view/single-issue.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
@@ -17,6 +17,7 @@ import issuesService from "services/issues.service";
// hooks
import useIssuesView from "hooks/use-issues-view";
import useToast from "hooks/use-toast";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
// components
import {
ViewAssigneeSelect,
@@ -36,7 +37,9 @@ import {
XMarkIcon,
ArrowTopRightOnSquareIcon,
PaperClipIcon,
+ EllipsisHorizontalIcon,
} from "@heroicons/react/24/outline";
+import { LayerDiagonalIcon } from "components/icons";
// helpers
import { handleIssuesMutation } from "constants/issue";
import { copyTextToClipboard, truncateText } from "helpers/string.helper";
@@ -89,6 +92,9 @@ export const SingleBoardIssue: React.FC
- This board is ordered by{" "}
- {replaceUnderscoreIfSnakeCase(
- orderBy ? (orderBy[0] === "-" ? orderBy.slice(1) : orderBy) : "created_at"
- )}
-
-
- )}
+
+
+ {(provided, snapshot) => (
+
+ )}
+
+ )}
+ {orderBy !== "sort_order" && (
+ <>
+
+
+
+ This board is ordered by{" "}
+ {replaceUnderscoreIfSnakeCase(
+ orderBy ? (orderBy[0] === "-" ? orderBy.slice(1) : orderBy) : "created_at"
+ )}
+
+
+ )}
+
{groupedByIssues?.[groupTitle].map((issue, index) => (
= ({
>
{provided.placeholder}
+
+
{type === "issue" ? (
}
- optionsPosition="left"
+ position="left"
noBorder
>
@@ -182,10 +179,10 @@ export const SingleBoard: React.FC = ({
)
)}
- )}
-
- )}
-
{!isNotAllowed && (
-
+
{type && !isNotAllowed && (
-
+ setIsMenuActive(!isMenuActive)}
+ >
+
= ({
isNotAllowed={isNotAllowed}
/>
)}
- {properties.sub_issue_count && (
-
- {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
-
- )}
{properties.labels && issue.label_details.length > 0 && (
{issue.label_details.map((label) => (
@@ -388,11 +395,21 @@ export const SingleBoardIssue: React.FC = ({
selfPositioned
/>
)}
+ {properties.sub_issue_count && (
+
@@ -402,7 +419,7 @@ export const SingleBoardIssue: React.FC = ({
diff --git a/apps/app/components/core/bulk-delete-issues-modal.tsx b/apps/app/components/core/bulk-delete-issues-modal.tsx
index bd5e18e57..7fe2181f6 100644
--- a/apps/app/components/core/bulk-delete-issues-modal.tsx
+++ b/apps/app/components/core/bulk-delete-issues-modal.tsx
@@ -121,7 +121,7 @@ export const BulkDeleteIssuesModal: React.FC = ({ isOpen, setIsOpen }) =>
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
-
+
+ );
+};
+
+export default CalendarHeader;
diff --git a/apps/app/components/core/calendar-view/calendar.tsx b/apps/app/components/core/calendar-view/calendar.tsx
index dd814ed09..ce453f898 100644
--- a/apps/app/components/core/calendar-view/calendar.tsx
+++ b/apps/app/components/core/calendar-view/calendar.tsx
@@ -1,9 +1,20 @@
-import React, { useState } from "react";
-import useSWR, { mutate } from "swr";
-import Link from "next/link";
+import React, { useEffect, useState } from "react";
+
import { useRouter } from "next/router";
-// helper
+import { mutate } from "swr";
+
+// react-beautiful-dnd
+import { DragDropContext, DropResult } from "react-beautiful-dnd";
+// services
+import issuesService from "services/issues.service";
+// hooks
+import useCalendarIssuesView from "hooks/use-calendar-issues-view";
+// components
+import { SingleCalendarDate, CalendarHeader } from "components/core";
+// ui
+import { Spinner } from "components/ui";
+// helpers
import { renderDateFormat } from "helpers/date-time.helper";
import {
startOfWeek,
@@ -11,156 +22,61 @@ import {
eachDayOfInterval,
weekDayInterval,
formatDate,
- getCurrentWeekStartDate,
- getCurrentWeekEndDate,
- subtractMonths,
- addMonths,
- updateDateWithYear,
- updateDateWithMonth,
- isSameMonth,
- isSameYear,
- subtract7DaysToDate,
- addSevenDaysToDate,
} from "helpers/calendar.helper";
-// ui
-import { Popover, Transition } from "@headlessui/react";
-import { DragDropContext, Draggable, DropResult } from "react-beautiful-dnd";
-import StrictModeDroppable from "components/dnd/StrictModeDroppable";
-import { CustomMenu, Spinner, ToggleSwitch } from "components/ui";
-// icon
+// types
+import { ICalendarRange, IIssue, UserAuth } from "types";
+// fetch-keys
import {
- CheckIcon,
- ChevronDownIcon,
- ChevronLeftIcon,
- ChevronRightIcon,
- PlusIcon,
-} from "@heroicons/react/24/outline";
-// hooks
-import useIssuesView from "hooks/use-issues-view";
-// services
-import issuesService from "services/issues.service";
-import cyclesService from "services/cycles.service";
-// fetch key
-import {
- CYCLE_CALENDAR_ISSUES,
- MODULE_CALENDAR_ISSUES,
- PROJECT_CALENDAR_ISSUES,
+ CYCLE_ISSUES_WITH_PARAMS,
+ MODULE_ISSUES_WITH_PARAMS,
+ PROJECT_ISSUES_LIST_WITH_PARAMS,
+ VIEW_ISSUES,
} from "constants/fetch-keys";
-// type
-import { IIssue } from "types";
-// constant
-import { monthOptions, yearOptions } from "constants/calendar";
-import modulesService from "services/modules.service";
-import { getStateGroupIcon } from "components/icons";
type Props = {
+ handleEditIssue: (issue: IIssue) => void;
+ handleDeleteIssue: (issue: IIssue) => void;
addIssueToDate: (date: string) => void;
+ isCompleted: boolean;
+ userAuth: UserAuth;
};
-interface ICalendarRange {
- startDate: Date;
- endDate: Date;
-}
-
-export const CalendarView: React.FC = ({ addIssueToDate }) => {
+export const CalendarView: React.FC = ({
+ handleEditIssue,
+ handleDeleteIssue,
+ addIssueToDate,
+ isCompleted = false,
+ userAuth,
+}) => {
const [showWeekEnds, setShowWeekEnds] = useState(false);
const [currentDate, setCurrentDate] = useState(new Date());
const [isMonthlyView, setIsMonthlyView] = useState(true);
- const [showAllIssues, setShowAllIssues] = useState(false);
- const router = useRouter();
- const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
-
- const { params } = useIssuesView();
-
- const [calendarDateRange, setCalendarDateRange] = useState({
+ const [calendarDates, setCalendarDates] = useState({
startDate: startOfWeek(currentDate),
endDate: lastDayOfWeek(currentDate),
});
- const targetDateFilter = {
- target_date: `${renderDateFormat(calendarDateRange.startDate)};after,${renderDateFormat(
- calendarDateRange.endDate
- )};before`,
- };
+ const router = useRouter();
+ const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
- const { data: projectCalendarIssues } = useSWR(
- workspaceSlug && projectId ? PROJECT_CALENDAR_ISSUES(projectId as string) : null,
- workspaceSlug && projectId
- ? () =>
- issuesService.getIssuesWithParams(workspaceSlug as string, projectId as string, {
- ...params,
- target_date: `${renderDateFormat(calendarDateRange.startDate)};after,${renderDateFormat(
- calendarDateRange.endDate
- )};before`,
- group_by: null,
- })
- : null
- );
-
- const { data: cycleCalendarIssues } = useSWR(
- workspaceSlug && projectId && cycleId
- ? CYCLE_CALENDAR_ISSUES(projectId as string, cycleId as string)
- : null,
- workspaceSlug && projectId && cycleId
- ? () =>
- cyclesService.getCycleIssuesWithParams(
- workspaceSlug as string,
- projectId as string,
- cycleId as string,
- {
- ...params,
- target_date: `${renderDateFormat(
- calendarDateRange.startDate
- )};after,${renderDateFormat(calendarDateRange.endDate)};before`,
- group_by: null,
- }
- )
- : null
- );
-
- const { data: moduleCalendarIssues } = useSWR(
- workspaceSlug && projectId && moduleId
- ? MODULE_CALENDAR_ISSUES(projectId as string, moduleId as string)
- : null,
- workspaceSlug && projectId && moduleId
- ? () =>
- modulesService.getModuleIssuesWithParams(
- workspaceSlug as string,
- projectId as string,
- moduleId as string,
- {
- ...params,
- target_date: `${renderDateFormat(
- calendarDateRange.startDate
- )};after,${renderDateFormat(calendarDateRange.endDate)};before`,
- group_by: null,
- }
- )
- : null
- );
+ const { calendarIssues, params, setCalendarDateRange } = useCalendarIssuesView();
const totalDate = eachDayOfInterval({
- start: calendarDateRange.startDate,
- end: calendarDateRange.endDate,
+ start: calendarDates.startDate,
+ end: calendarDates.endDate,
});
const onlyWeekDays = weekDayInterval({
- start: calendarDateRange.startDate,
- end: calendarDateRange.endDate,
+ start: calendarDates.startDate,
+ end: calendarDates.endDate,
});
const currentViewDays = showWeekEnds ? totalDate : onlyWeekDays;
- const calendarIssues = cycleId
- ? (cycleCalendarIssues as IIssue[])
- : moduleId
- ? (moduleCalendarIssues as IIssue[])
- : (projectCalendarIssues as IIssue[]);
-
const currentViewDaysData = currentViewDays.map((date: Date) => {
const filterIssue =
- calendarIssues && calendarIssues.length > 0
+ calendarIssues.length > 0
? calendarIssues.filter(
(issue) =>
issue.target_date && renderDateFormat(issue.target_date) === renderDateFormat(date)
@@ -191,13 +107,16 @@ export const CalendarView: React.FC = ({ addIssueToDate }) => {
const { source, destination, draggableId } = result;
if (!destination || !workspaceSlug || !projectId) return;
+
if (source.droppableId === destination.droppableId) return;
const fetchKey = cycleId
- ? CYCLE_CALENDAR_ISSUES(projectId as string, cycleId as string)
+ ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params)
: moduleId
- ? MODULE_CALENDAR_ISSUES(projectId as string, moduleId as string)
- : PROJECT_CALENDAR_ISSUES(projectId as string);
+ ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params)
+ : viewId
+ ? VIEW_ISSUES(viewId.toString(), params)
+ : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params);
mutate(
fetchKey,
@@ -208,314 +127,105 @@ export const CalendarView: React.FC = ({ addIssueToDate }) => {
...p,
target_date: destination.droppableId,
};
+
return p;
}),
false
);
- issuesService.patchIssue(workspaceSlug as string, projectId as string, draggableId, {
- target_date: destination?.droppableId,
- });
+ issuesService
+ .patchIssue(workspaceSlug as string, projectId as string, draggableId, {
+ target_date: destination?.droppableId,
+ })
+ .then(() => mutate(fetchKey));
};
- const updateDate = (date: Date) => {
- setCurrentDate(date);
-
- setCalendarDateRange({
- startDate: startOfWeek(date),
- endDate: lastDayOfWeek(date),
+ const changeDateRange = (startDate: Date, endDate: Date) => {
+ setCalendarDates({
+ startDate,
+ endDate,
});
+
+ setCalendarDateRange(
+ `${renderDateFormat(startDate)};after,${renderDateFormat(endDate)};before`
+ );
};
+ useEffect(() => {
+ setCalendarDateRange(
+ `${renderDateFormat(startOfWeek(currentDate))};after,${renderDateFormat(
+ lastDayOfWeek(currentDate)
+ )};before`
+ );
+ }, [currentDate]);
+
+ const isNotAllowed = userAuth.isGuest || userAuth.isViewer || isCompleted;
+
return calendarIssues ? (
-
-
+
+
) : (
= ({
+ handleEditIssue,
+ handleDeleteIssue,
+ date,
+ index,
+ addIssueToDate,
+ isMonthlyView,
+ showWeekEnds,
+ isNotAllowed,
+}) => {
+ const [showAllIssues, setShowAllIssues] = useState(false);
+
+ const totalIssues = date.issues.length;
+
+ return (
+
+ {(provided) => (
+
+ );
+};
diff --git a/apps/app/components/core/calendar-view/single-issue.tsx b/apps/app/components/core/calendar-view/single-issue.tsx
new file mode 100644
index 000000000..9102f7338
--- /dev/null
+++ b/apps/app/components/core/calendar-view/single-issue.tsx
@@ -0,0 +1,276 @@
+import React, { useCallback } from "react";
+
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+import { mutate } from "swr";
+
+// react-beautiful-dnd
+import { DraggableProvided, DraggableStateSnapshot } from "react-beautiful-dnd";
+// services
+import issuesService from "services/issues.service";
+// hooks
+import useCalendarIssuesView from "hooks/use-calendar-issues-view";
+import useIssuesProperties from "hooks/use-issue-properties";
+import useToast from "hooks/use-toast";
+// components
+import { CustomMenu, Tooltip } from "components/ui";
+import {
+ ViewAssigneeSelect,
+ ViewDueDateSelect,
+ ViewEstimateSelect,
+ ViewPrioritySelect,
+ ViewStateSelect,
+} from "components/issues";
+// icons
+import { LinkIcon, PaperClipIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
+import { LayerDiagonalIcon } from "components/icons";
+// helper
+import { copyTextToClipboard, truncateText } from "helpers/string.helper";
+// type
+import { IIssue } from "types";
+// fetch-keys
+import {
+ CYCLE_ISSUES_WITH_PARAMS,
+ MODULE_ISSUES_WITH_PARAMS,
+ PROJECT_ISSUES_LIST_WITH_PARAMS,
+ VIEW_ISSUES,
+} from "constants/fetch-keys";
+
+type Props = {
+ handleEditIssue: (issue: IIssue) => void;
+ handleDeleteIssue: (issue: IIssue) => void;
+ index: number;
+ provided: DraggableProvided;
+ snapshot: DraggableStateSnapshot;
+ issue: IIssue;
+ isNotAllowed: boolean;
+};
+
+export const SingleCalendarIssue: React.FC = ({
+ handleEditIssue,
+ handleDeleteIssue,
+ index,
+ provided,
+ snapshot,
+ issue,
+ isNotAllowed,
+}) => {
+ const router = useRouter();
+ const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
+
+ const { setToastAlert } = useToast();
+
+ const { params } = useCalendarIssuesView();
+
+ const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
+
+ const partialUpdateIssue = useCallback(
+ (formData: Partial, issueId: string) => {
+ if (!workspaceSlug || !projectId) return;
+
+ const fetchKey = cycleId
+ ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params)
+ : moduleId
+ ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params)
+ : viewId
+ ? VIEW_ISSUES(viewId.toString(), params)
+ : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params);
+
+ mutate(
+ fetchKey,
+ (prevData) =>
+ (prevData ?? []).map((p) => {
+ if (p.id === issueId) {
+ return {
+ ...p,
+ ...formData,
+ assignees: formData?.assignees_list ?? p.assignees,
+ };
+ }
+
+ return p;
+ }),
+ false
+ );
+
+ issuesService
+ .patchIssue(workspaceSlug as string, projectId as string, issueId as string, formData)
+ .then(() => {
+ mutate(fetchKey);
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+ },
+ [workspaceSlug, projectId, cycleId, moduleId, params]
+ );
+
+ const handleCopyText = () => {
+ const originURL =
+ typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+ copyTextToClipboard(
+ `${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`
+ ).then(() => {
+ setToastAlert({
+ type: "success",
+ title: "Link Copied!",
+ message: "Issue link copied to clipboard.",
+ });
+ });
+ };
+
+ const displayProperties = properties
+ ? Object.values(properties).some((value) => value === true)
+ : false;
+
+ return (
+ ;
+ setValue: UseFormSetValue;
+ error: FieldError | Merge> | undefined;
+ register: UseFormRegister;
+};
+
+export const ColorPickerInput: React.FC = ({ name, watch, setValue, error, register }) => {
+ const handleColorChange = (newColor: ColorResult) => {
+ const { hex } = newColor;
+ setValue(name, hex);
+ };
+
+ const getColorText = (colorName: string) => {
+ switch (colorName) {
+ case "accent":
+ return "Accent";
+ case "bgBase":
+ return "Background";
+ case "bgSurface1":
+ return "Background surface 1";
+ case "bgSurface2":
+ return "Background surface 2";
+ case "border":
+ return "Border";
+ case "sidebar":
+ return "Sidebar";
+ case "textBase":
+ return "Text primary";
+ case "textSecondary":
+ return "Text secondary";
+ default:
+ return "Color";
+ }
+ };
+
+ return (
+ = ({ handleFormSubmit, handleClose, status, data }) => {
- const {
- register,
- formState: { errors, isSubmitting },
- handleSubmit,
- reset,
- } = useForm({
- defaultValues,
- });
- const [darkPalette, setDarkPalette] = useState(false);
-
- const handleUpdateTheme = async (formData: any) => {
- await handleFormSubmit({ ...formData, darkPalette });
-
- reset({
- ...defaultValues,
- });
- };
-
- useEffect(() => {
- reset({
- ...defaultValues,
- ...data,
- });
- }, [data, reset]);
-
- // --color-bg-base: 25, 27, 27;
- // --color-bg-surface-1: 31, 32, 35;
- // --color-bg-surface-2: 39, 42, 45;
-
- // --color-border: 46, 50, 52;
- // --color-bg-sidebar: 19, 20, 22;
- // --color-accent: 60, 133, 217;
-
- // --color-text-base: 255, 255, 255;
- // --color-text-secondary: 142, 148, 146;
-
- return (
-
- );
-};
diff --git a/apps/app/components/core/custom-theme-modal.tsx b/apps/app/components/core/custom-theme-modal.tsx
deleted file mode 100644
index d46d17d28..000000000
--- a/apps/app/components/core/custom-theme-modal.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from "react";
-
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// components
-import { ThemeForm } from "./custom-theme-form";
-// helpers
-import { applyTheme } from "helpers/theme.helper";
-// fetch-keys
-
-type Props = {
- isOpen: boolean;
- handleClose: () => void;
-};
-
-export const CustomThemeModal: React.FC = ({ isOpen, handleClose }) => {
- const onClose = () => {
- handleClose();
- };
-
- const handleFormSubmit = async (formData: any) => {
- applyTheme(formData.palette, formData.darkPalette);
- onClose();
- };
-
- return (
-
-
-
- );
-};
diff --git a/apps/app/components/core/custom-theme-selector.tsx b/apps/app/components/core/custom-theme-selector.tsx
new file mode 100644
index 000000000..59aed8b2b
--- /dev/null
+++ b/apps/app/components/core/custom-theme-selector.tsx
@@ -0,0 +1,198 @@
+import React, { useEffect, useState } from "react";
+
+import { useTheme } from "next-themes";
+
+import { useForm } from "react-hook-form";
+
+// hooks
+import useUser from "hooks/use-user";
+// ui
+import { PrimaryButton } from "components/ui";
+import { ColorPickerInput } from "components/core";
+// services
+import userService from "services/user.service";
+// helper
+import { applyTheme } from "helpers/theme.helper";
+// types
+import { ICustomTheme } from "types";
+
+type Props = {
+ preLoadedData?: Partial | null;
+};
+
+export const CustomThemeSelector: React.FC = ({ preLoadedData }) => {
+ const [darkPalette, setDarkPalette] = useState(false);
+
+ const defaultValues = {
+ accent: preLoadedData?.accent ?? "#FE5050",
+ bgBase: preLoadedData?.bgBase ?? "#FFF7F7",
+ bgSurface1: preLoadedData?.bgSurface1 ?? "#FFE0E0",
+ bgSurface2: preLoadedData?.bgSurface2 ?? "#FFF7F7",
+ border: preLoadedData?.border ?? "#FFC9C9",
+ darkPalette: preLoadedData?.darkPalette ?? false,
+ palette: preLoadedData?.palette ?? "",
+ sidebar: preLoadedData?.sidebar ?? "#FFFFFF",
+ textBase: preLoadedData?.textBase ?? "#430000",
+ textSecondary: preLoadedData?.textSecondary ?? "#323232",
+ };
+
+ const {
+ register,
+ formState: { errors, isSubmitting },
+ handleSubmit,
+ watch,
+ setValue,
+ reset,
+ } = useForm({
+ defaultValues,
+ });
+
+ const { setTheme } = useTheme();
+ const { mutateUser } = useUser();
+
+ const handleFormSubmit = async (formData: any) => {
+ await userService
+ .updateUser({
+ theme: {
+ accent: formData.accent,
+ bgBase: formData.bgBase,
+ bgSurface1: formData.bgSurface1,
+ bgSurface2: formData.bgSurface2,
+ border: formData.border,
+ darkPalette: darkPalette,
+ palette: `${formData.bgBase},${formData.bgSurface1},${formData.bgSurface2},${formData.border},${formData.sidebar},${formData.accent},${formData.textBase},${formData.textSecondary}`,
+ sidebar: formData.sidebar,
+ textBase: formData.textBase,
+ textSecondary: formData.textSecondary,
+ },
+ })
+ .then((res) => {
+ mutateUser((prevData) => {
+ if (!prevData) return prevData;
+ return { ...prevData, user: res };
+ }, false);
+ applyTheme(formData.palette, darkPalette);
+ setTheme("custom");
+ })
+ .catch((err) => console.log(err));
+ };
+
+ const handleUpdateTheme = async (formData: any) => {
+ await handleFormSubmit({ ...formData, darkPalette });
+
+ reset({
+ ...defaultValues,
+ });
+ };
+
+ useEffect(() => {
+ reset({
+ ...defaultValues,
+ ...preLoadedData,
+ });
+ }, [preLoadedData, reset]);
+
+ return (
+
+ );
+};
diff --git a/apps/app/components/core/feeds.tsx b/apps/app/components/core/feeds.tsx
index b5cb0bb78..bd0e4c6bf 100644
--- a/apps/app/components/core/feeds.tsx
+++ b/apps/app/components/core/feeds.tsx
@@ -79,7 +79,7 @@ const activityDetails: {
},
estimate_point: {
message: "set the estimate point to",
- icon: ,
+ icon: ,
},
target_date: {
message: "set the due date to",
diff --git a/apps/app/components/core/filter-list.tsx b/apps/app/components/core/filters-list.tsx
similarity index 100%
rename from apps/app/components/core/filter-list.tsx
rename to apps/app/components/core/filters-list.tsx
diff --git a/apps/app/components/core/gantt-chart-view/index.tsx b/apps/app/components/core/gantt-chart-view/index.tsx
new file mode 100644
index 000000000..ca07e3d7a
--- /dev/null
+++ b/apps/app/components/core/gantt-chart-view/index.tsx
@@ -0,0 +1,26 @@
+import { useRouter } from "next/router";
+
+// components
+import { CycleIssuesGanttChartView } from "components/cycles";
+import { IssueGanttChartView } from "components/issues/gantt-chart";
+import { ModuleIssuesGanttChartView } from "components/modules";
+import { ViewIssuesGanttChartView } from "components/views";
+
+export const GanttChartView = () => {
+ const router = useRouter();
+ const { cycleId, moduleId, viewId } = router.query;
+
+ return (
+ <>
+ {cycleId ? (
+ (
+ (props, ref) => = ({
isOpen,
handleClose,
@@ -52,6 +60,8 @@ export const GptAssistantModal: React.FC = ({
const router = useRouter();
const { workspaceSlug } = router.query;
+ const editorRef = useRef(null);
+
const { setToastAlert } = useToast();
const {
@@ -119,26 +129,31 @@ export const GptAssistantModal: React.FC = ({
if (isOpen) setFocus("task");
}, [isOpen, setFocus]);
+ useEffect(() => {
+ editorRef.current?.setEditorValue(htmlContent ?? `
+
+
+
+ )}
{properties.link && (
+
+
-
-
-
-
-
-
-
- {({ open }) => (
- <>
-
-
+
-
-
- {formatDate(currentDate, "Month")}{" "}
- {formatDate(currentDate, "yyyy")}
-
-
+
+ {
- setIsMonthlyView(true);
- setCalendarDateRange({
- startDate: startOfWeek(currentDate),
- endDate: lastDayOfWeek(currentDate),
- });
- }}
- className="w-52 text-sm text-brand-secondary"
- >
-
- {
- setIsMonthlyView(false);
- setCalendarDateRange({
- startDate: getCurrentWeekStartDate(currentDate),
- endDate: getCurrentWeekEndDate(currentDate),
- });
- }}
- className="w-52 text-sm text-brand-secondary"
- >
-
-
-
+
-
-
-
-
- )}
-
-
-
-
-
- {yearOptions.map((year) => (
-
- ))}
-
-
- {monthOptions.map((month) => (
-
- ))}
-
-
-
-
-
-
-
-
-
- {isMonthlyView ? "Monthly" : "Weekly"}
-
-
- }
- >
-
- Monthly View
-
-
- Weekly View
-
-
- setShowWeekEnds(!showWeekEnds)}
- />
-
-
- Show weekends
-
- {weeks.map((date, index) => (
-
-
-
-
- {isMonthlyView ? formatDate(date, "eee").substring(0, 3) : formatDate(date, "eee")}
-
- {!isMonthlyView && {formatDate(date, "d")}}
-
- ))}
-
- {currentViewDaysData.map((date, index) => {
- const totalIssues = date.issues.length;
-
- return (
-
- {(provided) => (
-
+
+
+ {weeks.map((date, index) => (
+
+ ))}
+
- {isMonthlyView && {formatDate(new Date(date.date), "d")}}
- {totalIssues > 0 &&
- date.issues
- .slice(0, showAllIssues ? totalIssues : 4)
- .map((issue: IIssue, index) => (
-
- {(provided, snapshot) => (
-
- )}
-
- ))}
- {totalIssues > 4 && (
-
- )}
-
- )}
-
- );
- })}
+ : (index + 1) % 5 === 0
+ ? ""
+ : "border-r"
+ : ""
+ }`}
+ >
+
+ {isMonthlyView
+ ? formatDate(date, "eee").substring(0, 3)
+ : formatDate(date, "eee")}
+
+ {!isMonthlyView && {formatDate(date, "d")}}
+
-
-
- {provided.placeholder}
-
+ {currentViewDaysData.map((date, index) => (
+
+ {isMonthlyView && {formatDate(new Date(date.date), "d")}}
+ {totalIssues > 0 &&
+ date.issues.slice(0, showAllIssues ? totalIssues : 4).map((issue: IIssue, index) => (
+
+ {(provided, snapshot) => (
+
+ ))}
+ {totalIssues > 4 && (
+
+ )}
+
+
+ )}
+
+
+
+
+ {provided.placeholder}
+
+
+ );
+};
diff --git a/apps/app/components/core/color-picker-input.tsx b/apps/app/components/core/color-picker-input.tsx
new file mode 100644
index 000000000..28b6c4e2c
--- /dev/null
+++ b/apps/app/components/core/color-picker-input.tsx
@@ -0,0 +1,121 @@
+import React from "react";
+
+// react-form
+import {
+ FieldError,
+ FieldErrorsImpl,
+ Merge,
+ UseFormRegister,
+ UseFormSetValue,
+ UseFormWatch,
+} from "react-hook-form";
+// react-color
+import { ColorResult, SketchPicker } from "react-color";
+// component
+import { Popover, Transition } from "@headlessui/react";
+import { Input } from "components/ui";
+// icons
+import { ColorPickerIcon } from "components/icons";
+
+type Props = {
+ name: string;
+ watch: UseFormWatch
+ {!isNotAllowed && (
+
+
+ {issue.project_detail?.identifier}-{issue.sequence_id}
+
+
+ )}
+
+ {truncateText(issue.name, 25)}
+
+
+
+ {displayProperties && (
+
+
+
+ handleEditIssue(issue)}>
+
+ handleDeleteIssue(issue)}>
+
+
+
+
+
+ )}
+
+
+ {properties.key && (
+
+
+
+
+
+
+
+ {properties.priority && (
+
+ )}
+
+ {issue.label_details.map((label) => (
+
+
+ {label.name}
+
+ ))}
+
+ ) : (
+ ""
+ )}
+ {properties.assignee && (
+
+
+
+
+ )}
+ {properties.link && (
+
+
+
+
+
+
+ )}
+ {properties.attachment_count && (
+
+
+
+
+
+
+ )}
+
+
+
+
+
+ );
+};
diff --git a/apps/app/components/core/custom-theme-form.tsx b/apps/app/components/core/custom-theme-form.tsx
deleted file mode 100644
index ed1009468..000000000
--- a/apps/app/components/core/custom-theme-form.tsx
+++ /dev/null
@@ -1,267 +0,0 @@
-import { useEffect, useState } from "react";
-
-// react-hook-form
-import { useForm } from "react-hook-form";
-// ui
-import { Input, PrimaryButton, SecondaryButton } from "components/ui";
-
-const defaultValues = {
- palette: "",
-};
-
-export const ThemeForm: React.FC
+
+ {({ open }) => (
+ <>
+
+ {watch(name) && watch(name) !== "" ? (
+
+ ) : (
+
+
+
+
+
+
+
+ )}
+
+
+ ${content}
`); + }, [htmlContent, editorRef, content]); + return (
- {((content && content !== "") || htmlContent !== "") && (
+ {((content && content !== "") || (htmlContent && htmlContent !== "")) && (
Content:
- {content}}
customClassName="-m-3"
noBorder
borderOnFocus={false}
editable={false}
+ ref={editorRef}
/>
)}
{response !== "" && (
-
+
Response:
${response}`}
diff --git a/apps/app/components/core/image-upload-modal.tsx b/apps/app/components/core/image-upload-modal.tsx
index ba41f3efa..2ede6e8d7 100644
--- a/apps/app/components/core/image-upload-modal.tsx
+++ b/apps/app/components/core/image-upload-modal.tsx
@@ -110,7 +110,7 @@ export const ImageUploadModal: React.FC = ({
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
-
+
@@ -124,7 +124,7 @@ export const ImageUploadModal: React.FC = ({
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
-
+
Upload Image
@@ -133,9 +133,9 @@ export const ImageUploadModal: React.FC = ({
{
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
-
+
= ({
console.log(e);
});
},
- [workspaceSlug, projectId, cycleId, params]
+ [workspaceSlug, projectId, cycleId, params, selectedGroup, setToastAlert]
);
const removeIssueFromModule = useCallback(
@@ -396,7 +396,7 @@ export const IssuesView: React.FC = ({
console.log(e);
});
},
- [workspaceSlug, projectId, moduleId, params]
+ [workspaceSlug, projectId, moduleId, params, selectedGroup, setToastAlert]
);
const handleTrashBox = useCallback(
@@ -442,14 +442,10 @@ export const IssuesView: React.FC = ({
handleClose={() => setTransferIssuesModal(false)}
isOpen={transferIssuesModal}
/>
- <>
-
@@ -482,14 +476,14 @@ export const IssuesView: React.FC = ({
@@ -536,8 +530,16 @@ export const IssuesView: React.FC = ({
isCompleted={isCompleted}
userAuth={memberRole}
/>
+ ) : issueView === "calendar" ? (
+ = ({
const { groupByProperty: selectedGroup, orderBy, params } = useIssueView();
const partialUpdateIssue = useCallback(
- (formData: Partial) => {
+ (formData: Partial, issueId: string) => {
if (!workspaceSlug || !projectId) return;
if (cycleId)
@@ -140,7 +141,7 @@ export const SingleListIssue: React.FC = ({
);
issuesService
- .patchIssue(workspaceSlug as string, projectId as string, issue.id, formData)
+ .patchIssue(workspaceSlug as string, projectId as string, issueId, formData)
.then(() => {
if (cycleId) {
mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
@@ -151,18 +152,7 @@ export const SingleListIssue: React.FC = ({
} else mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params));
});
},
- [
- workspaceSlug,
- projectId,
- cycleId,
- moduleId,
- issue,
- groupTitle,
- index,
- selectedGroup,
- orderBy,
- params,
- ]
+ [workspaceSlug, projectId, cycleId, moduleId, groupTitle, index, selectedGroup, orderBy, params]
);
const handleCopyText = () => {
@@ -216,7 +206,7 @@ export const SingleListIssue: React.FC = ({
= ({ handleFormSubmit, handleClose, stat
Cancel
-
+
{status
? isSubmitting
? "Updating Cycle..."
diff --git a/apps/app/components/cycles/gantt-chart.tsx b/apps/app/components/cycles/gantt-chart.tsx
new file mode 100644
index 000000000..44abc392b
--- /dev/null
+++ b/apps/app/components/cycles/gantt-chart.tsx
@@ -0,0 +1,83 @@
+import { FC } from "react";
+// next imports
+import Link from "next/link";
+import { useRouter } from "next/router";
+// components
+import { GanttChartRoot } from "components/gantt-chart";
+// hooks
+import useGanttChartCycleIssues from "hooks/gantt-chart/cycle-issues-view";
+
+type Props = {};
+
+export const CycleIssuesGanttChartView: FC = ({}) => {
+ const router = useRouter();
+ const { workspaceSlug, projectId, cycleId } = router.query;
+
+ const { ganttIssues, mutateGanttIssues } = useGanttChartCycleIssues(
+ workspaceSlug as string,
+ projectId as string,
+ cycleId as string
+ );
+
+ // rendering issues on gantt sidebar
+ const GanttSidebarBlockView = ({ data }: any) => (
+ = ({
mutate(CYCLE_DRAFT_LIST(projectId as string));
}
mutate(CYCLE_INCOMPLETE_LIST(projectId as string));
+ mutate(CYCLE_DETAILS(projectId as string));
handleClose();
setToastAlert({
@@ -92,6 +94,7 @@ export const CreateUpdateCycleModal: React.FC = ({
default:
mutate(CYCLE_DRAFT_LIST(projectId as string));
}
+ mutate(CYCLE_DETAILS(projectId as string));
if (
getDateRangeStatus(data?.start_date, data?.end_date) !=
getDateRangeStatus(res.start_date, res.end_date)
@@ -128,6 +131,21 @@ export const CreateUpdateCycleModal: React.FC = ({
});
};
+ const dateChecker = async (payload: any) => {
+ try {
+ const res = await cycleService.cycleDateCheck(
+ workspaceSlug as string,
+ projectId as string,
+ payload
+ );
+ console.log(res);
+ return res.status;
+ } catch (err) {
+ console.log(err);
+ return false;
+ }
+ };
+
const handleFormSubmit = async (formData: Partial) => {
if (!workspaceSlug || !projectId) return;
@@ -135,8 +153,66 @@ export const CreateUpdateCycleModal: React.FC = ({
...formData,
};
- if (!data) await createCycle(payload);
- else await updateCycle(data.id, payload);
+ if (payload.start_date && payload.end_date) {
+ if (!isDateGreaterThanToday(payload.end_date)) {
+ setToastAlert({
+ type: "error",
+ title: "Error!",
+ message: "Unable to create cycle in past date. Please enter a valid date.",
+ });
+ handleClose();
+ return;
+ }
+
+ if (data?.start_date && data?.end_date) {
+ const isDateValidForExistingCycle = await dateChecker({
+ start_date: payload.start_date,
+ end_date: payload.end_date,
+ cycle_id: data.id,
+ });
+
+ if (isDateValidForExistingCycle) {
+ await updateCycle(data.id, payload);
+ return;
+ } else {
+ setToastAlert({
+ type: "error",
+ title: "Error!",
+ message:
+ "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
+ });
+ handleClose();
+ return;
+ }
+ }
+
+ const isDateValid = await dateChecker({
+ start_date: payload.start_date,
+ end_date: payload.end_date,
+ });
+
+ if (isDateValid) {
+ if (data) {
+ await updateCycle(data.id, payload);
+ } else {
+ await createCycle(payload);
+ }
+ } else {
+ setToastAlert({
+ type: "error",
+ title: "Error!",
+ message:
+ "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
+ });
+ handleClose();
+ }
+ } else {
+ if (data) {
+ await updateCycle(data.id, payload);
+ } else {
+ await createCycle(payload);
+ }
+ }
};
return (
diff --git a/apps/app/components/cycles/sidebar.tsx b/apps/app/components/cycles/sidebar.tsx
index 863da7934..494383fc4 100644
--- a/apps/app/components/cycles/sidebar.tsx
+++ b/apps/app/components/cycles/sidebar.tsx
@@ -8,7 +8,6 @@ import useSWR, { mutate } from "swr";
// react-hook-form
import { useForm } from "react-hook-form";
import { Disclosure, Popover, Transition } from "@headlessui/react";
-import DatePicker from "react-datepicker";
// icons
import {
CalendarDaysIcon,
@@ -21,7 +20,7 @@ import {
LinkIcon,
} from "@heroicons/react/24/outline";
// ui
-import { CustomMenu, Loader, ProgressBar } from "components/ui";
+import { CustomMenu, CustomRangeDatePicker, Loader, ProgressBar } from "components/ui";
// hooks
import useToast from "hooks/use-toast";
// services
@@ -34,7 +33,11 @@ import { DeleteCycleModal } from "components/cycles";
import { ExclamationIcon } from "components/icons";
// helpers
import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper";
-import { isDateRangeValid, renderDateFormat, renderShortDate } from "helpers/date-time.helper";
+import {
+ isDateGreaterThanToday,
+ renderDateFormat,
+ renderShortDate,
+} from "helpers/date-time.helper";
// types
import { ICycle, IIssue } from "types";
// fetch-keys
@@ -77,7 +80,7 @@ export const CycleDetailsSidebar: React.FC = ({
: null
);
- const { reset, watch } = useForm({
+ const { setValue, reset, watch } = useForm({
defaultValues,
});
@@ -122,6 +125,166 @@ export const CycleDetailsSidebar: React.FC = ({
});
}, [cycle, reset]);
+ const dateChecker = async (payload: any) => {
+ try {
+ const res = await cyclesService.cycleDateCheck(
+ workspaceSlug as string,
+ projectId as string,
+ payload
+ );
+ return res.status;
+ } catch (err) {
+ return false;
+ }
+ };
+
+ const handleStartDateChange = async (date: string) => {
+ setValue("start_date", date);
+ if (
+ watch("start_date") &&
+ watch("end_date") &&
+ watch("start_date") !== "" &&
+ watch("end_date") &&
+ watch("start_date") !== ""
+ ) {
+ if (!isDateGreaterThanToday(`${watch("end_date")}`)) {
+ setToastAlert({
+ type: "error",
+ title: "Error!",
+ message: "Unable to create cycle in past date. Please enter a valid date.",
+ });
+ return;
+ }
+
+ if (cycle?.start_date && cycle?.end_date) {
+ const isDateValidForExistingCycle = await dateChecker({
+ start_date: `${watch("start_date")}`,
+ end_date: `${watch("end_date")}`,
+ cycle_id: cycle.id,
+ });
+
+ if (isDateValidForExistingCycle) {
+ await submitChanges({
+ start_date: renderDateFormat(`${watch("start_date")}`),
+ end_date: renderDateFormat(`${watch("end_date")}`),
+ });
+ setToastAlert({
+ type: "success",
+ title: "Success!",
+ message: "Cycle updated successfully.",
+ });
+ return;
+ } else {
+ setToastAlert({
+ type: "error",
+ title: "Error!",
+ message:
+ "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
+ });
+ return;
+ }
+ }
+
+ const isDateValid = await dateChecker({
+ start_date: `${watch("start_date")}`,
+ end_date: `${watch("end_date")}`,
+ });
+
+ if (isDateValid) {
+ submitChanges({
+ start_date: renderDateFormat(`${watch("start_date")}`),
+ end_date: renderDateFormat(`${watch("end_date")}`),
+ });
+ setToastAlert({
+ type: "success",
+ title: "Success!",
+ message: "Cycle updated successfully.",
+ });
+ } else {
+ setToastAlert({
+ type: "error",
+ title: "Error!",
+ message:
+ "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
+ });
+ }
+ }
+ };
+
+ const handleEndDateChange = async (date: string) => {
+ setValue("end_date", date);
+
+ if (
+ watch("start_date") &&
+ watch("end_date") &&
+ watch("start_date") !== "" &&
+ watch("end_date") &&
+ watch("start_date") !== ""
+ ) {
+ if (!isDateGreaterThanToday(`${watch("end_date")}`)) {
+ setToastAlert({
+ type: "error",
+ title: "Error!",
+ message: "Unable to create cycle in past date. Please enter a valid date.",
+ });
+ return;
+ }
+
+ if (cycle?.start_date && cycle?.end_date) {
+ const isDateValidForExistingCycle = await dateChecker({
+ start_date: `${watch("start_date")}`,
+ end_date: `${watch("end_date")}`,
+ cycle_id: cycle.id,
+ });
+
+ if (isDateValidForExistingCycle) {
+ await submitChanges({
+ start_date: renderDateFormat(`${watch("start_date")}`),
+ end_date: renderDateFormat(`${watch("end_date")}`),
+ });
+ setToastAlert({
+ type: "success",
+ title: "Success!",
+ message: "Cycle updated successfully.",
+ });
+ return;
+ } else {
+ setToastAlert({
+ type: "error",
+ title: "Error!",
+ message:
+ "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
+ });
+ return;
+ }
+ }
+
+ const isDateValid = await dateChecker({
+ start_date: `${watch("start_date")}`,
+ end_date: `${watch("end_date")}`,
+ });
+
+ if (isDateValid) {
+ submitChanges({
+ start_date: renderDateFormat(`${watch("start_date")}`),
+ end_date: renderDateFormat(`${watch("end_date")}`),
+ });
+ setToastAlert({
+ type: "success",
+ title: "Success!",
+ message: "Cycle updated successfully.",
+ });
+ } else {
+ setToastAlert({
+ type: "error",
+ title: "Error!",
+ message:
+ "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
+ });
+ }
+ }
+ };
+
const isStartValid = new Date(`${cycle?.start_date}`) <= new Date();
const isEndValid = new Date(`${cycle?.end_date}`) >= new Date(`${cycle?.start_date}`);
@@ -133,9 +296,9 @@ export const CycleDetailsSidebar: React.FC = ({
<>
@@ -143,7 +143,7 @@ export const ImageUploadModal: React.FC = ({
<>
@@ -152,17 +152,18 @@ export const ImageUploadModal: React.FC = ({
objectFit="cover"
src={image ? URL.createObjectURL(image) : value ? value : ""}
alt="image"
+ className="rounded-lg"
/>
) : (
- <>
-
+
)}
diff --git a/apps/app/components/core/index.ts b/apps/app/components/core/index.ts
index eb547578c..e3e187d60 100644
--- a/apps/app/components/core/index.ts
+++ b/apps/app/components/core/index.ts
@@ -1,14 +1,18 @@
export * from "./board-view";
+export * from "./calendar-view";
+export * from "./gantt-chart-view";
export * from "./list-view";
export * from "./sidebar";
export * from "./bulk-delete-issues-modal";
export * from "./existing-issues-list-modal";
+export * from "./filters-list";
export * from "./gpt-assistant-modal";
export * from "./image-upload-modal";
export * from "./issues-view-filter";
export * from "./issues-view";
export * from "./link-modal";
export * from "./image-picker-popover";
-export * from "./filter-list";
export * from "./feeds";
export * from "./theme-switch";
+export * from "./custom-theme-selector";
+export * from "./color-picker-input";
diff --git a/apps/app/components/core/issues-view-filter.tsx b/apps/app/components/core/issues-view-filter.tsx
index 5d6c909fe..6856e8f8b 100644
--- a/apps/app/components/core/issues-view-filter.tsx
+++ b/apps/app/components/core/issues-view-filter.tsx
@@ -17,6 +17,7 @@ import {
ListBulletIcon,
Squares2X2Icon,
CalendarDaysIcon,
+ ChartBarIcon,
} from "@heroicons/react/24/outline";
// helpers
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
@@ -82,6 +83,17 @@ export const IssuesFilterView: React.FC = () => {
>
{issueView !== "calendar" && (
@@ -233,31 +245,30 @@ export const IssuesFilterView: React.FC = () => {
)}
- {issueView !== "calendar" && (
-
-
diff --git a/apps/app/components/core/issues-view.tsx b/apps/app/components/core/issues-view.tsx
index 497d7fba4..cc0672843 100644
--- a/apps/app/components/core/issues-view.tsx
+++ b/apps/app/components/core/issues-view.tsx
@@ -6,6 +6,7 @@ import useSWR, { mutate } from "swr";
// react-beautiful-dnd
import { DragDropContext, DropResult } from "react-beautiful-dnd";
+import StrictModeDroppable from "components/dnd/StrictModeDroppable";
// services
import issuesService from "services/issues.service";
import stateService from "services/state.service";
@@ -17,14 +18,13 @@ import { useProjectMyMembership } from "contexts/project-member.context";
import useToast from "hooks/use-toast";
import useIssuesView from "hooks/use-issues-view";
// components
-import { AllLists, AllBoards, FilterList } from "components/core";
+import { AllLists, AllBoards, FilterList, CalendarView, GanttChartView } from "components/core";
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
-import StrictModeDroppable from "components/dnd/StrictModeDroppable";
import { CreateUpdateViewModal } from "components/views";
-import { TransferIssues, TransferIssuesModal } from "components/cycles";
+import { CycleIssuesGanttChartView, TransferIssues, TransferIssuesModal } from "components/cycles";
+import { IssueGanttChartView } from "components/issues/gantt-chart";
// ui
import { EmptySpace, EmptySpaceItem, EmptyState, PrimaryButton, Spinner } from "components/ui";
-import { CalendarView } from "./calendar-view";
// icons
import {
ListBulletIcon,
@@ -48,7 +48,7 @@ import {
PROJECT_ISSUES_LIST_WITH_PARAMS,
STATES_LIST,
} from "constants/fetch-keys";
-// image
+import { ModuleIssuesGanttChartView } from "components/modules";
type Props = {
type?: "issue" | "cycle" | "module";
@@ -353,7 +353,7 @@ export const IssuesView: React.FCDisplay Properties
-
- {Object.keys(properties).map((key) => {
- if (key === "estimate" && !isEstimateActive) return null;
- return (
-
- );
- })}
-
+
+
Display Properties
+
+ {Object.keys(properties).map((key) => {
+ if (key === "estimate" && !isEstimateActive) return null;
+
+ return (
+
+ );
+ })}
- )}
+
-
+ {}
+
+ )}
+ {
if (viewId) {
@@ -469,12 +465,10 @@ export const IssuesView: React.FC = ({
{!viewId &&
- )}
-
- {areFiltersApplied && (
-
- )}
-
+ {
e.preventDefault();
setContextMenu(true);
@@ -224,7 +214,7 @@ export const SingleListIssue: React.FC = ({
}}
>
- = ({ handleFormSubmit, handleClose, stat
control={control}
name="end_date"
render={({ field: { value, onChange } }) => (
- {
- onChange(val);
- if (watch("start_date") && val) {
- if (isDateRangeValid(`${watch("start_date")}`, val)) {
- cycleStatus != "current" &&
- dateChecker({
- start_date: watch("start_date"),
- end_date: val,
- });
- } else {
- setIsDateValid(false);
- setToastAlert({
- type: "error",
- title: "Error!",
- message:
- "The date you have entered is invalid. Please check and enter a valid date.",
- });
- }
- }
- }}
- />
+ onChange(val)} />
)}
/>
@@ -211,18 +110,7 @@ export const CycleForm: React.FC
+
- >;
+ setSelectedCycle: React.Dispatch>;
+ type: "current" | "upcoming" | "draft";
+};
+
+export const AllCyclesList: React.FC = ({
+ cycles,
+ setCreateUpdateCycleModal,
+ setSelectedCycle,
+ type,
+}) => {
+ const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
+ const [selectedCycleForDelete, setSelectedCycleForDelete] = useState();
+
+ const handleDeleteCycle = (cycle: ICycle) => {
+ setSelectedCycleForDelete({ ...cycle, actionType: "delete" });
+ setCycleDeleteModal(true);
+ };
+
+ const handleEditCycle = (cycle: ICycle) => {
+ setSelectedCycle({ ...cycle, actionType: "edit" });
+ setCreateUpdateCycleModal(true);
+ };
+
+ return (
+ <>
+
+
+ )}
+
+ );
+};
diff --git a/apps/app/components/cycles/completed-cycles-list.tsx b/apps/app/components/cycles/completed-cycles.tsx
similarity index 61%
rename from apps/app/components/cycles/completed-cycles-list.tsx
rename to apps/app/components/cycles/completed-cycles.tsx
index bf1971368..36ef691f5 100644
--- a/apps/app/components/cycles/completed-cycles-list.tsx
+++ b/apps/app/components/cycles/completed-cycles.tsx
@@ -7,9 +7,9 @@ import useSWR from "swr";
// services
import cyclesService from "services/cycles.service";
// components
-import { DeleteCycleModal, SingleCycleCard } from "components/cycles";
+import { DeleteCycleModal, SingleCycleCard, SingleCycleList } from "components/cycles";
// icons
-import { CompletedCycleIcon, ExclamationIcon } from "components/icons";
+import { ExclamationIcon } from "components/icons";
// types
import { ICycle, SelectCycleType } from "types";
// fetch-keys
@@ -19,11 +19,13 @@ import { EmptyState, Loader } from "components/ui";
import emptyCycle from "public/empty-state/empty-cycle.svg";
export interface CompletedCyclesListProps {
+ cycleView: string;
setCreateUpdateCycleModal: React.Dispatch>;
setSelectedCycle: React.Dispatch>;
}
-export const CompletedCyclesList: React.FC = ({
+export const CompletedCycles: React.FC = ({
+ cycleView,
setCreateUpdateCycleModal,
setSelectedCycle,
}) => {
@@ -65,20 +67,43 @@ export const CompletedCyclesList: React.FC = ({
completedCycles.completed_cycles.length > 0 ? (
) : (
= ({ cycles }) => {
+ const router = useRouter();
+ const { workspaceSlug, projectId } = router.query;
+
+ // rendering issues on gantt sidebar
+ const GanttSidebarBlockView = ({ data }: any) => (
+ >;
+ setCreateUpdateCycleModal: React.Dispatch>;
+ cyclesCompleteList: ICycle[] | undefined;
+ currentAndUpcomingCycles: CurrentAndUpcomingCyclesResponse | undefined;
+ draftCycles: DraftCyclesResponse | undefined;
+};
+
+export const CyclesView: React.FC = ({
+ setSelectedCycle,
+ setCreateUpdateCycleModal,
+ cyclesCompleteList,
+ currentAndUpcomingCycles,
+ draftCycles,
+}) => {
+ const { storedValue: cycleTab, setValue: setCycleTab } = useLocalStorage("cycleTab", "All");
+ const { storedValue: cyclesView, setValue: setCyclesView } = useLocalStorage("cycleView", "list");
+
+ const currentTabValue = (tab: string | null) => {
+ switch (tab) {
+ case "All":
+ return 0;
+ case "Active":
+ return 1;
+ case "Upcoming":
+ return 2;
+ case "Completed":
+ return 3;
+ case "Drafts":
+ return 4;
+ default:
+ return 0;
+ }
+ };
+
+ const CompletedCycles = dynamic(
+ () => import("components/cycles").then((a) => a.CompletedCycles),
+ {
+ ssr: false,
+ loading: () => (
+
+
+ ),
+ }
+ );
+
+ return (
+ <>
+ {
+ switch (i) {
+ case 0:
+ return setCycleTab("All");
+ case 1:
+ return setCycleTab("Active");
+ case 2:
+ return setCycleTab("Upcoming");
+ case 3:
+ return setCycleTab("Completed");
+ case 4:
+ return setCycleTab("Drafts");
+ default:
+ return setCycleTab("All");
+ }
+ }}
+ >
+
+
+ {cyclesView === "list" && (
+
+ {cyclesView !== "gantt_chart" && (
+
+ {currentAndUpcomingCycles?.current_cycle?.[0] ? (
+
+ )}
+
+ {cyclesView === "list" && (
+
+
+
+ {cyclesView !== "gantt_chart" && (
+
+ {cyclesView === "list" && (
+
+ )}
+
+
+
+ );
+};
diff --git a/apps/app/components/cycles/delete-cycle-modal.tsx b/apps/app/components/cycles/delete-cycle-modal.tsx
index 58b670f3a..136a9b847 100644
--- a/apps/app/components/cycles/delete-cycle-modal.tsx
+++ b/apps/app/components/cycles/delete-cycle-modal.tsx
@@ -29,6 +29,7 @@ type TConfirmCycleDeletionProps = {
import {
CYCLE_COMPLETE_LIST,
CYCLE_CURRENT_AND_UPCOMING_LIST,
+ CYCLE_DETAILS,
CYCLE_DRAFT_LIST,
CYCLE_LIST,
} from "constants/fetch-keys";
@@ -114,6 +115,14 @@ export const DeleteCycleModal: React.FC = ({
false
);
}
+ mutate(
+ CYCLE_DETAILS(projectId as string),
+ (prevData: any) => {
+ if (!prevData) return;
+ return prevData.filter((cycle: any) => cycle.id !== data?.id);
+ },
+ false
+ );
handleClose();
setToastAlert({
diff --git a/apps/app/components/cycles/form.tsx b/apps/app/components/cycles/form.tsx
index f977bc74b..a0bd781ce 100644
--- a/apps/app/components/cycles/form.tsx
+++ b/apps/app/components/cycles/form.tsx
@@ -1,21 +1,10 @@
-import { useEffect, useState } from "react";
-
-import { useRouter } from "next/router";
+import { useEffect } from "react";
// react-hook-form
import { Controller, useForm } from "react-hook-form";
-// services
-import cyclesService from "services/cycles.service";
-// hooks
-import useToast from "hooks/use-toast";
+
// ui
import { DateSelect, Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
-// helpers
-import {
- getDateRangeStatus,
- isDateGreaterThanToday,
- isDateRangeValid,
-} from "helpers/date-time.helper";
// types
import { ICycle } from "types";
@@ -34,13 +23,6 @@ const defaultValues: Partial = {
};
export const CycleForm: React.FC = ({ handleFormSubmit, handleClose, status, data }) => {
- const router = useRouter();
- const { workspaceSlug, projectId } = router.query;
-
- const { setToastAlert } = useToast();
-
- const [isDateValid, setIsDateValid] = useState(true);
-
const {
register,
formState: { errors, isSubmitting },
@@ -60,43 +42,6 @@ export const CycleForm: React.FC = ({ handleFormSubmit, handleClose, stat
});
};
- const cycleStatus =
- data?.start_date && data?.end_date ? getDateRangeStatus(data?.start_date, data?.end_date) : "";
-
- const dateChecker = async (payload: any) => {
- if (isDateGreaterThanToday(payload.end_date)) {
- await cyclesService
- .cycleDateCheck(workspaceSlug as string, projectId as string, payload)
- .then((res) => {
- if (res.status) {
- setIsDateValid(true);
- } else {
- setIsDateValid(false);
- setToastAlert({
- type: "error",
- title: "Error!",
- message:
- "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
- });
- }
- })
- .catch((err) => {
- console.log(err);
- });
- } else {
- setIsDateValid(false);
- setToastAlert({
- type: "error",
- title: "Error!",
- message: "Unable to create cycle in past date. Please enter a valid date.",
- });
- }
- };
-
- const checkEmptyDate =
- (watch("start_date") === "" && watch("end_date") === "") ||
- (!watch("start_date") && !watch("end_date"));
-
useEffect(() => {
reset({
...defaultValues,
@@ -147,30 +92,7 @@ export const CycleForm: React.FC = ({ handleFormSubmit, handleClose, stat
control={control}
name="start_date"
render={({ field: { value, onChange } }) => (
- {
- onChange(val);
- if (val && watch("end_date")) {
- if (isDateRangeValid(val, `${watch("end_date")}`)) {
- cycleStatus != "current" &&
- dateChecker({
- start_date: val,
- end_date: watch("end_date"),
- });
- } else {
- setIsDateValid(false);
- setToastAlert({
- type: "error",
- title: "Error!",
- message:
- "The date you have entered is invalid. Please check and enter a valid date.",
- });
- }
- }
- }}
- />
+ onChange(val)} />
)}
/>
@@ -179,30 +101,7 @@ export const CycleForm: React.FC
+ = ({
+export const AllCyclesBoard: React.FC = ({
cycles,
setCreateUpdateCycleModal,
setSelectedCycle,
@@ -61,7 +61,7 @@ export const CyclesList: React.FC = ({
) : type === "current" ? (
{properties.priority && (
= ({
isNotAllowed={isNotAllowed}
/>
)}
- {properties.sub_issue_count && (
-
+ {issueLabels?.map((label, index) => {
+ const totalArray = issues?.filter((i) => i?.labels?.includes(label.id));
+ const completeArray = totalArray?.filter((i) => i?.state_detail.group === "completed");
+
+ if (totalArray.length > 0) {
+ return (
+
+
+ {label?.name}
+
+ }
+ completed={completeArray.length}
+ total={totalArray.length}
+ />
+ );
+ }
+ })}
+
+
+
+ );
+};
diff --git a/apps/app/components/cycles/cycles-list.tsx b/apps/app/components/cycles/all-cycles-board.tsx
similarity index 96%
rename from apps/app/components/cycles/cycles-list.tsx
rename to apps/app/components/cycles/all-cycles-board.tsx
index f8d607dbe..259251fe6 100644
--- a/apps/app/components/cycles/cycles-list.tsx
+++ b/apps/app/components/cycles/all-cycles-board.tsx
@@ -17,7 +17,7 @@ type TCycleStatsViewProps = {
type: "current" | "upcoming" | "draft";
};
-export const CyclesList: React.FC
- {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
-
- )}
{properties.labels && issue.label_details.length > 0 ? (
{issue.label_details.map((label) => (
@@ -310,11 +295,21 @@ export const SingleListIssue: React.FC = ({
isNotAllowed={isNotAllowed}
/>
)}
+ {properties.sub_issue_count && (
+
@@ -324,7 +319,7 @@ export const SingleListIssue: React.FC = ({
diff --git a/apps/app/components/core/list-view/single-list.tsx b/apps/app/components/core/list-view/single-list.tsx
index abe82ed73..dd5ffb110 100644
--- a/apps/app/components/core/list-view/single-list.tsx
+++ b/apps/app/components/core/list-view/single-list.tsx
@@ -168,7 +168,7 @@ export const SingleList: React.FC = ({
}
- optionsPosition="right"
+ position="right"
noBorder
>
Create new
@@ -204,7 +204,8 @@ export const SingleList: React.FC = ({
makeIssueCopy={() => makeIssueCopy(issue)}
handleDeleteIssue={handleDeleteIssue}
removeIssue={() => {
- if (removeIssue !== null && issue.bridge_id) removeIssue(issue.bridge_id, issue.id);
+ if (removeIssue !== null && issue.bridge_id)
+ removeIssue(issue.bridge_id, issue.id);
}}
isCompleted={isCompleted}
userAuth={userAuth}
diff --git a/apps/app/components/core/sidebar/progress-chart.tsx b/apps/app/components/core/sidebar/progress-chart.tsx
index f8454650e..9006b58fc 100644
--- a/apps/app/components/core/sidebar/progress-chart.tsx
+++ b/apps/app/components/core/sidebar/progress-chart.tsx
@@ -12,9 +12,11 @@ type Props = {
issues: IIssue[];
start: string;
end: string;
+ width?: number;
+ height?: number;
};
-const ProgressChart: React.FC = ({ issues, start, end }) => {
+const ProgressChart: React.FC = ({ issues, start, end, width = 360, height = 160 }) => {
const startDate = new Date(start);
const endDate = new Date(end);
const getChartData = () => {
@@ -51,8 +53,8 @@ const ProgressChart: React.FC = ({ issues, start, end }) => {
return (
= ({
issues,
module,
userAuth,
+ roundedTab,
+ noBackground,
}) => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
@@ -100,12 +104,16 @@ export const SidebarProgressStats: React.FC = ({
>
- `w-full rounded px-3 py-1 text-brand-base ${
+ `w-full ${
+ roundedTab ? "rounded-3xl border border-brand-base" : "rounded"
+ } px-3 py-1 text-brand-base ${
selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2"
}`
}
@@ -114,7 +122,9 @@ export const SidebarProgressStats: React.FC = ({
- `w-full rounded px-3 py-1 text-brand-base ${
+ `w-full ${
+ roundedTab ? "rounded-3xl border border-brand-base" : "rounded"
+ } px-3 py-1 text-brand-base ${
selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2"
}`
}
@@ -123,7 +133,9 @@ export const SidebarProgressStats: React.FC = ({
- `w-full rounded px-3 py-1 text-brand-base ${
+ `w-full ${
+ roundedTab ? "rounded-3xl border border-brand-base" : "rounded"
+ } px-3 py-1 text-brand-base ${
selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2"
}`
}
@@ -131,10 +143,10 @@ export const SidebarProgressStats: React.FC = ({
States
-
+
{members?.map((member, index) => {
- const totalArray = issues?.filter((i) => i.assignees?.includes(member.member.id));
+ const totalArray = issues?.filter((i) => i?.assignees?.includes(member.member.id));
const completeArray = totalArray?.filter((i) => i.state_detail.group === "completed");
if (totalArray.length > 0) {
@@ -150,19 +162,19 @@ export const SidebarProgressStats: React.FC = ({
completed={completeArray.length}
total={totalArray.length}
onClick={() => {
- if (filters.assignees?.includes(member.member.id))
+ if (filters?.assignees?.includes(member.member.id))
setFilters({
- assignees: filters.assignees?.filter((a) => a !== member.member.id),
+ assignees: filters?.assignees?.filter((a) => a !== member.member.id),
});
else
setFilters({ assignees: [...(filters?.assignees ?? []), member.member.id] });
}}
- selected={filters.assignees?.includes(member.member.id)}
+ selected={filters?.assignees?.includes(member.member.id)}
/>
);
}
})}
- {issues?.filter((i) => i.assignees?.length === 0).length > 0 ? (
+ {issues?.filter((i) => i?.assignees?.length === 0).length > 0 ? (
@@ -180,10 +192,10 @@ export const SidebarProgressStats: React.FC = ({
}
completed={
issues?.filter(
- (i) => i.state_detail.group === "completed" && i.assignees?.length === 0
+ (i) => i?.state_detail.group === "completed" && i.assignees?.length === 0
).length
}
- total={issues?.filter((i) => i.assignees?.length === 0).length}
+ total={issues?.filter((i) => i?.assignees?.length === 0).length}
/>
) : (
""
@@ -191,8 +203,8 @@ export const SidebarProgressStats: React.FC = ({
{issueLabels?.map((label, index) => {
- const totalArray = issues?.filter((i) => i.labels?.includes(label.id));
- const completeArray = totalArray?.filter((i) => i.state_detail.group === "completed");
+ const totalArray = issues?.filter((i) => i?.labels?.includes(label.id));
+ const completeArray = totalArray?.filter((i) => i?.state_detail.group === "completed");
if (totalArray.length > 0) {
return (
@@ -207,7 +219,7 @@ export const SidebarProgressStats: React.FC = ({
label.color && label.color !== "" ? label.color : "#000000",
}}
/>
- {label.name}
+ {label?.name}
}
completed={completeArray.length}
@@ -215,11 +227,11 @@ export const SidebarProgressStats: React.FC = ({
onClick={() => {
if (filters.labels?.includes(label.id))
setFilters({
- labels: filters.labels?.filter((l) => l !== label.id),
+ labels: filters?.labels?.filter((l) => l !== label.id),
});
else setFilters({ labels: [...(filters?.labels ?? []), label.id] });
}}
- selected={filters.labels?.includes(label.id)}
+ selected={filters?.labels?.includes(label.id)}
/>
);
}
diff --git a/apps/app/components/core/sidebar/single-progress-stats.tsx b/apps/app/components/core/sidebar/single-progress-stats.tsx
index 3e672ce8b..d8236de9b 100644
--- a/apps/app/components/core/sidebar/single-progress-stats.tsx
+++ b/apps/app/components/core/sidebar/single-progress-stats.tsx
@@ -18,7 +18,7 @@ export const SingleProgressStats: React.FC = ({
selected = false,
}) => (
>;
+ customThemeSelectorOptions: boolean;
+ setCustomThemeSelectorOptions: Dispatch>;
+};
+
+export const ThemeSwitch: React.FC = ({
+ user,
+ setPreLoadedData,
+ customThemeSelectorOptions,
+ setCustomThemeSelectorOptions,
+}) => {
const [mounted, setMounted] = useState(false);
- const [customThemeModal, setCustomThemeModal] = useState(false);
const { theme, setTheme } = useTheme();
// useEffect only runs on the client, so now we can safely show the UI
@@ -18,15 +36,49 @@ export const ThemeSwitch = () => {
return null;
}
+ const currentThemeObj = THEMES_OBJ.find((t) => t.value === theme);
+
return (
<>
t.value === theme)?.label : "Select your theme"}
+ label={
+ currentThemeObj ? (
+
- {label}
+
))}
- {/* setCustomThemeModal(false)} /> */}
);
};
diff --git a/apps/app/components/cycles/active-cycle-details.tsx b/apps/app/components/cycles/active-cycle-details.tsx
new file mode 100644
index 000000000..65c2e8b1b
--- /dev/null
+++ b/apps/app/components/cycles/active-cycle-details.tsx
@@ -0,0 +1,623 @@
+import React from "react";
+
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import useSWR, { mutate } from "swr";
+
+// services
+import cyclesService from "services/cycles.service";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { LinearProgressIndicator, Tooltip } from "components/ui";
+import { AssigneesList } from "components/ui/avatar";
+import { SingleProgressStats } from "components/core";
+// components
+import ProgressChart from "components/core/sidebar/progress-chart";
+import { ActiveCycleProgressStats } from "components/cycles";
+
+// icons
+import { CalendarDaysIcon } from "@heroicons/react/20/solid";
+import { getPriorityIcon } from "components/icons/priority-icon";
+import {
+ TargetIcon,
+ ContrastIcon,
+ PersonRunningIcon,
+ ArrowRightIcon,
+ TriangleExclamationIcon,
+ AlarmClockIcon,
+ LayerDiagonalIcon,
+ CompletedStateIcon,
+} from "components/icons";
+import { StarIcon } from "@heroicons/react/24/outline";
+// helpers
+import {
+ getDateRangeStatus,
+ renderShortDateWithYearFormat,
+ findHowManyDaysLeft,
+} from "helpers/date-time.helper";
+import { truncateText } from "helpers/string.helper";
+// types
+import {
+ CompletedCyclesResponse,
+ CurrentAndUpcomingCyclesResponse,
+ DraftCyclesResponse,
+ ICycle,
+ IIssue,
+} from "types";
+// fetch-keys
+import {
+ CYCLE_COMPLETE_LIST,
+ CYCLE_CURRENT_AND_UPCOMING_LIST,
+ CYCLE_DETAILS,
+ CYCLE_DRAFT_LIST,
+ CYCLE_ISSUES,
+} from "constants/fetch-keys";
+
+type TSingleStatProps = {
+ cycle: ICycle;
+ isCompleted?: boolean;
+};
+
+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",
+ },
+];
+
+export const ActiveCycleDetails: React.FC = ({ cycle, isCompleted = false }) => {
+ const router = useRouter();
+ const { workspaceSlug, projectId } = router.query;
+
+ const { setToastAlert } = useToast();
+
+ const endDate = new Date(cycle.end_date ?? "");
+ const startDate = new Date(cycle.start_date ?? "");
+
+ const groupedIssues: any = {
+ backlog: cycle.backlog_issues,
+ unstarted: cycle.unstarted_issues,
+ started: cycle.started_issues,
+ completed: cycle.completed_issues,
+ cancelled: cycle.cancelled_issues,
+ };
+
+ const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
+
+ const handleAddToFavorites = () => {
+ if (!workspaceSlug || !projectId || !cycle) return;
+
+ switch (cycleStatus) {
+ case "current":
+ case "upcoming":
+ mutate(
+ CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string),
+ (prevData) => ({
+ current_cycle: (prevData?.current_cycle ?? []).map((c) => ({
+ ...c,
+ is_favorite: c.id === cycle.id ? true : c.is_favorite,
+ })),
+ upcoming_cycle: (prevData?.upcoming_cycle ?? []).map((c) => ({
+ ...c,
+ is_favorite: c.id === cycle.id ? true : c.is_favorite,
+ })),
+ }),
+ false
+ );
+ break;
+ case "completed":
+ mutate(
+ CYCLE_COMPLETE_LIST(projectId as string),
+ (prevData) => ({
+ completed_cycles: (prevData?.completed_cycles ?? []).map((c) => ({
+ ...c,
+ is_favorite: c.id === cycle.id ? true : c.is_favorite,
+ })),
+ }),
+ false
+ );
+ break;
+ case "draft":
+ mutate(
+ CYCLE_DRAFT_LIST(projectId as string),
+ (prevData) => ({
+ draft_cycles: (prevData?.draft_cycles ?? []).map((c) => ({
+ ...c,
+ is_favorite: c.id === cycle.id ? true : c.is_favorite,
+ })),
+ }),
+ false
+ );
+ break;
+ }
+ mutate(
+ CYCLE_DETAILS(projectId as string),
+ (prevData: any) =>
+ (prevData ?? []).map((c: any) => ({
+ ...c,
+ is_favorite: c.id === cycle.id ? true : c.is_favorite,
+ })),
+ false
+ );
+
+ cyclesService
+ .addCycleToFavorites(workspaceSlug as string, projectId as string, {
+ cycle: cycle.id,
+ })
+ .catch(() => {
+ setToastAlert({
+ type: "error",
+ title: "Error!",
+ message: "Couldn't add the cycle to favorites. Please try again.",
+ });
+ });
+ };
+
+ const handleRemoveFromFavorites = () => {
+ if (!workspaceSlug || !projectId || !cycle) return;
+
+ switch (cycleStatus) {
+ case "current":
+ case "upcoming":
+ mutate(
+ CYCLE_CURRENT_AND_UPCOMING_LIST(projectId as string),
+ (prevData) => ({
+ current_cycle: (prevData?.current_cycle ?? []).map((c) => ({
+ ...c,
+ is_favorite: c.id === cycle.id ? false : c.is_favorite,
+ })),
+ upcoming_cycle: (prevData?.upcoming_cycle ?? []).map((c) => ({
+ ...c,
+ is_favorite: c.id === cycle.id ? false : c.is_favorite,
+ })),
+ }),
+ false
+ );
+ break;
+ case "completed":
+ mutate(
+ CYCLE_COMPLETE_LIST(projectId as string),
+ (prevData) => ({
+ completed_cycles: (prevData?.completed_cycles ?? []).map((c) => ({
+ ...c,
+ is_favorite: c.id === cycle.id ? false : c.is_favorite,
+ })),
+ }),
+ false
+ );
+ break;
+ case "draft":
+ mutate(
+ CYCLE_DRAFT_LIST(projectId as string),
+ (prevData) => ({
+ draft_cycles: (prevData?.draft_cycles ?? []).map((c) => ({
+ ...c,
+ is_favorite: c.id === cycle.id ? false : c.is_favorite,
+ })),
+ }),
+ false
+ );
+ break;
+ }
+ mutate(
+ CYCLE_DETAILS(projectId as string),
+ (prevData: any) =>
+ (prevData ?? []).map((c: any) => ({
+ ...c,
+ is_favorite: c.id === cycle.id ? false : c.is_favorite,
+ })),
+ false
+ );
+
+ cyclesService
+ .removeCycleFromFavorites(workspaceSlug as string, projectId as string, cycle.id)
+ .catch(() => {
+ setToastAlert({
+ type: "error",
+ title: "Error!",
+ message: "Couldn't remove the cycle from favorites. Please try again.",
+ });
+ });
+ };
+
+ const { data: issues } = useSWR(
+ workspaceSlug && projectId && cycle.id ? CYCLE_ISSUES(cycle.id as string) : null,
+ workspaceSlug && projectId && cycle.id
+ ? () =>
+ cyclesService.getCycleIssues(
+ workspaceSlug as string,
+ projectId as string,
+ cycle.id as string
+ )
+ : null
+ );
+
+ const progressIndicatorData = stateGroups.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,
+ }));
+
+ return (
+ = ({ issues }) => {
+ const router = useRouter();
+ const { workspaceSlug, projectId } = router.query;
+
+ const { storedValue: tab, setValue: setTab } = useLocalStorage("activeCycleTab", "Assignees");
+
+ const { data: issueLabels } = useSWR(
+ workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
+ workspaceSlug && projectId
+ ? () => issuesServices.getIssueLabels(workspaceSlug as string, projectId as string)
+ : null
+ );
+
+ const { data: members } = useSWR(
+ workspaceSlug && projectId ? PROJECT_MEMBERS(workspaceSlug as string) : null,
+ workspaceSlug && projectId
+ ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
+ : null
+ );
+
+ const currentValue = (tab: string | null) => {
+ switch (tab) {
+ case "Assignees":
+ return 0;
+ case "Labels":
+ return 1;
+
+ default:
+ return 0;
+ }
+ };
+ return (
+ {
+ switch (i) {
+ case 0:
+ return setTab("Assignees");
+ case 1:
+ return setTab("Labels");
+
+ default:
+ return setTab("Assignees");
+ }
+ }}
+ >
+
+
+ `px-3 py-1 text-brand-base rounded-3xl border border-brand-base ${
+ selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2"
+ }`
+ }
+ >
+ Assignees
+
+
+ `px-3 py-1 text-brand-base rounded-3xl border border-brand-base ${
+ selected ? " bg-brand-accent text-white" : " hover:bg-brand-surface-2"
+ }`
+ }
+ >
+ Labels
+
+
+
+
+ {members?.map((member, index) => {
+ const totalArray = issues?.filter((i) => i?.assignees?.includes(member.member.id));
+ const completeArray = totalArray?.filter((i) => i.state_detail.group === "completed");
+
+ if (totalArray.length > 0) {
+ return (
+
+
+ }
+ completed={completeArray.length}
+ total={totalArray.length}
+ />
+ );
+ }
+ })}
+ {issues?.filter((i) => i?.assignees?.length === 0).length > 0 ? (
+
+
+ }
+ completed={
+ issues?.filter(
+ (i) => i?.state_detail.group === "completed" && i.assignees?.length === 0
+ ).length
+ }
+ total={issues?.filter((i) => i?.assignees?.length === 0).length}
+ />
+ ) : (
+ ""
+ )}
+
+
+
+
+
+ )}
{properties.link && (
+
+
-
-
= ({
of
{total}
diff --git a/apps/app/components/core/theme-switch.tsx b/apps/app/components/core/theme-switch.tsx
index f93b1998e..e38375c2e 100644
--- a/apps/app/components/core/theme-switch.tsx
+++ b/apps/app/components/core/theme-switch.tsx
@@ -1,12 +1,30 @@
-import { useState, useEffect, ChangeEvent } from "react";
-import { useTheme } from "next-themes";
-import { THEMES_OBJ } from "constants/themes";
-import { CustomSelect } from "components/ui";
-import { CustomThemeModal } from "./custom-theme-modal";
+import { useState, useEffect, Dispatch, SetStateAction } from "react";
-export const ThemeSwitch = () => {
+import { useTheme } from "next-themes";
+
+// constants
+import { THEMES_OBJ } from "constants/themes";
+// ui
+import { CustomSelect } from "components/ui";
+// helper
+import { applyTheme } from "helpers/theme.helper";
+// types
+import { ICustomTheme, IUser } from "types";
+
+type Props = {
+ user: IUser | undefined;
+ setPreLoadedData: Dispatch
+
+ ) : (
+ "Select your theme"
+ )
+ }
onChange={({ value, type }: { value: string; type: string }) => {
if (value === "custom") {
- if (!customThemeModal) setCustomThemeModal(true);
+ if (user?.theme.palette) {
+ setPreLoadedData(user.theme);
+ }
+ if (!customThemeSelectorOptions) setCustomThemeSelectorOptions(true);
} else {
+ if (customThemeSelectorOptions) setCustomThemeSelectorOptions(false);
const cssVars = [
"--color-bg-base",
"--color-bg-surface-1",
@@ -41,20 +93,41 @@ export const ThemeSwitch = () => {
];
cssVars.forEach((cssVar) => document.documentElement.style.removeProperty(cssVar));
}
- document.documentElement.style.setProperty("color-scheme", type);
setTheme(value);
+ document.documentElement.style.setProperty("color-scheme", type);
}}
input
width="w-full"
position="right"
>
- {THEMES_OBJ.map(({ value, label, type }) => (
+ {THEMES_OBJ.map(({ value, label, type, icon }) => (
+
+
+
+ {currentThemeObj.label}
+
+
+
+
+
+ {label}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {cycleStatus === "current" ? (
+
+
+
+
+ )}{" "}
+ Completed
+
+ ) : (
+ cycleStatus
+ )}
+
+ {cycle.is_favorite ? (
+
+ ) : (
+
+ )}
+
+
+
+ + {truncateText(cycle.name, 70)} +
+
+
+
+
+
+
+
+
+
+
+
+ {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
+
+
+ {cycle.assignees.length > 0 && (
+
+
+ )}
+
+
+
+
+
+ View Cycle
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Progress
+
+
+ {Object.keys(groupedIssues).map((group, index) => (
+
+
+ {group}
+
+ }
+ completed={groupedIssues[group]}
+ total={cycle.total_issues}
+ />
+ ))}
+
+
+
+
+ );
+};
diff --git a/apps/app/components/cycles/active-cycle-stats.tsx b/apps/app/components/cycles/active-cycle-stats.tsx
new file mode 100644
index 000000000..0ef85e4b3
--- /dev/null
+++ b/apps/app/components/cycles/active-cycle-stats.tsx
@@ -0,0 +1,185 @@
+import React from "react";
+
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import useSWR from "swr";
+
+// headless ui
+import { Tab } from "@headlessui/react";
+// services
+import issuesServices from "services/issues.service";
+import projectService from "services/project.service";
+// hooks
+import useLocalStorage from "hooks/use-local-storage";
+// components
+import { SingleProgressStats } from "components/core";
+// ui
+import { Avatar } from "components/ui";
+// icons
+import User from "public/user.png";
+// types
+import { IIssue, IIssueLabels } from "types";
+// fetch-keys
+import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
+// types
+type Props = {
+ issues: IIssue[];
+};
+
+export const ActiveCycleProgressStats: React.FC
+
+
+
+
+ High Priority Issues
+
+
+ {issues
+ ?.filter((issue) => issue.priority === "urgent" || issue.priority === "high")
+ .map((issue) => (
+
+
+
+ ))}
+
+
+
+ {truncateText(issue.name, 30)}
+
+
+
+
+
+
+
+ {issue.project_detail?.identifier}-{issue.sequence_id}
+
+
+
+
+
+
+ {getPriorityIcon(issue.priority, "text-sm")}
+
+ {issue.label_details.length > 0 ? (
+
+ {issue.label_details.map((label) => (
+
+
+ {label.name}
+
+ ))}
+
+ ) : (
+ ""
+ )}
+
+ {issue.assignees &&
+ issue.assignees.length > 0 &&
+ Array.isArray(issue.assignees) ? (
+
+
+
+ ) : (
+ ""
+ )}
+
+
+
+
+
+ issue?.state_detail?.group === "completed" &&
+ (issue?.priority === "urgent" || issue?.priority === "high")
+ )?.length /
+ issues?.filter(
+ (issue) => issue?.priority === "urgent" || issue?.priority === "high"
+ )?.length) *
+ 100 ?? 0
+ }%`,
+ }}
+ />
+
+
+ {
+ issues?.filter(
+ (issue) =>
+ issue?.state_detail?.group === "completed" &&
+ (issue?.priority === "urgent" || issue?.priority === "high")
+ )?.length
+ }{" "}
+ of{" "}
+ {
+ issues?.filter(
+ (issue) => issue?.priority === "urgent" || issue?.priority === "high"
+ )?.length
+ }
+
+
+
+
+
+
+
+
+
+ Ideal
+
+
+
+ Current
+
+
+
+
+
+
+
+
+ No assignee
+
-
) : (
No current cycle is present.
+No cycle is present.
+ {cycles.map((cycle) => (
+
+ ) : type === "current" ? (
+
+
+ ))}
+
+ handleDeleteCycle(cycle)}
+ handleEditCycle={() => handleEditCycle(cycle)}
+ />
+
+
+
+ ) : (
+ No cycle is present.
+
-
-
- {completedCycles.completed_cycles.map((cycle) => (
- handleDeleteCycle(cycle)}
- handleEditCycle={() => handleEditCycle(cycle)}
- isCompleted
- />
- ))}
-
+ {cycleView === "list" && (
+
+ {completedCycles.completed_cycles.map((cycle) => (
+
+ )}
+ {cycleView === "board" && (
+
+
+ ))}
+
+ handleDeleteCycle(cycle)}
+ handleEditCycle={() => handleEditCycle(cycle)}
+ isCompleted
+ />
+
+
+ {completedCycles.completed_cycles.map((cycle) => (
+ handleDeleteCycle(cycle)}
+ handleEditCycle={() => handleEditCycle(cycle)}
+ isCompleted
+ />
+ ))}
+
+ )}
+
+
+ );
+
+ // rendering issues on gantt card
+ const GanttBlockView = ({ data }: { data: ICycle }) => (
+
+
+
+ {data?.name}
+
+ {data?.name}
+
+
+
+ );
+
+ // handle gantt issue start date and target date
+ const handleUpdateDates = async (data: any) => {
+ const payload = {
+ id: data?.id,
+ start_date: data?.start_date,
+ target_date: data?.target_date,
+ };
+ };
+
+ const blockFormat = (blocks: any) =>
+ blocks && blocks.length > 0
+ ? blocks.map((_block: any) => {
+ if (_block?.start_date && _block.target_date) console.log("_block", _block);
+ return {
+ start_date: new Date(_block.created_at),
+ target_date: new Date(_block.updated_at),
+ data: _block,
+ };
+ })
+ : [];
+
+ return (
+
+
+ );
+};
diff --git a/apps/app/components/cycles/cycles-view.tsx b/apps/app/components/cycles/cycles-view.tsx
new file mode 100644
index 000000000..aedd82ba3
--- /dev/null
+++ b/apps/app/components/cycles/cycles-view.tsx
@@ -0,0 +1,249 @@
+import React, { useEffect } from "react";
+import dynamic from "next/dynamic";
+// headless ui
+import { Tab } from "@headlessui/react";
+// hooks
+import useLocalStorage from "hooks/use-local-storage";
+// components
+import {
+ ActiveCycleDetails,
+ CompletedCyclesListProps,
+ AllCyclesBoard,
+ AllCyclesList,
+ CyclesListGanttChartView,
+} from "components/cycles";
+// ui
+import { EmptyState, Loader } from "components/ui";
+// icons
+import { ChartBarIcon, ListBulletIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
+import emptyCycle from "public/empty-state/empty-cycle.svg";
+// types
+import {
+ SelectCycleType,
+ ICycle,
+ CurrentAndUpcomingCyclesResponse,
+ DraftCyclesResponse,
+} from "types";
+
+type Props = {
+ setSelectedCycle: React.Dispatch
+
+ Cycles
+
+
+
+
+
+
+
+ {["All", "Active", "Upcoming", "Completed", "Drafts"].map((tab, index) => {
+ if (
+ cyclesView === "gantt_chart" &&
+ (tab === "Active" || tab === "Drafts" || tab === "Completed")
+ )
+ return null;
+
+ return (
+
+ `rounded-3xl border px-6 py-1 outline-none ${
+ selected
+ ? "border-brand-accent bg-brand-accent text-white font-medium"
+ : "border-brand-base bg-brand-base hover:bg-brand-surface-2"
+ }`
+ }
+ >
+ {tab}
+
+ );
+ })}
+
+
+
+
+
+ );
+
+ // rendering issues on gantt card
+ const GanttBlockView = ({ data }: any) => (
+
+
+
+ {data?.name}
+
+ {data?.name}
+
+
+
+ );
+
+ // handle gantt issue start date and target date
+ const handleUpdateDates = async (data: any) => {
+ const payload = {
+ id: data?.id,
+ start_date: data?.start_date,
+ target_date: data?.target_date,
+ };
+
+ console.log("payload", payload);
+ };
+
+ const blockFormat = (blocks: any) =>
+ blocks && blocks.length > 0
+ ? blocks.map((_block: any) => {
+ if (_block?.start_date && _block.target_date) console.log("_block", _block);
+ return {
+ start_date: new Date(_block.created_at),
+ target_date: new Date(_block.updated_at),
+ data: _block,
+ };
+ })
+ : [];
+
+ return (
+
+
+ );
+};
diff --git a/apps/app/components/cycles/index.ts b/apps/app/components/cycles/index.ts
index 558801598..3151529c5 100644
--- a/apps/app/components/cycles/index.ts
+++ b/apps/app/components/cycles/index.ts
@@ -1,11 +1,18 @@
-export * from "./completed-cycles-list";
-export * from "./cycles-list";
+export * from "./active-cycle-details";
+export * from "./cycles-view";
+export * from "./completed-cycles";
+export * from "./cycles-list-gantt-chart";
+export * from "./all-cycles-board";
+export * from "./all-cycles-list";
export * from "./delete-cycle-modal";
export * from "./form";
+export * from "./gantt-chart";
export * from "./modal";
export * from "./select";
export * from "./sidebar";
+export * from "./single-cycle-list";
export * from "./single-cycle-card";
export * from "./empty-cycle";
export * from "./transfer-issues-modal";
-export * from "./transfer-issues";
\ No newline at end of file
+export * from "./transfer-issues";
+export * from "./active-cycle-stats";
diff --git a/apps/app/components/cycles/modal.tsx b/apps/app/components/cycles/modal.tsx
index cd439c372..b3baacd65 100644
--- a/apps/app/components/cycles/modal.tsx
+++ b/apps/app/components/cycles/modal.tsx
@@ -13,13 +13,14 @@ import useToast from "hooks/use-toast";
// components
import { CycleForm } from "components/cycles";
// helper
-import { getDateRangeStatus } from "helpers/date-time.helper";
+import { getDateRangeStatus, isDateGreaterThanToday } from "helpers/date-time.helper";
// types
import type { ICycle } from "types";
// fetch keys
import {
CYCLE_COMPLETE_LIST,
CYCLE_CURRENT_AND_UPCOMING_LIST,
+ CYCLE_DETAILS,
CYCLE_DRAFT_LIST,
CYCLE_INCOMPLETE_LIST,
} from "constants/fetch-keys";
@@ -58,6 +59,7 @@ export const CreateUpdateCycleModal: React.FC
{cycle ? (
<>
@@ -158,7 +321,12 @@ export const CycleDetailsSidebar: React.FC = ({
>
= ({
leaveTo="opacity-0 translate-y-1"
>
- {
- if (date && watch("end_date")) {
- if (
- isDateRangeValid(renderDateFormat(date), `${watch("end_date")}`)
- ) {
- submitChanges({
- start_date: renderDateFormat(date),
- });
- } else {
- setToastAlert({
- type: "error",
- title: "Error!",
- message:
- "The date you have entered is invalid. Please check and enter a valid date.",
- });
- }
+ {
+ if (val) {
+ handleStartDateChange(val);
}
}}
- selectsStart
- startDate={new Date(`${watch("start_date")}`)}
- endDate={new Date(`${watch("end_date")}`)}
+ startDate={watch("start_date") ? `${watch("start_date")}` : null}
+ endDate={watch("end_date") ? `${watch("end_date")}` : null}
maxDate={new Date(`${watch("end_date")}`)}
- shouldCloseOnSelect
- inline
+ selectsStart
/>
@@ -222,7 +371,14 @@ export const CycleDetailsSidebar: React.FC = ({
>
= ({
leaveTo="opacity-0 translate-y-1"
>
- {
- if (watch("start_date") && date) {
- if (
- isDateRangeValid(
- `${watch("start_date")}`,
- renderDateFormat(date)
- )
- ) {
- submitChanges({
- end_date: renderDateFormat(date),
- });
- } else {
- setToastAlert({
- type: "error",
- title: "Error!",
- message:
- "The date you have entered is invalid. Please check and enter a valid date.",
- });
- }
+ {
+ if (val) {
+ handleEndDateChange(val);
}
}}
- selectsEnd
- startDate={new Date(`${watch("start_date")}`)}
- endDate={new Date(`${watch("end_date")}`)}
+ startDate={watch("start_date") ? `${watch("start_date")}` : null}
+ endDate={watch("end_date") ? `${watch("end_date")}` : null}
minDate={new Date(`${watch("start_date")}`)}
- shouldCloseOnSelect
- inline
+ selectsEnd
/>
@@ -370,7 +506,11 @@ export const CycleDetailsSidebar: React.FC = ({
) : (
- = ({
) : (
- = ({
const { setToastAlert } = useToast();
+ const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
const endDate = new Date(cycle.end_date ?? "");
const startDate = new Date(cycle.start_date ?? "");
const handleAddToFavorites = () => {
if (!workspaceSlug || !projectId || !cycle) return;
- const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
-
switch (cycleStatus) {
case "current":
case "upcoming":
@@ -137,6 +151,15 @@ export const SingleCycleCard: React.FC = ({
);
break;
}
+ mutate(
+ CYCLE_DETAILS(projectId as string),
+ (prevData: any) =>
+ (prevData ?? []).map((c: any) => ({
+ ...c,
+ is_favorite: c.id === cycle.id ? true : c.is_favorite,
+ })),
+ false
+ );
cyclesService
.addCycleToFavorites(workspaceSlug as string, projectId as string, {
@@ -154,8 +177,6 @@ export const SingleCycleCard: React.FC = ({
const handleRemoveFromFavorites = () => {
if (!workspaceSlug || !projectId || !cycle) return;
- const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
-
switch (cycleStatus) {
case "current":
case "upcoming":
@@ -199,6 +220,15 @@ export const SingleCycleCard: React.FC = ({
);
break;
}
+ mutate(
+ CYCLE_DETAILS(projectId as string),
+ (prevData: any) =>
+ (prevData ?? []).map((c: any) => ({
+ ...c,
+ is_favorite: c.id === cycle.id ? false : c.is_favorite,
+ })),
+ false
+ );
cyclesService
.removeCycleFromFavorites(workspaceSlug as string, projectId as string, cycle.id)
@@ -236,69 +266,160 @@ export const SingleCycleCard: React.FC = ({
color: group.color,
}));
+ const groupedIssues: any = {
+ backlog: cycle.backlog_issues,
+ unstarted: cycle.unstarted_issues,
+ started: cycle.started_issues,
+ completed: cycle.completed_issues,
+ cancelled: cycle.cancelled_issues,
+ };
+
return (