diff --git a/apiserver/plane/api/views/cycle.py b/apiserver/plane/api/views/cycle.py index cfab09801..b18c42d86 100644 --- a/apiserver/plane/api/views/cycle.py +++ b/apiserver/plane/api/views/cycle.py @@ -579,7 +579,6 @@ class CycleIssueViewSet(BaseViewSet): ) ) - total_issues = issues.count() issues_data = IssueStateSerializer(issues, many=True).data if sub_group_by and sub_group_by == group_by: @@ -591,12 +590,12 @@ class CycleIssueViewSet(BaseViewSet): if group_by: grouped_results = group_results(issues_data, group_by, sub_group_by) return Response( - {"data": grouped_results, "total_issues": total_issues}, + grouped_results, status=status.HTTP_200_OK, ) return Response( - {"data": issues_data, "total_issues": total_issues}, status=status.HTTP_200_OK + issues_data, status=status.HTTP_200_OK ) def create(self, request, slug, project_id, cycle_id): diff --git a/apiserver/plane/api/views/issue.py b/apiserver/plane/api/views/issue.py index 56b79ea34..99f2de2c2 100644 --- a/apiserver/plane/api/views/issue.py +++ b/apiserver/plane/api/views/issue.py @@ -217,7 +217,6 @@ class IssueViewSet(BaseViewSet): else: issue_queryset = issue_queryset.order_by(order_by_param) - total_issues = issue_queryset.count() issues = IssueLiteSerializer(issue_queryset, many=True).data ## Grouping the results @@ -232,12 +231,12 @@ class IssueViewSet(BaseViewSet): if group_by: grouped_results = group_results(issues, group_by, sub_group_by) return Response( - {"data": grouped_results, "total_issues": total_issues}, + grouped_results, status=status.HTTP_200_OK, ) return Response( - {"data": issues, "total_issues": total_issues}, status=status.HTTP_200_OK + issues, status=status.HTTP_200_OK ) @@ -426,7 +425,6 @@ class UserWorkSpaceIssues(BaseAPIView): else: issue_queryset = issue_queryset.order_by(order_by_param) - total_issues = issue_queryset.count() issues = IssueLiteSerializer(issue_queryset, many=True).data ## Grouping the results @@ -441,12 +439,12 @@ class UserWorkSpaceIssues(BaseAPIView): if group_by: grouped_results = group_results(issues, group_by, sub_group_by) return Response( - {"data": grouped_results, "total_issues": total_issues}, + grouped_results, status=status.HTTP_200_OK, ) return Response( - {"data": issues, "total_issues": total_issues}, status=status.HTTP_200_OK + issues, status=status.HTTP_200_OK ) @@ -2151,7 +2149,6 @@ class IssueDraftViewSet(BaseViewSet): else: issue_queryset = issue_queryset.order_by(order_by_param) - total_issues = issue_queryset.count() issues = IssueLiteSerializer(issue_queryset, many=True).data ## Grouping the results @@ -2159,12 +2156,12 @@ class IssueDraftViewSet(BaseViewSet): if group_by: grouped_results = group_results(issues, group_by) return Response( - {"data": grouped_results, "total_issues": total_issues}, + grouped_results, status=status.HTTP_200_OK, ) return Response( - {"data": issues, "total_issues": total_issues}, status=status.HTTP_200_OK + issues, status=status.HTTP_200_OK ) def create(self, request, slug, project_id): diff --git a/apiserver/plane/api/views/module.py b/apiserver/plane/api/views/module.py index e5bda6b65..48f892764 100644 --- a/apiserver/plane/api/views/module.py +++ b/apiserver/plane/api/views/module.py @@ -364,7 +364,6 @@ class ModuleIssueViewSet(BaseViewSet): .values("count") ) ) - total_issues = issues.count() issues_data = IssueStateSerializer(issues, many=True).data if sub_group_by and sub_group_by == group_by: @@ -376,12 +375,12 @@ class ModuleIssueViewSet(BaseViewSet): if group_by: grouped_results = group_results(issues_data, group_by, sub_group_by) return Response( - {"data": grouped_results, "total_issues": total_issues}, + grouped_results, status=status.HTTP_200_OK, ) return Response( - {"data": issues_data, "total_issues": total_issues}, status=status.HTTP_200_OK + issues_data, status=status.HTTP_200_OK ) def create(self, request, slug, project_id, module_id): diff --git a/apiserver/plane/api/views/view.py b/apiserver/plane/api/views/view.py index c549324a1..f58f320b7 100644 --- a/apiserver/plane/api/views/view.py +++ b/apiserver/plane/api/views/view.py @@ -93,7 +93,6 @@ class GlobalViewIssuesViewSet(BaseViewSet): ) ) - @method_decorator(gzip_page) def list(self, request, slug): filters = issue_filters(request.query_params, "GET") @@ -117,9 +116,7 @@ class GlobalViewIssuesViewSet(BaseViewSet): .values("count") ) .annotate( - attachment_count=IssueAttachment.objects.filter( - issue=OuterRef("id") - ) + attachment_count=IssueAttachment.objects.filter(issue=OuterRef("id")) .order_by() .annotate(count=Func(F("id"), function="Count")) .values("count") @@ -129,9 +126,7 @@ class GlobalViewIssuesViewSet(BaseViewSet): # Priority Ordering if order_by_param == "priority" or order_by_param == "-priority": priority_order = ( - priority_order - if order_by_param == "priority" - else priority_order[::-1] + priority_order if order_by_param == "priority" else priority_order[::-1] ) issue_queryset = issue_queryset.annotate( priority_order=Case( @@ -183,8 +178,6 @@ class GlobalViewIssuesViewSet(BaseViewSet): ) else: issue_queryset = issue_queryset.order_by(order_by_param) - - total_issues = issue_queryset.count() issues = IssueLiteSerializer(issue_queryset, many=True).data ## Grouping the results @@ -195,17 +188,15 @@ class GlobalViewIssuesViewSet(BaseViewSet): {"error": "Group by and sub group by cannot be same"}, status=status.HTTP_400_BAD_REQUEST, ) - + if group_by: grouped_results = group_results(issues, group_by, sub_group_by) return Response( - {"data": grouped_results, "total_issues": total_issues}, + grouped_results, status=status.HTTP_200_OK, ) - return Response( - {"data": issues, "total_issues": total_issues}, status=status.HTTP_200_OK - ) + return Response(issues, status=status.HTTP_200_OK) class IssueViewViewSet(BaseViewSet): diff --git a/apiserver/plane/api/views/workspace.py b/apiserver/plane/api/views/workspace.py index e92859f14..165a96179 100644 --- a/apiserver/plane/api/views/workspace.py +++ b/apiserver/plane/api/views/workspace.py @@ -1223,7 +1223,6 @@ class WorkspaceUserProfileIssuesEndpoint(BaseAPIView): else: issue_queryset = issue_queryset.order_by(order_by_param) - total_issues = issue_queryset.count() issues = IssueLiteSerializer(issue_queryset, many=True).data ## Grouping the results @@ -1231,12 +1230,12 @@ class WorkspaceUserProfileIssuesEndpoint(BaseAPIView): if group_by: grouped_results = group_results(issues, group_by) return Response( - {"data": grouped_results, "total_issues": total_issues}, + grouped_results, status=status.HTTP_200_OK, ) return Response( - {"data": issues, "total_issues": total_issues}, status=status.HTTP_200_OK + issues, status=status.HTTP_200_OK ) diff --git a/packages/ui/src/icons/cycle/circle-dot-full-icon.tsx b/packages/ui/src/icons/cycle/circle-dot-full-icon.tsx new file mode 100644 index 000000000..0a2c46e99 --- /dev/null +++ b/packages/ui/src/icons/cycle/circle-dot-full-icon.tsx @@ -0,0 +1,20 @@ +import * as React from "react"; + +import { ISvgIcons } from "../type"; + +export const CircleDotFullIcon: React.FC = ({ + className = "text-current", + ...rest +}) => ( + + + + +); diff --git a/packages/ui/src/icons/contrast-icon.tsx b/packages/ui/src/icons/cycle/contrast-icon.tsx similarity index 95% rename from packages/ui/src/icons/contrast-icon.tsx rename to packages/ui/src/icons/cycle/contrast-icon.tsx index 99316dbe0..7b51fd1e7 100644 --- a/packages/ui/src/icons/contrast-icon.tsx +++ b/packages/ui/src/icons/cycle/contrast-icon.tsx @@ -1,6 +1,6 @@ import * as React from "react"; -import { ISvgIcons } from "./type"; +import { ISvgIcons } from "../type"; export const ContrastIcon: React.FC = ({ className = "text-current", diff --git a/packages/ui/src/icons/cycle/cycle-group-icon.tsx b/packages/ui/src/icons/cycle/cycle-group-icon.tsx new file mode 100644 index 000000000..731d90702 --- /dev/null +++ b/packages/ui/src/icons/cycle/cycle-group-icon.tsx @@ -0,0 +1,33 @@ +import * as React from "react"; + +import { ContrastIcon } from "./contrast-icon"; +import { CircleDotFullIcon } from "./circle-dot-full-icon"; +import { CircleDotDashed, Circle } from "lucide-react"; + +import { CYCLE_GROUP_COLORS, ICycleGroupIcon } from "./helper"; + +const iconComponents = { + current: ContrastIcon, + upcoming: CircleDotDashed, + completed: CircleDotFullIcon, + draft: Circle, +}; + +export const CycleGroupIcon: React.FC = ({ + className = "", + color, + cycleGroup, + height = "12px", + width = "12px", +}) => { + const CycleIconComponent = iconComponents[cycleGroup] || ContrastIcon; + + return ( + + ); +}; diff --git a/packages/ui/src/icons/double-circle-icon.tsx b/packages/ui/src/icons/cycle/double-circle-icon.tsx similarity index 91% rename from packages/ui/src/icons/double-circle-icon.tsx rename to packages/ui/src/icons/cycle/double-circle-icon.tsx index b5ced3f8a..a191b71a6 100644 --- a/packages/ui/src/icons/double-circle-icon.tsx +++ b/packages/ui/src/icons/cycle/double-circle-icon.tsx @@ -1,6 +1,6 @@ import * as React from "react"; -import { ISvgIcons } from "./type"; +import { ISvgIcons } from "../type"; export const DoubleCircleIcon: React.FC = ({ className = "text-current", diff --git a/packages/ui/src/icons/cycle/helper.tsx b/packages/ui/src/icons/cycle/helper.tsx new file mode 100644 index 000000000..ec91cc2c2 --- /dev/null +++ b/packages/ui/src/icons/cycle/helper.tsx @@ -0,0 +1,18 @@ +export interface ICycleGroupIcon { + className?: string; + color?: string; + cycleGroup: TCycleGroups; + height?: string; + width?: string; +} + +export type TCycleGroups = "current" | "upcoming" | "completed" | "draft"; + +export const CYCLE_GROUP_COLORS: { + [key in TCycleGroups]: string; +} = { + current: "#F59E0B", + upcoming: "#3F76FF", + completed: "#16A34A", + draft: "#525252", +}; diff --git a/packages/ui/src/icons/cycle/index.ts b/packages/ui/src/icons/cycle/index.ts new file mode 100644 index 000000000..e74c8ff8c --- /dev/null +++ b/packages/ui/src/icons/cycle/index.ts @@ -0,0 +1,5 @@ +export * from "./double-circle-icon"; +export * from "./circle-dot-full-icon"; +export * from "./contrast-icon"; +export * from "./circle-dot-full-icon"; +export * from "./cycle-group-icon"; diff --git a/packages/ui/src/icons/index.tsx b/packages/ui/src/icons/index.tsx index 2e98e7138..518a4bfad 100644 --- a/packages/ui/src/icons/index.tsx +++ b/packages/ui/src/icons/index.tsx @@ -1,5 +1,4 @@ export * from "./user-group-icon"; -export * from "./contrast-icon"; export * from "./dice-icon"; export * from "./layers-icon"; export * from "./photo-filter-icon"; @@ -7,7 +6,6 @@ export * from "./archive-icon"; export * from "./admin-profile-icon"; export * from "./create-icon"; export * from "./subscribe-icon"; -export * from "./double-circle-icon"; export * from "./external-link-icon"; export * from "./copy-icon"; export * from "./layer-stack"; @@ -20,6 +18,7 @@ export * from "./blocked-icon"; export * from "./blocker-icon"; export * from "./related-icon"; export * from "./module"; +export * from "./cycle"; export * from "./github-icon"; export * from "./discord-icon"; export * from "./transfer-icon"; diff --git a/web/components/core/sidebar/sidebar-progress-stats.tsx b/web/components/core/sidebar/sidebar-progress-stats.tsx index bb6690172..706448492 100644 --- a/web/components/core/sidebar/sidebar-progress-stats.tsx +++ b/web/components/core/sidebar/sidebar-progress-stats.tsx @@ -36,7 +36,7 @@ type Props = { module?: IModule; roundedTab?: boolean; noBackground?: boolean; - isPeekModuleDetails?: boolean; + isPeekView?: boolean; }; export const SidebarProgressStats: React.FC = ({ @@ -46,7 +46,7 @@ export const SidebarProgressStats: React.FC = ({ module, roundedTab, noBackground, - isPeekModuleDetails = false, + isPeekView = false, }) => { const { filters, setFilters } = useIssuesView(); @@ -154,7 +154,7 @@ export const SidebarProgressStats: React.FC = ({ } completed={assignee.completed_issues} total={assignee.total_issues} - {...(!isPeekModuleDetails && { + {...(!isPeekView && { onClick: () => { if (filters?.assignees?.includes(assignee.assignee_id ?? "")) setFilters({ @@ -213,7 +213,7 @@ export const SidebarProgressStats: React.FC = ({ } completed={label.completed_issues} total={label.total_issues} - {...(!isPeekModuleDetails && { + {...(!isPeekView && { onClick: () => { if (filters.labels?.includes(label.label_id ?? "")) setFilters({ diff --git a/web/components/cycles/cycle-peek-overview.tsx b/web/components/cycles/cycle-peek-overview.tsx new file mode 100644 index 000000000..fb30150ca --- /dev/null +++ b/web/components/cycles/cycle-peek-overview.tsx @@ -0,0 +1,55 @@ +import React, { useEffect } from "react"; + +import { useRouter } from "next/router"; + +// mobx +import { observer } from "mobx-react-lite"; +import { useMobxStore } from "lib/mobx/store-provider"; +// components +import { CycleDetailsSidebar } from "./sidebar"; + +type Props = { + projectId: string; + workspaceSlug: string; +}; + +export const CyclePeekOverview: React.FC = observer(({ projectId, workspaceSlug }) => { + const router = useRouter(); + const { peekCycle } = router.query; + + const ref = React.useRef(null); + + const { cycle: cycleStore } = useMobxStore(); + + const { fetchCycleWithId } = cycleStore; + + const handleClose = () => { + delete router.query.peekCycle; + router.push({ + pathname: router.pathname, + query: { ...router.query }, + }); + }; + + useEffect(() => { + if (!peekCycle) return; + fetchCycleWithId(workspaceSlug, projectId, peekCycle.toString()); + }, [fetchCycleWithId, peekCycle, projectId, workspaceSlug]); + + return ( + <> + {peekCycle && ( +
+ +
+ )} + + ); +}); diff --git a/web/components/cycles/cycles-board-card.tsx b/web/components/cycles/cycles-board-card.tsx index f2f921365..cbcfe2b55 100644 --- a/web/components/cycles/cycles-board-card.tsx +++ b/web/components/cycles/cycles-board-card.tsx @@ -1,64 +1,32 @@ import { FC, MouseEvent, useState } from "react"; + +import { useRouter } from "next/router"; + // next imports import Link from "next/link"; -// headless ui -import { Disclosure, Transition } from "@headlessui/react"; // hooks import useToast from "hooks/use-toast"; // components -import { SingleProgressStats } from "components/core"; import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles"; // ui import { AssigneesList } from "components/ui/avatar"; -import { CustomMenu, Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui"; +import { CustomMenu, Tooltip, LayersIcon, CycleGroupIcon } from "@plane/ui"; // icons -import { - AlarmClock, - AlertTriangle, - ArrowRight, - CalendarDays, - ChevronDown, - LinkIcon, - Pencil, - Star, - Target, - Trash2, -} from "lucide-react"; +import { Info, LinkIcon, Pencil, Star, Trash2 } from "lucide-react"; // helpers -import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper"; -import { copyTextToClipboard, truncateText } from "helpers/string.helper"; +import { + getDateRangeStatus, + findHowManyDaysLeft, + renderShortDate, + renderShortMonthDate, +} from "helpers/date-time.helper"; +import { copyTextToClipboard } from "helpers/string.helper"; // types import { ICycle } from "types"; // store import { useMobxStore } from "lib/mobx/store-provider"; - -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", - }, -]; +// constants +import { CYCLE_STATUS } from "constants/cycle"; export interface ICyclesBoardCard { workspaceSlug: string; @@ -81,7 +49,34 @@ export const CyclesBoardCard: FC = (props) => { const endDate = new Date(cycle.end_date ?? ""); const startDate = new Date(cycle.start_date ?? ""); - const handleCopyText = () => { + const router = useRouter(); + + const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus); + + const areYearsEqual = startDate.getFullYear() === endDate.getFullYear(); + + const cycleTotalIssues = + cycle.backlog_issues + + cycle.unstarted_issues + + cycle.started_issues + + cycle.completed_issues + + cycle.cancelled_issues; + + const completionPercentage = (cycle.completed_issues / cycleTotalIssues) * 100; + + const issueCount = cycle + ? cycleTotalIssues === 0 + ? "0 Issue" + : cycleTotalIssues === cycle.completed_issues + ? cycleTotalIssues > 1 + ? `${cycleTotalIssues} Issues` + : `${cycleTotalIssues} Issue` + : `${cycle.completed_issues}/${cycleTotalIssues} Issues` + : "0 Issue"; + + const handleCopyText = (e: MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`).then(() => { @@ -93,21 +88,6 @@ export const CyclesBoardCard: FC = (props) => { }); }; - 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, - })); - - const groupedIssues: any = { - backlog: cycle.backlog_issues, - unstarted: cycle.unstarted_issues, - started: cycle.started_issues, - completed: cycle.completed_issues, - cancelled: cycle.cancelled_issues, - }; - const handleAddToFavorites = (e: MouseEvent) => { e.preventDefault(); if (!workspaceSlug || !projectId) return; @@ -134,6 +114,29 @@ export const CyclesBoardCard: FC = (props) => { }); }; + const handleEditCycle = (e: MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + setUpdateModal(true); + }; + + const handleDeleteCycle = (e: MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + setDeleteModal(true); + }; + + const openCycleOverview = (e: MouseEvent) => { + const { query } = router; + e.preventDefault(); + e.stopPropagation(); + + router.push({ + pathname: router.pathname, + query: { ...query, peekCycle: cycle.id }, + }); + }; + return (
= (props) => { projectId={projectId} /> -
- - -
-
- - - - - -

{truncateText(cycle.name, 15)}

- + + +
+
+
+ + - + + {cycle.name} + +
+
+ {currentCycle && ( - {cycleStatus === "current" ? ( - - - {findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left - - ) : cycleStatus === "upcoming" ? ( - - - {findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left - - ) : cycleStatus === "completed" ? ( - - {cycle.total_issues - cycle.completed_issues > 0 && ( - - - - - - )}{" "} - Completed - - ) : ( - cycleStatus - )} + {currentCycle.value === "current" + ? `${findHowManyDaysLeft(cycle.end_date ?? new Date())} ${currentCycle.label}` + : `${currentCycle.label}`} - {cycle.is_favorite ? ( - - ) : ( - - )} - -
-
- {cycleStatus !== "draft" && ( - <> -
- - {renderShortDateWithYearFormat(startDate)} -
- -
- - {renderShortDateWithYearFormat(endDate)} -
- )} -
- -
-
-
-
Creator:
-
- {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? ( - {cycle.owned_by.display_name} - ) : ( - - {cycle.owned_by.display_name.charAt(0)} - - )} - {cycle.owned_by.display_name} -
-
-
-
Members:
- {cycle.assignees.length > 0 ? ( -
- -
- ) : ( - "No members" - )} -
-
- -
- {!isCompleted && ( - - )} - - - {!isCompleted && ( - { - e.preventDefault(); - setDeleteModal(true); - }} - > - - - Delete cycle - - - )} - { - e.preventDefault(); - handleCopyText(); - }} - > - - - Copy cycle link - - - -
+
- - +
-
- - {({ open }) => ( -
-
- Progress - - {Object.keys(groupedIssues).map((group, index) => ( - - - {group} -
- } - completed={groupedIssues[group]} - total={cycle.total_issues} - /> - ))} -
- } - position="bottom" - > -
- -
- - - - - -
- - -
-
-
- {stateGroups.map((group) => ( -
-
- -
{group.title}
-
-
- - {cycle[group.key as keyof ICycle] as number}{" "} - - -{" "} - {cycle.total_issues > 0 - ? `${Math.round( - ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100 - )}%` - : "0%"} - - -
-
- ))} -
-
-
- - +
+
+
+ + {issueCount}
- )} - -
-
+ {cycle.assignees.length > 0 && ( + +
+ +
+ + )} +
+ + +
+
+
+
+
+ + +
+ + {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "} + {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")} + +
+ {cycle.is_favorite ? ( + + ) : ( + + )} + + {!isCompleted && ( + <> + + + + Edit cycle + + + + + + Delete module + + + + )} + + + + Copy cycle link + + + +
+
+
+ +
); }; diff --git a/web/components/cycles/cycles-board.tsx b/web/components/cycles/cycles-board.tsx index 3eca2e9b9..105d16128 100644 --- a/web/components/cycles/cycles-board.tsx +++ b/web/components/cycles/cycles-board.tsx @@ -2,26 +2,41 @@ import { FC } from "react"; // types import { ICycle } from "types"; // components -import { CyclesBoardCard } from "components/cycles"; +import { CyclePeekOverview, CyclesBoardCard } from "components/cycles"; export interface ICyclesBoard { cycles: ICycle[]; filter: string; workspaceSlug: string; projectId: string; + peekCycle: string; } export const CyclesBoard: FC = (props) => { - const { cycles, filter, workspaceSlug, projectId } = props; + const { cycles, filter, workspaceSlug, projectId, peekCycle } = props; return ( -
+ <> {cycles.length > 0 ? ( - <> - {cycles.map((cycle) => ( - - ))} - +
+
+
+ {cycles.map((cycle) => ( + + ))} +
+ +
+
) : (
@@ -50,6 +65,6 @@ export const CyclesBoard: FC = (props) => {
)} -
+ ); }; diff --git a/web/components/cycles/cycles-list-item.tsx b/web/components/cycles/cycles-list-item.tsx index 9b381a03d..96efceddb 100644 --- a/web/components/cycles/cycles-list-item.tsx +++ b/web/components/cycles/cycles-list-item.tsx @@ -1,29 +1,30 @@ import { FC, MouseEvent, useState } from "react"; import Link from "next/link"; +import { useRouter } from "next/router"; + +// stores +import { useMobxStore } from "lib/mobx/store-provider"; // hooks import useToast from "hooks/use-toast"; // components import { CycleCreateUpdateModal, CycleDeleteModal } from "components/cycles"; +import { AssigneesList } from "components/ui"; // ui -import { CustomMenu, RadialProgressBar, Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui"; +import { CustomMenu, Tooltip, CircularProgressIndicator, CycleGroupIcon } from "@plane/ui"; // icons -import { - AlarmClock, - AlertTriangle, - ArrowRight, - CalendarDays, - LinkIcon, - Pencil, - Star, - Target, - Trash2, -} from "lucide-react"; +import { Check, Info, LinkIcon, Pencil, Star, Trash2, User2 } from "lucide-react"; // helpers -import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper"; +import { + getDateRangeStatus, + findHowManyDaysLeft, + renderShortDate, + renderShortMonthDate, +} from "helpers/date-time.helper"; import { copyTextToClipboard } from "helpers/string.helper"; // types import { ICycle } from "types"; -import { useMobxStore } from "lib/mobx/store-provider"; +// constants +import { CYCLE_STATUS } from "constants/cycle"; type TCyclesListItem = { cycle: ICycle; @@ -35,34 +36,6 @@ type TCyclesListItem = { projectId: string; }; -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 CyclesListItem: FC = (props) => { const { cycle, workspaceSlug, projectId } = props; // store @@ -78,7 +51,28 @@ export const CyclesListItem: FC = (props) => { const endDate = new Date(cycle.end_date ?? ""); const startDate = new Date(cycle.start_date ?? ""); - const handleCopyText = () => { + const router = useRouter(); + + const cycleTotalIssues = + cycle.backlog_issues + + cycle.unstarted_issues + + cycle.started_issues + + cycle.completed_issues + + cycle.cancelled_issues; + + const renderDate = cycle.start_date || cycle.end_date; + + const areYearsEqual = startDate.getFullYear() === endDate.getFullYear(); + + const completionPercentage = (cycle.completed_issues / cycleTotalIssues) * 100; + + const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage); + + const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus); + + const handleCopyText = (e: MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`).then(() => { @@ -90,13 +84,6 @@ export const CyclesListItem: FC = (props) => { }); }; - 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, - })); - const handleAddToFavorites = (e: MouseEvent) => { e.preventDefault(); if (!workspaceSlug || !projectId) return; @@ -123,224 +110,31 @@ export const CyclesListItem: FC = (props) => { }); }; + const handleEditCycle = (e: MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + setUpdateModal(true); + }; + + const handleDeleteCycle = (e: MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + setDeleteModal(true); + }; + + const openCycleOverview = (e: MouseEvent) => { + const { query } = router; + e.preventDefault(); + e.stopPropagation(); + + router.push({ + pathname: router.pathname, + query: { ...query, peekCycle: cycle.id }, + }); + }; + return ( <> -
-
- - - {/* left content */} -
- {/* cycle state */} -
- -
- - {/* cycle title and description */} -
- -
- {cycle.name} -
- - {cycle.description && ( -
{cycle.description}
- )} -
-
- - {/* right content */} -
- {/* cycle status */} -
- {cycleStatus === "current" ? ( - - - {findHowManyDaysLeft(cycle.end_date ?? new Date())} days left - - ) : cycleStatus === "upcoming" ? ( - - - {findHowManyDaysLeft(cycle.start_date ?? new Date())} days left - - ) : cycleStatus === "completed" ? ( - - {cycle.total_issues - cycle.completed_issues > 0 && ( - - - - - - )}{" "} - Completed - - ) : ( - cycleStatus - )} -
- - {/* cycle start_date and target_date */} - {cycleStatus !== "draft" && ( -
-
- - {renderShortDateWithYearFormat(startDate)} -
- - - -
- - {renderShortDateWithYearFormat(endDate)} -
-
- )} - - {/* cycle created by */} -
- {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? ( - {cycle.owned_by.display_name} - ) : ( - - {cycle.owned_by.display_name.charAt(0)} - - )} -
- - {/* cycle progress */} - - Progress - -
- } - > - - {cycleStatus === "current" ? ( - - {cycle.total_issues > 0 ? ( - <> - - {Math.floor((cycle.completed_issues / cycle.total_issues) * 100)} % - - ) : ( - No issues present - )} - - ) : cycleStatus === "upcoming" ? ( - - Yet to start - - ) : cycleStatus === "completed" ? ( - - - {100} % - - ) : ( - - - {cycleStatus} - - )} - - - - {/* cycle favorite */} - {cycle.is_favorite ? ( - - ) : ( - - )} -
- - -
- -
- - {!isCompleted && ( - setUpdateModal(true)}> - - - Edit Cycle - - - )} - - {!isCompleted && ( - setDeleteModal(true)}> - - - Delete cycle - - - )} - - - - - Copy cycle link - - - -
-
- = (props) => { workspaceSlug={workspaceSlug} projectId={projectId} /> - = (props) => { workspaceSlug={workspaceSlug} projectId={projectId} /> + + +
+
+ + + {isCompleted ? ( + {`!`} + ) : progress === 100 ? ( + + ) : ( + {`${progress}%`} + )} + + + +
+ + + + + {cycle.name} + +
+
+ +
+ +
+
+ {currentCycle && ( + + {currentCycle.value === "current" + ? `${findHowManyDaysLeft(cycle.end_date ?? new Date())} ${currentCycle.label}` + : `${currentCycle.label}`} + + )} +
+ + {renderDate && ( + + {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} + {" - "} + {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")} + + )} + + +
+ {cycle.assignees.length > 0 ? ( + + ) : ( + + + + )} +
+ + + {cycle.is_favorite ? ( + + ) : ( + + )} + + + {!isCompleted && ( + <> + + + + Edit cycle + + + + + + Delete module + + + + )} + + + + Copy cycle link + + + +
+ + ); }; diff --git a/web/components/cycles/cycles-list.tsx b/web/components/cycles/cycles-list.tsx index 947bd1fea..03698f1d8 100644 --- a/web/components/cycles/cycles-list.tsx +++ b/web/components/cycles/cycles-list.tsx @@ -1,6 +1,7 @@ import { FC } from "react"; // components -import { CyclesListItem } from "./cycles-list-item"; +import { CyclePeekOverview, CyclesListItem } from "components/cycles"; + // ui import { Loader } from "@plane/ui"; // types @@ -17,18 +18,22 @@ export const CyclesList: FC = (props) => { const { cycles, filter, workspaceSlug, projectId } = props; return ( -
+ <> {cycles ? ( <> {cycles.length > 0 ? ( -
- {cycles.map((cycle) => ( -
-
+
+
+
+ {cycles.map((cycle) => ( -
+ ))}
- ))} + +
) : (
@@ -68,6 +73,6 @@ export const CyclesList: FC = (props) => { )} -
+ ); }; diff --git a/web/components/cycles/cycles-view.tsx b/web/components/cycles/cycles-view.tsx index 36955398e..f0640dec6 100644 --- a/web/components/cycles/cycles-view.tsx +++ b/web/components/cycles/cycles-view.tsx @@ -15,10 +15,11 @@ export interface ICyclesView { layout: TCycleLayout; workspaceSlug: string; projectId: string; + peekCycle: string; } export const CyclesView: FC = observer((props) => { - const { filter, layout, workspaceSlug, projectId } = props; + const { filter, layout, workspaceSlug, projectId, peekCycle } = props; // store const { cycle: cycleStore } = useMobxStore(); @@ -50,7 +51,13 @@ export const CyclesView: FC = observer((props) => { {layout === "board" && ( <> {!isLoading ? ( - + ) : ( diff --git a/web/components/cycles/index.ts b/web/components/cycles/index.ts index 20bbfb627..6bf801bbe 100644 --- a/web/components/cycles/index.ts +++ b/web/components/cycles/index.ts @@ -17,3 +17,5 @@ export * from "./cycles-board"; export * from "./cycles-board-card"; export * from "./cycles-gantt"; export * from "./delete-modal"; +export * from "./cycle-peek-overview"; +export * from "./cycles-list-item"; diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx index d55a261eb..f56ddcf18 100644 --- a/web/components/cycles/sidebar.tsx +++ b/web/components/cycles/sidebar.tsx @@ -15,36 +15,29 @@ import { SidebarProgressStats } from "components/core"; import ProgressChart from "components/core/sidebar/progress-chart"; import { CycleDeleteModal } from "components/cycles/delete-modal"; // ui -import { CustomRangeDatePicker } from "components/ui"; -import { CustomMenu, Loader, ProgressBar } from "@plane/ui"; +import { Avatar, CustomRangeDatePicker } from "components/ui"; +import { CustomMenu, Loader, LayersIcon } from "@plane/ui"; // icons -import { - CalendarDays, - ChevronDown, - File, - MoveRight, - LinkIcon, - PieChart, - Trash2, - UserCircle2, - AlertCircle, -} from "lucide-react"; +import { ChevronDown, LinkIcon, Trash2, UserCircle2, AlertCircle, ChevronRight, MoveRight } from "lucide-react"; // helpers -import { capitalizeFirstLetter, copyUrlToClipboard } from "helpers/string.helper"; +import { copyUrlToClipboard } from "helpers/string.helper"; import { + findHowManyDaysLeft, getDateRangeStatus, isDateGreaterThanToday, renderDateFormat, - renderShortDateWithYearFormat, + renderShortDate, + renderShortMonthDate, } from "helpers/date-time.helper"; // types import { ICycle } from "types"; // fetch-keys import { CYCLE_DETAILS } from "constants/fetch-keys"; +import { CYCLE_STATUS } from "constants/cycle"; type Props = { - isOpen: boolean; cycleId: string; + handleClose: () => void; }; // services @@ -52,12 +45,12 @@ const cycleService = new CycleService(); // TODO: refactor the whole component export const CycleDetailsSidebar: React.FC = observer((props) => { - const { isOpen, cycleId } = props; + const { cycleId, handleClose } = props; const [cycleDeleteModal, setCycleDeleteModal] = useState(false); const router = useRouter(); - const { workspaceSlug, projectId } = router.query; + const { workspaceSlug, projectId, peekCycle } = router.query; const { user: userStore, cycle: cycleDetailsStore } = useMobxStore(); @@ -280,6 +273,22 @@ export const CycleDetailsSidebar: React.FC = observer((props) => { if (!cycleDetails) return null; + const endDate = new Date(cycleDetails.end_date ?? ""); + const startDate = new Date(cycleDetails.start_date ?? ""); + + const areYearsEqual = startDate.getFullYear() === endDate.getFullYear(); + + const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus); + + const issueCount = + cycleDetails.total_issues === 0 + ? "0 Issue" + : cycleDetails.total_issues === cycleDetails.completed_issues + ? cycleDetails.total_issues > 1 + ? `${cycleDetails.total_issues}` + : `${cycleDetails.total_issues}` + : `${cycleDetails.completed_issues}/${cycleDetails.total_issues}`; + return ( <> {cycleDetails && workspaceSlug && projectId && ( @@ -291,327 +300,266 @@ export const CycleDetailsSidebar: React.FC = observer((props) => { projectId={projectId.toString()} /> )} -
- {cycleDetails ? ( - <> -
-
-
- - {capitalizeFirstLetter(cycleStatus)} - -
-
- - {({}) => ( - <> - - - - {renderShortDateWithYearFormat( - new Date(`${watch("start_date") ? watch("start_date") : cycleDetails?.start_date}`), - "Start date" - )} - - - - - { - if (val) { - handleStartDateChange(val); - } - }} - startDate={watch("start_date") ? `${watch("start_date")}` : null} - endDate={watch("end_date") ? `${watch("end_date")}` : null} - maxDate={new Date(`${watch("end_date")}`)} - selectsStart - /> - - - - )} - - - - - - {({}) => ( - <> - - + {cycleDetails ? ( + <> +
+
+ {peekCycle && ( + + )} +
+
+ + {!isCompleted && ( + + setCycleDeleteModal(true)}> + + + Delete + + + + )} +
+
- - {renderShortDateWithYearFormat( - new Date(`${watch("end_date") ? watch("end_date") : cycleDetails?.end_date}`), - "End date" - )} - - +
+

{cycleDetails.name}

+
+ {currentCycle && ( + + {currentCycle.value === "current" + ? `${findHowManyDaysLeft(cycleDetails.end_date ?? new Date())} ${currentCycle.label}` + : `${currentCycle.label}`} + + )} +
+ + {({}) => ( + <> + + {areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} + - - - { - if (val) { - handleEndDateChange(val); - } - }} - startDate={watch("start_date") ? `${watch("start_date")}` : null} - endDate={watch("end_date") ? `${watch("end_date")}` : null} - minDate={new Date(`${watch("start_date")}`)} - selectsEnd - /> - - - - )} - -
+ + + { + if (val) { + handleStartDateChange(val); + } + }} + startDate={watch("start_date") ? `${watch("start_date")}` : null} + endDate={watch("end_date") ? `${watch("end_date")}` : null} + maxDate={new Date(`${watch("end_date")}`)} + selectsStart + /> + + + + )} + + + + {({}) => ( + <> + + {areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")} + + + + + { + if (val) { + handleEndDateChange(val); + } + }} + startDate={watch("start_date") ? `${watch("start_date")}` : null} + endDate={watch("end_date") ? `${watch("end_date")}` : null} + minDate={new Date(`${watch("start_date")}`)} + selectsEnd + /> + + + + )} +
+
+
-
-
-
-
-

- {cycleDetails.name} -

-
- - {!isCompleted && ( - setCycleDeleteModal(true)}> - - - Delete - - - )} - - - - Copy link - - - -
+ {cycleDetails.description && ( + + {cycleDetails.description} + + )} - - {cycleDetails.description} - -
- -
-
-
- - Lead -
- -
- {cycleDetails.owned_by.avatar && cycleDetails.owned_by.avatar !== "" ? ( - {cycleDetails.owned_by.display_name} - ) : ( - - {cycleDetails.owned_by.display_name.charAt(0)} - - )} - {cycleDetails.owned_by.display_name} -
-
- -
-
- - Progress -
- -
- - - - {cycleDetails.completed_issues}/{cycleDetails.total_issues} -
-
+
+
+
+ + Lead +
+
+
+ + {cycleDetails.owned_by.display_name}
-
- + +
+
+ + Issues +
+
+ {issueCount} +
+
+
+ +
+
+ {({ open }) => (
-
+
Progress - {!open && progressPercentage ? ( - +
+ +
+ {progressPercentage ? ( + {progressPercentage ? `${progressPercentage}%` : ""} ) : ( "" )} + {isStartValid && isEndValid ? ( + + + ) : ( +
+ + + Invalid date. Please enter valid date. + +
+ )}
- {isStartValid && isEndValid ? ( - - - ) : ( -
- - - {cycleStatus === "upcoming" - ? "Cycle is yet to start." - : "Invalid date. Please enter valid date."} - -
- )}
- {isStartValid && isEndValid ? ( -
-
-
- - - - - Pending Issues -{" "} - {cycleDetails.total_issues - - (cycleDetails.completed_issues + cycleDetails.cancelled_issues)} - +
+ {isStartValid && isEndValid ? ( +
+
+
+
+ + Ideal +
+
+ + Current +
+
- -
-
- - Ideal -
-
- - Current -
+
+
-
- 0 && ( +
+
-
- ) : ( - "" - )} - - -
- )} - -
-
- - {({ open }) => ( -
-
-
- Other Information -
- - {cycleDetails.total_issues > 0 ? ( - - - ) : ( -
- - - No issues found. Please add issue. - + )}
- )} -
- - - {cycleDetails.total_issues > 0 ? ( -
- -
- ) : ( - "" - )}
)}
- - ) : ( - -
- - -
-
- - - -
- - )} -
+
+ + ) : ( + +
+ + +
+
+ + + +
+ + )} ); }); diff --git a/web/components/integration/jira/import-users.tsx b/web/components/integration/jira/import-users.tsx index 440584e1c..c49a3483a 100644 --- a/web/components/integration/jira/import-users.tsx +++ b/web/components/integration/jira/import-users.tsx @@ -31,7 +31,7 @@ export const JiraImportUsers: FC = () => { const { data: members } = useSWR( workspaceSlug ? WORKSPACE_MEMBERS_WITH_EMAIL(workspaceSlug?.toString() ?? "") : null, - workspaceSlug ? () => workspaceService.workspaceMembersWithEmail(workspaceSlug?.toString() ?? "") : null + workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug?.toString() ?? "") : null ); const options = members?.map((member) => ({ diff --git a/web/components/issues/index.ts b/web/components/issues/index.ts index aee53a882..f48bb3894 100644 --- a/web/components/issues/index.ts +++ b/web/components/issues/index.ts @@ -1,6 +1,5 @@ export * from "./attachment"; export * from "./comment"; -export * from "./my-issues"; export * from "./sidebar-select"; export * from "./view-select"; export * from "./activity"; diff --git a/web/components/issues/issue-layouts/empty-states/cycle.tsx b/web/components/issues/issue-layouts/empty-states/cycle.tsx new file mode 100644 index 000000000..e7fb0833f --- /dev/null +++ b/web/components/issues/issue-layouts/empty-states/cycle.tsx @@ -0,0 +1,25 @@ +import { PlusIcon } from "lucide-react"; +// components +import { EmptyState } from "components/common"; +// assets +import emptyIssue from "public/empty-state/issue.svg"; + +export const CycleEmptyState: React.FC = () => ( +
+ , + onClick: () => { + const e = new KeyboardEvent("keydown", { + key: "c", + }); + document.dispatchEvent(e); + }, + }} + /> +
+); diff --git a/web/components/issues/issue-layouts/empty-states/global-view.tsx b/web/components/issues/issue-layouts/empty-states/global-view.tsx new file mode 100644 index 000000000..dc7829127 --- /dev/null +++ b/web/components/issues/issue-layouts/empty-states/global-view.tsx @@ -0,0 +1,25 @@ +import { PlusIcon } from "lucide-react"; +// components +import { EmptyState } from "components/common"; +// assets +import emptyIssue from "public/empty-state/issue.svg"; + +export const GlobalViewEmptyState: React.FC = () => ( +
+ , + onClick: () => { + const e = new KeyboardEvent("keydown", { + key: "c", + }); + document.dispatchEvent(e); + }, + }} + /> +
+); diff --git a/web/components/issues/issue-layouts/empty-states/index.ts b/web/components/issues/issue-layouts/empty-states/index.ts new file mode 100644 index 000000000..0373709d2 --- /dev/null +++ b/web/components/issues/issue-layouts/empty-states/index.ts @@ -0,0 +1,5 @@ +export * from "./cycle"; +export * from "./global-view"; +export * from "./module"; +export * from "./project-view"; +export * from "./project"; diff --git a/web/components/issues/issue-layouts/empty-states/module.tsx b/web/components/issues/issue-layouts/empty-states/module.tsx new file mode 100644 index 000000000..830fde1ff --- /dev/null +++ b/web/components/issues/issue-layouts/empty-states/module.tsx @@ -0,0 +1,25 @@ +import { PlusIcon } from "lucide-react"; +// components +import { EmptyState } from "components/common"; +// assets +import emptyIssue from "public/empty-state/issue.svg"; + +export const ModuleEmptyState: React.FC = () => ( +
+ , + onClick: () => { + const e = new KeyboardEvent("keydown", { + key: "c", + }); + document.dispatchEvent(e); + }, + }} + /> +
+); diff --git a/web/components/issues/issue-layouts/empty-states/project-view.tsx b/web/components/issues/issue-layouts/empty-states/project-view.tsx new file mode 100644 index 000000000..2b046a14f --- /dev/null +++ b/web/components/issues/issue-layouts/empty-states/project-view.tsx @@ -0,0 +1,25 @@ +import { PlusIcon } from "lucide-react"; +// components +import { EmptyState } from "components/common"; +// assets +import emptyIssue from "public/empty-state/issue.svg"; + +export const ProjectViewEmptyState: React.FC = () => ( +
+ , + onClick: () => { + const e = new KeyboardEvent("keydown", { + key: "c", + }); + document.dispatchEvent(e); + }, + }} + /> +
+); diff --git a/web/components/issues/issue-layouts/empty-states/project.tsx b/web/components/issues/issue-layouts/empty-states/project.tsx new file mode 100644 index 000000000..03c4522c0 --- /dev/null +++ b/web/components/issues/issue-layouts/empty-states/project.tsx @@ -0,0 +1,25 @@ +import { PlusIcon } from "lucide-react"; +// components +import { EmptyState } from "components/common"; +// assets +import emptyIssue from "public/empty-state/issue.svg"; + +export const ProjectEmptyState: React.FC = () => ( +
+ , + onClick: () => { + const e = new KeyboardEvent("keydown", { + key: "c", + }); + document.dispatchEvent(e); + }, + }} + /> +
+); diff --git a/web/components/issues/issue-layouts/index.ts b/web/components/issues/issue-layouts/index.ts index 5e6b51931..066febb94 100644 --- a/web/components/issues/issue-layouts/index.ts +++ b/web/components/issues/issue-layouts/index.ts @@ -1,5 +1,6 @@ // filters export * from "./filters"; +export * from "./empty-states"; export * from "./quick-action-dropdowns"; // layouts diff --git a/web/components/issues/issue-layouts/list/index.ts b/web/components/issues/issue-layouts/list/index.ts index e557fe022..be3968fdd 100644 --- a/web/components/issues/issue-layouts/list/index.ts +++ b/web/components/issues/issue-layouts/list/index.ts @@ -1,4 +1,5 @@ export * from "./roots"; export * from "./block"; +export * from "./roots"; export * from "./blocks-list"; export * from "./inline-create-issue-form"; diff --git a/web/components/issues/issue-layouts/list/roots/module-root.tsx b/web/components/issues/issue-layouts/list/roots/module-root.tsx index daa12e64a..b32d303e1 100644 --- a/web/components/issues/issue-layouts/list/roots/module-root.tsx +++ b/web/components/issues/issue-layouts/list/roots/module-root.tsx @@ -68,7 +68,7 @@ export const ModuleListLayout: React.FC = observer(() => { : null; return ( -
+
{ ? getDateRangeStatus(cycleDetails?.start_date, cycleDetails?.end_date) : "draft"; + const issueCount = cycleIssueStore.getIssuesCount; + return ( <> setTransferIssuesModal(false)} isOpen={transferIssuesModal} />
{cycleStatus === "completed" && setTransferIssuesModal(true)} />} -
- {activeLayout === "list" ? ( - - ) : activeLayout === "kanban" ? ( - - ) : activeLayout === "calendar" ? ( - - ) : activeLayout === "gantt_chart" ? ( - - ) : activeLayout === "spreadsheet" ? ( - - ) : null} -
+ {(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? ( + + ) : ( +
+ {activeLayout === "list" ? ( + + ) : activeLayout === "kanban" ? ( + + ) : activeLayout === "calendar" ? ( + + ) : activeLayout === "gantt_chart" ? ( + + ) : activeLayout === "spreadsheet" ? ( + + ) : null} +
+ )}
); diff --git a/web/components/issues/issue-layouts/roots/global-view-layout-root.tsx b/web/components/issues/issue-layouts/roots/global-view-layout-root.tsx index c88c821f4..e7adcf0e9 100644 --- a/web/components/issues/issue-layouts/roots/global-view-layout-root.tsx +++ b/web/components/issues/issue-layouts/roots/global-view-layout-root.tsx @@ -5,7 +5,7 @@ import useSWR from "swr"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // components -import { GlobalViewsAppliedFiltersRoot, SpreadsheetView } from "components/issues"; +import { GlobalViewEmptyState, GlobalViewsAppliedFiltersRoot, SpreadsheetView } from "components/issues"; // types import { IIssue, IIssueDisplayFilterOptions, TStaticViewTypes } from "types"; @@ -81,19 +81,23 @@ export const GlobalViewLayoutRoot: React.FC = observer((props) => { return (
-
- m.member) : undefined} - labels={workspaceStore.workspaceLabels ? workspaceStore.workspaceLabels : undefined} - handleIssueAction={() => {}} - handleUpdateIssue={handleUpdateIssue} - disableUserActions={false} - /> -
+ {issues?.length === 0 ? ( + + ) : ( +
+ m.member) : undefined} + labels={workspaceStore.workspaceLabels ? workspaceStore.workspaceLabels : undefined} + handleIssueAction={() => {}} + handleUpdateIssue={handleUpdateIssue} + disableUserActions={false} + /> +
+ )}
); }); diff --git a/web/components/issues/issue-layouts/roots/module-layout-root.tsx b/web/components/issues/issue-layouts/roots/module-layout-root.tsx index f01fd1fc2..ff7867c3d 100644 --- a/web/components/issues/issue-layouts/roots/module-layout-root.tsx +++ b/web/components/issues/issue-layouts/roots/module-layout-root.tsx @@ -9,6 +9,7 @@ import { useMobxStore } from "lib/mobx/store-provider"; import { ModuleAppliedFiltersRoot, ModuleCalendarLayout, + ModuleEmptyState, ModuleGanttLayout, ModuleKanBanLayout, ModuleListLayout, @@ -46,22 +47,28 @@ export const ModuleLayoutRoot: React.FC = observer(() => { const activeLayout = issueFilterStore.userDisplayFilters.layout; + const issueCount = moduleIssueStore.getIssuesCount; + return (
-
- {activeLayout === "list" ? ( - - ) : activeLayout === "kanban" ? ( - - ) : activeLayout === "calendar" ? ( - - ) : activeLayout === "gantt_chart" ? ( - - ) : activeLayout === "spreadsheet" ? ( - - ) : null} -
+ {(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? ( + + ) : ( +
+ {activeLayout === "list" ? ( + + ) : activeLayout === "kanban" ? ( + + ) : activeLayout === "calendar" ? ( + + ) : activeLayout === "gantt_chart" ? ( + + ) : activeLayout === "spreadsheet" ? ( + + ) : null} +
+ )}
); }); diff --git a/web/components/issues/issue-layouts/roots/project-layout-root.tsx b/web/components/issues/issue-layouts/roots/project-layout-root.tsx index f76d2a3e3..0cd5911a5 100644 --- a/web/components/issues/issue-layouts/roots/project-layout-root.tsx +++ b/web/components/issues/issue-layouts/roots/project-layout-root.tsx @@ -12,6 +12,7 @@ import { KanBanLayout, ProjectAppliedFiltersRoot, ProjectSpreadsheetLayout, + ProjectEmptyState, } from "components/issues"; export const ProjectLayoutRoot: React.FC = observer(() => { @@ -30,22 +31,28 @@ export const ProjectLayoutRoot: React.FC = observer(() => { const activeLayout = issueFilterStore.userDisplayFilters.layout; + const issueCount = issueStore.getIssuesCount; + return (
-
- {activeLayout === "list" ? ( - - ) : activeLayout === "kanban" ? ( - - ) : activeLayout === "calendar" ? ( - - ) : activeLayout === "gantt_chart" ? ( - - ) : activeLayout === "spreadsheet" ? ( - - ) : null} -
+ {(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? ( + + ) : ( +
+ {activeLayout === "list" ? ( + + ) : activeLayout === "kanban" ? ( + + ) : activeLayout === "calendar" ? ( + + ) : activeLayout === "gantt_chart" ? ( + + ) : activeLayout === "spreadsheet" ? ( + + ) : null} +
+ )}
); }); diff --git a/web/components/issues/issue-layouts/roots/project-view-layout-root.tsx b/web/components/issues/issue-layouts/roots/project-view-layout-root.tsx index 7d5dad9e2..dfb69e63a 100644 --- a/web/components/issues/issue-layouts/roots/project-view-layout-root.tsx +++ b/web/components/issues/issue-layouts/roots/project-view-layout-root.tsx @@ -11,6 +11,7 @@ import { ModuleListLayout, ProjectViewAppliedFiltersRoot, ProjectViewCalendarLayout, + ProjectViewEmptyState, ProjectViewGanttLayout, ProjectViewSpreadsheetLayout, } from "components/issues"; @@ -48,22 +49,28 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => { const activeLayout = issueFilterStore.userDisplayFilters.layout; + const issueCount = projectViewIssuesStore.getIssuesCount; + return (
-
- {activeLayout === "list" ? ( - - ) : activeLayout === "kanban" ? ( - - ) : activeLayout === "calendar" ? ( - - ) : activeLayout === "gantt_chart" ? ( - - ) : activeLayout === "spreadsheet" ? ( - - ) : null} -
+ {(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 ? ( + + ) : ( +
+ {activeLayout === "list" ? ( + + ) : activeLayout === "kanban" ? ( + + ) : activeLayout === "calendar" ? ( + + ) : activeLayout === "gantt_chart" ? ( + + ) : activeLayout === "spreadsheet" ? ( + + ) : null} +
+ )}
); }); diff --git a/web/components/issues/my-issues/index.ts b/web/components/issues/my-issues/index.ts deleted file mode 100644 index 65a063f4c..000000000 --- a/web/components/issues/my-issues/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from "./my-issues-select-filters"; -export * from "./my-issues-view-options"; -export * from "./my-issues-view"; diff --git a/web/components/issues/my-issues/my-issues-select-filters.tsx b/web/components/issues/my-issues/my-issues-select-filters.tsx deleted file mode 100644 index 355496888..000000000 --- a/web/components/issues/my-issues/my-issues-select-filters.tsx +++ /dev/null @@ -1,213 +0,0 @@ -import { useState } from "react"; -import { useRouter } from "next/router"; -import useSWR from "swr"; -// services -import { IssueLabelService } from "services/issue"; -// components -import { DateFilterModal } from "components/core"; -// ui -import { MultiLevelDropdown } from "components/ui"; -// icons -import { PriorityIcon, StateGroupIcon } from "@plane/ui"; -// helpers -import { checkIfArraysHaveSameElements } from "helpers/array.helper"; -// types -import { IIssueFilterOptions, TStateGroups } from "types"; -// fetch-keys -import { WORKSPACE_LABELS } from "constants/fetch-keys"; -// constants -import { GROUP_CHOICES, PRIORITIES } from "constants/project"; -import { DATE_FILTER_OPTIONS } from "constants/filters"; - -type Props = { - filters: Partial | any; - onSelect: (option: any) => void; - direction?: "left" | "right"; - height?: "sm" | "md" | "rg" | "lg"; -}; - -const issueLabelService = new IssueLabelService(); - -export const MyIssuesSelectFilters: React.FC = ({ filters, onSelect, direction = "right", height = "md" }) => { - const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false); - const [dateFilterType, setDateFilterType] = useState<{ - title: string; - type: "start_date" | "target_date"; - }>({ - title: "", - type: "start_date", - }); - const [fetchLabels, setFetchLabels] = useState(false); - - const router = useRouter(); - const { workspaceSlug } = router.query; - - const { data: labels } = useSWR( - workspaceSlug && fetchLabels ? WORKSPACE_LABELS(workspaceSlug.toString()) : null, - workspaceSlug && fetchLabels ? () => issueLabelService.getWorkspaceIssueLabels(workspaceSlug.toString()) : null - ); - - return ( - <> - {/* {isDateFilterModalOpen && ( - setIsDateFilterModalOpen(false)} - isOpen={isDateFilterModalOpen} - onSelect={onSelect} - /> - )} */} - ({ - id: priority === null ? "null" : priority, - label: ( -
- {priority ?? "None"} -
- ), - value: { - key: "priority", - value: priority === null ? "null" : priority, - }, - selected: filters?.priority?.includes(priority === null ? "null" : priority), - })), - ], - }, - { - id: "state_group", - label: "State groups", - value: GROUP_CHOICES, - hasChildren: true, - children: [ - ...Object.keys(GROUP_CHOICES).map((key) => ({ - id: key, - label: ( -
- - {GROUP_CHOICES[key as keyof typeof GROUP_CHOICES]} -
- ), - value: { - key: "state_group", - value: key, - }, - selected: filters?.state?.includes(key), - })), - ], - }, - { - id: "labels", - label: "Labels", - onClick: () => setFetchLabels(true), - value: labels, - hasChildren: true, - children: labels?.map((label) => ({ - id: label.id, - label: ( -
-
- {label.name} -
- ), - value: { - key: "labels", - value: label.id, - }, - selected: filters?.labels?.includes(label.id), - })), - }, - { - id: "start_date", - label: "Start date", - value: DATE_FILTER_OPTIONS, - hasChildren: true, - children: [ - ...(DATE_FILTER_OPTIONS?.map((option) => ({ - id: option.name, - label: option.name, - value: { - key: "start_date", - value: option.value, - }, - selected: checkIfArraysHaveSameElements(filters?.start_date ?? [], [option.value]), - })) ?? []), - { - id: "custom", - label: "Custom", - value: "custom", - element: ( - - ), - }, - ], - }, - { - id: "target_date", - label: "Due date", - value: DATE_FILTER_OPTIONS, - hasChildren: true, - children: [ - ...(DATE_FILTER_OPTIONS?.map((option) => ({ - id: option.name, - label: option.name, - value: { - key: "target_date", - value: option.value, - }, - selected: checkIfArraysHaveSameElements(filters?.target_date ?? [], [option.value]), - })) ?? []), - { - id: "custom", - label: "Custom", - value: "custom", - element: ( - - ), - }, - ], - }, - ]} - /> - - ); -}; diff --git a/web/components/issues/my-issues/my-issues-view-options.tsx b/web/components/issues/my-issues/my-issues-view-options.tsx deleted file mode 100644 index 7ca6dfce7..000000000 --- a/web/components/issues/my-issues/my-issues-view-options.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import React from "react"; - -import { useRouter } from "next/router"; - -// hooks -import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter"; -// components -import { MyIssuesSelectFilters } from "components/issues"; -// ui -import { Tooltip } from "@plane/ui"; -// icons -import { List, Sheet } from "lucide-react"; -// helpers -import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper"; -import { checkIfArraysHaveSameElements } from "helpers/array.helper"; -// types -import { TIssueLayouts } from "types"; - -const issueViewOptions: { type: TIssueLayouts; Icon: any }[] = [ - { - type: "list", - Icon: List, - }, - { - type: "spreadsheet", - Icon: Sheet, - }, -]; - -export const MyIssuesViewOptions: React.FC = () => { - const router = useRouter(); - const { workspaceSlug, globalViewId } = router.query; - - const { displayFilters, setDisplayFilters, filters, setFilters } = useMyIssuesFilters(workspaceSlug?.toString()); - - const workspaceViewPathName = ["workspace-views/all-issues"]; - - const isWorkspaceViewPath = workspaceViewPathName.some((pathname) => router.pathname.includes(pathname)); - - const showFilters = isWorkspaceViewPath || globalViewId; - - return ( -
-
- {issueViewOptions.map((option) => ( - {replaceUnderscoreIfSnakeCase(option.type)} View} - position="bottom" - > - - - ))} -
- {showFilters && ( - { - const key = option.key as keyof typeof filters; - - if (key === "start_date" || key === "target_date") { - const valueExists = checkIfArraysHaveSameElements(filters?.[key] ?? [], option.value); - - setFilters({ - [key]: valueExists ? null : option.value, - }); - } else { - const valueExists = filters[key]?.includes(option.value); - - if (valueExists) - setFilters({ - [option.key]: ((filters[key] ?? []) as any[])?.filter((val) => val !== option.value), - }); - else - setFilters({ - [option.key]: [...((filters[key] ?? []) as any[]), option.value], - }); - } - }} - direction="left" - height="rg" - /> - )} -
- ); -}; diff --git a/web/components/issues/my-issues/my-issues-view.tsx b/web/components/issues/my-issues/my-issues-view.tsx deleted file mode 100644 index 9ec77cbbf..000000000 --- a/web/components/issues/my-issues/my-issues-view.tsx +++ /dev/null @@ -1,296 +0,0 @@ -import { useState } from "react"; -import { useRouter } from "next/router"; -import useSWR from "swr"; -// services -import { IssueLabelService } from "services/issue"; -// hooks -import useMyIssues from "hooks/my-issues/use-my-issues"; -import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter"; -// components -import { FiltersList } from "components/core"; -import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues"; -// types -import { IIssue, IIssueFilterOptions } from "types"; -// fetch-keys -import { WORKSPACE_LABELS } from "constants/fetch-keys"; - -type Props = { - openIssuesListModal?: () => void; - disableUserActions?: false; -}; - -const issueLabelService = new IssueLabelService(); - -export const MyIssuesView: React.FC = () => { - // create issue modal - const [createIssueModal, setCreateIssueModal] = useState(false); - const [preloadedData] = useState<(Partial & { actionType: "createIssue" | "edit" | "delete" }) | undefined>( - undefined - ); - - // update issue modal - const [editIssueModal, setEditIssueModal] = useState(false); - const [issueToEdit] = useState<(IIssue & { actionType: "edit" | "delete" }) | undefined>(undefined); - - // delete issue modal - const [deleteIssueModal, setDeleteIssueModal] = useState(false); - const [issueToDelete] = useState(null); - - // trash box - // const [trashBox, setTrashBox] = useState(false); - - const router = useRouter(); - const { workspaceSlug } = router.query; - - const { mutateMyIssues } = useMyIssues(workspaceSlug?.toString()); - const { filters, setFilters } = useMyIssuesFilters(workspaceSlug?.toString()); - - const { data: labels } = useSWR( - workspaceSlug && (filters?.labels ?? []).length > 0 ? WORKSPACE_LABELS(workspaceSlug.toString()) : null, - workspaceSlug && (filters?.labels ?? []).length > 0 - ? () => issueLabelService.getWorkspaceIssueLabels(workspaceSlug.toString()) - : null - ); - - // const handleDeleteIssue = useCallback( - // (issue: IIssue) => { - // setDeleteIssueModal(true); - // setIssueToDelete(issue); - // }, - // [setDeleteIssueModal, setIssueToDelete] - // ); - - // const handleOnDragEnd = useCallback( - // async (result: DropResult) => { - // setTrashBox(false); - - // if (!result.destination || !workspaceSlug || !groupedIssues || displayFilters?.group_by !== "priority") return; - - // const { source, destination } = result; - - // if (source.droppableId === destination.droppableId) return; - - // const draggedItem = groupedIssues[source.droppableId][source.index]; - - // if (!draggedItem) return; - - // if (destination.droppableId === "trashBox") handleDeleteIssue(draggedItem); - // else { - // const sourceGroup = source.droppableId; - // const destinationGroup = destination.droppableId; - - // draggedItem[displayFilters.group_by] = destinationGroup as TIssuePriorities; - - // mutate<{ - // [key: string]: IIssue[]; - // }>( - // USER_ISSUES(workspaceSlug.toString(), params), - // (prevData) => { - // if (!prevData) return prevData; - - // const sourceGroupArray = [...groupedIssues[sourceGroup]]; - // const destinationGroupArray = [...groupedIssues[destinationGroup]]; - - // sourceGroupArray.splice(source.index, 1); - // destinationGroupArray.splice(destination.index, 0, draggedItem); - - // return { - // ...prevData, - // [sourceGroup]: orderArrayBy(sourceGroupArray, displayFilters.order_by ?? "-created_at"), - // [destinationGroup]: orderArrayBy(destinationGroupArray, displayFilters.order_by ?? "-created_at"), - // }; - // }, - // false - // ); - - // // patch request - // issuesService - // .patchIssue( - // workspaceSlug as string, - // draggedItem.project, - // draggedItem.id, - // { - // priority: draggedItem.priority, - // }, - // user - // ) - // .catch(() => mutate(USER_ISSUES(workspaceSlug.toString(), params))); - // } - // }, - // [displayFilters, groupedIssues, handleDeleteIssue, params, user, workspaceSlug] - // ); - - // const addIssueToGroup = useCallback( - // (groupTitle: string) => { - // setCreateIssueModal(true); - - // let preloadedValue: string | string[] = groupTitle; - - // if (displayFilters?.group_by === "labels") { - // if (groupTitle === "None") preloadedValue = []; - // else preloadedValue = [groupTitle]; - // } - - // if (displayFilters?.group_by) - // setPreloadedData({ - // [displayFilters?.group_by]: preloadedValue, - // actionType: "createIssue", - // }); - // else setPreloadedData({ actionType: "createIssue" }); - // }, - // [setCreateIssueModal, setPreloadedData, displayFilters?.group_by] - // ); - - // const addIssueToDate = useCallback( - // (date: string) => { - // setCreateIssueModal(true); - // setPreloadedData({ - // target_date: date, - // actionType: "createIssue", - // }); - // }, - // [setCreateIssueModal, setPreloadedData] - // ); - - // const makeIssueCopy = useCallback( - // (issue: IIssue) => { - // setCreateIssueModal(true); - - // setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" }); - // }, - // [setCreateIssueModal, setPreloadedData] - // ); - - // const handleEditIssue = useCallback( - // (issue: IIssue) => { - // setEditIssueModal(true); - // setIssueToEdit({ - // ...issue, - // actionType: "edit", - // cycle: issue.issue_cycle ? issue.issue_cycle.cycle : null, - // module: issue.issue_module ? issue.issue_module.module : null, - // }); - // }, - // [setEditIssueModal, setIssueToEdit] - // ); - - // const handleIssueAction = useCallback( - // (issue: IIssue, action: "copy" | "edit" | "delete" | "updateDraft") => { - // if (action === "copy") makeIssueCopy(issue); - // else if (action === "edit") handleEditIssue(issue); - // else if (action === "delete") handleDeleteIssue(issue); - // }, - // [makeIssueCopy, handleEditIssue, handleDeleteIssue] - // ); - - const filtersToDisplay = { ...filters, assignees: null, created_by: null, subscriber: null }; - - const nullFilters = Object.keys(filtersToDisplay).filter( - (key) => filtersToDisplay[key as keyof IIssueFilterOptions] === null - ); - const areFiltersApplied = - Object.keys(filtersToDisplay).length > 0 && nullFilters.length !== Object.keys(filtersToDisplay).length; - - // const isSubscribedIssuesRoute = router.pathname.includes("subscribed"); - // const isMySubscribedIssues = - // (filters.subscriber && filters.subscriber.length > 0 && router.pathname.includes("my-issues")) ?? false; - - // const disableAddIssueOption = isSubscribedIssuesRoute || isMySubscribedIssues; - - return ( - <> - setCreateIssueModal(false)} - prePopulateData={{ - ...preloadedData, - }} - onSubmit={async () => { - mutateMyIssues(); - }} - /> - setEditIssueModal(false)} - data={issueToEdit} - onSubmit={async () => { - mutateMyIssues(); - }} - /> - {issueToDelete && ( - setDeleteIssueModal(false)} - isOpen={deleteIssueModal} - data={issueToDelete} - onSubmit={async () => { - mutateMyIssues(); - }} - /> - )} - {areFiltersApplied && ( - <> -
- - setFilters({ - labels: null, - priority: null, - state_group: null, - start_date: null, - target_date: null, - }) - } - /> -
- {
} - - )} - {/* , - text: "New Issue", - onClick: () => { - const e = new KeyboardEvent("keydown", { - key: "c", - }); - document.dispatchEvent(e); - }, - }, - }} - handleOnDragEnd={handleOnDragEnd} - handleIssueAction={handleIssueAction} - openIssuesListModal={openIssuesListModal ? openIssuesListModal : null} - removeIssue={null} - disableAddIssueOption={disableAddIssueOption} - trashBox={trashBox} - setTrashBox={setTrashBox} - viewProps={{ - displayFilters, - groupedIssues, - isEmpty, - mutateIssues: mutateMyIssues, - params, - properties, - }} - /> */} - - ); -}; diff --git a/web/components/modules/module-card-item.tsx b/web/components/modules/module-card-item.tsx index 620333f8e..b3625df6c 100644 --- a/web/components/modules/module-card-item.tsx +++ b/web/components/modules/module-card-item.tsx @@ -28,8 +28,8 @@ type Props = { export const ModuleCardItem: React.FC = observer((props) => { const { module } = props; - const [editModuleModal, setEditModuleModal] = useState(false); - const [moduleDeleteModal, setModuleDeleteModal] = useState(false); + const [editModal, setEditModal] = useState(false); + const [deleteModal, setDeleteModal] = useState(false); const router = useRouter(); const { workspaceSlug, projectId } = router.query; @@ -38,50 +38,7 @@ export const ModuleCardItem: React.FC = observer((props) => { const { module: moduleStore } = useMobxStore(); - const completionPercentage = ((module.completed_issues + module.cancelled_issues) / module.total_issues) * 100; - - const handleAddToFavorites = () => { - if (!workspaceSlug || !projectId) return; - - moduleStore.addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), module.id).catch(() => { - setToastAlert({ - type: "error", - title: "Error!", - message: "Couldn't add the module to favorites. Please try again.", - }); - }); - }; - - const handleRemoveFromFavorites = () => { - if (!workspaceSlug || !projectId) return; - - moduleStore.removeModuleFromFavorites(workspaceSlug.toString(), projectId.toString(), module.id).catch(() => { - setToastAlert({ - type: "error", - title: "Error!", - message: "Couldn't remove the module from favorites. Please try again.", - }); - }); - }; - - const handleCopyText = () => { - copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/modules/${module.id}`).then(() => { - setToastAlert({ - type: "success", - title: "Link Copied!", - message: "Module link copied to clipboard.", - }); - }); - }; - - const openModuleOverview = () => { - const { query } = router; - - router.push({ - pathname: router.pathname, - query: { ...query, peekModule: module.id }, - }); - }; + const completionPercentage = (module.completed_issues / module.total_issues) * 100; const endDate = new Date(module.target_date ?? ""); const startDate = new Date(module.start_date ?? ""); @@ -101,23 +58,86 @@ export const ModuleCardItem: React.FC = observer((props) => { : `${module.completed_issues}/${module.total_issues} Issues` : "0 Issue"; + const handleAddToFavorites = (e: React.MouseEvent) => { + e.stopPropagation(); + e.preventDefault(); + if (!workspaceSlug || !projectId) return; + + moduleStore.addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), module.id).catch(() => { + setToastAlert({ + type: "error", + title: "Error!", + message: "Couldn't add the module to favorites. Please try again.", + }); + }); + }; + + const handleRemoveFromFavorites = (e: React.MouseEvent) => { + e.stopPropagation(); + e.preventDefault(); + if (!workspaceSlug || !projectId) return; + + moduleStore.removeModuleFromFavorites(workspaceSlug.toString(), projectId.toString(), module.id).catch(() => { + setToastAlert({ + type: "error", + title: "Error!", + message: "Couldn't remove the module from favorites. Please try again.", + }); + }); + }; + + const handleCopyText = (e: React.MouseEvent) => { + e.stopPropagation(); + e.preventDefault(); + copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/modules/${module.id}`).then(() => { + setToastAlert({ + type: "success", + title: "Link Copied!", + message: "Module link copied to clipboard.", + }); + }); + }; + + const handleEditModule = (e: React.MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + setEditModal(true); + }; + + const handleDeleteModule = (e: React.MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + setDeleteModal(true); + }; + + const openModuleOverview = (e: React.MouseEvent) => { + e.stopPropagation(); + e.preventDefault(); + const { query } = router; + + router.push({ + pathname: router.pathname, + query: { ...query, peekModule: module.id }, + }); + }; + return ( <> {workspaceSlug && projectId && ( setEditModuleModal(false)} + isOpen={editModal} + onClose={() => setEditModal(false)} data={module} projectId={projectId.toString()} workspaceSlug={workspaceSlug.toString()} /> )} - setModuleDeleteModal(false)} /> + setDeleteModal(false)} />
- + {module.name}
@@ -128,13 +148,7 @@ export const ModuleCardItem: React.FC = observer((props) => { {moduleStatus.label} )} -
@@ -184,60 +198,28 @@ export const ModuleCardItem: React.FC = observer((props) => {
{module.is_favorite ? ( - ) : ( - )} - { - e.preventDefault(); - e.stopPropagation(); - setEditModuleModal(true); - }} - > + Edit module - { - e.preventDefault(); - e.stopPropagation(); - setModuleDeleteModal(true); - }} - > + Delete module - { - e.preventDefault(); - e.stopPropagation(); - handleCopyText(); - }} - > + Copy module link diff --git a/web/components/modules/module-list-item.tsx b/web/components/modules/module-list-item.tsx index 8b1271cc8..745d15c9d 100644 --- a/web/components/modules/module-list-item.tsx +++ b/web/components/modules/module-list-item.tsx @@ -28,8 +28,8 @@ type Props = { export const ModuleListItem: React.FC = observer((props) => { const { module } = props; - const [editModuleModal, setEditModuleModal] = useState(false); - const [moduleDeleteModal, setModuleDeleteModal] = useState(false); + const [editModal, setEditModal] = useState(false); + const [deleteModal, setDeleteModal] = useState(false); const router = useRouter(); const { workspaceSlug, projectId } = router.query; @@ -40,40 +40,6 @@ export const ModuleListItem: React.FC = observer((props) => { const completionPercentage = ((module.completed_issues + module.cancelled_issues) / module.total_issues) * 100; - const handleAddToFavorites = () => { - if (!workspaceSlug || !projectId) return; - - moduleStore.addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), module.id).catch(() => { - setToastAlert({ - type: "error", - title: "Error!", - message: "Couldn't add the module to favorites. Please try again.", - }); - }); - }; - - const handleRemoveFromFavorites = () => { - if (!workspaceSlug || !projectId) return; - - moduleStore.removeModuleFromFavorites(workspaceSlug.toString(), projectId.toString(), module.id).catch(() => { - setToastAlert({ - type: "error", - title: "Error!", - message: "Couldn't remove the module from favorites. Please try again.", - }); - }); - }; - - const handleCopyText = () => { - copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/modules/${module.id}`).then(() => { - setToastAlert({ - type: "success", - title: "Link Copied!", - message: "Module link copied to clipboard.", - }); - }); - }; - const endDate = new Date(module.target_date ?? ""); const startDate = new Date(module.start_date ?? ""); @@ -87,7 +53,61 @@ export const ModuleListItem: React.FC = observer((props) => { const completedModuleCheck = module.status === "completed" && module.total_issues - module.completed_issues; - const openModuleOverview = () => { + const handleAddToFavorites = (e: React.MouseEvent) => { + e.stopPropagation(); + e.preventDefault(); + if (!workspaceSlug || !projectId) return; + + moduleStore.addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), module.id).catch(() => { + setToastAlert({ + type: "error", + title: "Error!", + message: "Couldn't add the module to favorites. Please try again.", + }); + }); + }; + + const handleRemoveFromFavorites = (e: React.MouseEvent) => { + e.stopPropagation(); + e.preventDefault(); + if (!workspaceSlug || !projectId) return; + + moduleStore.removeModuleFromFavorites(workspaceSlug.toString(), projectId.toString(), module.id).catch(() => { + setToastAlert({ + type: "error", + title: "Error!", + message: "Couldn't remove the module from favorites. Please try again.", + }); + }); + }; + + const handleCopyText = (e: React.MouseEvent) => { + e.stopPropagation(); + e.preventDefault(); + copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/modules/${module.id}`).then(() => { + setToastAlert({ + type: "success", + title: "Link Copied!", + message: "Module link copied to clipboard.", + }); + }); + }; + + const handleEditModule = (e: React.MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + setEditModal(true); + }; + + const handleDeleteModule = (e: React.MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + setDeleteModal(true); + }; + + const openModuleOverview = (e: React.MouseEvent) => { + e.stopPropagation(); + e.preventDefault(); const { query } = router; router.push({ @@ -100,14 +120,14 @@ export const ModuleListItem: React.FC = observer((props) => { <> {workspaceSlug && projectId && ( setEditModuleModal(false)} + isOpen={editModal} + onClose={() => setEditModal(false)} data={module} projectId={projectId.toString()} workspaceSlug={workspaceSlug.toString()} /> )} - setModuleDeleteModal(false)} /> + setDeleteModal(false)} />
@@ -123,18 +143,11 @@ export const ModuleListItem: React.FC = observer((props) => { )} - + {module.name}
-
@@ -171,63 +184,29 @@ export const ModuleListItem: React.FC = observer((props) => { {module.is_favorite ? ( - ) : ( - )} - { - e.preventDefault(); - e.stopPropagation(); - setEditModuleModal(true); - }} - > + Edit module - { - e.preventDefault(); - e.stopPropagation(); - setModuleDeleteModal(true); - }} - > + Delete module - { - e.preventDefault(); - e.stopPropagation(); - handleCopyText(); - }} - > + Copy module link diff --git a/web/components/modules/sidebar.tsx b/web/components/modules/sidebar.tsx index aa5462e08..f931f3fc1 100644 --- a/web/components/modules/sidebar.tsx +++ b/web/components/modules/sidebar.tsx @@ -400,7 +400,7 @@ export const ModuleDetailsSidebar: React.FC = observer((props) => { }} totalIssues={moduleDetails.total_issues} module={moduleDetails} - isPeekModuleDetails={Boolean(peekModule)} + isPeekView={Boolean(peekModule)} />
)} diff --git a/web/components/notifications/notification-card.tsx b/web/components/notifications/notification-card.tsx index 45a2ab2b2..f8a2b1700 100644 --- a/web/components/notifications/notification-card.tsx +++ b/web/components/notifications/notification-card.tsx @@ -11,7 +11,7 @@ import { ArchiveIcon, CustomMenu, Tooltip } from "@plane/ui"; import { ArchiveRestore, Clock, MessageSquare, User2 } from "lucide-react"; // helper -import { stripHTML, replaceUnderscoreIfSnakeCase, truncateText } from "helpers/string.helper"; +import { replaceUnderscoreIfSnakeCase, truncateText, stripAndTruncateHTML } from "helpers/string.helper"; import { formatDateDistance, render12HourFormatTime, @@ -115,10 +115,10 @@ export const NotificationCard: React.FC = (props) => { renderShortDateWithYearFormat(notification.data.issue_activity.new_value) ) : notification.data.issue_activity.field === "attachment" ? ( "the issue" - ) : stripHTML(notification.data.issue_activity.new_value).length > 55 ? ( - stripHTML(notification.data.issue_activity.new_value).slice(0, 50) + "..." + ) : notification.data.issue_activity.field === "description" ? ( + stripAndTruncateHTML(notification.data.issue_activity.new_value, 55) ) : ( - stripHTML(notification.data.issue_activity.new_value) + notification.data.issue_activity.new_value ) ) : ( diff --git a/web/components/onboarding/workspace.tsx b/web/components/onboarding/workspace.tsx index b0de35d78..8cafdde43 100644 --- a/web/components/onboarding/workspace.tsx +++ b/web/components/onboarding/workspace.tsx @@ -48,7 +48,6 @@ export const Workspace: React.FC = ({ finishOnboarding, stepChange, updat onSubmit={completeStep} defaultValues={defaultValues} setDefaultValues={setDefaultValues} - user={user} primaryButtonText={{ loading: "Creating...", default: "Continue", diff --git a/web/components/profile/index.ts b/web/components/profile/index.ts index 247a10dc6..2573da1b2 100644 --- a/web/components/profile/index.ts +++ b/web/components/profile/index.ts @@ -1,6 +1,5 @@ export * from "./overview"; export * from "./navbar"; -export * from "./profile-issues-view-options"; export * from "./profile-issues-view"; export * from "./sidebar"; diff --git a/web/components/profile/profile-issues-view-options.tsx b/web/components/profile/profile-issues-view-options.tsx deleted file mode 100644 index 95caa002d..000000000 --- a/web/components/profile/profile-issues-view-options.tsx +++ /dev/null @@ -1,282 +0,0 @@ -import React from "react"; - -import { useRouter } from "next/router"; - -// headless ui -import { Popover, Transition } from "@headlessui/react"; -// hooks -import useProfileIssues from "hooks/use-profile-issues"; -import useEstimateOption from "hooks/use-estimate-option"; -// components -import { MyIssuesSelectFilters } from "components/issues"; -// ui -import { CustomMenu, ToggleSwitch, Tooltip } from "@plane/ui"; -// icons -import { ChevronDown, Kanban, List } from "lucide-react"; -// helpers -import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper"; -import { checkIfArraysHaveSameElements } from "helpers/array.helper"; -// types -import { Properties, TIssueLayouts } from "types"; -// constants -import { ISSUE_GROUP_BY_OPTIONS, ISSUE_ORDER_BY_OPTIONS, ISSUE_FILTER_OPTIONS } from "constants/issue"; - -const issueViewOptions: { type: TIssueLayouts; Icon: any }[] = [ - { - type: "list", - Icon: List, - }, - { - type: "kanban", - Icon: Kanban, - }, -]; - -export const ProfileIssuesViewOptions: React.FC = () => { - const router = useRouter(); - const { workspaceSlug, userId } = router.query; - - const { displayFilters, setDisplayFilters, filters, displayProperties, setProperties, setFilters } = useProfileIssues( - workspaceSlug?.toString(), - userId?.toString() - ); - - const { isEstimateActive } = useEstimateOption(); - - if ( - !router.pathname.includes("assigned") && - !router.pathname.includes("created") && - !router.pathname.includes("subscribed") - ) - return null; - - return ( -
-
- {issueViewOptions.map((option) => ( - {replaceUnderscoreIfSnakeCase(option.type)} Layout} - position="bottom" - > - - - ))} -
- { - const key = option.key as keyof typeof filters; - - if (key === "start_date" || key === "target_date") { - const valueExists = checkIfArraysHaveSameElements(filters?.[key] ?? [], option.value); - - setFilters({ - [key]: valueExists ? null : option.value, - }); - } else { - const valueExists = filters[key]?.includes(option.value); - - if (valueExists) - setFilters({ - [option.key]: ((filters[key] ?? []) as any[])?.filter((val) => val !== option.value), - }); - else - setFilters({ - [option.key]: [...((filters[key] ?? []) as any[]), option.value], - }); - } - }} - direction="left" - height="rg" - /> - - {({ open }) => ( - <> - - Display - - - - -
-
- {displayFilters?.layout !== "calendar" && displayFilters?.layout !== "spreadsheet" && ( - <> -
-

Group by

-
- option.key === displayFilters?.group_by) - ?.title ?? "Select" - } - className="!w-full" - buttonClassName="w-full" - > - {ISSUE_GROUP_BY_OPTIONS.map((option) => { - if (displayFilters?.layout === "kanban" && option.key === null) return null; - if (option.key === "state" || option.key === "created_by" || option.key === "assignees") - return null; - - return ( - setDisplayFilters({ group_by: option.key })} - > - {option.title} - - ); - })} - -
-
-
-

Order by

-
- option.key === displayFilters?.order_by) - ?.title ?? "Select" - } - className="!w-full" - buttonClassName="w-full" - > - {ISSUE_ORDER_BY_OPTIONS.map((option) => { - if (displayFilters?.group_by === "priority" && option.key === "priority") return null; - if (option.key === "sort_order") return null; - - return ( - { - setDisplayFilters({ order_by: option.key }); - }} - > - {option.title} - - ); - })} - -
-
- - )} -
-

Issue type

-
- - {ISSUE_FILTER_OPTIONS.find((option) => option.key === displayFilters?.type)?.title ?? - "Select"} - - } - className="!w-full" - buttonClassName="w-full" - > - {ISSUE_FILTER_OPTIONS.map((option) => ( - - setDisplayFilters({ - type: option.key, - }) - } - > - {option.title} - - ))} - -
-
- - {displayFilters?.layout !== "calendar" && displayFilters?.layout !== "spreadsheet" && ( - <> -
-

Show empty states

-
- - setDisplayFilters({ - show_empty_groups: !displayFilters?.show_empty_groups, - }) - } - /> -
-
- - )} -
- -
-

Display Properties

-
- {displayProperties && - Object.keys(displayProperties).map((key) => { - if (key === "estimate" && !isEstimateActive) return null; - - if ( - displayFilters?.layout === "spreadsheet" && - (key === "attachment_count" || key === "link" || key === "sub_issue_count") - ) - return null; - - if ( - displayFilters?.layout !== "spreadsheet" && - (key === "created_on" || key === "updated_on") - ) - return null; - - return ( - - ); - })} -
-
-
- - - - )} - -
- ); -}; diff --git a/web/components/workspace/confirm-workspace-member-remove.tsx b/web/components/workspace/confirm-workspace-member-remove.tsx index 2cf3c27af..4b057f1de 100644 --- a/web/components/workspace/confirm-workspace-member-remove.tsx +++ b/web/components/workspace/confirm-workspace-member-remove.tsx @@ -1,29 +1,37 @@ import React, { useState } from "react"; -// headless ui +import { observer } from "mobx-react-lite"; import { Dialog, Transition } from "@headlessui/react"; -// icons import { AlertTriangle } from "lucide-react"; +// mobx store +import { useMobxStore } from "lib/mobx/store-provider"; // ui import { Button } from "@plane/ui"; type Props = { isOpen: boolean; onClose: () => void; - handleDelete: () => void; + onSubmit: () => Promise; data?: any; }; -const ConfirmWorkspaceMemberRemove: React.FC = ({ isOpen, onClose, data, handleDelete }) => { - const [isDeleteLoading, setIsDeleteLoading] = useState(false); +export const ConfirmWorkspaceMemberRemove: React.FC = observer((props) => { + const { isOpen, onClose, data, onSubmit } = props; + + const [isRemoving, setIsRemoving] = useState(false); + + const { user: userStore } = useMobxStore(); + const user = userStore.currentUser; const handleClose = () => { onClose(); - setIsDeleteLoading(false); + setIsRemoving(false); }; const handleDeletion = async () => { - setIsDeleteLoading(true); - handleDelete(); + setIsRemoving(true); + + await onSubmit(); + handleClose(); }; @@ -61,14 +69,21 @@ const ConfirmWorkspaceMemberRemove: React.FC = ({ isOpen, onClose, data,
- Remove {data?.display_name}? + {user?.id === data?.memberId ? "Leave workspace?" : `Remove ${data?.display_name}?`}
-

- Are you sure you want to remove member-{" "} - {data?.display_name}? They will no longer have access to - this workspace. This action cannot be undone. -

+ {user?.id === data?.memberId ? ( +

+ Are you sure you want to leave the workspace? You will no longer have access to this + workspace. This action cannot be undone. +

+ ) : ( +

+ Are you sure you want to remove member-{" "} + {data?.display_name}? They will no longer have access to + this workspace. This action cannot be undone. +

+ )}
@@ -77,8 +92,8 @@ const ConfirmWorkspaceMemberRemove: React.FC = ({ isOpen, onClose, data, -
@@ -88,6 +103,4 @@ const ConfirmWorkspaceMemberRemove: React.FC = ({ isOpen, onClose, data, ); -}; - -export default ConfirmWorkspaceMemberRemove; +}); diff --git a/web/components/workspace/create-workspace-form.tsx b/web/components/workspace/create-workspace-form.tsx index 658e0cedb..584292422 100644 --- a/web/components/workspace/create-workspace-form.tsx +++ b/web/components/workspace/create-workspace-form.tsx @@ -1,7 +1,10 @@ import { Dispatch, SetStateAction, useEffect, useState, FC } from "react"; -import { mutate } from "swr"; import { useRouter } from "next/router"; +import { observer } from "mobx-react-lite"; import { Controller, useForm } from "react-hook-form"; +import { mutate } from "swr"; +// mobx store +import { useMobxStore } from "lib/mobx/store-provider"; // services import { WorkspaceService } from "services/workspace.service"; // hooks @@ -9,7 +12,7 @@ import useToast from "hooks/use-toast"; // ui import { Button, CustomSelect, Input } from "@plane/ui"; // types -import { IUser, IWorkspace } from "types"; +import { IWorkspace } from "types"; // fetch-keys import { USER_WORKSPACES } from "constants/fetch-keys"; // constants @@ -23,7 +26,6 @@ type Props = { organization_size: string; }; setDefaultValues: Dispatch>; - user: IUser | undefined; secondaryButton?: React.ReactNode; primaryButtonText?: { loading: string; @@ -49,23 +51,27 @@ const restrictedUrls = [ const workspaceService = new WorkspaceService(); -export const CreateWorkspaceForm: FC = ({ - onSubmit, - defaultValues, - setDefaultValues, - user, - secondaryButton, - primaryButtonText = { - loading: "Creating...", - default: "Create Workspace", - }, -}) => { +export const CreateWorkspaceForm: FC = observer((props) => { + const { + onSubmit, + defaultValues, + setDefaultValues, + secondaryButton, + primaryButtonText = { + loading: "Creating...", + default: "Create Workspace", + }, + } = props; + const [slugError, setSlugError] = useState(false); const [invalidSlug, setInvalidSlug] = useState(false); - const { setToastAlert } = useToast(); const router = useRouter(); + const { workspace: workspaceStore } = useMobxStore(); + + const { setToastAlert } = useToast(); + const { handleSubmit, control, @@ -81,8 +87,8 @@ export const CreateWorkspaceForm: FC = ({ if (res.status === true && !restrictedUrls.includes(formData.slug)) { setSlugError(false); - await workspaceService - .createWorkspace(formData, user) + await workspaceStore + .createWorkspace(formData) .then(async (res) => { setToastAlert({ type: "success", @@ -157,7 +163,7 @@ export const CreateWorkspaceForm: FC = ({
-
+
{window && window.location.host}/ = ({ onChange={onChange} label={ ORGANIZATION_SIZE.find((c) => c === value) ?? ( - Select organization size + Select organization size ) } + buttonClassName="!border-[0.5px] !border-custom-border-200 !shadow-none" input width="w-full" > @@ -232,4 +239,4 @@ export const CreateWorkspaceForm: FC = ({
); -}; +}); diff --git a/web/components/workspace/delete-workspace-modal.tsx b/web/components/workspace/delete-workspace-modal.tsx index 14ab211ce..4dcbebafb 100644 --- a/web/components/workspace/delete-workspace-modal.tsx +++ b/web/components/workspace/delete-workspace-modal.tsx @@ -1,31 +1,22 @@ import React from "react"; - import { useRouter } from "next/router"; - -import { mutate } from "swr"; - -// react-hook-form +import { observer } from "mobx-react-lite"; import { Controller, useForm } from "react-hook-form"; -// headless ui import { Dialog, Transition } from "@headlessui/react"; -// services -import { WorkspaceService } from "services/workspace.service"; +import { AlertTriangle } from "lucide-react"; +// mobx store +import { useMobxStore } from "lib/mobx/store-provider"; // hooks import useToast from "hooks/use-toast"; -// icons -import { AlertTriangle } from "lucide-react"; // ui import { Button, Input } from "@plane/ui"; // types -import type { IUser, IWorkspace } from "types"; -// fetch-keys -import { USER_WORKSPACES } from "constants/fetch-keys"; +import type { IWorkspace } from "types"; type Props = { isOpen: boolean; data: IWorkspace | null; onClose: () => void; - user: IUser | undefined; }; const defaultValues = { @@ -33,12 +24,13 @@ const defaultValues = { confirmDelete: "", }; -// services -const workspaceService = new WorkspaceService(); +export const DeleteWorkspaceModal: React.FC = observer((props) => { + const { isOpen, data, onClose } = props; -export const DeleteWorkspaceModal: React.FC = ({ isOpen, data, onClose, user }) => { const router = useRouter(); + const { workspace: workspaceStore } = useMobxStore(); + const { setToastAlert } = useToast(); const { @@ -63,15 +55,13 @@ export const DeleteWorkspaceModal: React.FC = ({ isOpen, data, onClose, u const onSubmit = async () => { if (!data || !canDelete) return; - await workspaceService - .deleteWorkspace(data.slug, user) + await workspaceStore + .deleteWorkspace(data.slug) .then(() => { handleClose(); router.push("/"); - mutate(USER_WORKSPACES, (prevData) => prevData?.filter((workspace) => workspace.id !== data.id)); - setToastAlert({ type: "success", title: "Success!", @@ -196,4 +186,4 @@ export const DeleteWorkspaceModal: React.FC = ({ isOpen, data, onClose, u ); -}; +}); diff --git a/web/components/workspace/index.ts b/web/components/workspace/index.ts index 9fe2934b0..332ea6c60 100644 --- a/web/components/workspace/index.ts +++ b/web/components/workspace/index.ts @@ -1,13 +1,17 @@ +export * from "./settings"; export * from "./views"; export * from "./activity-graph"; export * from "./completed-issues-graph"; +export * from "./confirm-workspace-member-remove"; export * from "./create-workspace-form"; export * from "./delete-workspace-modal"; export * from "./help-section"; export * from "./issues-list"; export * from "./issues-pie-chart"; export * from "./issues-stats"; +export * from "./member-select"; +export * from "./send-workspace-invitation-modal"; export * from "./sidebar-dropdown"; export * from "./sidebar-menu"; export * from "./sidebar-quick-action"; -export * from "./member-select"; +export * from "./single-invitation"; diff --git a/web/components/workspace/send-workspace-invitation-modal.tsx b/web/components/workspace/send-workspace-invitation-modal.tsx index 1fa4f002a..abeacd43d 100644 --- a/web/components/workspace/send-workspace-invitation-modal.tsx +++ b/web/components/workspace/send-workspace-invitation-modal.tsx @@ -14,14 +14,15 @@ import { Plus, X } from "lucide-react"; import { IUser } from "types"; // constants import { ROLE } from "constants/workspace"; +// fetch-keys import { WORKSPACE_INVITATIONS } from "constants/fetch-keys"; type Props = { isOpen: boolean; - setIsOpen: React.Dispatch>; - workspace_slug: string; + onClose: () => void; + workspaceSlug: string; user: IUser | undefined; - onSuccess: () => void; + onSuccess?: () => Promise; }; type EmailRole = { @@ -44,8 +45,9 @@ const defaultValues: FormValues = { const workspaceService = new WorkspaceService(); -const SendWorkspaceInvitationModal: React.FC = (props) => { - const { isOpen, setIsOpen, workspace_slug, user, onSuccess } = props; +export const SendWorkspaceInvitationModal: React.FC = (props) => { + const { isOpen, onClose, workspaceSlug, user, onSuccess } = props; + const { control, reset, @@ -61,42 +63,38 @@ const SendWorkspaceInvitationModal: React.FC = (props) => { const { setToastAlert } = useToast(); const handleClose = () => { - setIsOpen(false); + onClose(); + const timeout = setTimeout(() => { reset(defaultValues); clearTimeout(timeout); - }, 500); + }, 350); }; const onSubmit = async (formData: FormValues) => { - if (!workspace_slug) return; - - const payload = { ...formData }; + if (!workspaceSlug) return; await workspaceService - .inviteWorkspace(workspace_slug, payload, user) + .inviteWorkspace(workspaceSlug, formData, user) .then(async () => { - setIsOpen(false); + if (onSuccess) await onSuccess(); + handleClose(); + setToastAlert({ type: "success", title: "Success!", message: "Invitations sent successfully.", }); - onSuccess(); }) - .catch((err) => { + .catch((err) => setToastAlert({ type: "error", title: "Error!", - message: `${err.error}`, - }); - console.log(err); - }) - .finally(() => { - reset(defaultValues); - mutate(WORKSPACE_INVITATIONS); - }); + message: `${err.error ?? "Something went wrong. Please try again."}`, + }) + ) + .finally(() => mutate(WORKSPACE_INVITATIONS)); }; const appendField = () => { @@ -104,9 +102,7 @@ const SendWorkspaceInvitationModal: React.FC = (props) => { }; useEffect(() => { - if (fields.length === 0) { - append([{ email: "", role: 15 }]); - } + if (fields.length === 0) append([{ email: "", role: 15 }]); }, [fields, append]); return ( @@ -249,5 +245,3 @@ const SendWorkspaceInvitationModal: React.FC = (props) => { ); }; - -export default SendWorkspaceInvitationModal; diff --git a/web/components/workspace/settings/index.ts b/web/components/workspace/settings/index.ts new file mode 100644 index 000000000..fb7aa7526 --- /dev/null +++ b/web/components/workspace/settings/index.ts @@ -0,0 +1,3 @@ +export * from "./members-list-item"; +export * from "./members-list"; +export * from "./workspace-details"; diff --git a/web/components/workspace/settings/members-list-item.tsx b/web/components/workspace/settings/members-list-item.tsx new file mode 100644 index 000000000..df2defd5b --- /dev/null +++ b/web/components/workspace/settings/members-list-item.tsx @@ -0,0 +1,202 @@ +import { useState } from "react"; +import Link from "next/link"; +import { useRouter } from "next/router"; +// mobx store +import { useMobxStore } from "lib/mobx/store-provider"; +// services +import { WorkspaceService } from "services/workspace.service"; +// hooks +import useToast from "hooks/use-toast"; +// components +import { ConfirmWorkspaceMemberRemove } from "components/workspace"; +// ui +import { CustomSelect, Tooltip } from "@plane/ui"; +// icons +import { ChevronDown, XCircle } from "lucide-react"; +// constants +import { ROLE } from "constants/workspace"; + +type Props = { + member: { + id: string; + memberId: string; + avatar: string; + first_name: string; + last_name: string; + email: string | undefined; + display_name: string; + role: 5 | 10 | 15 | 20; + status: boolean; + member: boolean; + accountCreated: boolean; + }; +}; + +// services +const workspaceService = new WorkspaceService(); + +export const WorkspaceMembersListItem: React.FC = (props) => { + const { member } = props; + + const [removeMemberModal, setRemoveMemberModal] = useState(false); + + const router = useRouter(); + const { workspaceSlug } = router.query; + + const { setToastAlert } = useToast(); + + const { workspace: workspaceStore, user: userStore } = useMobxStore(); + + const user = userStore.workspaceMemberInfo; + const isAdmin = userStore.workspaceMemberInfo?.role === 20; + + const handleRemoveMember = async () => { + if (!workspaceSlug) return; + + if (member.member) + await workspaceStore.removeMember(workspaceSlug.toString(), member.id).catch((err) => { + const error = err?.error; + setToastAlert({ + type: "error", + title: "Error", + message: error || "Something went wrong", + }); + }); + else + await workspaceService + .deleteWorkspaceInvitations(workspaceSlug.toString(), member.id) + .then(() => { + setToastAlert({ + type: "success", + title: "Success", + message: "Member removed successfully", + }); + }) + .catch((err) => { + const error = err?.error; + + setToastAlert({ + type: "error", + title: "Error", + message: error || "Something went wrong", + }); + }); + }; + + if (!user) return null; + + return ( + <> + setRemoveMemberModal(false)} + data={member} + onSubmit={handleRemoveMember} + /> +
+
+ {member.avatar && member.avatar !== "" ? ( + + + {member.display_name + + + ) : ( + + + {(member.email ?? member.display_name ?? "?")[0]} + + + )} +
+ {member.member ? ( + + + {member.first_name} {member.last_name} + + + ) : ( +

{member.display_name || member.email}

+ )} +

{member.email ?? member.display_name}

+
+
+
+ {!member?.status && ( +
+

Pending

+
+ )} + {member?.status && !member?.accountCreated && ( +
+

Account not created

+
+ )} + + + {ROLE[member.role as keyof typeof ROLE]} + + {member.memberId !== user.member && ( + + + + )} +
+ } + value={member.role} + onChange={(value: 5 | 10 | 15 | 20 | undefined) => { + if (!workspaceSlug) return; + + workspaceStore + .updateMember(workspaceSlug.toString(), member.id, { + role: value, + }) + .catch(() => { + setToastAlert({ + type: "error", + title: "Error!", + message: "An error occurred while updating member role. Please try again.", + }); + }); + }} + disabled={ + member.memberId === user.member || !member.status || (user.role !== 20 && user.role < member.role) + } + placement="bottom-end" + > + {Object.keys(ROLE).map((key) => { + if (user.role !== 20 && user.role < parseInt(key)) return null; + + return ( + + <>{ROLE[parseInt(key) as keyof typeof ROLE]} + + ); + })} + + {isAdmin && ( + + + + )} +
+
+ + ); +}; diff --git a/web/components/workspace/settings/members-list.tsx b/web/components/workspace/settings/members-list.tsx new file mode 100644 index 000000000..02c9bd6e0 --- /dev/null +++ b/web/components/workspace/settings/members-list.tsx @@ -0,0 +1,75 @@ +import { useRouter } from "next/router"; +import { observer } from "mobx-react-lite"; +import useSWR from "swr"; +// mobx store +import { useMobxStore } from "lib/mobx/store-provider"; +// services +import { WorkspaceService } from "services/workspace.service"; +// components +import { WorkspaceMembersListItem } from "components/workspace"; +// ui +import { Loader } from "@plane/ui"; + +const workspaceService = new WorkspaceService(); + +export const WorkspaceMembersList: React.FC = observer(() => { + const router = useRouter(); + const { workspaceSlug } = router.query; + + const { workspace: workspaceStore, user: userStore } = useMobxStore(); + + const workspaceMembers = workspaceStore.workspaceMembers; + const user = userStore.workspaceMemberInfo; + + const { data: workspaceInvitations } = useSWR( + workspaceSlug ? `WORKSPACE_INVITATIONS_${workspaceSlug.toString()}` : null, + workspaceSlug ? () => workspaceService.workspaceInvitations(workspaceSlug.toString()) : null + ); + + const members = [ + ...(workspaceInvitations?.map((item) => ({ + id: item.id, + memberId: item.id, + avatar: "", + first_name: item.email, + last_name: "", + email: item.email, + display_name: item.email, + role: item.role, + status: item.accepted, + member: false, + accountCreated: item.accepted, + })) || []), + ...(workspaceMembers?.map((item) => ({ + id: item.id, + memberId: item.member?.id, + avatar: item.member?.avatar, + first_name: item.member?.first_name, + last_name: item.member?.last_name, + email: item.member?.email, + display_name: item.member?.display_name, + role: item.role, + status: true, + member: true, + accountCreated: true, + })) || []), + ]; + + if (!workspaceMembers || !workspaceInvitations || !user) + return ( + + + + + + + ); + + return ( +
+ {members.length > 0 + ? members.map((member) => ) + : null} +
+ ); +}); diff --git a/web/components/workspace/settings/workspace-details.tsx b/web/components/workspace/settings/workspace-details.tsx new file mode 100644 index 000000000..517a0f058 --- /dev/null +++ b/web/components/workspace/settings/workspace-details.tsx @@ -0,0 +1,306 @@ +import { useEffect, useState } from "react"; +import { observer } from "mobx-react-lite"; +import { Controller, useForm } from "react-hook-form"; +import { Disclosure, Transition } from "@headlessui/react"; +import { ChevronDown, ChevronUp, Pencil } from "lucide-react"; +// mobx store +import { useMobxStore } from "lib/mobx/store-provider"; +// services +import { FileService } from "services/file.service"; +// hooks +import useToast from "hooks/use-toast"; +// components +import { DeleteWorkspaceModal } from "components/workspace"; +import { ImageUploadModal } from "components/core"; +// ui +import { Button, CustomSelect, Input, Spinner } from "@plane/ui"; +// types +import { IWorkspace } from "types"; +// constants +import { ORGANIZATION_SIZE } from "constants/workspace"; + +const defaultValues: Partial = { + name: "", + url: "", + organization_size: "2-10", + logo: null, +}; + +// services +const fileService = new FileService(); + +export const WorkspaceDetails: React.FC = observer(() => { + const [deleteWorkspaceModal, setDeleteWorkspaceModal] = useState(false); + const [isImageUploading, setIsImageUploading] = useState(false); + const [isImageRemoving, setIsImageRemoving] = useState(false); + const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false); + + const { workspace: workspaceStore, user: userStore } = useMobxStore(); + const activeWorkspace = workspaceStore.currentWorkspace; + + const { setToastAlert } = useToast(); + + const { + handleSubmit, + control, + reset, + watch, + setValue, + formState: { errors, isSubmitting }, + } = useForm({ + defaultValues: { ...defaultValues, ...activeWorkspace }, + }); + + const onSubmit = async (formData: IWorkspace) => { + if (!activeWorkspace) return; + + const payload: Partial = { + logo: formData.logo, + name: formData.name, + organization_size: formData.organization_size, + }; + + await workspaceStore + .updateWorkspace(activeWorkspace.slug, payload) + .then(() => + setToastAlert({ + title: "Success", + type: "success", + message: "Workspace updated successfully", + }) + ) + .catch((err) => console.error(err)); + }; + + const handleDelete = (url: string | null | undefined) => { + if (!activeWorkspace || !url) return; + + setIsImageRemoving(true); + + fileService.deleteFile(activeWorkspace.id, url).then(() => { + workspaceStore + .updateWorkspace(activeWorkspace.slug, { logo: "" }) + .then(() => { + setToastAlert({ + type: "success", + title: "Success!", + message: "Workspace picture removed successfully.", + }); + setIsImageUploadModalOpen(false); + }) + .catch(() => { + setToastAlert({ + type: "error", + title: "Error!", + message: "There was some error in deleting your profile picture. Please try again.", + }); + }) + .finally(() => setIsImageRemoving(false)); + }); + }; + + useEffect(() => { + if (activeWorkspace) reset({ ...activeWorkspace }); + }, [activeWorkspace, reset]); + + const isAdmin = userStore.workspaceMemberInfo?.role === 20; + + if (!activeWorkspace) + return ( +
+ +
+ ); + + return ( + <> + setDeleteWorkspaceModal(false)} + data={activeWorkspace} + /> + setIsImageUploadModalOpen(false)} + isRemoving={isImageRemoving} + handleDelete={() => handleDelete(activeWorkspace?.logo)} + onSuccess={(imageUrl) => { + setIsImageUploading(true); + setValue("logo", imageUrl); + setIsImageUploadModalOpen(false); + handleSubmit(onSubmit)().then(() => setIsImageUploading(false)); + }} + value={watch("logo")} + /> +
+
+
+ +
+
+

{watch("name")}

+ {`${ + typeof window !== "undefined" && window.location.origin.replace("http://", "").replace("https://", "") + }/${activeWorkspace.slug}`} +
+ +
+
+
+ +
+
+
+

Workspace Name

+ ( + + )} + /> +
+ +
+

Company Size

+ ( + c === value) ?? "Select organization size"} + width="w-full" + buttonClassName="!border-[0.5px] !border-custom-border-200 !shadow-none" + input + disabled={!isAdmin} + > + {ORGANIZATION_SIZE.map((item) => ( + + {item} + + ))} + + )} + /> +
+ +
+

Workspace URL

+ ( + + )} + /> +
+
+ +
+ +
+
+ {isAdmin && ( + + {({ open }) => ( +
+ + Delete Workspace + {/* */} + {open ? : } + + + + +
+ + The danger zone of the workspace delete page is a critical area that requires careful + consideration and attention. When deleting a workspace, all of the data and resources within + that workspace will be permanently removed and cannot be recovered. + +
+ +
+
+ + +
+ )} + + )} +
+ + ); +}); diff --git a/web/constants/cycle.tsx b/web/constants/cycle.tsx index a2433d70c..78d1e0a54 100644 --- a/web/constants/cycle.tsx +++ b/web/constants/cycle.tsx @@ -37,3 +37,40 @@ export const CYCLE_VIEWS = [ icon: , }, ]; + +export const CYCLE_STATUS: { + label: string; + value: "current" | "upcoming" | "completed" | "draft"; + color: string; + textColor: string; + bgColor: string; +}[] = [ + { + label: "day left", + value: "current", + color: "#F59E0B", + textColor: "text-amber-500", + bgColor: "bg-amber-50", + }, + { + label: "Yet to start", + value: "upcoming", + color: "#3F76FF", + textColor: "text-blue-500", + bgColor: "bg-indigo-50", + }, + { + label: "Completed", + value: "completed", + color: "#16A34A", + textColor: "text-green-600", + bgColor: "bg-green-50", + }, + { + label: "Draft", + value: "draft", + color: "#525252", + textColor: "text-custom-text-300", + bgColor: "bg-custom-background-90", + }, +]; diff --git a/web/contexts/workspace-member.context.tsx b/web/contexts/workspace-member.context.tsx index d312751fe..e08e09399 100644 --- a/web/contexts/workspace-member.context.tsx +++ b/web/contexts/workspace-member.context.tsx @@ -26,6 +26,7 @@ type Props = { // services const workspaceService = new WorkspaceService(); +// TODO: remove this context export const WorkspaceMemberProvider: React.FC = (props) => { const { children } = props; @@ -40,7 +41,7 @@ export const WorkspaceMemberProvider: React.FC = (props) => { const loading = !memberDetails && !error; return ( - + {children} ); diff --git a/web/helpers/string.helper.ts b/web/helpers/string.helper.ts index 6596f1d69..29f414200 100644 --- a/web/helpers/string.helper.ts +++ b/web/helpers/string.helper.ts @@ -111,11 +111,20 @@ export const getFirstCharacters = (str: string) => { */ export const stripHTML = (html: string) => { - const tmp = document.createElement("DIV"); - tmp.innerHTML = html; - return tmp.textContent || tmp.innerText || ""; + const strippedText = html.replace(/]*>[\s\S]*?<\/script>/gi, ""); // Remove script tags + return strippedText.replace(/<[^>]*>/g, ""); // Remove all other HTML tags }; +/** + * + * @example: + * const html = "

Some text

"; + * const text = stripAndTruncateHTML(html); + * console.log(text); // Some text + */ + +export const stripAndTruncateHTML = (html: string, length: number = 55) => truncateText(stripHTML(html), length); + /** * @description: This function return number count in string if number is more than 100 then it will return 99+ * @param {number} number diff --git a/web/hooks/my-issues/use-my-issues-filter.tsx b/web/hooks/my-issues/use-my-issues-filter.tsx index f9b54b8ce..06fe5ef5e 100644 --- a/web/hooks/my-issues/use-my-issues-filter.tsx +++ b/web/hooks/my-issues/use-my-issues-filter.tsx @@ -6,7 +6,7 @@ import { WorkspaceService } from "services/workspace.service"; import { IIssueDisplayFilterOptions, IIssueFilterOptions, - IWorkspaceMember, + IWorkspaceMemberMe, IWorkspaceViewProps, Properties, } from "types"; @@ -66,7 +66,7 @@ const useMyIssuesFilters = (workspaceSlug: string | undefined) => { const oldData = { ...myWorkspace }; - mutate( + mutate( WORKSPACE_MEMBERS_ME(workspaceSlug.toString()), (prevData) => { if (!prevData) return; diff --git a/web/layouts/auth-layout/workspace-wrapper.tsx b/web/layouts/auth-layout/workspace-wrapper.tsx index e1ae8e4db..e46515bf7 100644 --- a/web/layouts/auth-layout/workspace-wrapper.tsx +++ b/web/layouts/auth-layout/workspace-wrapper.tsx @@ -12,6 +12,8 @@ export interface IWorkspaceAuthWrapper { children: ReactNode; } +const HIGHER_ROLES = [20, 15]; + export const WorkspaceAuthWrapper: FC = observer((props) => { const { children } = props; // store @@ -22,7 +24,7 @@ export const WorkspaceAuthWrapper: FC = observer((props) // fetching all workspaces useSWR(`USER_WORKSPACES_LIST`, () => workspaceStore.fetchWorkspaces()); // fetching user workspace information - useSWR( + const { data: workspaceMemberInfo } = useSWR( workspaceSlug ? `WORKSPACE_MEMBERS_ME_${workspaceSlug}` : null, workspaceSlug ? () => userStore.fetchUserWorkspaceInfo(workspaceSlug.toString()) : null ); @@ -33,8 +35,12 @@ export const WorkspaceAuthWrapper: FC = observer((props) ); // fetch workspace members useSWR( - workspaceSlug ? `WORKSPACE_MEMBERS_${workspaceSlug}` : null, - workspaceSlug ? () => workspaceStore.fetchWorkspaceMembers(workspaceSlug.toString()) : null + workspaceSlug && workspaceMemberInfo && HIGHER_ROLES.includes(workspaceMemberInfo.role) + ? `WORKSPACE_MEMBERS_${workspaceSlug}` + : null, + workspaceSlug && workspaceMemberInfo && HIGHER_ROLES.includes(workspaceMemberInfo.role) + ? () => workspaceStore.fetchWorkspaceMembers(workspaceSlug.toString()) + : null ); // fetch workspace labels useSWR( diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx index 6f8384297..e96038b7f 100644 --- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx +++ b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx @@ -25,7 +25,7 @@ const SingleCycle: React.FC = () => { const { cycle: cycleStore } = useMobxStore(); - const { storedValue } = useLocalStorage("cycle_sidebar_collapsed", "false"); + const { setValue, storedValue } = useLocalStorage("cycle_sidebar_collapsed", "false"); const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false; const { error } = useSWR( @@ -35,6 +35,10 @@ const SingleCycle: React.FC = () => { : null ); + const toggleSidebar = () => { + setValue(`${!isSidebarCollapsed}`); + }; + // TODO: add this function to bulk add issues to cycle // const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => { // if (!workspaceSlug || !projectId) return; @@ -75,11 +79,21 @@ const SingleCycle: React.FC = () => { /> ) : ( <> -
-
+
+
- {cycleId && } + {cycleId && !isSidebarCollapsed && ( +
+ +
+ )}
)} diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx index 5fb79fb36..5f9988e52 100644 --- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx +++ b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx @@ -29,7 +29,11 @@ const ProjectCyclesPage: NextPage = observer(() => { const { project: projectStore, cycle: cycleStore } = useMobxStore(); // router const router = useRouter(); - const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string }; + const { workspaceSlug, projectId, peekCycle } = router.query as { + workspaceSlug: string; + projectId: string; + peekCycle: string; + }; // fetching project details useSWR( workspaceSlug && projectId ? `PROJECT_DETAILS_${projectId}` : null, @@ -150,13 +154,14 @@ const ProjectCyclesPage: NextPage = observer(() => {
- + {cycleView && cycleLayout && workspaceSlug && projectId && ( )} @@ -165,35 +170,38 @@ const ProjectCyclesPage: NextPage = observer(() => { - + {cycleView && cycleLayout && workspaceSlug && projectId && ( )} - + {cycleView && cycleLayout && workspaceSlug && projectId && ( )} - + {cycleView && cycleLayout && workspaceSlug && projectId && ( )} diff --git a/web/pages/[workspaceSlug]/settings/index.tsx b/web/pages/[workspaceSlug]/settings/index.tsx index 5ccd4ed9e..580c45942 100644 --- a/web/pages/[workspaceSlug]/settings/index.tsx +++ b/web/pages/[workspaceSlug]/settings/index.tsx @@ -1,362 +1,18 @@ -import React, { useEffect, useState } from "react"; - -import { useRouter } from "next/router"; - -import useSWR, { mutate } from "swr"; - -// react-hook-form -import { Controller, useForm } from "react-hook-form"; -// services -import { WorkspaceService } from "services/workspace.service"; -import { FileService } from "services/file.service"; -// hooks -import useToast from "hooks/use-toast"; -import useUserAuth from "hooks/use-user-auth"; // layouts import { AppLayout } from "layouts/app-layout"; import { WorkspaceSettingLayout } from "layouts/setting-layout"; // components -import { ImageUploadModal } from "components/core"; -import { DeleteWorkspaceModal } from "components/workspace"; import { WorkspaceSettingHeader } from "components/headers"; -// ui -import { Disclosure, Transition } from "@headlessui/react"; -import { Button, CustomSelect, Input, Spinner } from "@plane/ui"; -// icons -import { ChevronDown, ChevronUp, Pencil } from "lucide-react"; +import { WorkspaceDetails } from "components/workspace"; // types -import type { IWorkspace } from "types"; import type { NextPage } from "next"; -// fetch-keys -import { WORKSPACE_DETAILS, USER_WORKSPACES, WORKSPACE_MEMBERS_ME } from "constants/fetch-keys"; -// constants -import { ORGANIZATION_SIZE } from "constants/workspace"; -const defaultValues: Partial = { - name: "", - url: "", - organization_size: "2-10", - logo: null, -}; - -// services -const workspaceService = new WorkspaceService(); -const fileService = new FileService(); - -const WorkspaceSettings: NextPage = () => { - const [isOpen, setIsOpen] = useState(false); - const [isImageUploading, setIsImageUploading] = useState(false); - const [isImageRemoving, setIsImageRemoving] = useState(false); - const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false); - - const router = useRouter(); - const { workspaceSlug } = router.query; - - const { user } = useUserAuth(); - - const { data: memberDetails } = useSWR( - workspaceSlug ? WORKSPACE_MEMBERS_ME(workspaceSlug.toString()) : null, - workspaceSlug ? () => workspaceService.workspaceMemberMe(workspaceSlug.toString()) : null - ); - - const { setToastAlert } = useToast(); - - const { data: activeWorkspace } = useSWR(workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null, () => - workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null - ); - - const { - handleSubmit, - control, - reset, - watch, - setValue, - formState: { errors, isSubmitting }, - } = useForm({ - defaultValues: { ...defaultValues, ...activeWorkspace }, - }); - - useEffect(() => { - if (activeWorkspace) reset({ ...activeWorkspace }); - }, [activeWorkspace, reset]); - - const onSubmit = async (formData: IWorkspace) => { - if (!activeWorkspace) return; - - const payload: Partial = { - logo: formData.logo, - name: formData.name, - organization_size: formData.organization_size, - }; - - await workspaceService - .updateWorkspace(activeWorkspace.slug, payload, user) - .then((res) => { - mutate(USER_WORKSPACES, (prevData) => - prevData?.map((workspace) => (workspace.id === res.id ? res : workspace)) - ); - mutate(WORKSPACE_DETAILS(workspaceSlug as string), (prevData) => { - if (!prevData) return prevData; - - return { - ...prevData, - logo: formData.logo, - }; - }); - setToastAlert({ - title: "Success", - type: "success", - message: "Workspace updated successfully", - }); - }) - .catch((err) => console.error(err)); - }; - - const handleDelete = (url: string | null | undefined) => { - if (!activeWorkspace || !url) return; - - setIsImageRemoving(true); - - fileService.deleteFile(activeWorkspace.id, url).then(() => { - workspaceService - .updateWorkspace(activeWorkspace.slug, { logo: "" }, user) - .then((res) => { - setToastAlert({ - type: "success", - title: "Success!", - message: "Workspace picture removed successfully.", - }); - mutate(USER_WORKSPACES, (prevData) => - prevData?.map((workspace) => (workspace.id === res.id ? res : workspace)) - ); - mutate(WORKSPACE_DETAILS(workspaceSlug as string), (prevData) => { - if (!prevData) return prevData; - - return { - ...prevData, - logo: "", - }; - }); - setIsImageUploadModalOpen(false); - }) - .catch(() => { - setToastAlert({ - type: "error", - title: "Error!", - message: "There was some error in deleting your profile picture. Please try again.", - }); - }) - .finally(() => setIsImageRemoving(false)); - }); - }; - - const isAdmin = memberDetails?.role === 20; - - return ( - }> - - setIsImageUploadModalOpen(false)} - isRemoving={isImageRemoving} - handleDelete={() => handleDelete(activeWorkspace?.logo)} - onSuccess={(imageUrl) => { - setIsImageUploading(true); - setValue("logo", imageUrl); - setIsImageUploadModalOpen(false); - handleSubmit(onSubmit)().then(() => setIsImageUploading(false)); - }} - value={watch("logo")} - /> - { - setIsOpen(false); - }} - data={activeWorkspace ?? null} - user={user} - /> - {activeWorkspace ? ( -
-
-
- -
-
-

{watch("name")}

- {`${ - typeof window !== "undefined" && window.location.origin.replace("http://", "").replace("https://", "") - }/${activeWorkspace.slug}`} -
- -
-
-
- -
-
-
-

Workspace Name

- ( - - )} - /> -
- -
-

Company Size

- ( - c === value) ?? "Select organization size"} - width="w-full" - input - disabled={!isAdmin} - > - {ORGANIZATION_SIZE?.map((item) => ( - - {item} - - ))} - - )} - /> -
- -
-

Workspace URL

- ( - - )} - /> -
-
- -
- -
-
- {isAdmin && ( - - {({ open }) => ( -
- - Delete Workspace - {/* */} - {open ? : } - - - - -
- - The danger zone of the workspace delete page is a critical area that requires careful - consideration and attention. When deleting a workspace, all of the data and resources within - that workspace will be permanently removed and cannot be recovered. - -
- -
-
- - -
- )} - - )} -
- ) : ( -
- -
- )} - - - ); -}; +const WorkspaceSettings: NextPage = () => ( + }> + + + + +); export default WorkspaceSettings; diff --git a/web/pages/[workspaceSlug]/settings/members.tsx b/web/pages/[workspaceSlug]/settings/members.tsx index 4c055b687..7855f01c8 100644 --- a/web/pages/[workspaceSlug]/settings/members.tsx +++ b/web/pages/[workspaceSlug]/settings/members.tsx @@ -1,309 +1,45 @@ import { useState } from "react"; - -import Link from "next/link"; import { useRouter } from "next/router"; - -import useSWR from "swr"; - -// services -import { WorkspaceService } from "services/workspace.service"; // hooks -import useToast from "hooks/use-toast"; import useUser from "hooks/use-user"; -import useWorkspaceMembers from "hooks/use-workspace-members"; // layouts import { AppLayout } from "layouts/app-layout"; import { WorkspaceSettingLayout } from "layouts/setting-layout"; // components -import ConfirmWorkspaceMemberRemove from "components/workspace/confirm-workspace-member-remove"; -import SendWorkspaceInvitationModal from "components/workspace/send-workspace-invitation-modal"; import { WorkspaceSettingHeader } from "components/headers"; +import { SendWorkspaceInvitationModal, WorkspaceMembersList } from "components/workspace"; // ui -import { Button, CustomMenu, CustomSelect, Loader } from "@plane/ui"; -// icons -import { ChevronDown, X } from "lucide-react"; +import { Button } from "@plane/ui"; // types import type { NextPage } from "next"; -// fetch-keys -import { WORKSPACE_INVITATION_WITH_EMAIL, WORKSPACE_MEMBERS_WITH_EMAIL } from "constants/fetch-keys"; -// constants -import { ROLE } from "constants/workspace"; -// helper - -// services -const workspaceService = new WorkspaceService(); const MembersSettings: NextPage = () => { - const [selectedRemoveMember, setSelectedRemoveMember] = useState(null); - const [selectedInviteRemoveMember, setSelectedInviteRemoveMember] = useState(null); const [inviteModal, setInviteModal] = useState(false); const router = useRouter(); const { workspaceSlug } = router.query; - const { setToastAlert } = useToast(); - const { user } = useUser(); - const { isOwner } = useWorkspaceMembers(workspaceSlug?.toString(), Boolean(workspaceSlug)); - - const { data: workspaceMembers, mutate: mutateMembers } = useSWR( - workspaceSlug ? WORKSPACE_MEMBERS_WITH_EMAIL(workspaceSlug.toString()) : null, - workspaceSlug ? () => workspaceService.workspaceMembersWithEmail(workspaceSlug.toString()) : null - ); - - const { data: workspaceInvitations, mutate: mutateInvitations } = useSWR( - workspaceSlug ? WORKSPACE_INVITATION_WITH_EMAIL(workspaceSlug.toString()) : null, - workspaceSlug ? () => workspaceService.workspaceInvitationsWithEmail(workspaceSlug.toString()) : null - ); - - const members = [ - ...(workspaceInvitations?.map((item) => ({ - id: item.id, - memberId: item.id, - avatar: "", - first_name: item.email, - last_name: "", - email: item.email, - display_name: item.email, - role: item.role, - status: item.accepted, - member: false, - accountCreated: item?.accepted ? false : true, - })) || []), - ...(workspaceMembers?.map((item) => ({ - id: item.id, - memberId: item.member?.id, - avatar: item.member?.avatar, - first_name: item.member?.first_name, - last_name: item.member?.last_name, - email: item.member?.email, - display_name: item.member?.display_name, - role: item.role, - status: true, - member: true, - accountCreated: true, - })) || []), - ]; - - const currentUser = workspaceMembers?.find((item) => item.member?.id === user?.id); - - const handleInviteModalSuccess = () => { - mutateInvitations(); - }; - return ( }> - { - setSelectedRemoveMember(null); - setSelectedInviteRemoveMember(null); - }} - data={ - selectedRemoveMember - ? members.find((item) => item.id === selectedRemoveMember) - : selectedInviteRemoveMember - ? members.find((item) => item.id === selectedInviteRemoveMember) - : null - } - handleDelete={async () => { - if (!workspaceSlug) return; - if (selectedRemoveMember) { - workspaceService - .deleteWorkspaceMember(workspaceSlug as string, selectedRemoveMember) - .catch((err) => { - const error = err?.error; - setToastAlert({ - type: "error", - title: "Error", - message: error || "Something went wrong", - }); - }) - .finally(() => { - mutateMembers((prevData: any) => prevData?.filter((item: any) => item.id !== selectedRemoveMember)); - }); - } - if (selectedInviteRemoveMember) { - mutateInvitations( - (prevData: any) => prevData?.filter((item: any) => item.id !== selectedInviteRemoveMember), - false - ); - workspaceService - .deleteWorkspaceInvitations(workspaceSlug as string, selectedInviteRemoveMember) - .then(() => { - setToastAlert({ - type: "success", - title: "Success", - message: "Member removed successfully", - }); - }) - .catch((err) => { - const error = err?.error; - setToastAlert({ - type: "error", - title: "Error", - message: error || "Something went wrong", - }); - }) - .finally(() => { - mutateInvitations(); - }); - } - setSelectedRemoveMember(null); - setSelectedInviteRemoveMember(null); - }} - /> - + {workspaceSlug && ( + setInviteModal(false)} + workspaceSlug={workspaceSlug.toString()} + user={user} + /> + )}
-
+

Members

- {!workspaceMembers || !workspaceInvitations ? ( - - - - - - - ) : ( -
- {members.length > 0 - ? members.map((member) => ( -
-
- {member.avatar && member.avatar !== "" ? ( - - - {member.display_name - - - ) : member.display_name || member.email ? ( - - - {(member.display_name || member.email)?.charAt(0)} - - - ) : ( -
- ? -
- )} -
- {member.member ? ( - - - - {member.first_name} {member.last_name} - - ({member.display_name}) - - - ) : ( -

{member.display_name || member.email}

- )} - {isOwner &&

{member.email}

} -
-
-
- {!member?.status && ( -
-

Pending

-
- )} - {member?.status && !member?.accountCreated && ( -
-

Account not created

-
- )} - - - {ROLE[member.role as keyof typeof ROLE]} - - {member.memberId !== user?.id && } -
- } - value={member.role} - onChange={(value: 5 | 10 | 15 | 20 | undefined) => { - if (!workspaceSlug) return; - - mutateMembers( - (prevData: any) => - prevData?.map((m: any) => (m.id === member.id ? { ...m, role: value } : m)), - false - ); - - workspaceService - .updateWorkspaceMember(workspaceSlug?.toString(), member.id, { - role: value, - }) - .catch(() => { - setToastAlert({ - type: "error", - title: "Error!", - message: "An error occurred while updating member role. Please try again.", - }); - }); - }} - disabled={ - member.memberId === currentUser?.member.id || - !member.status || - (currentUser && currentUser.role !== 20 && currentUser.role < member.role) - } - > - {Object.keys(ROLE).map((key) => { - if (currentUser && currentUser.role !== 20 && currentUser.role < parseInt(key)) return null; - - return ( - - <>{ROLE[parseInt(key) as keyof typeof ROLE]} - - ); - })} - - - { - if (member.member) { - setSelectedRemoveMember(member.id); - } else { - setSelectedInviteRemoveMember(member.id); - } - }} - > - - - - {user?.id === member.memberId ? "Leave" : "Remove member"} - - - -
-
- )) - : null} -
- )} +
diff --git a/web/pages/create-workspace/index.tsx b/web/pages/create-workspace/index.tsx index 81048940b..370ee7352 100644 --- a/web/pages/create-workspace/index.tsx +++ b/web/pages/create-workspace/index.tsx @@ -68,7 +68,6 @@ const CreateWorkspace: NextPage = () => { onSubmit={onSubmit} defaultValues={defaultValues} setDefaultValues={setDefaultValues} - user={user} />
diff --git a/web/services/workspace.service.ts b/web/services/workspace.service.ts index 3d97eca9c..6d2f9cdf7 100644 --- a/web/services/workspace.service.ts +++ b/web/services/workspace.service.ts @@ -6,6 +6,7 @@ import { API_BASE_URL } from "helpers/common.helper"; // types import { IWorkspace, + IWorkspaceMemberMe, IWorkspaceMember, IWorkspaceMemberInvitation, ILastActiveWorkspaceDetails, @@ -139,15 +140,7 @@ export class WorkspaceService extends APIService { }); } - async workspaceMembersWithEmail(workspaceSlug: string): Promise { - return this.get(`/api/workspaces/${workspaceSlug}/members/`) - .then((response) => response?.data) - .catch((error) => { - throw error?.response?.data; - }); - } - - async workspaceMemberMe(workspaceSlug: string): Promise { + async workspaceMemberMe(workspaceSlug: string): Promise { return this.get(`/api/workspaces/${workspaceSlug}/workspace-members/me/`) .then((response) => response?.data) .catch((error) => { @@ -191,14 +184,6 @@ export class WorkspaceService extends APIService { }); } - async workspaceInvitationsWithEmail(workspaceSlug: string): Promise { - return this.get(`/api/workspaces/${workspaceSlug}/invitations/`) - .then((response) => response?.data) - .catch((error) => { - throw error?.response?.data; - }); - } - async getWorkspaceInvitation(invitationId: string): Promise { return this.get(`/api/users/me/invitations/${invitationId}/`, { headers: {} }) .then((response) => response?.data) diff --git a/web/store/archived-issues/issue.store.ts b/web/store/archived-issues/issue.store.ts index 141805e23..11c29f25c 100644 --- a/web/store/archived-issues/issue.store.ts +++ b/web/store/archived-issues/issue.store.ts @@ -6,15 +6,12 @@ import { IIssue } from "types"; // services import { IssueService } from "services/issue"; import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers"; - -export type IIssueType = "grouped" | "groupWithSubGroups" | "ungrouped"; -export type IIssueGroupedStructure = { [group_id: string]: IIssue[] }; -export type IIssueGroupWithSubGroupsStructure = { - [group_id: string]: { - [sub_group_id: string]: IIssue[]; - }; -}; -export type IIssueUnGroupedStructure = IIssue[]; +import { + IIssueGroupWithSubGroupsStructure, + IIssueGroupedStructure, + IIssueType, + IIssueUnGroupedStructure, +} from "store/issue"; export interface IArchivedIssueStore { loader: boolean; diff --git a/web/store/cycle/cycle_issue.store.ts b/web/store/cycle/cycle_issue.store.ts index e343a733d..333218060 100644 --- a/web/store/cycle/cycle_issue.store.ts +++ b/web/store/cycle/cycle_issue.store.ts @@ -9,15 +9,12 @@ import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers"; // types import { IIssue } from "types"; import { IBlockUpdateData } from "components/gantt-chart"; - -export type IIssueType = "grouped" | "groupWithSubGroups" | "ungrouped"; -export type IIssueGroupedStructure = { [group_id: string]: IIssue[] }; -export type IIssueGroupWithSubGroupsStructure = { - [group_id: string]: { - [sub_group_id: string]: IIssue[]; - }; -}; -export type IIssueUnGroupedStructure = IIssue[]; +import { + IIssueGroupWithSubGroupsStructure, + IIssueGroupedStructure, + IIssueType, + IIssueUnGroupedStructure, +} from "store/issue"; export interface ICycleIssueStore { loader: boolean; @@ -33,6 +30,7 @@ export interface ICycleIssueStore { // computed getIssueType: IIssueType | null; getIssues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null; + getIssuesCount: number; // action fetchIssues: (workspaceSlug: string, projectId: string, cycleId: string) => Promise; updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void; @@ -73,6 +71,7 @@ export class CycleIssueStore implements ICycleIssueStore { // computed getIssueType: computed, getIssues: computed, + getIssuesCount: computed, // actions fetchIssues: action, updateIssueStructure: action, @@ -130,6 +129,44 @@ export class CycleIssueStore implements ICycleIssueStore { return this.issues?.[cycleId]?.[issueType] || null; } + get getIssuesCount() { + const issueType = this.getIssueType; + + let issuesCount = 0; + + if (issueType === "grouped") { + const issues = this.getIssues as IIssueGroupedStructure; + + if (!issues) return 0; + + Object.keys(issues).map((group_id) => { + issuesCount += issues[group_id].length; + }); + } + + if (issueType === "groupWithSubGroups") { + const issues = this.getIssues as IIssueGroupWithSubGroupsStructure; + + if (!issues) return 0; + + Object.keys(issues).map((sub_group_id) => { + Object.keys(issues[sub_group_id]).map((group_id) => { + issuesCount += issues[sub_group_id][group_id].length; + }); + }); + } + + if (issueType === "ungrouped") { + const issues = this.getIssues as IIssueUnGroupedStructure; + + if (!issues) return 0; + + issuesCount = issues.length; + } + + return issuesCount; + } + updateIssueStructure = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => { const cycleId: string | null = this.rootStore?.cycle?.cycleId || null; const issueType = this.getIssueType; diff --git a/web/store/cycle/cycle_issue_calendar_view.store.ts b/web/store/cycle/cycle_issue_calendar_view.store.ts index 0ebb38c37..fa80f39ac 100644 --- a/web/store/cycle/cycle_issue_calendar_view.store.ts +++ b/web/store/cycle/cycle_issue_calendar_view.store.ts @@ -1,7 +1,7 @@ import { action, makeObservable, runInAction } from "mobx"; // types import { RootStore } from "../root"; -import { IIssueType } from "./cycle_issue.store"; +import { IIssueType } from "store/issue"; export interface ICycleIssueCalendarViewStore { // actions diff --git a/web/store/draft-issues/issue.store.ts b/web/store/draft-issues/issue.store.ts index c8afece07..f31a0bbb4 100644 --- a/web/store/draft-issues/issue.store.ts +++ b/web/store/draft-issues/issue.store.ts @@ -6,15 +6,12 @@ import { IIssue } from "types"; // services import { IssueService } from "services/issue"; import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers"; - -export type IIssueType = "grouped" | "groupWithSubGroups" | "ungrouped"; -export type IIssueGroupedStructure = { [group_id: string]: IIssue[] }; -export type IIssueGroupWithSubGroupsStructure = { - [group_id: string]: { - [sub_group_id: string]: IIssue[]; - }; -}; -export type IIssueUnGroupedStructure = IIssue[]; +import { + IIssueGroupWithSubGroupsStructure, + IIssueGroupedStructure, + IIssueType, + IIssueUnGroupedStructure, +} from "store/issue"; export interface IDraftIssueStore { loader: boolean; diff --git a/web/store/issue/issue.store.ts b/web/store/issue/issue.store.ts index 85d726f78..924c91eb1 100644 --- a/web/store/issue/issue.store.ts +++ b/web/store/issue/issue.store.ts @@ -31,6 +31,7 @@ export interface IIssueStore { // computed getIssueType: IIssueType | null; getIssues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null; + getIssuesCount: number; // action fetchIssues: (workspaceSlug: string, projectId: string) => Promise; updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void; @@ -68,6 +69,7 @@ export class IssueStore implements IIssueStore { // computed getIssueType: computed, getIssues: computed, + getIssuesCount: computed, // actions fetchIssues: action, updateIssueStructure: action, @@ -120,6 +122,44 @@ export class IssueStore implements IIssueStore { return this.issues?.[projectId]?.[issueType] || null; } + get getIssuesCount() { + const issueType = this.getIssueType; + + let issuesCount = 0; + + if (issueType === "grouped") { + const issues = this.getIssues as IIssueGroupedStructure; + + if (!issues) return 0; + + Object.keys(issues).map((group_id) => { + issuesCount += issues[group_id].length; + }); + } + + if (issueType === "groupWithSubGroups") { + const issues = this.getIssues as IIssueGroupWithSubGroupsStructure; + + if (!issues) return 0; + + Object.keys(issues).map((sub_group_id) => { + Object.keys(issues[sub_group_id]).map((group_id) => { + issuesCount += issues[sub_group_id][group_id].length; + }); + }); + } + + if (issueType === "ungrouped") { + const issues = this.getIssues as IIssueUnGroupedStructure; + + if (!issues) return 0; + + issuesCount = issues.length; + } + + return issuesCount; + } + updateIssueStructure = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => { const projectId: string | null = issue?.project; const issueType = this.getIssueType; diff --git a/web/store/module/module_issue.store.ts b/web/store/module/module_issue.store.ts index 9751ef708..5b5893b0d 100644 --- a/web/store/module/module_issue.store.ts +++ b/web/store/module/module_issue.store.ts @@ -8,15 +8,12 @@ import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers"; // types import { IIssue } from "types"; import { IBlockUpdateData } from "components/gantt-chart"; - -export type IIssueType = "grouped" | "groupWithSubGroups" | "ungrouped"; -export type IIssueGroupedStructure = { [group_id: string]: IIssue[] }; -export type IIssueGroupWithSubGroupsStructure = { - [group_id: string]: { - [sub_group_id: string]: IIssue[]; - }; -}; -export type IIssueUnGroupedStructure = IIssue[]; +import { + IIssueGroupWithSubGroupsStructure, + IIssueGroupedStructure, + IIssueType, + IIssueUnGroupedStructure, +} from "store/issue"; export interface IModuleIssueStore { loader: boolean; @@ -32,6 +29,7 @@ export interface IModuleIssueStore { // computed getIssueType: IIssueType | null; getIssues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null; + getIssuesCount: number; // action fetchIssues: (workspaceSlug: string, projectId: string, moduleId: string) => Promise; updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void; @@ -76,6 +74,7 @@ export class ModuleIssueStore implements IModuleIssueStore { // computed getIssueType: computed, getIssues: computed, + getIssuesCount: computed, // actions fetchIssues: action, updateIssueStructure: action, @@ -132,6 +131,44 @@ export class ModuleIssueStore implements IModuleIssueStore { return this.issues?.[moduleId]?.[issueType] || null; } + get getIssuesCount() { + const issueType = this.getIssueType; + + let issuesCount = 0; + + if (issueType === "grouped") { + const issues = this.getIssues as IIssueGroupedStructure; + + if (!issues) return 0; + + Object.keys(issues).map((group_id) => { + issuesCount += issues[group_id].length; + }); + } + + if (issueType === "groupWithSubGroups") { + const issues = this.getIssues as IIssueGroupWithSubGroupsStructure; + + if (!issues) return 0; + + Object.keys(issues).map((sub_group_id) => { + Object.keys(issues[sub_group_id]).map((group_id) => { + issuesCount += issues[sub_group_id][group_id].length; + }); + }); + } + + if (issueType === "ungrouped") { + const issues = this.getIssues as IIssueUnGroupedStructure; + + if (!issues) return 0; + + issuesCount = issues.length; + } + + return issuesCount; + } + updateIssueStructure = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => { const moduleId: string | null = this.rootStore?.module?.moduleId; const issueType = this.getIssueType; diff --git a/web/store/module/module_issue_calendar_view.store.ts b/web/store/module/module_issue_calendar_view.store.ts index 95a866040..313745a18 100644 --- a/web/store/module/module_issue_calendar_view.store.ts +++ b/web/store/module/module_issue_calendar_view.store.ts @@ -1,7 +1,7 @@ import { action, makeObservable, runInAction } from "mobx"; // types import { RootStore } from "../root"; -import { IIssueType } from "./module_issue.store"; +import { IIssueType } from "store/issue"; export interface IModuleIssueCalendarViewStore { // actions diff --git a/web/store/project-view/project_view_issues.store.ts b/web/store/project-view/project_view_issues.store.ts index 1c6374942..1e699c270 100644 --- a/web/store/project-view/project_view_issues.store.ts +++ b/web/store/project-view/project_view_issues.store.ts @@ -45,6 +45,7 @@ export interface IProjectViewIssuesStore { // computed getIssues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null; + getIssuesCount: number; getIssueType: IIssueType | null; } @@ -86,6 +87,7 @@ export class ProjectViewIssuesStore implements IProjectViewIssuesStore { // computed getIssueType: computed, getIssues: computed, + getIssuesCount: computed, }); this.rootStore = _rootStore; @@ -147,6 +149,44 @@ export class ProjectViewIssuesStore implements IProjectViewIssuesStore { return this.viewIssues?.[viewId]?.[issueType] || null; } + get getIssuesCount() { + const issueType = this.rootStore.issue.getIssueType; + + let issuesCount = 0; + + if (issueType === "grouped") { + const issues = this.getIssues as IIssueGroupedStructure; + + if (!issues) return 0; + + Object.keys(issues).map((group_id) => { + issuesCount += issues[group_id].length; + }); + } + + if (issueType === "groupWithSubGroups") { + const issues = this.getIssues as IIssueGroupWithSubGroupsStructure; + + if (!issues) return 0; + + Object.keys(issues).map((sub_group_id) => { + Object.keys(issues[sub_group_id]).map((group_id) => { + issuesCount += issues[sub_group_id][group_id].length; + }); + }); + } + + if (issueType === "ungrouped") { + const issues = this.getIssues as IIssueUnGroupedStructure; + + if (!issues) return 0; + + issuesCount = issues.length; + } + + return issuesCount; + } + updateIssueStructure = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => { const viewId: string | null = this.rootStore.projectViews.viewId; const issueType = this.rootStore.issue.getIssueType; diff --git a/web/store/user.store.ts b/web/store/user.store.ts index 42024a775..cbb861288 100644 --- a/web/store/user.store.ts +++ b/web/store/user.store.ts @@ -6,7 +6,7 @@ import { UserService } from "services/user.service"; import { WorkspaceService } from "services/workspace.service"; // interfaces import { IUser, IUserSettings } from "types/users"; -import { IWorkspaceMember, IProjectMember } from "types"; +import { IWorkspaceMemberMe, IProjectMember } from "types"; export interface IUserStore { loader: boolean; @@ -17,7 +17,7 @@ export interface IUserStore { dashboardInfo: any; - workspaceMemberInfo: any; + workspaceMemberInfo: IWorkspaceMemberMe | null; hasPermissionToWorkspace: boolean | null; projectMemberInfo: IProjectMember | null; @@ -27,7 +27,7 @@ export interface IUserStore { fetchCurrentUser: () => Promise; fetchCurrentUserSettings: () => Promise; - fetchUserWorkspaceInfo: (workspaceSlug: string) => Promise; + fetchUserWorkspaceInfo: (workspaceSlug: string) => Promise; fetchUserProjectInfo: (workspaceSlug: string, projectId: string) => Promise; fetchUserDashboardInfo: (workspaceSlug: string, month: number) => Promise; @@ -45,7 +45,7 @@ class UserStore implements IUserStore { dashboardInfo: any = null; - workspaceMemberInfo: any = null; + workspaceMemberInfo: IWorkspaceMemberMe | null = null; hasPermissionToWorkspace: boolean | null = null; projectMemberInfo: IProjectMember | null = null; diff --git a/web/store/workspace/workspace.store.ts b/web/store/workspace/workspace.store.ts index 9b27d255c..28e901928 100644 --- a/web/store/workspace/workspace.store.ts +++ b/web/store/workspace/workspace.store.ts @@ -26,6 +26,15 @@ export interface IWorkspaceStore { fetchWorkspaceLabels: (workspaceSlug: string) => Promise; fetchWorkspaceMembers: (workspaceSlug: string) => Promise; + // workspace write operations + createWorkspace: (data: Partial) => Promise; + updateWorkspace: (workspaceSlug: string, data: Partial) => Promise; + deleteWorkspace: (workspaceSlug: string) => Promise; + + // members write operations + updateMember: (workspaceSlug: string, memberId: string, data: Partial) => Promise; + removeMember: (workspaceSlug: string, memberId: string) => Promise; + // computed currentWorkspace: IWorkspace | null; workspaceLabels: IIssueLabels[] | null; @@ -72,6 +81,15 @@ export class WorkspaceStore implements IWorkspaceStore { fetchWorkspaceLabels: action, fetchWorkspaceMembers: action, + // workspace write operations + createWorkspace: action, + updateWorkspace: action, + deleteWorkspace: action, + + // members write operations + updateMember: action, + removeMember: action, + // computed currentWorkspace: computed, workspaceLabels: computed, @@ -189,7 +207,6 @@ export class WorkspaceStore implements IWorkspaceStore { * fetch workspace members using workspace slug * @param workspaceSlug */ - fetchWorkspaceMembers = async (workspaceSlug: string) => { try { runInAction(() => { @@ -214,4 +231,174 @@ export class WorkspaceStore implements IWorkspaceStore { }); } }; + + /** + * create workspace using the workspace data + * @param data + */ + createWorkspace = async (data: Partial) => { + try { + runInAction(() => { + this.loader = true; + this.error = null; + }); + + const user = this.rootStore.user.currentUser ?? undefined; + + const response = await this.workspaceService.createWorkspace(data, user); + + runInAction(() => { + this.loader = false; + this.error = null; + this.workspaces = [...this.workspaces, response]; + }); + + return response; + } catch (error) { + runInAction(() => { + this.loader = false; + this.error = error; + }); + + throw error; + } + }; + + /** + * update workspace using the workspace slug and new workspace data + * @param workspaceSlug + * @param data + */ + updateWorkspace = async (workspaceSlug: string, data: Partial) => { + const newWorkspaces = this.workspaces?.map((w) => (w.slug === workspaceSlug ? { ...w, ...data } : w)); + + try { + runInAction(() => { + this.loader = true; + this.error = null; + }); + + const user = this.rootStore.user.currentUser ?? undefined; + + const response = await this.workspaceService.updateWorkspace(workspaceSlug, data, user); + + runInAction(() => { + this.loader = false; + this.error = null; + this.workspaces = newWorkspaces; + }); + + return response; + } catch (error) { + runInAction(() => { + this.loader = false; + this.error = error; + }); + + throw error; + } + }; + + /** + * delete workspace using the workspace slug + * @param workspaceSlug + */ + deleteWorkspace = async (workspaceSlug: string) => { + const newWorkspaces = this.workspaces?.filter((w) => w.slug !== workspaceSlug); + + try { + runInAction(() => { + this.loader = true; + this.error = null; + }); + + const user = this.rootStore.user.currentUser ?? undefined; + + await this.workspaceService.deleteWorkspace(workspaceSlug, user); + + runInAction(() => { + this.loader = false; + this.error = null; + this.workspaces = newWorkspaces; + }); + } catch (error) { + runInAction(() => { + this.loader = false; + this.error = error; + }); + + throw error; + } + }; + + /** + * update workspace member using workspace slug and member id and data + * @param workspaceSlug + * @param memberId + * @param data + */ + updateMember = async (workspaceSlug: string, memberId: string, data: Partial) => { + const members = this.members?.[workspaceSlug]; + members?.map((m) => (m.id === memberId ? { ...m, ...data } : m)); + + try { + runInAction(() => { + this.loader = true; + this.error = null; + }); + + await this.workspaceService.updateWorkspaceMember(workspaceSlug, memberId, data); + + runInAction(() => { + this.loader = false; + this.error = null; + this.members = { + ...this.members, + [workspaceSlug]: members, + }; + }); + } catch (error) { + runInAction(() => { + this.loader = false; + this.error = error; + }); + + throw error; + } + }; + + /** + * remove workspace member using workspace slug and member id + * @param workspaceSlug + * @param memberId + */ + removeMember = async (workspaceSlug: string, memberId: string) => { + const members = this.members?.[workspaceSlug]; + members?.filter((m) => m.id !== memberId); + + try { + runInAction(() => { + this.loader = true; + this.error = null; + }); + + await this.workspaceService.deleteWorkspaceMember(workspaceSlug, memberId); + + runInAction(() => { + this.loader = false; + this.error = null; + this.members = { + ...this.members, + [workspaceSlug]: members, + }; + }); + } catch (error) { + runInAction(() => { + this.loader = false; + this.error = error; + }); + + throw error; + } + }; } diff --git a/web/store/workspace/workspace_filters.store.ts b/web/store/workspace/workspace_filters.store.ts index d33a56057..048ee6b07 100644 --- a/web/store/workspace/workspace_filters.store.ts +++ b/web/store/workspace/workspace_filters.store.ts @@ -9,7 +9,7 @@ import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, - IWorkspaceMember, + IWorkspaceMemberMe, IWorkspaceViewProps, TIssueParams, } from "types"; @@ -25,7 +25,7 @@ export interface IWorkspaceFilterStore { workspaceDisplayProperties: IIssueDisplayProperties; // actions - fetchUserWorkspaceFilters: (workspaceSlug: string) => Promise; + fetchUserWorkspaceFilters: (workspaceSlug: string) => Promise; updateWorkspaceFilters: (workspaceSlug: string, filterToUpdate: Partial) => Promise; // computed diff --git a/web/types/users.d.ts b/web/types/users.d.ts index 6ffeedf8b..252f4fe80 100644 --- a/web/types/users.d.ts +++ b/web/types/users.d.ts @@ -56,6 +56,7 @@ export interface IUserLite { avatar: string; created_at: Date; display_name: string; + email?: string; first_name: string; readonly id: string; is_bot: boolean; diff --git a/web/types/workspace.d.ts b/web/types/workspace.d.ts index 66e1e1273..004c1ad58 100644 --- a/web/types/workspace.d.ts +++ b/web/types/workspace.d.ts @@ -1,4 +1,4 @@ -import type { IProjectMember, IUser, IUserMemberLite, IWorkspaceViewProps } from "types"; +import type { IProjectMember, IUser, IUserLite, IUserMemberLite, IWorkspaceViewProps } from "types"; export interface IWorkspace { readonly id: string; @@ -56,16 +56,29 @@ export type Properties = { }; export interface IWorkspaceMember { - readonly id: string; - workspace: IWorkspace; - member: IUserMemberLite; - role: 5 | 10 | 15 | 20; company_role: string | null; - view_props: IWorkspaceViewProps; created_at: Date; - updated_at: Date; created_by: string; + id: string; + member: IUserLite; + role: 5 | 10 | 15 | 20; + updated_at: Date; updated_by: string; + workspace: IWorkspaceLite; +} + +export interface IWorkspaceMemberMe { + company_role: string | null; + created_at: Date; + created_by: string; + default_props: IWorkspaceViewProps; + id: string; + member: string; + role: 5 | 10 | 15 | 20; + updated_at: Date; + updated_by: string; + view_props: IWorkspaceViewProps; + workspace: string; } export interface ILastActiveWorkspaceDetails { diff --git a/yarn.lock b/yarn.lock index e95d031bf..7f729677e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2755,7 +2755,7 @@ dependencies: "@types/react" "*" -"@types/react-color@^3.0.6": +"@types/react-color@^3.0.6", "@types/react-color@^3.0.9": version "3.0.9" resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-3.0.9.tgz#8dbb0d798f2979c3d7e2e26dd46321e80da950b4" integrity sha512-Ojyc6jySSKvM6UYQrZxaYe0JZXtgHHXwR2q9H4MhcNCswFdeZH1owYZCvPtdHtMOfh7t8h1fY0Gd0nvU1JGDkQ== @@ -7393,7 +7393,7 @@ react-markdown@^8.0.7: unist-util-visit "^4.0.0" vfile "^5.0.0" -react-moveable@^0.54.1: +react-moveable@^0.54.1, react-moveable@^0.54.2: version "0.54.2" resolved "https://registry.yarnpkg.com/react-moveable/-/react-moveable-0.54.2.tgz#87ce9af3499dc1c8218bce7e174b10264c1bbecf" integrity sha512-NGaVLbn0i9pb3+BWSKGWFqI/Mgm4+WMeWHxXXQ4Qi1tHxWCXrUrbGvpxEpt69G/hR7dez+/m68ex+fabjnvcUg==