github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'fix/issues-layout-mobx' of github.com:makeplane/plane into fix/issues-layout-mobx

Browse Source
This commit is contained in:
sriram veeraghanta 2023-10-02 16:55:09 +05:30
commit a39aa80e76
51 changed files with 723 additions and 451 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/components/core/views/all-views.tsx
View File

@ -6,7 +6,7 @@ import useSWR from "swr";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { CalendarLayout, GanttLayout, KanBanLayout } from "components/issues";
import { AppliedFiltersList, CalendarLayout, GanttLayout, KanBanLayout, SpreadsheetLayout } from "components/issues";
export const AllViews: React.FC = observer(() => {
const router = useRouter();
@ -34,13 +34,16 @@ export const AllViews: React.FC = observer(() => {
const activeLayout = issueFilterStore.userDisplayFilters.layout;
return (
<div className="relative w-full h-full overflow-auto">
<div className="relative w-full h-full flex flex-col overflow-auto">
<AppliedFiltersList />
{activeLayout === "kanban" ? (
<KanBanLayout />
) : activeLayout === "calendar" ? (
<CalendarLayout />
) : activeLayout === "gantt_chart" ? (
<GanttLayout />
) : activeLayout === "spreadsheet" ? (
<SpreadsheetLayout />
) : null}
</div>
);

92
web/components/core/views/spreadsheet-view/single-issue.tsx
View File

@ -1,38 +1,27 @@
import React, { useCallback, useState } from "react";
import { useRouter } from "next/router";
import { mutate } from "swr";
import { Popover2 } from "@blueprintjs/popover2";
// icons
import { Icon } from "components/ui";
import { EllipsisHorizontalIcon, LinkIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
// services
import issuesService from "services/issue.service";
import trackEventServices from "services/track_event.service";
// hooks
import useToast from "hooks/use-toast";
// components
import { ViewDueDateSelect, ViewEstimateSelect, ViewStartDateSelect } from "components/issues";
import { LabelSelect, MembersSelect, PrioritySelect } from "components/project";
import { StateSelect } from "components/states";
import { Popover2 } from "@blueprintjs/popover2";
// icons
import { Icon } from "components/ui";
import { EllipsisHorizontalIcon, LinkIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
// hooks
import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
import useToast from "hooks/use-toast";
// services
import issuesService from "services/issue.service";
import trackEventServices from "services/track_event.service";
// constant
import {
CYCLE_DETAILS,
CYCLE_ISSUES_WITH_PARAMS,
MODULE_DETAILS,
MODULE_ISSUES_WITH_PARAMS,
PROJECT_ISSUES_LIST_WITH_PARAMS,
SUB_ISSUES,
VIEW_ISSUES,
} from "constants/fetch-keys";
// types
import { ICurrentUserResponse, IIssue, IState, ISubIssueResponse, Properties, TIssuePriorities, UserAuth } from "types";
// helper
// helpers
import { copyTextToClipboard } from "helpers/string.helper";
import { renderLongDetailDateFormat } from "helpers/date-time.helper";
// types
import { ICurrentUserResponse, IIssue, IState, Properties, TIssuePriorities, UserAuth } from "types";
// constant
import { CYCLE_DETAILS, MODULE_DETAILS, SUB_ISSUES } from "constants/fetch-keys";
type Props = {
issue: IIssue;
@ -67,9 +56,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
const router = useRouter();
const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
const { params } = useSpreadsheetIssuesView();
const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
const { setToastAlert } = useToast();
@ -77,59 +64,12 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
(formData: Partial<IIssue>, issue: IIssue) => {
if (!workspaceSlug || !projectId) return;
const fetchKey = cycleId
? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params)
: moduleId
? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params)
: viewId
? VIEW_ISSUES(viewId.toString(), params)
: PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params);
if (issue.parent)
mutate<ISubIssueResponse>(
SUB_ISSUES(issue.parent.toString()),
(prevData) => {
if (!prevData) return prevData;
return {
...prevData,
sub_issues: (prevData.sub_issues ?? []).map((i) => {
if (i.id === issue.id) {
return {
...i,
...formData,
};
}
return i;
}),
};
},
false
);
else
mutate<IIssue[]>(
fetchKey,
(prevData) =>
(prevData ?? []).map((p) => {
if (p.id === issue.id) {
return {
...p,
...formData,
};
}
return p;
}),
false
);
issuesService
.patchIssue(workspaceSlug as string, projectId as string, issue.id as string, formData, user)
.then(() => {
if (issue.parent) {
mutate(SUB_ISSUES(issue.parent as string));
} else {
mutate(fetchKey);
if (cycleId) mutate(CYCLE_DETAILS(cycleId as string));
if (moduleId) mutate(MODULE_DETAILS(moduleId as string));
}
@ -138,7 +78,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
console.log(error);
});
},
[workspaceSlug, projectId, cycleId, moduleId, viewId, params, user]
[workspaceSlug, projectId, cycleId, moduleId, user]
);
const openPeekOverview = () => {

74
web/components/core/views/spreadsheet-view/spreadsheet-columns.tsx
View File

@ -1,48 +1,46 @@
import React from "react";
// hooks
import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
import useLocalStorage from "hooks/use-local-storage";
// component
import { CustomMenu, Icon } from "components/ui";
// icon
import { CheckIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
// types
import { TIssueOrderByOptions } from "types";
import { IIssueDisplayFilterOptions, TIssueOrderByOptions } from "types";
type Props = {
columnData: any;
displayFilters: IIssueDisplayFilterOptions;
gridTemplateColumns: string;
handleDisplayFiltersUpdate: (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => void;
};
export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateColumns }) => {
export const SpreadsheetColumns: React.FC<Props> = (props) => {
const { columnData, displayFilters, gridTemplateColumns, handleDisplayFiltersUpdate } = props;
const { storedValue: selectedMenuItem, setValue: setSelectedMenuItem } = useLocalStorage(
"spreadsheetViewSorting",
""
);
const { storedValue: activeSortingProperty, setValue: setActiveSortingProperty } =
useLocalStorage("spreadsheetViewActiveSortingProperty", "");
const { displayFilters, setDisplayFilters } = useSpreadsheetIssuesView();
const { storedValue: activeSortingProperty, setValue: setActiveSortingProperty } = useLocalStorage(
"spreadsheetViewActiveSortingProperty",
""
);
const handleOrderBy = (order: TIssueOrderByOptions, itemKey: string) => {
setDisplayFilters({ order_by: order });
handleDisplayFiltersUpdate({ order_by: order });
setSelectedMenuItem(`${order}_${itemKey}`);
setActiveSortingProperty(order === "-created_at" ? "" : itemKey);
};
return (
<div
className={`grid auto-rows-[minmax(36px,1fr)] w-full min-w-max`}
style={{ gridTemplateColumns }}
>
<div className={`grid auto-rows-[minmax(36px,1fr)] w-full min-w-max`} style={{ gridTemplateColumns }}>
{columnData.map((col: any) => {
if (col.isActive) {
return (
<div
className={`bg-custom-background-90 w-full ${
col.propertyName === "title"
? "sticky left-0 z-20 bg-custom-background-90 pl-24"
: ""
col.propertyName === "title" ? "sticky left-0 z-20 bg-custom-background-90 pl-24" : ""
}`}
>
{col.propertyName === "title" ? (
@ -108,10 +106,7 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
{col.propertyName === "assignee" || col.propertyName === "labels" ? (
<>
<span className="relative flex items-center h-6 w-6">
<Icon
iconName="east"
className="absolute left-0 rotate-90 text-xs leading-3"
/>
<Icon iconName="east" className="absolute left-0 rotate-90 text-xs leading-3" />
<Icon iconName="sort" className="absolute right-0 text-sm" />
</span>
<span>A</span>
@ -123,10 +118,7 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
col.propertyName === "updated_on" ? (
<>
<span className="relative flex items-center h-6 w-6">
<Icon
iconName="east"
className="absolute left-0 rotate-90 text-xs leading-3"
/>
<Icon iconName="east" className="absolute left-0 rotate-90 text-xs leading-3" />
<Icon iconName="sort" className="absolute right-0 text-sm" />
</span>
<span>New</span>
@ -136,10 +128,7 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
) : (
<>
<span className="relative flex items-center h-6 w-6">
<Icon
iconName="east"
className="absolute left-0 rotate-90 text-xs leading-3"
/>
<Icon iconName="east" className="absolute left-0 rotate-90 text-xs leading-3" />
<Icon iconName="sort" className="absolute right-0 text-sm" />
</span>
<span>First</span>
@ -151,18 +140,14 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
<CheckIcon
className={`h-3.5 w-3.5 opacity-0 group-hover:opacity-100 ${
selectedMenuItem === `${col.ascendingOrder}_${col.propertyName}`
? "opacity-100"
: ""
selectedMenuItem === `${col.ascendingOrder}_${col.propertyName}` ? "opacity-100" : ""
}`}
/>
</div>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
className={`mt-0.5 ${
selectedMenuItem === `${col.descendingOrder}_${col.propertyName}`
? "bg-custom-background-80"
: ""
selectedMenuItem === `${col.descendingOrder}_${col.propertyName}` ? "bg-custom-background-80" : ""
}`}
key={col.property}
onClick={() => {
@ -180,10 +165,7 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
{col.propertyName === "assignee" || col.propertyName === "labels" ? (
<>
<span className="relative flex items-center h-6 w-6">
<Icon
iconName="east"
className="absolute left-0 -rotate-90 text-xs leading-3"
/>
<Icon iconName="east" className="absolute left-0 -rotate-90 text-xs leading-3" />
<Icon
iconName="sort"
className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
@ -196,10 +178,7 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
) : col.propertyName === "due_date" ? (
<>
<span className="relative flex items-center h-6 w-6">
<Icon
iconName="east"
className="absolute left-0 -rotate-90 text-xs leading-3"
/>
<Icon iconName="east" className="absolute left-0 -rotate-90 text-xs leading-3" />
<Icon
iconName="sort"
className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
@ -212,10 +191,7 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
) : (
<>
<span className="relative flex items-center h-6 w-6">
<Icon
iconName="east"
className="absolute left-0 -rotate-90 text-xs leading-3"
/>
<Icon iconName="east" className="absolute left-0 -rotate-90 text-xs leading-3" />
<Icon
iconName="sort"
className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
@ -230,9 +206,7 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
<CheckIcon
className={`h-3.5 w-3.5 opacity-0 group-hover:opacity-100 ${
selectedMenuItem === `${col.descendingOrder}_${col.propertyName}`
? "opacity-100"
: ""
selectedMenuItem === `${col.descendingOrder}_${col.propertyName}` ? "opacity-100" : ""
}`}
/>
</div>
@ -243,9 +217,7 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
selectedMenuItem.includes(col.propertyName) && (
<CustomMenu.MenuItem
className={`mt-0.5${
selectedMenuItem === `-created_at_${col.propertyName}`
? "bg-custom-background-80"
: ""
selectedMenuItem === `-created_at_${col.propertyName}` ? "bg-custom-background-80" : ""
}`}
key={col.property}
onClick={() => {

2
web/components/core/views/spreadsheet-view/spreadsheet-issues.tsx
View File

@ -1,4 +1,4 @@
import React, { useState } from "react";
import React from "react";
// components
import { SingleSpreadsheetIssue } from "components/core";

173
web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
View File

@ -9,7 +9,6 @@ import { CustomMenu, Spinner } from "components/ui";
import { IssuePeekOverview } from "components/issues";
// hooks
import useIssuesProperties from "hooks/use-issue-properties";
import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
// types
import { ICurrentUserResponse, IIssue, Properties, UserAuth } from "types";
// constants
@ -39,8 +38,6 @@ export const SpreadsheetView: React.FC<Props> = ({
const type = cycleId ? "cycle" : moduleId ? "module" : "issue";
const { spreadsheetIssues, mutateIssues } = useSpreadsheetIssuesView();
const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
const columnData = SPREADSHEET_COLUMN.map((column) => ({
@ -59,89 +56,89 @@ export const SpreadsheetView: React.FC<Props> = ({
.map((column) => column.colSize)
.join(" ");
return (
<>
<IssuePeekOverview
handleMutation={() => mutateIssues()}
projectId={projectId?.toString() ?? ""}
workspaceSlug={workspaceSlug?.toString() ?? ""}
readOnly={disableUserActions}
/>
<div className="h-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-100">
<div className="sticky z-[2] top-0 border-b border-custom-border-200 bg-custom-background-90 w-full min-w-max">
<SpreadsheetColumns columnData={columnData} gridTemplateColumns={gridTemplateColumns} />
</div>
{spreadsheetIssues ? (
<div className="flex flex-col h-full w-full bg-custom-background-100 rounded-sm ">
{spreadsheetIssues.map((issue: IIssue, index) => (
<SpreadsheetIssues
key={`${issue.id}_${index}`}
index={index}
issue={issue}
expandedIssues={expandedIssues}
setExpandedIssues={setExpandedIssues}
gridTemplateColumns={gridTemplateColumns}
properties={properties}
handleIssueAction={handleIssueAction}
disableUserActions={disableUserActions}
user={user}
userAuth={userAuth}
/>
))}
<div
className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-200 w-full min-w-max"
style={{ gridTemplateColumns }}
>
{type === "issue" ? (
<button
className="flex gap-1.5 items-center pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
onClick={() => {
const e = new KeyboardEvent("keydown", { key: "c" });
document.dispatchEvent(e);
}}
>
<PlusIcon className="h-4 w-4" />
Add Issue
</button>
) : (
!disableUserActions && (
<CustomMenu
className="sticky left-0 z-[1]"
customButton={
<button
className="flex gap-1.5 items-center pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
type="button"
>
<PlusIcon className="h-4 w-4" />
Add Issue
</button>
}
position="left"
optionsClassName="left-5 !w-36"
noBorder
>
<CustomMenu.MenuItem
onClick={() => {
const e = new KeyboardEvent("keydown", { key: "c" });
document.dispatchEvent(e);
}}
>
Create new
</CustomMenu.MenuItem>
{openIssuesListModal && (
<CustomMenu.MenuItem onClick={openIssuesListModal}>
Add an existing issue
</CustomMenu.MenuItem>
)}
</CustomMenu>
)
)}
</div>
</div>
) : (
<Spinner />
)}
</div>
</>
);
return null;
// return (
// <>
// <IssuePeekOverview
// handleMutation={() => mutateIssues()}
// projectId={projectId?.toString() ?? ""}
// workspaceSlug={workspaceSlug?.toString() ?? ""}
// readOnly={disableUserActions}
// />
// <div className="h-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-100">
// <div className="sticky z-[2] top-0 border-b border-custom-border-200 bg-custom-background-90 w-full min-w-max">
// <SpreadsheetColumns columnData={columnData} gridTemplateColumns={gridTemplateColumns} />
// </div>
// {spreadsheetIssues ? (
// <div className="flex flex-col h-full w-full bg-custom-background-100 rounded-sm ">
// {spreadsheetIssues.map((issue: IIssue, index) => (
// <SpreadsheetIssues
// key={`${issue.id}_${index}`}
// index={index}
// issue={issue}
// expandedIssues={expandedIssues}
// setExpandedIssues={setExpandedIssues}
// gridTemplateColumns={gridTemplateColumns}
// properties={properties}
// handleIssueAction={handleIssueAction}
// disableUserActions={disableUserActions}
// user={user}
// userAuth={userAuth}
// />
// ))}
// <div
// className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-200 w-full min-w-max"
// style={{ gridTemplateColumns }}
// >
// {type === "issue" ? (
// <button
// className="flex gap-1.5 items-center pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
// onClick={() => {
// const e = new KeyboardEvent("keydown", { key: "c" });
// document.dispatchEvent(e);
// }}
// >
// <PlusIcon className="h-4 w-4" />
// Add Issue
// </button>
// ) : (
// !disableUserActions && (
// <CustomMenu
// className="sticky left-0 z-[1]"
// customButton={
// <button
// className="flex gap-1.5 items-center pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
// type="button"
// >
// <PlusIcon className="h-4 w-4" />
// Add Issue
// </button>
// }
// position="left"
// optionsClassName="left-5 !w-36"
// noBorder
// >
// <CustomMenu.MenuItem
// onClick={() => {
// const e = new KeyboardEvent("keydown", { key: "c" });
// document.dispatchEvent(e);
// }}
// >
// Create new
// </CustomMenu.MenuItem>
// {openIssuesListModal && (
// <CustomMenu.MenuItem onClick={openIssuesListModal}>Add an existing issue</CustomMenu.MenuItem>
// )}
// </CustomMenu>
// )
// )}
// </div>
// </div>
// ) : (
// <Spinner />
// )}
// </div>
// </>
// );
};

8
web/components/issue-layouts/root.tsx
View File

@ -1,9 +1,9 @@
import React from "react";
// components
import { LayoutSelection } from "../issues/issue-layouts/header/layout-selection";
import { IssueDropdown } from "../issues/issue-layouts/header/helpers/dropdown";
import { FilterSelection } from "../issues/issue-layouts/header/filters/filters-selection";
import { DisplayFiltersSelection } from "../issues/issue-layouts/header/display-filters";
import { LayoutSelection } from "../issues/issue-layouts/filters/header/layout-selection";
import { IssueDropdown } from "../issues/issue-layouts/filters/header/helpers/dropdown";
import { FilterSelection } from "../issues/issue-layouts/filters/header/filters/filters-selection";
import { DisplayFiltersSelection } from "../issues/issue-layouts/filters/header/display-filters";
import { FilterPreview } from "./filters-preview";

16
web/components/issues/delete-issue-modal.tsx
View File

@ -12,7 +12,6 @@ import issueServices from "services/issue.service";
import useIssuesView from "hooks/use-issues-view";
import useCalendarIssuesView from "hooks/use-calendar-issues-view";
import useToast from "hooks/use-toast";
import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
// icons
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
// ui
@ -54,7 +53,6 @@ export const DeleteIssueModal: React.FC<Props> = ({
const { displayFilters, params } = useIssuesView();
const { params: calendarParams } = useCalendarIssuesView();
const { params: spreadsheetParams } = useSpreadsheetIssuesView();
const { setToastAlert } = useToast();
@ -86,13 +84,6 @@ export const DeleteIssueModal: React.FC<Props> = ({
mutate<IIssue[]>(calendarFetchKey, (prevData) => (prevData ?? []).filter((p) => p.id !== data.id), false);
} else if (displayFilters.layout === "spreadsheet") {
const spreadsheetFetchKey = cycleId
? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), spreadsheetParams)
: moduleId
? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), spreadsheetParams)
: viewId
? VIEW_ISSUES(viewId.toString(), spreadsheetParams)
: PROJECT_ISSUES_LIST_WITH_PARAMS(data.project, spreadsheetParams);
if (data.parent) {
mutate<ISubIssueResponse>(
SUB_ISSUES(data.parent.toString()),
@ -107,13 +98,6 @@ export const DeleteIssueModal: React.FC<Props> = ({
},
false
);
mutate<IIssue[]>(spreadsheetFetchKey);
} else {
mutate<IIssue[]>(
spreadsheetFetchKey,
(prevData) => (prevData ?? []).filter((p) => p.id !== data.id),
false
);
}
} else {
if (cycleId) mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));

13
web/components/issues/draft-issue-modal.tsx
View File

@ -13,7 +13,6 @@ import useUser from "hooks/use-user";
import useIssuesView from "hooks/use-issues-view";
import useCalendarIssuesView from "hooks/use-calendar-issues-view";
import useToast from "hooks/use-toast";
import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
import useLocalStorage from "hooks/use-local-storage";
import useProjects from "hooks/use-projects";
import useMyIssues from "hooks/my-issues/use-my-issues";
@ -81,7 +80,6 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
const { displayFilters, params } = useIssuesView();
const { params: calendarParams } = useCalendarIssuesView();
const { ...viewGanttParams } = params;
const { params: spreadsheetParams } = useSpreadsheetIssuesView();
const { user } = useUser();
const { projects } = useProjects();
@ -156,14 +154,6 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
? VIEW_ISSUES(viewId.toString(), calendarParams)
: PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject?.toString() ?? "", calendarParams);
const spreadsheetFetchKey = cycleId
? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), spreadsheetParams)
: moduleId
? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), spreadsheetParams)
: viewId
? VIEW_ISSUES(viewId.toString(), spreadsheetParams)
: PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject?.toString() ?? "", spreadsheetParams);
const ganttFetchKey = cycleId
? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString())
: moduleId
@ -187,7 +177,6 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
start_target_date: true,
order_by: "sort_order",
});
if (displayFilters.layout === "spreadsheet") mutate(spreadsheetFetchKey);
if (groupedIssues) mutateMyIssues();
setToastAlert({
@ -222,7 +211,6 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
mutate<IIssue>(PROJECT_ISSUES_DETAILS, (prevData) => ({ ...prevData, ...res }), false);
} else {
if (displayFilters.layout === "calendar") mutate(calendarFetchKey);
if (displayFilters.layout === "spreadsheet") mutate(spreadsheetFetchKey);
if (payload.parent) mutate(SUB_ISSUES(payload.parent.toString()));
mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
mutate(PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
@ -308,7 +296,6 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
start_target_date: true,
order_by: "sort_order",
});
if (displayFilters.layout === "spreadsheet") mutate(spreadsheetFetchKey);
if (groupedIssues) mutateMyIssues();
setToastAlert({

4
web/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
View File

@ -96,9 +96,7 @@ export const CalendarMonthsDropdown: React.FC = observer(() => {
<button
key={month.shortTitle}
type="button"
className={`text-xs hover:bg-custom-background-80 rounded py-0.5 ${
activeMonthDate.getMonth() === index ? "bg-custom-background-80" : ""
}`}
className="text-xs hover:bg-custom-background-80 rounded py-0.5"
onClick={() => {
const newDate = new Date(activeMonthDate.getFullYear(), index, 1);
handleDateChange(newDate);

6
web/components/issues/issue-layouts/calendar/issue-blocks.tsx
View File

@ -21,8 +21,10 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
{(provided, snapshot) => (
<Link href={`/${workspaceSlug?.toString()}/projects/${issue.project}/issues/${issue.id}`}>
<a
className={`h-8 w-full shadow-custom-shadow-2xs rounded py-1.5 px-1 flex items-center gap-1.5 border-[0.5px] border-custom-border-200 ${
snapshot.isDragging ? "shadow-custom-shadow-rg bg-custom-background-90" : "bg-custom-background-100"
className={`h-8 w-full shadow-custom-shadow-2xs rounded py-1.5 px-1 flex items-center gap-1.5 border-[0.5px] border-custom-border-100 ${
snapshot.isDragging
? "shadow-custom-shadow-rg bg-custom-background-90"
: "bg-custom-background-100 hover:bg-custom-background-90"
}`}
{...provided.draggableProps}
{...provided.dragHandleProps}

54
web/components/issues/issue-layouts/filters/applied-filters/date.tsx Normal file
View File

@ -0,0 +1,54 @@
import { observer } from "mobx-react-lite";
// icons
import { X } from "lucide-react";
// helpers
import { renderLongDateFormat } from "helpers/date-time.helper";
import { capitalizeFirstLetter } from "helpers/string.helper";
// constants
import { DATE_FILTER_OPTIONS } from "constants/filters";
type Props = {
handleRemove: (val: string) => void;
values: string[];
};
export const AppliedDateFilters: React.FC<Props> = observer((props) => {
const { handleRemove, values } = props;
const getDateLabel = (value: string): string => {
let dateLabel = "";
const dateDetails = DATE_FILTER_OPTIONS.find((d) => d.value === value);
if (dateDetails) dateLabel = dateDetails.name;
else {
const dateParts = value.split(";");
if (dateParts.length === 2) {
const [date, time] = dateParts;
dateLabel = `${capitalizeFirstLetter(time)} ${renderLongDateFormat(date)}`;
}
}
return dateLabel;
};
return (
<div className="flex items-center gap-1 flex-wrap">
{values.map((date) => (
<div key={date} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
<span className="normal-case">{getDateLabel(date)}</span>
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(date)}
>
<X size={10} strokeWidth={2} />
</button>
</div>
))}
</div>
);
});

141
web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx Normal file
View File

@ -0,0 +1,141 @@
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import {
AppliedDateFilters,
AppliedLabelsFilters,
AppliedMembersFilters,
AppliedPriorityFilters,
AppliedStateFilters,
AppliedStateGroupFilters,
} from "components/issues";
// icons
import { X } from "lucide-react";
// helpers
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
// types
import { IIssueFilterOptions } from "types";
export const AppliedFiltersList: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { issueFilter: issueFilterStore, project: projectStore } = useMobxStore();
const userFilters = issueFilterStore.userFilters;
// filters whose value not null or empty array
const appliedFilters: IIssueFilterOptions = {};
Object.entries(userFilters).forEach(([key, value]) => {
if (!value) return;
if (Array.isArray(value) && value.length === 0) return;
appliedFilters[key as keyof IIssueFilterOptions] = value;
});
const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
if (!workspaceSlug || !projectId) return;
// remove all values of the key if value is null
if (!value) {
issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
filters: {
[key]: null,
},
});
return;
}
// remove the passed value from the key
let newValues = issueFilterStore.userFilters?.[key] ?? [];
newValues = newValues.filter((val) => val !== value);
issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
filters: {
[key]: newValues,
},
});
};
const handleClearAllFilters = () => {
if (!workspaceSlug || !projectId) return;
const newFilters: IIssueFilterOptions = {};
Object.keys(userFilters).forEach((key) => {
newFilters[key as keyof IIssueFilterOptions] = null;
});
issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
filters: { ...newFilters },
});
};
// return if no filters are applied
if (Object.keys(appliedFilters).length === 0) return null;
return (
<div className="flex items-stretch gap-2 flex-wrap bg-custom-background-100 p-4">
{Object.entries(appliedFilters).map(([key, value]) => {
const filterKey = key as keyof IIssueFilterOptions;
return (
<div
key={filterKey}
className="capitalize py-1 px-2 border border-custom-border-200 rounded-md flex items-center gap-2 flex-wrap"
>
<span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
{(filterKey === "assignees" || filterKey === "created_by" || filterKey === "subscriber") && (
<AppliedMembersFilters
handleRemove={(val) => handleRemoveFilter(filterKey, val)}
members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
values={value}
/>
)}
{(filterKey === "start_date" || filterKey === "target_date") && (
<AppliedDateFilters handleRemove={(val) => handleRemoveFilter(filterKey, val)} values={value} />
)}
{filterKey === "labels" && (
<AppliedLabelsFilters
handleRemove={(val) => handleRemoveFilter("labels", val)}
labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
values={value}
/>
)}
{filterKey === "priority" && (
<AppliedPriorityFilters handleRemove={(val) => handleRemoveFilter("priority", val)} values={value} />
)}
{filterKey === "state" && (
<AppliedStateFilters
handleRemove={(val) => handleRemoveFilter("state", val)}
states={projectStore.states?.[projectId?.toString() ?? ""]}
values={value}
/>
)}
{filterKey === "state_group" && (
<AppliedStateGroupFilters handleRemove={(val) => handleRemoveFilter("state_group", val)} values={value} />
)}
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemoveFilter(filterKey, null)}
>
<X size={12} strokeWidth={2} />
</button>
</div>
);
})}
<button
type="button"
onClick={handleClearAllFilters}
className="flex items-center gap-2 text-xs border border-custom-border-200 py-1 px-2 rounded-md text-custom-text-300 hover:text-custom-text-200"
>
Clear all
<X size={12} strokeWidth={2} />
</button>
</div>
);
});

7
web/components/issues/issue-layouts/filters/applied-filters/index.ts Normal file
View File

@ -0,0 +1,7 @@
export * from "./date";
export * from "./filters-list";
export * from "./label";
export * from "./members";
export * from "./priority";
export * from "./state";
export * from "./state-group";

45
web/components/issues/issue-layouts/filters/applied-filters/label.tsx Normal file
View File

@ -0,0 +1,45 @@
import { observer } from "mobx-react-lite";
// icons
import { X } from "lucide-react";
// types
import { IIssueLabels } from "types";
type Props = {
handleRemove: (val: string) => void;
labels: IIssueLabels[] | undefined;
values: string[];
};
export const AppliedLabelsFilters: React.FC<Props> = observer((props) => {
const { handleRemove, labels, values } = props;
return (
<div className="flex items-center gap-1 flex-wrap">
{values.map((labelId) => {
const labelDetails = labels?.find((l) => l.id === labelId);
if (!labelDetails) return null;
return (
<div key={labelId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
<span
className="h-1.5 w-1.5 rounded-full"
style={{
backgroundColor: labelDetails.color,
}}
/>
<span className="normal-case">{labelDetails.name}</span>
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(labelId)}
>
<X size={10} strokeWidth={2} />
</button>
</div>
);
})}
</div>
);
});

42
web/components/issues/issue-layouts/filters/applied-filters/members.tsx Normal file
View File

@ -0,0 +1,42 @@
import { observer } from "mobx-react-lite";
// ui
import { Avatar } from "components/ui";
// icons
import { X } from "lucide-react";
// types
import { IUserLite } from "types";
type Props = {
handleRemove: (val: string) => void;
members: IUserLite[] | undefined;
values: string[];
};
export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
const { handleRemove, members, values } = props;
return (
<div className="flex items-center gap-1 flex-wrap">
{values.map((memberId) => {
const memberDetails = members?.find((m) => m.id === memberId);
if (!memberDetails) return null;
return (
<div key={memberId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
<Avatar user={memberDetails} height="16px" width="16px" />
<span className="normal-case">{memberDetails.display_name}</span>
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(memberId)}
>
<X size={10} strokeWidth={2} />
</button>
</div>
);
})}
</div>
);
});

47
web/components/issues/issue-layouts/filters/applied-filters/priority.tsx Normal file
View File

@ -0,0 +1,47 @@
import { observer } from "mobx-react-lite";
// icons
import { PriorityIcon } from "components/icons";
import { X } from "lucide-react";
// types
import { TIssuePriorities } from "types";
type Props = {
handleRemove: (val: string) => void;
values: string[];
};
export const AppliedPriorityFilters: React.FC<Props> = observer((props) => {
const { handleRemove, values } = props;
return (
<div className="flex items-center gap-1 flex-wrap">
{values.map((priority) => (
<div key={priority} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
<PriorityIcon
priority={priority as TIssuePriorities}
className={`!text-xs ${
priority === "urgent"
? "text-red-500"
: priority === "high"
? "text-orange-500"
: priority === "medium"
? "text-yellow-500"
: priority === "low"
? "text-green-500"
: ""
}`}
/>
{priority}
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(priority)}
>
<X size={10} strokeWidth={2} />
</button>
</div>
))}
</div>
);
});

33
web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx Normal file
View File

@ -0,0 +1,33 @@
import { observer } from "mobx-react-lite";
// icons
import { StateGroupIcon } from "components/icons";
import { X } from "lucide-react";
import { TStateGroups } from "types";
type Props = {
handleRemove: (val: string) => void;
values: string[];
};
export const AppliedStateGroupFilters: React.FC<Props> = observer((props) => {
const { handleRemove, values } = props;
return (
<div className="flex items-center gap-1 flex-wrap">
{values.map((stateGroup) => (
<div key={stateGroup} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
<StateGroupIcon stateGroup={stateGroup as TStateGroups} height="12px" width="12px" />
{stateGroup}
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(stateGroup)}
>
<X size={10} strokeWidth={2} />
</button>
</div>
))}
</div>
);
});

45
web/components/issues/issue-layouts/filters/applied-filters/state.tsx Normal file
View File

@ -0,0 +1,45 @@
import { observer } from "mobx-react-lite";
// icons
import { StateGroupIcon } from "components/icons";
import { X } from "lucide-react";
// helpers
import { getStatesList } from "helpers/state.helper";
// types
import { IStateResponse } from "types";
type Props = {
handleRemove: (val: string) => void;
states: IStateResponse | undefined;
values: string[];
};
export const AppliedStateFilters: React.FC<Props> = observer((props) => {
const { handleRemove, states, values } = props;
const statesList = getStatesList(states);
return (
<div className="flex items-center gap-1 flex-wrap">
{values.map((stateId) => {
const stateDetails = statesList?.find((s) => s.id === stateId);
if (!stateDetails) return null;
return (
<div key={stateId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
<StateGroupIcon color={stateDetails.color} stateGroup={stateDetails.group} height="12px" width="12px" />
{stateDetails.name}
<button
type="button"
className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
onClick={() => handleRemove(stateId)}
>
<X size={10} strokeWidth={2} />
</button>
</div>
);
})}
</div>
);
});

0
web/components/issues/issue-layouts/header/display-filters/display-filters-selection.tsx → web/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
View File

0
web/components/issues/issue-layouts/header/display-filters/display-properties.tsx → web/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx
View File

0
web/components/issues/issue-layouts/header/display-filters/extra-options.tsx → web/components/issues/issue-layouts/filters/header/display-filters/extra-options.tsx
View File

0
web/components/issues/issue-layouts/header/display-filters/group-by.tsx → web/components/issues/issue-layouts/filters/header/display-filters/group-by.tsx
View File

0
web/components/issues/issue-layouts/header/display-filters/index.ts → web/components/issues/issue-layouts/filters/header/display-filters/index.ts
View File

0
web/components/issues/issue-layouts/header/display-filters/issue-type.tsx → web/components/issues/issue-layouts/filters/header/display-filters/issue-type.tsx
View File

0
web/components/issues/issue-layouts/header/display-filters/order-by.tsx → web/components/issues/issue-layouts/filters/header/display-filters/order-by.tsx
View File

0
web/components/issues/issue-layouts/header/display-filters/sub-group-by.tsx → web/components/issues/issue-layouts/filters/header/display-filters/sub-group-by.tsx
View File

0
web/components/issues/issue-layouts/header/filters/assignees.tsx → web/components/issues/issue-layouts/filters/header/filters/assignee.tsx
View File

0
web/components/issues/issue-layouts/header/filters/created-by.tsx → web/components/issues/issue-layouts/filters/header/filters/created-by.tsx
View File

2
web/components/issues/issue-layouts/header/filters/filters-selection.tsx → web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
View File

@ -147,7 +147,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
)}
</div>
</div>
<div className="w-full h-full divide-y divide-custom-border-20 px-2.5 overflow-y-auto">
<div className="w-full h-full divide-y divide-custom-border-200 px-2.5 overflow-y-auto">
{/* priority */}
{isFilterEnabled("priority") && (
<div className="py-2">

2
web/components/issues/issue-layouts/header/filters/index.ts → web/components/issues/issue-layouts/filters/header/filters/index.ts
View File

@ -1,4 +1,4 @@
export * from "./assignees";
export * from "./assignee";
export * from "./created-by";
export * from "./filters-selection";
export * from "./labels";

0
web/components/issues/issue-layouts/header/filters/labels.tsx → web/components/issues/issue-layouts/filters/header/filters/labels.tsx
View File

0
web/components/issues/issue-layouts/header/filters/priority.tsx → web/components/issues/issue-layouts/filters/header/filters/priority.tsx
View File

0
web/components/issues/issue-layouts/header/filters/start-date.tsx → web/components/issues/issue-layouts/filters/header/filters/start-date.tsx
View File

0
web/components/issues/issue-layouts/header/filters/state-group.tsx → web/components/issues/issue-layouts/filters/header/filters/state-group.tsx
View File

0
web/components/issues/issue-layouts/header/filters/state.tsx → web/components/issues/issue-layouts/filters/header/filters/state.tsx
View File

0
web/components/issues/issue-layouts/header/filters/target-date.tsx → web/components/issues/issue-layouts/filters/header/filters/target-date.tsx
View File

0
web/components/issues/issue-layouts/header/helpers/dropdown.tsx → web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
View File

0
web/components/issues/issue-layouts/header/helpers/filter-header.tsx → web/components/issues/issue-layouts/filters/header/helpers/filter-header.tsx
View File

0
web/components/issues/issue-layouts/header/helpers/filter-option.tsx → web/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx
View File

0
web/components/issues/issue-layouts/header/helpers/index.ts → web/components/issues/issue-layouts/filters/header/helpers/index.ts
View File

0
web/components/issues/issue-layouts/header/index.ts → web/components/issues/issue-layouts/filters/header/index.ts
View File

0
web/components/issues/issue-layouts/header/layout-selection.tsx → web/components/issues/issue-layouts/filters/header/layout-selection.tsx
View File

2
web/components/issues/issue-layouts/filters/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from "./header";
export * from "./applied-filters";

4
web/components/issues/issue-layouts/gantt/root.tsx
View File

@ -25,9 +25,6 @@ export const GanttLayout: React.FC = observer(() => {
const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
console.log("issues", issues);
console.log("appliedFilters", issueFilterStore.appliedFilters);
return (
<>
<IssuePeekOverview
@ -51,7 +48,6 @@ export const GanttLayout: React.FC = observer(() => {
enableBlockRightResize={isAllowed}
enableBlockMove={isAllowed}
enableReorder={appliedDisplayFilters.order_by === "sort_order" && isAllowed}
bottomSpacing
/>
</div>
</>

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

@ -1,4 +1,5 @@
export * from "./calendar";
export * from "./filters";
export * from "./gantt";
export * from "./header";
export * from "./kanban";
export * from "./spreadsheet";

1
web/components/issues/issue-layouts/spreadsheet/index.ts Normal file
View File

@ -0,0 +1 @@
export * from "./root";

160
web/components/issues/issue-layouts/spreadsheet/root.tsx Normal file
View File

@ -0,0 +1,160 @@
import React, { useCallback, useState } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// hooks
import useUser from "hooks/use-user";
import useProjectDetails from "hooks/use-project-details";
// components
import { SpreadsheetColumns, SpreadsheetIssues } from "components/core";
import { IssuePeekOverview } from "components/issues";
// ui
import { CustomMenu, Spinner } from "components/ui";
// icon
import { PlusIcon } from "@heroicons/react/24/outline";
// types
import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "types";
import { IIssueUnGroupedStructure } from "store/issue";
// constants
import { SPREADSHEET_COLUMN } from "constants/spreadsheet";
export const SpreadsheetLayout: React.FC = observer(() => {
const [expandedIssues, setExpandedIssues] = useState<string[]>([]);
const router = useRouter();
const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
const { user } = useUser();
const { projectDetails } = useProjectDetails();
const { issue: issueStore, issueFilter: issueFilterStore } = useMobxStore();
const issues = issueStore.getIssues;
const issueDisplayProperties = issueFilterStore.userDisplayProperties;
const handleDisplayFiltersUpdate = useCallback(
(updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
if (!workspaceSlug || !projectId) return;
issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
display_filters: {
...updatedDisplayFilter,
},
});
},
[issueFilterStore, projectId, workspaceSlug]
);
const type = cycleId ? "cycle" : moduleId ? "module" : "issue";
const columnData = SPREADSHEET_COLUMN.map((column) => ({
...column,
isActive: issueDisplayProperties
? column.propertyName === "labels"
? issueDisplayProperties[column.propertyName as keyof IIssueDisplayProperties]
: column.propertyName === "title"
? true
: issueDisplayProperties[column.propertyName as keyof IIssueDisplayProperties]
: false,
}));
const gridTemplateColumns = columnData
.filter((column) => column.isActive)
.map((column) => column.colSize)
.join(" ");
const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
return (
<>
<IssuePeekOverview
projectId={projectId?.toString() ?? ""}
workspaceSlug={workspaceSlug?.toString() ?? ""}
readOnly={!isAllowed}
/>
<div className="h-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-100">
<div className="sticky z-[2] top-0 border-b border-custom-border-200 bg-custom-background-90 w-full min-w-max">
<SpreadsheetColumns
columnData={columnData}
displayFilters={issueFilterStore.userDisplayFilters}
gridTemplateColumns={gridTemplateColumns}
handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
/>
</div>
{issues ? (
<div className="flex flex-col h-full w-full bg-custom-background-100 rounded-sm ">
{(issues as IIssueUnGroupedStructure).map((issue: IIssue, index) => (
<SpreadsheetIssues
key={`${issue.id}_${index}`}
index={index}
issue={issue}
expandedIssues={expandedIssues}
setExpandedIssues={setExpandedIssues}
gridTemplateColumns={gridTemplateColumns}
properties={issueDisplayProperties}
handleIssueAction={() => {}}
disableUserActions={!isAllowed}
user={user}
userAuth={{
isViewer: projectDetails?.member_role === 5,
isGuest: projectDetails?.member_role === 10,
isMember: projectDetails?.member_role === 15,
isOwner: projectDetails?.member_role === 20,
}}
/>
))}
<div
className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-200 w-full min-w-max"
style={{ gridTemplateColumns }}
>
{type === "issue" ? (
<button
className="flex gap-1.5 items-center pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
onClick={() => {
const e = new KeyboardEvent("keydown", { key: "c" });
document.dispatchEvent(e);
}}
>
<PlusIcon className="h-4 w-4" />
Add Issue
</button>
) : (
isAllowed && (
<CustomMenu
className="sticky left-0 z-[1]"
customButton={
<button
className="flex gap-1.5 items-center pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
type="button"
>
<PlusIcon className="h-4 w-4" />
Add Issue
</button>
}
position="left"
optionsClassName="left-5 !w-36"
noBorder
>
<CustomMenu.MenuItem
onClick={() => {
const e = new KeyboardEvent("keydown", { key: "c" });
document.dispatchEvent(e);
}}
>
Create new
</CustomMenu.MenuItem>
{true && <CustomMenu.MenuItem onClick={() => {}}>Add an existing issue</CustomMenu.MenuItem>}
</CustomMenu>
)
)}
</div>
</div>
) : (
<Spinner />
)}
</div>
</>
);
});

12
web/components/issues/modal.tsx
View File

@ -16,7 +16,6 @@ import useIssuesView from "hooks/use-issues-view";
import useCalendarIssuesView from "hooks/use-calendar-issues-view";
import useToast from "hooks/use-toast";
import useInboxView from "hooks/use-inbox-view";
import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
import useProjects from "hooks/use-projects";
import useMyIssues from "hooks/my-issues/use-my-issues";
import useLocalStorage from "hooks/use-local-storage";
@ -87,7 +86,6 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
const { params: calendarParams } = useCalendarIssuesView();
const { ...viewGanttParams } = params;
const { params: inboxParams } = useInboxView();
const { params: spreadsheetParams } = useSpreadsheetIssuesView();
const { user } = useUser();
const { projects } = useProjects();
@ -280,14 +278,6 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
? VIEW_ISSUES(viewId.toString(), calendarParams)
: PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject?.toString() ?? "", calendarParams);
const spreadsheetFetchKey = cycleId
? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), spreadsheetParams)
: moduleId
? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), spreadsheetParams)
: viewId
? VIEW_ISSUES(viewId.toString(), spreadsheetParams)
: PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject?.toString() ?? "", spreadsheetParams);
const ganttFetchKey = cycleId
? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString())
: moduleId
@ -314,7 +304,6 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
start_target_date: true,
order_by: "sort_order",
});
if (displayFilters.layout === "spreadsheet") mutate(spreadsheetFetchKey);
if (groupedIssues) mutateMyIssues();
setToastAlert({
@ -387,7 +376,6 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
mutate<IIssue>(PROJECT_ISSUES_DETAILS, (prevData) => ({ ...prevData, ...res }), false);
} else {
if (displayFilters.layout === "calendar") mutate(calendarFetchKey);
if (displayFilters.layout === "spreadsheet") mutate(spreadsheetFetchKey);
if (payload.parent) mutate(SUB_ISSUES(payload.parent.toString()));
mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
}

41
web/hooks/gantt-chart/issue-view.tsx
View File

@ -1,41 +0,0 @@
import useSWR from "swr";
// services
import issuesService from "services/issue.service";
// hooks
import useIssuesView from "hooks/use-issues-view";
// fetch-keys
import { PROJECT_ISSUES_LIST_WITH_PARAMS } from "constants/fetch-keys";
const useGanttChartIssues = (workspaceSlug: string | undefined, projectId: string | undefined) => {
const { displayFilters, filters } = useIssuesView();
const params: any = {
order_by: displayFilters.order_by,
type: displayFilters?.type ? displayFilters?.type : undefined,
sub_issue: displayFilters.sub_issue,
assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
state: filters?.state ? filters?.state.join(",") : undefined,
priority: filters?.priority ? filters?.priority.join(",") : undefined,
labels: filters?.labels ? filters?.labels.join(",") : undefined,
created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
start_target_date: true, // to fetch only issues with a start and target date
};
// all issues under the workspace and project
const { data: ganttIssues, mutate: mutateGanttIssues } = useSWR(
workspaceSlug && projectId ? PROJECT_ISSUES_LIST_WITH_PARAMS(projectId, params) : null,
workspaceSlug && projectId
? () => issuesService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString(), params)
: null
);
return {
ganttIssues,
mutateGanttIssues,
};
};
export default useGanttChartIssues;

116
web/hooks/use-spreadsheet-issues-view.tsx
View File

@ -1,116 +0,0 @@
import { useContext } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// contexts
import { issueViewContext } from "contexts/issue-view.context";
// services
import issuesService from "services/issue.service";
import cyclesService from "services/cycles.service";
import modulesService from "services/modules.service";
// types
import { IIssue } from "types";
// fetch-keys
import {
CYCLE_ISSUES_WITH_PARAMS,
MODULE_ISSUES_WITH_PARAMS,
PROJECT_ISSUES_LIST_WITH_PARAMS,
VIEW_ISSUES,
} from "constants/fetch-keys";
const useSpreadsheetIssuesView = () => {
const {
display_filters: displayFilters,
setDisplayFilters,
filters,
setFilters,
resetFilterToDefault,
setNewFilterDefaultView,
} = useContext(issueViewContext);
const router = useRouter();
const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
const params: any = {
order_by: displayFilters?.order_by,
assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
state: filters?.state ? filters?.state.join(",") : undefined,
priority: filters?.priority ? filters?.priority.join(",") : undefined,
type: displayFilters?.type ? displayFilters?.type : undefined,
labels: filters?.labels ? filters?.labels.join(",") : undefined,
created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
sub_issue: "false",
};
const { data: projectSpreadsheetIssues, mutate: mutateProjectSpreadsheetIssues } = useSWR(
workspaceSlug && projectId ? PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params) : null,
workspaceSlug && projectId
? () => issuesService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString(), params)
: null
);
const { data: cycleSpreadsheetIssues, mutate: mutateCycleSpreadsheetIssues } = useSWR(
workspaceSlug && projectId && cycleId ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params) : null,
workspaceSlug && projectId && cycleId
? () =>
cyclesService.getCycleIssuesWithParams(
workspaceSlug.toString(),
projectId.toString(),
cycleId.toString(),
params
)
: null
);
const { data: moduleSpreadsheetIssues, mutate: mutateModuleSpreadsheetIssues } = useSWR(
workspaceSlug && projectId && moduleId ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params) : null,
workspaceSlug && projectId && moduleId
? () =>
modulesService.getModuleIssuesWithParams(
workspaceSlug.toString(),
projectId.toString(),
moduleId.toString(),
params
)
: null
);
const { data: viewSpreadsheetIssues, mutate: mutateViewSpreadsheetIssues } = useSWR(
workspaceSlug && projectId && viewId && params ? VIEW_ISSUES(viewId.toString(), params) : null,
workspaceSlug && projectId && viewId && params
? () => issuesService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString(), params)
: null
);
const spreadsheetIssues = cycleId
? (cycleSpreadsheetIssues as IIssue[])
: moduleId
? (moduleSpreadsheetIssues as IIssue[])
: viewId
? (viewSpreadsheetIssues as IIssue[])
: (projectSpreadsheetIssues as IIssue[]);
return {
displayFilters,
setDisplayFilters,
mutateIssues: cycleId
? mutateCycleSpreadsheetIssues
: moduleId
? mutateModuleSpreadsheetIssues
: viewId
? mutateViewSpreadsheetIssues
: mutateProjectSpreadsheetIssues,
spreadsheetIssues: spreadsheetIssues ?? [],
filters,
setFilters,
params,
resetFilterToDefault,
setNewFilterDefaultView,
} as const;
};
export default useSpreadsheetIssuesView;

22
web/store/issue_filters.ts
View File

@ -112,22 +112,6 @@ class IssueFilterStore implements IIssueFilterStore {
return computedFilters;
};
calendarLayoutDateRange = () => {
const { activeMonthDate, activeWeekDate } = this.rootStore.calendar.calendarFilters;
const calendarLayout = this.userDisplayFilters.calendar?.layout ?? "month";
let filterDate = new Date();
if (calendarLayout === "month") filterDate = activeMonthDate;
else filterDate = activeWeekDate;
const startOfMonth = renderDateFormat(new Date(filterDate.getFullYear(), filterDate.getMonth(), 1));
const endOfMonth = renderDateFormat(new Date(filterDate.getFullYear(), filterDate.getMonth() + 1, 0));
return [`${startOfMonth};after`, `${endOfMonth};before`];
};
get appliedFilters(): TIssueParams[] | null {
if (
!this.userFilters ||
@ -155,12 +139,12 @@ class IssueFilterStore implements IIssueFilterStore {
start_target_date: this.userDisplayFilters?.start_target_date || true,
};
if (this.userDisplayFilters.layout === "calendar") filteredRouteParams.target_date = this.calendarLayoutDateRange();
if (this.userDisplayFilters.layout === "gantt_chart") filteredRouteParams.start_target_date = true;
const filteredParams = handleIssueQueryParamsByLayout(this.userDisplayFilters.layout, "issues");
if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
if (this.userDisplayFilters.layout === "calendar") filteredRouteParams.group_by = "target_date";
if (this.userDisplayFilters.layout === "gantt_chart") filteredRouteParams.start_target_date = true;
return filteredRouteParams;
}