mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
Merge branch 'feat/pagination' of github.com:makeplane/plane into feat/pagination
This commit is contained in:
pablohashescobar
commit
33a64fc67b
20
packages/types/src/issues/base.d.ts
vendored
20
packages/types/src/issues/base.d.ts
vendored
@ -12,16 +12,26 @@ export * from "./activity/base";
|
||||
|
||||
export type TLoader = "init-loader" | "mutation" | "pagination" | undefined;
|
||||
|
||||
export type TIssueGroup = { issueIds: string[]; issueCount: number };
|
||||
export type TGroupedIssues = {
|
||||
[group_id: string]: TIssueGroup;
|
||||
[group_id: string]: string[];
|
||||
};
|
||||
|
||||
export type TSubGroupedIssues = {
|
||||
[sub_grouped_id: string]: TGroupedIssues;
|
||||
};
|
||||
export type TUnGroupedIssues = {
|
||||
"All Issues": TIssueGroup;
|
||||
|
||||
export type TIssues = TGroupedIssues | TSubGroupedIssues;
|
||||
|
||||
export type TPaginationData = {
|
||||
nextCursor: string;
|
||||
prevCursor: string;
|
||||
nextPageResults: boolean;
|
||||
};
|
||||
|
||||
export type TIssues = TGroupedIssues | TUnGroupedIssues;
|
||||
export type TIssuePaginationData = {
|
||||
[group_id: string]: TPaginationData;
|
||||
};
|
||||
|
||||
export type TGroupedIssueCount = {
|
||||
[group_id: string]: number;
|
||||
};
|
||||
|
||||
8
packages/types/src/issues/issue.d.ts
vendored
8
packages/types/src/issues/issue.d.ts
vendored
@ -58,6 +58,10 @@ export type TIssueMap = {
|
||||
};
|
||||
|
||||
type TIssueResponseResults =
|
||||
| TBaseIssue[]
|
||||
| {
|
||||
[key: string]: {
|
||||
results:
|
||||
| TBaseIssue[]
|
||||
| {
|
||||
[key: string]: {
|
||||
@ -65,6 +69,9 @@ type TIssueResponseResults =
|
||||
total_results: number;
|
||||
};
|
||||
};
|
||||
total_results: number;
|
||||
};
|
||||
};
|
||||
|
||||
export type TIssuesResponse = {
|
||||
grouped_by: string;
|
||||
@ -72,6 +79,7 @@ export type TIssuesResponse = {
|
||||
prev_cursor: string;
|
||||
next_page_results: boolean;
|
||||
prev_page_results: boolean;
|
||||
total_count: number;
|
||||
count: number;
|
||||
total_pages: number;
|
||||
extra_stats: null;
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
import { FC } from "react";
|
||||
import { FC, useCallback } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useRouter } from "next/router";
|
||||
// hooks
|
||||
import { CycleGanttBlock } from "components/cycles";
|
||||
import { GanttChartRoot, IBlockUpdateData, CycleGanttSidebar } from "components/gantt-chart";
|
||||
import { GanttChartRoot, IBlockUpdateData, CycleGanttSidebar, ChartDataType } from "components/gantt-chart";
|
||||
import { useCycle } from "hooks/store";
|
||||
// components
|
||||
// types
|
||||
import { ICycle } from "@plane/types";
|
||||
import { getMonthChartItemPositionWidthInMonth } from "components/gantt-chart/views";
|
||||
// constants
|
||||
|
||||
type Props = {
|
||||
@ -23,6 +24,28 @@ export const CyclesListGanttChartView: FC<Props> = observer((props) => {
|
||||
// store hooks
|
||||
const { getCycleById, updateCycleDetails } = useCycle();
|
||||
|
||||
const getBlockById = useCallback(
|
||||
(id: string, currentViewData?: ChartDataType | undefined) => {
|
||||
const cycle = getCycleById(id);
|
||||
const block = {
|
||||
data: cycle,
|
||||
id: cycle?.id ?? "",
|
||||
sort_order: cycle?.sort_order ?? 0,
|
||||
start_date: cycle?.start_date ? new Date(cycle?.start_date) : undefined,
|
||||
target_date: cycle?.end_date ? new Date(cycle?.end_date) : undefined,
|
||||
};
|
||||
|
||||
if (currentViewData) {
|
||||
return {
|
||||
...block,
|
||||
position: getMonthChartItemPositionWidthInMonth(currentViewData, block),
|
||||
};
|
||||
}
|
||||
return block;
|
||||
},
|
||||
[getCycleById]
|
||||
);
|
||||
|
||||
const handleCycleUpdate = async (cycle: ICycle, data: IBlockUpdateData) => {
|
||||
if (!workspaceSlug || !cycle) return;
|
||||
|
||||
@ -32,28 +55,13 @@ export const CyclesListGanttChartView: FC<Props> = observer((props) => {
|
||||
await updateCycleDetails(workspaceSlug.toString(), cycle.project_id, cycle.id, payload);
|
||||
};
|
||||
|
||||
const blockFormat = (blocks: (ICycle | null)[]) => {
|
||||
if (!blocks) return [];
|
||||
|
||||
const filteredBlocks = blocks.filter((b) => b !== null && b.start_date && b.end_date);
|
||||
|
||||
const structuredBlocks = filteredBlocks.map((block) => ({
|
||||
data: block,
|
||||
id: block?.id ?? "",
|
||||
sort_order: block?.sort_order ?? 0,
|
||||
start_date: new Date(block?.start_date ?? ""),
|
||||
target_date: new Date(block?.end_date ?? ""),
|
||||
}));
|
||||
|
||||
return structuredBlocks;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-full w-full overflow-y-auto">
|
||||
<GanttChartRoot
|
||||
title="Cycles"
|
||||
loaderTitle="Cycles"
|
||||
blocks={cycleIds ? blockFormat(cycleIds.map((c) => getCycleById(c))) : null}
|
||||
blockIds={cycleIds}
|
||||
getBlockById={getBlockById}
|
||||
blockUpdateHandler={(block, payload) => handleCycleUpdate(block, payload)}
|
||||
sidebarToRender={(props) => <CycleGanttSidebar {...props} />}
|
||||
blockToRender={(data: ICycle) => <CycleGanttBlock cycleId={data.id} />}
|
||||
|
||||
@ -10,10 +10,12 @@ import { useIssueDetail } from "hooks/store";
|
||||
import { BLOCK_HEIGHT } from "../constants";
|
||||
import { ChartAddBlock, ChartDraggable } from "../helpers";
|
||||
import { useGanttChart } from "../hooks";
|
||||
import { IBlockUpdateData, IGanttBlock } from "../types";
|
||||
import { ChartDataType, IBlockUpdateData, IGanttBlock } from "../types";
|
||||
|
||||
type Props = {
|
||||
block: IGanttBlock;
|
||||
blockId: string;
|
||||
getBlockById: (id: string, currentViewData?: ChartDataType | undefined) => IGanttBlock;
|
||||
showAllBlocks: boolean;
|
||||
blockToRender: (data: any) => React.ReactNode;
|
||||
blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
|
||||
enableBlockLeftResize: boolean;
|
||||
@ -25,7 +27,9 @@ type Props = {
|
||||
|
||||
export const GanttChartBlock: React.FC<Props> = observer((props) => {
|
||||
const {
|
||||
block,
|
||||
blockId,
|
||||
getBlockById,
|
||||
showAllBlocks,
|
||||
blockToRender,
|
||||
blockUpdateHandler,
|
||||
enableBlockLeftResize,
|
||||
@ -35,9 +39,14 @@ export const GanttChartBlock: React.FC<Props> = observer((props) => {
|
||||
ganttContainerRef,
|
||||
} = props;
|
||||
// store hooks
|
||||
const { updateActiveBlockId, isBlockActive } = useGanttChart();
|
||||
const { currentViewData, updateActiveBlockId, isBlockActive } = useGanttChart();
|
||||
const { peekIssue } = useIssueDetail();
|
||||
|
||||
const block = getBlockById(blockId, currentViewData);
|
||||
|
||||
// hide the block if it doesn't have start and target dates and showAllBlocks is false
|
||||
if (!block || (!showAllBlocks && !(block.start_date && block.target_date))) return null;
|
||||
|
||||
const isBlockVisibleOnChart = block.start_date && block.target_date;
|
||||
|
||||
const handleChartBlockPosition = (
|
||||
@ -72,7 +81,6 @@ export const GanttChartBlock: React.FC<Props> = observer((props) => {
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`block-${block.id}`}
|
||||
className="relative min-w-full w-max"
|
||||
style={{
|
||||
height: `${BLOCK_HEIGHT}px`,
|
||||
@ -80,11 +88,11 @@ export const GanttChartBlock: React.FC<Props> = observer((props) => {
|
||||
>
|
||||
<div
|
||||
className={cn("relative h-full", {
|
||||
"bg-custom-background-80": isBlockActive(block.id),
|
||||
"bg-custom-background-80": isBlockActive(blockId),
|
||||
"rounded-l border border-r-0 border-custom-primary-70 hover:border-custom-primary-70":
|
||||
peekIssue?.issueId === block.data.id,
|
||||
})}
|
||||
onMouseEnter={() => updateActiveBlockId(block.id)}
|
||||
onMouseEnter={() => updateActiveBlockId(blockId)}
|
||||
onMouseLeave={() => updateActiveBlockId(null)}
|
||||
>
|
||||
{isBlockVisibleOnChart ? (
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
import { FC } from "react";
|
||||
// components
|
||||
import { HEADER_HEIGHT } from "../constants";
|
||||
import { IBlockUpdateData, IGanttBlock } from "../types";
|
||||
import { ChartDataType, IBlockUpdateData, IGanttBlock } from "../types";
|
||||
import { GanttChartBlock } from "./block";
|
||||
// types
|
||||
// constants
|
||||
|
||||
export type GanttChartBlocksProps = {
|
||||
itemsContainerWidth: number;
|
||||
blocks: IGanttBlock[] | null;
|
||||
blockIds: string[];
|
||||
getBlockById: (id: string, currentViewData?: ChartDataType | undefined) => IGanttBlock;
|
||||
blockToRender: (data: any) => React.ReactNode;
|
||||
blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
|
||||
enableBlockLeftResize: boolean;
|
||||
@ -22,9 +23,10 @@ export type GanttChartBlocksProps = {
|
||||
export const GanttChartBlocksList: FC<GanttChartBlocksProps> = (props) => {
|
||||
const {
|
||||
itemsContainerWidth,
|
||||
blocks,
|
||||
blockIds,
|
||||
blockToRender,
|
||||
blockUpdateHandler,
|
||||
getBlockById,
|
||||
enableBlockLeftResize,
|
||||
enableBlockRightResize,
|
||||
enableBlockMove,
|
||||
@ -41,14 +43,13 @@ export const GanttChartBlocksList: FC<GanttChartBlocksProps> = (props) => {
|
||||
transform: `translateY(${HEADER_HEIGHT}px)`,
|
||||
}}
|
||||
>
|
||||
{blocks?.map((block) => {
|
||||
// hide the block if it doesn't have start and target dates and showAllBlocks is false
|
||||
if (!showAllBlocks && !(block.start_date && block.target_date)) return;
|
||||
|
||||
{blockIds?.map((blockId) => {
|
||||
return (
|
||||
<GanttChartBlock
|
||||
key={block.id}
|
||||
block={block}
|
||||
key={blockId}
|
||||
blockId={blockId}
|
||||
getBlockById={getBlockById}
|
||||
showAllBlocks={showAllBlocks}
|
||||
blockToRender={blockToRender}
|
||||
blockUpdateHandler={blockUpdateHandler}
|
||||
enableBlockLeftResize={enableBlockLeftResize}
|
||||
|
||||
@ -10,7 +10,7 @@ import { IGanttBlock, TGanttViews } from "../types";
|
||||
// constants
|
||||
|
||||
type Props = {
|
||||
blocks: IGanttBlock[] | null;
|
||||
blockIds: string[];
|
||||
fullScreenMode: boolean;
|
||||
handleChartView: (view: TGanttViews) => void;
|
||||
handleToday: () => void;
|
||||
@ -20,7 +20,7 @@ type Props = {
|
||||
};
|
||||
|
||||
export const GanttChartHeader: React.FC<Props> = observer((props) => {
|
||||
const { blocks, fullScreenMode, handleChartView, handleToday, loaderTitle, title, toggleFullScreenMode } = props;
|
||||
const { blockIds, fullScreenMode, handleChartView, handleToday, loaderTitle, title, toggleFullScreenMode } = props;
|
||||
// chart hook
|
||||
const { currentView } = useGanttChart();
|
||||
|
||||
@ -28,7 +28,9 @@ export const GanttChartHeader: React.FC<Props> = observer((props) => {
|
||||
<div className="relative flex w-full flex-shrink-0 flex-wrap items-center gap-2 whitespace-nowrap px-2.5 py-2">
|
||||
<div className="flex items-center gap-2 text-lg font-medium">{title}</div>
|
||||
<div className="ml-auto">
|
||||
<div className="ml-auto text-sm font-medium">{blocks ? `${blocks.length} ${loaderTitle}` : "Loading..."}</div>
|
||||
<div className="ml-auto text-sm font-medium">
|
||||
{blockIds ? `${blockIds.length} ${loaderTitle}` : "Loading..."}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
|
||||
@ -4,6 +4,7 @@ import { observer } from "mobx-react";
|
||||
// components
|
||||
import {
|
||||
BiWeekChartView,
|
||||
ChartDataType,
|
||||
DayChartView,
|
||||
GanttChartBlocksList,
|
||||
GanttChartSidebar,
|
||||
@ -21,11 +22,13 @@ import { cn } from "helpers/common.helper";
|
||||
import { useGanttChart } from "../hooks/use-gantt-chart";
|
||||
|
||||
type Props = {
|
||||
blocks: IGanttBlock[] | null;
|
||||
blockIds: string[];
|
||||
getBlockById: (id: string, currentViewData?: ChartDataType | undefined) => IGanttBlock;
|
||||
canLoadMoreBlocks?: boolean;
|
||||
loadMoreBlocks?: () => void;
|
||||
blockToRender: (data: any) => React.ReactNode;
|
||||
blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
|
||||
bottomSpacing: boolean;
|
||||
chartBlocks: IGanttBlock[] | null;
|
||||
enableBlockLeftResize: boolean;
|
||||
enableBlockMove: boolean;
|
||||
enableBlockRightResize: boolean;
|
||||
@ -41,11 +44,12 @@ type Props = {
|
||||
|
||||
export const GanttChartMainContent: React.FC<Props> = observer((props) => {
|
||||
const {
|
||||
blocks,
|
||||
blockIds,
|
||||
getBlockById,
|
||||
loadMoreBlocks,
|
||||
blockToRender,
|
||||
blockUpdateHandler,
|
||||
bottomSpacing,
|
||||
chartBlocks,
|
||||
enableBlockLeftResize,
|
||||
enableBlockMove,
|
||||
enableBlockRightResize,
|
||||
@ -55,6 +59,7 @@ export const GanttChartMainContent: React.FC<Props> = observer((props) => {
|
||||
showAllBlocks,
|
||||
sidebarToRender,
|
||||
title,
|
||||
canLoadMoreBlocks,
|
||||
updateCurrentViewRenderPayload,
|
||||
quickAdd,
|
||||
} = props;
|
||||
@ -104,7 +109,11 @@ export const GanttChartMainContent: React.FC<Props> = observer((props) => {
|
||||
onScroll={onScroll}
|
||||
>
|
||||
<GanttChartSidebar
|
||||
blocks={blocks}
|
||||
blockIds={blockIds}
|
||||
getBlockById={getBlockById}
|
||||
loadMoreBlocks={loadMoreBlocks}
|
||||
canLoadMoreBlocks={canLoadMoreBlocks}
|
||||
ganttContainerRef={ganttContainerRef}
|
||||
blockUpdateHandler={blockUpdateHandler}
|
||||
enableReorder={enableReorder}
|
||||
sidebarToRender={sidebarToRender}
|
||||
@ -116,7 +125,8 @@ export const GanttChartMainContent: React.FC<Props> = observer((props) => {
|
||||
{currentViewData && (
|
||||
<GanttChartBlocksList
|
||||
itemsContainerWidth={itemsContainerWidth}
|
||||
blocks={chartBlocks}
|
||||
blockIds={blockIds}
|
||||
getBlockById={getBlockById}
|
||||
blockToRender={blockToRender}
|
||||
blockUpdateHandler={blockUpdateHandler}
|
||||
enableBlockLeftResize={enableBlockLeftResize}
|
||||
|
||||
@ -13,17 +13,13 @@ import { currentViewDataWithView } from "../data";
|
||||
// constants
|
||||
import { useGanttChart } from "../hooks/use-gantt-chart";
|
||||
import { ChartDataType, IBlockUpdateData, IGanttBlock, TGanttViews } from "../types";
|
||||
import {
|
||||
generateMonthChart,
|
||||
getNumberOfDaysBetweenTwoDatesInMonth,
|
||||
getMonthChartItemPositionWidthInMonth,
|
||||
} from "../views";
|
||||
import { generateMonthChart, getNumberOfDaysBetweenTwoDatesInMonth } from "../views";
|
||||
|
||||
type ChartViewRootProps = {
|
||||
border: boolean;
|
||||
title: string;
|
||||
loaderTitle: string;
|
||||
blocks: IGanttBlock[] | null;
|
||||
blockIds: string[];
|
||||
blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
|
||||
blockToRender: (data: any) => React.ReactNode;
|
||||
sidebarToRender: (props: any) => React.ReactNode;
|
||||
@ -34,6 +30,9 @@ type ChartViewRootProps = {
|
||||
enableAddBlock: boolean;
|
||||
bottomSpacing: boolean;
|
||||
showAllBlocks: boolean;
|
||||
getBlockById: (id: string, currentViewData?: ChartDataType | undefined) => IGanttBlock;
|
||||
loadMoreBlocks?: () => void;
|
||||
canLoadMoreBlocks?: boolean;
|
||||
quickAdd?: React.JSX.Element | undefined;
|
||||
};
|
||||
|
||||
@ -41,11 +40,14 @@ export const ChartViewRoot: FC<ChartViewRootProps> = observer((props) => {
|
||||
const {
|
||||
border,
|
||||
title,
|
||||
blocks = null,
|
||||
blockIds,
|
||||
getBlockById,
|
||||
loadMoreBlocks,
|
||||
loaderTitle,
|
||||
blockUpdateHandler,
|
||||
sidebarToRender,
|
||||
blockToRender,
|
||||
canLoadMoreBlocks,
|
||||
enableBlockLeftResize,
|
||||
enableBlockRightResize,
|
||||
enableBlockMove,
|
||||
@ -58,25 +60,10 @@ export const ChartViewRoot: FC<ChartViewRootProps> = observer((props) => {
|
||||
// states
|
||||
const [itemsContainerWidth, setItemsContainerWidth] = useState(0);
|
||||
const [fullScreenMode, setFullScreenMode] = useState(false);
|
||||
const [chartBlocks, setChartBlocks] = useState<IGanttBlock[] | null>(null);
|
||||
// hooks
|
||||
const { currentView, currentViewData, renderView, updateCurrentView, updateCurrentViewData, updateRenderView } =
|
||||
useGanttChart();
|
||||
|
||||
// rendering the block structure
|
||||
const renderBlockStructure = (view: any, blocks: IGanttBlock[] | null) =>
|
||||
blocks
|
||||
? blocks.map((block: any) => ({
|
||||
...block,
|
||||
position: getMonthChartItemPositionWidthInMonth(view, block),
|
||||
}))
|
||||
: [];
|
||||
|
||||
useEffect(() => {
|
||||
if (!currentViewData || !blocks) return;
|
||||
setChartBlocks(() => renderBlockStructure(currentViewData, blocks));
|
||||
}, [currentViewData, blocks]);
|
||||
|
||||
const updateCurrentViewRenderPayload = (side: null | "left" | "right", view: TGanttViews) => {
|
||||
const selectedCurrentView: TGanttViews = view;
|
||||
const selectedCurrentViewData: ChartDataType | undefined =
|
||||
@ -166,7 +153,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = observer((props) => {
|
||||
})}
|
||||
>
|
||||
<GanttChartHeader
|
||||
blocks={blocks}
|
||||
blockIds={blockIds}
|
||||
fullScreenMode={fullScreenMode}
|
||||
toggleFullScreenMode={() => setFullScreenMode((prevData) => !prevData)}
|
||||
handleChartView={(key) => updateCurrentViewRenderPayload(null, key)}
|
||||
@ -175,11 +162,13 @@ export const ChartViewRoot: FC<ChartViewRootProps> = observer((props) => {
|
||||
title={title}
|
||||
/>
|
||||
<GanttChartMainContent
|
||||
blocks={blocks}
|
||||
blockIds={blockIds}
|
||||
getBlockById={getBlockById}
|
||||
loadMoreBlocks={loadMoreBlocks}
|
||||
canLoadMoreBlocks={canLoadMoreBlocks}
|
||||
blockToRender={blockToRender}
|
||||
blockUpdateHandler={blockUpdateHandler}
|
||||
bottomSpacing={bottomSpacing}
|
||||
chartBlocks={chartBlocks}
|
||||
enableBlockLeftResize={enableBlockLeftResize}
|
||||
enableBlockMove={enableBlockMove}
|
||||
enableBlockRightResize={enableBlockRightResize}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { FC } from "react";
|
||||
// components
|
||||
import { ChartViewRoot, IBlockUpdateData, IGanttBlock } from "components/gantt-chart";
|
||||
import { ChartDataType, ChartViewRoot, IBlockUpdateData, IGanttBlock } from "components/gantt-chart";
|
||||
// context
|
||||
import { GanttStoreProvider } from "components/gantt-chart/contexts";
|
||||
|
||||
@ -8,11 +8,14 @@ type GanttChartRootProps = {
|
||||
border?: boolean;
|
||||
title: string;
|
||||
loaderTitle: string;
|
||||
blocks: IGanttBlock[] | null;
|
||||
blockIds: string[];
|
||||
blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
|
||||
blockToRender: (data: any) => React.ReactNode;
|
||||
sidebarToRender: (props: any) => React.ReactNode;
|
||||
quickAdd?: React.JSX.Element | undefined;
|
||||
getBlockById: (id: string, currentViewData?: ChartDataType | undefined) => IGanttBlock;
|
||||
canLoadMoreBlocks?: boolean;
|
||||
loadMoreBlocks?: () => void;
|
||||
enableBlockLeftResize?: boolean;
|
||||
enableBlockRightResize?: boolean;
|
||||
enableBlockMove?: boolean;
|
||||
@ -26,11 +29,14 @@ export const GanttChartRoot: FC<GanttChartRootProps> = (props) => {
|
||||
const {
|
||||
border = true,
|
||||
title,
|
||||
blocks,
|
||||
blockIds,
|
||||
loaderTitle = "blocks",
|
||||
blockUpdateHandler,
|
||||
sidebarToRender,
|
||||
blockToRender,
|
||||
getBlockById,
|
||||
loadMoreBlocks,
|
||||
canLoadMoreBlocks,
|
||||
enableBlockLeftResize = false,
|
||||
enableBlockRightResize = false,
|
||||
enableBlockMove = false,
|
||||
@ -46,7 +52,10 @@ export const GanttChartRoot: FC<GanttChartRootProps> = (props) => {
|
||||
<ChartViewRoot
|
||||
border={border}
|
||||
title={title}
|
||||
blocks={blocks}
|
||||
blockIds={blockIds}
|
||||
getBlockById={getBlockById}
|
||||
loadMoreBlocks={loadMoreBlocks}
|
||||
canLoadMoreBlocks={canLoadMoreBlocks}
|
||||
loaderTitle={loaderTitle}
|
||||
blockUpdateHandler={blockUpdateHandler}
|
||||
sidebarToRender={sidebarToRender}
|
||||
|
||||
@ -2,22 +2,23 @@ import { DragDropContext, Draggable, DropResult, Droppable } from "@hello-pangea
|
||||
// ui
|
||||
import { Loader } from "@plane/ui";
|
||||
// components
|
||||
import { IBlockUpdateData, IGanttBlock } from "components/gantt-chart/types";
|
||||
import { ChartDataType, IBlockUpdateData, IGanttBlock } from "components/gantt-chart/types";
|
||||
import { CyclesSidebarBlock } from "./block";
|
||||
// types
|
||||
|
||||
type Props = {
|
||||
title: string;
|
||||
blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
|
||||
blocks: IGanttBlock[] | null;
|
||||
getBlockById: (id: string, currentViewData?: ChartDataType | undefined) => IGanttBlock;
|
||||
blockIds: string[];
|
||||
enableReorder: boolean;
|
||||
};
|
||||
|
||||
export const CycleGanttSidebar: React.FC<Props> = (props) => {
|
||||
const { blockUpdateHandler, blocks, enableReorder } = props;
|
||||
const { blockUpdateHandler, blockIds, getBlockById, enableReorder } = props;
|
||||
|
||||
const handleOrderChange = (result: DropResult) => {
|
||||
if (!blocks) return;
|
||||
if (!blockIds) return;
|
||||
|
||||
const { source, destination } = result;
|
||||
|
||||
@ -27,29 +28,30 @@ export const CycleGanttSidebar: React.FC<Props> = (props) => {
|
||||
// return if dropped on the same index
|
||||
if (source.index === destination.index) return;
|
||||
|
||||
let updatedSortOrder = blocks[source.index].sort_order;
|
||||
let updatedSortOrder = getBlockById(blockIds[source.index]).sort_order;
|
||||
|
||||
// update the sort order to the lowest if dropped at the top
|
||||
if (destination.index === 0) updatedSortOrder = blocks[0].sort_order - 1000;
|
||||
if (destination.index === 0) updatedSortOrder = getBlockById(blockIds[0]).sort_order - 1000;
|
||||
// update the sort order to the highest if dropped at the bottom
|
||||
else if (destination.index === blocks.length - 1) updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000;
|
||||
else if (destination.index === blockIds.length - 1)
|
||||
updatedSortOrder = getBlockById(blockIds[blockIds.length - 1]).sort_order + 1000;
|
||||
// update the sort order to the average of the two adjacent blocks if dropped in between
|
||||
else {
|
||||
const destinationSortingOrder = blocks[destination.index].sort_order;
|
||||
const destinationSortingOrder = getBlockById(blockIds[destination.index]).sort_order;
|
||||
const relativeDestinationSortingOrder =
|
||||
source.index < destination.index
|
||||
? blocks[destination.index + 1].sort_order
|
||||
: blocks[destination.index - 1].sort_order;
|
||||
? getBlockById(blockIds[destination.index + 1]).sort_order
|
||||
: getBlockById(blockIds[destination.index - 1]).sort_order;
|
||||
|
||||
updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
|
||||
}
|
||||
|
||||
// extract the element from the source index and insert it at the destination index without updating the entire array
|
||||
const removedElement = blocks.splice(source.index, 1)[0];
|
||||
blocks.splice(destination.index, 0, removedElement);
|
||||
const removedElement = blockIds.splice(source.index, 1)[0];
|
||||
blockIds.splice(destination.index, 0, removedElement);
|
||||
|
||||
// call the block update handler with the updated sort order, new and old index
|
||||
blockUpdateHandler(removedElement.data, {
|
||||
blockUpdateHandler(getBlockById(removedElement).data, {
|
||||
sort_order: {
|
||||
destinationIndex: destination.index,
|
||||
newSortOrder: updatedSortOrder,
|
||||
@ -64,8 +66,11 @@ export const CycleGanttSidebar: React.FC<Props> = (props) => {
|
||||
{(droppableProvided) => (
|
||||
<div className="h-full" ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
|
||||
<>
|
||||
{blocks ? (
|
||||
blocks.map((block, index) => (
|
||||
{blockIds ? (
|
||||
blockIds.map((blockId, index) => {
|
||||
const block = getBlockById(blockId);
|
||||
if (!block.start_date || !block.target_date) return null;
|
||||
return (
|
||||
<Draggable
|
||||
key={`sidebar-block-${block.id}`}
|
||||
draggableId={`sidebar-block-${block.id}`}
|
||||
@ -81,7 +86,8 @@ export const CycleGanttSidebar: React.FC<Props> = (props) => {
|
||||
/>
|
||||
)}
|
||||
</Draggable>
|
||||
))
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<Loader className="space-y-3 pr-2">
|
||||
<Loader.Item height="34px" />
|
||||
|
||||
@ -0,0 +1,34 @@
|
||||
import { Draggable } from "@hello-pangea/dnd";
|
||||
import { observer } from "mobx-react";
|
||||
import { IssuesSidebarBlock } from "./block";
|
||||
import { IGanttBlock } from "components/gantt-chart/types";
|
||||
|
||||
interface Props {
|
||||
blockId: string;
|
||||
enableReorder: boolean;
|
||||
index: number;
|
||||
showAllBlocks: boolean;
|
||||
getBlockById: (blockId: string) => IGanttBlock;
|
||||
}
|
||||
export const IssueDraggableBlock = observer((props: Props) => {
|
||||
const { blockId, enableReorder, index, showAllBlocks, getBlockById } = props;
|
||||
const block = getBlockById(blockId);
|
||||
|
||||
const isBlockVisibleOnSidebar = block.start_date && block.target_date;
|
||||
|
||||
// hide the block if it doesn't have start and target dates and showAllBlocks is false
|
||||
if (!showAllBlocks && !isBlockVisibleOnSidebar) return null;
|
||||
|
||||
return (
|
||||
<Draggable
|
||||
key={`sidebar-block-${blockId}`}
|
||||
draggableId={`sidebar-block-${blockId}`}
|
||||
index={index}
|
||||
isDragDisabled={!enableReorder}
|
||||
>
|
||||
{(provided, snapshot) => (
|
||||
<IssuesSidebarBlock block={block} enableReorder={enableReorder} provided={provided} snapshot={snapshot} />
|
||||
)}
|
||||
</Draggable>
|
||||
);
|
||||
});
|
||||
@ -4,20 +4,40 @@ import { DragDropContext, Draggable, Droppable, DropResult } from "@hello-pangea
|
||||
import { Loader } from "@plane/ui";
|
||||
// types
|
||||
import { IGanttBlock, IBlockUpdateData } from "components/gantt-chart/types";
|
||||
import { IssuesSidebarBlock } from "./block";
|
||||
import { observer } from "mobx-react";
|
||||
import { IssueDraggableBlock } from "./issue-draggable-block";
|
||||
import { useIntersectionObserver } from "hooks/use-intersection-observer";
|
||||
import { RefObject, useRef } from "react";
|
||||
|
||||
type Props = {
|
||||
blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
|
||||
blocks: IGanttBlock[] | null;
|
||||
getBlockById: (id: string) => IGanttBlock;
|
||||
canLoadMoreBlocks?: boolean;
|
||||
loadMoreBlocks?: () => void;
|
||||
ganttContainerRef: RefObject<HTMLDivElement>;
|
||||
blockIds: string[];
|
||||
enableReorder: boolean;
|
||||
showAllBlocks?: boolean;
|
||||
};
|
||||
|
||||
export const IssueGanttSidebar: React.FC<Props> = (props) => {
|
||||
const { blockUpdateHandler, blocks, enableReorder, showAllBlocks = false } = props;
|
||||
export const IssueGanttSidebar: React.FC<Props> = observer((props) => {
|
||||
const {
|
||||
blockUpdateHandler,
|
||||
blockIds,
|
||||
getBlockById,
|
||||
enableReorder,
|
||||
loadMoreBlocks,
|
||||
canLoadMoreBlocks,
|
||||
ganttContainerRef,
|
||||
showAllBlocks = false,
|
||||
} = props;
|
||||
|
||||
const intersectionRef = useRef<HTMLSpanElement | null>(null);
|
||||
|
||||
useIntersectionObserver(ganttContainerRef, intersectionRef, loadMoreBlocks, "50% 0% 50% 0%");
|
||||
|
||||
const handleOrderChange = (result: DropResult) => {
|
||||
if (!blocks) return;
|
||||
if (!blockIds) return;
|
||||
|
||||
const { source, destination } = result;
|
||||
|
||||
@ -27,29 +47,30 @@ export const IssueGanttSidebar: React.FC<Props> = (props) => {
|
||||
// return if dropped on the same index
|
||||
if (source.index === destination.index) return;
|
||||
|
||||
let updatedSortOrder = blocks[source.index].sort_order;
|
||||
let updatedSortOrder = getBlockById(blockIds[source.index]).sort_order;
|
||||
|
||||
// update the sort order to the lowest if dropped at the top
|
||||
if (destination.index === 0) updatedSortOrder = blocks[0].sort_order - 1000;
|
||||
if (destination.index === 0) updatedSortOrder = getBlockById(blockIds[0]).sort_order - 1000;
|
||||
// update the sort order to the highest if dropped at the bottom
|
||||
else if (destination.index === blocks.length - 1) updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000;
|
||||
else if (destination.index === blockIds.length - 1)
|
||||
updatedSortOrder = getBlockById(blockIds[blockIds.length - 1])!.sort_order + 1000;
|
||||
// update the sort order to the average of the two adjacent blocks if dropped in between
|
||||
else {
|
||||
const destinationSortingOrder = blocks[destination.index].sort_order;
|
||||
const destinationSortingOrder = getBlockById(blockIds[destination.index]).sort_order;
|
||||
const relativeDestinationSortingOrder =
|
||||
source.index < destination.index
|
||||
? blocks[destination.index + 1].sort_order
|
||||
: blocks[destination.index - 1].sort_order;
|
||||
? getBlockById(blockIds[destination.index + 1]).sort_order
|
||||
: getBlockById(blockIds[destination.index - 1]).sort_order;
|
||||
|
||||
updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
|
||||
}
|
||||
|
||||
// extract the element from the source index and insert it at the destination index without updating the entire array
|
||||
const removedElement = blocks.splice(source.index, 1)[0];
|
||||
blocks.splice(destination.index, 0, removedElement);
|
||||
const removedElement = blockIds.splice(source.index, 1)[0];
|
||||
blockIds.splice(destination.index, 0, removedElement);
|
||||
|
||||
// call the block update handler with the updated sort order, new and old index
|
||||
blockUpdateHandler(removedElement.data, {
|
||||
blockUpdateHandler(getBlockById(removedElement).data, {
|
||||
sort_order: {
|
||||
destinationIndex: destination.index,
|
||||
newSortOrder: updatedSortOrder,
|
||||
@ -64,31 +85,21 @@ export const IssueGanttSidebar: React.FC<Props> = (props) => {
|
||||
{(droppableProvided) => (
|
||||
<div ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
|
||||
<>
|
||||
{blocks ? (
|
||||
blocks.map((block, index) => {
|
||||
const isBlockVisibleOnSidebar = block.start_date && block.target_date;
|
||||
|
||||
// hide the block if it doesn't have start and target dates and showAllBlocks is false
|
||||
if (!showAllBlocks && !isBlockVisibleOnSidebar) return;
|
||||
|
||||
return (
|
||||
<Draggable
|
||||
key={`sidebar-block-${block.id}`}
|
||||
draggableId={`sidebar-block-${block.id}`}
|
||||
index={index}
|
||||
isDragDisabled={!enableReorder}
|
||||
>
|
||||
{(provided, snapshot) => (
|
||||
<IssuesSidebarBlock
|
||||
block={block}
|
||||
{blockIds ? (
|
||||
<>
|
||||
{blockIds.map((blockId, index) => (
|
||||
<IssueDraggableBlock
|
||||
blockId={blockId}
|
||||
enableReorder={enableReorder}
|
||||
provided={provided}
|
||||
snapshot={snapshot}
|
||||
index={index}
|
||||
showAllBlocks={showAllBlocks}
|
||||
getBlockById={getBlockById}
|
||||
/>
|
||||
))}
|
||||
{canLoadMoreBlocks && (
|
||||
<span ref={intersectionRef} className="h-5 w-10 bg-custom-background-80 rounded animate-pulse" />
|
||||
)}
|
||||
</Draggable>
|
||||
);
|
||||
})
|
||||
</>
|
||||
) : (
|
||||
<Loader className="space-y-3 pr-2">
|
||||
<Loader.Item height="34px" />
|
||||
@ -104,4 +115,4 @@ export const IssueGanttSidebar: React.FC<Props> = (props) => {
|
||||
</Droppable>
|
||||
</DragDropContext>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
@ -2,22 +2,23 @@ import { DragDropContext, Draggable, Droppable, DropResult } from "@hello-pangea
|
||||
// ui
|
||||
import { Loader } from "@plane/ui";
|
||||
// components
|
||||
import { IBlockUpdateData, IGanttBlock } from "components/gantt-chart";
|
||||
import { ChartDataType, IBlockUpdateData, IGanttBlock } from "components/gantt-chart";
|
||||
import { ModulesSidebarBlock } from "./block";
|
||||
// types
|
||||
|
||||
type Props = {
|
||||
title: string;
|
||||
blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
|
||||
blocks: IGanttBlock[] | null;
|
||||
getBlockById: (id: string, currentViewData?: ChartDataType | undefined) => IGanttBlock;
|
||||
blockIds: string[];
|
||||
enableReorder: boolean;
|
||||
};
|
||||
|
||||
export const ModuleGanttSidebar: React.FC<Props> = (props) => {
|
||||
const { blockUpdateHandler, blocks, enableReorder } = props;
|
||||
const { blockUpdateHandler, blockIds, getBlockById, enableReorder } = props;
|
||||
|
||||
const handleOrderChange = (result: DropResult) => {
|
||||
if (!blocks) return;
|
||||
if (!blockIds) return;
|
||||
|
||||
const { source, destination } = result;
|
||||
|
||||
@ -27,29 +28,30 @@ export const ModuleGanttSidebar: React.FC<Props> = (props) => {
|
||||
// return if dropped on the same index
|
||||
if (source.index === destination.index) return;
|
||||
|
||||
let updatedSortOrder = blocks[source.index].sort_order;
|
||||
let updatedSortOrder = getBlockById(blockIds[source.index]).sort_order;
|
||||
|
||||
// update the sort order to the lowest if dropped at the top
|
||||
if (destination.index === 0) updatedSortOrder = blocks[0].sort_order - 1000;
|
||||
if (destination.index === 0) updatedSortOrder = getBlockById(blockIds[0]).sort_order - 1000;
|
||||
// update the sort order to the highest if dropped at the bottom
|
||||
else if (destination.index === blocks.length - 1) updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000;
|
||||
else if (destination.index === blockIds.length - 1)
|
||||
updatedSortOrder = getBlockById(blockIds[blockIds.length - 1]).sort_order + 1000;
|
||||
// update the sort order to the average of the two adjacent blocks if dropped in between
|
||||
else {
|
||||
const destinationSortingOrder = blocks[destination.index].sort_order;
|
||||
const destinationSortingOrder = getBlockById(blockIds[destination.index]).sort_order;
|
||||
const relativeDestinationSortingOrder =
|
||||
source.index < destination.index
|
||||
? blocks[destination.index + 1].sort_order
|
||||
: blocks[destination.index - 1].sort_order;
|
||||
? getBlockById(blockIds[destination.index + 1]).sort_order
|
||||
: getBlockById(blockIds[destination.index - 1]).sort_order;
|
||||
|
||||
updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
|
||||
}
|
||||
|
||||
// extract the element from the source index and insert it at the destination index without updating the entire array
|
||||
const removedElement = blocks.splice(source.index, 1)[0];
|
||||
blocks.splice(destination.index, 0, removedElement);
|
||||
const removedElement = blockIds.splice(source.index, 1)[0];
|
||||
blockIds.splice(destination.index, 0, removedElement);
|
||||
|
||||
// call the block update handler with the updated sort order, new and old index
|
||||
blockUpdateHandler(removedElement.data, {
|
||||
blockUpdateHandler(getBlockById(removedElement).data, {
|
||||
sort_order: {
|
||||
destinationIndex: destination.index,
|
||||
newSortOrder: updatedSortOrder,
|
||||
@ -64,8 +66,10 @@ export const ModuleGanttSidebar: React.FC<Props> = (props) => {
|
||||
{(droppableProvided) => (
|
||||
<div className="h-full" ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
|
||||
<>
|
||||
{blocks ? (
|
||||
blocks.map((block, index) => (
|
||||
{blockIds ? (
|
||||
blockIds.map((blockId, index) => {
|
||||
const block = getBlockById(blockId);
|
||||
return (
|
||||
<Draggable
|
||||
key={`sidebar-block-${block.id}`}
|
||||
draggableId={`sidebar-block-${block.id}`}
|
||||
@ -81,7 +85,8 @@ export const ModuleGanttSidebar: React.FC<Props> = (props) => {
|
||||
/>
|
||||
)}
|
||||
</Draggable>
|
||||
))
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<Loader className="space-y-3 pr-2">
|
||||
<Loader.Item height="34px" />
|
||||
|
||||
@ -1,19 +1,35 @@
|
||||
// components
|
||||
import { IBlockUpdateData, IGanttBlock } from "components/gantt-chart";
|
||||
import { ChartDataType, IBlockUpdateData, IGanttBlock } from "components/gantt-chart";
|
||||
// constants
|
||||
import { HEADER_HEIGHT, SIDEBAR_WIDTH } from "../constants";
|
||||
import { RefObject } from "react";
|
||||
|
||||
type Props = {
|
||||
blocks: IGanttBlock[] | null;
|
||||
blockIds: string[];
|
||||
blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
|
||||
canLoadMoreBlocks?: boolean;
|
||||
loadMoreBlocks?: () => void;
|
||||
ganttContainerRef: RefObject<HTMLDivElement>;
|
||||
enableReorder: boolean;
|
||||
sidebarToRender: (props: any) => React.ReactNode;
|
||||
title: string;
|
||||
getBlockById: (id: string, currentViewData?: ChartDataType | undefined) => IGanttBlock;
|
||||
quickAdd?: React.JSX.Element | undefined;
|
||||
};
|
||||
|
||||
export const GanttChartSidebar: React.FC<Props> = (props) => {
|
||||
const { blocks, blockUpdateHandler, enableReorder, sidebarToRender, title, quickAdd } = props;
|
||||
const {
|
||||
blockIds,
|
||||
blockUpdateHandler,
|
||||
enableReorder,
|
||||
sidebarToRender,
|
||||
getBlockById,
|
||||
loadMoreBlocks,
|
||||
canLoadMoreBlocks,
|
||||
ganttContainerRef,
|
||||
title,
|
||||
quickAdd,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -35,7 +51,17 @@ export const GanttChartSidebar: React.FC<Props> = (props) => {
|
||||
</div>
|
||||
|
||||
<div className="min-h-full h-max bg-custom-background-100 overflow-x-hidden overflow-y-auto">
|
||||
{sidebarToRender && sidebarToRender({ title, blockUpdateHandler, blocks, enableReorder })}
|
||||
{sidebarToRender &&
|
||||
sidebarToRender({
|
||||
title,
|
||||
blockUpdateHandler,
|
||||
blockIds,
|
||||
getBlockById,
|
||||
enableReorder,
|
||||
canLoadMoreBlocks,
|
||||
ganttContainerRef,
|
||||
loadMoreBlocks,
|
||||
})}
|
||||
</div>
|
||||
{quickAdd ? quickAdd : null}
|
||||
</div>
|
||||
|
||||
@ -6,8 +6,8 @@ export interface IGanttBlock {
|
||||
width: number;
|
||||
};
|
||||
sort_order: number;
|
||||
start_date: Date | null;
|
||||
target_date: Date | null;
|
||||
start_date: Date | undefined;
|
||||
target_date: Date | undefined;
|
||||
}
|
||||
|
||||
export interface IBlockUpdateData {
|
||||
|
||||
@ -167,7 +167,7 @@ export const getMonthChartItemPositionWidthInMonth = (chartData: ChartDataType,
|
||||
const { startDate } = chartData.data;
|
||||
const { start_date: itemStartDate, target_date: itemTargetDate } = itemData;
|
||||
|
||||
if (!itemStartDate || !itemTargetDate) return null;
|
||||
if (!itemStartDate || !itemTargetDate) return;
|
||||
|
||||
startDate.setHours(0, 0, 0, 0);
|
||||
itemStartDate.setHours(0, 0, 0, 0);
|
||||
|
||||
@ -223,7 +223,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
className="group w-3/5 flex-grow"
|
||||
buttonContainerClassName="w-full text-left"
|
||||
buttonClassName={`text-sm justify-between ${
|
||||
issue?.assignee_ids.length > 0 ? "" : "text-custom-text-400"
|
||||
issue?.assignee_ids?.length > 0 ? "" : "text-custom-text-400"
|
||||
}`}
|
||||
hideIcon={issue.assignee_ids?.length === 0}
|
||||
dropdownArrow
|
||||
|
||||
@ -12,7 +12,7 @@ import { useCalendarView, useIssues, useUser } from "hooks/store";
|
||||
import { useIssuesActions } from "hooks/use-issues-actions";
|
||||
// ui
|
||||
// types
|
||||
import { EIssueLayoutTypes, EIssuesStoreType, IssueGroupByOptions } from "constants/issue";
|
||||
import { EIssueLayoutTypes, EIssuesStoreType, EIssueGroupByToServerOptions } from "constants/issue";
|
||||
import { IQuickActionProps } from "../list/list-view-types";
|
||||
import { handleDragDrop } from "./utils";
|
||||
import { EUserProjectRoles } from "constants/project";
|
||||
@ -68,14 +68,14 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
|
||||
|
||||
useSWR(
|
||||
startDate && endDate && layout ? `ISSUE_CALENDAR_LAYOUT_${storeType}_${startDate}_${endDate}_${layout}` : null,
|
||||
startDate && endDate
|
||||
startDate && endDate && layout
|
||||
? () =>
|
||||
fetchIssues("init-loader", {
|
||||
canGroup: true,
|
||||
perPageCount: layout === "month" ? 4 : 30,
|
||||
before: endDate,
|
||||
after: startDate,
|
||||
groupedBy: IssueGroupByOptions["target_date"],
|
||||
groupedBy: EIssueGroupByToServerOptions["target_date"],
|
||||
})
|
||||
: null,
|
||||
{
|
||||
@ -112,9 +112,12 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
|
||||
}
|
||||
};
|
||||
|
||||
const loadMoreIssues = useCallback(() => {
|
||||
fetchNextIssues();
|
||||
}, [fetchNextIssues]);
|
||||
const loadMoreIssues = useCallback(
|
||||
(dateString: string) => {
|
||||
fetchNextIssues(dateString);
|
||||
},
|
||||
[fetchNextIssues]
|
||||
);
|
||||
|
||||
return (
|
||||
<IssueLayoutHOC storeType={storeType} layout={EIssueLayoutTypes.CALENDAR}>
|
||||
@ -142,6 +145,8 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
|
||||
/>
|
||||
)}
|
||||
loadMoreIssues={loadMoreIssues}
|
||||
getPaginationData={issues.getPaginationData}
|
||||
getGroupIssueCount={issues.getGroupIssueCount}
|
||||
addIssuesToView={addIssuesToView}
|
||||
quickAddCallback={issues.quickAddIssue}
|
||||
viewId={viewId}
|
||||
|
||||
@ -13,6 +13,7 @@ import {
|
||||
TIssue,
|
||||
TIssueKanbanFilters,
|
||||
TIssueMap,
|
||||
TPaginationData,
|
||||
} from "@plane/types";
|
||||
import { ICalendarWeek } from "./types";
|
||||
// constants
|
||||
@ -33,7 +34,9 @@ type Props = {
|
||||
layout: "month" | "week" | undefined;
|
||||
showWeekends: boolean;
|
||||
issueCalendarView: ICalendarStore;
|
||||
loadMoreIssues: () => void;
|
||||
loadMoreIssues: (dateString: string) => void;
|
||||
getPaginationData: (groupId: string | undefined) => TPaginationData | undefined;
|
||||
getGroupIssueCount: (groupId: string | undefined) => number | undefined;
|
||||
quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
|
||||
quickAddCallback?: (
|
||||
workspaceSlug: string,
|
||||
@ -63,6 +66,8 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
|
||||
quickActions,
|
||||
quickAddCallback,
|
||||
addIssuesToView,
|
||||
getPaginationData,
|
||||
getGroupIssueCount,
|
||||
viewId,
|
||||
updateFilters,
|
||||
readOnly = false,
|
||||
@ -108,6 +113,8 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
|
||||
issues={issues}
|
||||
groupedIssueIds={groupedIssueIds}
|
||||
loadMoreIssues={loadMoreIssues}
|
||||
getPaginationData={getPaginationData}
|
||||
getGroupIssueCount={getGroupIssueCount}
|
||||
enableQuickIssueCreate
|
||||
disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
|
||||
quickActions={quickActions}
|
||||
@ -126,6 +133,8 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
|
||||
issues={issues}
|
||||
groupedIssueIds={groupedIssueIds}
|
||||
loadMoreIssues={loadMoreIssues}
|
||||
getPaginationData={getPaginationData}
|
||||
getGroupIssueCount={getGroupIssueCount}
|
||||
enableQuickIssueCreate
|
||||
disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
|
||||
quickActions={quickActions}
|
||||
|
||||
@ -12,14 +12,16 @@ import { ICycleIssuesFilter } from "store/issue/cycle";
|
||||
import { IModuleIssuesFilter } from "store/issue/module";
|
||||
import { IProjectIssuesFilter } from "store/issue/project";
|
||||
import { IProjectViewIssuesFilter } from "store/issue/project-views";
|
||||
import { TGroupedIssues, TIssue, TIssueMap } from "@plane/types";
|
||||
import { TGroupedIssues, TIssue, TIssueMap, TPaginationData } from "@plane/types";
|
||||
|
||||
type Props = {
|
||||
issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
|
||||
date: ICalendarDate;
|
||||
issues: TIssueMap | undefined;
|
||||
groupedIssueIds: TGroupedIssues;
|
||||
loadMoreIssues: () => void;
|
||||
loadMoreIssues: (dateString: string) => void;
|
||||
getPaginationData: (groupId: string | undefined) => TPaginationData | undefined;
|
||||
getGroupIssueCount: (groupId: string | undefined) => number | undefined;
|
||||
quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
|
||||
enableQuickIssueCreate?: boolean;
|
||||
disableIssueCreation?: boolean;
|
||||
@ -41,6 +43,8 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
|
||||
issues,
|
||||
groupedIssueIds,
|
||||
loadMoreIssues,
|
||||
getPaginationData,
|
||||
getGroupIssueCount,
|
||||
quickActions,
|
||||
enableQuickIssueCreate,
|
||||
disableIssueCreation,
|
||||
@ -53,9 +57,12 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
|
||||
|
||||
const formattedDatePayload = renderFormattedPayloadDate(date.date);
|
||||
if (!formattedDatePayload) return null;
|
||||
const issueIdList = groupedIssueIds ? groupedIssueIds[formattedDatePayload] : null;
|
||||
const issueIds = groupedIssueIds?.[formattedDatePayload];
|
||||
const dayIssueCount = getGroupIssueCount(formattedDatePayload);
|
||||
const nextPageResults = getPaginationData(formattedDatePayload)?.nextPageResults;
|
||||
|
||||
const totalIssues = issueIdList?.issueCount ?? 0;
|
||||
const shouldLoadMore =
|
||||
nextPageResults === undefined && dayIssueCount !== undefined ? issueIds?.length < dayIssueCount : !!nextPageResults;
|
||||
|
||||
const isToday = date.date.toDateString() === new Date().toDateString();
|
||||
|
||||
@ -101,7 +108,7 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
|
||||
>
|
||||
<CalendarIssueBlocks
|
||||
issues={issues}
|
||||
issueIdList={issueIdList?.issueIds ?? []}
|
||||
issueIdList={issueIds ?? []}
|
||||
quickActions={quickActions}
|
||||
isDragDisabled={readOnly}
|
||||
/>
|
||||
@ -121,12 +128,12 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{totalIssues > (issueIdList?.issueIds?.length ?? 0) && (
|
||||
{shouldLoadMore && (
|
||||
<div className="flex items-center px-2.5 py-1">
|
||||
<button
|
||||
type="button"
|
||||
className="w-min whitespace-nowrap rounded text-xs px-1.5 py-1 text-custom-text-400 font-medium hover:bg-custom-background-80 hover:text-custom-text-300"
|
||||
onClick={loadMoreIssues}
|
||||
onClick={() => loadMoreIssues(formattedDatePayload)}
|
||||
>
|
||||
Load More
|
||||
</button>
|
||||
|
||||
@ -8,7 +8,7 @@ import { ICycleIssuesFilter } from "store/issue/cycle";
|
||||
import { IModuleIssuesFilter } from "store/issue/module";
|
||||
import { IProjectIssuesFilter } from "store/issue/project";
|
||||
import { IProjectViewIssuesFilter } from "store/issue/project-views";
|
||||
import { TGroupedIssues, TIssue, TIssueMap } from "@plane/types";
|
||||
import { TGroupedIssues, TIssue, TIssueMap, TPaginationData } from "@plane/types";
|
||||
import { ICalendarDate, ICalendarWeek } from "./types";
|
||||
|
||||
type Props = {
|
||||
@ -17,7 +17,9 @@ type Props = {
|
||||
groupedIssueIds: TGroupedIssues;
|
||||
week: ICalendarWeek | undefined;
|
||||
quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
|
||||
loadMoreIssues: () => void;
|
||||
loadMoreIssues: (dateString: string) => void;
|
||||
getPaginationData: (groupId: string | undefined) => TPaginationData | undefined;
|
||||
getGroupIssueCount: (groupId: string | undefined) => number | undefined;
|
||||
enableQuickIssueCreate?: boolean;
|
||||
disableIssueCreation?: boolean;
|
||||
quickAddCallback?: (
|
||||
@ -38,6 +40,8 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
|
||||
groupedIssueIds,
|
||||
week,
|
||||
loadMoreIssues,
|
||||
getPaginationData,
|
||||
getGroupIssueCount,
|
||||
quickActions,
|
||||
enableQuickIssueCreate,
|
||||
disableIssueCreation,
|
||||
@ -69,6 +73,8 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
|
||||
issues={issues}
|
||||
groupedIssueIds={groupedIssueIds}
|
||||
loadMoreIssues={loadMoreIssues}
|
||||
getPaginationData={getPaginationData}
|
||||
getGroupIssueCount={getGroupIssueCount}
|
||||
quickActions={quickActions}
|
||||
enableQuickIssueCreate={enableQuickIssueCreate}
|
||||
disableIssueCreation={disableIssueCreation}
|
||||
|
||||
@ -1,20 +1,23 @@
|
||||
import React from "react";
|
||||
import React, { useCallback } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useRouter } from "next/router";
|
||||
// hooks
|
||||
import { GanttChartRoot, IBlockUpdateData, IssueGanttSidebar } from "components/gantt-chart";
|
||||
import { ChartDataType, GanttChartRoot, IBlockUpdateData, IssueGanttSidebar } from "components/gantt-chart";
|
||||
import { GanttQuickAddIssueForm, IssueGanttBlock } from "components/issues";
|
||||
import { EUserProjectRoles } from "constants/project";
|
||||
import { renderIssueBlocksStructure } from "helpers/issue.helper";
|
||||
import { getIssueBlocksStructure } from "helpers/issue.helper";
|
||||
import { useIssues, useUser } from "hooks/store";
|
||||
import { useIssuesActions } from "hooks/use-issues-actions";
|
||||
// components
|
||||
// helpers
|
||||
// types
|
||||
import { TIssue, TUnGroupedIssues } from "@plane/types";
|
||||
import { TIssue } from "@plane/types";
|
||||
// constants
|
||||
import { EIssueLayoutTypes, EIssuesStoreType } from "constants/issue";
|
||||
import { IssueLayoutHOC } from "../issue-layout-HOC";
|
||||
import useSWR from "swr";
|
||||
import { getMonthChartItemPositionWidthInMonth } from "components/gantt-chart/views";
|
||||
import { ALL_ISSUES } from "store/issue/helpers/base-issues.store";
|
||||
|
||||
type GanttStoreType =
|
||||
| EIssuesStoreType.PROJECT
|
||||
@ -32,19 +35,42 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
const { issues, issuesFilter } = useIssues(storeType);
|
||||
const { updateIssue } = useIssuesActions(storeType);
|
||||
const { issues, issuesFilter, issueMap } = useIssues(storeType);
|
||||
const { fetchIssues, fetchNextIssues, updateIssue } = useIssuesActions(storeType);
|
||||
// store hooks
|
||||
const {
|
||||
membership: { currentProjectRole },
|
||||
} = useUser();
|
||||
const { issueMap } = useIssues();
|
||||
const appliedDisplayFilters = issuesFilter.issueFilters?.displayFilters;
|
||||
|
||||
const issueIds = (issues.groupedIssueIds ?? []) as TUnGroupedIssues;
|
||||
useSWR(`ISSUE_GANTT_LAYOUT_${storeType}`, () => fetchIssues("init-loader", { canGroup: false, perPageCount: 100 }), {
|
||||
revalidateOnFocus: false,
|
||||
revalidateOnReconnect: false,
|
||||
});
|
||||
|
||||
const issuesIds = (issues.groupedIssueIds?.[ALL_ISSUES] as string[]) ?? [];
|
||||
const nextPageResults = issues.getPaginationData(ALL_ISSUES)?.nextPageResults;
|
||||
|
||||
const { enableIssueCreation } = issues?.viewFlags || {};
|
||||
|
||||
const issuesArray = issueIds.map((id) => issueMap?.[id]);
|
||||
const loadMoreIssues = useCallback(() => {
|
||||
fetchNextIssues();
|
||||
}, [fetchNextIssues]);
|
||||
|
||||
const getBlockById = useCallback(
|
||||
(id: string, currentViewData?: ChartDataType | undefined) => {
|
||||
const issue = issueMap[id];
|
||||
const block = getIssueBlocksStructure(issue);
|
||||
if (currentViewData) {
|
||||
return {
|
||||
...block,
|
||||
position: getMonthChartItemPositionWidthInMonth(currentViewData, block),
|
||||
};
|
||||
}
|
||||
return block;
|
||||
},
|
||||
[issueMap]
|
||||
);
|
||||
|
||||
const updateIssueBlockStructure = async (issue: TIssue, data: IBlockUpdateData) => {
|
||||
if (!workspaceSlug) return;
|
||||
@ -64,7 +90,8 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
|
||||
border={false}
|
||||
title="Issues"
|
||||
loaderTitle="Issues"
|
||||
blocks={issues ? renderIssueBlocksStructure(issuesArray) : null}
|
||||
blockIds={issuesIds}
|
||||
getBlockById={getBlockById}
|
||||
blockUpdateHandler={updateIssueBlockStructure}
|
||||
blockToRender={(data: TIssue) => <IssueGanttBlock issueId={data.id} />}
|
||||
sidebarToRender={(props) => <IssueGanttSidebar {...props} showAllBlocks />}
|
||||
@ -78,6 +105,8 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
|
||||
<GanttQuickAddIssueForm quickAddCallback={issues.quickAddIssue} viewId={viewId} />
|
||||
) : undefined
|
||||
}
|
||||
loadMoreBlocks={loadMoreIssues}
|
||||
canLoadMoreBlocks={nextPageResults}
|
||||
showAllBlocks
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -9,6 +9,7 @@ import { EIssueLayoutTypes, EIssuesStoreType } from "constants/issue";
|
||||
import { useIssues } from "hooks/store";
|
||||
import { observer } from "mobx-react";
|
||||
import { IssueLayoutEmptyState } from "./empty-states";
|
||||
import { ALL_ISSUES } from "store/issue/helpers/base-issues.store";
|
||||
|
||||
const ActiveLoader = (props: { layout: EIssueLayoutTypes }) => {
|
||||
const { layout } = props;
|
||||
@ -43,7 +44,7 @@ export const IssueLayoutHOC = observer((props: Props) => {
|
||||
return <ActiveLoader layout={layout} />;
|
||||
}
|
||||
|
||||
if (issues.issueCount === 0) {
|
||||
if (issues.getGroupIssueCount(ALL_ISSUES) === 0) {
|
||||
return <IssueLayoutEmptyState storeType={storeType} />;
|
||||
}
|
||||
|
||||
|
||||
@ -75,27 +75,38 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
|
||||
updateFilters,
|
||||
} = useIssuesActions(storeType);
|
||||
|
||||
useSWR(`ISSUE_KANBAN_LAYOUT_${storeType}`, () => fetchIssues("init-loader", { canGroup: true, perPageCount: 30 }), {
|
||||
revalidateOnFocus: false,
|
||||
revalidateOnReconnect: false,
|
||||
});
|
||||
|
||||
const fetchMoreIssues = useCallback(() => {
|
||||
if (issues.loader !== "pagination") {
|
||||
fetchNextIssues();
|
||||
}
|
||||
}, [fetchNextIssues]);
|
||||
|
||||
const debouncedFetchMoreIssues = debounce(() => fetchMoreIssues(), 300, { leading: true, trailing: false });
|
||||
|
||||
const issueIds = issues?.groupedIssueIds;
|
||||
|
||||
const displayFilters = issuesFilter?.issueFilters?.displayFilters;
|
||||
const displayProperties = issuesFilter?.issueFilters?.displayProperties;
|
||||
|
||||
const sub_group_by: string | null = displayFilters?.sub_group_by || null;
|
||||
const group_by: string | null = displayFilters?.group_by || null;
|
||||
|
||||
useSWR(
|
||||
`ISSUE_KANBAN_LAYOUT_${storeType}_${group_by}_${sub_group_by}`,
|
||||
() => fetchIssues("init-loader", { canGroup: true, perPageCount: 30 }),
|
||||
{
|
||||
revalidateOnFocus: false,
|
||||
revalidateOnReconnect: false,
|
||||
}
|
||||
);
|
||||
|
||||
const fetchMoreIssues = useCallback(
|
||||
(groupId?: string, subgroupId?: string) => {
|
||||
if (issues.loader !== "pagination") {
|
||||
fetchNextIssues(groupId, subgroupId);
|
||||
}
|
||||
},
|
||||
[fetchNextIssues]
|
||||
);
|
||||
|
||||
const debouncedFetchMoreIssues = debounce(
|
||||
(groupId?: string, subgroupId?: string) => fetchMoreIssues(groupId, subgroupId),
|
||||
300,
|
||||
{ leading: true, trailing: false }
|
||||
);
|
||||
|
||||
const groupedIssueIds = issues?.groupedIssueIds;
|
||||
|
||||
const userDisplayFilters = displayFilters || null;
|
||||
|
||||
const KanBanView = sub_group_by ? KanBanSwimLanes : KanBan;
|
||||
@ -160,7 +171,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
|
||||
sub_group_by,
|
||||
group_by,
|
||||
issueMap,
|
||||
issueIds,
|
||||
groupedIssueIds,
|
||||
updateIssue,
|
||||
removeIssue
|
||||
).catch((err) => {
|
||||
@ -201,7 +212,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
|
||||
sub_group_by,
|
||||
group_by,
|
||||
issueMap,
|
||||
issueIds,
|
||||
groupedIssueIds,
|
||||
updateIssue,
|
||||
removeIssue
|
||||
).finally(() => {
|
||||
@ -271,7 +282,8 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
|
||||
<div className="h-max w-max">
|
||||
<KanBanView
|
||||
issuesMap={issueMap}
|
||||
issueIds={issueIds!}
|
||||
groupedIssueIds={groupedIssueIds ?? {}}
|
||||
getGroupIssueCount={issues.getGroupIssueCount}
|
||||
displayProperties={displayProperties}
|
||||
sub_group_by={sub_group_by}
|
||||
group_by={group_by}
|
||||
@ -282,6 +294,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
|
||||
enableQuickIssueCreate={enableQuickAdd}
|
||||
showEmptyGroup={userDisplayFilters?.show_empty_groups ?? true}
|
||||
quickAddCallback={issues?.quickAddIssue}
|
||||
getPaginationData={issues.getPaginationData}
|
||||
viewId={viewId}
|
||||
disableIssueCreation={!enableIssueCreation || !isEditingAllowed || isCompletedCycle}
|
||||
canEditProperties={canEditProperties}
|
||||
|
||||
@ -22,7 +22,9 @@ interface IssueBlockProps {
|
||||
isDragDisabled: boolean;
|
||||
draggableId: string;
|
||||
index: number;
|
||||
updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
|
||||
updateIssue:
|
||||
| ((projectId: string | null | undefined, issueId: string, data: Partial<TIssue>) => Promise<void>)
|
||||
| undefined;
|
||||
quickActions: (issue: TIssue) => React.ReactNode;
|
||||
canEditProperties: (projectId: string | undefined) => boolean;
|
||||
scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
|
||||
@ -33,7 +35,9 @@ interface IssueBlockProps {
|
||||
interface IssueDetailsBlockProps {
|
||||
issue: TIssue;
|
||||
displayProperties: IIssueDisplayProperties | undefined;
|
||||
updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
|
||||
updateIssue:
|
||||
| ((projectId: string | null | undefined, issueId: string, data: Partial<TIssue>) => Promise<void>)
|
||||
| undefined;
|
||||
quickActions: (issue: TIssue) => React.ReactNode;
|
||||
isReadOnly: boolean;
|
||||
}
|
||||
|
||||
@ -12,7 +12,9 @@ interface IssueBlocksListProps {
|
||||
issueIds: string[];
|
||||
displayProperties: IIssueDisplayProperties | undefined;
|
||||
isDragDisabled: boolean;
|
||||
updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
|
||||
updateIssue:
|
||||
| ((projectId: string | null | undefined, issueId: string, data: Partial<TIssue>) => Promise<void>)
|
||||
| undefined;
|
||||
quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
|
||||
canEditProperties: (projectId: string | undefined) => boolean;
|
||||
scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
|
||||
|
||||
@ -21,8 +21,8 @@ import {
|
||||
IIssueDisplayProperties,
|
||||
IIssueMap,
|
||||
TSubGroupedIssues,
|
||||
TUnGroupedIssues,
|
||||
TIssueKanbanFilters,
|
||||
TPaginationData,
|
||||
} from "@plane/types";
|
||||
// parent components
|
||||
import { getGroupByColumns } from "../utils";
|
||||
@ -33,17 +33,21 @@ import { KanbanStoreType } from "./base-kanban-root";
|
||||
|
||||
export interface IGroupByKanBan {
|
||||
issuesMap: IIssueMap;
|
||||
issueIds: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues;
|
||||
groupedIssueIds: TGroupedIssues | TSubGroupedIssues;
|
||||
getGroupIssueCount: (groupId: string | undefined) => number | undefined;
|
||||
getPaginationData: (groupId: string | undefined) => TPaginationData | undefined;
|
||||
displayProperties: IIssueDisplayProperties | undefined;
|
||||
sub_group_by: string | null;
|
||||
group_by: string | null;
|
||||
sub_group_id: string;
|
||||
isDragDisabled: boolean;
|
||||
updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
|
||||
updateIssue:
|
||||
| ((projectId: string | null | undefined, issueId: string, data: Partial<TIssue>) => Promise<void>)
|
||||
| undefined;
|
||||
quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
|
||||
kanbanFilters: TIssueKanbanFilters;
|
||||
handleKanbanFilters: any;
|
||||
loadMoreIssues: (() => void) | undefined;
|
||||
loadMoreIssues: (groupId?: string, subGroupId?: string) => void;
|
||||
enableQuickIssueCreate?: boolean;
|
||||
quickAddCallback?: (
|
||||
workspaceSlug: string,
|
||||
@ -64,7 +68,9 @@ export interface IGroupByKanBan {
|
||||
const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
|
||||
const {
|
||||
issuesMap,
|
||||
issueIds,
|
||||
groupedIssueIds,
|
||||
getGroupIssueCount,
|
||||
getPaginationData,
|
||||
displayProperties,
|
||||
sub_group_by,
|
||||
group_by,
|
||||
@ -107,7 +113,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
|
||||
|
||||
if (!list) return null;
|
||||
|
||||
const groupWithIssues = list.filter((_list) => (issueIds as TGroupedIssues)?.[_list.id]?.issueCount > 0);
|
||||
const groupWithIssues = list.filter((_list) => (getGroupIssueCount(_list.id) ?? 0) > 0);
|
||||
|
||||
const groupList = showEmptyGroup ? list : groupWithIssues;
|
||||
|
||||
@ -143,7 +149,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
|
||||
column_id={_list.id}
|
||||
icon={_list.icon}
|
||||
title={_list.name}
|
||||
count={(issueIds as TGroupedIssues)?.[_list.id]?.issueCount || 0}
|
||||
count={getGroupIssueCount(_list.id) ?? 0}
|
||||
issuePayload={_list.payload}
|
||||
disableIssueCreation={disableIssueCreation || isGroupByCreatedBy}
|
||||
storeType={storeType}
|
||||
@ -158,7 +164,9 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
|
||||
<KanbanGroup
|
||||
groupId={_list.id}
|
||||
issuesMap={issuesMap}
|
||||
issueIds={issueIds}
|
||||
groupedIssueIds={groupedIssueIds}
|
||||
getGroupIssueCount={getGroupIssueCount}
|
||||
getPaginationData={getPaginationData}
|
||||
peekIssueId={peekIssue?.issueId ?? ""}
|
||||
displayProperties={displayProperties}
|
||||
sub_group_by={sub_group_by}
|
||||
@ -187,16 +195,20 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
|
||||
|
||||
export interface IKanBan {
|
||||
issuesMap: IIssueMap;
|
||||
issueIds: TGroupedIssues | TSubGroupedIssues;
|
||||
groupedIssueIds: TGroupedIssues | TSubGroupedIssues;
|
||||
getGroupIssueCount: (groupId: string | undefined) => number | undefined;
|
||||
getPaginationData: (groupId: string | undefined) => TPaginationData | undefined;
|
||||
displayProperties: IIssueDisplayProperties | undefined;
|
||||
sub_group_by: string | null;
|
||||
group_by: string | null;
|
||||
sub_group_id?: string;
|
||||
updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
|
||||
updateIssue:
|
||||
| ((projectId: string | null | undefined, issueId: string, data: Partial<TIssue>) => Promise<void>)
|
||||
| undefined;
|
||||
quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
|
||||
kanbanFilters: TIssueKanbanFilters;
|
||||
handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void;
|
||||
loadMoreIssues: (() => void) | undefined;
|
||||
loadMoreIssues: (groupId?: string, subGroupId?: string) => void;
|
||||
showEmptyGroup: boolean;
|
||||
enableQuickIssueCreate?: boolean;
|
||||
quickAddCallback?: (
|
||||
@ -217,7 +229,9 @@ export interface IKanBan {
|
||||
export const KanBan: React.FC<IKanBan> = observer((props) => {
|
||||
const {
|
||||
issuesMap,
|
||||
issueIds,
|
||||
groupedIssueIds,
|
||||
getGroupIssueCount,
|
||||
getPaginationData,
|
||||
displayProperties,
|
||||
sub_group_by,
|
||||
group_by,
|
||||
@ -244,7 +258,9 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
|
||||
return (
|
||||
<GroupByKanBan
|
||||
issuesMap={issuesMap}
|
||||
issueIds={issueIds}
|
||||
groupedIssueIds={groupedIssueIds}
|
||||
getGroupIssueCount={getGroupIssueCount}
|
||||
getPaginationData={getPaginationData}
|
||||
displayProperties={displayProperties}
|
||||
group_by={group_by}
|
||||
sub_group_by={sub_group_by}
|
||||
|
||||
@ -10,23 +10,28 @@ import {
|
||||
IIssueDisplayProperties,
|
||||
IIssueMap,
|
||||
TSubGroupedIssues,
|
||||
TUnGroupedIssues,
|
||||
TPaginationData,
|
||||
} from "@plane/types";
|
||||
import { KanbanIssueBlocksList, KanBanQuickAddIssueForm } from ".";
|
||||
import { KanbanIssueBlockLoader } from "components/ui/loader";
|
||||
import { useIntersectionObserver } from "hooks/use-intersection-observer";
|
||||
import { observer } from "mobx-react";
|
||||
|
||||
interface IKanbanGroup {
|
||||
groupId: string;
|
||||
issuesMap: IIssueMap;
|
||||
peekIssueId?: string;
|
||||
issueIds: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues;
|
||||
groupedIssueIds: TGroupedIssues | TSubGroupedIssues;
|
||||
getGroupIssueCount: (groupId: string | undefined) => number | undefined;
|
||||
getPaginationData: (groupId: string | undefined) => TPaginationData | undefined;
|
||||
displayProperties: IIssueDisplayProperties | undefined;
|
||||
sub_group_by: string | null;
|
||||
group_by: string | null;
|
||||
sub_group_id: string;
|
||||
isDragDisabled: boolean;
|
||||
updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
|
||||
updateIssue:
|
||||
| ((projectId: string | null | undefined, issueId: string, data: Partial<TIssue>) => Promise<void>)
|
||||
| undefined;
|
||||
quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
|
||||
enableQuickIssueCreate?: boolean;
|
||||
quickAddCallback?: (
|
||||
@ -35,7 +40,7 @@ interface IKanbanGroup {
|
||||
data: TIssue,
|
||||
viewId?: string
|
||||
) => Promise<TIssue | undefined>;
|
||||
loadMoreIssues: (() => void) | undefined;
|
||||
loadMoreIssues: (groupId?: string, subGroupId?: string) => void;
|
||||
viewId?: string;
|
||||
disableIssueCreation?: boolean;
|
||||
canEditProperties: (projectId: string | undefined) => boolean;
|
||||
@ -44,7 +49,7 @@ interface IKanbanGroup {
|
||||
isDragStarted?: boolean;
|
||||
}
|
||||
|
||||
export const KanbanGroup = (props: IKanbanGroup) => {
|
||||
export const KanbanGroup = observer((props: IKanbanGroup) => {
|
||||
const {
|
||||
groupId,
|
||||
sub_group_id,
|
||||
@ -52,7 +57,9 @@ export const KanbanGroup = (props: IKanbanGroup) => {
|
||||
sub_group_by,
|
||||
issuesMap,
|
||||
displayProperties,
|
||||
issueIds,
|
||||
groupedIssueIds,
|
||||
getGroupIssueCount,
|
||||
getPaginationData,
|
||||
peekIssueId,
|
||||
isDragDisabled,
|
||||
updateIssue,
|
||||
@ -125,6 +132,23 @@ export const KanbanGroup = (props: IKanbanGroup) => {
|
||||
return preloadedData;
|
||||
};
|
||||
|
||||
const isSubGroup = !!sub_group_id && sub_group_id !== "null";
|
||||
|
||||
const issueIds = isSubGroup
|
||||
? (groupedIssueIds as TSubGroupedIssues)[groupId][sub_group_id]
|
||||
: (groupedIssueIds as TGroupedIssues)[groupId];
|
||||
|
||||
const groupIssueCount = isSubGroup ? getGroupIssueCount(sub_group_id) : getGroupIssueCount(groupId);
|
||||
|
||||
const nextPageResults = isSubGroup
|
||||
? getPaginationData(sub_group_id)?.nextPageResults
|
||||
: getPaginationData(groupId)?.nextPageResults;
|
||||
|
||||
const shouldLoadMore =
|
||||
nextPageResults === undefined && groupIssueCount !== undefined
|
||||
? issueIds?.length < groupIssueCount
|
||||
: !!nextPageResults;
|
||||
|
||||
return (
|
||||
<div className={`relative w-full h-full transition-all`}>
|
||||
<Droppable droppableId={`${groupId}__${sub_group_id}`}>
|
||||
@ -139,7 +163,7 @@ export const KanbanGroup = (props: IKanbanGroup) => {
|
||||
columnId={groupId}
|
||||
issuesMap={issuesMap}
|
||||
peekIssueId={peekIssueId}
|
||||
issueIds={(issueIds as TGroupedIssues)?.[groupId]?.issueIds || []}
|
||||
issueIds={issueIds}
|
||||
displayProperties={displayProperties}
|
||||
isDragDisabled={isDragDisabled}
|
||||
updateIssue={updateIssue}
|
||||
@ -151,7 +175,17 @@ export const KanbanGroup = (props: IKanbanGroup) => {
|
||||
|
||||
{provided.placeholder}
|
||||
|
||||
{loadMoreIssues && <KanbanIssueBlockLoader ref={intersectionRef} />}
|
||||
{shouldLoadMore && isSubGroup ? (
|
||||
<div
|
||||
className="w-full sticky bottom-0 p-3 text-sm text-custom-primary-100 hover:underline cursor-pointer"
|
||||
onClick={() => loadMoreIssues(groupId, sub_group_id)}
|
||||
>
|
||||
{" "}
|
||||
Load more ↓
|
||||
</div>
|
||||
) : (
|
||||
<KanbanIssueBlockLoader ref={intersectionRef} />
|
||||
)}
|
||||
|
||||
{enableQuickIssueCreate && !disableIssueCreation && (
|
||||
<div className="w-full bg-custom-background-90 py-0.5 sticky bottom-0">
|
||||
@ -172,4 +206,4 @@ export const KanbanGroup = (props: IKanbanGroup) => {
|
||||
</Droppable>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
@ -10,8 +10,9 @@ import {
|
||||
IIssueDisplayProperties,
|
||||
IIssueMap,
|
||||
TSubGroupedIssues,
|
||||
TUnGroupedIssues,
|
||||
TIssueKanbanFilters,
|
||||
TGroupedIssueCount,
|
||||
TPaginationData,
|
||||
} from "@plane/types";
|
||||
import { getGroupByColumns } from "../utils";
|
||||
import { KanBan } from "./default";
|
||||
@ -22,7 +23,7 @@ import { KanbanStoreType } from "./base-kanban-root";
|
||||
// constants
|
||||
|
||||
interface ISubGroupSwimlaneHeader {
|
||||
issueIds: TGroupedIssues | TSubGroupedIssues;
|
||||
getGroupIssueCount: (groupId: string | undefined) => number | undefined;
|
||||
sub_group_by: string | null;
|
||||
group_by: string | null;
|
||||
list: IGroupByColumn[];
|
||||
@ -31,16 +32,8 @@ interface ISubGroupSwimlaneHeader {
|
||||
storeType: KanbanStoreType;
|
||||
}
|
||||
|
||||
const getSubGroupHeaderIssuesCount = (issueIds: TSubGroupedIssues, groupById: string) => {
|
||||
let headerCount = 0;
|
||||
Object.keys(issueIds).map((groupState) => {
|
||||
headerCount = headerCount + (issueIds?.[groupState]?.[groupById]?.issueCount || 0);
|
||||
});
|
||||
return headerCount;
|
||||
};
|
||||
|
||||
const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
|
||||
issueIds,
|
||||
getGroupIssueCount,
|
||||
sub_group_by,
|
||||
group_by,
|
||||
storeType,
|
||||
@ -59,7 +52,7 @@ const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
|
||||
column_id={_list.id}
|
||||
icon={_list.icon}
|
||||
title={_list.name}
|
||||
count={getSubGroupHeaderIssuesCount(issueIds as TSubGroupedIssues, _list?.id)}
|
||||
count={getGroupIssueCount(_list?.id) ?? 0}
|
||||
kanbanFilters={kanbanFilters}
|
||||
handleKanbanFilters={handleKanbanFilters}
|
||||
issuePayload={_list.payload}
|
||||
@ -72,10 +65,14 @@ const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
|
||||
|
||||
interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
|
||||
issuesMap: IIssueMap;
|
||||
issueIds: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues;
|
||||
groupedIssueIds: TGroupedIssues | TSubGroupedIssues;
|
||||
getGroupIssueCount: (groupId: string | undefined) => number | undefined;
|
||||
getPaginationData: (groupId: string | undefined) => TPaginationData | undefined;
|
||||
showEmptyGroup: boolean;
|
||||
displayProperties: IIssueDisplayProperties | undefined;
|
||||
updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
|
||||
updateIssue:
|
||||
| ((projectId: string | null | undefined, issueId: string, data: Partial<TIssue>) => Promise<void>)
|
||||
| undefined;
|
||||
quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
|
||||
kanbanFilters: TIssueKanbanFilters;
|
||||
handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void;
|
||||
@ -93,12 +90,14 @@ interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
|
||||
) => Promise<TIssue | undefined>;
|
||||
viewId?: string;
|
||||
scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
|
||||
loadMoreIssues: (() => void) | undefined;
|
||||
loadMoreIssues: (groupId?: string, subGroupId?: string) => void;
|
||||
}
|
||||
const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
|
||||
const {
|
||||
issuesMap,
|
||||
issueIds,
|
||||
groupedIssueIds,
|
||||
getGroupIssueCount,
|
||||
getPaginationData,
|
||||
sub_group_by,
|
||||
group_by,
|
||||
list,
|
||||
@ -119,22 +118,12 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
|
||||
isDragStarted,
|
||||
} = props;
|
||||
|
||||
const calculateIssueCount = (column_id: string) => {
|
||||
let issueCount = 0;
|
||||
const subGroupedIds = issueIds as TSubGroupedIssues;
|
||||
subGroupedIds?.[column_id] &&
|
||||
Object.keys(subGroupedIds?.[column_id])?.forEach((_list: any) => {
|
||||
issueCount += subGroupedIds?.[column_id]?.[_list]?.issueCount || 0;
|
||||
});
|
||||
return issueCount;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative h-max min-h-full w-full">
|
||||
{list &&
|
||||
list.length > 0 &&
|
||||
list.map((_list: any, index: number) => {
|
||||
const isLastSubGroup = index === list.length - 1;
|
||||
list.map((_list: any) => {
|
||||
const issueCount = getGroupIssueCount(_list.id) ?? 0;
|
||||
return (
|
||||
<div key={_list.id} className="flex flex-shrink-0 flex-col">
|
||||
<div className="sticky top-[50px] z-[1] flex w-full items-center bg-custom-background-90 py-1">
|
||||
@ -143,7 +132,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
|
||||
column_id={_list.id}
|
||||
icon={_list.Icon}
|
||||
title={_list.name || ""}
|
||||
count={calculateIssueCount(_list.id)}
|
||||
count={issueCount}
|
||||
kanbanFilters={kanbanFilters}
|
||||
handleKanbanFilters={handleKanbanFilters}
|
||||
/>
|
||||
@ -155,7 +144,9 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
|
||||
<div className="relative">
|
||||
<KanBan
|
||||
issuesMap={issuesMap}
|
||||
issueIds={(issueIds as TSubGroupedIssues)?.[_list.id]}
|
||||
groupedIssueIds={groupedIssueIds}
|
||||
getGroupIssueCount={getGroupIssueCount}
|
||||
getPaginationData={getPaginationData}
|
||||
displayProperties={displayProperties}
|
||||
sub_group_by={sub_group_by}
|
||||
group_by={group_by}
|
||||
@ -173,7 +164,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
|
||||
scrollableContainerRef={scrollableContainerRef}
|
||||
isDragStarted={isDragStarted}
|
||||
storeType={storeType}
|
||||
loadMoreIssues={isLastSubGroup ? loadMoreIssues : undefined}
|
||||
loadMoreIssues={loadMoreIssues}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@ -186,15 +177,19 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
|
||||
|
||||
export interface IKanBanSwimLanes {
|
||||
issuesMap: IIssueMap;
|
||||
issueIds: TGroupedIssues | TSubGroupedIssues;
|
||||
groupedIssueIds: TGroupedIssues | TSubGroupedIssues;
|
||||
getGroupIssueCount: (groupId: string | undefined) => number | undefined;
|
||||
getPaginationData: (groupId: string | undefined) => TPaginationData | undefined;
|
||||
displayProperties: IIssueDisplayProperties | undefined;
|
||||
sub_group_by: string | null;
|
||||
group_by: string | null;
|
||||
updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
|
||||
updateIssue:
|
||||
| ((projectId: string | null | undefined, issueId: string, data: Partial<TIssue>) => Promise<void>)
|
||||
| undefined;
|
||||
quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
|
||||
kanbanFilters: TIssueKanbanFilters;
|
||||
handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void;
|
||||
loadMoreIssues: (() => void) | undefined;
|
||||
loadMoreIssues: (groupId?: string, subGroupId?: string) => void;
|
||||
showEmptyGroup: boolean;
|
||||
isDragStarted?: boolean;
|
||||
disableIssueCreation?: boolean;
|
||||
@ -215,7 +210,9 @@ export interface IKanBanSwimLanes {
|
||||
export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
|
||||
const {
|
||||
issuesMap,
|
||||
issueIds,
|
||||
groupedIssueIds,
|
||||
getGroupIssueCount,
|
||||
getPaginationData,
|
||||
displayProperties,
|
||||
sub_group_by,
|
||||
group_by,
|
||||
@ -268,7 +265,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
|
||||
<div className="relative">
|
||||
<div className="sticky top-0 z-[2] h-[50px] bg-custom-background-90">
|
||||
<SubGroupSwimlaneHeader
|
||||
issueIds={issueIds}
|
||||
getGroupIssueCount={getGroupIssueCount}
|
||||
group_by={group_by}
|
||||
sub_group_by={sub_group_by}
|
||||
kanbanFilters={kanbanFilters}
|
||||
@ -282,7 +279,9 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
|
||||
<SubGroupSwimlane
|
||||
issuesMap={issuesMap}
|
||||
list={subGroupByList}
|
||||
issueIds={issueIds}
|
||||
groupedIssueIds={groupedIssueIds}
|
||||
getPaginationData={getPaginationData}
|
||||
getGroupIssueCount={getGroupIssueCount}
|
||||
displayProperties={displayProperties}
|
||||
group_by={group_by}
|
||||
sub_group_by={sub_group_by}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { DraggableLocation } from "@hello-pangea/dnd";
|
||||
import { TGroupedIssues, IIssueMap, TSubGroupedIssues, TUnGroupedIssues, TIssue } from "@plane/types";
|
||||
import { TGroupedIssues, IIssueMap, TSubGroupedIssues, TIssue } from "@plane/types";
|
||||
|
||||
const handleSortOrder = (destinationIssues: string[], destinationIndex: number, issueMap: IIssueMap) => {
|
||||
const sortOrderDefaultValue = 65535;
|
||||
@ -44,7 +44,7 @@ export const handleDragDrop = async (
|
||||
subGroupBy: string | null,
|
||||
groupBy: string | null,
|
||||
issueMap: IIssueMap,
|
||||
issueWithIds: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues | undefined,
|
||||
issueWithIds: TGroupedIssues | TSubGroupedIssues | undefined,
|
||||
updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined,
|
||||
removeIssue: (projectId: string, issueId: string) => Promise<void> | undefined
|
||||
) => {
|
||||
|
||||
@ -5,13 +5,14 @@ import { EIssueLayoutTypes, EIssuesStoreType } from "constants/issue";
|
||||
import { EUserProjectRoles } from "constants/project";
|
||||
import { useIssues, useUser } from "hooks/store";
|
||||
|
||||
import { TGroupedIssues, TIssue, TUnGroupedIssues } from "@plane/types";
|
||||
import { TGroupedIssues, TIssue } from "@plane/types";
|
||||
// components
|
||||
import { List } from "./default";
|
||||
import { IQuickActionProps } from "./list-view-types";
|
||||
import { useIssuesActions } from "hooks/use-issues-actions";
|
||||
import { IssueLayoutHOC } from "../issue-layout-HOC";
|
||||
import useSWR from "swr";
|
||||
import { ALL_ISSUES } from "store/issue/helpers/base-issues.store";
|
||||
// constants
|
||||
// hooks
|
||||
|
||||
@ -51,14 +52,24 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
|
||||
|
||||
const { issueMap } = useIssues();
|
||||
|
||||
useSWR(`ISSUE_LIST_LAYOUT_${storeType}`, () => fetchIssues("init-loader", { canGroup: true, perPageCount: 100 }), {
|
||||
const displayFilters = issuesFilter?.issueFilters?.displayFilters;
|
||||
const displayProperties = issuesFilter?.issueFilters?.displayProperties;
|
||||
|
||||
const group_by = displayFilters?.group_by || null;
|
||||
const showEmptyGroup = displayFilters?.show_empty_groups ?? false;
|
||||
|
||||
useSWR(
|
||||
`ISSUE_LIST_LAYOUT_${storeType}_${group_by}`,
|
||||
() => fetchIssues("init-loader", { canGroup: true, perPageCount: 50 }),
|
||||
{
|
||||
revalidateOnFocus: false,
|
||||
revalidateOnReconnect: false,
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
|
||||
|
||||
const issueIds = issues?.groupedIssueIds as TGroupedIssues | undefined;
|
||||
const groupedIssueIds = issues?.groupedIssueIds as TGroupedIssues | undefined;
|
||||
|
||||
const { enableInlineEditing, enableQuickAdd, enableIssueCreation } = issues?.viewFlags || {};
|
||||
const canEditProperties = useCallback(
|
||||
@ -71,12 +82,6 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
|
||||
[canEditPropertiesBasedOnProject, enableInlineEditing, isEditingAllowed]
|
||||
);
|
||||
|
||||
const displayFilters = issuesFilter?.issueFilters?.displayFilters;
|
||||
const displayProperties = issuesFilter?.issueFilters?.displayProperties;
|
||||
|
||||
const group_by = displayFilters?.group_by || null;
|
||||
const showEmptyGroup = displayFilters?.show_empty_groups ?? false;
|
||||
|
||||
const renderQuickActions = useCallback(
|
||||
(issue: TIssue) => (
|
||||
<QuickActions
|
||||
@ -93,9 +98,12 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
|
||||
[isEditingAllowed, isCompletedCycle, removeIssue, updateIssue, removeIssueFromView, archiveIssue, restoreIssue]
|
||||
);
|
||||
|
||||
const loadMoreIssues = useCallback(() => {
|
||||
fetchNextIssues();
|
||||
}, [fetchNextIssues]);
|
||||
const loadMoreIssues = useCallback(
|
||||
(groupId?: string) => {
|
||||
fetchNextIssues(groupId);
|
||||
},
|
||||
[fetchNextIssues]
|
||||
);
|
||||
|
||||
return (
|
||||
<IssueLayoutHOC storeType={storeType} layout={EIssueLayoutTypes.LIST}>
|
||||
@ -106,11 +114,12 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
|
||||
group_by={group_by}
|
||||
updateIssue={updateIssue}
|
||||
quickActions={renderQuickActions}
|
||||
issueIds={issueIds!}
|
||||
shouldLoadMore={issues.next_page_results}
|
||||
groupedIssueIds={groupedIssueIds ?? {}}
|
||||
loadMoreIssues={loadMoreIssues}
|
||||
showEmptyGroup={showEmptyGroup}
|
||||
viewId={viewId}
|
||||
getPaginationData={issues.getPaginationData}
|
||||
getGroupIssueCount={issues.getGroupIssueCount}
|
||||
quickAddCallback={issues?.quickAddIssue}
|
||||
enableIssueQuickAdd={!!enableQuickAdd}
|
||||
canEditProperties={canEditProperties}
|
||||
|
||||
@ -13,7 +13,9 @@ import { IssueProperties } from "../properties/all-properties";
|
||||
interface IssueBlockProps {
|
||||
issueId: string;
|
||||
issuesMap: TIssueMap;
|
||||
updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
|
||||
updateIssue:
|
||||
| ((projectId: string | null | undefined, issueId: string, data: Partial<TIssue>) => Promise<void>)
|
||||
| undefined;
|
||||
quickActions: (issue: TIssue) => React.ReactNode;
|
||||
displayProperties: IIssueDisplayProperties | undefined;
|
||||
canEditProperties: (projectId: string | undefined) => boolean;
|
||||
|
||||
@ -3,19 +3,22 @@ import { FC, MutableRefObject } from "react";
|
||||
import RenderIfVisible from "components/core/render-if-visible-HOC";
|
||||
import { IssueBlock } from "components/issues";
|
||||
// types
|
||||
import { TGroupedIssues, TIssue, IIssueDisplayProperties, TIssueMap, TUnGroupedIssues } from "@plane/types";
|
||||
import { TGroupedIssues, TIssue, IIssueDisplayProperties, TIssueMap } from "@plane/types";
|
||||
import { observer } from "mobx-react";
|
||||
|
||||
interface Props {
|
||||
issueIds: TGroupedIssues | TUnGroupedIssues | any;
|
||||
issueIds: TGroupedIssues | any;
|
||||
issuesMap: TIssueMap;
|
||||
canEditProperties: (projectId: string | undefined) => boolean;
|
||||
updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
|
||||
updateIssue:
|
||||
| ((projectId: string | null | undefined, issueId: string, data: Partial<TIssue>) => Promise<void>)
|
||||
| undefined;
|
||||
quickActions: (issue: TIssue) => React.ReactNode;
|
||||
displayProperties: IIssueDisplayProperties | undefined;
|
||||
containerRef: MutableRefObject<HTMLDivElement | null>;
|
||||
}
|
||||
|
||||
export const IssueBlocksList: FC<Props> = (props) => {
|
||||
export const IssueBlocksList: FC<Props> = observer((props) => {
|
||||
const { issueIds, issuesMap, updateIssue, quickActions, displayProperties, canEditProperties, containerRef } = props;
|
||||
|
||||
return (
|
||||
@ -47,4 +50,4 @@ export const IssueBlocksList: FC<Props> = (props) => {
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { useRef } from "react";
|
||||
import { useCallback, useRef } from "react";
|
||||
// components
|
||||
import { IssueBlocksList, ListQuickAddIssueForm } from "components/issues";
|
||||
// hooks
|
||||
@ -11,26 +11,31 @@ import {
|
||||
TIssue,
|
||||
IIssueDisplayProperties,
|
||||
TIssueMap,
|
||||
TUnGroupedIssues,
|
||||
IGroupByColumn,
|
||||
TIssueGroup,
|
||||
TPaginationData,
|
||||
} from "@plane/types";
|
||||
import { getGroupByColumns } from "../utils";
|
||||
import { HeaderGroupByCard } from "./headers/group-by-card";
|
||||
import { EIssuesStoreType } from "constants/issue";
|
||||
import { ArrowDown } from "lucide-react";
|
||||
import { ListLoaderItemRow } from "components/ui";
|
||||
import { useIntersectionObserver } from "hooks/use-intersection-observer";
|
||||
import { ALL_ISSUES } from "store/issue/helpers/base-issues.store";
|
||||
import { observer } from "mobx-react";
|
||||
import isNil from "lodash/isNil";
|
||||
|
||||
export interface IGroupByList {
|
||||
issueIds: TGroupedIssues;
|
||||
groupedIssueIds: TGroupedIssues;
|
||||
issuesMap: TIssueMap;
|
||||
group_by: string | null;
|
||||
updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
|
||||
updateIssue:
|
||||
| ((projectId: string | null | undefined, issueId: string, data: Partial<TIssue>) => Promise<void>)
|
||||
| undefined;
|
||||
quickActions: (issue: TIssue) => React.ReactNode;
|
||||
displayProperties: IIssueDisplayProperties | undefined;
|
||||
enableIssueQuickAdd: boolean;
|
||||
showEmptyGroup?: boolean;
|
||||
getPaginationData: (groupId: string | undefined) => TPaginationData | undefined;
|
||||
getGroupIssueCount: (groupId: string | undefined) => number | undefined;
|
||||
canEditProperties: (projectId: string | undefined) => boolean;
|
||||
quickAddCallback?: (
|
||||
workspaceSlug: string,
|
||||
@ -43,13 +48,12 @@ export interface IGroupByList {
|
||||
addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
|
||||
viewId?: string;
|
||||
isCompletedCycle?: boolean;
|
||||
shouldLoadMore: boolean;
|
||||
loadMoreIssues: () => void;
|
||||
loadMoreIssues: (groupId?: string) => void;
|
||||
}
|
||||
|
||||
const GroupByList: React.FC<IGroupByList> = (props) => {
|
||||
const GroupByList: React.FC<IGroupByList> = observer((props) => {
|
||||
const {
|
||||
issueIds,
|
||||
groupedIssueIds,
|
||||
issuesMap,
|
||||
group_by,
|
||||
updateIssue,
|
||||
@ -63,7 +67,8 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
|
||||
disableIssueCreation,
|
||||
storeType,
|
||||
addIssuesToView,
|
||||
shouldLoadMore,
|
||||
getPaginationData,
|
||||
getGroupIssueCount,
|
||||
isCompletedCycle = false,
|
||||
loadMoreIssues,
|
||||
} = props;
|
||||
@ -123,9 +128,8 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
|
||||
return preloadedData;
|
||||
};
|
||||
|
||||
const validateEmptyIssueGroups = (issues: TIssueGroup) => {
|
||||
const issuesCount = issues?.issueCount || 0;
|
||||
if (!showEmptyGroup && issuesCount <= 0) return false;
|
||||
const validateEmptyIssueGroups = (issueCount: number = 0) => {
|
||||
if (!showEmptyGroup && issueCount <= 0) return false;
|
||||
return true;
|
||||
};
|
||||
|
||||
@ -139,17 +143,25 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
|
||||
{groups &&
|
||||
groups.length > 0 &&
|
||||
groups.map((_list: IGroupByColumn) => {
|
||||
const issueGroup = issueIds?.[_list.id] as TIssueGroup;
|
||||
const groupIssueIds = groupedIssueIds?.[_list.id];
|
||||
const groupIssueCount = getGroupIssueCount(_list.id);
|
||||
|
||||
const nextPageResults = getPaginationData(_list.id)?.nextPageResults;
|
||||
|
||||
const shouldLoadMore =
|
||||
nextPageResults === undefined && groupIssueCount !== undefined
|
||||
? groupIssueIds?.length < groupIssueCount
|
||||
: !!nextPageResults;
|
||||
return (
|
||||
issueGroup &&
|
||||
validateEmptyIssueGroups(issueGroup) && (
|
||||
groupIssueIds &&
|
||||
!isNil(groupIssueCount) &&
|
||||
validateEmptyIssueGroups(groupIssueCount) && (
|
||||
<div key={_list.id} className={`flex flex-shrink-0 flex-col`}>
|
||||
<div className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 px-3 py-1">
|
||||
<HeaderGroupByCard
|
||||
icon={_list.icon}
|
||||
title={_list.name || ""}
|
||||
count={issueGroup.issueCount}
|
||||
count={groupIssueCount}
|
||||
issuePayload={_list.payload}
|
||||
disableIssueCreation={disableIssueCreation || isGroupByCreatedBy || isCompletedCycle}
|
||||
storeType={storeType}
|
||||
@ -157,9 +169,9 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{issueIds && (
|
||||
{groupedIssueIds && (
|
||||
<IssueBlocksList
|
||||
issueIds={issueGroup.issueIds}
|
||||
issueIds={groupIssueIds}
|
||||
issuesMap={issuesMap}
|
||||
updateIssue={updateIssue}
|
||||
quickActions={quickActions}
|
||||
@ -168,15 +180,13 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
|
||||
containerRef={containerRef}
|
||||
/>
|
||||
)}
|
||||
{/* &&
|
||||
issueGroup.issueIds?.length <= issueGroup.issueCount */}
|
||||
{shouldLoadMore &&
|
||||
(group_by ? (
|
||||
<div
|
||||
className={
|
||||
"h-11 relative flex items-center gap-3 bg-custom-background-100 p-3 text-sm text-custom-primary-100 hover:underline cursor-pointer"
|
||||
}
|
||||
onClick={loadMoreIssues}
|
||||
onClick={() => loadMoreIssues(_list.id)}
|
||||
>
|
||||
Load more ↓
|
||||
</div>
|
||||
@ -199,19 +209,20 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
export interface IList {
|
||||
issueIds: TGroupedIssues | TUnGroupedIssues;
|
||||
groupedIssueIds: TGroupedIssues;
|
||||
issuesMap: TIssueMap;
|
||||
group_by: string | null;
|
||||
updateIssue: ((projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
|
||||
updateIssue:
|
||||
| ((projectId: string | null | undefined, issueId: string, data: Partial<TIssue>) => Promise<void>)
|
||||
| undefined;
|
||||
quickActions: (issue: TIssue) => React.ReactNode;
|
||||
displayProperties: IIssueDisplayProperties | undefined;
|
||||
showEmptyGroup: boolean;
|
||||
enableIssueQuickAdd: boolean;
|
||||
canEditProperties: (projectId: string | undefined) => boolean;
|
||||
shouldLoadMore: boolean;
|
||||
quickAddCallback?: (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
@ -222,13 +233,15 @@ export interface IList {
|
||||
disableIssueCreation?: boolean;
|
||||
storeType: EIssuesStoreType;
|
||||
addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
|
||||
loadMoreIssues: () => void;
|
||||
getPaginationData: (groupId: string | undefined) => TPaginationData | undefined;
|
||||
getGroupIssueCount: (groupId: string | undefined) => number | undefined;
|
||||
loadMoreIssues: (groupId?: string) => void;
|
||||
isCompletedCycle?: boolean;
|
||||
}
|
||||
|
||||
export const List: React.FC<IList> = (props) => {
|
||||
const {
|
||||
issueIds,
|
||||
groupedIssueIds,
|
||||
issuesMap,
|
||||
group_by,
|
||||
updateIssue,
|
||||
@ -239,10 +252,11 @@ export const List: React.FC<IList> = (props) => {
|
||||
showEmptyGroup,
|
||||
enableIssueQuickAdd,
|
||||
canEditProperties,
|
||||
getPaginationData,
|
||||
getGroupIssueCount,
|
||||
disableIssueCreation,
|
||||
storeType,
|
||||
addIssuesToView,
|
||||
shouldLoadMore,
|
||||
loadMoreIssues,
|
||||
isCompletedCycle = false,
|
||||
} = props;
|
||||
@ -250,10 +264,9 @@ export const List: React.FC<IList> = (props) => {
|
||||
return (
|
||||
<div className="relative h-full w-full">
|
||||
<GroupByList
|
||||
issueIds={issueIds}
|
||||
groupedIssueIds={groupedIssueIds}
|
||||
issuesMap={issuesMap}
|
||||
group_by={group_by}
|
||||
shouldLoadMore={shouldLoadMore}
|
||||
loadMoreIssues={loadMoreIssues}
|
||||
updateIssue={updateIssue}
|
||||
quickActions={quickActions}
|
||||
@ -262,6 +275,8 @@ export const List: React.FC<IList> = (props) => {
|
||||
showEmptyGroup={showEmptyGroup}
|
||||
canEditProperties={canEditProperties}
|
||||
quickAddCallback={quickAddCallback}
|
||||
getPaginationData={getPaginationData}
|
||||
getGroupIssueCount={getGroupIssueCount}
|
||||
viewId={viewId}
|
||||
disableIssueCreation={disableIssueCreation}
|
||||
storeType={storeType}
|
||||
|
||||
@ -17,8 +17,15 @@ import { SpreadsheetLayoutLoader } from "components/ui";
|
||||
import { TIssue, IIssueDisplayFilterOptions } from "@plane/types";
|
||||
// constants
|
||||
import { EUserProjectRoles } from "constants/project";
|
||||
import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
|
||||
import {
|
||||
EIssueFilterType,
|
||||
EIssueLayoutTypes,
|
||||
EIssuesStoreType,
|
||||
ISSUE_DISPLAY_FILTERS_BY_LAYOUT,
|
||||
} from "constants/issue";
|
||||
import { EMPTY_STATE_DETAILS, EmptyStateType } from "constants/empty-state";
|
||||
import { ALL_ISSUES } from "store/issue/helpers/base-issues.store";
|
||||
import { IssueLayoutHOC } from "../issue-layout-HOC";
|
||||
|
||||
export const AllIssueLayoutRoot: React.FC = observer(() => {
|
||||
// router
|
||||
@ -30,7 +37,7 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
|
||||
const { commandPalette: commandPaletteStore } = useApplication();
|
||||
const {
|
||||
issuesFilter: { filters, fetchFilters, updateFilters },
|
||||
issues: { loader, issueCount: totalIssueCount, groupedIssueIds, fetchIssues, fetchNextIssues },
|
||||
issues: { loader, getPaginationData, groupedIssueIds, fetchIssues, fetchNextIssues },
|
||||
} = useIssues(EIssuesStoreType.GLOBAL);
|
||||
const { updateIssue, removeIssue, archiveIssue } = useIssuesActions(EIssuesStoreType.GLOBAL);
|
||||
|
||||
@ -153,37 +160,14 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
|
||||
return <SpreadsheetLayoutLoader />;
|
||||
}
|
||||
|
||||
const {
|
||||
"All Issues": { issueIds, issueCount },
|
||||
} = groupedIssueIds;
|
||||
const issueIds = groupedIssueIds[ALL_ISSUES];
|
||||
const nextPageResults = getPaginationData(ALL_ISSUES)?.nextPageResults;
|
||||
|
||||
const emptyStateType =
|
||||
(workspaceProjectIds ?? []).length > 0 ? `workspace-${globalViewId}` : EmptyStateType.WORKSPACE_NO_PROJECTS;
|
||||
|
||||
return (
|
||||
<div className="relative flex h-full w-full flex-col overflow-hidden">
|
||||
<div className="relative h-full w-full flex flex-col">
|
||||
<GlobalViewsAppliedFiltersRoot globalViewId={globalViewId.toString()} />
|
||||
{!totalIssueCount ? (
|
||||
<EmptyState
|
||||
type={emptyStateType as keyof typeof EMPTY_STATE_DETAILS}
|
||||
size="sm"
|
||||
primaryButtonOnClick={
|
||||
(workspaceProjectIds ?? []).length > 0
|
||||
? globalViewId !== "custom-view" && globalViewId !== "subscribed"
|
||||
? () => {
|
||||
setTrackElement("All issues empty state");
|
||||
commandPaletteStore.toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
|
||||
}
|
||||
: undefined
|
||||
: () => {
|
||||
setTrackElement("All issues empty state");
|
||||
commandPaletteStore.toggleCreateProjectModal(true);
|
||||
}
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<Fragment>
|
||||
<IssueLayoutHOC storeType={EIssuesStoreType.GLOBAL} layout={EIssueLayoutTypes.SPREADSHEET}>
|
||||
<SpreadsheetView
|
||||
displayProperties={issueFilters?.displayProperties ?? {}}
|
||||
displayFilters={issueFilters?.displayFilters ?? {}}
|
||||
@ -193,13 +177,11 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
|
||||
updateIssue={updateIssue}
|
||||
canEditProperties={canEditProperties}
|
||||
viewId={globalViewId.toString()}
|
||||
onEndOfListTrigger={fetchNextPages}
|
||||
canLoadMoreIssues={!!nextPageResults}
|
||||
loadMoreIssues={fetchNextPages}
|
||||
/>
|
||||
{/* peek overview */}
|
||||
<IssuePeekOverview />
|
||||
</Fragment>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</IssueLayoutHOC>
|
||||
);
|
||||
});
|
||||
|
||||
@ -9,11 +9,12 @@ import { useIssuesActions } from "hooks/use-issues-actions";
|
||||
// views
|
||||
// types
|
||||
// constants
|
||||
import { TIssue, IIssueDisplayFilterOptions, TUnGroupedIssues } from "@plane/types";
|
||||
import { TIssue, IIssueDisplayFilterOptions } from "@plane/types";
|
||||
import { IQuickActionProps } from "../list/list-view-types";
|
||||
import { SpreadsheetView } from "./spreadsheet-view";
|
||||
import useSWR from "swr";
|
||||
import { IssueLayoutHOC } from "../issue-layout-HOC";
|
||||
import { ALL_ISSUES } from "store/issue/helpers/base-issues.store";
|
||||
|
||||
export type SpreadsheetStoreType =
|
||||
| EIssuesStoreType.PROJECT
|
||||
@ -72,7 +73,8 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
|
||||
[canEditPropertiesBasedOnProject, enableInlineEditing, isEditingAllowed]
|
||||
);
|
||||
|
||||
const issueIds = issues.groupedIssueIds?.["All Issues"]?.issueIds ?? [];
|
||||
const issueIds = issues.groupedIssueIds?.[ALL_ISSUES] ?? [];
|
||||
const nextPageResults = issues.getPaginationData(ALL_ISSUES)?.nextPageResults;
|
||||
|
||||
const handleDisplayFiltersUpdate = useCallback(
|
||||
(updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
|
||||
@ -118,7 +120,8 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
|
||||
viewId={viewId}
|
||||
enableQuickCreateIssue={enableQuickAdd}
|
||||
disableIssueCreation={!enableIssueCreation || !isEditingAllowed || isCompletedCycle}
|
||||
onEndOfListTrigger={fetchNextIssues}
|
||||
canLoadMoreIssues={!!nextPageResults}
|
||||
loadMoreIssues={fetchNextIssues}
|
||||
/>
|
||||
</IssueLayoutHOC>
|
||||
);
|
||||
|
||||
@ -25,7 +25,8 @@ type Props = {
|
||||
canEditProperties: (projectId: string | undefined) => boolean;
|
||||
portalElement: React.MutableRefObject<HTMLDivElement | null>;
|
||||
containerRef: MutableRefObject<HTMLTableElement | null>;
|
||||
onEndOfListTrigger: () => void;
|
||||
canLoadMoreIssues: boolean;
|
||||
loadMoreIssues: () => void;
|
||||
};
|
||||
|
||||
export const SpreadsheetTable = observer((props: Props) => {
|
||||
@ -39,8 +40,9 @@ export const SpreadsheetTable = observer((props: Props) => {
|
||||
quickActions,
|
||||
updateIssue,
|
||||
canEditProperties,
|
||||
canLoadMoreIssues,
|
||||
containerRef,
|
||||
onEndOfListTrigger,
|
||||
loadMoreIssues,
|
||||
} = props;
|
||||
|
||||
// states
|
||||
@ -80,27 +82,7 @@ export const SpreadsheetTable = observer((props: Props) => {
|
||||
};
|
||||
}, [handleScroll, containerRef]);
|
||||
|
||||
// useEffect(() => {
|
||||
// if (intersectionRef.current) {
|
||||
// const observer = new IntersectionObserver(
|
||||
// (entries) => {
|
||||
// if (entries[0].isIntersecting) onEndOfListTrigger();
|
||||
// },
|
||||
// {
|
||||
// root: containerRef?.current,
|
||||
// rootMargin: `50% 0% 50% 0%`,
|
||||
// }
|
||||
// );
|
||||
// observer.observe(intersectionRef.current);
|
||||
// return () => {
|
||||
// if (intersectionRef.current) {
|
||||
// // eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
// observer.unobserve(intersectionRef.current);
|
||||
// }
|
||||
// };
|
||||
// }
|
||||
// }, [intersectionRef, containerRef]);
|
||||
useIntersectionObserver(containerRef, intersectionRef, onEndOfListTrigger, `50% 0% 50% 0%`);
|
||||
useIntersectionObserver(containerRef, intersectionRef, loadMoreIssues, `50% 0% 50% 0%`);
|
||||
|
||||
const handleKeyBoardNavigation = useTableKeyboardNavigation();
|
||||
|
||||
@ -130,7 +112,7 @@ export const SpreadsheetTable = observer((props: Props) => {
|
||||
/>
|
||||
))}
|
||||
</tbody>
|
||||
<tfoot ref={intersectionRef}>Loading...</tfoot>
|
||||
{canLoadMoreIssues && <tfoot ref={intersectionRef}>Loading...</tfoot>}
|
||||
</table>
|
||||
);
|
||||
});
|
||||
|
||||
@ -31,7 +31,8 @@ type Props = {
|
||||
) => Promise<TIssue | undefined>;
|
||||
viewId?: string;
|
||||
canEditProperties: (projectId: string | undefined) => boolean;
|
||||
onEndOfListTrigger: () => void;
|
||||
canLoadMoreIssues: boolean;
|
||||
loadMoreIssues: () => void;
|
||||
enableQuickCreateIssue?: boolean;
|
||||
disableIssueCreation?: boolean;
|
||||
};
|
||||
@ -49,7 +50,8 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
|
||||
canEditProperties,
|
||||
enableQuickCreateIssue,
|
||||
disableIssueCreation,
|
||||
onEndOfListTrigger,
|
||||
canLoadMoreIssues,
|
||||
loadMoreIssues,
|
||||
} = props;
|
||||
// refs
|
||||
const containerRef = useRef<HTMLTableElement | null>(null);
|
||||
@ -81,7 +83,8 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
|
||||
updateIssue={updateIssue}
|
||||
canEditProperties={canEditProperties}
|
||||
containerRef={containerRef}
|
||||
onEndOfListTrigger={onEndOfListTrigger}
|
||||
canLoadMoreIssues={canLoadMoreIssues}
|
||||
loadMoreIssues={loadMoreIssues}
|
||||
/>
|
||||
</div>
|
||||
<div className="border-t border-custom-border-100">
|
||||
|
||||
@ -2,11 +2,13 @@ import { observer } from "mobx-react-lite";
|
||||
import { useRouter } from "next/router";
|
||||
// mobx store
|
||||
// components
|
||||
import { GanttChartRoot, IBlockUpdateData, ModuleGanttSidebar } from "components/gantt-chart";
|
||||
import { ChartDataType, GanttChartRoot, IBlockUpdateData, ModuleGanttSidebar } from "components/gantt-chart";
|
||||
import { ModuleGanttBlock } from "components/modules";
|
||||
import { useModule, useProject } from "hooks/store";
|
||||
// types
|
||||
import { IModule } from "@plane/types";
|
||||
import { useCallback } from "react";
|
||||
import { getMonthChartItemPositionWidthInMonth } from "components/gantt-chart/views";
|
||||
|
||||
export const ModulesListGanttChartView: React.FC = observer(() => {
|
||||
// router
|
||||
@ -14,7 +16,7 @@ export const ModulesListGanttChartView: React.FC = observer(() => {
|
||||
const { workspaceSlug } = router.query;
|
||||
// store
|
||||
const { currentProjectDetails } = useProject();
|
||||
const { projectModuleIds, moduleMap, updateModuleDetails } = useModule();
|
||||
const { projectModuleIds, getModuleById, updateModuleDetails } = useModule();
|
||||
|
||||
const handleModuleUpdate = async (module: IModule, data: IBlockUpdateData) => {
|
||||
if (!workspaceSlug || !module) return;
|
||||
@ -25,26 +27,39 @@ export const ModulesListGanttChartView: React.FC = observer(() => {
|
||||
await updateModuleDetails(workspaceSlug.toString(), module.project_id, module.id, payload);
|
||||
};
|
||||
|
||||
const blockFormat = (blocks: string[]) =>
|
||||
blocks?.map((blockId) => {
|
||||
const block = moduleMap[blockId];
|
||||
return {
|
||||
data: block,
|
||||
id: block.id,
|
||||
sort_order: block.sort_order,
|
||||
start_date: block.start_date ? new Date(block.start_date) : null,
|
||||
target_date: block.target_date ? new Date(block.target_date) : null,
|
||||
const getBlockById = useCallback(
|
||||
(id: string, currentViewData?: ChartDataType | undefined) => {
|
||||
const module = getModuleById(id);
|
||||
|
||||
const block = {
|
||||
data: module,
|
||||
id: module?.id ?? "",
|
||||
sort_order: module?.sort_order ?? 0,
|
||||
start_date: module?.start_date ? new Date(module.start_date) : undefined,
|
||||
target_date: module?.target_date ? new Date(module.target_date) : undefined,
|
||||
};
|
||||
});
|
||||
if (currentViewData) {
|
||||
return {
|
||||
...block,
|
||||
position: getMonthChartItemPositionWidthInMonth(currentViewData, block),
|
||||
};
|
||||
}
|
||||
return block;
|
||||
},
|
||||
[getModuleById]
|
||||
);
|
||||
|
||||
const isAllowed = currentProjectDetails?.member_role === 20 || currentProjectDetails?.member_role === 15;
|
||||
|
||||
if (!projectModuleIds) return null;
|
||||
|
||||
return (
|
||||
<div className="h-full w-full overflow-y-auto">
|
||||
<GanttChartRoot
|
||||
title="Modules"
|
||||
loaderTitle="Modules"
|
||||
blocks={projectModuleIds ? blockFormat(projectModuleIds) : null}
|
||||
blockIds={projectModuleIds}
|
||||
getBlockById={getBlockById}
|
||||
sidebarToRender={(props) => <ModuleGanttSidebar {...props} />}
|
||||
blockUpdateHandler={(block, payload) => handleModuleUpdate(block, payload)}
|
||||
blockToRender={(data: IModule) => <ModuleGanttBlock moduleId={data.id} />}
|
||||
|
||||
@ -436,7 +436,7 @@ export const groupReactionEmojis = (reactions: any) => {
|
||||
};
|
||||
|
||||
|
||||
export enum IssueGroupByOptions {
|
||||
export enum EIssueGroupByToServerOptions {
|
||||
"state" = "state_id",
|
||||
"priority" = "priority",
|
||||
"labels" = "labels__id",
|
||||
@ -448,3 +448,16 @@ export enum IssueGroupByOptions {
|
||||
"project" = "project_id",
|
||||
"created_by" = "created_by",
|
||||
}
|
||||
|
||||
export enum EServerGroupByToFilterOptions {
|
||||
"state_id" = "state",
|
||||
"priority" = "priority",
|
||||
"labels__id" = "labels",
|
||||
"state__group" = "state_group",
|
||||
"assignees__id" = "assignees",
|
||||
"cycle_id" = "cycle",
|
||||
"modules__id" = "module",
|
||||
"target_date" = "target_date",
|
||||
"project_id" = "project",
|
||||
"created_by" = "created_by",
|
||||
}
|
||||
@ -156,14 +156,15 @@ export const shouldHighlightIssueDueDate = (
|
||||
// if the issue is overdue, highlight the due date
|
||||
return targetDateDistance <= 0;
|
||||
};
|
||||
export const renderIssueBlocksStructure = (blocks: TIssue[]): IGanttBlock[] =>
|
||||
blocks?.map((block) => ({
|
||||
export const getIssueBlocksStructure = (block: TIssue): IGanttBlock => {
|
||||
return {
|
||||
data: block,
|
||||
id: block.id,
|
||||
sort_order: block.sort_order,
|
||||
start_date: block.start_date ? new Date(block.start_date) : null,
|
||||
target_date: block.target_date ? new Date(block.target_date) : null,
|
||||
}));
|
||||
start_date: block.start_date ? new Date(block.start_date) : undefined,
|
||||
target_date: block.target_date ? new Date(block.target_date) : undefined,
|
||||
};
|
||||
};
|
||||
|
||||
export function getChangedIssuefields(formData: Partial<TIssue>, dirtyFields: { [key: string]: boolean | undefined }) {
|
||||
const changedFields: Partial<TIssue> = {};
|
||||
|
||||
@ -18,7 +18,7 @@ interface IssueActions {
|
||||
options: IssuePaginationOptions,
|
||||
userViewId?: "assigned" | "created" | "subscribed"
|
||||
) => Promise<TIssuesResponse | undefined>;
|
||||
fetchNextIssues: () => Promise<TIssuesResponse | undefined>;
|
||||
fetchNextIssues: (groupId?: string, subGroupId?: string) => Promise<TIssuesResponse | undefined>;
|
||||
removeIssue: (projectId: string | undefined | null, issueId: string) => Promise<void>;
|
||||
createIssue?: (projectId: string | undefined | null, data: Partial<TIssue>) => Promise<TIssue | undefined>;
|
||||
updateIssue?: (projectId: string | undefined | null, issueId: string, data: Partial<TIssue>) => Promise<void>;
|
||||
@ -77,10 +77,13 @@ const useProjectIssueActions = () => {
|
||||
},
|
||||
[issues.fetchIssues, workspaceSlug, projectId]
|
||||
);
|
||||
const fetchNextIssues = useCallback(async () => {
|
||||
const fetchNextIssues = useCallback(
|
||||
async (groupId?: string, subGroupId?: string) => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
return issues.fetchNextIssues(workspaceSlug.toString(), projectId.toString());
|
||||
}, [issues.fetchIssues, workspaceSlug, projectId]);
|
||||
return issues.fetchNextIssues(workspaceSlug.toString(), projectId.toString(), groupId, subGroupId);
|
||||
},
|
||||
[issues.fetchIssues, workspaceSlug, projectId]
|
||||
);
|
||||
|
||||
const createIssue = useCallback(
|
||||
async (projectId: string | undefined | null, data: Partial<TIssue>) => {
|
||||
@ -151,10 +154,19 @@ const useCycleIssueActions = () => {
|
||||
},
|
||||
[issues.fetchIssues, workspaceSlug, projectId, cycleId]
|
||||
);
|
||||
const fetchNextIssues = useCallback(async () => {
|
||||
const fetchNextIssues = useCallback(
|
||||
async (groupId?: string, subGroupId?: string) => {
|
||||
if (!workspaceSlug || !projectId || !cycleId) return;
|
||||
return issues.fetchNextIssues(workspaceSlug.toString(), projectId.toString(), cycleId.toString());
|
||||
}, [issues.fetchIssues, workspaceSlug, projectId, cycleId]);
|
||||
return issues.fetchNextIssues(
|
||||
workspaceSlug.toString(),
|
||||
projectId.toString(),
|
||||
cycleId.toString(),
|
||||
groupId,
|
||||
subGroupId
|
||||
);
|
||||
},
|
||||
[issues.fetchIssues, workspaceSlug, projectId, cycleId]
|
||||
);
|
||||
|
||||
const createIssue = useCallback(
|
||||
async (projectId: string | undefined | null, data: Partial<TIssue>) => {
|
||||
@ -242,10 +254,19 @@ const useModuleIssueActions = () => {
|
||||
},
|
||||
[issues.fetchIssues, workspaceSlug, projectId, moduleId]
|
||||
);
|
||||
const fetchNextIssues = useCallback(async () => {
|
||||
const fetchNextIssues = useCallback(
|
||||
async (groupId?: string, subGroupId?: string) => {
|
||||
if (!workspaceSlug || !projectId || !moduleId) return;
|
||||
return issues.fetchNextIssues(workspaceSlug.toString(), projectId.toString(), moduleId.toString());
|
||||
}, [issues.fetchIssues, workspaceSlug, projectId, moduleId]);
|
||||
return issues.fetchNextIssues(
|
||||
workspaceSlug.toString(),
|
||||
projectId.toString(),
|
||||
moduleId.toString(),
|
||||
groupId,
|
||||
subGroupId
|
||||
);
|
||||
},
|
||||
[issues.fetchIssues, workspaceSlug, projectId, moduleId]
|
||||
);
|
||||
|
||||
const createIssue = useCallback(
|
||||
async (projectId: string | undefined | null, data: Partial<TIssue>) => {
|
||||
@ -324,10 +345,13 @@ const useProfileIssueActions = () => {
|
||||
},
|
||||
[issues.fetchIssues, workspaceSlug, userId]
|
||||
);
|
||||
const fetchNextIssues = useCallback(async () => {
|
||||
const fetchNextIssues = useCallback(
|
||||
async (groupId?: string, subGroupId?: string) => {
|
||||
if (!workspaceSlug || !userId) return;
|
||||
return issues.fetchNextIssues(workspaceSlug.toString(), userId.toString());
|
||||
}, [issues.fetchIssues, workspaceSlug, userId]);
|
||||
return issues.fetchNextIssues(workspaceSlug.toString(), userId.toString(), groupId, subGroupId);
|
||||
},
|
||||
[issues.fetchIssues, workspaceSlug, userId]
|
||||
);
|
||||
|
||||
const createIssue = useCallback(
|
||||
async (projectId: string | undefined | null, data: Partial<TIssue>) => {
|
||||
@ -398,10 +422,13 @@ const useProjectViewIssueActions = () => {
|
||||
},
|
||||
[issues.fetchIssues, workspaceSlug, projectId]
|
||||
);
|
||||
const fetchNextIssues = useCallback(async () => {
|
||||
const fetchNextIssues = useCallback(
|
||||
async (groupId?: string, subGroupId?: string) => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
return issues.fetchNextIssues(workspaceSlug.toString(), projectId.toString());
|
||||
}, [issues.fetchIssues, workspaceSlug, projectId]);
|
||||
return issues.fetchNextIssues(workspaceSlug.toString(), projectId.toString(), groupId, subGroupId);
|
||||
},
|
||||
[issues.fetchIssues, workspaceSlug, projectId]
|
||||
);
|
||||
|
||||
const createIssue = useCallback(
|
||||
async (projectId: string | undefined | null, data: Partial<TIssue>) => {
|
||||
@ -472,10 +499,13 @@ const useDraftIssueActions = () => {
|
||||
},
|
||||
[issues.fetchIssues, workspaceSlug, projectId]
|
||||
);
|
||||
const fetchNextIssues = useCallback(async () => {
|
||||
const fetchNextIssues = useCallback(
|
||||
async (groupId?: string, subGroupId?: string) => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
return issues.fetchNextIssues(workspaceSlug.toString(), projectId.toString());
|
||||
}, [issues.fetchIssues, workspaceSlug, projectId]);
|
||||
return issues.fetchNextIssues(workspaceSlug.toString(), projectId.toString(), groupId, subGroupId);
|
||||
},
|
||||
[issues.fetchIssues, workspaceSlug, projectId]
|
||||
);
|
||||
|
||||
const createIssue = useCallback(
|
||||
async (projectId: string | undefined | null, data: Partial<TIssue>) => {
|
||||
@ -538,10 +568,13 @@ const useArchivedIssueActions = () => {
|
||||
},
|
||||
[issues.fetchIssues, workspaceSlug, projectId]
|
||||
);
|
||||
const fetchNextIssues = useCallback(async () => {
|
||||
const fetchNextIssues = useCallback(
|
||||
async (groupId?: string, subGroupId?: string) => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
return issues.fetchNextIssues(workspaceSlug.toString(), projectId.toString());
|
||||
}, [issues.fetchIssues, workspaceSlug, projectId]);
|
||||
return issues.fetchNextIssues(workspaceSlug.toString(), projectId.toString(), groupId, subGroupId);
|
||||
},
|
||||
[issues.fetchIssues, workspaceSlug, projectId]
|
||||
);
|
||||
|
||||
const removeIssue = useCallback(
|
||||
async (projectId: string | undefined | null, issueId: string) => {
|
||||
@ -595,10 +628,13 @@ const useGlobalIssueActions = () => {
|
||||
},
|
||||
[issues.fetchIssues, workspaceSlug, globalViewId]
|
||||
);
|
||||
const fetchNextIssues = useCallback(async () => {
|
||||
const fetchNextIssues = useCallback(
|
||||
async (groupId?: string, subGroupId?: string) => {
|
||||
if (!workspaceSlug || !globalViewId) return;
|
||||
return issues.fetchNextIssues(workspaceSlug.toString(), globalViewId.toString());
|
||||
}, [issues.fetchIssues, workspaceSlug, globalViewId]);
|
||||
return issues.fetchNextIssues(workspaceSlug.toString(), globalViewId.toString(), groupId, subGroupId);
|
||||
},
|
||||
[issues.fetchIssues, workspaceSlug, globalViewId]
|
||||
);
|
||||
|
||||
const createIssue = useCallback(
|
||||
async (projectId: string | undefined | null, data: Partial<TIssue>) => {
|
||||
|
||||
@ -28,7 +28,9 @@ export interface IArchivedIssuesFilter extends IBaseIssueFilterStore {
|
||||
//helper actions
|
||||
getFilterParams: (
|
||||
options: IssuePaginationOptions,
|
||||
cursor: string | undefined
|
||||
cursor: string | undefined,
|
||||
groupId: string | undefined,
|
||||
subGroupId: string | undefined
|
||||
) => Partial<Record<TIssueParams, string | boolean>>;
|
||||
// action
|
||||
fetchFilters: (workspaceSlug: string, projectId: string) => Promise<void>;
|
||||
@ -94,21 +96,19 @@ export class ArchivedIssuesFilter extends IssueFilterHelperStore implements IArc
|
||||
return filteredRouteParams;
|
||||
}
|
||||
|
||||
getFilterParams = computedFn((options: IssuePaginationOptions, cursor: string | undefined) => {
|
||||
getFilterParams = computedFn(
|
||||
(
|
||||
options: IssuePaginationOptions,
|
||||
cursor: string | undefined,
|
||||
groupId: string | undefined,
|
||||
subGroupId: string | undefined
|
||||
) => {
|
||||
const filterParams = this.appliedFilters;
|
||||
|
||||
const paginationOptions: Partial<Record<TIssueParams, string | boolean>> = {
|
||||
...filterParams,
|
||||
cursor: cursor ? cursor : `${options.perPageCount}:0:0`,
|
||||
per_page: options.perPageCount.toString(),
|
||||
};
|
||||
|
||||
if (options.groupedBy) {
|
||||
paginationOptions.group_by = options.groupedBy;
|
||||
const paginationParams = this.getPaginationParams(filterParams, options, cursor, groupId, subGroupId);
|
||||
return paginationParams;
|
||||
}
|
||||
|
||||
return paginationOptions;
|
||||
});
|
||||
);
|
||||
|
||||
fetchFilters = async (workspaceSlug: string, projectId: string) => {
|
||||
try {
|
||||
|
||||
@ -6,7 +6,7 @@ import { TLoader, ViewFlags, IssuePaginationOptions, TIssuesResponse } from "@pl
|
||||
// types
|
||||
import { IIssueRootStore } from "../root.store";
|
||||
import { IArchivedIssuesFilter } from "./filter.store";
|
||||
import { BaseIssuesStore, IBaseIssuesStore } from "../helpers/base-issues.store";
|
||||
import { BaseIssuesStore, EIssueGroupedAction, IBaseIssuesStore } from "../helpers/base-issues.store";
|
||||
|
||||
export interface IArchivedIssues extends IBaseIssuesStore {
|
||||
// observable
|
||||
@ -23,7 +23,12 @@ export interface IArchivedIssues extends IBaseIssuesStore {
|
||||
projectId: string,
|
||||
loadType: TLoader
|
||||
) => Promise<TIssuesResponse | undefined>;
|
||||
fetchNextIssues: (workspaceSlug: string, projectId: string) => Promise<TIssuesResponse | undefined>;
|
||||
fetchNextIssues: (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
groupId?: string,
|
||||
subGroupId?: string
|
||||
) => Promise<TIssuesResponse | undefined>;
|
||||
|
||||
restoreIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
|
||||
|
||||
@ -66,7 +71,7 @@ export class ArchivedIssues extends BaseIssuesStore implements IArchivedIssues {
|
||||
this.loader = loadType;
|
||||
});
|
||||
this.clear();
|
||||
const params = this.issueFilterStore?.getFilterParams(options, undefined);
|
||||
const params = this.issueFilterStore?.getFilterParams(options, undefined, undefined, undefined);
|
||||
const response = await this.issueArchiveService.getArchivedIssues(workspaceSlug, projectId, params);
|
||||
|
||||
this.onfetchIssues(response, options);
|
||||
@ -77,15 +82,21 @@ export class ArchivedIssues extends BaseIssuesStore implements IArchivedIssues {
|
||||
}
|
||||
};
|
||||
|
||||
fetchNextIssues = async (workspaceSlug: string, projectId: string) => {
|
||||
if (!this.paginationOptions || !this.next_page_results) return;
|
||||
fetchNextIssues = async (workspaceSlug: string, projectId: string, groupId?: string, subGroupId?: string) => {
|
||||
const cursorObject = this.getPaginationData(subGroupId ?? groupId);
|
||||
if (!this.paginationOptions || (cursorObject && !cursorObject?.nextPageResults)) return;
|
||||
try {
|
||||
this.loader = "pagination";
|
||||
|
||||
const params = this.issueFilterStore?.getFilterParams(this.paginationOptions, this.nextCursor);
|
||||
const response = await this.issueService.getIssues(workspaceSlug, projectId, params);
|
||||
const params = this.issueFilterStore?.getFilterParams(
|
||||
this.paginationOptions,
|
||||
cursorObject?.nextCursor,
|
||||
groupId,
|
||||
subGroupId
|
||||
);
|
||||
const response = await this.issueArchiveService.getArchivedIssues(workspaceSlug, projectId, params);
|
||||
|
||||
this.onfetchNexIssues(response);
|
||||
this.onfetchNexIssues(response, groupId, subGroupId);
|
||||
return response;
|
||||
} catch (error) {
|
||||
this.loader = undefined;
|
||||
@ -110,7 +121,7 @@ export class ArchivedIssues extends BaseIssuesStore implements IArchivedIssues {
|
||||
this.rootIssueStore.issues.updateIssue(issueId, {
|
||||
archived_at: null,
|
||||
});
|
||||
this.issues && pull(this.issues, issueId);
|
||||
this.removeIssueFromList(issueId);
|
||||
});
|
||||
|
||||
return response;
|
||||
|
||||
@ -28,7 +28,9 @@ export interface ICycleIssuesFilter extends IBaseIssueFilterStore {
|
||||
//helper actions
|
||||
getFilterParams: (
|
||||
options: IssuePaginationOptions,
|
||||
cursor: string | undefined
|
||||
cursor: string | undefined,
|
||||
groupId: string | undefined,
|
||||
subGroupId: string | undefined
|
||||
) => Partial<Record<TIssueParams, string | boolean>>;
|
||||
// action
|
||||
fetchFilters: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<void>;
|
||||
@ -97,21 +99,19 @@ export class CycleIssuesFilter extends IssueFilterHelperStore implements ICycleI
|
||||
return filteredRouteParams;
|
||||
}
|
||||
|
||||
getFilterParams = computedFn((options: IssuePaginationOptions, cursor: string | undefined) => {
|
||||
getFilterParams = computedFn(
|
||||
(
|
||||
options: IssuePaginationOptions,
|
||||
cursor: string | undefined,
|
||||
groupId: string | undefined,
|
||||
subGroupId: string | undefined
|
||||
) => {
|
||||
const filterParams = this.appliedFilters;
|
||||
|
||||
const paginationOptions: Partial<Record<TIssueParams, string | boolean>> = {
|
||||
...filterParams,
|
||||
cursor: cursor ? cursor : `${options.perPageCount}:0:0`,
|
||||
per_page: options.perPageCount.toString(),
|
||||
};
|
||||
|
||||
if (options.groupedBy) {
|
||||
paginationOptions.group_by = options.groupedBy;
|
||||
const paginationParams = this.getPaginationParams(filterParams, options, cursor, groupId, subGroupId);
|
||||
return paginationParams;
|
||||
}
|
||||
|
||||
return paginationOptions;
|
||||
});
|
||||
);
|
||||
|
||||
fetchFilters = async (workspaceSlug: string, projectId: string, cycleId: string) => {
|
||||
try {
|
||||
|
||||
@ -9,7 +9,7 @@ import { CycleService } from "services/cycle.service";
|
||||
// types
|
||||
import { TIssue, TLoader, ViewFlags, IssuePaginationOptions, TIssuesResponse } from "@plane/types";
|
||||
import { IIssueRootStore } from "../root.store";
|
||||
import { BaseIssuesStore, IBaseIssuesStore } from "../helpers/base-issues.store";
|
||||
import { BaseIssuesStore, EIssueGroupedAction, IBaseIssuesStore } from "../helpers/base-issues.store";
|
||||
import { ICycleIssuesFilter } from "./filter.store";
|
||||
|
||||
export const ACTIVE_CYCLE_ISSUES = "ACTIVE_CYCLE_ISSUES";
|
||||
@ -30,7 +30,13 @@ export interface ICycleIssues extends IBaseIssuesStore {
|
||||
loadType: TLoader,
|
||||
cycleId: string
|
||||
) => Promise<TIssuesResponse | undefined>;
|
||||
fetchNextIssues: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<TIssuesResponse | undefined>;
|
||||
fetchNextIssues: (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
cycleId: string,
|
||||
groupId?: string,
|
||||
subGroupId?: string
|
||||
) => Promise<TIssuesResponse | undefined>;
|
||||
|
||||
createIssue: (workspaceSlug: string, projectId: string, data: Partial<TIssue>, cycleId: string) => Promise<TIssue>;
|
||||
updateIssue: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
|
||||
@ -111,7 +117,7 @@ export class CycleIssues extends BaseIssuesStore implements ICycleIssues {
|
||||
|
||||
this.cycleId = cycleId;
|
||||
|
||||
const params = this.issueFilterStore?.getFilterParams(options, undefined);
|
||||
const params = this.issueFilterStore?.getFilterParams(options, undefined, undefined, undefined);
|
||||
const response = await this.cycleService.getCycleIssues(workspaceSlug, projectId, cycleId, params);
|
||||
|
||||
this.onfetchIssues(response, options);
|
||||
@ -122,15 +128,27 @@ export class CycleIssues extends BaseIssuesStore implements ICycleIssues {
|
||||
}
|
||||
};
|
||||
|
||||
fetchNextIssues = async (workspaceSlug: string, projectId: string, cycleId: string) => {
|
||||
if (!this.paginationOptions || !this.next_page_results) return;
|
||||
fetchNextIssues = async (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
cycleId: string,
|
||||
groupId?: string,
|
||||
subGroupId?: string
|
||||
) => {
|
||||
const cursorObject = this.getPaginationData(subGroupId ?? groupId);
|
||||
if (!this.paginationOptions || (cursorObject && !cursorObject?.nextPageResults)) return;
|
||||
try {
|
||||
this.loader = "pagination";
|
||||
|
||||
const params = this.issueFilterStore?.getFilterParams(this.paginationOptions, this.nextCursor);
|
||||
const params = this.issueFilterStore?.getFilterParams(
|
||||
this.paginationOptions,
|
||||
cursorObject?.nextCursor,
|
||||
groupId,
|
||||
subGroupId
|
||||
);
|
||||
const response = await this.cycleService.getCycleIssues(workspaceSlug, projectId, cycleId, params);
|
||||
|
||||
this.onfetchNexIssues(response);
|
||||
this.onfetchNexIssues(response, groupId, subGroupId);
|
||||
return response;
|
||||
} catch (error) {
|
||||
this.loader = undefined;
|
||||
@ -175,8 +193,7 @@ export class CycleIssues extends BaseIssuesStore implements ICycleIssues {
|
||||
if (fetchAddedIssues) await this.rootIssueStore.issues.getIssues(workspaceSlug, projectId, issueIds);
|
||||
|
||||
runInAction(() => {
|
||||
this.cycleId === cycleId &&
|
||||
update(this, "issues", (cycleIssueIds = []) => uniq(concat(cycleIssueIds, issueIds)));
|
||||
this.cycleId === cycleId && issueIds.forEach((issueId) => this.addIssueToList(issueId));
|
||||
});
|
||||
|
||||
issueIds.forEach((issueId) => {
|
||||
@ -193,7 +210,7 @@ export class CycleIssues extends BaseIssuesStore implements ICycleIssues {
|
||||
try {
|
||||
await this.issueService.removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
|
||||
runInAction(() => {
|
||||
this.issues && this.cycleId === cycleId && pull(this.issues, issueId);
|
||||
this.cycleId === cycleId && this.removeIssueFromList(issueId);
|
||||
});
|
||||
|
||||
this.rootIssueStore.issues.updateIssue(issueId, { cycle_id: null });
|
||||
|
||||
@ -28,7 +28,9 @@ export interface IDraftIssuesFilter extends IBaseIssueFilterStore {
|
||||
//helper actions
|
||||
getFilterParams: (
|
||||
options: IssuePaginationOptions,
|
||||
cursor: string | undefined
|
||||
cursor: string | undefined,
|
||||
groupId: string | undefined,
|
||||
subGroupId: string | undefined
|
||||
) => Partial<Record<TIssueParams, string | boolean>>;
|
||||
// action
|
||||
fetchFilters: (workspaceSlug: string, projectId: string) => Promise<void>;
|
||||
@ -94,25 +96,19 @@ export class DraftIssuesFilter extends IssueFilterHelperStore implements IDraftI
|
||||
return filteredRouteParams;
|
||||
}
|
||||
|
||||
getFilterParams = computedFn((options: IssuePaginationOptions, cursor: string | undefined) => {
|
||||
getFilterParams = computedFn(
|
||||
(
|
||||
options: IssuePaginationOptions,
|
||||
cursor: string | undefined,
|
||||
groupId: string | undefined,
|
||||
subGroupId: string | undefined
|
||||
) => {
|
||||
const filterParams = this.appliedFilters;
|
||||
|
||||
const paginationOptions: Partial<Record<TIssueParams, string | boolean>> = {
|
||||
...filterParams,
|
||||
cursor: cursor ? cursor : `${options.perPageCount}:0:0`,
|
||||
per_page: options.perPageCount.toString(),
|
||||
};
|
||||
|
||||
if (options.groupedBy) {
|
||||
paginationOptions.group_by = options.groupedBy;
|
||||
const paginationParams = this.getPaginationParams(filterParams, options, cursor, groupId, subGroupId);
|
||||
return paginationParams;
|
||||
}
|
||||
|
||||
if (options.after && options.before) {
|
||||
paginationOptions["target_date"] = `${options.after};after,${options.before};before`;
|
||||
}
|
||||
|
||||
return paginationOptions;
|
||||
});
|
||||
);
|
||||
|
||||
fetchFilters = async (workspaceSlug: string, projectId: string) => {
|
||||
try {
|
||||
|
||||
@ -24,7 +24,12 @@ export interface IDraftIssues extends IBaseIssuesStore {
|
||||
loadType: TLoader
|
||||
) => Promise<TIssuesResponse | undefined>;
|
||||
|
||||
fetchNextIssues: (workspaceSlug: string, projectId: string) => Promise<TIssuesResponse | undefined>;
|
||||
fetchNextIssues: (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
groupId?: string,
|
||||
subGroupId?: string
|
||||
) => Promise<TIssuesResponse | undefined>;
|
||||
createIssue: (workspaceSlug: string, projectId: string, data: Partial<TIssue>) => Promise<TIssue>;
|
||||
updateIssue: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
|
||||
|
||||
@ -63,7 +68,7 @@ export class DraftIssues extends BaseIssuesStore implements IDraftIssues {
|
||||
this.loader = loadType;
|
||||
});
|
||||
this.clear();
|
||||
const params = this.issueFilterStore?.getFilterParams(options, undefined);
|
||||
const params = this.issueFilterStore?.getFilterParams(options, undefined, undefined, undefined);
|
||||
const response = await this.issueDraftService.getDraftIssues(workspaceSlug, projectId, params);
|
||||
|
||||
this.onfetchIssues(response, options);
|
||||
@ -74,15 +79,21 @@ export class DraftIssues extends BaseIssuesStore implements IDraftIssues {
|
||||
}
|
||||
};
|
||||
|
||||
fetchNextIssues = async (workspaceSlug: string, projectId: string) => {
|
||||
if (!this.paginationOptions || !this.next_page_results) return;
|
||||
fetchNextIssues = async (workspaceSlug: string, projectId: string, groupId?: string, subGroupId?: string) => {
|
||||
const cursorObject = this.getPaginationData(subGroupId ?? groupId);
|
||||
if (!this.paginationOptions || (cursorObject && !cursorObject?.nextPageResults)) return;
|
||||
try {
|
||||
this.loader = "pagination";
|
||||
|
||||
const params = this.issueFilterStore?.getFilterParams(this.paginationOptions, this.nextCursor);
|
||||
const response = await this.issueService.getIssues(workspaceSlug, projectId, params);
|
||||
const params = this.issueFilterStore?.getFilterParams(
|
||||
this.paginationOptions,
|
||||
cursorObject?.nextCursor,
|
||||
groupId,
|
||||
subGroupId
|
||||
);
|
||||
const response = await this.issueDraftService.getDraftIssues(workspaceSlug, projectId, params);
|
||||
|
||||
this.onfetchNexIssues(response);
|
||||
this.onfetchNexIssues(response, groupId, subGroupId);
|
||||
return response;
|
||||
} catch (error) {
|
||||
this.loader = undefined;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -6,12 +6,18 @@ import {
|
||||
IIssueFilterOptions,
|
||||
IIssueFilters,
|
||||
IIssueFiltersResponse,
|
||||
IssuePaginationOptions,
|
||||
TIssueKanbanFilters,
|
||||
TIssueParams,
|
||||
TStaticViewTypes,
|
||||
} from "@plane/types";
|
||||
// constants
|
||||
import { EIssueFilterType, EIssuesStoreType, IssueGroupByOptions } from "constants/issue";
|
||||
import {
|
||||
EIssueFilterType,
|
||||
EIssuesStoreType,
|
||||
EIssueGroupByToServerOptions,
|
||||
EServerGroupByToFilterOptions,
|
||||
} from "constants/issue";
|
||||
// lib
|
||||
import { storage } from "lib/local-storage";
|
||||
|
||||
@ -89,7 +95,10 @@ export class IssueFilterHelperStore implements IIssueFilterHelperStore {
|
||||
project: filters?.project || undefined,
|
||||
subscriber: filters?.subscriber || undefined,
|
||||
// display filters
|
||||
group_by: displayFilters?.group_by ? IssueGroupByOptions[displayFilters.group_by] : undefined,
|
||||
group_by: displayFilters?.group_by ? EIssueGroupByToServerOptions[displayFilters.group_by] : undefined,
|
||||
sub_group_by: displayFilters?.sub_group_by
|
||||
? EIssueGroupByToServerOptions[displayFilters.sub_group_by]
|
||||
: undefined,
|
||||
order_by: displayFilters?.order_by || undefined,
|
||||
type: displayFilters?.type || undefined,
|
||||
sub_issue: displayFilters?.sub_issue ?? true,
|
||||
@ -209,7 +218,6 @@ export class IssueFilterHelperStore implements IIssueFilterHelperStore {
|
||||
cycle: displayProperties?.cycle ?? true,
|
||||
});
|
||||
|
||||
|
||||
handleIssuesLocalFilters = {
|
||||
fetchFiltersFromStorage: () => {
|
||||
const _filters = storage.get("issue_local_filters");
|
||||
@ -272,4 +280,64 @@ export class IssueFilterHelperStore implements IIssueFilterHelperStore {
|
||||
storage.set("issue_local_filters", JSON.stringify(storageFilters));
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* This Method returns true if the display properties changed requires a server side update
|
||||
* @param displayFilters
|
||||
* @returns
|
||||
*/
|
||||
requiresServerUpdate = (displayFilters: IIssueDisplayFilterOptions) => {
|
||||
const NON_SERVER_DISPLAY_FILTERS = ["order_by", "sub_issue", "type"];
|
||||
const displayFilterKeys = Object.keys(displayFilters);
|
||||
|
||||
return NON_SERVER_DISPLAY_FILTERS.some((serverDisplayfilter: string) =>
|
||||
displayFilterKeys.includes(serverDisplayfilter)
|
||||
);
|
||||
};
|
||||
|
||||
getPaginationParams(
|
||||
filterParams: Partial<Record<TIssueParams, string | boolean>> | undefined,
|
||||
options: IssuePaginationOptions,
|
||||
cursor: string | undefined,
|
||||
groupId?: string,
|
||||
subGroupId?: string
|
||||
) {
|
||||
const pageCursor = cursor ? cursor : groupId ? `${options.perPageCount * 2}:0:0` : `${options.perPageCount}:0:0`;
|
||||
|
||||
const paginationParams: Partial<Record<TIssueParams, string | boolean>> = {
|
||||
...filterParams,
|
||||
cursor: pageCursor,
|
||||
per_page: (groupId ? options.perPageCount * 2 : options.perPageCount).toString(),
|
||||
};
|
||||
|
||||
if (options.groupedBy) {
|
||||
paginationParams.group_by = options.groupedBy;
|
||||
}
|
||||
|
||||
if (options.after && options.before) {
|
||||
paginationParams["target_date"] = `${options.after};after,${options.before};before`;
|
||||
}
|
||||
|
||||
if (groupId) {
|
||||
const groupBy = paginationParams["group_by"] as EIssueGroupByToServerOptions | undefined;
|
||||
delete paginationParams["group_by"];
|
||||
|
||||
if (groupBy) {
|
||||
const groupByFilterOption = EServerGroupByToFilterOptions[groupBy];
|
||||
paginationParams[groupByFilterOption] = groupId;
|
||||
}
|
||||
}
|
||||
|
||||
if (subGroupId) {
|
||||
const subGroupBy = paginationParams["sub_group_by"] as EIssueGroupByToServerOptions | undefined;
|
||||
delete paginationParams["sub_group_by"];
|
||||
|
||||
if (subGroupBy) {
|
||||
const subGroupByFilterOption = EServerGroupByToFilterOptions[subGroupBy];
|
||||
paginationParams[subGroupByFilterOption] = subGroupId;
|
||||
}
|
||||
}
|
||||
|
||||
return paginationParams;
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@ export type IIssueStore = {
|
||||
removeIssue(issueId: string): void;
|
||||
// helper methods
|
||||
getIssueById(issueId: string): undefined | TIssue;
|
||||
getIssuesByIds(issueIds: string[], type: "archived" | "un-archived"): undefined | Record<string, TIssue>; // Record defines issue_id as key and TIssue as value
|
||||
getIssuesByIds(issueIds: string[], type: "archived" | "un-archived"): TIssue[]; // Record defines issue_id as key and TIssue as value
|
||||
};
|
||||
|
||||
export class IssueStore implements IIssueStore {
|
||||
@ -112,15 +112,16 @@ export class IssueStore implements IIssueStore {
|
||||
* @returns {Record<string, TIssue> | undefined}
|
||||
*/
|
||||
getIssuesByIds = computedFn((issueIds: string[], type: "archived" | "un-archived") => {
|
||||
if (!issueIds || issueIds.length <= 0 || isEmpty(this.issuesMap)) return undefined;
|
||||
const filteredIssues: { [key: string]: TIssue } = {};
|
||||
Object.values(this.issuesMap).forEach((issue) => {
|
||||
if (!issueIds || issueIds.length <= 0 || isEmpty(this.issuesMap)) return [];
|
||||
const filteredIssues: TIssue[] = [];
|
||||
Object.values(issueIds).forEach((issueId) => {
|
||||
// if type is archived then check archived_at is not null
|
||||
// if type is un-archived then check archived_at is null
|
||||
if ((type === "archived" && issue.archived_at) || (type === "un-archived" && !issue.archived_at)) {
|
||||
if (issueIds.includes(issue.id)) filteredIssues[issue.id] = issue;
|
||||
const issue = this.issuesMap[issueId];
|
||||
if ((issue && type === "archived" && issue.archived_at) || (type === "un-archived" && !issue?.archived_at)) {
|
||||
filteredIssues.push(issue);
|
||||
}
|
||||
});
|
||||
return isEmpty(filteredIssues) ? undefined : filteredIssues;
|
||||
return filteredIssues;
|
||||
});
|
||||
}
|
||||
|
||||
@ -28,7 +28,9 @@ export interface IModuleIssuesFilter extends IBaseIssueFilterStore {
|
||||
//helper actions
|
||||
getFilterParams: (
|
||||
options: IssuePaginationOptions,
|
||||
cursor: string | undefined
|
||||
cursor: string | undefined,
|
||||
groupId: string | undefined,
|
||||
subGroupId: string | undefined
|
||||
) => Partial<Record<TIssueParams, string | boolean>>;
|
||||
// action
|
||||
fetchFilters: (workspaceSlug: string, projectId: string, moduleId: string) => Promise<void>;
|
||||
@ -97,21 +99,19 @@ export class ModuleIssuesFilter extends IssueFilterHelperStore implements IModul
|
||||
return filteredRouteParams;
|
||||
}
|
||||
|
||||
getFilterParams = computedFn((options: IssuePaginationOptions, cursor: string | undefined) => {
|
||||
getFilterParams = computedFn(
|
||||
(
|
||||
options: IssuePaginationOptions,
|
||||
cursor: string | undefined,
|
||||
groupId: string | undefined,
|
||||
subGroupId: string | undefined
|
||||
) => {
|
||||
const filterParams = this.appliedFilters;
|
||||
|
||||
const paginationOptions: Partial<Record<TIssueParams, string | boolean>> = {
|
||||
...filterParams,
|
||||
cursor: cursor ? cursor : `${options.perPageCount}:0:0`,
|
||||
per_page: options.perPageCount.toString(),
|
||||
};
|
||||
|
||||
if (options.groupedBy) {
|
||||
paginationOptions.group_by = options.groupedBy;
|
||||
const paginationParams = this.getPaginationParams(filterParams, options, cursor, groupId, subGroupId);
|
||||
return paginationParams;
|
||||
}
|
||||
|
||||
return paginationOptions;
|
||||
});
|
||||
);
|
||||
|
||||
fetchFilters = async (workspaceSlug: string, projectId: string, moduleId: string) => {
|
||||
try {
|
||||
|
||||
@ -28,7 +28,13 @@ export interface IModuleIssues extends IBaseIssuesStore {
|
||||
loadType: TLoader,
|
||||
moduleId: string
|
||||
) => Promise<TIssuesResponse | undefined>;
|
||||
fetchNextIssues: (workspaceSlug: string, projectId: string, moduleId: string) => Promise<TIssuesResponse | undefined>;
|
||||
fetchNextIssues: (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
moduleId: string,
|
||||
groupId?: string,
|
||||
subGroupId?: string
|
||||
) => Promise<TIssuesResponse | undefined>;
|
||||
|
||||
createIssue: (workspaceSlug: string, projectId: string, data: Partial<TIssue>, moduleId: string) => Promise<TIssue>;
|
||||
updateIssue: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
|
||||
@ -111,7 +117,7 @@ export class ModuleIssues extends BaseIssuesStore implements IModuleIssues {
|
||||
|
||||
this.moduleId = moduleId;
|
||||
|
||||
const params = this.issueFilterStore?.getFilterParams(options, undefined);
|
||||
const params = this.issueFilterStore?.getFilterParams(options, undefined, undefined, undefined);
|
||||
const response = await this.moduleService.getModuleIssues(workspaceSlug, projectId, moduleId, params);
|
||||
|
||||
this.onfetchIssues(response, options);
|
||||
@ -122,15 +128,27 @@ export class ModuleIssues extends BaseIssuesStore implements IModuleIssues {
|
||||
}
|
||||
};
|
||||
|
||||
fetchNextIssues = async (workspaceSlug: string, projectId: string, moduleId: string) => {
|
||||
if (!this.paginationOptions || !this.next_page_results) return;
|
||||
fetchNextIssues = async (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
moduleId: string,
|
||||
groupId?: string,
|
||||
subGroupId?: string
|
||||
) => {
|
||||
const cursorObject = this.getPaginationData(subGroupId ?? groupId);
|
||||
if (!this.paginationOptions || (cursorObject && !cursorObject?.nextPageResults)) return;
|
||||
try {
|
||||
this.loader = "pagination";
|
||||
|
||||
const params = this.issueFilterStore?.getFilterParams(this.paginationOptions, this.nextCursor);
|
||||
const params = this.issueFilterStore?.getFilterParams(
|
||||
this.paginationOptions,
|
||||
cursorObject?.nextCursor,
|
||||
groupId,
|
||||
subGroupId
|
||||
);
|
||||
const response = await this.moduleService.getModuleIssues(workspaceSlug, projectId, moduleId, params);
|
||||
|
||||
this.onfetchNexIssues(response);
|
||||
this.onfetchNexIssues(response, groupId, subGroupId);
|
||||
return response;
|
||||
} catch (error) {
|
||||
this.loader = undefined;
|
||||
@ -177,11 +195,7 @@ export class ModuleIssues extends BaseIssuesStore implements IModuleIssues {
|
||||
if (fetchAddedIssues) await this.rootIssueStore.issues.getIssues(workspaceSlug, projectId, issueIds);
|
||||
|
||||
runInAction(() => {
|
||||
this.moduleId === moduleId &&
|
||||
update(this, "issues", (moduleIssueIds = []) => {
|
||||
if (!moduleIssueIds) return [...issueIds];
|
||||
else return uniq(concat(moduleIssueIds, issueIds));
|
||||
});
|
||||
this.moduleId === moduleId && issueIds.forEach((issueId) => this.addIssueToList(issueId));
|
||||
});
|
||||
|
||||
issueIds.forEach((issueId) => {
|
||||
@ -207,10 +221,7 @@ export class ModuleIssues extends BaseIssuesStore implements IModuleIssues {
|
||||
);
|
||||
|
||||
runInAction(() => {
|
||||
this.moduleId === moduleId &&
|
||||
issueIds.forEach((issueId) => {
|
||||
this.issues && pull(this.issues, issueId);
|
||||
});
|
||||
this.moduleId === moduleId && issueIds.forEach((issueId) => this.removeIssueFromList(issueId));
|
||||
});
|
||||
|
||||
runInAction(() => {
|
||||
@ -238,11 +249,7 @@ export class ModuleIssues extends BaseIssuesStore implements IModuleIssues {
|
||||
|
||||
runInAction(() => {
|
||||
moduleIds.forEach((moduleId) => {
|
||||
this.moduleId === moduleId &&
|
||||
update(this, "issues", (moduleIssueIds = []) => {
|
||||
if (moduleIssueIds.includes(issueId)) return moduleIssueIds;
|
||||
else return uniq(concat(moduleIssueIds, [issueId]));
|
||||
});
|
||||
this.moduleId === moduleId && this.addIssueToList(issueId);
|
||||
});
|
||||
update(this.rootIssueStore.issues.issuesMap, [issueId, "module_ids"], (issueModuleIds = []) =>
|
||||
uniq(concat(issueModuleIds, moduleIds))
|
||||
@ -259,11 +266,7 @@ export class ModuleIssues extends BaseIssuesStore implements IModuleIssues {
|
||||
try {
|
||||
runInAction(() => {
|
||||
moduleIds.forEach((moduleId) => {
|
||||
this.moduleId === moduleId &&
|
||||
update(this, "issues", (moduleIssueIds = []) => {
|
||||
if (moduleIssueIds.includes(issueId)) return pull(moduleIssueIds, issueId);
|
||||
else return uniq(concat(moduleIssueIds, [issueId]));
|
||||
});
|
||||
this.moduleId === moduleId && this.removeIssueFromList(issueId);
|
||||
update(this.rootIssueStore.issues.issuesMap, [issueId, "module_ids"], (issueModuleIds = []) =>
|
||||
pull(issueModuleIds, moduleId)
|
||||
);
|
||||
@ -286,7 +289,7 @@ export class ModuleIssues extends BaseIssuesStore implements IModuleIssues {
|
||||
removeIssueFromModule = async (workspaceSlug: string, projectId: string, moduleId: string, issueId: string) => {
|
||||
try {
|
||||
runInAction(() => {
|
||||
this.issues && this.moduleId === this.moduleId && pull(this.issues, issueId);
|
||||
this.moduleId === this.moduleId && this.removeIssueFromList(issueId);
|
||||
update(this.rootIssueStore.issues.issuesMap, [issueId, "module_ids"], (issueModuleIds = []) =>
|
||||
pull(issueModuleIds, moduleId)
|
||||
);
|
||||
|
||||
@ -30,7 +30,9 @@ export interface IProfileIssuesFilter extends IBaseIssueFilterStore {
|
||||
//helper actions
|
||||
getFilterParams: (
|
||||
options: IssuePaginationOptions,
|
||||
cursor: string | undefined
|
||||
cursor: string | undefined,
|
||||
groupId: string | undefined,
|
||||
subGroupId: string | undefined
|
||||
) => Partial<Record<TIssueParams, string | boolean>>;
|
||||
// action
|
||||
fetchFilters: (workspaceSlug: string, userId: string) => Promise<void>;
|
||||
@ -99,21 +101,19 @@ export class ProfileIssuesFilter extends IssueFilterHelperStore implements IProf
|
||||
return filteredRouteParams;
|
||||
}
|
||||
|
||||
getFilterParams = computedFn((options: IssuePaginationOptions, cursor: string | undefined) => {
|
||||
getFilterParams = computedFn(
|
||||
(
|
||||
options: IssuePaginationOptions,
|
||||
cursor: string | undefined,
|
||||
groupId: string | undefined,
|
||||
subGroupId: string | undefined
|
||||
) => {
|
||||
const filterParams = this.appliedFilters;
|
||||
|
||||
const paginationOptions: Partial<Record<TIssueParams, string | boolean>> = {
|
||||
...filterParams,
|
||||
cursor: cursor ? cursor : `${options.perPageCount}:0:0`,
|
||||
per_page: options.perPageCount.toString(),
|
||||
};
|
||||
|
||||
if (options.groupedBy) {
|
||||
paginationOptions.group_by = options.groupedBy;
|
||||
const paginationParams = this.getPaginationParams(filterParams, options, cursor, groupId, subGroupId);
|
||||
return paginationParams;
|
||||
}
|
||||
|
||||
return paginationOptions;
|
||||
});
|
||||
);
|
||||
|
||||
fetchFilters = async (workspaceSlug: string, userId: string) => {
|
||||
try {
|
||||
|
||||
@ -27,7 +27,12 @@ export interface IProfileIssues extends IBaseIssuesStore {
|
||||
userId: string,
|
||||
loadType: TLoader
|
||||
) => Promise<TIssuesResponse | undefined>;
|
||||
fetchNextIssues: (workspaceSlug: string, userId: string) => Promise<TIssuesResponse | undefined>;
|
||||
fetchNextIssues: (
|
||||
workspaceSlug: string,
|
||||
userId: string,
|
||||
groupId?: string,
|
||||
subGroupId?: string
|
||||
) => Promise<TIssuesResponse | undefined>;
|
||||
|
||||
createIssue: (workspaceSlug: string, projectId: string, data: Partial<TIssue>) => Promise<TIssue>;
|
||||
updateIssue: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
|
||||
@ -95,7 +100,7 @@ export class ProfileIssues extends BaseIssuesStore implements IProfileIssues {
|
||||
|
||||
this.setViewId(view);
|
||||
|
||||
let params = this.issueFilterStore?.getFilterParams(options, undefined);
|
||||
let params = this.issueFilterStore?.getFilterParams(options, undefined, undefined, undefined);
|
||||
params = {
|
||||
...params,
|
||||
assignees: undefined,
|
||||
@ -116,12 +121,18 @@ export class ProfileIssues extends BaseIssuesStore implements IProfileIssues {
|
||||
}
|
||||
};
|
||||
|
||||
fetchNextIssues = async (workspaceSlug: string, userId: string) => {
|
||||
if (!this.paginationOptions || !this.currentView || !this.next_page_results) return;
|
||||
fetchNextIssues = async (workspaceSlug: string, userId: string, groupId?: string, subGroupId?: string) => {
|
||||
const cursorObject = this.getPaginationData(subGroupId ?? groupId);
|
||||
if (!this.paginationOptions || (cursorObject && !cursorObject?.nextPageResults)) return;
|
||||
try {
|
||||
this.loader = "pagination";
|
||||
|
||||
let params = this.issueFilterStore?.getFilterParams(this.paginationOptions, this.nextCursor);
|
||||
let params = this.issueFilterStore?.getFilterParams(
|
||||
this.paginationOptions,
|
||||
cursorObject?.nextCursor,
|
||||
groupId,
|
||||
subGroupId
|
||||
);
|
||||
params = {
|
||||
...params,
|
||||
assignees: undefined,
|
||||
@ -134,7 +145,7 @@ export class ProfileIssues extends BaseIssuesStore implements IProfileIssues {
|
||||
|
||||
const response = await this.userService.getUserProfileIssues(workspaceSlug, userId, params);
|
||||
|
||||
this.onfetchNexIssues(response);
|
||||
this.onfetchNexIssues(response, groupId, subGroupId);
|
||||
return response;
|
||||
} catch (error) {
|
||||
this.loader = undefined;
|
||||
|
||||
@ -28,7 +28,9 @@ export interface IProjectViewIssuesFilter extends IBaseIssueFilterStore {
|
||||
//helper actions
|
||||
getFilterParams: (
|
||||
options: IssuePaginationOptions,
|
||||
cursor: string | undefined
|
||||
cursor: string | undefined,
|
||||
groupId: string | undefined,
|
||||
subGroupId: string | undefined
|
||||
) => Partial<Record<TIssueParams, string | boolean>>;
|
||||
// action
|
||||
fetchFilters: (workspaceSlug: string, projectId: string, viewId: string) => Promise<void>;
|
||||
@ -95,21 +97,19 @@ export class ProjectViewIssuesFilter extends IssueFilterHelperStore implements I
|
||||
return filteredRouteParams;
|
||||
}
|
||||
|
||||
getFilterParams = computedFn((options: IssuePaginationOptions, cursor: string | undefined) => {
|
||||
getFilterParams = computedFn(
|
||||
(
|
||||
options: IssuePaginationOptions,
|
||||
cursor: string | undefined,
|
||||
groupId: string | undefined,
|
||||
subGroupId: string | undefined
|
||||
) => {
|
||||
const filterParams = this.appliedFilters;
|
||||
|
||||
const paginationOptions: Partial<Record<TIssueParams, string | boolean>> = {
|
||||
...filterParams,
|
||||
cursor: cursor ? cursor : `${options.perPageCount}:0:0`,
|
||||
per_page: options.perPageCount.toString(),
|
||||
};
|
||||
|
||||
if (options.groupedBy) {
|
||||
paginationOptions.group_by = options.groupedBy;
|
||||
const paginationParams = this.getPaginationParams(filterParams, options, cursor, groupId, subGroupId);
|
||||
return paginationParams;
|
||||
}
|
||||
|
||||
return paginationOptions;
|
||||
});
|
||||
);
|
||||
|
||||
fetchFilters = async (workspaceSlug: string, projectId: string, viewId: string) => {
|
||||
try {
|
||||
|
||||
@ -21,7 +21,12 @@ export interface IProjectViewIssues extends IBaseIssuesStore {
|
||||
projectId: string,
|
||||
loadType: TLoader
|
||||
) => Promise<TIssuesResponse | undefined>;
|
||||
fetchNextIssues: (workspaceSlug: string, projectId: string) => Promise<TIssuesResponse | undefined>;
|
||||
fetchNextIssues: (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
groupId?: string,
|
||||
subGroupId?: string
|
||||
) => Promise<TIssuesResponse | undefined>;
|
||||
|
||||
createIssue: (workspaceSlug: string, projectId: string, data: Partial<TIssue>) => Promise<TIssue>;
|
||||
updateIssue: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
|
||||
@ -62,7 +67,7 @@ export class ProjectViewIssues extends BaseIssuesStore implements IProjectViewIs
|
||||
this.loader = loadType;
|
||||
});
|
||||
this.clear();
|
||||
const params = this.issueFilterStore?.getFilterParams(options, undefined);
|
||||
const params = this.issueFilterStore?.getFilterParams(options, undefined, undefined, undefined);
|
||||
const response = await this.issueService.getIssues(workspaceSlug, projectId, params);
|
||||
|
||||
this.onfetchIssues(response, options);
|
||||
@ -73,15 +78,21 @@ export class ProjectViewIssues extends BaseIssuesStore implements IProjectViewIs
|
||||
}
|
||||
};
|
||||
|
||||
fetchNextIssues = async (workspaceSlug: string, projectId: string) => {
|
||||
if (!this.paginationOptions || !this.next_page_results) return;
|
||||
fetchNextIssues = async (workspaceSlug: string, projectId: string, groupId?: string, subGroupId?: string) => {
|
||||
const cursorObject = this.getPaginationData(subGroupId ?? groupId);
|
||||
if (!this.paginationOptions || (cursorObject && !cursorObject?.nextPageResults)) return;
|
||||
try {
|
||||
this.loader = "pagination";
|
||||
|
||||
const params = this.issueFilterStore?.getFilterParams(this.paginationOptions, this.nextCursor);
|
||||
let params = this.issueFilterStore?.getFilterParams(
|
||||
this.paginationOptions,
|
||||
cursorObject?.nextCursor,
|
||||
groupId,
|
||||
subGroupId
|
||||
);
|
||||
const response = await this.issueService.getIssues(workspaceSlug, projectId, params);
|
||||
|
||||
this.onfetchNexIssues(response);
|
||||
this.onfetchNexIssues(response, groupId, subGroupId);
|
||||
return response;
|
||||
} catch (error) {
|
||||
this.loader = undefined;
|
||||
|
||||
@ -20,7 +20,7 @@ import { IBaseIssueFilterStore, IssueFilterHelperStore } from "../helpers/issue-
|
||||
// types
|
||||
import { IIssueRootStore } from "../root.store";
|
||||
// constants
|
||||
import { EIssueFilterType, EIssuesStoreType, IssueGroupByOptions } from "constants/issue";
|
||||
import { EIssueFilterType, EIssuesStoreType } from "constants/issue";
|
||||
import { computedFn } from "mobx-utils";
|
||||
// services
|
||||
|
||||
@ -28,7 +28,9 @@ export interface IProjectIssuesFilter extends IBaseIssueFilterStore {
|
||||
//helper actions
|
||||
getFilterParams: (
|
||||
options: IssuePaginationOptions,
|
||||
cursor: string | undefined
|
||||
cursor: string | undefined,
|
||||
groupId: string | undefined,
|
||||
subGroupId: string | undefined
|
||||
) => Partial<Record<TIssueParams, string | boolean>>;
|
||||
// action
|
||||
fetchFilters: (workspaceSlug: string, projectId: string) => Promise<void>;
|
||||
@ -94,25 +96,18 @@ export class ProjectIssuesFilter extends IssueFilterHelperStore implements IProj
|
||||
return filteredRouteParams;
|
||||
}
|
||||
|
||||
getFilterParams = computedFn((options: IssuePaginationOptions, cursor: string | undefined) => {
|
||||
getFilterParams = computedFn(
|
||||
(
|
||||
options: IssuePaginationOptions,
|
||||
cursor: string | undefined,
|
||||
groupId: string | undefined,
|
||||
subGroupId: string | undefined
|
||||
) => {
|
||||
const filterParams = this.appliedFilters;
|
||||
|
||||
const paginationOptions: Partial<Record<TIssueParams, string | boolean>> = {
|
||||
...filterParams,
|
||||
cursor: cursor ? cursor : `${options.perPageCount}:0:0`,
|
||||
per_page: options.perPageCount.toString(),
|
||||
};
|
||||
|
||||
if (options.groupedBy) {
|
||||
paginationOptions.group_by = options.groupedBy;
|
||||
const paginationParams = this.getPaginationParams(filterParams, options, cursor, groupId, subGroupId);
|
||||
return paginationParams;
|
||||
}
|
||||
|
||||
if (options.after && options.before) {
|
||||
paginationOptions["target_date"] = `${options.after};after,${options.before};before`;
|
||||
}
|
||||
|
||||
return paginationOptions;
|
||||
});
|
||||
);
|
||||
|
||||
fetchFilters = async (workspaceSlug: string, projectId: string) => {
|
||||
try {
|
||||
@ -221,6 +216,7 @@ export class ProjectIssuesFilter extends IssueFilterHelperStore implements IProj
|
||||
});
|
||||
});
|
||||
|
||||
if (this.requiresServerUpdate(updatedDisplayFilters))
|
||||
this.rootIssueStore.projectIssues.fetchIssuesWithExistingPagination(workspaceSlug, projectId, "mutation");
|
||||
|
||||
await this.issueFilterService.patchProjectIssueFilters(workspaceSlug, projectId, {
|
||||
|
||||
@ -22,7 +22,12 @@ export interface IProjectIssues extends IBaseIssuesStore {
|
||||
projectId: string,
|
||||
loadType: TLoader
|
||||
) => Promise<TIssuesResponse | undefined>;
|
||||
fetchNextIssues: (workspaceSlug: string, projectId: string) => Promise<TIssuesResponse | undefined>;
|
||||
fetchNextIssues: (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
groupId?: string,
|
||||
subGroupId?: string
|
||||
) => Promise<TIssuesResponse | undefined>;
|
||||
|
||||
createIssue: (workspaceSlug: string, projectId: string, data: Partial<TIssue>) => Promise<TIssue>;
|
||||
updateIssue: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
|
||||
@ -65,7 +70,7 @@ export class ProjectIssues extends BaseIssuesStore implements IProjectIssues {
|
||||
this.loader = loadType;
|
||||
});
|
||||
this.clear();
|
||||
const params = this.issueFilterStore?.getFilterParams(options, undefined);
|
||||
const params = this.issueFilterStore?.getFilterParams(options, undefined, undefined, undefined);
|
||||
const response = await this.issueService.getIssues(workspaceSlug, projectId, params);
|
||||
|
||||
this.onfetchIssues(response, options);
|
||||
@ -76,15 +81,21 @@ export class ProjectIssues extends BaseIssuesStore implements IProjectIssues {
|
||||
}
|
||||
};
|
||||
|
||||
fetchNextIssues = async (workspaceSlug: string, projectId: string) => {
|
||||
if (!this.paginationOptions || !this.next_page_results) return;
|
||||
fetchNextIssues = async (workspaceSlug: string, projectId: string, groupId?: string, subGroupId?: string) => {
|
||||
const cursorObject = this.getPaginationData(subGroupId ?? groupId);
|
||||
if (!this.paginationOptions || (cursorObject && !cursorObject?.nextPageResults)) return;
|
||||
try {
|
||||
this.loader = "pagination";
|
||||
|
||||
const params = this.issueFilterStore?.getFilterParams(this.paginationOptions, this.nextCursor);
|
||||
const params = this.issueFilterStore?.getFilterParams(
|
||||
this.paginationOptions,
|
||||
cursorObject?.nextCursor,
|
||||
groupId,
|
||||
subGroupId
|
||||
);
|
||||
const response = await this.issueService.getIssues(workspaceSlug, projectId, params);
|
||||
|
||||
this.onfetchNexIssues(response);
|
||||
this.onfetchNexIssues(response, groupId, subGroupId);
|
||||
return response;
|
||||
} catch (error) {
|
||||
this.loader = undefined;
|
||||
|
||||
@ -43,7 +43,9 @@ export interface IWorkspaceIssuesFilter extends IBaseIssueFilterStore {
|
||||
getFilterParams: (
|
||||
viewId: string,
|
||||
options: IssuePaginationOptions,
|
||||
cursor?: string
|
||||
cursor: string | undefined,
|
||||
groupId: string | undefined,
|
||||
subGroupId: string | undefined
|
||||
) => Partial<Record<TIssueParams, string | boolean>>;
|
||||
}
|
||||
|
||||
@ -102,21 +104,20 @@ export class WorkspaceIssuesFilter extends IssueFilterHelperStore implements IWo
|
||||
return filteredRouteParams;
|
||||
};
|
||||
|
||||
getFilterParams = computedFn((viewId: string, options: IssuePaginationOptions, cursor: string | undefined) => {
|
||||
getFilterParams = computedFn(
|
||||
(
|
||||
viewId: string,
|
||||
options: IssuePaginationOptions,
|
||||
cursor: string | undefined,
|
||||
groupId: string | undefined,
|
||||
subGroupId: string | undefined
|
||||
) => {
|
||||
const filterParams = this.getAppliedFilters(viewId);
|
||||
|
||||
const paginationOptions: Partial<Record<TIssueParams, string | boolean>> = {
|
||||
...filterParams,
|
||||
cursor: cursor ? cursor : `${options.perPageCount}:0:0`,
|
||||
per_page: options.perPageCount.toString(),
|
||||
};
|
||||
|
||||
if (options.groupedBy) {
|
||||
paginationOptions.group_by = options.groupedBy;
|
||||
const paginationParams = this.getPaginationParams(filterParams, options, cursor, groupId, subGroupId);
|
||||
return paginationParams;
|
||||
}
|
||||
|
||||
return paginationOptions;
|
||||
});
|
||||
);
|
||||
|
||||
get issueFilters() {
|
||||
const viewId = this.rootIssueStore.globalViewId;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { action, makeObservable, runInAction } from "mobx";
|
||||
// base class
|
||||
import { WorkspaceService } from "services/workspace.service";
|
||||
import { IssuePaginationOptions, TIssue, TIssuesResponse, TLoader, TUnGroupedIssues, ViewFlags } from "@plane/types";
|
||||
import { IssuePaginationOptions, TIssue, TIssuesResponse, TLoader, ViewFlags } from "@plane/types";
|
||||
// services
|
||||
// types
|
||||
import { IIssueRootStore } from "../root.store";
|
||||
@ -23,7 +23,12 @@ export interface IWorkspaceIssues extends IBaseIssuesStore {
|
||||
viewId: string,
|
||||
loadType: TLoader
|
||||
) => Promise<TIssuesResponse | undefined>;
|
||||
fetchNextIssues: (workspaceSlug: string, viewId: string) => Promise<TIssuesResponse | undefined>;
|
||||
fetchNextIssues: (
|
||||
workspaceSlug: string,
|
||||
viewId: string,
|
||||
groupId?: string,
|
||||
subGroupId?: string
|
||||
) => Promise<TIssuesResponse | undefined>;
|
||||
|
||||
createIssue: (workspaceSlug: string, projectId: string, data: Partial<TIssue>) => Promise<TIssue>;
|
||||
updateIssue: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
|
||||
@ -64,7 +69,7 @@ export class WorkspaceIssues extends BaseIssuesStore implements IWorkspaceIssues
|
||||
this.loader = loadType;
|
||||
});
|
||||
this.clear();
|
||||
const params = this.issueFilterStore?.getFilterParams(viewId, options, undefined);
|
||||
const params = this.issueFilterStore?.getFilterParams(viewId, options, undefined, undefined, undefined);
|
||||
const response = await this.workspaceService.getViewIssues(workspaceSlug, params);
|
||||
|
||||
this.onfetchIssues(response, options);
|
||||
@ -75,15 +80,22 @@ export class WorkspaceIssues extends BaseIssuesStore implements IWorkspaceIssues
|
||||
}
|
||||
};
|
||||
|
||||
fetchNextIssues = async (workspaceSlug: string, viewId: string) => {
|
||||
if (!this.paginationOptions) return;
|
||||
fetchNextIssues = async (workspaceSlug: string, viewId: string, groupId?: string, subGroupId?: string) => {
|
||||
const cursorObject = this.getPaginationData(subGroupId ?? groupId);
|
||||
if (!this.paginationOptions || (cursorObject && !cursorObject?.nextPageResults)) return;
|
||||
try {
|
||||
this.loader = "pagination";
|
||||
|
||||
const params = this.issueFilterStore?.getFilterParams(viewId, this.paginationOptions, this.nextCursor);
|
||||
const params = this.issueFilterStore?.getFilterParams(
|
||||
viewId,
|
||||
this.paginationOptions,
|
||||
cursorObject?.nextCursor,
|
||||
groupId,
|
||||
subGroupId
|
||||
);
|
||||
const response = await this.workspaceService.getViewIssues(workspaceSlug, params);
|
||||
|
||||
this.onfetchNexIssues(response);
|
||||
this.onfetchNexIssues(response, groupId, subGroupId);
|
||||
return response;
|
||||
} catch (error) {
|
||||
this.loader = undefined;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user