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

issues rendering in all issue layouts fir profile and project issues and global issues store implementation (#2886)

Browse Source 
* dev: draft and archived issue store

* connect draft and archived issues

* kanban for draft issues

* fix filter store for calendar and kanban

* dev: profile issues store and draft issues filters in header

* disble issue creation for draft issues

* dev: profile issues store filters

* disable kanban properties in draft issues

* dev: profile issues store filters

* dev: seperated adding issues to the cycle and module as seperate methds in cycle and module store

* dev: workspace profile issues store

* dev: sub group issues in the swimlanes

* profile issues and create issue connection

* fix profile issues

* fix spreadsheet issues

* fix dissapearing project from create issue modal

* page level modifications

* fix additional bugs

* dev: issues profile and global iisues and filters update

* fix issue related bugs

* fix project views for list and kanban

* fix build errors

---------

Co-authored-by: rahulramesha <rahulramesham@gmail.com>
This commit is contained in:
guru_sainath 2023-11-27 14:15:33 +05:30 committed by sriram veeraghanta
parent 70994d1da7
commit f79bd9df60
116 changed files with 3187 additions and 912 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/components/command-palette/command-pallette.tsx
View File

@ -55,6 +55,8 @@ export const CommandPalette: FC = observer(() => {
toggleBulkDeleteIssueModal,
isDeleteIssueModalOpen,
toggleDeleteIssueModal,
createIssueStoreType,
} = commandPalette;
const isAnyModalOpen = Boolean(
@ -224,6 +226,7 @@ export const CommandPalette: FC = observer(() => {
prePopulateData={
cycleId ? { cycle: cycleId.toString() } : moduleId ? { module: moduleId.toString() } : undefined
}
currentStore={createIssueStoreType}
/>
{issueId && issueDetails && (

15
web/components/headers/cycle-issues.tsx
View File

@ -20,6 +20,7 @@ import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOption
// constants
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
import { EFilterType } from "store/issues/types";
import { EProjectStore } from "store/command-palette.store";
export const CycleIssuesHeader: React.FC = observer(() => {
const [analyticsModal, setAnalyticsModal] = useState(false);
@ -33,7 +34,6 @@ export const CycleIssuesHeader: React.FC = observer(() => {
const {
cycle: cycleStore,
cycleIssueFilters: cycleIssueFiltersStore,
projectIssuesFilter: projectIssueFiltersStore,
project: { currentProjectDetails },
projectMember: { projectMembers },
@ -190,11 +190,14 @@ export const CycleIssuesHeader: React.FC = observer(() => {
<Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
Analytics
</Button>
<Button onClick={() => {
setTrackElement("CYCLE_PAGE_HEADER")
commandPaletteStore.toggleCreateIssueModal(true)
}
} size="sm" prependIcon={<Plus />}>
<Button
onClick={() => {
setTrackElement("CYCLE_PAGE_HEADER");
commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.CYCLE);
}}
size="sm"
prependIcon={<Plus />}
>
Add Issue
</Button>
<button

15
web/components/headers/module-issues.tsx
View File

@ -20,6 +20,7 @@ import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOption
// constants
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
import { EFilterType } from "store/issues/types";
import { EProjectStore } from "store/command-palette.store";
export const ModuleIssuesHeader: React.FC = observer(() => {
const [analyticsModal, setAnalyticsModal] = useState(false);
@ -33,7 +34,6 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
const {
module: moduleStore,
projectIssuesFilter: projectIssueFiltersStore,
project: projectStore,
projectMember: { projectMembers },
projectState: projectStateStore,
@ -191,11 +191,14 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
<Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
Analytics
</Button>
<Button onClick={() => {
setTrackElement("MODULE_PAGE_HEADER")
commandPaletteStore.toggleCreateIssueModal(true)
}
} size="sm" prependIcon={<Plus />}>
<Button
onClick={() => {
setTrackElement("MODULE_PAGE_HEADER");
commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.MODULE);
}}
size="sm"
prependIcon={<Plus />}
>
Add Issue
</Button>
<button

93
web/components/headers/project-draft-issues.tsx
View File

@ -1,20 +1,74 @@
import { FC } from "react";
import { FC, useCallback } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// hooks
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
// ui
import { Breadcrumbs, LayersIcon } from "@plane/ui";
// helper
import { renderEmoji } from "helpers/emoji.helper";
import { EFilterType } from "store/issues/types";
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
export const ProjectDraftIssueHeader: FC = observer(() => {
const router = useRouter();
const { workspaceSlug } = router.query;
const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
const { project: projectStore } = useMobxStore();
const { currentProjectDetails } = projectStore;
const {
project: { currentProjectDetails },
projectLabel: { projectLabels },
projectMember: { projectMembers },
projectState: projectStateStore,
projectDraftIssuesFilter: { issueFilters, updateFilters },
} = useMobxStore();
const activeLayout = issueFilters?.displayFilters?.layout;
const handleFiltersUpdate = useCallback(
(key: keyof IIssueFilterOptions, value: string | string[]) => {
if (!workspaceSlug || !projectId) return;
const newValues = issueFilters?.filters?.[key] ?? [];
if (Array.isArray(value)) {
value.forEach((val) => {
if (!newValues.includes(val)) newValues.push(val);
});
} else {
if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
else newValues.push(value);
}
updateFilters(workspaceSlug, projectId, EFilterType.FILTERS, { [key]: newValues });
},
[workspaceSlug, projectId, issueFilters, updateFilters]
);
const handleLayoutChange = useCallback(
(layout: TIssueLayouts) => {
if (!workspaceSlug || !projectId) return;
updateFilters(workspaceSlug, projectId, EFilterType.DISPLAY_FILTERS, { layout: layout });
},
[workspaceSlug, projectId, updateFilters]
);
const handleDisplayFilters = useCallback(
(updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
if (!workspaceSlug || !projectId) return;
updateFilters(workspaceSlug, projectId, EFilterType.DISPLAY_FILTERS, updatedDisplayFilter);
},
[workspaceSlug, projectId, updateFilters]
);
const handleDisplayProperties = useCallback(
(property: Partial<IIssueDisplayProperties>) => {
if (!workspaceSlug || !projectId) return;
updateFilters(workspaceSlug, projectId, EFilterType.DISPLAY_PROPERTIES, property);
},
[workspaceSlug, projectId, updateFilters]
);
return (
<div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
<div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
@ -44,6 +98,37 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
/>
</Breadcrumbs>
</div>
<div className="ml-auto flex items-center gap-2">
<LayoutSelection
layouts={["list", "kanban"]}
onChange={(layout) => handleLayoutChange(layout)}
selectedLayout={activeLayout}
/>
<FiltersDropdown title="Filters" placement="bottom-end">
<FilterSelection
filters={issueFilters?.filters ?? {}}
handleFiltersUpdate={handleFiltersUpdate}
layoutDisplayFiltersOptions={
activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
}
labels={projectLabels ?? undefined}
members={projectMembers?.map((m) => m.member)}
states={projectStateStore.states?.[projectId ?? ""] ?? undefined}
/>
</FiltersDropdown>
<FiltersDropdown title="Display" placement="bottom-end">
<DisplayFiltersSelection
layoutDisplayFiltersOptions={
activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
}
displayFilters={issueFilters?.displayFilters ?? {}}
handleDisplayFiltersUpdate={handleDisplayFilters}
displayProperties={issueFilters?.displayProperties ?? {}}
handleDisplayPropertiesUpdate={handleDisplayProperties}
/>
</FiltersDropdown>
</div>
</div>
</div>
);

12
web/components/headers/project-issues.tsx
View File

@ -17,6 +17,7 @@ import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
// helper
import { renderEmoji } from "helpers/emoji.helper";
import { EFilterType } from "store/issues/types";
import { EProjectStore } from "store/command-palette.store";
export const ProjectIssuesHeader: React.FC = observer(() => {
const [analyticsModal, setAnalyticsModal] = useState(false);
@ -199,11 +200,14 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
<Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
Analytics
</Button>
<Button onClick={() => {
<Button
onClick={() => {
setTrackElement("PROJECT_PAGE_HEADER");
commandPaletteStore.toggleCreateIssueModal(true)
}
} size="sm" prependIcon={<Plus />}>
commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.PROJECT);
}}
size="sm"
prependIcon={<Plus />}
>
Add Issue
</Button>
</div>

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

@ -72,7 +72,7 @@ export const DeleteIssueModal: React.FC<Props> = (props) => {
<p className="text-sm text-custom-text-200">
Are you sure you want to delete issue{" "}
<span className="break-words font-medium text-custom-text-100">
{data?.project_detail.identifier}-{data?.sequence_id}
{data?.project_detail?.identifier}-{data?.sequence_id}
</span>
{""}? All of the data related to the issue will be permanently removed. This action cannot be
undone.

2
web/components/issues/form.tsx
View File

@ -228,7 +228,7 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
...defaultValues,
...initialData,
});
}, [setFocus, initialData, reset]);
}, [setFocus, reset]);
// update projectId in form when projectId changes
useEffect(() => {

25
web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
View File

@ -7,14 +7,28 @@ import { useMobxStore } from "lib/mobx/store-provider";
import { CalendarChart } from "components/issues";
// types
import { IIssue } from "types";
import { ICycleIssuesStore, IModuleIssuesStore, IProjectIssuesStore, IViewIssuesStore } from "store/issues";
import { IIssueCalendarViewStore, IssueStore } from "store/issue";
import {
ICycleIssuesFilterStore,
ICycleIssuesStore,
IModuleIssuesFilterStore,
IModuleIssuesStore,
IProjectIssuesFilterStore,
IProjectIssuesStore,
IViewIssuesFilterStore,
IViewIssuesStore,
} from "store/issues";
import { IIssueCalendarViewStore } from "store/issue";
import { IQuickActionProps } from "../list/list-view-types";
import { EIssueActions } from "../types";
import { IGroupedIssues } from "store/issues/types";
interface IBaseCalendarRoot {
issueStore: IProjectIssuesStore | IModuleIssuesStore | ICycleIssuesStore | IViewIssuesStore;
issuesFilterStore:
| IProjectIssuesFilterStore
| IModuleIssuesFilterStore
| ICycleIssuesFilterStore
| IViewIssuesFilterStore;
calendarViewStore: IIssueCalendarViewStore;
QuickActions: FC<IQuickActionProps>;
issueActions: {
@ -26,10 +40,9 @@ interface IBaseCalendarRoot {
}
export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
const { issueStore, calendarViewStore, QuickActions, issueActions, viewId } = props;
const { projectIssuesFilter: issueFilterStore } = useMobxStore();
const { issueStore, issuesFilterStore, calendarViewStore, QuickActions, issueActions, viewId } = props;
const displayFilters = issueFilterStore.issueFilters?.displayFilters;
const displayFilters = issuesFilterStore.issueFilters?.displayFilters;
const issues = issueStore.getIssues;
const groupedIssueIds = (issueStore.getIssuesIds ?? {}) as IGroupedIssues;
@ -75,7 +88,7 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
}
handleRemoveFromView={
issueActions[EIssueActions.REMOVE]
? async () => handleIssues(issue.target_date ?? "", issue, EIssueActions.UPDATE)
? async () => handleIssues(issue.target_date ?? "", issue, EIssueActions.REMOVE)
: undefined
}
/>

7
web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
View File

@ -10,7 +10,11 @@ import { EIssueActions } from "../../types";
import { BaseCalendarRoot } from "../base-calendar-root";
export const CycleCalendarLayout: React.FC = observer(() => {
const { cycleIssues: cycleIssueStore, cycleIssueCalendarView: cycleIssueCalendarViewStore } = useMobxStore();
const {
cycleIssues: cycleIssueStore,
cycleIssuesFilter: cycleIssueFilterStore,
cycleIssueCalendarView: cycleIssueCalendarViewStore,
} = useMobxStore();
const router = useRouter();
const { workspaceSlug, cycleId } = router.query as { workspaceSlug: string; cycleId: string };
@ -34,6 +38,7 @@ export const CycleCalendarLayout: React.FC = observer(() => {
return (
<BaseCalendarRoot
issueStore={cycleIssueStore}
issuesFilterStore={cycleIssueFilterStore}
calendarViewStore={cycleIssueCalendarViewStore}
QuickActions={CycleIssueQuickActions}
issueActions={issueActions}

7
web/components/issues/issue-layouts/calendar/roots/module-root.tsx
View File

@ -10,7 +10,11 @@ import { EIssueActions } from "../../types";
import { BaseCalendarRoot } from "../base-calendar-root";
export const ModuleCalendarLayout: React.FC = observer(() => {
const { moduleIssues: moduleIssueStore, moduleIssueCalendarView: moduleIssueCalendarViewStore } = useMobxStore();
const {
moduleIssues: moduleIssueStore,
moduleIssuesFilter: moduleIssueFilterStore,
moduleIssueCalendarView: moduleIssueCalendarViewStore,
} = useMobxStore();
const router = useRouter();
const { workspaceSlug, moduleId } = router.query as { workspaceSlug: string; moduleId: string };
@ -33,6 +37,7 @@ export const ModuleCalendarLayout: React.FC = observer(() => {
return (
<BaseCalendarRoot
issueStore={moduleIssueStore}
issuesFilterStore={moduleIssueFilterStore}
calendarViewStore={moduleIssueCalendarViewStore}
QuickActions={ModuleIssueQuickActions}
issueActions={issueActions}

7
web/components/issues/issue-layouts/calendar/roots/project-root.tsx
View File

@ -15,25 +15,26 @@ export const CalendarLayout: React.FC = observer(() => {
const {
projectIssues: issueStore,
issueCalendarView: issueCalendarViewStore,
issueDetail: issueDetailStore,
projectIssuesFilter: projectIssueFiltersStore,
} = useMobxStore();
const issueActions = {
[EIssueActions.UPDATE]: async (issue: IIssue) => {
if (!workspaceSlug) return;
issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
issueStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
},
[EIssueActions.DELETE]: async (issue: IIssue) => {
if (!workspaceSlug) return;
issueDetailStore.deleteIssue(workspaceSlug.toString(), issue.project, issue.id);
issueStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id);
},
};
return (
<BaseCalendarRoot
issueStore={issueStore}
issuesFilterStore={projectIssueFiltersStore}
calendarViewStore={issueCalendarViewStore}
QuickActions={ProjectIssueQuickActions}
issueActions={issueActions}

11
web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx
View File

@ -1,11 +1,9 @@
import { useCallback } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { DragDropContext, DropResult } from "@hello-pangea/dnd";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { CalendarChart, ProjectIssueQuickActions } from "components/issues";
import { ProjectIssueQuickActions } from "components/issues";
// types
import { IIssue } from "types";
import { EIssueActions } from "../../types";
@ -14,7 +12,7 @@ import { BaseCalendarRoot } from "../base-calendar-root";
export const ProjectViewCalendarLayout: React.FC = observer(() => {
const {
viewIssues: projectViewIssuesStore,
issueDetail: issueDetailStore,
viewIssuesFilter: projectIssueViewFiltersStore,
projectViewIssueCalendarView: projectViewIssueCalendarViewStore,
} = useMobxStore();
@ -25,18 +23,19 @@ export const ProjectViewCalendarLayout: React.FC = observer(() => {
[EIssueActions.UPDATE]: async (issue: IIssue) => {
if (!workspaceSlug) return;
issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
projectViewIssuesStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
},
[EIssueActions.DELETE]: async (issue: IIssue) => {
if (!workspaceSlug) return;
issueDetailStore.deleteIssue(workspaceSlug.toString(), issue.project, issue.id);
projectViewIssuesStore.removeIssue(workspaceSlug.toString(), issue.project, issue.id);
},
};
return (
<BaseCalendarRoot
issueStore={projectViewIssuesStore}
issuesFilterStore={projectIssueViewFiltersStore}
calendarViewStore={projectViewIssueCalendarViewStore}
QuickActions={ProjectIssueQuickActions}
issueActions={issueActions}

13
web/components/issues/issue-layouts/empty-states/cycle.tsx
View File

@ -14,6 +14,7 @@ import { Button } from "@plane/ui";
import emptyIssue from "public/empty-state/issue.svg";
// types
import { ISearchIssueResponse } from "types";
import { EProjectStore } from "store/command-palette.store";
type Props = {
workspaceSlug: string | undefined;
@ -26,7 +27,11 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
// states
const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
const { cycleIssue: cycleIssueStore, commandPalette: commandPaletteStore, trackEvent: { setTrackElement } } = useMobxStore();
const {
cycleIssue: cycleIssueStore,
commandPalette: commandPaletteStore,
trackEvent: { setTrackElement },
} = useMobxStore();
const { setToastAlert } = useToast();
@ -63,9 +68,9 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
text: "New issue",
icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
onClick: () => {
setTrackElement("CYCLE_EMPTY_STATE")
commandPaletteStore.toggleCreateIssueModal(true)
}
setTrackElement("CYCLE_EMPTY_STATE");
commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.CYCLE);
},
}}
secondaryButton={
<Button

14
web/components/issues/issue-layouts/empty-states/project-view.tsx
View File

@ -6,9 +6,17 @@ import { useMobxStore } from "lib/mobx/store-provider";
import { EmptyState } from "components/common";
// assets
import emptyIssue from "public/empty-state/issue.svg";
import { EProjectStore } from "store/command-palette.store";
import { useRouter } from "next/router";
export const ProjectViewEmptyState: React.FC = observer(() => {
const { commandPalette: commandPaletteStore, trackEvent: { setTrackElement } } = useMobxStore();
const router = useRouter();
const { viewId } = router.query as { viewId: string };
const {
commandPalette: commandPaletteStore,
trackEvent: { setTrackElement },
} = useMobxStore();
return (
<div className="h-full w-full grid place-items-center">
@ -21,8 +29,8 @@ export const ProjectViewEmptyState: React.FC = observer(() => {
icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
onClick: () => {
setTrackElement("VIEW_EMPTY_STATE");
commandPaletteStore.toggleCreateIssueModal(true)
}
commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.PROJECT_VIEW);
},
}}
/>
</div>

10
web/components/issues/issue-layouts/empty-states/project.tsx
View File

@ -6,9 +6,13 @@ import { useMobxStore } from "lib/mobx/store-provider";
import { EmptyState } from "components/common";
// assets
import emptyIssue from "public/empty-state/issue.svg";
import { EProjectStore } from "store/command-palette.store";
export const ProjectEmptyState: React.FC = observer(() => {
const { commandPalette: commandPaletteStore, trackEvent: { setTrackElement } } = useMobxStore();
const {
commandPalette: commandPaletteStore,
trackEvent: { setTrackElement },
} = useMobxStore();
return (
<div className="h-full w-full grid place-items-center">
@ -21,8 +25,8 @@ export const ProjectEmptyState: React.FC = observer(() => {
icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
onClick: () => {
setTrackElement("PROJECT_EMPTY_STATE");
commandPaletteStore.toggleCreateIssueModal(true)
}
commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.PROJECT);
},
}}
/>
</div>

23
web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx
View File

@ -7,23 +7,24 @@ import { useMobxStore } from "lib/mobx/store-provider";
import { AppliedFiltersList } from "components/issues";
// types
import { IIssueFilterOptions } from "types";
import { EFilterType } from "store/issues/types";
export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const {
archivedIssueFilters: archivedIssueFiltersStore,
projectArchivedIssuesFilter: { issueFilters, updateFilters },
projectLabel: { projectLabels },
projectMember: { projectMembers },
projectState: projectStateStore,
} = useMobxStore();
const userFilters = archivedIssueFiltersStore.userFilters;
const userFilters = issueFilters?.filters;
// filters whose value not null or empty array
const appliedFilters: IIssueFilterOptions = {};
Object.entries(userFilters).forEach(([key, value]) => {
Object.entries(userFilters ?? {}).forEach(([key, value]) => {
if (!value) return;
if (Array.isArray(value) && value.length === 0) return;
@ -36,22 +37,18 @@ export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
// remove all values of the key if value is null
if (!value) {
archivedIssueFiltersStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
filters: {
updateFilters(workspaceSlug.toString(), projectId.toString(), EFilterType.FILTERS, {
[key]: null,
},
});
return;
}
// remove the passed value from the key
let newValues = archivedIssueFiltersStore.userFilters?.[key] ?? [];
let newValues = issueFilters?.filters?.[key] ?? [];
newValues = newValues.filter((val) => val !== value);
archivedIssueFiltersStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
filters: {
updateFilters(workspaceSlug.toString(), projectId.toString(), EFilterType.FILTERS, {
[key]: newValues,
},
});
};
@ -59,12 +56,12 @@ export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
if (!workspaceSlug || !projectId) return;
const newFilters: IIssueFilterOptions = {};
Object.keys(userFilters).forEach((key) => {
Object.keys(userFilters ?? {}).forEach((key) => {
newFilters[key as keyof IIssueFilterOptions] = null;
});
archivedIssueFiltersStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
filters: { ...newFilters },
updateFilters(workspaceSlug.toString(), projectId.toString(), EFilterType.FILTERS, {
...newFilters,
});
};

80
web/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx Normal file
View File

@ -0,0 +1,80 @@
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { AppliedFiltersList } from "components/issues";
// types
import { IIssueFilterOptions } from "types";
import { EFilterType } from "store/issues/types";
export const DraftIssueAppliedFiltersRoot: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const {
projectDraftIssuesFilter: { issueFilters, updateFilters },
projectLabel: { projectLabels },
projectMember: { projectMembers },
projectState: projectStateStore,
} = useMobxStore();
const userFilters = issueFilters?.filters;
// 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) {
updateFilters(workspaceSlug.toString(), projectId.toString(), EFilterType.FILTERS, {
[key]: null,
});
return;
}
// remove the passed value from the key
let newValues = issueFilters?.filters?.[key] ?? [];
newValues = newValues.filter((val) => val !== value);
updateFilters(workspaceSlug.toString(), projectId.toString(), EFilterType.FILTERS, {
[key]: newValues,
});
};
const handleClearAllFilters = () => {
if (!workspaceSlug || !projectId) return;
const newFilters: IIssueFilterOptions = {};
Object.keys(userFilters ?? {}).forEach((key) => {
newFilters[key as keyof IIssueFilterOptions] = null;
});
updateFilters(workspaceSlug.toString(), projectId.toString(), EFilterType.FILTERS, { ...newFilters });
};
// return if no filters are applied
if (Object.keys(appliedFilters).length === 0) return null;
return (
<div className="p-4">
<AppliedFiltersList
appliedFilters={appliedFilters}
handleClearAllFilters={handleClearAllFilters}
handleRemoveFilter={handleRemoveFilter}
labels={projectLabels ?? []}
members={projectMembers?.map((m) => m.member)}
states={projectStateStore.states?.[projectId?.toString() ?? ""]}
/>
</div>
);
});

1
web/components/issues/issue-layouts/filters/applied-filters/roots/index.ts
View File

@ -4,3 +4,4 @@ export * from "./module-root";
export * from "./project-view-root";
export * from "./project-root";
export * from "./archived-issue";
export * from "./profile-issues-root";

72
web/components/issues/issue-layouts/filters/applied-filters/roots/profile-issues-root.tsx Normal file
View File

@ -0,0 +1,72 @@
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { AppliedFiltersList } from "components/issues";
// types
import { IIssueFilterOptions } from "types";
import { EFilterType } from "store/issues/types";
export const ProfileIssuesAppliedFiltersRoot: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug } = router.query as {
workspaceSlug: string;
};
const {
workspace: { workspaceLabels },
workspaceProfileIssuesFilter: { issueFilters, updateFilters },
} = useMobxStore();
const userFilters = issueFilters?.filters;
// 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) return;
if (!value) {
updateFilters(workspaceSlug, EFilterType.FILTERS, { [key]: null });
return;
}
let newValues = issueFilters?.filters?.[key] ?? [];
newValues = newValues.filter((val) => val !== value);
updateFilters(workspaceSlug, EFilterType.FILTERS, {
[key]: newValues,
});
};
const handleClearAllFilters = () => {
if (!workspaceSlug) return;
const newFilters: IIssueFilterOptions = {};
Object.keys(userFilters ?? {}).forEach((key) => {
newFilters[key as keyof IIssueFilterOptions] = null;
});
updateFilters(workspaceSlug, EFilterType.FILTERS, { ...newFilters });
};
// return if no filters are applied
if (Object.keys(appliedFilters).length === 0) return null;
return (
<div className="p-4">
<AppliedFiltersList
appliedFilters={appliedFilters}
handleClearAllFilters={handleClearAllFilters}
handleRemoveFilter={handleRemoveFilter}
labels={workspaceLabels ?? []}
members={[]}
states={[]}
/>
</div>
);
});

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

@ -57,10 +57,16 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
if (!workspaceSlug) return;
//Todo fix sort order in the structure
issueStore.updateIssue(workspaceSlug, issue.project, issue.id, {
issueStore.updateIssue(
workspaceSlug,
issue.project,
issue.id,
{
start_date: payload.start_date,
target_date: payload.target_date,
});
},
viewId
);
};
const isAllowed = (projectDetails?.member_role || 0) >= EUserWorkspaceRoles.MEMBER;

61
web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
View File

@ -1,5 +1,4 @@
import { FC, useCallback, useState } from "react";
import { useRouter } from "next/router";
import { DragDropContext } from "@hello-pangea/dnd";
import { observer } from "mobx-react-lite";
// mobx store
@ -9,7 +8,19 @@ import { Spinner } from "@plane/ui";
// types
import { IIssue } from "types";
import { EIssueActions } from "../types";
import { ICycleIssuesStore, IModuleIssuesStore, IProjectIssuesStore, IViewIssuesStore } from "store/issues";
import {
ICycleIssuesFilterStore,
ICycleIssuesStore,
IModuleIssuesFilterStore,
IModuleIssuesStore,
IProfileIssuesFilterStore,
IProfileIssuesStore,
IProjectDraftIssuesStore,
IProjectIssuesFilterStore,
IProjectIssuesStore,
IViewIssuesFilterStore,
IViewIssuesStore,
} from "store/issues";
import { IQuickActionProps } from "../list/list-view-types";
import { IIssueKanBanViewStore } from "store/issue";
// constants
@ -17,9 +28,22 @@ import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
//components
import { KanBan } from "./default";
import { KanBanSwimLanes } from "./swimlanes";
import { EProjectStore } from "store/command-palette.store";
export interface IBaseKanBanLayout {
issueStore: IProjectIssuesStore | IModuleIssuesStore | ICycleIssuesStore | IViewIssuesStore;
issueStore:
| IProjectIssuesStore
| IModuleIssuesStore
| ICycleIssuesStore
| IViewIssuesStore
| IProjectDraftIssuesStore
| IProfileIssuesStore;
issuesFilterStore:
| IProjectIssuesFilterStore
| IModuleIssuesFilterStore
| ICycleIssuesFilterStore
| IViewIssuesFilterStore
| IProfileIssuesFilterStore;
kanbanViewStore: IIssueKanBanViewStore;
QuickActions: FC<IQuickActionProps>;
issueActions: {
@ -29,24 +53,33 @@ export interface IBaseKanBanLayout {
};
showLoader?: boolean;
viewId?: string;
currentStore?: EProjectStore;
}
export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBaseKanBanLayout) => {
const { issueStore, kanbanViewStore, QuickActions, issueActions, showLoader, viewId } = props;
const {
issueStore,
issuesFilterStore,
kanbanViewStore,
QuickActions,
issueActions,
showLoader,
viewId,
currentStore,
} = props;
const {
project: { workspaceProjects },
projectLabel: { projectLabels },
projectMember: { projectMembers },
projectState: projectStateStore,
projectIssuesFilter: issueFilterStore,
} = useMobxStore();
const issues = issueStore?.getIssues || {};
const issueIds = issueStore?.getIssuesIds || [];
const displayFilters = issueFilterStore?.issueFilters?.displayFilters;
const displayProperties = issueFilterStore?.issueFilters?.displayProperties || null;
const displayFilters = issuesFilterStore?.issueFilters?.displayFilters;
const displayProperties = issuesFilterStore?.issueFilters?.displayProperties || null;
const sub_group_by: string | null = displayFilters?.sub_group_by || null;
@ -60,6 +93,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
const [isDragStarted, setIsDragStarted] = useState<boolean>(false);
const { enableInlineEditing, enableQuickAdd, enableIssueCreation } = issueStore?.viewFlags || {};
const onDragStart = () => {
setIsDragStarted(true);
};
@ -103,7 +137,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
return (
<>
{showLoader && issueStore?.loader === "mutation" && (
{showLoader && issueStore?.loader === "init-loader" && (
<div className="fixed top-16 right-2 z-30 bg-custom-background-80 shadow-custom-shadow-sm w-10 h-10 rounded flex justify-center items-center">
<Spinner className="w-5 h-5" />
</div>
@ -144,11 +178,14 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
labels={projectLabels}
members={projectMembers?.map((m) => m.member) ?? null}
projects={workspaceProjects}
enableQuickIssueCreate
enableQuickIssueCreate={enableQuickAdd}
showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
isDragStarted={isDragStarted}
quickAddCallback={issueStore.quickAddIssue}
quickAddCallback={issueStore?.quickAddIssue}
viewId={viewId}
disableIssueCreation={!enableIssueCreation}
isReadOnly={!enableInlineEditing}
currentStore={currentStore}
/>
) : (
<KanBanSwimLanes
@ -185,6 +222,10 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
projects={workspaceProjects}
showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
isDragStarted={isDragStarted}
disableIssueCreation={true}
enableQuickIssueCreate={enableQuickAdd}
isReadOnly={!enableInlineEditing}
currentStore={currentStore}
/>
)}
</DragDropContext>

3
web/components/issues/issue-layouts/kanban/block.tsx
View File

@ -17,6 +17,7 @@ interface IssueBlockProps {
handleIssues: (sub_group_by: string | null, group_by: string | null, issue: IIssue, action: EIssueActions) => void;
quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
displayProperties: IIssueDisplayProperties | null;
isReadOnly: boolean;
}
export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
@ -30,6 +31,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
handleIssues,
quickActions,
displayProperties,
isReadOnly,
} = props;
const updateIssue = (sub_group_by: string | null, group_by: string | null, issueToUpdate: IIssue) => {
@ -91,6 +93,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
handleIssues={updateIssue}
displayProperties={displayProperties}
showEmptyGroup={showEmptyGroup}
isReadOnly={isReadOnly}
/>
</div>
</div>

3
web/components/issues/issue-layouts/kanban/blocks-list.tsx
View File

@ -14,6 +14,7 @@ interface IssueBlocksListProps {
handleIssues: (sub_group_by: string | null, group_by: string | null, issue: IIssue, action: EIssueActions) => void;
quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
displayProperties: IIssueDisplayProperties | null;
isReadOnly: boolean;
}
export const KanbanIssueBlocksList: React.FC<IssueBlocksListProps> = (props) => {
@ -27,6 +28,7 @@ export const KanbanIssueBlocksList: React.FC<IssueBlocksListProps> = (props) =>
handleIssues,
quickActions,
displayProperties,
isReadOnly,
} = props;
return (
@ -50,6 +52,7 @@ export const KanbanIssueBlocksList: React.FC<IssueBlocksListProps> = (props) =>
columnId={columnId}
sub_group_id={sub_group_id}
isDragDisabled={isDragDisabled}
isReadOnly={isReadOnly}
/>
);
})}

46
web/components/issues/issue-layouts/kanban/default.tsx
View File

@ -13,6 +13,7 @@ import { getValueFromObject } from "constants/issue";
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
import { EIssueActions } from "../types";
import { IIssueResponse, IGroupedIssues, ISubGroupedIssues, TUnGroupedIssues } from "store/issues/types";
import { EProjectStore } from "store/command-palette.store";
export interface IGroupByKanBan {
issues: IIssueResponse;
@ -40,6 +41,9 @@ export interface IGroupByKanBan {
viewId?: string
) => Promise<IIssue | undefined>;
viewId?: string;
disableIssueCreation?: boolean;
currentStore?: EProjectStore;
isReadOnly: boolean;
}
const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
@ -63,6 +67,9 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
isDragStarted,
quickAddCallback,
viewId,
disableIssueCreation,
isReadOnly,
currentStore,
} = props;
const verticalAlignPosition = (_list: any) =>
@ -86,6 +93,8 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
issues_count={issueIds?.[getValueFromObject(_list, listKey) as string]?.length || 0}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
</div>
)}
@ -95,10 +104,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
verticalAlignPosition(_list) ? `w-[0px] overflow-hidden` : `w-full transition-all`
}`}
>
<Droppable
droppableId={`${getValueFromObject(_list, listKey) as string}__${sub_group_id}`}
isDropDisabled={isDragDisabled}
>
<Droppable droppableId={`${getValueFromObject(_list, listKey) as string}__${sub_group_id}`}>
{(provided: any, snapshot: any) => (
<div
className={`w-full h-full relative transition-all ${
@ -118,6 +124,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
handleIssues={handleIssues}
quickActions={quickActions}
displayProperties={displayProperties}
isReadOnly={isReadOnly}
/>
) : (
isDragDisabled && (
@ -149,7 +156,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
)}
</div>
{isDragStarted && isDragDisabled && (
{/* {isDragStarted && isDragDisabled && (
<div className="invisible group-hover:visible transition-all text-sm absolute top-12 bottom-10 left-0 right-0 bg-custom-background-100/40 text-center">
<div className="rounded inline-flex mt-80 h-8 px-3 justify-center items-center bg-custom-background-80 text-custom-text-100 font-medium">
{`This board is ordered by "${replaceUnderscoreIfSnakeCase(
@ -157,7 +164,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
)}"`}
</div>
</div>
)}
)} */}
</div>
))}
</div>
@ -192,6 +199,9 @@ export interface IKanBan {
viewId?: string
) => Promise<IIssue | undefined>;
viewId?: string;
disableIssueCreation?: boolean;
currentStore?: EProjectStore;
isReadOnly: boolean;
}
export const KanBan: React.FC<IKanBan> = observer((props) => {
@ -218,6 +228,9 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
isDragStarted,
quickAddCallback,
viewId,
disableIssueCreation,
isReadOnly,
currentStore,
} = props;
const { issueKanBanView: issueKanBanViewStore } = useMobxStore();
@ -246,6 +259,9 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
isDragStarted={isDragStarted}
quickAddCallback={quickAddCallback}
viewId={viewId}
disableIssueCreation={disableIssueCreation}
isReadOnly={isReadOnly}
currentStore={currentStore}
/>
)}
@ -271,6 +287,9 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
isDragStarted={isDragStarted}
quickAddCallback={quickAddCallback}
viewId={viewId}
disableIssueCreation={disableIssueCreation}
isReadOnly={isReadOnly}
currentStore={currentStore}
/>
)}
@ -296,6 +315,9 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
isDragStarted={isDragStarted}
quickAddCallback={quickAddCallback}
viewId={viewId}
disableIssueCreation={disableIssueCreation}
isReadOnly={isReadOnly}
currentStore={currentStore}
/>
)}
@ -321,6 +343,9 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
isDragStarted={isDragStarted}
quickAddCallback={quickAddCallback}
viewId={viewId}
disableIssueCreation={disableIssueCreation}
isReadOnly={isReadOnly}
currentStore={currentStore}
/>
)}
@ -346,6 +371,9 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
isDragStarted={isDragStarted}
quickAddCallback={quickAddCallback}
viewId={viewId}
disableIssueCreation={disableIssueCreation}
isReadOnly={isReadOnly}
currentStore={currentStore}
/>
)}
@ -371,6 +399,9 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
isDragStarted={isDragStarted}
quickAddCallback={quickAddCallback}
viewId={viewId}
disableIssueCreation={disableIssueCreation}
isReadOnly={isReadOnly}
currentStore={currentStore}
/>
)}
@ -396,6 +427,9 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
isDragStarted={isDragStarted}
quickAddCallback={quickAddCallback}
viewId={viewId}
disableIssueCreation={disableIssueCreation}
isReadOnly={isReadOnly}
currentStore={currentStore}
/>
)}
</div>

7
web/components/issues/issue-layouts/kanban/headers/assignee.tsx
View File

@ -5,6 +5,7 @@ import { HeaderGroupByCard } from "./group-by-card";
import { HeaderSubGroupByCard } from "./sub-group-by-card";
// ui
import { Avatar } from "@plane/ui";
import { EProjectStore } from "store/command-palette.store";
export interface IAssigneesHeader {
column_id: string;
@ -15,6 +16,8 @@ export interface IAssigneesHeader {
issues_count: number;
kanBanToggle: any;
handleKanBanToggle: any;
disableIssueCreation?: boolean;
currentStore?: EProjectStore;
}
export const Icon = ({ user }: any) => <Avatar name={user.display_name} src={user.avatar} size="base" />;
@ -29,6 +32,8 @@ export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
issues_count,
kanBanToggle,
handleKanBanToggle,
disableIssueCreation,
currentStore,
} = props;
const assignee = column_value ?? null;
@ -56,6 +61,8 @@ export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
issuePayload={{ assignees: [assignee?.id] }}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
))}
</>

7
web/components/issues/issue-layouts/kanban/headers/created_by.tsx
View File

@ -4,6 +4,7 @@ import { observer } from "mobx-react-lite";
import { HeaderGroupByCard } from "./group-by-card";
import { HeaderSubGroupByCard } from "./sub-group-by-card";
import { Icon } from "./assignee";
import { EProjectStore } from "store/command-palette.store";
export interface ICreatedByHeader {
column_id: string;
@ -14,6 +15,8 @@ export interface ICreatedByHeader {
issues_count: number;
kanBanToggle: any;
handleKanBanToggle: any;
disableIssueCreation?: boolean;
currentStore?: EProjectStore;
}
export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
@ -26,6 +29,8 @@ export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
issues_count,
kanBanToggle,
handleKanBanToggle,
disableIssueCreation,
currentStore,
} = props;
const createdBy = column_value ?? null;
@ -53,6 +58,8 @@ export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
issuePayload={{ created_by: createdBy?.id }}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
))}
</>

28
web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
View File

@ -15,6 +15,7 @@ import useToast from "hooks/use-toast";
import { observer } from "mobx-react-lite";
// types
import { IIssue, ISearchIssueResponse } from "types";
import { EProjectStore } from "store/command-palette.store";
interface IHeaderGroupByCard {
sub_group_by: string | null;
@ -26,13 +27,26 @@ interface IHeaderGroupByCard {
kanBanToggle: any;
handleKanBanToggle: any;
issuePayload: Partial<IIssue>;
disableIssueCreation?: boolean;
currentStore?: EProjectStore;
}
const moduleService = new ModuleService();
const issueService = new IssueService();
export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
const { sub_group_by, column_id, icon, title, count, kanBanToggle, handleKanBanToggle, issuePayload } = props;
const {
sub_group_by,
column_id,
icon,
title,
count,
kanBanToggle,
handleKanBanToggle,
issuePayload,
disableIssueCreation,
currentStore,
} = props;
const verticalAlignPosition = kanBanToggle?.groupByHeaderMinMax.includes(column_id);
const [isOpen, setIsOpen] = React.useState(false);
@ -84,7 +98,12 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
return (
<>
<CreateUpdateIssueModal isOpen={isOpen} handleClose={() => setIsOpen(false)} prePopulateData={issuePayload} />
<CreateUpdateIssueModal
isOpen={isOpen}
handleClose={() => setIsOpen(false)}
prePopulateData={issuePayload}
currentStore={currentStore}
/>
{renderExistingIssueModal && (
<ExistingIssuesListModal
isOpen={openExistingIssueListModal}
@ -126,7 +145,8 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
</div>
)}
{renderExistingIssueModal ? (
{!disableIssueCreation &&
(renderExistingIssueModal ? (
<CustomMenu
width="auto"
customButton={
@ -149,7 +169,7 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
>
<Plus width={14} strokeWidth={2} />
</div>
)}
))}
</div>
</>
);

29
web/components/issues/issue-layouts/kanban/headers/group-by-root.tsx
View File

@ -8,6 +8,7 @@ import { LabelHeader } from "./label";
import { CreatedByHeader } from "./created_by";
// mobx
import { observer } from "mobx-react-lite";
import { EProjectStore } from "store/command-palette.store";
export interface IKanBanGroupByHeaderRoot {
column_id: string;
@ -17,10 +18,22 @@ export interface IKanBanGroupByHeaderRoot {
issues_count: number;
kanBanToggle: any;
handleKanBanToggle: any;
disableIssueCreation?: boolean;
currentStore?: EProjectStore;
}
export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = observer(
({ column_id, column_value, sub_group_by, group_by, issues_count, kanBanToggle, handleKanBanToggle }) => (
({
column_id,
column_value,
sub_group_by,
group_by,
issues_count,
kanBanToggle,
disableIssueCreation,
handleKanBanToggle,
currentStore,
}) => (
<>
{group_by && group_by === "project" && (
<ProjectHeader
@ -32,6 +45,8 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
issues_count={issues_count}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
@ -45,6 +60,8 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
issues_count={issues_count}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
{group_by && group_by === "state_detail.group" && (
@ -57,6 +74,8 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
issues_count={issues_count}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
{group_by && group_by === "priority" && (
@ -69,6 +88,8 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
issues_count={issues_count}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
{group_by && group_by === "labels" && (
@ -81,6 +102,8 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
issues_count={issues_count}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
{group_by && group_by === "assignees" && (
@ -93,6 +116,8 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
issues_count={issues_count}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
{group_by && group_by === "created_by" && (
@ -105,6 +130,8 @@ export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = obser
issues_count={issues_count}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
</>

7
web/components/issues/issue-layouts/kanban/headers/label.tsx
View File

@ -3,6 +3,7 @@ import { observer } from "mobx-react-lite";
// components
import { HeaderGroupByCard } from "./group-by-card";
import { HeaderSubGroupByCard } from "./sub-group-by-card";
import { EProjectStore } from "store/command-palette.store";
export interface ILabelHeader {
column_id: string;
@ -13,6 +14,8 @@ export interface ILabelHeader {
issues_count: number;
kanBanToggle: any;
handleKanBanToggle: any;
disableIssueCreation?: boolean;
currentStore?: EProjectStore;
}
const Icon = ({ color }: any) => (
@ -29,6 +32,8 @@ export const LabelHeader: FC<ILabelHeader> = observer((props) => {
issues_count,
kanBanToggle,
handleKanBanToggle,
disableIssueCreation,
currentStore,
} = props;
const label = column_value ?? null;
@ -56,6 +61,8 @@ export const LabelHeader: FC<ILabelHeader> = observer((props) => {
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
issuePayload={{ labels: [label?.id] }}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
))}
</>

7
web/components/issues/issue-layouts/kanban/headers/priority.tsx
View File

@ -7,6 +7,7 @@ import { HeaderSubGroupByCard } from "./sub-group-by-card";
// Icons
import { PriorityIcon } from "@plane/ui";
import { EProjectStore } from "store/command-palette.store";
export interface IPriorityHeader {
column_id: string;
@ -17,6 +18,8 @@ export interface IPriorityHeader {
issues_count: number;
kanBanToggle: any;
handleKanBanToggle: any;
disableIssueCreation?: boolean;
currentStore?: EProjectStore;
}
export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
@ -29,6 +32,8 @@ export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
issues_count,
kanBanToggle,
handleKanBanToggle,
disableIssueCreation,
currentStore,
} = props;
const priority = column_value || null;
@ -56,6 +61,8 @@ export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
issuePayload={{ priority: priority?.key }}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
))}
</>

7
web/components/issues/issue-layouts/kanban/headers/project.tsx
View File

@ -5,6 +5,7 @@ import { HeaderGroupByCard } from "./group-by-card";
import { HeaderSubGroupByCard } from "./sub-group-by-card";
// emoji helper
import { renderEmoji } from "helpers/emoji.helper";
import { EProjectStore } from "store/command-palette.store";
export interface IProjectHeader {
column_id: string;
@ -15,6 +16,8 @@ export interface IProjectHeader {
issues_count: number;
kanBanToggle: any;
handleKanBanToggle: any;
disableIssueCreation?: boolean;
currentStore?: EProjectStore;
}
const Icon = ({ emoji }: any) => <div className="w-6 h-6">{renderEmoji(emoji)}</div>;
@ -29,6 +32,8 @@ export const ProjectHeader: FC<IProjectHeader> = observer((props) => {
issues_count,
kanBanToggle,
handleKanBanToggle,
disableIssueCreation,
currentStore,
} = props;
const project = column_value ?? null;
@ -56,6 +61,8 @@ export const ProjectHeader: FC<IProjectHeader> = observer((props) => {
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
issuePayload={{ project: project?.id }}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
))}
</>

7
web/components/issues/issue-layouts/kanban/headers/state-group.tsx
View File

@ -4,6 +4,7 @@ import { observer } from "mobx-react-lite";
import { HeaderGroupByCard } from "./group-by-card";
import { HeaderSubGroupByCard } from "./sub-group-by-card";
import { StateGroupIcon } from "@plane/ui";
import { EProjectStore } from "store/command-palette.store";
export interface IStateGroupHeader {
column_id: string;
@ -14,6 +15,8 @@ export interface IStateGroupHeader {
issues_count: number;
kanBanToggle: any;
handleKanBanToggle: any;
disableIssueCreation?: boolean;
currentStore?: EProjectStore;
}
export const Icon = ({ stateGroup, color }: { stateGroup: any; color?: any }) => (
@ -32,6 +35,8 @@ export const StateGroupHeader: FC<IStateGroupHeader> = observer((props) => {
issues_count,
kanBanToggle,
handleKanBanToggle,
disableIssueCreation,
currentStore,
} = props;
const stateGroup = column_value || null;
@ -59,6 +64,8 @@ export const StateGroupHeader: FC<IStateGroupHeader> = observer((props) => {
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
issuePayload={{}}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
))}
</>

7
web/components/issues/issue-layouts/kanban/headers/state.tsx
View File

@ -4,6 +4,7 @@ import { observer } from "mobx-react-lite";
import { HeaderGroupByCard } from "./group-by-card";
import { HeaderSubGroupByCard } from "./sub-group-by-card";
import { Icon } from "./state-group";
import { EProjectStore } from "store/command-palette.store";
export interface IStateHeader {
column_id: string;
@ -14,6 +15,8 @@ export interface IStateHeader {
issues_count: number;
kanBanToggle: any;
handleKanBanToggle: any;
disableIssueCreation?: boolean;
currentStore?: EProjectStore;
}
export const StateHeader: FC<IStateHeader> = observer((props) => {
@ -26,6 +29,8 @@ export const StateHeader: FC<IStateHeader> = observer((props) => {
issues_count,
kanBanToggle,
handleKanBanToggle,
disableIssueCreation,
currentStore,
} = props;
const state = column_value ?? null;
@ -53,6 +58,8 @@ export const StateHeader: FC<IStateHeader> = observer((props) => {
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
issuePayload={{ state: state?.id }}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
))}
</>

27
web/components/issues/issue-layouts/kanban/headers/sub-group-by-root.tsx
View File

@ -7,6 +7,7 @@ import { AssigneesHeader } from "./assignee";
import { PriorityHeader } from "./priority";
import { LabelHeader } from "./label";
import { CreatedByHeader } from "./created_by";
import { EProjectStore } from "store/command-palette.store";
export interface IKanBanSubGroupByHeaderRoot {
column_id: string;
@ -16,10 +17,22 @@ export interface IKanBanSubGroupByHeaderRoot {
issues_count: number;
kanBanToggle: any;
handleKanBanToggle: any;
disableIssueCreation?: boolean;
currentStore?: EProjectStore;
}
export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> = observer((props) => {
const { column_id, column_value, sub_group_by, group_by, issues_count, kanBanToggle, handleKanBanToggle } = props;
const {
column_id,
column_value,
sub_group_by,
group_by,
issues_count,
kanBanToggle,
handleKanBanToggle,
disableIssueCreation,
currentStore,
} = props;
return (
<>
@ -33,6 +46,8 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
issues_count={issues_count}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
{sub_group_by && sub_group_by === "state_detail.group" && (
@ -45,6 +60,8 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
issues_count={issues_count}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
{sub_group_by && sub_group_by === "priority" && (
@ -57,6 +74,8 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
issues_count={issues_count}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
{sub_group_by && sub_group_by === "labels" && (
@ -69,6 +88,8 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
issues_count={issues_count}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
{sub_group_by && sub_group_by === "assignees" && (
@ -81,6 +102,8 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
issues_count={issues_count}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
{sub_group_by && sub_group_by === "created_by" && (
@ -93,6 +116,8 @@ export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> =
issues_count={issues_count}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
</>

17
web/components/issues/issue-layouts/kanban/properties.tsx
View File

@ -19,10 +19,11 @@ export interface IKanBanProperties {
handleIssues: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => void;
displayProperties: IIssueDisplayProperties | null;
showEmptyGroup: boolean;
isReadOnly: boolean;
}
export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) => {
const { sub_group_id, columnId: group_id, issue, handleIssues, displayProperties, showEmptyGroup } = props;
const { sub_group_id, columnId: group_id, issue, handleIssues, displayProperties, isReadOnly } = props;
const handleState = (state: IState) => {
handleIssues(
@ -89,7 +90,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
projectId={issue?.project_detail?.id || null}
value={issue?.state || null}
onChange={handleState}
disabled={false}
disabled={isReadOnly}
hideDropdownArrow
/>
)}
@ -99,7 +100,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
<IssuePropertyPriority
value={issue?.priority || null}
onChange={handlePriority}
disabled={false}
disabled={isReadOnly}
hideDropdownArrow
/>
)}
@ -110,7 +111,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
projectId={issue?.project_detail?.id || null}
value={issue?.labels || null}
onChange={handleLabel}
disabled={false}
disabled={isReadOnly}
hideDropdownArrow
/>
)}
@ -120,7 +121,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
<IssuePropertyDate
value={issue?.start_date || null}
onChange={(date: string) => handleStartDate(date)}
disabled={false}
disabled={isReadOnly}
placeHolder="Start date"
/>
)}
@ -130,7 +131,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
<IssuePropertyDate
value={issue?.target_date || null}
onChange={(date: string) => handleTargetDate(date)}
disabled={false}
disabled={isReadOnly}
placeHolder="Target date"
/>
)}
@ -142,7 +143,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
value={issue?.assignees || null}
hideDropdownArrow
onChange={handleAssignee}
disabled={false}
disabled={isReadOnly}
multiple
/>
)}
@ -153,7 +154,7 @@ export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) =>
projectId={issue?.project_detail?.id || null}
value={issue?.estimate_point || null}
onChange={handleEstimate}
disabled={false}
disabled={isReadOnly}
hideDropdownArrow
/>
)}

9
web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
View File

@ -10,6 +10,7 @@ import { IIssue } from "types";
import { EIssueActions } from "../../types";
// components
import { BaseKanBanRoot } from "../base-kanban-root";
import { EProjectStore } from "store/command-palette.store";
export interface ICycleKanBanLayout {}
@ -18,7 +19,11 @@ export const CycleKanBanLayout: React.FC = observer(() => {
const { workspaceSlug, cycleId } = router.query as { workspaceSlug: string; cycleId: string };
// store
const { cycleIssues: cycleIssueStore, cycleIssueKanBanView: cycleIssueKanBanViewStore } = useMobxStore();
const {
cycleIssues: cycleIssueStore,
cycleIssuesFilter: cycleIssueFilterStore,
cycleIssueKanBanView: cycleIssueKanBanViewStore,
} = useMobxStore();
const issueActions = {
[EIssueActions.UPDATE]: async (issue: IIssue) => {
@ -39,10 +44,12 @@ export const CycleKanBanLayout: React.FC = observer(() => {
<BaseKanBanRoot
issueActions={issueActions}
issueStore={cycleIssueStore}
issuesFilterStore={cycleIssueFilterStore}
kanbanViewStore={cycleIssueKanBanViewStore}
showLoader={true}
QuickActions={CycleIssueQuickActions}
viewId={cycleId}
currentStore={EProjectStore.CYCLE}
/>
);
});

48
web/components/issues/issue-layouts/kanban/roots/draft-issue-root.tsx Normal file
View File

@ -0,0 +1,48 @@
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { ProjectIssueQuickActions } from "components/issues";
// types
import { IIssue } from "types";
// constants
import { EIssueActions } from "../../types";
import { BaseKanBanRoot } from "../base-kanban-root";
export interface IKanBanLayout {}
export const DraftKanBanLayout: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug } = router.query as { workspaceSlug: string };
const {
projectDraftIssues: issueStore,
projectDraftIssuesFilter: projectIssuesFilterStore,
issueKanBanView: issueKanBanViewStore,
} = useMobxStore();
const issueActions = {
[EIssueActions.UPDATE]: async (issue: IIssue) => {
if (!workspaceSlug) return;
await issueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue);
},
[EIssueActions.DELETE]: async (issue: IIssue) => {
if (!workspaceSlug) return;
await issueStore.removeIssue(workspaceSlug, issue.project, issue.id);
},
};
return (
<BaseKanBanRoot
issueActions={issueActions}
issuesFilterStore={projectIssuesFilterStore}
issueStore={issueStore}
kanbanViewStore={issueKanBanViewStore}
showLoader={true}
QuickActions={ProjectIssueQuickActions}
/>
);
});

7
web/components/issues/issue-layouts/kanban/roots/module-root.tsx
View File

@ -10,6 +10,7 @@ import { IIssue } from "types";
// constants
import { EIssueActions } from "../../types";
import { BaseKanBanRoot } from "../base-kanban-root";
import { EProjectStore } from "store/command-palette.store";
export interface IModuleKanBanLayout {}
@ -20,8 +21,8 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
// store
const {
moduleIssues: moduleIssueStore,
moduleIssuesFilter: moduleIssueFilterStore,
moduleIssueKanBanView: moduleIssueKanBanViewStore,
issueDetail: issueDetailStore,
} = useMobxStore();
// const handleIssues = useCallback(
@ -58,17 +59,19 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
},
[EIssueActions.REMOVE]: async (issue: IIssue) => {
if (!workspaceSlug || !moduleId || !issue.bridge_id) return;
moduleIssueStore.removeIssueFromModule(workspaceSlug, issue.project, issue.id, moduleId, issue.bridge_id);
moduleIssueStore.removeIssueFromModule(workspaceSlug, issue.project, moduleId, issue.id, issue.bridge_id);
},
};
return (
<BaseKanBanRoot
issueActions={issueActions}
issueStore={moduleIssueStore}
issuesFilterStore={moduleIssueFilterStore}
kanbanViewStore={moduleIssueKanBanViewStore}
showLoader={true}
QuickActions={ModuleIssueQuickActions}
viewId={moduleId}
currentStore={EProjectStore.MODULE}
/>
);
});

166
web/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx
View File

@ -1,166 +1,48 @@
import { FC, useCallback, useState } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { DragDropContext } from "@hello-pangea/dnd";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { KanBanSwimLanes } from "../swimlanes";
import { KanBan } from "../default";
import { ProjectIssueQuickActions } from "components/issues";
import { Spinner } from "@plane/ui";
// constants
import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
// types
import { IIssue } from "types";
// constants
import { EIssueActions } from "../../types";
import { BaseKanBanRoot } from "../base-kanban-root";
import { EProjectStore } from "store/command-palette.store";
export interface IProfileIssuesKanBanLayout {}
export const ProfileIssuesKanBanLayout: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, userId } = router.query as { workspaceSlug: string; userId: string };
export const ProfileIssuesKanBanLayout: FC = observer(() => {
const {
workspace: workspaceStore,
project: projectStore,
projectMember: { projectMembers },
projectState: projectStateStore,
profileIssues: profileIssuesStore,
profileIssueFilters: profileIssueFiltersStore,
workspaceProfileIssues: profileIssuesStore,
workspaceProfileIssuesFilter: profileIssueFiltersStore,
issueKanBanView: issueKanBanViewStore,
issueDetail: issueDetailStore,
} = useMobxStore();
const router = useRouter();
const { workspaceSlug } = router.query;
const issueActions = {
[EIssueActions.UPDATE]: async (issue: IIssue) => {
if (!workspaceSlug || !userId) return;
const issues = profileIssuesStore?.getIssues;
const sub_group_by: string | null = profileIssueFiltersStore?.userDisplayFilters?.sub_group_by || null;
const group_by: string | null = profileIssueFiltersStore?.userDisplayFilters?.group_by || null;
const order_by: string | null = profileIssueFiltersStore?.userDisplayFilters?.order_by || null;
const userDisplayFilters = profileIssueFiltersStore?.userDisplayFilters || null;
const displayProperties = profileIssueFiltersStore?.userDisplayProperties || null;
const currentKanBanView: "swimlanes" | "default" = profileIssueFiltersStore?.userDisplayFilters?.sub_group_by
? "swimlanes"
: "default";
const [isDragStarted, setIsDragStarted] = useState<boolean>(false);
// const onDragStart = () => {
// setIsDragStarted(true);
// };
const onDragEnd = (result: any) => {
setIsDragStarted(false);
if (!result) return;
if (
result.destination &&
result.source &&
result.destination.droppableId === result.source.droppableId &&
result.destination.index === result.source.index
)
return;
currentKanBanView === "default"
? issueKanBanViewStore?.handleDragDrop(result.source, result.destination)
: issueKanBanViewStore?.handleSwimlaneDragDrop(result.source, result.destination);
};
const handleIssues = useCallback(
(sub_group_by: string | null, group_by: string | null, issue: IIssue, action: EIssueActions) => {
if (!workspaceSlug) return;
if (action === EIssueActions.UPDATE) {
profileIssuesStore.updateIssueStructure(group_by, sub_group_by, issue);
issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
}
if (action === EIssueActions.DELETE) profileIssuesStore.deleteIssue(group_by, sub_group_by, issue);
await profileIssuesStore.updateIssue(workspaceSlug, userId, issue.id, issue);
},
[profileIssuesStore, issueDetailStore, workspaceSlug]
);
[EIssueActions.DELETE]: async (issue: IIssue) => {
if (!workspaceSlug || !userId) return;
const handleKanBanToggle = (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => {
issueKanBanViewStore.handleKanBanToggle(toggle, value);
await profileIssuesStore.removeIssue(workspaceSlug, userId, issue.project, issue.id);
},
};
const states = projectStateStore?.projectStates || null;
const priorities = ISSUE_PRIORITIES || null;
const labels = workspaceStore.workspaceLabels || null;
const stateGroups = ISSUE_STATE_GROUPS || null;
const projects = projectStore?.workspaceProjects || null;
return (
<>
{profileIssuesStore.loader ? (
<div className="w-full h-full flex justify-center items-center">
<Spinner />
</div>
) : (
<div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
<DragDropContext onDragEnd={onDragEnd}>
{currentKanBanView === "default" ? (
<KanBan
issues={{}}
issueIds={[]}
sub_group_by={sub_group_by}
group_by={group_by}
order_by={order_by}
handleIssues={handleIssues}
quickActions={(sub_group_by, group_by, issue) => (
<ProjectIssueQuickActions
issue={issue}
handleDelete={async () => handleIssues(sub_group_by, group_by, issue, EIssueActions.DELETE)}
handleUpdate={async (data) => handleIssues(sub_group_by, group_by, data, EIssueActions.UPDATE)}
<BaseKanBanRoot
issueActions={issueActions}
issuesFilterStore={profileIssueFiltersStore}
issueStore={profileIssuesStore}
kanbanViewStore={issueKanBanViewStore}
showLoader={true}
QuickActions={ProjectIssueQuickActions}
currentStore={EProjectStore.PROFILE}
/>
)}
displayProperties={displayProperties}
kanBanToggle={issueKanBanViewStore?.kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
states={states}
stateGroups={stateGroups}
priorities={priorities}
labels={labels}
members={projectMembers?.map((m) => m.member) ?? null}
projects={projects}
showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
isDragStarted={isDragStarted}
/>
) : (
<KanBanSwimLanes
issues={{}}
issueIds={[]}
sub_group_by={sub_group_by}
group_by={group_by}
order_by={order_by}
handleIssues={handleIssues}
quickActions={(sub_group_by, group_by, issue) => (
<ProjectIssueQuickActions
issue={issue}
handleDelete={async () => handleIssues(sub_group_by, group_by, issue, EIssueActions.DELETE)}
handleUpdate={async (data) => handleIssues(sub_group_by, group_by, data, EIssueActions.UPDATE)}
/>
)}
displayProperties={displayProperties}
kanBanToggle={issueKanBanViewStore?.kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
states={states}
stateGroups={stateGroups}
priorities={priorities}
labels={labels}
members={projectMembers?.map((m) => m.member) ?? null}
projects={projects}
showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
isDragStarted={isDragStarted}
/>
)}
</DragDropContext>
</div>
)}
</>
);
});

9
web/components/issues/issue-layouts/kanban/roots/project-root.tsx
View File

@ -9,6 +9,7 @@ import { IIssue } from "types";
// constants
import { EIssueActions } from "../../types";
import { BaseKanBanRoot } from "../base-kanban-root";
import { EProjectStore } from "store/command-palette.store";
export interface IKanBanLayout {}
@ -18,30 +19,32 @@ export const KanBanLayout: React.FC = observer(() => {
const {
projectIssues: issueStore,
projectIssuesFilter: issuesFilterStore,
issueKanBanView: issueKanBanViewStore,
issueDetail: issueDetailStore,
} = useMobxStore();
const issueActions = {
[EIssueActions.UPDATE]: async (issue: IIssue) => {
if (!workspaceSlug) return;
await issueDetailStore.updateIssue(workspaceSlug, issue.project, issue.id, issue);
await issueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue);
},
[EIssueActions.DELETE]: async (issue: IIssue) => {
if (!workspaceSlug) return;
await issueDetailStore.deleteIssue(workspaceSlug, issue.project, issue.id);
await issueStore.removeIssue(workspaceSlug, issue.project, issue.id);
},
};
return (
<BaseKanBanRoot
issueActions={issueActions}
issuesFilterStore={issuesFilterStore}
issueStore={issueStore}
kanbanViewStore={issueKanBanViewStore}
showLoader={true}
QuickActions={ProjectIssueQuickActions}
currentStore={EProjectStore.PROJECT}
/>
);
});

9
web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx
View File

@ -9,6 +9,7 @@ import { EIssueActions } from "../../types";
import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
// components
import { BaseKanBanRoot } from "../base-kanban-root";
import { EProjectStore } from "store/command-palette.store";
export interface IViewKanBanLayout {}
@ -18,30 +19,32 @@ export const ProjectViewKanBanLayout: React.FC = observer(() => {
const {
viewIssues: projectViewIssuesStore,
viewIssuesFilter: projectIssueViewFiltersStore,
issueKanBanView: projectViewIssueKanBanViewStore,
issueDetail: issueDetailStore,
} = useMobxStore();
const issueActions = {
[EIssueActions.UPDATE]: async (issue: IIssue) => {
if (!workspaceSlug) return;
await issueDetailStore.updateIssue(workspaceSlug, issue.project, issue.id, issue);
await projectViewIssuesStore.updateIssue(workspaceSlug, issue.project, issue.id, issue);
},
[EIssueActions.DELETE]: async (issue: IIssue) => {
if (!workspaceSlug) return;
await issueDetailStore.deleteIssue(workspaceSlug, issue.project, issue.id);
await projectViewIssuesStore.removeIssue(workspaceSlug, issue.project, issue.id);
},
};
return (
<BaseKanBanRoot
issueActions={issueActions}
issuesFilterStore={projectIssueViewFiltersStore}
issueStore={projectViewIssuesStore}
kanbanViewStore={projectViewIssueKanBanViewStore}
showLoader={true}
QuickActions={ProjectIssueQuickActions}
currentStore={EProjectStore.PROJECT_VIEW}
/>
);
});

64
web/components/issues/issue-layouts/kanban/swimlanes.tsx
View File

@ -10,6 +10,7 @@ import { IIssueResponse, IGroupedIssues, ISubGroupedIssues, TUnGroupedIssues } f
// constants
import { getValueFromObject } from "constants/issue";
import { EIssueActions } from "../types";
import { EProjectStore } from "store/command-palette.store";
interface ISubGroupSwimlaneHeader {
issues: IIssueResponse;
@ -20,9 +21,10 @@ interface ISubGroupSwimlaneHeader {
listKey: string;
kanBanToggle: any;
handleKanBanToggle: any;
disableIssueCreation?: boolean;
currentStore?: EProjectStore;
}
const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
issues,
issueIds,
sub_group_by,
group_by,
@ -30,6 +32,8 @@ const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
listKey,
kanBanToggle,
handleKanBanToggle,
disableIssueCreation,
currentStore,
}) => {
const calculateIssueCount = (column_id: string) => {
let issueCount = 0;
@ -54,6 +58,8 @@ const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
issues_count={calculateIssueCount(getValueFromObject(_list, listKey) as string)}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
</div>
))}
@ -78,6 +84,10 @@ interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
kanBanToggle: any;
handleKanBanToggle: any;
isDragStarted?: boolean;
disableIssueCreation?: boolean;
currentStore?: EProjectStore;
enableQuickIssueCreate: boolean;
isReadOnly: boolean;
}
const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
const {
@ -101,6 +111,9 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
members,
projects,
isDragStarted,
disableIssueCreation,
enableQuickIssueCreate,
isReadOnly,
} = props;
const calculateIssueCount = (column_id: string) => {
@ -128,6 +141,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
issues_count={calculateIssueCount(getValueFromObject(_list, listKey) as string)}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
/>
</div>
<div className="w-full border-b border-custom-border-400 border-dashed" />
@ -153,8 +167,9 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
labels={labels}
members={members}
projects={projects}
enableQuickIssueCreate
enableQuickIssueCreate={enableQuickIssueCreate}
isDragStarted={isDragStarted}
isReadOnly={isReadOnly}
/>
</div>
)}
@ -183,6 +198,10 @@ export interface IKanBanSwimLanes {
members: IUserLite[] | null;
projects: IProject[] | null;
isDragStarted?: boolean;
disableIssueCreation?: boolean;
currentStore?: EProjectStore;
enableQuickIssueCreate: boolean;
isReadOnly: boolean;
}
export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
@ -205,6 +224,10 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
members,
projects,
isDragStarted,
disableIssueCreation,
enableQuickIssueCreate,
isReadOnly,
currentStore,
} = props;
return (
@ -220,6 +243,8 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
listKey={`id`}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
@ -233,6 +258,8 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
listKey={`id`}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
@ -246,6 +273,8 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
listKey={`key`}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
@ -259,6 +288,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
listKey={`key`}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
currentStore={currentStore}
/>
)}
@ -272,6 +302,8 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
listKey={`id`}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
@ -285,6 +317,8 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
listKey={`id`}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
@ -298,6 +332,8 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
listKey={`id`}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
</div>
@ -324,6 +360,9 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
members={members}
projects={projects}
isDragStarted={isDragStarted}
disableIssueCreation={disableIssueCreation}
enableQuickIssueCreate={enableQuickIssueCreate}
isReadOnly={isReadOnly}
/>
)}
@ -349,6 +388,9 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
members={members}
projects={projects}
isDragStarted={isDragStarted}
disableIssueCreation={disableIssueCreation}
enableQuickIssueCreate={enableQuickIssueCreate}
isReadOnly={isReadOnly}
/>
)}
@ -374,6 +416,9 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
members={members}
projects={projects}
isDragStarted={isDragStarted}
disableIssueCreation={disableIssueCreation}
enableQuickIssueCreate={enableQuickIssueCreate}
isReadOnly={isReadOnly}
/>
)}
@ -399,6 +444,9 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
members={members}
projects={projects}
isDragStarted={isDragStarted}
disableIssueCreation={disableIssueCreation}
enableQuickIssueCreate={enableQuickIssueCreate}
isReadOnly={isReadOnly}
/>
)}
@ -424,6 +472,9 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
members={members}
projects={projects}
isDragStarted={isDragStarted}
disableIssueCreation={disableIssueCreation}
enableQuickIssueCreate={enableQuickIssueCreate}
isReadOnly={isReadOnly}
/>
)}
@ -449,6 +500,9 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
members={members}
projects={projects}
isDragStarted={isDragStarted}
disableIssueCreation={disableIssueCreation}
enableQuickIssueCreate={enableQuickIssueCreate}
isReadOnly={isReadOnly}
/>
)}
@ -474,6 +528,9 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
members={members}
projects={projects}
isDragStarted={isDragStarted}
disableIssueCreation={disableIssueCreation}
enableQuickIssueCreate={enableQuickIssueCreate}
isReadOnly={isReadOnly}
/>
)}
@ -499,6 +556,9 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
members={members}
projects={projects}
isDragStarted={isDragStarted}
disableIssueCreation={disableIssueCreation}
enableQuickIssueCreate={enableQuickIssueCreate}
isReadOnly={isReadOnly}
/>
)}
</div>

36
web/components/issues/issue-layouts/list/base-list-root.tsx
View File

@ -11,6 +11,10 @@ import {
ICycleIssuesStore,
IModuleIssuesFilterStore,
IModuleIssuesStore,
IProfileIssuesFilterStore,
IProfileIssuesStore,
IProjectArchivedIssuesStore,
IProjectDraftIssuesStore,
IProjectIssuesFilterStore,
IProjectIssuesStore,
IViewIssuesFilterStore,
@ -18,6 +22,7 @@ import {
} from "store/issues";
import { observer } from "mobx-react-lite";
import { IIssueResponse } from "store/issues/types";
import { EProjectStore } from "store/command-palette.store";
enum EIssueActions {
UPDATE = "update",
@ -30,8 +35,16 @@ interface IBaseListRoot {
| IProjectIssuesFilterStore
| IModuleIssuesFilterStore
| ICycleIssuesFilterStore
| IViewIssuesFilterStore;
issueStore: IProjectIssuesStore | IModuleIssuesStore | ICycleIssuesStore | IViewIssuesStore;
| IViewIssuesFilterStore
| IProfileIssuesFilterStore;
issueStore:
| IProjectIssuesStore
| IModuleIssuesStore
| ICycleIssuesStore
| IViewIssuesStore
| IProjectArchivedIssuesStore
| IProjectDraftIssuesStore
| IProfileIssuesStore;
QuickActions: FC<IQuickActionProps>;
issueActions: {
[EIssueActions.DELETE]: (group_by: string | null, issue: IIssue) => void;
@ -40,10 +53,11 @@ interface IBaseListRoot {
};
getProjects: (projectStore: IProjectStore) => IProject[] | null;
viewId?: string;
currentStore: EProjectStore;
}
export const BaseListRoot = observer((props: IBaseListRoot) => {
const { issueFilterStore, issueStore, QuickActions, issueActions, getProjects, viewId } = props;
const { issueFilterStore, issueStore, QuickActions, issueActions, getProjects, viewId, currentStore } = props;
const {
project: projectStore,
@ -52,8 +66,10 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
projectLabel: { projectLabels },
} = useMobxStore();
const issueIds = issueStore.getIssuesIds || [];
const issues = issueStore.getIssues;
const issueIds = issueStore?.getIssuesIds || [];
const issues = issueStore?.getIssues;
const { enableInlineEditing, enableQuickAdd, enableIssueCreation } = issueStore?.viewFlags || {};
const displayFilters = issueFilterStore?.issueFilters?.displayFilters;
const group_by = displayFilters?.group_by || null;
@ -75,7 +91,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
return (
<>
{issueStore.loader === "mutation" ? (
{issueStore?.loader === "init-loader" ? (
<div className="w-full h-full flex justify-center items-center">
<Spinner />
</div>
@ -108,10 +124,12 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
projects={projects}
issueIds={issueIds}
showEmptyGroup={showEmptyGroup}
enableIssueQuickAdd={true}
isReadonly={false}
quickAddCallback={issueStore.quickAddIssue}
viewId={viewId}
quickAddCallback={issueStore?.quickAddIssue}
enableIssueQuickAdd={!!enableQuickAdd}
isReadonly={!enableInlineEditing}
disableIssueCreation={!enableIssueCreation}
currentStore={currentStore}
/>
</div>
)}

30
web/components/issues/issue-layouts/list/default.tsx
View File

@ -4,10 +4,11 @@ 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 { IIssueResponse, IGroupedIssues, TUnGroupedIssues, ViewFlags } 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;
@ -29,6 +30,8 @@ export interface IGroupByList {
data: IIssue,
viewId?: string
) => Promise<IIssue | undefined>;
disableIssueCreation?: boolean;
currentStore: EProjectStore;
viewId?: string;
}
@ -49,6 +52,8 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
isReadonly,
quickAddCallback,
viewId,
disableIssueCreation,
currentStore,
} = props;
const prePopulateQuickAddData = (groupByKey: string | null, value: any) => {
@ -84,6 +89,8 @@ const GroupByList: React.FC<IGroupByList> = (props) => {
? issueIds?.length || 0
: issueIds?.[getValueFromObject(_list, listKey) as string]?.length || 0
}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
</div>
@ -138,6 +145,8 @@ export interface IList {
viewId?: string
) => Promise<IIssue | undefined>;
viewId?: string;
disableIssueCreation?: boolean;
currentStore: EProjectStore;
}
export const List: React.FC<IList> = (props) => {
@ -153,13 +162,14 @@ export const List: React.FC<IList> = (props) => {
showEmptyGroup,
enableIssueQuickAdd,
isReadonly,
disableIssueCreation,
states,
stateGroups,
priorities,
labels,
members,
projects,
currentStore,
} = props;
return (
@ -181,6 +191,8 @@ export const List: React.FC<IList> = (props) => {
isReadonly={isReadonly}
quickAddCallback={quickAddCallback}
viewId={viewId}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
@ -200,6 +212,8 @@ export const List: React.FC<IList> = (props) => {
isReadonly={isReadonly}
quickAddCallback={quickAddCallback}
viewId={viewId}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
@ -219,6 +233,8 @@ export const List: React.FC<IList> = (props) => {
isReadonly={isReadonly}
quickAddCallback={quickAddCallback}
viewId={viewId}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
@ -238,6 +254,8 @@ export const List: React.FC<IList> = (props) => {
isReadonly={isReadonly}
quickAddCallback={quickAddCallback}
viewId={viewId}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
@ -257,6 +275,8 @@ export const List: React.FC<IList> = (props) => {
isReadonly={isReadonly}
quickAddCallback={quickAddCallback}
viewId={viewId}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
@ -276,6 +296,8 @@ export const List: React.FC<IList> = (props) => {
isReadonly={isReadonly}
quickAddCallback={quickAddCallback}
viewId={viewId}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
@ -295,6 +317,8 @@ export const List: React.FC<IList> = (props) => {
isReadonly={isReadonly}
quickAddCallback={quickAddCallback}
viewId={viewId}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
@ -314,6 +338,8 @@ export const List: React.FC<IList> = (props) => {
isReadonly={isReadonly}
quickAddCallback={quickAddCallback}
viewId={viewId}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
</div>

7
web/components/issues/issue-layouts/list/headers/assignee.tsx
View File

@ -4,17 +4,20 @@ import { observer } from "mobx-react-lite";
import { HeaderGroupByCard } from "./group-by-card";
// ui
import { Avatar } from "@plane/ui";
import { EProjectStore } from "store/command-palette.store";
export interface IAssigneesHeader {
column_id: string;
column_value: any;
issues_count: number;
disableIssueCreation?: boolean;
currentStore: EProjectStore;
}
export const Icon = ({ user }: any) => <Avatar name={user.display_name} src={user.avatar} size="md" />;
export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
const { column_id, column_value, issues_count } = props;
const { column_value, issues_count, disableIssueCreation, currentStore } = props;
const assignee = column_value ?? null;
@ -26,6 +29,8 @@ export const AssigneesHeader: FC<IAssigneesHeader> = observer((props) => {
title={assignee?.display_name || ""}
count={issues_count}
issuePayload={{ assignees: [assignee?.member?.id] }}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
</>

7
web/components/issues/issue-layouts/list/headers/created-by.tsx
View File

@ -3,15 +3,18 @@ import { observer } from "mobx-react-lite";
// components
import { HeaderGroupByCard } from "./group-by-card";
import { Icon } from "./assignee";
import { EProjectStore } from "store/command-palette.store";
export interface ICreatedByHeader {
column_id: string;
column_value: any;
issues_count: number;
disableIssueCreation?: boolean;
currentStore: EProjectStore;
}
export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
const { column_id, column_value, issues_count } = props;
const { column_value, issues_count, disableIssueCreation, currentStore } = props;
const createdBy = column_value ?? null;
@ -23,6 +26,8 @@ export const CreatedByHeader: FC<ICreatedByHeader> = observer((props) => {
title={createdBy?.display_name || ""}
count={issues_count}
issuePayload={{ created_by: createdBy?.member?.id }}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
</>

15
web/components/issues/issue-layouts/list/headers/empty-group.tsx
View File

@ -1,15 +1,26 @@
import { observer } from "mobx-react-lite";
// components
import { HeaderGroupByCard } from "./group-by-card";
import { EProjectStore } from "store/command-palette.store";
export interface IEmptyHeader {
column_id: string;
column_value: any;
issues_count: number;
disableIssueCreation?: boolean;
currentStore: EProjectStore;
}
export const EmptyHeader: React.FC<IEmptyHeader> = observer((props) => {
const { column_id, column_value, issues_count } = props;
const { column_id, column_value, issues_count, disableIssueCreation, currentStore } = props;
return <HeaderGroupByCard title={column_value?.title || "All Issues"} count={issues_count} issuePayload={{}} />;
return (
<HeaderGroupByCard
title={column_value?.title || "All Issues"}
count={issues_count}
issuePayload={{}}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
);
});

23
web/components/issues/issue-layouts/list/headers/group-by-card.tsx
View File

@ -6,26 +6,26 @@ import { CircleDashed, Plus } from "lucide-react";
import { CreateUpdateIssueModal } from "components/issues/modal";
import { ExistingIssuesListModal } from "components/core";
import { CustomMenu } from "@plane/ui";
// hooks
import useToast from "hooks/use-toast";
// mobx
import { observer } from "mobx-react-lite";
// types
import { IIssue, ISearchIssueResponse } from "types";
import { EProjectStore } from "store/command-palette.store";
interface IHeaderGroupByCard {
icon?: React.ReactNode;
title: string;
count: number;
issuePayload: Partial<IIssue>;
disableIssueCreation?: boolean;
currentStore: EProjectStore;
}
export const HeaderGroupByCard = observer(({ icon, title, count, issuePayload }: IHeaderGroupByCard) => {
export const HeaderGroupByCard = observer(
({ icon, title, count, issuePayload, disableIssueCreation, currentStore }: IHeaderGroupByCard) => {
const router = useRouter();
const { workspaceSlug, projectId, moduleId, cycleId } = router.query;
const { setToastAlert } = useToast();
const [isOpen, setIsOpen] = React.useState(false);
const [openExistingIssueListModal, setOpenExistingIssueListModal] = React.useState(false);
@ -81,7 +81,8 @@ export const HeaderGroupByCard = observer(({ icon, title, count, issuePayload }:
<div className="text-sm font-medium text-custom-text-300 pl-2">{count || 0}</div>
</div>
{renderExistingIssueModal ? (
{!disableIssueCreation &&
(renderExistingIssueModal ? (
<CustomMenu
width="auto"
customButton={
@ -104,15 +105,12 @@ export const HeaderGroupByCard = observer(({ icon, title, count, issuePayload }:
>
<Plus width={14} strokeWidth={2} />
</div>
)}
))}
<CreateUpdateIssueModal
isOpen={isOpen}
handleClose={() => setIsOpen(false)}
handleSubmit={(data: Partial<IIssue>) => {
console.log(data);
return Promise.resolve();
}}
currentStore={currentStore}
prePopulateData={issuePayload}
/>
@ -127,4 +125,5 @@ export const HeaderGroupByCard = observer(({ icon, title, count, issuePayload }:
</div>
</>
);
});
}
);

69
web/components/issues/issue-layouts/list/headers/group-by-root.tsx
View File

@ -9,43 +9,94 @@ import { LabelHeader } from "./label";
import { CreatedByHeader } from "./created-by";
// mobx
import { observer } from "mobx-react-lite";
import { EProjectStore } from "store/command-palette.store";
export interface IListGroupByHeaderRoot {
column_id: string;
column_value: any;
group_by: string | null;
issues_count: number;
disableIssueCreation?: boolean;
currentStore: EProjectStore;
}
export const ListGroupByHeaderRoot: React.FC<IListGroupByHeaderRoot> = observer((props) => {
const { column_id, column_value, group_by, issues_count } = props;
const { column_id, column_value, group_by, issues_count, disableIssueCreation, currentStore } = props;
return (
<>
{!group_by && group_by === null && (
<EmptyHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
<EmptyHeader
column_id={column_id}
column_value={column_value}
issues_count={issues_count}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
{group_by && group_by === "project" && (
<ProjectHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
<ProjectHeader
column_id={column_id}
column_value={column_value}
issues_count={issues_count}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
{group_by && group_by === "state" && (
<StateHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
<StateHeader
column_id={column_id}
column_value={column_value}
issues_count={issues_count}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
{group_by && group_by === "state_detail.group" && (
<StateGroupHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
<StateGroupHeader
column_id={column_id}
column_value={column_value}
issues_count={issues_count}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
{group_by && group_by === "priority" && (
<PriorityHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
<PriorityHeader
column_id={column_id}
column_value={column_value}
issues_count={issues_count}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
{group_by && group_by === "labels" && (
<LabelHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
<LabelHeader
column_id={column_id}
column_value={column_value}
issues_count={issues_count}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
{group_by && group_by === "assignees" && (
<AssigneesHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
<AssigneesHeader
column_id={column_id}
column_value={column_value}
issues_count={issues_count}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
{group_by && group_by === "created_by" && (
<CreatedByHeader column_id={column_id} column_value={column_value} issues_count={issues_count} />
<CreatedByHeader
column_id={column_id}
column_value={column_value}
issues_count={issues_count}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
</>
);

7
web/components/issues/issue-layouts/list/headers/label.tsx
View File

@ -2,11 +2,14 @@ import { FC } from "react";
import { observer } from "mobx-react-lite";
// components
import { HeaderGroupByCard } from "./group-by-card";
import { EProjectStore } from "store/command-palette.store";
export interface ILabelHeader {
column_id: string;
column_value: any;
issues_count: number;
disableIssueCreation?: boolean;
currentStore: EProjectStore;
}
const Icon = ({ color }: any) => (
@ -14,7 +17,7 @@ const Icon = ({ color }: any) => (
);
export const LabelHeader: FC<ILabelHeader> = observer((props) => {
const { column_id, column_value, issues_count } = props;
const { column_value, issues_count, disableIssueCreation, currentStore } = props;
const label = column_value ?? null;
@ -26,6 +29,8 @@ export const LabelHeader: FC<ILabelHeader> = observer((props) => {
title={column_value?.name || ""}
count={issues_count}
issuePayload={{ labels: [label.id] }}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
</>

7
web/components/issues/issue-layouts/list/headers/priority.tsx
View File

@ -3,11 +3,14 @@ import { observer } from "mobx-react-lite";
import { AlertCircle, SignalHigh, SignalMedium, SignalLow, Ban } from "lucide-react";
// components
import { HeaderGroupByCard } from "./group-by-card";
import { EProjectStore } from "store/command-palette.store";
export interface IPriorityHeader {
column_id: string;
column_value: any;
issues_count: number;
disableIssueCreation?: boolean;
currentStore: EProjectStore;
}
const Icon = ({ priority }: any) => (
@ -37,7 +40,7 @@ const Icon = ({ priority }: any) => (
);
export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
const { column_id, column_value, issues_count } = props;
const { column_id, column_value, issues_count, disableIssueCreation, currentStore } = props;
const priority = column_value ?? null;
@ -49,6 +52,8 @@ export const PriorityHeader: FC<IPriorityHeader> = observer((props) => {
title={priority?.title || ""}
count={issues_count}
issuePayload={{ priority: priority?.key }}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
</>

7
web/components/issues/issue-layouts/list/headers/project.tsx
View File

@ -4,17 +4,20 @@ import { observer } from "mobx-react-lite";
import { HeaderGroupByCard } from "./group-by-card";
// emoji helper
import { renderEmoji } from "helpers/emoji.helper";
import { EProjectStore } from "store/command-palette.store";
export interface IProjectHeader {
column_id: string;
column_value: any;
issues_count: number;
disableIssueCreation?: boolean;
currentStore: EProjectStore;
}
const Icon = ({ emoji }: any) => <div className="w-6 h-6">{renderEmoji(emoji)}</div>;
export const ProjectHeader: FC<IProjectHeader> = observer((props) => {
const { column_id, column_value, issues_count } = props;
const { column_value, issues_count, disableIssueCreation, currentStore } = props;
const project = column_value ?? null;
@ -26,6 +29,8 @@ export const ProjectHeader: FC<IProjectHeader> = observer((props) => {
title={project?.name || ""}
count={issues_count}
issuePayload={{ project: project?.id ?? "" }}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
</>

7
web/components/issues/issue-layouts/list/headers/state-group.tsx
View File

@ -6,11 +6,14 @@ import { HeaderGroupByCard } from "./group-by-card";
import { StateGroupIcon } from "@plane/ui";
// helpers
import { capitalizeFirstLetter } from "helpers/string.helper";
import { EProjectStore } from "store/command-palette.store";
export interface IStateGroupHeader {
column_id: string;
column_value: any;
issues_count: number;
disableIssueCreation?: boolean;
currentStore: EProjectStore;
}
export const Icon = ({ stateGroup, color }: { stateGroup: any; color?: any }) => (
@ -20,7 +23,7 @@ export const Icon = ({ stateGroup, color }: { stateGroup: any; color?: any }) =>
);
export const StateGroupHeader: FC<IStateGroupHeader> = observer((props) => {
const { column_id, column_value, issues_count } = props;
const { column_value, issues_count, disableIssueCreation, currentStore } = props;
const stateGroup = column_value ?? null;
@ -32,6 +35,8 @@ export const StateGroupHeader: FC<IStateGroupHeader> = observer((props) => {
title={capitalizeFirstLetter(stateGroup?.key) || ""}
count={issues_count}
issuePayload={{}}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
</>

7
web/components/issues/issue-layouts/list/headers/state.tsx
View File

@ -3,15 +3,18 @@ import { observer } from "mobx-react-lite";
// components
import { HeaderGroupByCard } from "./group-by-card";
import { Icon } from "./state-group";
import { EProjectStore } from "store/command-palette.store";
export interface IStateHeader {
column_id: string;
column_value: any;
issues_count: number;
disableIssueCreation?: boolean;
currentStore: EProjectStore;
}
export const StateHeader: FC<IStateHeader> = observer((props) => {
const { column_id, column_value, issues_count } = props;
const { column_value, issues_count, disableIssueCreation, currentStore } = props;
const state = column_value ?? null;
@ -23,6 +26,8 @@ export const StateHeader: FC<IStateHeader> = observer((props) => {
title={state?.name || ""}
count={issues_count}
issuePayload={{ state: state?.id }}
disableIssueCreation={disableIssueCreation}
currentStore={currentStore}
/>
)}
</>

29
web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx
View File

@ -11,18 +11,20 @@ import { IIssue } from "types";
import { BaseListRoot } from "../base-list-root";
import { IProjectStore } from "store/project";
import { EIssueActions } from "../../types";
import { EProjectStore } from "store/command-palette.store";
export const ArchivedIssueListLayout: FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
const { archivedIssues: archivedIssueStore, archivedIssueFilters: archivedIssueFiltersStore } = useMobxStore();
const { projectArchivedIssues: archivedIssueStore, projectArchivedIssuesFilter: archivedIssueFiltersStore } =
useMobxStore();
const issueActions = {
[EIssueActions.DELETE]: (group_by: string | null, issue: IIssue) => {
if (!workspaceSlug || !projectId) return;
archivedIssueStore.deleteArchivedIssue(group_by, null, issue);
archivedIssueStore.removeIssue(workspaceSlug, projectId, issue.id);
},
};
@ -31,15 +33,14 @@ export const ArchivedIssueListLayout: FC = observer(() => {
return projectStore?.projects[workspaceSlug.toString()] || null;
};
return null;
// return (
// <BaseListRoot
// issueFilterStore={archivedIssueFiltersStore}
// issueStore={archivedIssueStore}
// QuickActions={ArchivedIssueQuickActions}
// issueActions={issueActions}
// getProjects={getProjects}
// />
// );
return (
<BaseListRoot
issueFilterStore={archivedIssueFiltersStore}
issueStore={archivedIssueStore}
QuickActions={ArchivedIssueQuickActions}
issueActions={issueActions}
getProjects={getProjects}
currentStore={EProjectStore.PROJECT}
/>
);
});

2
web/components/issues/issue-layouts/list/roots/cycle-root.tsx
View File

@ -11,6 +11,7 @@ import { IIssue } from "types";
import { BaseListRoot } from "../base-list-root";
import { IProjectStore } from "store/project";
import { EIssueActions } from "../../types";
import { EProjectStore } from "store/command-palette.store";
export interface ICycleListLayout {}
@ -47,6 +48,7 @@ export const CycleListLayout: React.FC = observer(() => {
issueActions={issueActions}
getProjects={getProjects}
viewId={cycleId}
currentStore={EProjectStore.CYCLE}
/>
);
});

48
web/components/issues/issue-layouts/list/roots/draft-issue-root.tsx Normal file
View File

@ -0,0 +1,48 @@
import { FC } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// hooks
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { ProjectIssueQuickActions } from "components/issues";
// types
import { IIssue } from "types";
import { EIssueActions } from "../../types";
// constants
import { BaseListRoot } from "../base-list-root";
import { IProjectStore } from "store/project";
import { EProjectStore } from "store/command-palette.store";
export const DraftIssueListLayout: FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
if (!workspaceSlug || !projectId) return null;
// store
const { projectDraftIssuesFilter: projectIssuesFilterStore, projectDraftIssues: projectIssuesStore } = useMobxStore();
const issueActions = {
[EIssueActions.UPDATE]: (group_by: string | null, issue: IIssue) => {
if (!workspaceSlug || !projectId) return;
projectIssuesStore.updateIssue(workspaceSlug, projectId, issue.id, issue);
},
[EIssueActions.DELETE]: (group_by: string | null, issue: IIssue) => {
if (!workspaceSlug || !projectId) return;
projectIssuesStore.removeIssue(workspaceSlug, projectId, issue.id);
},
};
const getProjects = (projectStore: IProjectStore) => projectStore.workspaceProjects;
return (
<BaseListRoot
issueFilterStore={projectIssuesFilterStore}
issueStore={projectIssuesStore}
QuickActions={ProjectIssueQuickActions}
issueActions={issueActions}
getProjects={getProjects}
currentStore={EProjectStore.PROJECT}
/>
);
});

2
web/components/issues/issue-layouts/list/roots/module-root.tsx
View File

@ -11,6 +11,7 @@ import { EIssueActions } from "../../types";
// constants
import { BaseListRoot } from "../base-list-root";
import { IProjectStore } from "store/project";
import { EProjectStore } from "store/command-palette.store";
export interface IModuleListLayout {}
@ -48,6 +49,7 @@ export const ModuleListLayout: React.FC = observer(() => {
issueActions={issueActions}
getProjects={getProjects}
viewId={moduleId}
currentStore={EProjectStore.MODULE}
/>
);
});

55
web/components/issues/issue-layouts/list/roots/profile-issues-root.tsx
View File

@ -1,50 +1,49 @@
import { FC } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// mobx store
// hooks
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { ProjectIssueQuickActions } from "components/issues";
// types
import { IIssue } from "types";
import { EIssueActions } from "../../types";
import { IProjectStore } from "store/project";
//components
// constants
import { BaseListRoot } from "../base-list-root";
import { IProjectStore } from "store/project";
import { EProjectStore } from "store/command-palette.store";
export const ProfileIssuesListLayout: FC = observer(() => {
const {
profileIssueFilters: profileIssueFiltersStore,
profileIssues: profileIssuesStore,
issueDetail: issueDetailStore,
} = useMobxStore();
const router = useRouter();
const { workspaceSlug } = router.query;
const { workspaceSlug, userId } = router.query as { workspaceSlug: string; userId: string };
// store
const { workspaceProfileIssuesFilter: profileIssueFiltersStore, workspaceProfileIssues: profileIssuesStore } =
useMobxStore();
const issueActions = {
[EIssueActions.UPDATE]: (group_by: string | null, issue: IIssue) => {
if (!workspaceSlug) return;
[EIssueActions.UPDATE]: async (group_by: string | null, issue: IIssue) => {
if (!workspaceSlug || !userId) return;
profileIssuesStore.updateIssueStructure(group_by, null, issue);
issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
await profileIssuesStore.updateIssue(workspaceSlug, userId, issue.id, issue);
},
[EIssueActions.DELETE]: (group_by: string | null, issue: IIssue) => {
profileIssuesStore.deleteIssue(group_by, null, issue);
[EIssueActions.DELETE]: async (group_by: string | null, issue: IIssue) => {
if (!workspaceSlug || !userId) return;
await profileIssuesStore.removeIssue(workspaceSlug, userId, issue.project, issue.id);
},
};
const getProjects = (projectStore: IProjectStore) => projectStore?.workspaceProjects || null;
const getProjects = (projectStore: IProjectStore) => projectStore.workspaceProjects;
return null;
// return (
// <BaseListRoot
// issueFilterStore={profileIssueFiltersStore}
// issueStore={profileIssuesStore}
// QuickActions={ProjectIssueQuickActions}
// issueActions={issueActions}
// getProjects={getProjects}
// />
// );
return (
<BaseListRoot
issueFilterStore={profileIssueFiltersStore}
issueStore={profileIssuesStore}
QuickActions={ProjectIssueQuickActions}
issueActions={issueActions}
getProjects={getProjects}
currentStore={EProjectStore.PROFILE}
/>
);
});

2
web/components/issues/issue-layouts/list/roots/project-root.tsx
View File

@ -11,6 +11,7 @@ import { EIssueActions } from "../../types";
// constants
import { BaseListRoot } from "../base-list-root";
import { IProjectStore } from "store/project";
import { EProjectStore } from "store/command-palette.store";
export const ListLayout: FC = observer(() => {
const router = useRouter();
@ -41,6 +42,7 @@ export const ListLayout: FC = observer(() => {
QuickActions={ProjectIssueQuickActions}
issueActions={issueActions}
getProjects={getProjects}
currentStore={EProjectStore.PROJECT}
/>
);
});

2
web/components/issues/issue-layouts/list/roots/project-view-root.tsx
View File

@ -12,6 +12,7 @@ import { IIssue } from "types";
// components
import { BaseListRoot } from "../base-list-root";
import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
import { EProjectStore } from "store/command-palette.store";
export interface IViewListLayout {}
@ -44,6 +45,7 @@ export const ProjectViewListLayout: React.FC = observer(() => {
QuickActions={ProjectIssueQuickActions}
issueActions={issueActions}
getProjects={getProjects}
currentStore={EProjectStore.PROJECT_VIEW}
/>
);
});

4
web/components/issues/issue-layouts/properties/date.tsx
View File

@ -43,7 +43,9 @@ export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props)
<Popover.Button
ref={dropdownBtn}
className={`px-2.5 py-1 h-5 flex items-center rounded border-[0.5px] border-custom-border-300 duration-300 outline-none w-full ${
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
disabled
? "cursor-not-allowed text-custom-text-200 pointer-events-none"
: "cursor-pointer hover:bg-custom-background-80"
}`}
>
<div className="overflow-hidden flex justify-center items-center gap-2">

2
web/components/issues/issue-layouts/properties/labels.tsx
View File

@ -59,6 +59,8 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
if (workspaceSlug && projectId) fetchProjectLabels(workspaceSlug, projectId).then(() => setIsLoading(false));
};
if (!value) return null;
const options = (projectLabels ? projectLabels : []).map((label) => ({
value: label.id,
query: label.name,

2
web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
View File

@ -11,6 +11,7 @@ import { copyUrlToClipboard } from "helpers/string.helper";
// types
import { IIssue } from "types";
import { IQuickActionProps } from "../list/list-view-types";
import { EProjectStore } from "store/command-palette.store";
export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
const { issue, handleDelete, handleUpdate, handleRemoveFromView } = props;
@ -55,6 +56,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
onSubmit={async (data) => {
if (issueToEdit && handleUpdate) handleUpdate({ ...issueToEdit, ...data });
}}
currentStore={EProjectStore.CYCLE}
/>
<CustomMenu placement="bottom-start" ellipsis>
<CustomMenu.MenuItem

2
web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
View File

@ -11,6 +11,7 @@ import { copyUrlToClipboard } from "helpers/string.helper";
// types
import { IIssue } from "types";
import { IQuickActionProps } from "../list/list-view-types";
import { EProjectStore } from "store/command-palette.store";
export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
const { issue, handleDelete, handleUpdate, handleRemoveFromView } = props;
@ -55,6 +56,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
onSubmit={async (data) => {
if (issueToEdit && handleUpdate) handleUpdate({ ...issueToEdit, ...data });
}}
currentStore={EProjectStore.MODULE}
/>
<CustomMenu placement="bottom-start" ellipsis>
<CustomMenu.MenuItem

2
web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
View File

@ -11,6 +11,7 @@ import { copyUrlToClipboard } from "helpers/string.helper";
// types
import { IIssue } from "types";
import { IQuickActionProps } from "../list/list-view-types";
import { EProjectStore } from "store/command-palette.store";
export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) => {
const { issue, handleDelete, handleUpdate } = props;
@ -55,6 +56,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = (props) =>
onSubmit={async (data) => {
if (issueToEdit && handleUpdate) handleUpdate({ ...issueToEdit, ...data });
}}
currentStore={EProjectStore.PROJECT}
/>
<CustomMenu placement="bottom-start" ellipsis>
<CustomMenu.MenuItem

11
web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
View File

@ -9,14 +9,17 @@ import { ArchivedIssueListLayout, ArchivedIssueAppliedFiltersRoot } from "compon
export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
const { archivedIssueFilters: archivedIssueFiltersStore, archivedIssues: archivedIssueStore } = useMobxStore();
const {
projectArchivedIssues: { getIssues, fetchIssues },
projectArchivedIssuesFilter: { fetchFilters },
} = useMobxStore();
useSWR(workspaceSlug && projectId ? `ARCHIVED_FILTERS_AND_ISSUES_${projectId.toString()}` : null, async () => {
if (workspaceSlug && projectId) {
await archivedIssueFiltersStore.fetchUserProjectFilters(workspaceSlug.toString(), projectId.toString());
await archivedIssueStore.fetchIssues(workspaceSlug.toString(), projectId.toString());
await fetchFilters(workspaceSlug, projectId);
await fetchIssues(workspaceSlug, projectId, getIssues ? "mutation" : "init-loader");
}
});

51
web/components/issues/issue-layouts/roots/draft-issue-layout-root.tsx Normal file
View File

@ -0,0 +1,51 @@
import React from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import useSWR from "swr";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
import { DraftIssueAppliedFiltersRoot } from "../filters/applied-filters/roots/draft-issue";
import { DraftIssueListLayout } from "../list/roots/draft-issue-root";
import { Spinner } from "@plane/ui";
import { DraftKanBanLayout } from "../kanban/roots/draft-issue-root";
export const DraftIssueLayoutRoot: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
const {
projectDraftIssuesFilter: { issueFilters, fetchFilters },
projectDraftIssues: { loader, getIssues, fetchIssues },
} = useMobxStore();
useSWR(workspaceSlug && projectId ? `DRAFT_FILTERS_AND_ISSUES_${projectId.toString()}` : null, async () => {
if (workspaceSlug && projectId) {
await fetchFilters(workspaceSlug, projectId);
await fetchIssues(workspaceSlug, projectId, getIssues ? "mutation" : "init-loader");
}
});
const activeLayout = issueFilters?.displayFilters?.layout || undefined;
return (
<div className="relative w-full h-full flex flex-col overflow-hidden">
<DraftIssueAppliedFiltersRoot />
{loader === "init-loader" ? (
<div className="w-full h-full flex justify-center items-center">
<Spinner />
</div>
) : (
<>
<div className="w-full h-full relative overflow-auto">
{activeLayout === "list" ? (
<DraftIssueListLayout />
) : activeLayout === "kanban" ? (
<DraftKanBanLayout />
) : null}
</div>
</>
)}
</div>
);
});

6
web/components/issues/issue-layouts/roots/global-view-layout-root.tsx
View File

@ -102,17 +102,15 @@ export const GlobalViewLayoutRoot: React.FC<Props> = observer((props) => {
<GlobalViewEmptyState />
) : (
<div className="h-full w-full overflow-auto">
<SpreadsheetView
{/* <SpreadsheetView
displayProperties={workspaceFilterStore.workspaceDisplayProperties}
displayFilters={workspaceFilterStore.workspaceDisplayFilters}
handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
issues={issues}
members={workspaceMembers?.map((m) => m.member)}
labels={workspaceStore.workspaceLabels ? workspaceStore.workspaceLabels : undefined}
handleIssueAction={() => {}}
handleUpdateIssue={handleUpdateIssue}
disableUserActions={false}
/>
/> */}
</div>
)}
</div>

12
web/components/issues/issue-layouts/roots/project-layout-root.tsx
View File

@ -26,12 +26,20 @@ export const ProjectLayoutRoot: React.FC = observer(() => {
projectIssuesFilter: { issueFilters, fetchFilters },
} = useMobxStore();
useSWR(workspaceSlug && projectId ? `PROJECT_ISSUES_V3_${workspaceSlug}_${projectId}` : null, async () => {
useSWR(
workspaceSlug && projectId ? `PROJECT_ISSUES_V3_${workspaceSlug}_${projectId}` : null,
async () => {
if (workspaceSlug && projectId) {
await fetchFilters(workspaceSlug, projectId);
await fetchIssues(workspaceSlug, projectId, getIssues ? "mutation" : "init-loader");
}
});
},
{
onErrorRetry: (error) => {
if (error.status === 404) return;
},
}
);
const activeLayout = issueFilters?.displayFilters?.layout;

12
web/components/issues/issue-layouts/roots/project-view-layout-root.tsx
View File

@ -7,12 +7,11 @@ import useSWR from "swr";
import { useMobxStore } from "lib/mobx/store-provider";
// components
import {
ModuleKanBanLayout,
ModuleListLayout,
ProjectViewAppliedFiltersRoot,
ProjectViewCalendarLayout,
ProjectViewEmptyState,
ProjectViewGanttLayout,
ProjectViewKanBanLayout,
ProjectViewListLayout,
ProjectViewSpreadsheetLayout,
} from "components/issues";
import { Spinner } from "@plane/ui";
@ -33,7 +32,7 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
useSWR(workspaceSlug && projectId && viewId ? `PROJECT_ISSUES_V3_${workspaceSlug}_${projectId}` : null, async () => {
if (workspaceSlug && projectId && viewId) {
await fetchFilters(workspaceSlug, projectId, viewId);
// await fetchIssues(workspaceSlug, projectId, getIssues ? "mutation" : "init-loader");
await fetchIssues(workspaceSlug, projectId, getIssues ? "mutation" : "init-loader");
}
});
@ -49,12 +48,11 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
</div>
) : (
<>
{/* {(activeLayout === "list" || activeLayout === "spreadsheet") && issueCount === 0 && <ProjectViewEmptyState />} */}
<div className="w-full h-full relative overflow-auto">
{activeLayout === "list" ? (
<ModuleListLayout />
<ProjectViewListLayout />
) : activeLayout === "kanban" ? (
<ModuleKanBanLayout />
<ProjectViewKanBanLayout />
) : activeLayout === "calendar" ? (
<ProjectViewCalendarLayout />
) : activeLayout === "gantt_chart" ? (

63
web/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
View File

@ -1,6 +1,6 @@
import { IIssueUnGroupedStructure } from "store/issue";
import { SpreadsheetView } from "./spreadsheet-view";
import { useCallback } from "react";
import { FC, useCallback } from "react";
import { IIssue, IIssueDisplayFilterOptions } from "types";
import { useRouter } from "next/router";
import { useMobxStore } from "lib/mobx/store-provider";
@ -16,6 +16,8 @@ import {
} from "store/issues";
import { observer } from "mobx-react-lite";
import { EFilterType, TUnGroupedIssues } from "store/issues/types";
import { EIssueActions } from "../types";
import { IQuickActionProps } from "../list/list-view-types";
interface IBaseSpreadsheetRoot {
issueFiltersStore:
@ -25,16 +27,21 @@ interface IBaseSpreadsheetRoot {
| IProjectIssuesFilterStore;
issueStore: IProjectIssuesStore | IModuleIssuesStore | ICycleIssuesStore | IViewIssuesStore;
viewId?: string;
QuickActions: FC<IQuickActionProps>;
issueActions: {
[EIssueActions.DELETE]: (issue: IIssue) => void;
[EIssueActions.UPDATE]?: (issue: IIssue) => void;
[EIssueActions.REMOVE]?: (issue: IIssue) => void;
};
}
export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
const { issueFiltersStore, issueStore, viewId } = props;
const { issueFiltersStore, issueStore, viewId, QuickActions, issueActions } = props;
const router = useRouter();
const { workspaceSlug, projectId } = router.query as { workspaceSlug: string; projectId: string };
const {
issueDetail: issueDetailStore,
projectMember: { projectMembers },
projectState: projectStateStore,
projectLabel: { projectLabels },
@ -46,19 +53,16 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
const issuesResponse = issueStore.getIssues;
const issueIds = (issueStore.getIssuesIds ?? []) as TUnGroupedIssues;
const issues = issueIds?.map((id) => issuesResponse?.[id]);
const issues = issueIds?.filter((id) => id && issuesResponse?.[id]).map((id) => issuesResponse?.[id]);
const handleIssueAction = async (issue: IIssue, action: "copy" | "delete" | "edit") => {
if (!workspaceSlug || !projectId || !user) return;
if (action === "delete") {
issueDetailStore.deleteIssue(workspaceSlug.toString(), projectId.toString(), issue.id);
// issueStore.removeIssueFromStructure(null, null, issue);
} else if (action === "edit") {
issueDetailStore.updateIssue(workspaceSlug.toString(), projectId.toString(), issue.id, issue);
// issueStore.updateIssueStructure(null, null, issue);
const handleIssues = useCallback(
async (issue: IIssue, action: EIssueActions) => {
if (issueActions[action]) {
issueActions[action]!(issue);
}
};
},
[issueStore]
);
const handleDisplayFiltersUpdate = useCallback(
(updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
@ -77,33 +81,28 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
[issueFiltersStore, projectId, workspaceSlug]
);
const handleUpdateIssue = useCallback(
(issue: IIssue, data: Partial<IIssue>) => {
if (!workspaceSlug || !projectId || !user) return;
const payload = {
...issue,
...data,
};
// TODO: add update logic from the new store
// issueStore.updateIssueStructure(null, null, payload);
issueDetailStore.updateIssue(workspaceSlug.toString(), projectId.toString(), issue.id, data);
},
[issueDetailStore, projectId, user, workspaceSlug]
);
return (
<SpreadsheetView
displayProperties={issueFiltersStore.issueFilters?.displayProperties ?? {}}
displayFilters={issueFiltersStore.issueFilters?.displayFilters ?? {}}
handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
issues={issues as IIssueUnGroupedStructure}
quickActions={(issue) => (
<QuickActions
issue={issue}
handleDelete={async () => handleIssues(issue, EIssueActions.DELETE)}
handleUpdate={
issueActions[EIssueActions.UPDATE] ? async (data) => handleIssues(data, EIssueActions.UPDATE) : undefined
}
handleRemoveFromView={
issueActions[EIssueActions.REMOVE] ? async () => handleIssues(issue, EIssueActions.REMOVE) : undefined
}
/>
)}
members={projectMembers?.map((m) => m.member)}
labels={projectLabels || undefined}
states={projectId ? projectStateStore.states?.[projectId.toString()] : undefined}
handleIssueAction={handleIssueAction}
handleUpdateIssue={handleUpdateIssue}
handleIssues={handleIssues}
disableUserActions={false}
quickAddCallback={issueStore.quickAddIssue}
viewId={viewId}

4
web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
View File

@ -18,12 +18,12 @@ type Props = {
export const SpreadsheetAssigneeColumn: React.FC<Props> = ({ issue, members, onChange, expandedIssues, disabled }) => {
const isExpanded = expandedIssues.indexOf(issue.id) > -1;
const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
const { subIssues, isLoading } = useSubIssue(issue.project_detail?.id, issue.id, isExpanded);
return (
<>
<IssuePropertyAssignee
projectId={issue.project_detail.id ?? null}
projectId={issue.project_detail?.id ?? null}
value={issue.assignees}
onChange={(data) => onChange({ assignees: data })}
className="h-full w-full"

2
web/components/issues/issue-layouts/spreadsheet/columns/attachment-column.tsx
View File

@ -14,7 +14,7 @@ export const SpreadsheetAttachmentColumn: React.FC<Props> = (props) => {
const isExpanded = expandedIssues.indexOf(issue.id) > -1;
const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
const { subIssues, isLoading } = useSubIssue(issue.project_detail?.id, issue.id, isExpanded);
return (
<>

2
web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
View File

@ -17,7 +17,7 @@ type Props = {
export const SpreadsheetDueDateColumn: React.FC<Props> = ({ issue, onChange, expandedIssues, disabled }) => {
const isExpanded = expandedIssues.indexOf(issue.id) > -1;
const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
const { subIssues, isLoading } = useSubIssue(issue.project_detail?.id, issue.id, isExpanded);
return (
<>

4
web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
View File

@ -17,12 +17,12 @@ export const SpreadsheetEstimateColumn: React.FC<Props> = (props) => {
const isExpanded = expandedIssues.indexOf(issue.id) > -1;
const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
const { subIssues, isLoading } = useSubIssue(issue.project_detail?.id, issue.id, isExpanded);
return (
<>
<IssuePropertyEstimates
projectId={issue.project_detail.id ?? null}
projectId={issue.project_detail?.id ?? null}
value={issue.estimate_point}
onChange={(data) => onChange({ estimate_point: data })}
className="h-full w-full"

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

@ -1,7 +1,6 @@
import React, { useState } from "react";
import { useRouter } from "next/router";
import { Popover2 } from "@blueprintjs/popover2";
import { MoreHorizontal, Pencil, Trash2, ChevronRight, Link } from "lucide-react";
import { ChevronRight } from "lucide-react";
// hooks
import useToast from "hooks/use-toast";
// components
@ -16,8 +15,7 @@ type Props = {
expanded: boolean;
handleToggleExpand: (issueId: string) => void;
properties: IIssueDisplayProperties;
handleEditIssue: (issue: IIssue) => void;
handleDeleteIssue: (issue: IIssue) => void;
quickActions: (issue: IIssue) => React.ReactNode;
setIssuePeekOverView: React.Dispatch<
React.SetStateAction<{
workspaceSlug: string;
@ -35,8 +33,7 @@ export const IssueColumn: React.FC<Props> = ({
handleToggleExpand,
setIssuePeekOverView,
properties,
handleEditIssue,
handleDeleteIssue,
quickActions,
disableUserActions,
nestingLevel,
}) => {
@ -75,7 +72,7 @@ export const IssueColumn: React.FC<Props> = ({
return (
<>
<div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-custom-border-100">
<div className="group flex items-center w-[28rem] text-sm h-11 top-0 bg-custom-background-100 truncate border-b border-custom-border-100">
{properties.key && (
<div
className="flex gap-1.5 px-4 pr-0 py-2.5 items-center min-w-min"
@ -87,61 +84,7 @@ export const IssueColumn: React.FC<Props> = ({
</span>
{!disableUserActions && (
<div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
<Popover2
isOpen={isOpen}
canEscapeKeyClose
onInteraction={(nextOpenState) => setIsOpen(nextOpenState)}
content={
<div className="flex flex-col whitespace-nowrap rounded-md border border-custom-border-100 p-1 text-xs shadow-lg focus:outline-none min-w-full bg-custom-background-100 space-y-0.5">
<button
type="button"
className="hover:text-custom-text-200 w-full select-none gap-2 rounded p-1 text-left text-custom-text-200 hover:bg-custom-background-80"
onClick={() => {
handleCopyText();
setIsOpen(false);
}}
>
<div className="flex items-center gap-2">
<Link className="h-3 w-3" />
<span>Copy link</span>
</div>
</button>
<button
type="button"
className="hover:text-custom-text-200 w-full select-none gap-2 rounded p-1 text-left text-custom-text-200 hover:bg-custom-background-80"
onClick={() => {
handleEditIssue(issue);
setIsOpen(false);
}}
>
<div className="flex items-center gap-2">
<Pencil className="h-3 w-3" />
<span>Edit issue</span>
</div>
</button>
<button
type="button"
className="w-full select-none gap-2 rounded p-1 text-left text-red-500 hover:bg-custom-background-80"
onClick={() => {
handleDeleteIssue(issue);
setIsOpen(false);
}}
>
<div className="flex items-center gap-2">
<Trash2 className="h-3 w-3" />
<span>Delete issue</span>
</div>
</button>
</div>
}
placement="bottom-start"
>
<MoreHorizontal className="h-5 w-5 text-custom-text-200" />
</Popover2>
</div>
<div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">{quickActions(issue)}</div>
)}
</div>

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

@ -6,13 +6,14 @@ import { IssueColumn } from "components/issues";
import useSubIssue from "hooks/use-sub-issue";
// types
import { IIssue, IIssueDisplayProperties } from "types";
import { EIssueActions } from "components/issues/issue-layouts/types";
type Props = {
issue: IIssue;
expandedIssues: string[];
setExpandedIssues: React.Dispatch<React.SetStateAction<string[]>>;
properties: IIssueDisplayProperties;
handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
quickActions: (issue: IIssue) => React.ReactNode;
setIssuePeekOverView: React.Dispatch<
React.SetStateAction<{
workspaceSlug: string;
@ -30,7 +31,7 @@ export const SpreadsheetIssuesColumn: React.FC<Props> = ({
setExpandedIssues,
setIssuePeekOverView,
properties,
handleIssueAction,
quickActions,
disableUserActions,
nestingLevel = 0,
}) => {
@ -48,7 +49,7 @@ export const SpreadsheetIssuesColumn: React.FC<Props> = ({
const isExpanded = expandedIssues.indexOf(issue.id) > -1;
const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
const { subIssues, isLoading } = useSubIssue(issue.project_detail?.id, issue.id, isExpanded);
return (
<>
@ -57,11 +58,10 @@ export const SpreadsheetIssuesColumn: React.FC<Props> = ({
expanded={isExpanded}
handleToggleExpand={handleToggleExpand}
properties={properties}
handleEditIssue={() => handleIssueAction(issue, "edit")}
handleDeleteIssue={() => handleIssueAction(issue, "delete")}
setIssuePeekOverView={setIssuePeekOverView}
disableUserActions={disableUserActions}
nestingLevel={nestingLevel}
quickActions={quickActions}
/>
{isExpanded &&
@ -75,7 +75,7 @@ export const SpreadsheetIssuesColumn: React.FC<Props> = ({
expandedIssues={expandedIssues}
setExpandedIssues={setExpandedIssues}
properties={properties}
handleIssueAction={handleIssueAction}
quickActions={quickActions}
setIssuePeekOverView={setIssuePeekOverView}
disableUserActions={disableUserActions}
nestingLevel={nestingLevel + 1}

4
web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
View File

@ -20,12 +20,12 @@ export const SpreadsheetLabelColumn: React.FC<Props> = (props) => {
const isExpanded = expandedIssues.indexOf(issue.id) > -1;
const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
const { subIssues, isLoading } = useSubIssue(issue.project_detail?.id, issue.id, isExpanded);
return (
<>
<IssuePropertyLabels
projectId={issue.project_detail.id ?? null}
projectId={issue.project_detail?.id ?? null}
value={issue.labels}
onChange={(data) => onChange({ labels: data })}
className="h-full w-full"

2
web/components/issues/issue-layouts/spreadsheet/columns/link-column.tsx
View File

@ -14,7 +14,7 @@ export const SpreadsheetLinkColumn: React.FC<Props> = (props) => {
const isExpanded = expandedIssues.indexOf(issue.id) > -1;
const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
const { subIssues, isLoading } = useSubIssue(issue.project_detail?.id, issue.id, isExpanded);
return (
<>

2
web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
View File

@ -17,7 +17,7 @@ type Props = {
export const SpreadsheetPriorityColumn: React.FC<Props> = ({ issue, onChange, expandedIssues, disabled }) => {
const isExpanded = expandedIssues.indexOf(issue.id) > -1;
const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
const { subIssues, isLoading } = useSubIssue(issue.project_detail?.id, issue.id, isExpanded);
return (
<>

2
web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
View File

@ -17,7 +17,7 @@ type Props = {
export const SpreadsheetStartDateColumn: React.FC<Props> = ({ issue, onChange, expandedIssues, disabled }) => {
const isExpanded = expandedIssues.indexOf(issue.id) > -1;
const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
const { subIssues, isLoading } = useSubIssue(issue.project_detail?.id, issue.id, isExpanded);
return (
<>

4
web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
View File

@ -20,12 +20,12 @@ export const SpreadsheetStateColumn: React.FC<Props> = (props) => {
const isExpanded = expandedIssues.indexOf(issue.id) > -1;
const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
const { subIssues, isLoading } = useSubIssue(issue.project_detail?.id, issue.id, isExpanded);
return (
<>
<IssuePropertyState
projectId={issue.project_detail.id ?? null}
projectId={issue.project_detail?.id ?? null}
value={issue.state_detail}
onChange={(data) => onChange({ state: data.id, state_detail: data })}
className="h-full w-full"

2
web/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
View File

@ -14,7 +14,7 @@ export const SpreadsheetSubIssueColumn: React.FC<Props> = (props) => {
const isExpanded = expandedIssues.indexOf(issue.id) > -1;
const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
const { subIssues, isLoading } = useSubIssue(issue.project_detail?.id, issue.id, isExpanded);
return (
<>

2
web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
View File

@ -17,7 +17,7 @@ export const SpreadsheetUpdatedOnColumn: React.FC<Props> = (props) => {
const isExpanded = expandedIssues.indexOf(issue.id) > -1;
const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
const { subIssues, isLoading } = useSubIssue(issue.project_detail?.id, issue.id, isExpanded);
return (
<>

29
web/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
View File

@ -5,14 +5,39 @@ import { useMobxStore } from "lib/mobx/store-provider";
// components
import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
import { useRouter } from "next/router";
import { EIssueActions } from "../../types";
import { IIssue } from "types";
import { CycleIssueQuickActions } from "../../quick-action-dropdowns";
export const CycleSpreadsheetLayout: React.FC = observer(() => {
const router = useRouter();
const { cycleId } = router.query as { cycleId: string };
const { workspaceSlug, cycleId } = router.query as { workspaceSlug: string; cycleId: string };
const { cycleIssues: cycleIssueStore, cycleIssuesFilter: cycleIssueFilterStore } = useMobxStore();
const issueActions = {
[EIssueActions.UPDATE]: async (issue: IIssue) => {
if (!workspaceSlug || !cycleId) return;
cycleIssueStore.updateIssue(workspaceSlug, issue.project, issue.id, issue, cycleId);
},
[EIssueActions.DELETE]: async (issue: IIssue) => {
if (!workspaceSlug || !cycleId) return;
cycleIssueStore.removeIssue(workspaceSlug, issue.project, issue.id, cycleId);
},
[EIssueActions.REMOVE]: async (issue: IIssue) => {
if (!workspaceSlug || !cycleId || !issue.bridge_id) return;
cycleIssueStore.removeIssueFromCycle(workspaceSlug, issue.project, cycleId, issue.id, issue.bridge_id);
},
};
return (
<BaseSpreadsheetRoot issueStore={cycleIssueStore} issueFiltersStore={cycleIssueFilterStore} viewId={cycleId} />
<BaseSpreadsheetRoot
issueStore={cycleIssueStore}
issueFiltersStore={cycleIssueFilterStore}
viewId={cycleId}
issueActions={issueActions}
QuickActions={CycleIssueQuickActions}
/>
);
});

30
web/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx
View File

@ -6,13 +6,39 @@ import { useMobxStore } from "lib/mobx/store-provider";
// components
import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
import { useRouter } from "next/router";
import { EIssueActions } from "../../types";
import { IIssue } from "types";
import { ModuleIssueQuickActions } from "../../quick-action-dropdowns";
export const ModuleSpreadsheetLayout: React.FC = observer(() => {
const router = useRouter();
const { moduleId } = router.query as { moduleId: string };
const { workspaceSlug, moduleId } = router.query as { workspaceSlug: string; moduleId: string };
const { moduleIssues: moduleIssueStore, moduleIssuesFilter: moduleIssueFilterStore } = useMobxStore();
const issueActions = {
[EIssueActions.UPDATE]: async (issue: IIssue) => {
if (!workspaceSlug || !moduleId) return;
moduleIssueStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue, moduleId);
},
[EIssueActions.DELETE]: async (issue: IIssue) => {
if (!workspaceSlug || !moduleId) return;
moduleIssueStore.removeIssue(workspaceSlug, issue.project, issue.id, moduleId);
},
[EIssueActions.REMOVE]: async (issue: IIssue) => {
if (!workspaceSlug || !moduleId || !issue.bridge_id) return;
moduleIssueStore.removeIssueFromModule(workspaceSlug, issue.project, moduleId, issue.id, issue.bridge_id);
},
};
return (
<BaseSpreadsheetRoot issueStore={moduleIssueStore} issueFiltersStore={moduleIssueFilterStore} viewId={moduleId} />
<BaseSpreadsheetRoot
issueStore={moduleIssueStore}
issueFiltersStore={moduleIssueFilterStore}
viewId={moduleId}
issueActions={issueActions}
QuickActions={ModuleIssueQuickActions}
/>
);
});

30
web/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx
View File

@ -4,8 +4,36 @@ import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
import { EIssueActions } from "../../types";
import { IIssue } from "types";
import { useRouter } from "next/router";
import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
export const ProjectSpreadsheetLayout: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug } = router.query as { workspaceSlug: string };
const { projectIssues: projectIssuesStore, projectIssuesFilter: projectIssueFiltersStore } = useMobxStore();
return <BaseSpreadsheetRoot issueStore={projectIssuesStore} issueFiltersStore={projectIssueFiltersStore} />;
const issueActions = {
[EIssueActions.UPDATE]: async (issue: IIssue) => {
if (!workspaceSlug) return;
await projectIssuesStore.updateIssue(workspaceSlug, issue.project, issue.id, issue);
},
[EIssueActions.DELETE]: async (issue: IIssue) => {
if (!workspaceSlug) return;
await projectIssuesStore.removeIssue(workspaceSlug, issue.project, issue.id);
},
};
return (
<BaseSpreadsheetRoot
issueStore={projectIssuesStore}
issueFiltersStore={projectIssueFiltersStore}
issueActions={issueActions}
QuickActions={ProjectIssueQuickActions}
/>
);
});

30
web/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx
View File

@ -4,8 +4,36 @@ import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
import { EIssueActions } from "../../types";
import { IIssue } from "types";
import { useRouter } from "next/router";
import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
export const ProjectViewSpreadsheetLayout: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug } = router.query as { workspaceSlug: string };
const { viewIssues: projectViewIssuesStore, viewIssuesFilter: projectViewIssueFiltersStore } = useMobxStore();
return <BaseSpreadsheetRoot issueStore={projectViewIssuesStore} issueFiltersStore={projectViewIssueFiltersStore} />;
const issueActions = {
[EIssueActions.UPDATE]: async (issue: IIssue) => {
if (!workspaceSlug) return;
await projectViewIssuesStore.updateIssue(workspaceSlug, issue.project, issue.id, issue);
},
[EIssueActions.DELETE]: async (issue: IIssue) => {
if (!workspaceSlug) return;
await projectViewIssuesStore.removeIssue(workspaceSlug, issue.project, issue.id);
},
};
return (
<BaseSpreadsheetRoot
issueStore={projectViewIssuesStore}
issueFiltersStore={projectViewIssueFiltersStore}
issueActions={issueActions}
QuickActions={ProjectIssueQuickActions}
/>
);
});

25
web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
View File

@ -7,6 +7,7 @@ import { IssuePeekOverview } from "components/issues/issue-peek-overview";
import { Spinner } from "@plane/ui";
// types
import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueLabel, IState, IUserLite } from "types";
import { EIssueActions } from "../types";
type Props = {
displayProperties: IIssueDisplayProperties;
@ -16,8 +17,8 @@ type Props = {
members?: IUserLite[] | undefined;
labels?: IIssueLabel[] | undefined;
states?: IState[] | undefined;
handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;
quickActions: (issue: IIssue) => React.ReactNode;
handleIssues: (issue: IIssue, action: EIssueActions) => void;
openIssuesListModal?: (() => void) | null;
quickAddCallback?: (
workspaceSlug: string,
@ -39,8 +40,8 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
members,
labels,
states,
handleIssueAction,
handleUpdateIssue,
quickActions,
handleIssues,
quickAddCallback,
viewId,
disableUserActions,
@ -80,6 +81,8 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
};
}, []);
console.log("spreadsheet issues", issues);
return (
<div className="relative flex h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-200">
<div className="h-full w-full flex flex-col">
@ -103,18 +106,20 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
<span className="flex items-center justify-center px-4 py-2.5 h-full w-full flex-grow">Issue</span>
</div>
{issues.map((issue, index) => (
{issues.map((issue, index) =>
issue ? (
<SpreadsheetIssuesColumn
key={`${issue.id}_${index}`}
key={`${issue?.id}_${index}`}
issue={issue}
expandedIssues={expandedIssues}
setExpandedIssues={setExpandedIssues}
properties={displayProperties}
handleIssueAction={handleIssueAction}
quickActions={quickActions}
disableUserActions={disableUserActions}
setIssuePeekOverView={setIssuePeekOverView}
/>
))}
) : null
)}
</div>
</div>
@ -124,7 +129,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
disableUserActions={disableUserActions}
expandedIssues={expandedIssues}
handleDisplayFilterUpdate={handleDisplayFilterUpdate}
handleUpdateIssue={handleUpdateIssue}
handleUpdateIssue={(issue, data) => handleIssues({ ...issue, ...data }, EIssueActions.UPDATE)}
issues={issues}
members={members}
labels={labels}
@ -185,7 +190,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
workspaceSlug={issuePeekOverview?.workspaceSlug}
projectId={issuePeekOverview?.projectId}
issueId={issuePeekOverview?.issueId}
handleIssue={(issueToUpdate: any) => handleUpdateIssue(issueToUpdate as IIssue, issueToUpdate)}
handleIssue={(issueToUpdate: any) => handleIssues(issueToUpdate, EIssueActions.UPDATE)}
/>
)}
</div>

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

@ -16,6 +16,7 @@ import { IssueForm, ConfirmIssueDiscard } from "components/issues";
import type { IIssue } from "types";
// fetch-keys
import { USER_ISSUE, SUB_ISSUES } from "constants/fetch-keys";
import { EProjectStore } from "store/command-palette.store";
export interface IssuesModalProps {
data?: IIssue | null;
@ -40,6 +41,7 @@ export interface IssuesModalProps {
)[];
onSubmit?: (data: Partial<IIssue>) => Promise<void>;
handleSubmit?: (data: Partial<IIssue>) => Promise<void>;
currentStore?: EProjectStore;
}
const issueDraftService = new IssueDraftService();
@ -53,6 +55,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
fieldsToShow = ["all"],
onSubmit,
handleSubmit,
currentStore = EProjectStore.PROJECT,
} = props;
// states
@ -63,20 +66,56 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
const [prePopulateData, setPreloadedData] = useState<Partial<IIssue>>({});
const router = useRouter();
const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
const { workspaceSlug, projectId, cycleId, moduleId } = router.query as {
workspaceSlug: string;
projectId: string | undefined;
cycleId: string | undefined;
moduleId: string | undefined;
};
const {
project: projectStore,
issue: issueStore,
issueDetail: issueDetailStore,
cycleIssue: cycleIssueStore,
moduleIssue: moduleIssueStore,
projectIssues: projectIssueStore,
viewIssues: projectViewIssueStore,
workspaceProfileIssues: profileIssueStore,
cycleIssues: cycleIssueStore,
moduleIssues: moduleIssueStore,
user: userStore,
trackEvent: { postHogEventTracker }
trackEvent: { postHogEventTracker },
} = useMobxStore();
const user = userStore.currentUser;
const issueStores = {
[EProjectStore.PROJECT]: {
store: projectIssueStore,
dataIdToUpdate: activeProject,
viewId: undefined,
},
[EProjectStore.PROJECT_VIEW]: {
store: projectViewIssueStore,
dataIdToUpdate: activeProject,
viewId: undefined,
},
[EProjectStore.PROFILE]: {
store: profileIssueStore,
dataIdToUpdate: user?.id || undefined,
viewId: undefined,
},
[EProjectStore.CYCLE]: {
store: cycleIssueStore,
dataIdToUpdate: activeProject,
viewId: cycleId,
},
[EProjectStore.MODULE]: {
store: moduleIssueStore,
dataIdToUpdate: activeProject,
viewId: moduleId,
},
};
const { store: currentIssueStore, viewId, dataIdToUpdate } = issueStores[currentStore];
const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
const { setValue: setValueInLocalStorage, clearValue: clearLocalStorageValue } = useLocalStorage<any>(
@ -176,60 +215,57 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
// in the url. This has the least priority.
if (projects && projects.length > 0 && !activeProject)
setActiveProject(projects?.find((p) => p.id === projectId)?.id ?? projects?.[0].id ?? null);
}, [activeProject, data, projectId, projects, isOpen]);
}, [data, projectId, projects, isOpen]);
const addIssueToCycle = async (issueId: string, cycleId: string) => {
const addIssueToCycle = async (issue: IIssue, cycleId: string) => {
if (!workspaceSlug || !activeProject) return;
cycleIssueStore.addIssueToCycle(workspaceSlug.toString(), activeProject, cycleId, [issueId]);
cycleIssueStore.addIssueToCycle(workspaceSlug, activeProject, cycleId, issue);
};
const addIssueToModule = async (issueId: string, moduleId: string) => {
const addIssueToModule = async (issue: IIssue, moduleId: string) => {
if (!workspaceSlug || !activeProject) return;
moduleIssueStore.addIssueToModule(workspaceSlug.toString(), activeProject, moduleId, [issueId]);
moduleIssueStore.addIssueToModule(workspaceSlug, activeProject, moduleId, issue);
};
const createIssue = async (payload: Partial<IIssue>) => {
if (!workspaceSlug || !activeProject) return;
if (!workspaceSlug || !dataIdToUpdate) return;
await issueDetailStore
.createIssue(workspaceSlug.toString(), activeProject, payload)
await currentIssueStore
.createIssue(workspaceSlug, dataIdToUpdate, payload, viewId)
.then(async (res) => {
if (!res) throw new Error();
if (handleSubmit) {
await handleSubmit(res);
} else {
issueStore.fetchIssues(workspaceSlug.toString(), activeProject);
currentIssueStore.fetchIssues(workspaceSlug, dataIdToUpdate, "mutation");
if (payload.cycle && payload.cycle !== "") await addIssueToCycle(res.id, payload.cycle);
if (payload.module && payload.module !== "") await addIssueToModule(res.id, payload.module);
if (payload.cycle && payload.cycle !== "") await addIssueToCycle(res, payload.cycle);
if (payload.module && payload.module !== "") await addIssueToModule(res, payload.module);
setToastAlert({
type: "success",
title: "Success!",
message: "Issue created successfully.",
});
postHogEventTracker(
"ISSUE_CREATE",
{
postHogEventTracker("ISSUE_CREATE", {
...res,
state: "SUCCESS"
}
);
state: "SUCCESS",
});
if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent));
}
}).catch(() => {
})
.catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "Issue could not be created. Please try again.",
});
postHogEventTracker(
"ISSUE_CREATE",
{
state: "FAILED"
}
);
postHogEventTracker("ISSUE_CREATE", {
state: "FAILED",
});
});
if (!createMore) onFormSubmitClose();
@ -269,10 +305,10 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
};
const updateIssue = async (payload: Partial<IIssue>) => {
if (!workspaceSlug || !activeProject || !data) return;
if (!workspaceSlug || !dataIdToUpdate || !data) return;
await issueDetailStore
.updateIssue(workspaceSlug.toString(), activeProject, data.id, payload)
await currentIssueStore
.updateIssue(workspaceSlug, dataIdToUpdate, data.id, payload, viewId)
.then((res) => {
if (!createMore) onFormSubmitClose();
@ -281,13 +317,10 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
title: "Success!",
message: "Issue updated successfully.",
});
postHogEventTracker(
"ISSUE_UPDATE",
{
postHogEventTracker("ISSUE_UPDATE", {
...res,
state: "SUCCESS"
}
);
state: "SUCCESS",
});
})
.catch(() => {
setToastAlert({
@ -295,17 +328,14 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
title: "Error!",
message: "Issue could not be updated. Please try again.",
});
postHogEventTracker(
"ISSUE_UPDATE",
{
state: "FAILED"
}
);
postHogEventTracker("ISSUE_UPDATE", {
state: "FAILED",
});
});
};
const handleFormSubmit = async (formData: Partial<IIssue>) => {
if (!workspaceSlug || !activeProject) return;
if (!workspaceSlug || !dataIdToUpdate || !currentStore) return;
const payload: Partial<IIssue> = {
...formData,

92
web/components/profile/profile-issues-filter.tsx
View File

@ -1,4 +1,6 @@
import { useCallback } from "react";
import { observer } from "mobx-react-lite";
import { useRouter } from "next/router";
// components
import { DisplayFiltersSelection, FilterSelection, FiltersDropdown, LayoutSelection } from "components/issues";
// hooks
@ -6,40 +8,68 @@ import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root";
// constants
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
import { EFilterType } from "store/issues/types";
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
export const ProfileIssuesFilter = observer(() => {
const { workspace: workspaceStore, profileIssueFilters: profileIssueFiltersStore }: RootStore = useMobxStore();
const handleLayoutChange = (_layout: string) => {
const payload = {
layout: _layout,
group_by: profileIssueFiltersStore.userDisplayFilters.group_by
? profileIssueFiltersStore.userDisplayFilters.group_by
: "state_detail.group",
const router = useRouter();
const { workspaceSlug } = router.query as {
workspaceSlug: string;
};
profileIssueFiltersStore.handleIssueFilters("userDisplayFilters", payload);
};
const handleFilters = (key: any, value: any) => {
let updatesFilters: any = profileIssueFiltersStore?.userFilters;
updatesFilters = updatesFilters[key] || [];
if (updatesFilters && updatesFilters.length > 0 && updatesFilters.includes(value))
updatesFilters = updatesFilters.filter((item: any) => item !== value);
else updatesFilters.push(value);
profileIssueFiltersStore.handleIssueFilters("userFilters", { [key]: updatesFilters });
};
const handleDisplayFilters = (value: any) => profileIssueFiltersStore.handleIssueFilters("userDisplayFilters", value);
const handleDisplayProperties = (value: any) =>
profileIssueFiltersStore.handleIssueFilters("userDisplayProperties", value);
const {
workspace: workspaceStore,
workspaceProfileIssuesFilter: { issueFilters, updateFilters },
}: RootStore = useMobxStore();
const states = undefined;
const labels = workspaceStore.workspaceLabels || undefined;
const members = undefined;
const activeLayout = profileIssueFiltersStore?.userDisplayFilters?.layout;
const activeLayout = issueFilters?.displayFilters?.layout;
const handleLayoutChange = useCallback(
(layout: TIssueLayouts) => {
if (!workspaceSlug) return;
updateFilters(workspaceSlug, EFilterType.DISPLAY_FILTERS, { layout: layout });
},
[workspaceSlug, updateFilters]
);
const handleFiltersUpdate = useCallback(
(key: keyof IIssueFilterOptions, value: string | string[]) => {
if (!workspaceSlug) return;
const newValues = issueFilters?.filters?.[key] ?? [];
if (Array.isArray(value)) {
value.forEach((val) => {
if (!newValues.includes(val)) newValues.push(val);
});
} else {
if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
else newValues.push(value);
}
updateFilters(workspaceSlug, EFilterType.FILTERS, { [key]: newValues });
},
[workspaceSlug, issueFilters, updateFilters]
);
const handleDisplayFilters = useCallback(
(updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
if (!workspaceSlug) return;
updateFilters(workspaceSlug, EFilterType.DISPLAY_FILTERS, updatedDisplayFilter);
},
[workspaceSlug, updateFilters]
);
const handleDisplayProperties = useCallback(
(property: Partial<IIssueDisplayProperties>) => {
if (!workspaceSlug) return;
updateFilters(workspaceSlug, EFilterType.DISPLAY_PROPERTIES, property);
},
[workspaceSlug, updateFilters]
);
return (
<div className="relative flex items-center justify-end gap-2">
@ -51,11 +81,11 @@ export const ProfileIssuesFilter = observer(() => {
<FiltersDropdown title="Filters" placement="bottom-end">
<FilterSelection
filters={profileIssueFiltersStore.userFilters}
handleFiltersUpdate={handleFilters}
layoutDisplayFiltersOptions={
activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.profile_issues[activeLayout] : undefined
}
filters={issueFilters?.filters ?? {}}
handleFiltersUpdate={handleFiltersUpdate}
states={states}
labels={labels}
members={members}
@ -64,13 +94,13 @@ export const ProfileIssuesFilter = observer(() => {
<FiltersDropdown title="Display" placement="bottom-end">
<DisplayFiltersSelection
displayFilters={profileIssueFiltersStore.userDisplayFilters}
displayProperties={profileIssueFiltersStore.userDisplayProperties}
handleDisplayFiltersUpdate={handleDisplayFilters}
handleDisplayPropertiesUpdate={handleDisplayProperties}
layoutDisplayFiltersOptions={
activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.profile_issues[activeLayout] : undefined
}
displayFilters={issueFilters?.displayFilters ?? {}}
handleDisplayFiltersUpdate={handleDisplayFilters}
displayProperties={issueFilters?.displayProperties ?? {}}
handleDisplayPropertiesUpdate={handleDisplayProperties}
/>
</FiltersDropdown>
</div>

63
web/components/profile/profile-issues.tsx Normal file
View File

@ -0,0 +1,63 @@
import React, { ReactElement } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
import { observer } from "mobx-react-lite";
// layouts
import { AppLayout } from "layouts/app-layout";
import { ProfileAuthWrapper } from "layouts/user-profile-layout";
// components
import { UserProfileHeader } from "components/headers";
import { ProfileIssuesListLayout } from "components/issues/issue-layouts/list/roots/profile-issues-root";
import { ProfileIssuesKanBanLayout } from "components/issues/issue-layouts/kanban/roots/profile-issues-root";
import { ProfileIssuesAppliedFiltersRoot } from "components/issues";
import { Spinner } from "@plane/ui";
// hooks
import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root";
interface IProfileIssuesPage {
type: "assigned" | "subscribed" | "created";
}
export const ProfileIssuesPage = observer((props: IProfileIssuesPage) => {
const router = useRouter();
const { workspaceSlug, userId } = router.query as {
workspaceSlug: string;
userId: string;
};
const {
workspaceProfileIssues: { loader, getIssues, fetchIssues },
workspaceProfileIssuesFilter: { issueFilters, fetchFilters },
}: RootStore = useMobxStore();
useSWR(workspaceSlug && userId ? `CURRENT_WORKSPACE_PROFILE_ISSUES_${workspaceSlug}_${userId}` : null, async () => {
if (workspaceSlug && userId) {
await fetchFilters(workspaceSlug);
await fetchIssues(workspaceSlug, userId, getIssues ? "mutation" : "init-loader", props.type);
}
});
const activeLayout = issueFilters?.displayFilters?.layout || undefined;
return (
<>
{loader === "init-loader" ? (
<div className="flex justify-center items-center w-full h-full">
<Spinner />
</div>
) : (
<>
<ProfileIssuesAppliedFiltersRoot />
<div className="w-full h-full relative overflow-auto -z-1">
{activeLayout === "list" ? (
<ProfileIssuesListLayout />
) : activeLayout === "kanban" ? (
<ProfileIssuesKanBanLayout />
) : null}
</div>
</>
)}
</>
);
});

30
web/components/workspace/sidebar-quick-action.tsx
View File

@ -9,12 +9,17 @@ import { CreateUpdateDraftIssueModal } from "components/issues";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
import { observer } from "mobx-react-lite";
import { EProjectStore } from "store/command-palette.store";
export const WorkspaceSidebarQuickAction = observer(() => {
// states
const [isDraftIssueModalOpen, setIsDraftIssueModalOpen] = useState(false);
const { theme: themeStore, commandPalette: commandPaletteStore, trackEvent: { setTrackElement } } = useMobxStore();
const {
theme: themeStore,
commandPalette: commandPaletteStore,
trackEvent: { setTrackElement },
} = useMobxStore();
const { storedValue, clearValue } = useLocalStorage<any>("draftedIssue", JSON.stringify({}));
@ -34,24 +39,26 @@ export const WorkspaceSidebarQuickAction = observer(() => {
/>
<div
className={`flex items-center justify-between w-full cursor-pointer px-4 mt-4 ${isSidebarCollapsed ? "flex-col gap-1" : "gap-2"
className={`flex items-center justify-between w-full cursor-pointer px-4 mt-4 ${
isSidebarCollapsed ? "flex-col gap-1" : "gap-2"
}`}
>
<div
className={`relative flex items-center justify-between w-full rounded cursor-pointer px-2 gap-1 group ${isSidebarCollapsed
className={`relative flex items-center justify-between w-full rounded cursor-pointer px-2 gap-1 group ${
isSidebarCollapsed
? "px-2 hover:bg-custom-sidebar-background-80"
: "px-3 shadow-custom-sidebar-shadow-2xs border-[0.5px] border-custom-border-200"
}`}
>
<button
type="button"
className={`relative flex items-center gap-2 flex-grow rounded flex-shrink-0 py-1.5 outline-none ${isSidebarCollapsed ? "justify-center" : ""
className={`relative flex items-center gap-2 flex-grow rounded flex-shrink-0 py-1.5 outline-none ${
isSidebarCollapsed ? "justify-center" : ""
}`}
onClick={() => {
setTrackElement("APP_SIDEBAR_QUICK_ACTIONS");
commandPaletteStore.toggleCreateIssueModal(true);
}
}
commandPaletteStore.toggleCreateIssueModal(true, EProjectStore.PROJECT);
}}
>
<PenSquare className="h-4 w-4 text-custom-sidebar-text-300" />
{!isSidebarCollapsed && <span className="text-sm font-medium">New Issue</span>}
@ -63,7 +70,8 @@ export const WorkspaceSidebarQuickAction = observer(() => {
<button
type="button"
className={`flex items-center justify-center rounded flex-shrink-0 py-1.5 ml-1.5 ${isSidebarCollapsed ? "hidden" : "block"
className={`flex items-center justify-center rounded flex-shrink-0 py-1.5 ml-1.5 ${
isSidebarCollapsed ? "hidden" : "block"
}`}
>
<ChevronDown
@ -73,7 +81,8 @@ export const WorkspaceSidebarQuickAction = observer(() => {
</button>
<div
className={`fixed h-10 pt-2 w-[203px] left-4 opacity-0 group-hover:opacity-100 mt-0 pointer-events-none group-hover:pointer-events-auto ${isSidebarCollapsed ? "top-[5.5rem]" : "top-24"
className={`fixed h-10 pt-2 w-[203px] left-4 opacity-0 group-hover:opacity-100 mt-0 pointer-events-none group-hover:pointer-events-auto ${
isSidebarCollapsed ? "top-[5.5rem]" : "top-24"
}`}
>
<div className="w-full h-full">
@ -91,7 +100,8 @@ export const WorkspaceSidebarQuickAction = observer(() => {
</div>
<button
className={`flex items-center justify-center rounded flex-shrink-0 p-2 outline-none ${isSidebarCollapsed
className={`flex items-center justify-center rounded flex-shrink-0 p-2 outline-none ${
isSidebarCollapsed
? "hover:bg-custom-sidebar-background-80"
: "shadow-custom-sidebar-shadow-2xs border-[0.5px] border-custom-border-200"
}`}

56
web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx
View File

@ -1,67 +1,15 @@
import React, { ReactElement } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
import { observer } from "mobx-react-lite";
// layouts
import { AppLayout } from "layouts/app-layout";
import { ProfileAuthWrapper } from "layouts/user-profile-layout";
// components
import { UserProfileHeader } from "components/headers";
import { ProfileIssuesListLayout } from "components/issues/issue-layouts/list/roots/profile-issues-root";
import { ProfileIssuesKanBanLayout } from "components/issues/issue-layouts/kanban/roots/profile-issues-root";
import { Spinner } from "@plane/ui";
// hooks
import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root";
// types
import { NextPageWithLayout } from "types/app";
import { ProfileIssuesPage } from "components/profile/profile-issues";
const ProfileAssignedIssuesPage: NextPageWithLayout = observer(() => {
const {
workspace: workspaceStore,
project: projectStore,
profileIssueFilters: profileIssueFiltersStore,
profileIssues: profileIssuesStore,
}: RootStore = useMobxStore();
const router = useRouter();
const { workspaceSlug, userId } = router.query as {
workspaceSlug: string;
userId: string;
};
const { isLoading } = useSWR(`PROFILE_ISSUES_${workspaceSlug}_${userId}`, async () => {
if (workspaceSlug && userId) {
// workspace labels
workspaceStore.setWorkspaceSlug(workspaceSlug);
await workspaceStore.fetchWorkspaceLabels(workspaceSlug);
await projectStore.fetchProjects(workspaceSlug);
//profile issues
await profileIssuesStore.fetchIssues(workspaceSlug, userId, "assigned");
}
});
const activeLayout = profileIssueFiltersStore.userDisplayFilters.layout;
return (
<>
{isLoading ? (
<div className="flex justify-center items-center w-full h-full">
<Spinner />
</div>
) : (
<div className="w-full h-full relative overflow-auto -z-1">
{activeLayout === "list" ? (
<ProfileIssuesListLayout />
) : activeLayout === "kanban" ? (
<ProfileIssuesKanBanLayout />
) : null}
</div>
)}
</>
);
});
const ProfileAssignedIssuesPage: NextPageWithLayout = observer(() => <ProfileIssuesPage type="assigned" />);
ProfileAssignedIssuesPage.getLayout = function getLayout(page: ReactElement) {
return (

51
web/pages/[workspaceSlug]/profile/[userId]/created.tsx
View File

@ -1,63 +1,16 @@
import { ReactElement } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// store
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// layouts
import { AppLayout } from "layouts/app-layout";
import { ProfileAuthWrapper } from "layouts/user-profile-layout";
// components
import { UserProfileHeader } from "components/headers";
import { ProfileIssuesListLayout } from "components/issues/issue-layouts/list/roots/profile-issues-root";
import { ProfileIssuesKanBanLayout } from "components/issues/issue-layouts/kanban/roots/profile-issues-root";
import { Spinner } from "@plane/ui";
// types
import { NextPageWithLayout } from "types/app";
import { ProfileIssuesPage } from "components/profile/profile-issues";
const ProfileCreatedIssuesPage: NextPageWithLayout = () => {
const {
workspace: workspaceStore,
project: projectStore,
profileIssueFilters: profileIssueFiltersStore,
profileIssues: profileIssuesStore,
} = useMobxStore();
const router = useRouter();
const { workspaceSlug, userId } = router.query;
const { isLoading } = useSWR(`PROFILE_ISSUES_CREATED_${workspaceSlug}_${userId}`, async () => {
if (workspaceSlug && userId) {
// workspace labels
workspaceStore.setWorkspaceSlug(workspaceSlug.toString());
await workspaceStore.fetchWorkspaceLabels(workspaceSlug.toString());
await projectStore.fetchProjects(workspaceSlug.toString());
//profile issues
await profileIssuesStore.fetchIssues(workspaceSlug.toString(), userId.toString(), "created");
}
});
const activeLayout = profileIssueFiltersStore.userDisplayFilters.layout;
return (
<>
{isLoading ? (
<div className="flex justify-center items-center w-full h-full">
<Spinner />
</div>
) : (
<div className="w-full h-full relative overflow-auto -z-1">
{activeLayout === "list" ? (
<ProfileIssuesListLayout />
) : activeLayout === "kanban" ? (
<ProfileIssuesKanBanLayout />
) : null}
</div>
)}
</>
);
};
const ProfileCreatedIssuesPage: NextPageWithLayout = () => <ProfileIssuesPage type="created" />;
ProfileCreatedIssuesPage.getLayout = function getLayout(page: ReactElement) {
return (

51
web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx
View File

@ -1,63 +1,16 @@
import { ReactElement } from "react";
import { useRouter } from "next/router";
import useSWR from "swr";
// store
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// layouts
import { AppLayout } from "layouts/app-layout";
import { ProfileAuthWrapper } from "layouts/user-profile-layout";
// components
import { UserProfileHeader } from "components/headers";
import { ProfileIssuesListLayout } from "components/issues/issue-layouts/list/roots/profile-issues-root";
import { ProfileIssuesKanBanLayout } from "components/issues/issue-layouts/kanban/roots/profile-issues-root";
import { Spinner } from "@plane/ui";
// types
import { NextPageWithLayout } from "types/app";
import { ProfileIssuesPage } from "components/profile/profile-issues";
const ProfileSubscribedIssuesPage: NextPageWithLayout = () => {
const {
workspace: workspaceStore,
project: projectStore,
profileIssueFilters: profileIssueFiltersStore,
profileIssues: profileIssuesStore,
} = useMobxStore();
const router = useRouter();
const { workspaceSlug, userId } = router.query;
const { isLoading } = useSWR(`PROFILE_ISSUES_SUBSCRIBED_${workspaceSlug}_${userId}`, async () => {
if (workspaceSlug && userId) {
// workspace labels
workspaceStore.setWorkspaceSlug(workspaceSlug.toString());
await workspaceStore.fetchWorkspaceLabels(workspaceSlug.toString());
await projectStore.fetchProjects(workspaceSlug.toString());
//profile issues
await profileIssuesStore.fetchIssues(workspaceSlug.toString(), userId.toString(), "subscribed");
}
});
const activeLayout = profileIssueFiltersStore.userDisplayFilters.layout;
return (
<>
{isLoading ? (
<div className="flex justify-center items-center w-full h-full">
<Spinner />
</div>
) : (
<div className="w-full h-full relative overflow-auto -z-1">
{activeLayout === "list" ? (
<ProfileIssuesListLayout />
) : activeLayout === "kanban" ? (
<ProfileIssuesKanBanLayout />
) : null}
</div>
)}
</>
);
};
const ProfileSubscribedIssuesPage: NextPageWithLayout = () => <ProfileIssuesPage type="subscribed" />;
ProfileSubscribedIssuesPage.getLayout = function getLayout(page: ReactElement) {
return (

7
web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx
View File

@ -10,6 +10,7 @@ import { ProjectDraftIssueHeader } from "components/headers";
import { X, PenSquare } from "lucide-react";
// types
import { NextPageWithLayout } from "types/app";
import { DraftIssueLayoutRoot } from "components/issues/issue-layouts/roots/draft-issue-layout-root";
const ProjectDraftIssuesPage: NextPageWithLayout = () => {
const router = useRouter();
@ -21,14 +22,14 @@ const ProjectDraftIssuesPage: NextPageWithLayout = () => {
<button
type="button"
onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/issues/`)}
className="flex items-center gap-1.5 rounded border border-custom-border-200 px-3 py-1.5 text-xs"
className="flex items-center gap-1.5 rounded-full border border-custom-border-200 px-3 py-1.5 text-xs"
>
<PenSquare className="h-3 w-3 text-custom-text-300" />
<PenSquare className="h-4 w-4" />
<span>Draft Issues</span>
<X className="h-3 w-3" />
</button>
</div>
<DraftIssueLayoutRoot />
</div>
);
};

4
web/services/issue/issue_archive.service.ts
View File

@ -18,8 +18,8 @@ export class IssueArchiveService extends APIService {
}
async getV3ArchivedIssues(workspaceSlug: string, projectId: string, queries?: any): Promise<any> {
return this.get(`/api/v3/workspaces/${workspaceSlug}/projects/${projectId}/archived-issues/`, {
params: queries,
return this.get(`/api/v3/workspaces/${workspaceSlug}/projects/${projectId}/issues/`, {
params: { ...queries, archived: true },
})
.then((response) => response?.data)
.catch((error) => {

8
web/services/issue/issue_draft.service.tsx
View File

@ -17,13 +17,13 @@ export class IssueDraftService extends APIService {
});
}
async getV3DraftIssues(workspaceSlug: string, projectId: string, params?: any): Promise<any> {
return this.get(`/api/v3/workspaces/${workspaceSlug}/projects/${projectId}/issue-drafts/`, {
params,
async getV3DraftIssues(workspaceSlug: string, projectId: string, query?: any): Promise<any> {
return this.get(`/api/v3/workspaces/${workspaceSlug}/projects/${projectId}/issues/?draft=true`, {
params: { ...query },
})
.then((response) => response?.data)
.catch((error) => {
throw error?.response;
throw error?.response?.data;
});
}

Some files were not shown because too many files have changed in this diff Show More