thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: added missing columns to the spreadsheet layout (#2640)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-11-03 19:15:09 +05:30 committed by GitHub
parent 992cf79031
commit 41e9d5d7e3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 177 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx Normal file
View File

@ -0,0 +1,34 @@
import React from "react";
// hooks
import useSubIssue from "hooks/use-sub-issue";
// types
import { IIssue } from "types";
type Props = {
issue: IIssue;
expandedIssues: string[];
};
export const SpreadsheetAttachmentColumn: React.FC<Props> = (props) => {
const { issue, expandedIssues } = props;
const isExpanded = expandedIssues.indexOf(issue.id) > -1;
const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
return (
<>
<div className="flex items-center justify-center text-xs h-full w-full">
{issue.attachment_count} {issue.attachment_count === 1 ? "attachment" : "attachments"}
</div>
{isExpanded &&
!isLoading &&
subIssues &&
subIssues.length > 0 &&
subIssues.map((subIssue: IIssue) => (
<SpreadsheetAttachmentColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
))}
</>
);
};

33
web/components/issues/issue-layouts/spreadsheet/columns/columns-list.tsx
View File

@ -142,6 +142,39 @@ export const SpreadsheetColumnsList: React.FC<Props> = observer((props) => {
property="updated_on"
/>
)}
{displayProperties.link && (
<SpreadsheetColumn
displayFilters={displayFilters}
disableUserActions={disableUserActions}
expandedIssues={expandedIssues}
handleDisplayFilterUpdate={handleDisplayFilterUpdate}
handleUpdateIssue={handleUpdateIssue}
issues={issues}
property="link"
/>
)}
{displayProperties.attachment_count && (
<SpreadsheetColumn
displayFilters={displayFilters}
disableUserActions={disableUserActions}
expandedIssues={expandedIssues}
handleDisplayFilterUpdate={handleDisplayFilterUpdate}
handleUpdateIssue={handleUpdateIssue}
issues={issues}
property="attachment_count"
/>
)}
{displayProperties.sub_issue_count && (
<SpreadsheetColumn
displayFilters={displayFilters}
disableUserActions={disableUserActions}
expandedIssues={expandedIssues}
handleDisplayFilterUpdate={handleDisplayFilterUpdate}
handleUpdateIssue={handleUpdateIssue}
issues={issues}
property="sub_issue_count"
/>
)}
</>
);
});

3
web/components/issues/issue-layouts/spreadsheet/columns/index.ts
View File

@ -1,11 +1,14 @@
export * from "./issue";
export * from "./assignee-column";
export * from "./attachment-column";
export * from "./columns-list";
export * from "./created-on-column";
export * from "./due-date-column";
export * from "./estimate-column";
export * from "./label-column";
export * from "./link-column";
export * from "./priority-column";
export * from "./start-date-column";
export * from "./state-column";
export * from "./sub-issue-column";
export * from "./updated-on-column";

34
web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx Normal file
View File

@ -0,0 +1,34 @@
import React from "react";
// hooks
import useSubIssue from "hooks/use-sub-issue";
// types
import { IIssue } from "types";
type Props = {
issue: IIssue;
expandedIssues: string[];
};
export const SpreadsheetLinkColumn: React.FC<Props> = (props) => {
const { issue, expandedIssues } = props;
const isExpanded = expandedIssues.indexOf(issue.id) > -1;
const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
return (
<>
<div className="flex items-center justify-center text-xs h-full w-full">
{issue.link_count} {issue.link_count === 1 ? "link" : "links"}
</div>
{isExpanded &&
!isLoading &&
subIssues &&
subIssues.length > 0 &&
subIssues.map((subIssue: IIssue) => (
<SpreadsheetLinkColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
))}
</>
);
};

34
web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx Normal file
View File

@ -0,0 +1,34 @@
import React from "react";
// hooks
import useSubIssue from "hooks/use-sub-issue";
// types
import { IIssue } from "types";
type Props = {
issue: IIssue;
expandedIssues: string[];
};
export const SpreadsheetSubIssueColumn: React.FC<Props> = (props) => {
const { issue, expandedIssues } = props;
const isExpanded = expandedIssues.indexOf(issue.id) > -1;
const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
return (
<>
<div className="flex items-center justify-center text-xs h-full w-full">
{issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
</div>
{isExpanded &&
!isLoading &&
subIssues &&
subIssues.length > 0 &&
subIssues.map((subIssue: IIssue) => (
<SpreadsheetSubIssueColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
))}
</>
);
};

27
web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
View File

@ -12,13 +12,16 @@ import useLocalStorage from "hooks/use-local-storage";
// components
import {
SpreadsheetAssigneeColumn,
SpreadsheetAttachmentColumn,
SpreadsheetCreatedOnColumn,
SpreadsheetDueDateColumn,
SpreadsheetEstimateColumn,
SpreadsheetLabelColumn,
SpreadsheetLinkColumn,
SpreadsheetPriorityColumn,
SpreadsheetStartDateColumn,
SpreadsheetStateColumn,
SpreadsheetSubIssueColumn,
SpreadsheetUpdatedOnColumn,
} from "components/issues";
// ui
@ -178,7 +181,6 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
/>
) : property === "priority" ? (
<SpreadsheetPriorityColumn
key={`${property}-${issue.id}`}
disabled={disableUserActions}
expandedIssues={expandedIssues}
issue={issue}
@ -186,7 +188,6 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
/>
) : property === "estimate" ? (
<SpreadsheetEstimateColumn
key={`${property}-${issue.id}`}
disabled={disableUserActions}
expandedIssues={expandedIssues}
issue={issue}
@ -194,7 +195,6 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
/>
) : property === "assignee" ? (
<SpreadsheetAssigneeColumn
key={`${property}-${issue.id}`}
disabled={disableUserActions}
expandedIssues={expandedIssues}
issue={issue}
@ -203,7 +203,6 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
/>
) : property === "labels" ? (
<SpreadsheetLabelColumn
key={`${property}-${issue.id}`}
disabled={disableUserActions}
expandedIssues={expandedIssues}
issue={issue}
@ -212,7 +211,6 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
/>
) : property === "start_date" ? (
<SpreadsheetStartDateColumn
key={`${property}-${issue.id}`}
disabled={disableUserActions}
expandedIssues={expandedIssues}
issue={issue}
@ -220,24 +218,21 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
/>
) : property === "due_date" ? (
<SpreadsheetDueDateColumn
key={`${property}-${issue.id}`}
disabled={disableUserActions}
expandedIssues={expandedIssues}
issue={issue}
onChange={(data: Partial<IIssue>) => handleUpdateIssue(issue, data)}
/>
) : property === "created_on" ? (
<SpreadsheetCreatedOnColumn
key={`${property}-${issue.id}`}
expandedIssues={expandedIssues}
issue={issue}
/>
<SpreadsheetCreatedOnColumn expandedIssues={expandedIssues} issue={issue} />
) : property === "updated_on" ? (
<SpreadsheetUpdatedOnColumn
key={`${property}-${issue.id}`}
expandedIssues={expandedIssues}
issue={issue}
/>
<SpreadsheetUpdatedOnColumn expandedIssues={expandedIssues} issue={issue} />
) : property === "link" ? (
<SpreadsheetLinkColumn expandedIssues={expandedIssues} issue={issue} />
) : property === "attachment_count" ? (
<SpreadsheetAttachmentColumn expandedIssues={expandedIssues} issue={issue} />
) : property === "sub_issue_count" ? (
<SpreadsheetSubIssueColumn expandedIssues={expandedIssues} issue={issue} />
) : null}
</div>
))}

21
web/constants/spreadsheet.ts
View File

@ -72,4 +72,25 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
descendingOrderKey: "updated_at",
descendingOrderTitle: "Old",
},
link: {
title: "Link",
ascendingOrderKey: "-link_count",
ascendingOrderTitle: "Most",
descendingOrderKey: "link_count",
descendingOrderTitle: "Least",
},
attachment_count: {
title: "Attachment",
ascendingOrderKey: "-attachment_count",
ascendingOrderTitle: "Most",
descendingOrderKey: "attachment_count",
descendingOrderTitle: "Least",
},
sub_issue_count: {
title: "Sub-issue",
ascendingOrderKey: "-sub_issues_count",
ascendingOrderTitle: "Most",
descendingOrderKey: "sub_issues_count",
descendingOrderTitle: "Least",
},
};

8
web/types/view-props.d.ts vendored
View File

@ -30,7 +30,13 @@ export type TIssueOrderByOptions =
| "estimate_point"
| "-estimate_point"
| "start_date"
| "-start_date";
| "-start_date"
| "link_count"
| "-link_count"
| "attachment_count"
| "-attachment_count"
| "sub_issues_count"
| "-sub_issues_count";
export type TIssueTypeFilters = "active" | "backlog" | null;