plane/web/components/issues/issue-layouts/list/default.tsx
2024-02-01 18:50:19 +05:30

242 lines
7.8 KiB
TypeScript

// components
import { IssueBlock, IssueBlocksList, ListQuickAddIssueForm } from "components/issues";
// hooks
import { useLabel, useMember, useProject, useProjectState } from "hooks/store";
// types
import {
GroupByColumnTypes,
TGroupedIssues,
TIssue,
IIssueDisplayProperties,
TIssueMap,
TUnGroupedIssues,
IIssueListRow,
} from "@plane/types";
import { EIssueActions } from "../types";
// constants
import { HeaderGroupByCard } from "./headers/group-by-card";
import { getGroupByColumns, getIssueFlatList } from "../utils";
import { EIssueListRow, TCreateModalStoreTypes } from "constants/issue";
import { useRef } from "react";
import RenderIfVisible from "components/core/render-if-visible-HOC";
export interface IGroupByList {
issueIds: TGroupedIssues | TUnGroupedIssues | any;
issuesMap: TIssueMap;
group_by: string | null;
handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>;
quickActions: (issue: TIssue) => React.ReactNode;
displayProperties: IIssueDisplayProperties | undefined;
enableIssueQuickAdd: boolean;
showEmptyGroup?: boolean;
canEditProperties: (projectId: string | undefined) => boolean;
quickAddCallback?: (
workspaceSlug: string,
projectId: string,
data: TIssue,
viewId?: string
) => Promise<TIssue | undefined>;
disableIssueCreation?: boolean;
storeType: TCreateModalStoreTypes;
addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
viewId?: string;
}
const GroupByList: React.FC<IGroupByList> = (props) => {
const {
issueIds,
issuesMap,
group_by,
handleIssues,
quickActions,
displayProperties,
enableIssueQuickAdd,
showEmptyGroup,
canEditProperties,
quickAddCallback,
viewId,
disableIssueCreation,
storeType,
addIssuesToView,
} = props;
// store hooks
const member = useMember();
const project = useProject();
const label = useLabel();
const projectState = useProjectState();
const containerRef = useRef<HTMLDivElement | null>(null);
const groups = getGroupByColumns(group_by as GroupByColumnTypes, project, label, projectState, member, true);
if (!groups) return null;
const prePopulateQuickAddData = (groupByKey: string | null, value: any) => {
const defaultState = projectState.projectStates?.find((state) => state.default);
let preloadedData: object = { state_id: defaultState?.id };
if (groupByKey === null) {
preloadedData = { ...preloadedData };
} else {
if (groupByKey === "state") {
preloadedData = { ...preloadedData, state_id: value };
} else if (groupByKey === "priority") {
preloadedData = { ...preloadedData, priority: value };
} else if (groupByKey === "labels" && value != "None") {
preloadedData = { ...preloadedData, label_ids: [value] };
} else if (groupByKey === "assignees" && value != "None") {
preloadedData = { ...preloadedData, assignee_ids: [value] };
} else if (groupByKey === "created_by") {
preloadedData = { ...preloadedData };
} else {
preloadedData = { ...preloadedData, [groupByKey]: value };
}
}
return preloadedData;
};
const list = getIssueFlatList(groups, issueIds, !!showEmptyGroup);
console.log(groups, issueIds, list);
const is_list = group_by === null ? true : false;
const isGroupByCreatedBy = group_by === "created_by";
return (
<div ref={containerRef} className="relative overflow-auto h-full w-full">
{list &&
list.length > 0 &&
list.map((listRow: IIssueListRow) => {
switch (listRow.type) {
case EIssueListRow.HEADER:
return (
<div
key={listRow.id}
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={listRow.icon}
title={listRow?.name || ""}
count={is_list ? issueIds?.length || 0 : issueIds?.[listRow.id]?.length || 0}
issuePayload={listRow.payload || {}}
disableIssueCreation={disableIssueCreation || isGroupByCreatedBy}
storeType={storeType}
addIssuesToView={addIssuesToView}
/>
</div>
);
case EIssueListRow.QUICK_ADD:
if (enableIssueQuickAdd && !disableIssueCreation && !isGroupByCreatedBy)
return (
<div
key={`${listRow.id}_${EIssueListRow.QUICK_ADD}`}
className="sticky bottom-0 z-[1] w-full flex-shrink-0"
>
<ListQuickAddIssueForm
prePopulatedData={prePopulateQuickAddData(group_by, listRow.id)}
quickAddCallback={quickAddCallback}
viewId={viewId}
/>
</div>
);
else return null;
case EIssueListRow.NO_ISSUES:
const noIssuesRow = listRow as IIssueListRow;
return (
<div
key={`${noIssuesRow.id}_${EIssueListRow.NO_ISSUES}`}
className="bg-custom-background-100 p-3 text-sm text-custom-text-400"
>
No issues
</div>
);
case EIssueListRow.ISSUE:
return (
<RenderIfVisible
key={`${listRow.id}_${listRow.groupId}`}
defaultHeight={45}
root={containerRef}
classNames={"relative border border-transparent border-b-custom-border-200 last:border-b-transparent"}
>
<IssueBlock
issueId={listRow.id}
issuesMap={issuesMap}
handleIssues={handleIssues}
quickActions={quickActions}
canEditProperties={canEditProperties}
displayProperties={displayProperties}
/>
</RenderIfVisible>
);
}
})}
</div>
);
};
export interface IList {
issueIds: TGroupedIssues | TUnGroupedIssues | any;
issuesMap: TIssueMap;
group_by: string | null;
handleIssues: (issue: TIssue, action: EIssueActions) => Promise<void>;
quickActions: (issue: TIssue) => React.ReactNode;
displayProperties: IIssueDisplayProperties | undefined;
showEmptyGroup: boolean;
enableIssueQuickAdd: boolean;
canEditProperties: (projectId: string | undefined) => boolean;
quickAddCallback?: (
workspaceSlug: string,
projectId: string,
data: TIssue,
viewId?: string
) => Promise<TIssue | undefined>;
viewId?: string;
disableIssueCreation?: boolean;
storeType: TCreateModalStoreTypes;
addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
}
export const List: React.FC<IList> = (props) => {
const {
issueIds,
issuesMap,
group_by,
handleIssues,
quickActions,
quickAddCallback,
viewId,
displayProperties,
showEmptyGroup,
enableIssueQuickAdd,
canEditProperties,
disableIssueCreation,
storeType,
addIssuesToView,
} = props;
return (
<div className="relative h-full w-full">
<GroupByList
issueIds={issueIds as TUnGroupedIssues}
issuesMap={issuesMap}
group_by={group_by}
handleIssues={handleIssues}
quickActions={quickActions}
displayProperties={displayProperties}
enableIssueQuickAdd={enableIssueQuickAdd}
showEmptyGroup={showEmptyGroup}
canEditProperties={canEditProperties}
quickAddCallback={quickAddCallback}
viewId={viewId}
disableIssueCreation={disableIssueCreation}
storeType={storeType}
addIssuesToView={addIssuesToView}
/>
</div>
);
};