Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: issue properties for list and kanban layouts and implemented estimates in project store #2363

Merged
49 changes: 28 additions & 21 deletions web/components/core/views/all-views.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,32 +19,39 @@ export const AllViews: React.FC = observer(() => {

const { issue: issueStore, project: projectStore, issueFilter: issueFilterStore } = useMobxStore();

useSWR(workspaceSlug && projectId ? `PROJECT_ISSUES` : null, async () => {
if (workspaceSlug && projectId) {
await issueFilterStore.fetchUserProjectFilters(workspaceSlug, projectId);

await projectStore.fetchProjectStates(workspaceSlug, projectId);
await projectStore.fetchProjectLabels(workspaceSlug, projectId);
await projectStore.fetchProjectMembers(workspaceSlug, projectId);

await issueStore.fetchIssues(workspaceSlug, projectId);
}
});
useSWR(
workspaceSlug && projectId ? `PROJECT_ISSUES` : null,
async () => {
if (workspaceSlug && projectId) {
await issueFilterStore.fetchUserProjectFilters(workspaceSlug, projectId);

await projectStore.fetchProjectStates(workspaceSlug, projectId);
await projectStore.fetchProjectLabels(workspaceSlug, projectId);
await projectStore.fetchProjectMembers(workspaceSlug, projectId);
await projectStore.fetchProjectEstimates(workspaceSlug, projectId);

await issueStore.fetchIssues(workspaceSlug, projectId);
}
},
{ revalidateOnFocus: false }
);

const activeLayout = issueFilterStore.userDisplayFilters.layout;

return (
<div className="relative w-full h-full flex flex-col overflow-auto">
<AppliedFiltersRoot />
{activeLayout === "kanban" ? (
<KanBanLayout />
) : activeLayout === "calendar" ? (
<CalendarLayout />
) : activeLayout === "gantt_chart" ? (
<GanttLayout />
) : activeLayout === "spreadsheet" ? (
<SpreadsheetLayout />
) : null}
<AppliedFiltersList />
<div className="w-full h-full">
{activeLayout === "kanban" ? (
<KanBanLayout />
) : activeLayout === "calendar" ? (
<CalendarLayout />
) : activeLayout === "gantt_chart" ? (
<GanttLayout />
) : activeLayout === "spreadsheet" ? (
<SpreadsheetLayout />
) : null}
</div>
</div>
);
});
27 changes: 22 additions & 5 deletions web/components/issues/issue-layouts/kanban/block.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,18 @@ interface IssueBlockProps {
columnId: string;
issues: any;
isDragDisabled: boolean;
handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
display_properties: any;
}

export const IssueBlock = ({ sub_group_id, columnId, issues, isDragDisabled }: IssueBlockProps) => (
export const IssueBlock = ({
sub_group_id,
columnId,
issues,
isDragDisabled,
handleIssues,
display_properties,
}: IssueBlockProps) => (
<>
{issues && issues.length > 0 ? (
<>
Expand All @@ -30,14 +39,22 @@ export const IssueBlock = ({ sub_group_id, columnId, issues, isDragDisabled }: I
ref={provided.innerRef}
>
<div
className={`min-h-[106px] text-sm rounded p-2 px-3 shadow-custom-shadow-2xs space-y-[8px] border transition-all bg-custom-background-100 hover:cursor-grab ${
className={`text-sm rounded p-2 px-3 shadow-custom-shadow-2xs space-y-[8px] border transition-all bg-custom-background-100 hover:cursor-grab ${
snapshot.isDragging ? `border-custom-primary-100` : `border-transparent`
}`}
>
<div className="text-xs line-clamp-1 text-custom-text-300">ONE-{issue.sequence_id}</div>
{display_properties && display_properties?.key && (
<div className="text-xs line-clamp-1 text-custom-text-300">ONE-{issue.sequence_id}</div>
)}
<div className="line-clamp-2 h-[40px] text-sm font-medium text-custom-text-100">{issue.name}</div>
<div className="min-h-[22px]">
<KanBanProperties />
<div>
<KanBanProperties
sub_group_id={sub_group_id}
columnId={columnId}
issue={issue}
handleIssues={handleIssues}
display_properties={display_properties}
/>
</div>
</div>
</div>
Expand Down
182 changes: 105 additions & 77 deletions web/components/issues/issue-layouts/kanban/default.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,23 @@ export interface IGroupByKanBan {
sub_group_id: string;
list: any;
listKey: string;
handleIssues?: () => void;
isDragDisabled: boolean;
handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
display_properties: any;
}

const GroupByKanBan: React.FC<IGroupByKanBan> = observer(
({ issues, sub_group_by, group_by, sub_group_id = "null", list, listKey, isDragDisabled }) => {
({
issues,
sub_group_by,
group_by,
sub_group_id = "null",
list,
listKey,
isDragDisabled,
handleIssues,
display_properties,
}) => {
const { issueKanBanView: issueKanBanViewStore }: RootStore = useMobxStore();

const verticalAlignPosition = (_list: any) =>
Expand All @@ -42,7 +53,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer(
column_id={getValueFromObject(_list, listKey) as string}
sub_group_by={sub_group_by}
group_by={group_by}
issues_count={issues?.[getValueFromObject(_list, listKey) as string].length || 0}
issues_count={issues?.[getValueFromObject(_list, listKey) as string]?.length || 0}
/>
</div>
)}
Expand All @@ -64,6 +75,8 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer(
columnId={getValueFromObject(_list, listKey) as string}
issues={issues[getValueFromObject(_list, listKey) as string]}
isDragDisabled={isDragDisabled}
handleIssues={handleIssues}
display_properties={display_properties}
/>
) : (
isDragDisabled && (
Expand All @@ -90,86 +103,101 @@ export interface IKanBan {
sub_group_by: string | null;
group_by: string | null;
sub_group_id?: string;
handleIssues?: () => void;
handleDragDrop?: (result: any) => void | undefined;
handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
display_properties: any;
}

export const KanBan: React.FC<IKanBan> = observer(({ issues, sub_group_by, group_by, sub_group_id = "null" }) => {
const { project: projectStore, issueKanBanView: issueKanBanViewStore }: RootStore = useMobxStore();
export const KanBan: React.FC<IKanBan> = observer(
({ issues, sub_group_by, group_by, sub_group_id = "null", handleIssues, display_properties }) => {
const { project: projectStore, issueKanBanView: issueKanBanViewStore }: RootStore = useMobxStore();

return (
<div className="relative w-full h-full">
{group_by && group_by === "state" && (
<GroupByKanBan
issues={issues}
group_by={group_by}
sub_group_by={sub_group_by}
sub_group_id={sub_group_id}
list={projectStore?.projectStates}
listKey={`id`}
isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
/>
)}
return (
<div className="relative w-full h-full">
{group_by && group_by === "state" && (
<GroupByKanBan
issues={issues}
group_by={group_by}
sub_group_by={sub_group_by}
sub_group_id={sub_group_id}
list={projectStore?.projectStates}
listKey={`id`}
isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
handleIssues={handleIssues}
display_properties={display_properties}
/>
)}

{group_by && group_by === "state_detail.group" && (
<GroupByKanBan
issues={issues}
group_by={group_by}
sub_group_by={sub_group_by}
sub_group_id={sub_group_id}
list={ISSUE_STATE_GROUPS}
listKey={`key`}
isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
/>
)}
{group_by && group_by === "state_detail.group" && (
<GroupByKanBan
issues={issues}
group_by={group_by}
sub_group_by={sub_group_by}
sub_group_id={sub_group_id}
list={ISSUE_STATE_GROUPS}
listKey={`key`}
isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
handleIssues={handleIssues}
display_properties={display_properties}
/>
)}

{group_by && group_by === "priority" && (
<GroupByKanBan
issues={issues}
group_by={group_by}
sub_group_by={sub_group_by}
sub_group_id={sub_group_id}
list={ISSUE_PRIORITIES}
listKey={`key`}
isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
/>
)}
{group_by && group_by === "priority" && (
<GroupByKanBan
issues={issues}
group_by={group_by}
sub_group_by={sub_group_by}
sub_group_id={sub_group_id}
list={ISSUE_PRIORITIES}
listKey={`key`}
isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
handleIssues={handleIssues}
display_properties={display_properties}
/>
)}

{group_by && group_by === "labels" && (
<GroupByKanBan
issues={issues}
group_by={group_by}
sub_group_by={sub_group_by}
sub_group_id={sub_group_id}
list={projectStore?.projectLabels}
listKey={`id`}
isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
/>
)}
{group_by && group_by === "labels" && (
<GroupByKanBan
issues={issues}
group_by={group_by}
sub_group_by={sub_group_by}
sub_group_id={sub_group_id}
list={projectStore?.projectLabels}
listKey={`id`}
isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
handleIssues={handleIssues}
display_properties={display_properties}
/>
)}

{group_by && group_by === "assignees" && (
<GroupByKanBan
issues={issues}
group_by={group_by}
sub_group_by={sub_group_by}
sub_group_id={sub_group_id}
list={projectStore?.projectMembers}
listKey={`member.id`}
isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
/>
)}
{group_by && group_by === "assignees" && (
<GroupByKanBan
issues={issues}
group_by={group_by}
sub_group_by={sub_group_by}
sub_group_id={sub_group_id}
list={projectStore?.projectMembers}
listKey={`member.id`}
isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
handleIssues={handleIssues}
display_properties={display_properties}
/>
)}

{group_by && group_by === "created_by" && (
<GroupByKanBan
issues={issues}
group_by={group_by}
sub_group_by={sub_group_by}
sub_group_id={sub_group_id}
list={projectStore?.projectMembers}
listKey={`member.id`}
isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
/>
)}
</div>
);
});
{group_by && group_by === "created_by" && (
<GroupByKanBan
issues={issues}
group_by={group_by}
sub_group_by={sub_group_by}
sub_group_id={sub_group_id}
list={projectStore?.projectMembers}
listKey={`member.id`}
isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
handleIssues={handleIssues}
display_properties={display_properties}
/>
)}
</div>
);
}
);
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { HeaderSubGroupByCard } from "./sub-group-by-card";
// constants
import { issuePriorityByKey } from "constants/issue";


export interface IPriorityHeader {
column_id: string;
sub_group_by: string | null;
Expand Down
Loading
Loading