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

Merge branch 'develop' of gurusainath:makeplane/plane into feat/mobx-global-views

Browse Source
This commit is contained in:
gurusainath 2024-02-06 22:52:28 +05:30
commit bc694bb742
41 changed files with 656 additions and 345 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apiserver/plane/api/views/cycle.py
View File

@ -262,7 +262,7 @@ class CycleAPIEndpoint(WebhookMixin, BaseAPIView):
return Response(
{
"error": "Cycle with the same external id and external source already exists",
"cycle": str(cycle.id),
"id": str(cycle.id),
},
status=status.HTTP_409_CONFLICT,
)
@ -325,7 +325,7 @@ class CycleAPIEndpoint(WebhookMixin, BaseAPIView):
return Response(
{
"error": "Cycle with the same external id and external source already exists",
"cycle_id": str(cycle.id),
"id": str(cycle.id),
},
status=status.HTTP_409_CONFLICT,
)

61
apiserver/plane/api/views/issue.py
View File

@ -239,7 +239,7 @@ class IssueAPIEndpoint(WebhookMixin, BaseAPIView):
return Response(
{
"error": "Issue with the same external id and external source already exists",
"issue_id": str(issue.id),
"id": str(issue.id),
},
status=status.HTTP_409_CONFLICT,
)
@ -286,14 +286,16 @@ class IssueAPIEndpoint(WebhookMixin, BaseAPIView):
and Issue.objects.filter(
project_id=project_id,
workspace__slug=slug,
external_source=request.data.get("external_source", issue.external_source),
external_source=request.data.get(
"external_source", issue.external_source
),
external_id=request.data.get("external_id"),
).exists()
):
return Response(
{
"error": "Issue with the same external id and external source already exists",
"issue_id": str(issue.id),
"id": str(issue.id),
},
status=status.HTTP_409_CONFLICT,
)
@ -362,6 +364,30 @@ class LabelAPIEndpoint(BaseAPIView):
try:
serializer = LabelSerializer(data=request.data)
if serializer.is_valid():
if (
request.data.get("external_id")
and request.data.get("external_source")
and Label.objects.filter(
project_id=project_id,
workspace__slug=slug,
external_source=request.data.get("external_source"),
external_id=request.data.get("external_id"),
).exists()
):
label = Label.objects.filter(
workspace__slug=slug,
project_id=project_id,
external_id=request.data.get("external_id"),
external_source=request.data.get("external_source"),
).first()
return Response(
{
"error": "Label with the same external id and external source already exists",
"id": str(label.id),
},
status=status.HTTP_409_CONFLICT,
)
serializer.save(project_id=project_id)
return Response(
serializer.data, status=status.HTTP_201_CREATED
@ -370,11 +396,17 @@ class LabelAPIEndpoint(BaseAPIView):
serializer.errors, status=status.HTTP_400_BAD_REQUEST
)
except IntegrityError:
label = Label.objects.filter(
workspace__slug=slug,
project_id=project_id,
name=request.data.get("name"),
).first()
return Response(
{
"error": "Label with the same name already exists in the project"
"error": "Label with the same name already exists in the project",
"id": str(label.id),
},
status=status.HTTP_400_BAD_REQUEST,
status=status.HTTP_409_CONFLICT,
)
def get(self, request, slug, project_id, pk=None):
@ -401,6 +433,25 @@ class LabelAPIEndpoint(BaseAPIView):
label = self.get_queryset().get(pk=pk)
serializer = LabelSerializer(label, data=request.data, partial=True)
if serializer.is_valid():
if (
str(request.data.get("external_id"))
and (label.external_id != str(request.data.get("external_id")))
and Issue.objects.filter(
project_id=project_id,
workspace__slug=slug,
external_source=request.data.get(
"external_source", label.external_source
),
external_id=request.data.get("external_id"),
).exists()
):
return Response(
{
"error": "Label with the same external id and external source already exists",
"id": str(label.id),
},
status=status.HTTP_409_CONFLICT,
)
serializer.save()
return Response(serializer.data, status=status.HTTP_200_OK)
return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

4
apiserver/plane/api/views/module.py
View File

@ -151,7 +151,7 @@ class ModuleAPIEndpoint(WebhookMixin, BaseAPIView):
return Response(
{
"error": "Module with the same external id and external source already exists",
"module_id": str(module.id),
"id": str(module.id),
},
status=status.HTTP_409_CONFLICT,
)
@ -185,7 +185,7 @@ class ModuleAPIEndpoint(WebhookMixin, BaseAPIView):
return Response(
{
"error": "Module with the same external id and external source already exists",
"module_id": str(module.id),
"id": str(module.id),
},
status=status.HTTP_409_CONFLICT,
)

4
apiserver/plane/api/views/state.py
View File

@ -57,7 +57,7 @@ class StateAPIEndpoint(BaseAPIView):
return Response(
{
"error": "State with the same external id and external source already exists",
"state_id": str(state.id),
"id": str(state.id),
},
status=status.HTTP_409_CONFLICT,
)
@ -128,7 +128,7 @@ class StateAPIEndpoint(BaseAPIView):
return Response(
{
"error": "State with the same external id and external source already exists",
"state_id": str(state.id),
"id": str(state.id),
},
status=status.HTTP_409_CONFLICT,
)

34
apiserver/plane/app/views/dashboard.py
View File

@ -145,6 +145,23 @@ def dashboard_assigned_issues(self, request, slug):
)
).order_by("priority_order")
if issue_type == "pending":
pending_issues_count = assigned_issues.filter(
state__group__in=["backlog", "started", "unstarted"]
).count()
pending_issues = assigned_issues.filter(
state__group__in=["backlog", "started", "unstarted"]
)[:5]
return Response(
{
"issues": IssueSerializer(
pending_issues, many=True, expand=self.expand
).data,
"count": pending_issues_count,
},
status=status.HTTP_200_OK,
)
if issue_type == "completed":
completed_issues_count = assigned_issues.filter(
state__group__in=["completed"]
@ -257,6 +274,23 @@ def dashboard_created_issues(self, request, slug):
)
).order_by("priority_order")
if issue_type == "pending":
pending_issues_count = created_issues.filter(
state__group__in=["backlog", "started", "unstarted"]
).count()
pending_issues = created_issues.filter(
state__group__in=["backlog", "started", "unstarted"]
)[:5]
return Response(
{
"issues": IssueSerializer(
pending_issues, many=True, expand=self.expand
).data,
"count": pending_issues_count,
},
status=status.HTTP_200_OK,
)
if issue_type == "completed":
completed_issues_count = created_issues.filter(
state__group__in=["completed"]

27
apiserver/plane/bgtasks/issue_activites_task.py
View File

@ -353,13 +353,18 @@ def track_assignees(
issue_activities,
epoch,
):
requested_assignees = set(
[str(asg) for asg in requested_data.get("assignee_ids", [])]
requested_assignees = (
set([str(asg) for asg in requested_data.get("assignee_ids", [])])
if requested_data is not None
else set()
)
current_assignees = set(
[str(asg) for asg in current_instance.get("assignee_ids", [])]
current_assignees = (
set([str(asg) for asg in current_instance.get("assignee_ids", [])])
if current_instance is not None
else set()
)
added_assignees = requested_assignees - current_assignees
dropped_assginees = current_assignees - requested_assignees
@ -547,6 +552,20 @@ def create_issue_activity(
epoch=epoch,
)
)
requested_data = (
json.loads(requested_data) if requested_data is not None else None
)
if requested_data.get("assignee_ids") is not None:
track_assignees(
requested_data,
current_instance,
issue_id,
project_id,
workspace_id,
actor_id,
issue_activities,
epoch,
)
def update_issue_activity(

5
apiserver/plane/db/models/user.py
View File

@ -172,4 +172,9 @@ def create_user_notification(sender, instance, created, **kwargs):
from plane.db.models import UserNotificationPreference
UserNotificationPreference.objects.create(
user=instance,
property_change=False,
state_change=False,
comment=False,
mention=False,
issue_completed=False,
)

7
deploy/selfhost/install.sh
View File

@ -49,7 +49,7 @@ function buildLocalImage() {
cd $PLANE_TEMP_CODE_DIR
if [ "$BRANCH" == "master" ];
then
APP_RELEASE=latest
export APP_RELEASE=latest
fi
docker compose -f build.yml build --no-cache >&2
@ -205,6 +205,11 @@ else
PULL_POLICY=never
fi
if [ "$BRANCH" == "master" ];
then
export APP_RELEASE=latest
fi
# REMOVE SPECIAL CHARACTERS FROM BRANCH NAME
if [ "$BRANCH" != "master" ];
then

3
packages/types/src/dashboard.d.ts vendored
View File

@ -13,9 +13,10 @@ export type TWidgetKeys =
| "recent_projects"
| "recent_collaborators";
export type TIssuesListTypes = "upcoming" | "overdue" | "completed";
export type TIssuesListTypes = "pending" | "upcoming" | "overdue" | "completed";
export type TDurationFilterOptions =
| "none"
| "today"
| "this_week"
| "this_month"

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

@ -125,7 +125,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
</Tab>
</Tab.List>
<Tab.Panels className="flex w-full items-center justify-between text-custom-text-200">
<Tab.Panel as="div" className="flex h-44 w-full flex-col gap-1.5 overflow-y-auto pt-3.5">
<Tab.Panel as="div" className="flex min-h-44 w-full flex-col gap-1.5 overflow-y-auto pt-3.5">
{distribution?.assignees.length > 0 ? (
distribution.assignees.map((assignee, index) => {
if (assignee.assignee_id)

75
web/components/dashboard/widgets/assigned-issues.tsx
View File

@ -17,7 +17,7 @@ import { getCustomDates, getRedirectionFilters } from "helpers/dashboard.helper"
// types
import { TAssignedIssuesWidgetFilters, TAssignedIssuesWidgetResponse } from "@plane/types";
// constants
import { ISSUES_TABS_LIST } from "constants/dashboard";
import { FILTERED_ISSUES_TABS_LIST, UNFILTERED_ISSUES_TABS_LIST } from "constants/dashboard";
const WIDGET_KEY = "assigned_issues";
@ -30,6 +30,8 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
// derived values
const widgetDetails = getWidgetDetails(workspaceSlug, dashboardId, WIDGET_KEY);
const widgetStats = getWidgetStats<TAssignedIssuesWidgetResponse>(workspaceSlug, dashboardId, WIDGET_KEY);
const selectedTab = widgetDetails?.widget_filters.tab ?? "pending";
const selectedDurationFilter = widgetDetails?.widget_filters.target_date ?? "none";
const handleUpdateFilters = async (filters: Partial<TAssignedIssuesWidgetFilters>) => {
if (!widgetDetails) return;
@ -41,68 +43,79 @@ export const AssignedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
filters,
});
const filterDates = getCustomDates(filters.target_date ?? selectedDurationFilter);
fetchWidgetStats(workspaceSlug, dashboardId, {
widget_key: WIDGET_KEY,
issue_type: filters.tab ?? widgetDetails.widget_filters.tab ?? "upcoming",
target_date: getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "this_week"),
issue_type: filters.tab ?? selectedTab,
...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
expand: "issue_relation",
}).finally(() => setFetching(false));
};
useEffect(() => {
const filterDates = getCustomDates(widgetDetails?.widget_filters.target_date ?? "this_week");
const filterDates = getCustomDates(selectedDurationFilter);
fetchWidgetStats(workspaceSlug, dashboardId, {
widget_key: WIDGET_KEY,
issue_type: widgetDetails?.widget_filters.tab ?? "upcoming",
target_date: filterDates,
issue_type: selectedTab,
...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
expand: "issue_relation",
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const filterParams = getRedirectionFilters(widgetDetails?.widget_filters.tab ?? "upcoming");
const filterParams = getRedirectionFilters(selectedTab);
const tabsList = selectedDurationFilter === "none" ? UNFILTERED_ISSUES_TABS_LIST : FILTERED_ISSUES_TABS_LIST;
if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
return (
<div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
<div className="flex items-start justify-between gap-2 p-6 pl-7">
<div>
<Link
href={`/${workspaceSlug}/workspace-views/assigned/${filterParams}`}
className="text-lg font-semibold text-custom-text-300 hover:underline"
>
Assigned to you
</Link>
<p className="mt-3 text-xs font-medium text-custom-text-300">
Filtered by{" "}
<span className="border-[0.5px] border-custom-border-300 rounded py-1 px-2 ml-0.5">Due date</span>
</p>
</div>
<div className="flex items-center justify-between gap-2 p-6 pl-7">
<Link
href={`/${workspaceSlug}/workspace-views/assigned/${filterParams}`}
className="text-lg font-semibold text-custom-text-300 hover:underline"
>
Assigned to you
</Link>
<DurationFilterDropdown
value={widgetDetails.widget_filters.target_date ?? "this_week"}
onChange={(val) =>
handleUpdateFilters({
target_date: val,
})
}
value={selectedDurationFilter}
onChange={(val) => {
if (val === selectedDurationFilter) return;
// switch to pending tab if target date is changed to none
if (val === "none" && selectedTab !== "completed") {
handleUpdateFilters({ target_date: val, tab: "pending" });
return;
}
// switch to upcoming tab if target date is changed to other than none
if (val !== "none" && selectedDurationFilter === "none" && selectedTab !== "completed") {
handleUpdateFilters({
target_date: val,
tab: "upcoming",
});
return;
}
handleUpdateFilters({ target_date: val });
}}
/>
</div>
<Tab.Group
as="div"
defaultIndex={ISSUES_TABS_LIST.findIndex((t) => t.key === widgetDetails.widget_filters.tab ?? "upcoming")}
selectedIndex={tabsList.findIndex((tab) => tab.key === selectedTab)}
onChange={(i) => {
const selectedTab = ISSUES_TABS_LIST[i];
handleUpdateFilters({ tab: selectedTab.key ?? "upcoming" });
const selectedTab = tabsList[i];
handleUpdateFilters({ tab: selectedTab?.key ?? "pending" });
}}
className="h-full flex flex-col"
>
<div className="px-6">
<TabsList />
<TabsList durationFilter={selectedDurationFilter} selectedTab={selectedTab} />
</div>
<Tab.Panels as="div" className="h-full">
{ISSUES_TABS_LIST.map((tab) => (
{tabsList.map((tab) => (
<Tab.Panel key={tab.key} as="div" className="h-full flex flex-col">
<WidgetIssuesList
issues={widgetStats.issues}

74
web/components/dashboard/widgets/created-issues.tsx
View File

@ -17,7 +17,7 @@ import { getCustomDates, getRedirectionFilters } from "helpers/dashboard.helper"
// types
import { TCreatedIssuesWidgetFilters, TCreatedIssuesWidgetResponse } from "@plane/types";
// constants
import { ISSUES_TABS_LIST } from "constants/dashboard";
import { FILTERED_ISSUES_TABS_LIST, UNFILTERED_ISSUES_TABS_LIST } from "constants/dashboard";
const WIDGET_KEY = "created_issues";
@ -30,6 +30,8 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
// derived values
const widgetDetails = getWidgetDetails(workspaceSlug, dashboardId, WIDGET_KEY);
const widgetStats = getWidgetStats<TCreatedIssuesWidgetResponse>(workspaceSlug, dashboardId, WIDGET_KEY);
const selectedTab = widgetDetails?.widget_filters.tab ?? "pending";
const selectedDurationFilter = widgetDetails?.widget_filters.target_date ?? "none";
const handleUpdateFilters = async (filters: Partial<TCreatedIssuesWidgetFilters>) => {
if (!widgetDetails) return;
@ -41,64 +43,76 @@ export const CreatedIssuesWidget: React.FC<WidgetProps> = observer((props) => {
filters,
});
const filterDates = getCustomDates(filters.target_date ?? selectedDurationFilter);
fetchWidgetStats(workspaceSlug, dashboardId, {
widget_key: WIDGET_KEY,
issue_type: filters.tab ?? widgetDetails.widget_filters.tab ?? "upcoming",
target_date: getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "this_week"),
issue_type: filters.tab ?? selectedTab,
...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
}).finally(() => setFetching(false));
};
useEffect(() => {
const filterDates = getCustomDates(selectedDurationFilter);
fetchWidgetStats(workspaceSlug, dashboardId, {
widget_key: WIDGET_KEY,
issue_type: widgetDetails?.widget_filters.tab ?? "upcoming",
target_date: getCustomDates(widgetDetails?.widget_filters.target_date ?? "this_week"),
issue_type: selectedTab,
...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const filterParams = getRedirectionFilters(widgetDetails?.widget_filters.tab ?? "upcoming");
const filterParams = getRedirectionFilters(selectedTab);
const tabsList = selectedDurationFilter === "none" ? UNFILTERED_ISSUES_TABS_LIST : FILTERED_ISSUES_TABS_LIST;
if (!widgetDetails || !widgetStats) return <WidgetLoader widgetKey={WIDGET_KEY} />;
return (
<div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full hover:shadow-custom-shadow-4xl duration-300 flex flex-col min-h-96">
<div className="flex items-start justify-between gap-2 p-6 pl-7">
<div>
<Link
href={`/${workspaceSlug}/workspace-views/created/${filterParams}`}
className="text-lg font-semibold text-custom-text-300 hover:underline"
>
Created by you
</Link>
<p className="mt-3 text-xs font-medium text-custom-text-300">
Filtered by{" "}
<span className="border-[0.5px] border-custom-border-300 rounded py-1 px-2 ml-0.5">Due date</span>
</p>
</div>
<div className="flex items-center justify-between gap-2 p-6 pl-7">
<Link
href={`/${workspaceSlug}/workspace-views/created/${filterParams}`}
className="text-lg font-semibold text-custom-text-300 hover:underline"
>
Created by you
</Link>
<DurationFilterDropdown
value={widgetDetails.widget_filters.target_date ?? "this_week"}
onChange={(val) =>
handleUpdateFilters({
target_date: val,
})
}
value={selectedDurationFilter}
onChange={(val) => {
if (val === selectedDurationFilter) return;
// switch to pending tab if target date is changed to none
if (val === "none" && selectedTab !== "completed") {
handleUpdateFilters({ target_date: val, tab: "pending" });
return;
}
// switch to upcoming tab if target date is changed to other than none
if (val !== "none" && selectedDurationFilter === "none" && selectedTab !== "completed") {
handleUpdateFilters({
target_date: val,
tab: "upcoming",
});
return;
}
handleUpdateFilters({ target_date: val });
}}
/>
</div>
<Tab.Group
as="div"
defaultIndex={ISSUES_TABS_LIST.findIndex((t) => t.key === widgetDetails.widget_filters.tab ?? "upcoming")}
selectedIndex={tabsList.findIndex((tab) => tab.key === selectedTab)}
onChange={(i) => {
const selectedTab = ISSUES_TABS_LIST[i];
handleUpdateFilters({ tab: selectedTab.key ?? "upcoming" });
const selectedTab = tabsList[i];
handleUpdateFilters({ tab: selectedTab.key ?? "pending" });
}}
className="h-full flex flex-col"
>
<div className="px-6">
<TabsList />
<TabsList durationFilter={selectedDurationFilter} selectedTab={selectedTab} />
</div>
<Tab.Panels as="div" className="h-full">
{ISSUES_TABS_LIST.map((tab) => (
{tabsList.map((tab) => (
<Tab.Panel key={tab.key} as="div" className="h-full flex flex-col">
<WidgetIssuesList
issues={widgetStats.issues}

15
web/components/dashboard/widgets/issue-panels/issues-list.tsx
View File

@ -14,7 +14,7 @@ import {
IssueListItemProps,
} from "components/dashboard/widgets";
// ui
import { Loader, getButtonStyling } from "@plane/ui";
import { getButtonStyling } from "@plane/ui";
// helpers
import { cn } from "helpers/common.helper";
import { getRedirectionFilters } from "helpers/dashboard.helper";
@ -41,16 +41,18 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
const filterParams = getRedirectionFilters(tab);
const ISSUE_LIST_ITEM: {
[key in string]: {
[key: string]: {
[key in TIssuesListTypes]: React.FC<IssueListItemProps>;
};
} = {
assigned: {
pending: AssignedUpcomingIssueListItem,
upcoming: AssignedUpcomingIssueListItem,
overdue: AssignedOverdueIssueListItem,
completed: AssignedCompletedIssueListItem,
},
created: {
pending: CreatedUpcomingIssueListItem,
upcoming: CreatedUpcomingIssueListItem,
overdue: CreatedOverdueIssueListItem,
completed: CreatedCompletedIssueListItem,
@ -61,12 +63,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
<>
<div className="h-full">
{isLoading ? (
<Loader className="mt-7 mx-6 space-y-4">
<Loader.Item height="25px" />
<Loader.Item height="25px" />
<Loader.Item height="25px" />
<Loader.Item height="25px" />
</Loader>
<></>
) : issues.length > 0 ? (
<>
<div className="mt-7 mx-6 border-b-[0.5px] border-custom-border-200 grid grid-cols-6 gap-1 text-xs text-custom-text-300 pb-1">
@ -81,7 +78,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
{totalIssues}
</span>
</h6>
{tab === "upcoming" && <h6 className="text-center">Due date</h6>}
{["upcoming", "pending"].includes(tab) && <h6 className="text-center">Due date</h6>}
{tab === "overdue" && <h6 className="text-center">Due by</h6>}
{type === "assigned" && tab !== "completed" && <h6 className="text-center">Blocked by</h6>}
{type === "created" && <h6 className="text-center">Assigned to</h6>}

79
web/components/dashboard/widgets/issue-panels/tabs-list.tsx
View File

@ -1,26 +1,63 @@
import { observer } from "mobx-react";
import { Tab } from "@headlessui/react";
// helpers
import { cn } from "helpers/common.helper";
// types
import { TDurationFilterOptions, TIssuesListTypes } from "@plane/types";
// constants
import { ISSUES_TABS_LIST } from "constants/dashboard";
import { FILTERED_ISSUES_TABS_LIST, UNFILTERED_ISSUES_TABS_LIST } from "constants/dashboard";
export const TabsList = () => (
<Tab.List
as="div"
className="border-[0.5px] border-custom-border-200 rounded grid grid-cols-3 bg-custom-background-80"
>
{ISSUES_TABS_LIST.map((tab) => (
<Tab
key={tab.key}
className={({ selected }) =>
cn("font-semibold text-xs rounded py-1.5 focus:outline-none", {
"bg-custom-background-100 text-custom-text-300 shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selected,
"text-custom-text-400": !selected,
})
}
>
{tab.label}
</Tab>
))}
</Tab.List>
);
type Props = {
durationFilter: TDurationFilterOptions;
selectedTab: TIssuesListTypes;
};
export const TabsList: React.FC<Props> = observer((props) => {
const { durationFilter, selectedTab } = props;
const tabsList = durationFilter === "none" ? UNFILTERED_ISSUES_TABS_LIST : FILTERED_ISSUES_TABS_LIST;
const selectedTabIndex = tabsList.findIndex((tab) => tab.key === (selectedTab ?? "pending"));
return (
<Tab.List
as="div"
className="relative border-[0.5px] border-custom-border-200 rounded bg-custom-background-80 grid"
style={{
gridTemplateColumns: `repeat(${tabsList.length}, 1fr)`,
}}
>
<div
className={cn("absolute bg-custom-background-100 rounded transition-all duration-500 ease-in-out", {
// right shadow
"shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== tabsList.length - 1,
// left shadow
"shadow-[-2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== 0,
})}
style={{
height: "calc(100% - 1px)",
width: `${100 / tabsList.length}%`,
transform: `translateX(${selectedTabIndex * 100}%)`,
}}
/>
{tabsList.map((tab) => (
<Tab
key={tab.key}
className={cn(
"relative z-[1] font-semibold text-xs rounded py-1.5 text-custom-text-400 focus:outline-none",
"transition duration-500",
{
"text-custom-text-100 bg-custom-background-100": selectedTab === tab.key,
"hover:text-custom-text-300": selectedTab !== tab.key,
// // right shadow
// "shadow-[2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== tabsList.length - 1,
// // left shadow
// "shadow-[-2px_0_8px_rgba(167,169,174,0.15)]": selectedTabIndex !== 0,
}
)}
>
<span className="scale-110">{tab.label}</span>
</Tab>
))}
</Tab.List>
);
});

28
web/components/dashboard/widgets/issues-by-priority.tsx
View File

@ -84,16 +84,18 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
filters,
});
const filterDates = getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "none");
fetchWidgetStats(workspaceSlug, dashboardId, {
widget_key: WIDGET_KEY,
target_date: getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "this_week"),
...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
});
};
useEffect(() => {
const filterDates = getCustomDates(widgetDetails?.widget_filters.target_date ?? "none");
fetchWidgetStats(workspaceSlug, dashboardId, {
widget_key: WIDGET_KEY,
target_date: getCustomDates(widgetDetails?.widget_filters.target_date ?? "this_week"),
...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@ -129,21 +131,15 @@ export const IssuesByPriorityWidget: React.FC<WidgetProps> = observer((props) =>
return (
<div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full py-6 hover:shadow-custom-shadow-4xl duration-300 overflow-hidden min-h-96 flex flex-col">
<div className="flex items-start justify-between gap-2 pl-7 pr-6">
<div>
<Link
href={`/${workspaceSlug}/workspace-views/assigned`}
className="text-lg font-semibold text-custom-text-300 hover:underline"
>
Assigned by priority
</Link>
<p className="mt-3 text-xs font-medium text-custom-text-300">
Filtered by{" "}
<span className="border-[0.5px] border-custom-border-300 rounded py-1 px-2 ml-0.5">Due date</span>
</p>
</div>
<div className="flex items-center justify-between gap-2 pl-7 pr-6">
<Link
href={`/${workspaceSlug}/workspace-views/assigned`}
className="text-lg font-semibold text-custom-text-300 hover:underline"
>
Assigned by priority
</Link>
<DurationFilterDropdown
value={widgetDetails.widget_filters.target_date ?? "this_week"}
value={widgetDetails.widget_filters.target_date ?? "none"}
onChange={(val) =>
handleUpdateFilters({
target_date: val,

44
web/components/dashboard/widgets/issues-by-state-group.tsx
View File

@ -43,17 +43,19 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
filters,
});
const filterDates = getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "none");
fetchWidgetStats(workspaceSlug, dashboardId, {
widget_key: WIDGET_KEY,
target_date: getCustomDates(filters.target_date ?? widgetDetails.widget_filters.target_date ?? "this_week"),
...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
});
};
// fetch widget stats
useEffect(() => {
const filterDates = getCustomDates(widgetDetails?.widget_filters.target_date ?? "none");
fetchWidgetStats(workspaceSlug, dashboardId, {
widget_key: WIDGET_KEY,
target_date: getCustomDates(widgetDetails?.widget_filters.target_date ?? "this_week"),
...(filterDates.trim() !== "" ? { target_date: filterDates } : {}),
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@ -72,14 +74,14 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
startedCount > 0
? "started"
: unStartedCount > 0
? "unstarted"
: backlogCount > 0
? "backlog"
: completedCount > 0
? "completed"
: canceledCount > 0
? "cancelled"
: null;
? "unstarted"
: backlogCount > 0
? "backlog"
: completedCount > 0
? "completed"
: canceledCount > 0
? "cancelled"
: null;
setActiveStateGroup(stateGroup);
setDefaultStateGroup(stateGroup);
@ -128,21 +130,15 @@ export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props)
return (
<div className="bg-custom-background-100 rounded-xl border-[0.5px] border-custom-border-200 w-full py-6 hover:shadow-custom-shadow-4xl duration-300 overflow-hidden min-h-96 flex flex-col">
<div className="flex items-start justify-between gap-2 pl-7 pr-6">
<div>
<Link
href={`/${workspaceSlug}/workspace-views/assigned`}
className="text-lg font-semibold text-custom-text-300 hover:underline"
>
Assigned by state
</Link>
<p className="mt-3 text-xs font-medium text-custom-text-300">
Filtered by{" "}
<span className="border-[0.5px] border-custom-border-300 rounded py-1 px-2 ml-0.5">Due date</span>
</p>
</div>
<div className="flex items-center justify-between gap-2 pl-7 pr-6">
<Link
href={`/${workspaceSlug}/workspace-views/assigned`}
className="text-lg font-semibold text-custom-text-300 hover:underline"
>
Assigned by state
</Link>
<DurationFilterDropdown
value={widgetDetails.widget_filters.target_date ?? "this_week"}
value={widgetDetails.widget_filters.target_date ?? "none"}
onChange={(val) =>
handleUpdateFilters({
target_date: val,

1
web/components/dropdowns/date.tsx
View File

@ -105,6 +105,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
tabIndex={tabIndex}
className={cn("h-full", className)}
onKeyDown={handleKeyDown}
disabled={disabled}
>
<Combobox.Button as={React.Fragment}>
<button

13
web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
View File

@ -11,11 +11,12 @@ import { TGroupedIssues, TIssue } from "@plane/types";
import { IQuickActionProps } from "../list/list-view-types";
import { EIssueActions } from "../types";
import { handleDragDrop } from "./utils";
import { useIssues } from "hooks/store";
import { useIssues, useUser } from "hooks/store";
import { ICycleIssues, ICycleIssuesFilter } from "store/issue/cycle";
import { IModuleIssues, IModuleIssuesFilter } from "store/issue/module";
import { IProjectIssues, IProjectIssuesFilter } from "store/issue/project";
import { IProjectViewIssues, IProjectViewIssuesFilter } from "store/issue/project-views";
import { EUserProjectRoles } from "constants/project";
interface IBaseCalendarRoot {
issueStore: IProjectIssues | IModuleIssues | ICycleIssues | IProjectViewIssues;
@ -27,10 +28,11 @@ interface IBaseCalendarRoot {
[EIssueActions.REMOVE]?: (issue: TIssue) => Promise<void>;
};
viewId?: string;
isCompletedCycle?: boolean;
}
export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
const { issueStore, issuesFilterStore, QuickActions, issueActions, viewId } = props;
const { issueStore, issuesFilterStore, QuickActions, issueActions, viewId, isCompletedCycle = false } = props;
// router
const router = useRouter();
@ -39,6 +41,11 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
// hooks
const { setToastAlert } = useToast();
const { issueMap } = useIssues();
const {
membership: { currentProjectRole },
} = useUser();
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
const displayFilters = issuesFilterStore.issueFilters?.displayFilters;
@ -107,10 +114,12 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
? async () => handleIssues(issue.target_date ?? "", issue, EIssueActions.REMOVE)
: undefined
}
readOnly={!isEditingAllowed || isCompletedCycle}
/>
)}
quickAddCallback={issueStore.quickAddIssue}
viewId={viewId}
readOnly={!isEditingAllowed || isCompletedCycle}
/>
</DragDropContext>
</div>

16
web/components/issues/issue-layouts/calendar/calendar.tsx
View File

@ -31,11 +31,21 @@ type Props = {
viewId?: string
) => Promise<TIssue | undefined>;
viewId?: string;
readOnly?: boolean;
};
export const CalendarChart: React.FC<Props> = observer((props) => {
const { issuesFilterStore, issues, groupedIssueIds, layout, showWeekends, quickActions, quickAddCallback, viewId } =
props;
const {
issuesFilterStore,
issues,
groupedIssueIds,
layout,
showWeekends,
quickActions,
quickAddCallback,
viewId,
readOnly = false,
} = props;
// store hooks
const {
issues: { viewFlags },
@ -80,6 +90,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
quickActions={quickActions}
quickAddCallback={quickAddCallback}
viewId={viewId}
readOnly={readOnly}
/>
))}
</div>
@ -95,6 +106,7 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
quickActions={quickActions}
quickAddCallback={quickAddCallback}
viewId={viewId}
readOnly={readOnly}
/>
)}
</div>

7
web/components/issues/issue-layouts/calendar/day-tile.tsx
View File

@ -28,6 +28,7 @@ type Props = {
viewId?: string
) => Promise<TIssue | undefined>;
viewId?: string;
readOnly?: boolean;
};
export const CalendarDayTile: React.FC<Props> = observer((props) => {
@ -41,6 +42,7 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
disableIssueCreation,
quickAddCallback,
viewId,
readOnly = false,
} = props;
const [showAllIssues, setShowAllIssues] = useState(false);
const calendarLayout = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month";
@ -73,7 +75,7 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
{/* content */}
<div className="h-full w-full">
<Droppable droppableId={formattedDatePayload} isDropDisabled={false}>
<Droppable droppableId={formattedDatePayload} isDropDisabled={readOnly}>
{(provided, snapshot) => (
<div
className={`h-full w-full select-none overflow-y-auto ${
@ -89,9 +91,10 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
issueIdList={issueIdList}
quickActions={quickActions}
showAllIssues={showAllIssues}
isDragDisabled={readOnly}
/>
{enableQuickIssueCreate && !disableIssueCreation && (
{enableQuickIssueCreate && !disableIssueCreation && !readOnly && (
<div className="px-2 py-1">
<CalendarQuickAddIssueForm
formKey="target_date"

5
web/components/issues/issue-layouts/calendar/issue-blocks.tsx
View File

@ -17,10 +17,11 @@ type Props = {
issueIdList: string[] | null;
quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
showAllIssues?: boolean;
isDragDisabled?: boolean;
};
export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
const { issues, issueIdList, quickActions, showAllIssues = false } = props;
const { issues, issueIdList, quickActions, showAllIssues = false, isDragDisabled = false } = props;
// hooks
const {
router: { workspaceSlug, projectId },
@ -65,7 +66,7 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
getProjectStates(issue?.project_id)?.find((state) => state?.id == issue?.state_id)?.color || "";
return (
<Draggable key={issue.id} draggableId={issue.id} index={index}>
<Draggable key={issue.id} draggableId={issue.id} index={index} isDragDisabled={isDragDisabled}>
{(provided, snapshot) => (
<div
className="relative cursor-pointer p-1 px-2"

7
web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
View File

@ -1,7 +1,7 @@
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
//hooks
import { useIssues } from "hooks/store";
import { useCycle, useIssues } from "hooks/store";
// components
import { CycleIssueQuickActions } from "components/issues";
// types
@ -13,6 +13,7 @@ import { useMemo } from "react";
export const CycleCalendarLayout: React.FC = observer(() => {
const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
const { currentProjectCompletedCycleIds } = useCycle();
const router = useRouter();
const { workspaceSlug, projectId, cycleId } = router.query;
@ -38,6 +39,9 @@ export const CycleCalendarLayout: React.FC = observer(() => {
if (!cycleId) return null;
const isCompletedCycle =
cycleId && currentProjectCompletedCycleIds ? currentProjectCompletedCycleIds.includes(cycleId.toString()) : false;
return (
<BaseCalendarRoot
issueStore={issues}
@ -45,6 +49,7 @@ export const CycleCalendarLayout: React.FC = observer(() => {
QuickActions={CycleIssueQuickActions}
issueActions={issueActions}
viewId={cycleId.toString()}
isCompletedCycle={isCompletedCycle}
/>
);
});

3
web/components/issues/issue-layouts/calendar/week-days.tsx
View File

@ -26,6 +26,7 @@ type Props = {
viewId?: string
) => Promise<TIssue | undefined>;
viewId?: string;
readOnly?: boolean;
};
export const CalendarWeekDays: React.FC<Props> = observer((props) => {
@ -39,6 +40,7 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
disableIssueCreation,
quickAddCallback,
viewId,
readOnly = false,
} = props;
const calendarLayout = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month";
@ -67,6 +69,7 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
disableIssueCreation={disableIssueCreation}
quickAddCallback={quickAddCallback}
viewId={viewId}
readOnly={readOnly}
/>
);
})}

5
web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
View File

@ -46,6 +46,7 @@ export interface IBaseKanBanLayout {
storeType?: TCreateModalStoreTypes;
addIssuesToView?: (issueIds: string[]) => Promise<any>;
canEditPropertiesBasedOnProject?: (projectId: string) => boolean;
isCompletedCycle?: boolean;
}
type KanbanDragState = {
@ -65,6 +66,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
storeType,
addIssuesToView,
canEditPropertiesBasedOnProject,
isCompletedCycle = false,
} = props;
// router
const router = useRouter();
@ -183,6 +185,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
handleRemoveFromView={
issueActions[EIssueActions.REMOVE] ? async () => handleIssues(issue, EIssueActions.REMOVE) : undefined
}
readOnly={!isEditingAllowed || isCompletedCycle}
/>
),
// eslint-disable-next-line react-hooks/exhaustive-deps
@ -282,7 +285,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
quickAddCallback={issues?.quickAddIssue}
viewId={viewId}
disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
disableIssueCreation={!enableIssueCreation || !isEditingAllowed || isCompletedCycle}
canEditProperties={canEditProperties}
storeType={storeType}
addIssuesToView={addIssuesToView}

10
web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
View File

@ -2,7 +2,7 @@ import React, { useMemo } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// hooks
import { useIssues } from "hooks/store";
import { useCycle, useIssues } from "hooks/store";
// ui
import { CycleIssueQuickActions } from "components/issues";
// types
@ -20,6 +20,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
// store
const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
const { currentProjectCompletedCycleIds } = useCycle();
const issueActions = useMemo(
() => ({
@ -42,6 +43,11 @@ export const CycleKanBanLayout: React.FC = observer(() => {
[issues, workspaceSlug, cycleId]
);
const isCompletedCycle =
cycleId && currentProjectCompletedCycleIds ? currentProjectCompletedCycleIds.includes(cycleId.toString()) : false;
const canEditIssueProperties = () => !isCompletedCycle;
return (
<BaseKanBanRoot
issueActions={issueActions}
@ -55,6 +61,8 @@ export const CycleKanBanLayout: React.FC = observer(() => {
if (!workspaceSlug || !projectId || !cycleId) throw new Error();
return issues.addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds);
}}
canEditPropertiesBasedOnProject={canEditIssueProperties}
isCompletedCycle={isCompletedCycle}
/>
);
});

4
web/components/issues/issue-layouts/list/base-list-root.tsx
View File

@ -51,6 +51,7 @@ interface IBaseListRoot {
storeType: TCreateModalStoreTypes;
addIssuesToView?: (issueIds: string[]) => Promise<any>;
canEditPropertiesBasedOnProject?: (projectId: string) => boolean;
isCompletedCycle?: boolean;
}
export const BaseListRoot = observer((props: IBaseListRoot) => {
@ -63,6 +64,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
storeType,
addIssuesToView,
canEditPropertiesBasedOnProject,
isCompletedCycle = false,
} = props;
// mobx store
const {
@ -112,6 +114,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
handleRemoveFromView={
issueActions[EIssueActions.REMOVE] ? async () => handleIssues(issue, EIssueActions.REMOVE) : undefined
}
readOnly={!isEditingAllowed || isCompletedCycle}
/>
),
// eslint-disable-next-line react-hooks/exhaustive-deps
@ -136,6 +139,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
storeType={storeType}
addIssuesToView={addIssuesToView}
isCompletedCycle={isCompletedCycle}
/>
</div>
</>

9
web/components/issues/issue-layouts/list/default.tsx
View File

@ -37,6 +37,7 @@ export interface IGroupByList {
storeType: TCreateModalStoreTypes;
addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
viewId?: string;
isCompletedCycle?: boolean;
}
const GroupByList: React.FC<IGroupByList> = (props) => {
@ -55,6 +56,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
disableIssueCreation,
storeType,
addIssuesToView,
isCompletedCycle = false,
} = props;
// store hooks
const member = useMember();
@ -115,7 +117,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
title={_list.name || ""}
count={is_list ? issueIds?.length || 0 : issueIds?.[_list.id]?.length || 0}
issuePayload={_list.payload}
disableIssueCreation={disableIssueCreation || isGroupByCreatedBy}
disableIssueCreation={disableIssueCreation || isGroupByCreatedBy || isCompletedCycle}
storeType={storeType}
addIssuesToView={addIssuesToView}
/>
@ -132,7 +134,7 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
/>
)}
{enableIssueQuickAdd && !disableIssueCreation && !isGroupByCreatedBy && (
{enableIssueQuickAdd && !disableIssueCreation && !isGroupByCreatedBy && !isCompletedCycle && (
<div className="sticky bottom-0 z-[1] w-full flex-shrink-0">
<ListQuickAddIssueForm
prePopulatedData={prePopulateQuickAddData(group_by, _list.id)}
@ -168,6 +170,7 @@ export interface IList {
disableIssueCreation?: boolean;
storeType: TCreateModalStoreTypes;
addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
isCompletedCycle?: boolean;
}
export const List: React.FC<IList> = (props) => {
@ -186,6 +189,7 @@ export const List: React.FC<IList> = (props) => {
disableIssueCreation,
storeType,
addIssuesToView,
isCompletedCycle = false,
} = props;
return (
@ -205,6 +209,7 @@ export const List: React.FC<IList> = (props) => {
disableIssueCreation={disableIssueCreation}
storeType={storeType}
addIssuesToView={addIssuesToView}
isCompletedCycle={isCompletedCycle}
/>
</div>
);

1
web/components/issues/issue-layouts/list/list-view-types.d.ts vendored
View File

@ -5,4 +5,5 @@ export interface IQuickActionProps {
handleRemoveFromView?: () => Promise<void>;
customActionButton?: React.ReactElement;
portalElement?: HTMLDivElement | null;
readOnly?: boolean;
}

9
web/components/issues/issue-layouts/list/roots/cycle-root.tsx
View File

@ -2,7 +2,7 @@ import React, { useMemo } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// hooks
import { useIssues } from "hooks/store";
import { useCycle, useIssues } from "hooks/store";
// components
import { CycleIssueQuickActions } from "components/issues";
// types
@ -19,6 +19,7 @@ export const CycleListLayout: React.FC = observer(() => {
const { workspaceSlug, projectId, cycleId } = router.query;
// store
const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
const { currentProjectCompletedCycleIds } = useCycle();
const issueActions = useMemo(
() => ({
@ -40,6 +41,10 @@ export const CycleListLayout: React.FC = observer(() => {
}),
[issues, workspaceSlug, cycleId]
);
const isCompletedCycle =
cycleId && currentProjectCompletedCycleIds ? currentProjectCompletedCycleIds.includes(cycleId.toString()) : false;
const canEditIssueProperties = () => !isCompletedCycle;
return (
<BaseListRoot
@ -53,6 +58,8 @@ export const CycleListLayout: React.FC = observer(() => {
if (!workspaceSlug || !projectId || !cycleId) throw new Error();
return issues.addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds);
}}
canEditPropertiesBasedOnProject={canEditIssueProperties}
isCompletedCycle={isCompletedCycle}
/>
);
});

68
web/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
View File

@ -16,7 +16,7 @@ import { IQuickActionProps } from "../list/list-view-types";
import { EIssuesStoreType } from "constants/issue";
export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
const { issue, handleDelete, handleUpdate, customActionButton, portalElement } = props;
const { issue, handleDelete, handleUpdate, customActionButton, portalElement, readOnly = false } = props;
// states
const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
@ -82,40 +82,44 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
Copy link
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
setTrackElement("Global issues");
{!readOnly && (
<>
<CustomMenu.MenuItem
onClick={() => {
setTrackElement("Global issues");
setIssueToEdit(issue);
setCreateUpdateIssueModal(true);
}}
>
<div className="flex items-center gap-2">
<Pencil className="h-3 w-3" />
Edit issue
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
setTrackElement("Global issues");
setCreateUpdateIssueModal(true);
}}
>
<div className="flex items-center gap-2">
<Pencil className="h-3 w-3" />
Edit issue
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
setTrackElement("Global issues");
setCreateUpdateIssueModal(true);
}}
>
<div className="flex items-center gap-2">
<Copy className="h-3 w-3" />
Make a copy
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
setTrackElement("Global issues");
}}
>
<div className="flex items-center gap-2">
<Copy className="h-3 w-3" />
Make a copy
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
setTrackElement("Global issues");
setDeleteIssueModal(true);
}}
>
<div className="flex items-center gap-2">
<Trash2 className="h-3 w-3" />
Delete issue
</div>
</CustomMenu.MenuItem>
}}
>
<div className="flex items-center gap-2">
<Trash2 className="h-3 w-3" />
Delete issue
</div>
</CustomMenu.MenuItem>
</>
)}
</CustomMenu>
</>
);

35
web/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
View File

@ -4,18 +4,18 @@ import { CustomMenu } from "@plane/ui";
import { Link, Trash2 } from "lucide-react";
// hooks
import useToast from "hooks/use-toast";
import { useEventTracker, useIssues } from "hooks/store";
import { useEventTracker, useIssues ,useUser} from "hooks/store";
// components
import { DeleteArchivedIssueModal } from "components/issues";
// helpers
import { copyUrlToClipboard } from "helpers/string.helper";
// types
import { IQuickActionProps } from "../list/list-view-types";
// constants
import { EUserProjectRoles } from "constants/project";
import { EIssuesStoreType } from "constants/issue";
export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
const { issue, handleDelete, customActionButton, portalElement } = props;
const { issue, handleDelete, customActionButton, portalElement, readOnly = false } = props;
// router
const router = useRouter();
const { workspaceSlug } = router.query;
@ -23,6 +23,13 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
// toast alert
const { setToastAlert } = useToast();
// store hooks
const {
membership: { currentProjectRole },
} = useUser();
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
// store hooks
const { setTrackElement } = useEventTracker();
const { issuesFilter } = useIssues(EIssuesStoreType.ARCHIVED);
@ -64,17 +71,19 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
Copy link
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
setTrackElement(activeLayout);
{isEditingAllowed && !readOnly && (
<CustomMenu.MenuItem
onClick={() => {
setTrackElement(activeLayout);
setDeleteIssueModal(true);
}}
>
<div className="flex items-center gap-2">
<Trash2 className="h-3 w-3" />
Delete issue
</div>
</CustomMenu.MenuItem>
}}
>
<div className="flex items-center gap-2">
<Trash2 className="h-3 w-3" />
Delete issue
</div>
</CustomMenu.MenuItem>
)}
</CustomMenu>
</>
);

112
web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
View File

@ -4,7 +4,7 @@ import { CustomMenu } from "@plane/ui";
import { Copy, Link, Pencil, Trash2, XCircle } from "lucide-react";
// hooks
import useToast from "hooks/use-toast";
import { useEventTracker, useIssues } from "hooks/store";
import { useEventTracker, useIssues,useUser } from "hooks/store";
// components
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
// helpers
@ -14,9 +14,18 @@ import { TIssue } from "@plane/types";
import { IQuickActionProps } from "../list/list-view-types";
// constants
import { EIssuesStoreType } from "constants/issue";
import { EUserProjectRoles } from "constants/project";
export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
const { issue, handleDelete, handleUpdate, handleRemoveFromView, customActionButton, portalElement } = props;
const {
issue,
handleDelete,
handleUpdate,
handleRemoveFromView,
customActionButton,
portalElement,
readOnly = false,
} = props;
// states
const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
@ -30,6 +39,13 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
// toast alert
const { setToastAlert } = useToast();
// store hooks
const {
membership: { currentProjectRole },
} = useUser();
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
const handleCopyIssueLink = () => {
@ -85,53 +101,57 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
Copy link
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
setIssueToEdit({
...issue,
cycle: cycleId?.toString() ?? null,
});
setTrackElement(activeLayout);
{isEditingAllowed && !readOnly && (
<>
<CustomMenu.MenuItem
onClick={() => {
setIssueToEdit({
...issue,
cycle: cycleId?.toString() ?? null,
});
setTrackElement(activeLayout);
setCreateUpdateIssueModal(true);
}}
>
<div className="flex items-center gap-2">
<Pencil className="h-3 w-3" />
Edit issue
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
handleRemoveFromView && handleRemoveFromView();
}}
>
<div className="flex items-center gap-2">
<XCircle className="h-3 w-3" />
Remove from cycle
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
setTrackElement(activeLayout);
}}
>
<div className="flex items-center gap-2">
<Pencil className="h-3 w-3" />
Edit issue
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
handleRemoveFromView && handleRemoveFromView();
}}
>
<div className="flex items-center gap-2">
<XCircle className="h-3 w-3" />
Remove from cycle
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
setTrackElement(activeLayout);
setCreateUpdateIssueModal(true);
}}
>
<div className="flex items-center gap-2">
<Copy className="h-3 w-3" />
Make a copy
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
setTrackElement(activeLayout);
}}
>
<div className="flex items-center gap-2">
<Copy className="h-3 w-3" />
Make a copy
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
setTrackElement(activeLayout);
setDeleteIssueModal(true);
}}
>
<div className="flex items-center gap-2">
<Trash2 className="h-3 w-3" />
Delete issue
</div>
</CustomMenu.MenuItem>
}}
>
<div className="flex items-center gap-2">
<Trash2 className="h-3 w-3" />
Delete issue
</div>
</CustomMenu.MenuItem>
</>
)}
</CustomMenu>
</>
);

110
web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
View File

@ -4,7 +4,7 @@ import { CustomMenu } from "@plane/ui";
import { Copy, Link, Pencil, Trash2, XCircle } from "lucide-react";
// hooks
import useToast from "hooks/use-toast";
import { useIssues, useEventTracker } from "hooks/store";
import { useIssues, useEventTracker ,useUser } from "hooks/store";
// components
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
// helpers
@ -14,9 +14,18 @@ import { TIssue } from "@plane/types";
import { IQuickActionProps } from "../list/list-view-types";
// constants
import { EIssuesStoreType } from "constants/issue";
import { EUserProjectRoles } from "constants/project";
export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
const { issue, handleDelete, handleUpdate, handleRemoveFromView, customActionButton, portalElement } = props;
const {
issue,
handleDelete,
handleUpdate,
handleRemoveFromView,
customActionButton,
portalElement,
readOnly = false,
} = props;
// states
const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
const [issueToEdit, setIssueToEdit] = useState<TIssue | undefined>(undefined);
@ -30,6 +39,13 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
// toast alert
const { setToastAlert } = useToast();
// store hooks
const {
membership: { currentProjectRole },
} = useUser();
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
const handleCopyIssueLink = () => {
@ -85,52 +101,56 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
Copy link
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
setIssueToEdit({ ...issue, module: moduleId?.toString() ?? null });
setTrackElement(activeLayout);
{isEditingAllowed && !readOnly && (
<>
<CustomMenu.MenuItem
onClick={() => {
setIssueToEdit({ ...issue, module: moduleId?.toString() ?? null });
setTrackElement(activeLayout);
setCreateUpdateIssueModal(true);
}}
>
<div className="flex items-center gap-2">
<Pencil className="h-3 w-3" />
Edit issue
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
handleRemoveFromView && handleRemoveFromView();
}}
>
<div className="flex items-center gap-2">
<XCircle className="h-3 w-3" />
Remove from module
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
setTrackElement(activeLayout);
}}
>
<div className="flex items-center gap-2">
<Pencil className="h-3 w-3" />
Edit issue
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
handleRemoveFromView && handleRemoveFromView();
}}
>
<div className="flex items-center gap-2">
<XCircle className="h-3 w-3" />
Remove from module
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
setTrackElement(activeLayout);
setCreateUpdateIssueModal(true);
}}
>
<div className="flex items-center gap-2">
<Copy className="h-3 w-3" />
Make a copy
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setTrackElement(activeLayout);
}}
>
<div className="flex items-center gap-2">
<Copy className="h-3 w-3" />
Make a copy
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setTrackElement(activeLayout);
setDeleteIssueModal(true);
}}
>
<div className="flex items-center gap-2">
<Trash2 className="h-3 w-3" />
Delete issue
</div>
</CustomMenu.MenuItem>
}}
>
<div className="flex items-center gap-2">
<Trash2 className="h-3 w-3" />
Delete issue
</div>
</CustomMenu.MenuItem>
</>
)}
</CustomMenu>
</>
);

4
web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
View File

@ -17,7 +17,7 @@ import { EUserProjectRoles } from "constants/project";
import { EIssuesStoreType } from "constants/issue";
export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
const { issue, handleDelete, handleUpdate, customActionButton, portalElement } = props;
const { issue, handleDelete, handleUpdate, customActionButton, portalElement, readOnly = false } = props;
// router
const router = useRouter();
const { workspaceSlug } = router.query;
@ -91,7 +91,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
Copy link
</div>
</CustomMenu.MenuItem>
{isEditingAllowed && (
{isEditingAllowed && !readOnly && (
<>
<CustomMenu.MenuItem
onClick={() => {

14
web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
View File

@ -28,10 +28,19 @@ interface IBaseSpreadsheetRoot {
[EIssueActions.REMOVE]?: (issue: TIssue) => void;
};
canEditPropertiesBasedOnProject?: (projectId: string) => boolean;
isCompletedCycle?: boolean;
}
export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
const { issueFiltersStore, issueStore, viewId, QuickActions, issueActions, canEditPropertiesBasedOnProject } = props;
const {
issueFiltersStore,
issueStore,
viewId,
QuickActions,
issueActions,
canEditPropertiesBasedOnProject,
isCompletedCycle = false,
} = props;
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
@ -95,6 +104,7 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
issueActions[EIssueActions.REMOVE] ? async () => handleIssues(issue, EIssueActions.REMOVE) : undefined
}
portalElement={portalElement}
readOnly={!isEditingAllowed || isCompletedCycle}
/>
),
// eslint-disable-next-line react-hooks/exhaustive-deps
@ -113,7 +123,7 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
quickAddCallback={issueStore.quickAddIssue}
viewId={viewId}
enableQuickCreateIssue={enableQuickAdd}
disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
disableIssueCreation={!enableIssueCreation || !isEditingAllowed || isCompletedCycle}
/>
);
});

10
web/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
View File

@ -2,7 +2,7 @@ import React, { useMemo } from "react";
import { observer } from "mobx-react-lite";
import { useRouter } from "next/router";
// mobx store
import { useIssues } from "hooks/store";
import { useCycle, useIssues } from "hooks/store";
// components
import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
import { EIssueActions } from "../../types";
@ -15,6 +15,7 @@ export const CycleSpreadsheetLayout: React.FC = observer(() => {
const { workspaceSlug, cycleId } = router.query as { workspaceSlug: string; cycleId: string };
const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
const { currentProjectCompletedCycleIds } = useCycle();
const issueActions = useMemo(
() => ({
@ -35,6 +36,11 @@ export const CycleSpreadsheetLayout: React.FC = observer(() => {
[issues, workspaceSlug, cycleId]
);
const isCompletedCycle =
cycleId && currentProjectCompletedCycleIds ? currentProjectCompletedCycleIds.includes(cycleId.toString()) : false;
const canEditIssueProperties = () => !isCompletedCycle;
return (
<BaseSpreadsheetRoot
issueStore={issues}
@ -42,6 +48,8 @@ export const CycleSpreadsheetLayout: React.FC = observer(() => {
viewId={cycleId}
issueActions={issueActions}
QuickActions={CycleIssueQuickActions}
canEditPropertiesBasedOnProject={canEditIssueProperties}
isCompletedCycle={isCompletedCycle}
/>
);
});

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

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

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

@ -168,18 +168,6 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
if (!watch("target_date") || watch("target_date") === "") endDateButtonRef.current?.click();
if (watch("start_date") && watch("target_date") && watch("start_date") !== "" && watch("start_date") !== "") {
if (!isDateGreaterThanToday(`${watch("target_date")}`)) {
setToastAlert({
type: "error",
title: "Error!",
message: "Unable to create module in past date. Please enter a valid date.",
});
reset({
...moduleDetails,
});
return;
}
submitChanges({
start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
target_date: renderFormattedPayloadDate(`${watch("target_date")}`),
@ -198,18 +186,6 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
if (!watch("start_date") || watch("start_date") === "") endDateButtonRef.current?.click();
if (watch("start_date") && watch("target_date") && watch("start_date") !== "" && watch("start_date") !== "") {
if (!isDateGreaterThanToday(`${watch("target_date")}`)) {
setToastAlert({
type: "error",
title: "Error!",
message: "Unable to create module in past date. Please enter a valid date.",
});
reset({
...moduleDetails,
});
return;
}
submitChanges({
start_date: renderFormattedPayloadDate(`${watch("start_date")}`),
target_date: renderFormattedPayloadDate(`${watch("target_date")}`),

20
web/components/page-views/workspace-dashboard.tsx
View File

@ -62,16 +62,18 @@ export const WorkspaceDashboardView = observer(() => {
{homeDashboardId && joinedProjectIds ? (
<>
{joinedProjectIds.length > 0 ? (
<div className="flex h-full w-full flex-col space-y-7 overflow-y-auto bg-custom-background-90 p-7">
<>
<IssuePeekOverview />
{currentUser && <UserGreetingsView user={currentUser} />}
{currentUser && !currentUser.is_tour_completed && (
<div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-custom-backdrop bg-opacity-50 transition-opacity">
<TourRoot onComplete={handleTourCompleted} />
</div>
)}
<DashboardWidgets />
</div>
<div className="space-y-7 p-7 bg-custom-background-90 h-full w-full flex flex-col overflow-y-auto">
{currentUser && <UserGreetingsView user={currentUser} />}
{currentUser && !currentUser.is_tour_completed && (
<div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-custom-backdrop bg-opacity-50 transition-opacity">
<TourRoot onComplete={handleTourCompleted} />
</div>
)}
<DashboardWidgets />
</div>
</>
) : (
<EmptyState
image={emptyStateImage}

39
web/constants/dashboard.ts
View File

@ -121,21 +121,25 @@ export const DURATION_FILTER_OPTIONS: {
key: TDurationFilterOptions;
label: string;
}[] = [
{
key: "none",
label: "None",
},
{
key: "today",
label: "Today",
label: "Due today",
},
{
key: "this_week",
label: "This week",
label: " Due this week",
},
{
key: "this_month",
label: "This month",
label: "Due this month",
},
{
key: "this_year",
label: "This year",
label: "Due this year",
},
];
@ -152,7 +156,7 @@ export const PROJECT_BACKGROUND_COLORS = [
];
// assigned and created issues widgets tabs list
export const ISSUES_TABS_LIST: {
export const FILTERED_ISSUES_TABS_LIST: {
key: TIssuesListTypes;
label: string;
}[] = [
@ -170,7 +174,27 @@ export const ISSUES_TABS_LIST: {
},
];
// assigned and created issues widgets tabs list
export const UNFILTERED_ISSUES_TABS_LIST: {
key: TIssuesListTypes;
label: string;
}[] = [
{
key: "pending",
label: "Pending",
},
{
key: "completed",
label: "Marked completed",
},
];
export const ASSIGNED_ISSUES_EMPTY_STATES = {
pending: {
title: "Issues assigned to you that are pending\nwill show up here.",
darkImage: UpcomingIssuesDark,
lightImage: UpcomingIssuesLight,
},
upcoming: {
title: "Upcoming issues assigned to\nyou will show up here.",
darkImage: UpcomingIssuesDark,
@ -189,6 +213,11 @@ export const ASSIGNED_ISSUES_EMPTY_STATES = {
};
export const CREATED_ISSUES_EMPTY_STATES = {
pending: {
title: "Issues created by you that are pending\nwill show up here.",
darkImage: UpcomingIssuesDark,
lightImage: UpcomingIssuesLight,
},
upcoming: {
title: "Upcoming issues you created\nwill show up here.",
darkImage: UpcomingIssuesDark,

6
web/helpers/dashboard.helper.ts
View File

@ -9,6 +9,8 @@ export const getCustomDates = (duration: TDurationFilterOptions): string => {
let firstDay, lastDay;
switch (duration) {
case "none":
return "";
case "today":
firstDay = renderFormattedPayloadDate(today);
lastDay = renderFormattedPayloadDate(today);
@ -32,7 +34,9 @@ export const getRedirectionFilters = (type: TIssuesListTypes): string => {
const today = renderFormattedPayloadDate(new Date());
const filterParams =
type === "upcoming"
type === "pending"
? "?state_group=backlog,unstarted,started"
: type === "upcoming"
? `?target_date=${today};after`
: type === "overdue"
? `?target_date=${today};before`