plane/web/components/issues/issue-layouts/utils.tsx
guru_sainath 4611ec0b83 chore: refactored and resolved build issues on the issues and issue detail page (#3340)
* fix: handled undefined issue_id in list layout

* dev: issue detail store and optimization

* dev: issue filter and list operations

* fix: typo on labels update

* dev: Handled all issues in the list layout in project issues

* dev: handled kanban and auick add issue in swimlanes

* chore: fixed peekoverview in kanban

* chore: fixed peekoverview in calendar

* chore: fixed peekoverview in gantt

* chore: updated quick add in the gantt chart

* chore: handled issue detail properties and resolved build issues

---------

Co-authored-by: pablohashescobar <nikhilschacko@gmail.com>
2024-01-22 13:19:43 +05:30

159 lines
4.5 KiB
TypeScript

import { Avatar, PriorityIcon, StateGroupIcon } from "@plane/ui";
import { ISSUE_PRIORITIES, ISSUE_STATE_GROUPS } from "constants/issue";
import { renderEmoji } from "helpers/emoji.helper";
import { ILabelRootStore } from "store/label";
import { IMemberRootStore } from "store/member";
import { IProjectStore } from "store/project/project.store";
import { IStateStore } from "store/state.store";
import { GroupByColumnTypes, IGroupByColumn } from "@plane/types";
export const getGroupByColumns = (
groupBy: GroupByColumnTypes | null,
project: IProjectStore,
projectLabel: ILabelRootStore,
projectState: IStateStore,
member: IMemberRootStore,
includeNone?: boolean
): IGroupByColumn[] | undefined => {
switch (groupBy) {
case "project":
return getProjectColumns(project);
case "state":
return getStateColumns(projectState);
case "state_detail.group":
return getStateGroupColumns();
case "priority":
return getPriorityColumns();
case "labels":
return getLabelsColumns(projectLabel) as any;
case "assignees":
return getAssigneeColumns(member) as any;
case "created_by":
return getCreatedByColumns(member) as any;
default:
if (includeNone) return [{ id: `null`, name: `All Issues`, payload: {}, icon: undefined }];
}
};
const getProjectColumns = (project: IProjectStore): IGroupByColumn[] | undefined => {
const { workspaceProjectIds: projectIds, projectMap } = project;
if (!projectIds) return;
return projectIds
.filter((projectId) => !!projectMap[projectId])
.map((projectId) => {
const project = projectMap[projectId];
return {
id: project.id,
name: project.name,
icon: <div className="w-6 h-6">{renderEmoji(project.emoji || "")}</div>,
payload: { project_id: project.id },
};
}) as any;
};
const getStateColumns = (projectState: IStateStore): IGroupByColumn[] | undefined => {
const { projectStates } = projectState;
if (!projectStates) return;
return projectStates.map((state) => ({
id: state.id,
name: state.name,
icon: (
<div className="w-3.5 h-3.5 rounded-full">
<StateGroupIcon stateGroup={state.group} color={state.color} width="14" height="14" />
</div>
),
payload: { state_id: state.id },
})) as any;
};
const getStateGroupColumns = () => {
const stateGroups = ISSUE_STATE_GROUPS;
return stateGroups.map((stateGroup) => ({
id: stateGroup.key,
name: stateGroup.title,
icon: (
<div className="w-3.5 h-3.5 rounded-full">
<StateGroupIcon stateGroup={stateGroup.key} width="14" height="14" />
</div>
),
payload: {},
}));
};
const getPriorityColumns = () => {
const priorities = ISSUE_PRIORITIES;
return priorities.map((priority) => ({
id: priority.key,
name: priority.title,
icon: <PriorityIcon priority={priority?.key} />,
payload: { priority: priority.key },
}));
};
const getLabelsColumns = (projectLabel: ILabelRootStore) => {
const {
project: { projectLabels },
} = projectLabel;
if (!projectLabels) return;
const labels = [...projectLabels, { id: "None", name: "None", color: "#666" }];
return labels.map((label) => ({
id: label.id,
name: label.name,
icon: (
<div className="w-[12px] h-[12px] rounded-full" style={{ backgroundColor: label.color ? label.color : "#666" }} />
),
payload: label?.id === "None" ? {} : { label_ids: [label.id] },
}));
};
const getAssigneeColumns = (member: IMemberRootStore) => {
const {
project: { projectMemberIds },
getUserDetails,
} = member;
if (!projectMemberIds) return;
const assigneeColumns: any = projectMemberIds.map((memberId) => {
const member = getUserDetails(memberId);
return {
id: memberId,
name: member?.display_name || "",
icon: <Avatar name={member?.display_name} src={member?.avatar} size="md" />,
payload: { assignee_ids: [memberId] },
};
});
assigneeColumns.push({ id: "None", name: "None", icon: <Avatar size="md" />, payload: {} });
return assigneeColumns;
};
const getCreatedByColumns = (member: IMemberRootStore) => {
const {
project: { projectMemberIds },
getUserDetails,
} = member;
if (!projectMemberIds) return;
return projectMemberIds.map((memberId) => {
const member = getUserDetails(memberId);
return {
id: memberId,
name: member?.display_name || "",
icon: <Avatar name={member?.display_name} src={member?.avatar} size="md" />,
payload: {},
};
});
};