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

chore: active cycle issue transfer validation (#3560)

Browse Source 
* fix: completed cycle list layout validation

* fix: completed cycle kanban layout validation

* fix: completed cycle spreadsheet layout validation

* fix: date dropdown disabled fix

* chore: quick action validation added for list, kanban and spreadsheet layout

* fix: calendar layout validation added
This commit is contained in:
Anmol Singh Bhatia 2024-02-05 14:47:40 +05:30 committed by GitHub
parent 0165abab3e
commit ee0e3e2e25
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
20 changed files with 288 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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}
/>
);
});

6
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,6 +82,8 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
Copy link
</div>
</CustomMenu.MenuItem>
{!readOnly && (
<>
<CustomMenu.MenuItem
onClick={() => {
setTrackElement("Global issues");
@ -116,6 +118,8 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
Delete issue
</div>
</CustomMenu.MenuItem>
</>
)}
</CustomMenu>
</>
);

15
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,6 +71,7 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
Copy link
</div>
</CustomMenu.MenuItem>
{isEditingAllowed && !readOnly && (
<CustomMenu.MenuItem
onClick={() => {
setTrackElement(activeLayout);
@ -75,6 +83,7 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
Delete issue
</div>
</CustomMenu.MenuItem>
)}
</CustomMenu>
</>
);

24
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,6 +101,8 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
Copy link
</div>
</CustomMenu.MenuItem>
{isEditingAllowed && !readOnly && (
<>
<CustomMenu.MenuItem
onClick={() => {
setIssueToEdit({
@ -132,6 +150,8 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
Delete issue
</div>
</CustomMenu.MenuItem>
</>
)}
</CustomMenu>
</>
);

24
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,6 +101,8 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
Copy link
</div>
</CustomMenu.MenuItem>
{isEditingAllowed && !readOnly && (
<>
<CustomMenu.MenuItem
onClick={() => {
setIssueToEdit({ ...issue, module: moduleId?.toString() ?? null });
@ -131,6 +149,8 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
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}
/>
);
});