forked from github/plane
8d15b9e7de
* chore: format all files in the project * fix: removing @types/react from dependencies * fix: adding prettier and eslint config * chore: format files * fix: upgrading turbo version * chore: ignoring warnings and adding todos * fix: updated the type of bubble menu item in the document editor * chore: format files --------- Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
361 lines
12 KiB
TypeScript
361 lines
12 KiB
TypeScript
import React from "react";
|
|
// components
|
|
import { ListGroupByHeaderRoot } from "./headers/group-by-root";
|
|
import { IssueBlocksList, ListQuickAddIssueForm } from "components/issues";
|
|
// types
|
|
import { IIssue, IIssueDisplayProperties, IIssueLabel, IProject, IState, IUserLite } from "types";
|
|
import { IIssueResponse, IGroupedIssues, TUnGroupedIssues } from "store/issues/types";
|
|
import { EIssueActions } from "../types";
|
|
// constants
|
|
import { getValueFromObject } from "constants/issue";
|
|
import { EProjectStore } from "store/command-palette.store";
|
|
|
|
export interface IGroupByList {
|
|
issueIds: IGroupedIssues | TUnGroupedIssues | any;
|
|
issues: any;
|
|
group_by: string | null;
|
|
list: any;
|
|
listKey: string;
|
|
states: IState[] | null;
|
|
is_list?: boolean;
|
|
handleIssues: (issue: IIssue, action: EIssueActions) => Promise<void>;
|
|
quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
|
|
displayProperties: IIssueDisplayProperties | undefined;
|
|
enableIssueQuickAdd: boolean;
|
|
showEmptyGroup?: boolean;
|
|
canEditProperties: (projectId: string | undefined) => boolean;
|
|
quickAddCallback?: (
|
|
workspaceSlug: string,
|
|
projectId: string,
|
|
data: IIssue,
|
|
viewId?: string
|
|
) => Promise<IIssue | undefined>;
|
|
disableIssueCreation?: boolean;
|
|
currentStore: EProjectStore;
|
|
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
|
|
viewId?: string;
|
|
}
|
|
|
|
const GroupByList: React.FC<IGroupByList> = (props) => {
|
|
const {
|
|
issueIds,
|
|
issues,
|
|
group_by,
|
|
list,
|
|
listKey,
|
|
is_list = false,
|
|
states,
|
|
handleIssues,
|
|
quickActions,
|
|
displayProperties,
|
|
enableIssueQuickAdd,
|
|
showEmptyGroup,
|
|
canEditProperties,
|
|
quickAddCallback,
|
|
viewId,
|
|
disableIssueCreation,
|
|
currentStore,
|
|
addIssuesToView,
|
|
} = props;
|
|
|
|
const prePopulateQuickAddData = (groupByKey: string | null, value: any) => {
|
|
const defaultState = states?.find((state) => state.default);
|
|
if (groupByKey === null) return { state: defaultState?.id };
|
|
else {
|
|
if (groupByKey === "state") return { state: groupByKey === "state" ? value : defaultState?.id };
|
|
else return { state: defaultState?.id, [groupByKey]: value };
|
|
}
|
|
};
|
|
|
|
const validateEmptyIssueGroups = (issues: IIssue[]) => {
|
|
const issuesCount = issues?.length || 0;
|
|
if (!showEmptyGroup && issuesCount <= 0) return false;
|
|
return true;
|
|
};
|
|
|
|
return (
|
|
<div className="relative h-full w-full">
|
|
{list &&
|
|
list.length > 0 &&
|
|
list.map(
|
|
(_list: any) =>
|
|
validateEmptyIssueGroups(is_list ? issueIds : issueIds?.[getValueFromObject(_list, listKey) as string]) && (
|
|
<div key={getValueFromObject(_list, listKey) as string} 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">
|
|
<ListGroupByHeaderRoot
|
|
column_id={getValueFromObject(_list, listKey) as string}
|
|
column_value={_list}
|
|
group_by={group_by}
|
|
issues_count={
|
|
is_list
|
|
? issueIds?.length || 0
|
|
: issueIds?.[getValueFromObject(_list, listKey) as string]?.length || 0
|
|
}
|
|
disableIssueCreation={disableIssueCreation}
|
|
currentStore={currentStore}
|
|
addIssuesToView={addIssuesToView}
|
|
/>
|
|
</div>
|
|
|
|
{issues && (
|
|
<IssueBlocksList
|
|
columnId={getValueFromObject(_list, listKey) as string}
|
|
issueIds={is_list ? issueIds || 0 : issueIds?.[getValueFromObject(_list, listKey) as string] || 0}
|
|
issues={issues}
|
|
handleIssues={handleIssues}
|
|
quickActions={quickActions}
|
|
displayProperties={displayProperties}
|
|
canEditProperties={canEditProperties}
|
|
/>
|
|
)}
|
|
|
|
{enableIssueQuickAdd && (
|
|
<div className="sticky bottom-0 z-[1] w-full flex-shrink-0">
|
|
<ListQuickAddIssueForm
|
|
prePopulatedData={prePopulateQuickAddData(group_by, getValueFromObject(_list, listKey))}
|
|
quickAddCallback={quickAddCallback}
|
|
viewId={viewId}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export interface IList {
|
|
issueIds: IGroupedIssues | TUnGroupedIssues | any;
|
|
issues: IIssueResponse | undefined;
|
|
group_by: string | null;
|
|
handleIssues: (issue: IIssue, action: EIssueActions) => Promise<void>;
|
|
quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
|
|
displayProperties: IIssueDisplayProperties | undefined;
|
|
showEmptyGroup: boolean;
|
|
enableIssueQuickAdd: boolean;
|
|
canEditProperties: (projectId: string | undefined) => boolean;
|
|
states: IState[] | null;
|
|
labels: IIssueLabel[] | null;
|
|
members: IUserLite[] | null;
|
|
projects: IProject[] | null;
|
|
stateGroups: any;
|
|
priorities: any;
|
|
quickAddCallback?: (
|
|
workspaceSlug: string,
|
|
projectId: string,
|
|
data: IIssue,
|
|
viewId?: string
|
|
) => Promise<IIssue | undefined>;
|
|
viewId?: string;
|
|
disableIssueCreation?: boolean;
|
|
currentStore: EProjectStore;
|
|
addIssuesToView?: (issueIds: string[]) => Promise<IIssue>;
|
|
}
|
|
|
|
export const List: React.FC<IList> = (props) => {
|
|
const {
|
|
issueIds,
|
|
issues,
|
|
group_by,
|
|
handleIssues,
|
|
quickActions,
|
|
quickAddCallback,
|
|
viewId,
|
|
displayProperties,
|
|
showEmptyGroup,
|
|
enableIssueQuickAdd,
|
|
canEditProperties,
|
|
disableIssueCreation,
|
|
states,
|
|
stateGroups,
|
|
priorities,
|
|
labels,
|
|
members,
|
|
projects,
|
|
currentStore,
|
|
addIssuesToView,
|
|
} = props;
|
|
|
|
return (
|
|
<div className="relative h-full w-full">
|
|
{group_by === null && (
|
|
<GroupByList
|
|
issueIds={issueIds as TUnGroupedIssues}
|
|
issues={issues}
|
|
group_by={group_by}
|
|
list={[{ id: `null`, title: `All Issues` }]}
|
|
listKey={`id`}
|
|
is_list={true}
|
|
states={states}
|
|
handleIssues={handleIssues}
|
|
quickActions={quickActions}
|
|
displayProperties={displayProperties}
|
|
enableIssueQuickAdd={enableIssueQuickAdd}
|
|
showEmptyGroup={showEmptyGroup}
|
|
canEditProperties={canEditProperties}
|
|
quickAddCallback={quickAddCallback}
|
|
viewId={viewId}
|
|
disableIssueCreation={disableIssueCreation}
|
|
currentStore={currentStore}
|
|
addIssuesToView={addIssuesToView}
|
|
/>
|
|
)}
|
|
|
|
{group_by && group_by === "project" && projects && (
|
|
<GroupByList
|
|
issueIds={issueIds as IGroupedIssues}
|
|
issues={issues}
|
|
group_by={group_by}
|
|
list={projects}
|
|
listKey={`id`}
|
|
states={states}
|
|
handleIssues={handleIssues}
|
|
quickActions={quickActions}
|
|
displayProperties={displayProperties}
|
|
showEmptyGroup={showEmptyGroup}
|
|
enableIssueQuickAdd={enableIssueQuickAdd}
|
|
canEditProperties={canEditProperties}
|
|
quickAddCallback={quickAddCallback}
|
|
viewId={viewId}
|
|
disableIssueCreation={disableIssueCreation}
|
|
currentStore={currentStore}
|
|
addIssuesToView={addIssuesToView}
|
|
/>
|
|
)}
|
|
|
|
{group_by && group_by === "state" && states && (
|
|
<GroupByList
|
|
issueIds={issueIds as IGroupedIssues}
|
|
issues={issues}
|
|
group_by={group_by}
|
|
list={states}
|
|
listKey={`id`}
|
|
states={states}
|
|
handleIssues={handleIssues}
|
|
quickActions={quickActions}
|
|
displayProperties={displayProperties}
|
|
showEmptyGroup={showEmptyGroup}
|
|
enableIssueQuickAdd={enableIssueQuickAdd}
|
|
canEditProperties={canEditProperties}
|
|
quickAddCallback={quickAddCallback}
|
|
viewId={viewId}
|
|
disableIssueCreation={disableIssueCreation}
|
|
currentStore={currentStore}
|
|
addIssuesToView={addIssuesToView}
|
|
/>
|
|
)}
|
|
|
|
{group_by && group_by === "state_detail.group" && stateGroups && (
|
|
<GroupByList
|
|
issueIds={issueIds as IGroupedIssues}
|
|
issues={issues}
|
|
group_by={group_by}
|
|
list={stateGroups}
|
|
listKey={`key`}
|
|
states={states}
|
|
handleIssues={handleIssues}
|
|
quickActions={quickActions}
|
|
displayProperties={displayProperties}
|
|
showEmptyGroup={showEmptyGroup}
|
|
enableIssueQuickAdd={enableIssueQuickAdd}
|
|
canEditProperties={canEditProperties}
|
|
quickAddCallback={quickAddCallback}
|
|
viewId={viewId}
|
|
disableIssueCreation={disableIssueCreation}
|
|
currentStore={currentStore}
|
|
addIssuesToView={addIssuesToView}
|
|
/>
|
|
)}
|
|
|
|
{group_by && group_by === "priority" && priorities && (
|
|
<GroupByList
|
|
issueIds={issueIds as IGroupedIssues}
|
|
issues={issues}
|
|
group_by={group_by}
|
|
list={priorities}
|
|
listKey={`key`}
|
|
states={states}
|
|
handleIssues={handleIssues}
|
|
quickActions={quickActions}
|
|
displayProperties={displayProperties}
|
|
showEmptyGroup={showEmptyGroup}
|
|
enableIssueQuickAdd={enableIssueQuickAdd}
|
|
canEditProperties={canEditProperties}
|
|
quickAddCallback={quickAddCallback}
|
|
viewId={viewId}
|
|
disableIssueCreation={disableIssueCreation}
|
|
currentStore={currentStore}
|
|
addIssuesToView={addIssuesToView}
|
|
/>
|
|
)}
|
|
|
|
{group_by && group_by === "labels" && labels && (
|
|
<GroupByList
|
|
issueIds={issueIds as IGroupedIssues}
|
|
issues={issues}
|
|
group_by={group_by}
|
|
list={[...labels, { id: "None", name: "None" }]}
|
|
listKey={`id`}
|
|
states={states}
|
|
handleIssues={handleIssues}
|
|
quickActions={quickActions}
|
|
displayProperties={displayProperties}
|
|
showEmptyGroup={showEmptyGroup}
|
|
enableIssueQuickAdd={enableIssueQuickAdd}
|
|
canEditProperties={canEditProperties}
|
|
quickAddCallback={quickAddCallback}
|
|
viewId={viewId}
|
|
disableIssueCreation={disableIssueCreation}
|
|
currentStore={currentStore}
|
|
addIssuesToView={addIssuesToView}
|
|
/>
|
|
)}
|
|
|
|
{group_by && group_by === "assignees" && members && (
|
|
<GroupByList
|
|
issueIds={issueIds as IGroupedIssues}
|
|
issues={issues}
|
|
group_by={group_by}
|
|
list={[...members, { id: "None", display_name: "None" }]}
|
|
listKey={`id`}
|
|
states={states}
|
|
handleIssues={handleIssues}
|
|
quickActions={quickActions}
|
|
displayProperties={displayProperties}
|
|
showEmptyGroup={showEmptyGroup}
|
|
enableIssueQuickAdd={enableIssueQuickAdd}
|
|
canEditProperties={canEditProperties}
|
|
quickAddCallback={quickAddCallback}
|
|
viewId={viewId}
|
|
disableIssueCreation={disableIssueCreation}
|
|
currentStore={currentStore}
|
|
addIssuesToView={addIssuesToView}
|
|
/>
|
|
)}
|
|
|
|
{group_by && group_by === "created_by" && members && (
|
|
<GroupByList
|
|
issueIds={issueIds as IGroupedIssues}
|
|
issues={issues}
|
|
group_by={group_by}
|
|
list={members}
|
|
listKey={`id`}
|
|
states={states}
|
|
handleIssues={handleIssues}
|
|
quickActions={quickActions}
|
|
displayProperties={displayProperties}
|
|
showEmptyGroup={showEmptyGroup}
|
|
enableIssueQuickAdd={enableIssueQuickAdd}
|
|
canEditProperties={canEditProperties}
|
|
quickAddCallback={quickAddCallback}
|
|
viewId={viewId}
|
|
disableIssueCreation={disableIssueCreation}
|
|
currentStore={currentStore}
|
|
addIssuesToView={addIssuesToView}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|