refactor: archive issue (#2628)
* dev: archived issue store * dev: archived issue layouts and store binding * dev: archived issue detail store * dev: is read only * fix: archived issue delete * fix: build error
This commit is contained in:
Dakshesh Jain
GitHub
parent
ff258c60fd
commit
ad558833af
24 changed files with 1274 additions and 328 deletions
|
|
@ -3,22 +3,82 @@ import { useRouter } from "next/router";
|
|||
import { observer } from "mobx-react-lite";
|
||||
// hooks
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// constants
|
||||
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
|
||||
// helper
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
// ui
|
||||
import { Breadcrumbs, LayersIcon } from "@plane/ui";
|
||||
import { Breadcrumbs, BreadcrumbItem, LayersIcon } from "@plane/ui";
|
||||
// icons
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
// components
|
||||
import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "components/issues";
|
||||
// types
|
||||
import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "types";
|
||||
// helper
|
||||
import { renderEmoji } from "helpers/emoji.helper";
|
||||
|
||||
export const ProjectArchivedIssuesHeader: FC = observer(() => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
const { project: projectStore } = useMobxStore();
|
||||
const { project: projectStore, archivedIssueFilters: archivedIssueFiltersStore } = useMobxStore();
|
||||
|
||||
const { currentProjectDetails } = projectStore;
|
||||
|
||||
// for archived issues list layout is the only option
|
||||
const activeLayout = "list";
|
||||
|
||||
const handleFiltersUpdate = (key: keyof IIssueFilterOptions, value: string | string[]) => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
const newValues = archivedIssueFiltersStore.userFilters?.[key] ?? [];
|
||||
|
||||
if (Array.isArray(value)) {
|
||||
value.forEach((val) => {
|
||||
if (!newValues.includes(val)) newValues.push(val);
|
||||
});
|
||||
} else {
|
||||
if (archivedIssueFiltersStore.userFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
|
||||
else newValues.push(value);
|
||||
}
|
||||
|
||||
archivedIssueFiltersStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
|
||||
filters: {
|
||||
[key]: newValues,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleDisplayFiltersUpdate = (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
archivedIssueFiltersStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
|
||||
display_filters: {
|
||||
...archivedIssueFiltersStore.userDisplayFilters,
|
||||
...updatedDisplayFilter,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleDisplayPropertiesUpdate = (property: Partial<IIssueDisplayProperties>) => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
archivedIssueFiltersStore.updateDisplayProperties(workspaceSlug.toString(), projectId.toString(), property);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative flex w-full flex-shrink-0 flex-row z-10 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">
|
||||
<div className="block md:hidden">
|
||||
<button
|
||||
type="button"
|
||||
className="grid h-8 w-8 place-items-center rounded border border-custom-border-200"
|
||||
onClick={() => router.back()}
|
||||
>
|
||||
<ArrowLeft fontSize={14} strokeWidth={2} />
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<Breadcrumbs>
|
||||
<Breadcrumbs.BreadcrumbItem
|
||||
|
|
@ -46,6 +106,33 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
|
|||
</Breadcrumbs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* filter options */}
|
||||
<div className="flex items-center gap-2">
|
||||
<FiltersDropdown title="Filters" placement="bottom-end">
|
||||
<FilterSelection
|
||||
filters={archivedIssueFiltersStore.userFilters}
|
||||
handleFiltersUpdate={handleFiltersUpdate}
|
||||
layoutDisplayFiltersOptions={
|
||||
activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.archived_issues[activeLayout] : undefined
|
||||
}
|
||||
labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
|
||||
members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
|
||||
states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
|
||||
/>
|
||||
</FiltersDropdown>
|
||||
<FiltersDropdown title="Display" placement="bottom-end">
|
||||
<DisplayFiltersSelection
|
||||
displayFilters={archivedIssueFiltersStore.userDisplayFilters}
|
||||
displayProperties={archivedIssueFiltersStore.userDisplayProperties}
|
||||
handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
|
||||
handleDisplayPropertiesUpdate={handleDisplayPropertiesUpdate}
|
||||
layoutDisplayFiltersOptions={
|
||||
activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
|
||||
}
|
||||
/>
|
||||
</FiltersDropdown>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
131
web/components/issues/delete-archived-issue-modal.tsx
Normal file
131
web/components/issues/delete-archived-issue-modal.tsx
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
import { useEffect, useState, Fragment } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
import { AlertTriangle } from "lucide-react";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// ui
|
||||
import { Button } from "@plane/ui";
|
||||
// types
|
||||
import type { IIssue } from "types";
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean;
|
||||
handleClose: () => void;
|
||||
data: IIssue;
|
||||
onSubmit?: () => Promise<void>;
|
||||
};
|
||||
|
||||
export const DeleteArchivedIssueModal: React.FC<Props> = observer((props) => {
|
||||
const { data, isOpen, handleClose, onSubmit } = props;
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const { archivedIssueDetail: archivedIssueDetailStore } = useMobxStore();
|
||||
|
||||
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsDeleteLoading(false);
|
||||
}, [isOpen]);
|
||||
|
||||
const onClose = () => {
|
||||
setIsDeleteLoading(false);
|
||||
handleClose();
|
||||
};
|
||||
|
||||
const handleIssueDelete = async () => {
|
||||
if (!workspaceSlug) return;
|
||||
|
||||
setIsDeleteLoading(true);
|
||||
|
||||
await archivedIssueDetailStore
|
||||
.deleteArchivedIssue(workspaceSlug.toString(), data.project, data.id)
|
||||
.then(() => {
|
||||
if (onSubmit) onSubmit();
|
||||
})
|
||||
.catch((err) => {
|
||||
const error = err?.detail;
|
||||
const errorString = Array.isArray(error) ? error[0] : error;
|
||||
|
||||
setToastAlert({
|
||||
title: "Error",
|
||||
type: "error",
|
||||
message: errorString || "Something went wrong.",
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
setIsDeleteLoading(false);
|
||||
onClose();
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-20" onClose={onClose}>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 z-10 overflow-y-auto">
|
||||
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
|
||||
<div className="flex flex-col gap-6 p-6">
|
||||
<div className="flex w-full items-center justify-start gap-6">
|
||||
<span className="place-items-center rounded-full bg-red-500/20 p-4">
|
||||
<AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
|
||||
</span>
|
||||
<span className="flex items-center justify-start">
|
||||
<h3 className="text-xl font-medium 2xl:text-2xl">Delete Archived Issue</h3>
|
||||
</span>
|
||||
</div>
|
||||
<span>
|
||||
<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}
|
||||
</span>
|
||||
{""}? All of the data related to the archived issue will be permanently removed. This action
|
||||
cannot be undone.
|
||||
</p>
|
||||
</span>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="neutral-primary" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="danger" onClick={handleIssueDelete} loading={isDeleteLoading}>
|
||||
{isDeleteLoading ? "Deleting..." : "Delete Issue"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
);
|
||||
});
|
||||
|
|
@ -20,3 +20,6 @@ export * from "./confirm-issue-discard";
|
|||
export * from "./draft-issue-form";
|
||||
export * from "./draft-issue-modal";
|
||||
export * from "./delete-draft-issue-modal";
|
||||
|
||||
// archived issue
|
||||
export * from "./delete-archived-issue-modal";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,81 @@
|
|||
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";
|
||||
|
||||
export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
const { archivedIssueFilters: archivedIssueFiltersStore, project: projectStore } = useMobxStore();
|
||||
|
||||
const userFilters = archivedIssueFiltersStore.userFilters;
|
||||
|
||||
// filters whose value not null or empty array
|
||||
const appliedFilters: IIssueFilterOptions = {};
|
||||
Object.entries(userFilters).forEach(([key, value]) => {
|
||||
if (!value) return;
|
||||
|
||||
if (Array.isArray(value) && value.length === 0) return;
|
||||
|
||||
appliedFilters[key as keyof IIssueFilterOptions] = value;
|
||||
});
|
||||
|
||||
const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
// remove all values of the key if value is null
|
||||
if (!value) {
|
||||
archivedIssueFiltersStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
|
||||
filters: {
|
||||
[key]: null,
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// remove the passed value from the key
|
||||
let newValues = archivedIssueFiltersStore.userFilters?.[key] ?? [];
|
||||
newValues = newValues.filter((val) => val !== value);
|
||||
|
||||
archivedIssueFiltersStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
|
||||
filters: {
|
||||
[key]: newValues,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleClearAllFilters = () => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
const newFilters: IIssueFilterOptions = {};
|
||||
Object.keys(userFilters).forEach((key) => {
|
||||
newFilters[key as keyof IIssueFilterOptions] = null;
|
||||
});
|
||||
|
||||
archivedIssueFiltersStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
|
||||
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={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
|
||||
members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
|
||||
states={projectStore.states?.[projectId?.toString() ?? ""]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
@ -3,3 +3,4 @@ export * from "./global-view-root";
|
|||
export * from "./module-root";
|
||||
export * from "./project-view-root";
|
||||
export * from "./project-root";
|
||||
export * from "./archived-issue";
|
||||
|
|
|
|||
|
|
@ -12,11 +12,12 @@ interface IssueBlockProps {
|
|||
handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void;
|
||||
quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
|
||||
display_properties: any;
|
||||
isReadonly?: boolean;
|
||||
showEmptyGroup?: boolean;
|
||||
}
|
||||
|
||||
export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
|
||||
const { columnId, issue, handleIssues, quickActions, display_properties, showEmptyGroup } = props;
|
||||
const { columnId, issue, handleIssues, quickActions, display_properties, showEmptyGroup, isReadonly } = props;
|
||||
|
||||
const updateIssue = (group_by: string | null, issueToUpdate: IIssue) => {
|
||||
handleIssues(group_by, issueToUpdate, "update");
|
||||
|
|
@ -37,6 +38,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
|
|||
workspaceSlug={issue?.workspace_detail?.slug}
|
||||
projectId={issue?.project_detail?.id}
|
||||
issueId={issue?.id}
|
||||
isArchived={issue?.archived_at !== null}
|
||||
handleIssue={(issueToUpdate) => {
|
||||
handleIssues(!columnId && columnId === "null" ? null : columnId, issueToUpdate as IIssue, "update");
|
||||
}}
|
||||
|
|
@ -50,6 +52,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
|
|||
<KanBanProperties
|
||||
columnId={columnId}
|
||||
issue={issue}
|
||||
isReadonly={isReadonly}
|
||||
handleIssues={updateIssue}
|
||||
display_properties={display_properties}
|
||||
showEmptyGroup={showEmptyGroup}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { IIssue } from "types";
|
|||
interface Props {
|
||||
columnId: string;
|
||||
issues: IIssue[];
|
||||
isReadonly?: boolean;
|
||||
handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void;
|
||||
quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
|
||||
display_properties: any;
|
||||
|
|
@ -14,7 +15,7 @@ interface Props {
|
|||
}
|
||||
|
||||
export const IssueBlocksList: FC<Props> = (props) => {
|
||||
const { columnId, issues, handleIssues, quickActions, display_properties, showEmptyGroup } = props;
|
||||
const { columnId, issues, handleIssues, quickActions, display_properties, showEmptyGroup, isReadonly } = props;
|
||||
|
||||
return (
|
||||
<div className="w-full h-full relative divide-y-[0.5px] divide-custom-border-200">
|
||||
|
|
@ -26,6 +27,7 @@ export const IssueBlocksList: FC<Props> = (props) => {
|
|||
issue={issue}
|
||||
handleIssues={handleIssues}
|
||||
quickActions={quickActions}
|
||||
isReadonly={isReadonly}
|
||||
display_properties={display_properties}
|
||||
showEmptyGroup={showEmptyGroup}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ export interface IGroupByList {
|
|||
issues: any;
|
||||
group_by: string | null;
|
||||
list: any;
|
||||
isReadonly?: boolean;
|
||||
listKey: string;
|
||||
handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void;
|
||||
quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
|
||||
|
|
@ -26,6 +27,7 @@ const GroupByList: React.FC<IGroupByList> = observer((props) => {
|
|||
issues,
|
||||
group_by,
|
||||
list,
|
||||
isReadonly,
|
||||
listKey,
|
||||
handleIssues,
|
||||
quickActions,
|
||||
|
|
@ -58,6 +60,7 @@ const GroupByList: React.FC<IGroupByList> = observer((props) => {
|
|||
handleIssues={handleIssues}
|
||||
quickActions={quickActions}
|
||||
display_properties={display_properties}
|
||||
isReadonly={isReadonly}
|
||||
showEmptyGroup={showEmptyGroup}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -79,6 +82,7 @@ const GroupByList: React.FC<IGroupByList> = observer((props) => {
|
|||
export interface IList {
|
||||
issues: any;
|
||||
group_by: string | null;
|
||||
isReadonly?: boolean;
|
||||
handleDragDrop?: (result: any) => void | undefined;
|
||||
handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void;
|
||||
quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
|
||||
|
|
@ -98,6 +102,7 @@ export const List: React.FC<IList> = observer((props) => {
|
|||
const {
|
||||
issues,
|
||||
group_by,
|
||||
isReadonly,
|
||||
handleIssues,
|
||||
quickActions,
|
||||
display_properties,
|
||||
|
|
@ -124,6 +129,7 @@ export const List: React.FC<IList> = observer((props) => {
|
|||
display_properties={display_properties}
|
||||
is_list
|
||||
enableQuickIssueCreate={enableQuickIssueCreate}
|
||||
isReadonly={isReadonly}
|
||||
showEmptyGroup={showEmptyGroup}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -138,6 +144,7 @@ export const List: React.FC<IList> = observer((props) => {
|
|||
quickActions={quickActions}
|
||||
display_properties={display_properties}
|
||||
enableQuickIssueCreate={enableQuickIssueCreate}
|
||||
isReadonly={isReadonly}
|
||||
showEmptyGroup={showEmptyGroup}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -152,6 +159,7 @@ export const List: React.FC<IList> = observer((props) => {
|
|||
quickActions={quickActions}
|
||||
display_properties={display_properties}
|
||||
enableQuickIssueCreate={enableQuickIssueCreate}
|
||||
isReadonly={isReadonly}
|
||||
showEmptyGroup={showEmptyGroup}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -166,6 +174,7 @@ export const List: React.FC<IList> = observer((props) => {
|
|||
quickActions={quickActions}
|
||||
display_properties={display_properties}
|
||||
enableQuickIssueCreate={enableQuickIssueCreate}
|
||||
isReadonly={isReadonly}
|
||||
showEmptyGroup={showEmptyGroup}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -180,6 +189,7 @@ export const List: React.FC<IList> = observer((props) => {
|
|||
quickActions={quickActions}
|
||||
display_properties={display_properties}
|
||||
enableQuickIssueCreate={enableQuickIssueCreate}
|
||||
isReadonly={isReadonly}
|
||||
showEmptyGroup={showEmptyGroup}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -194,6 +204,7 @@ export const List: React.FC<IList> = observer((props) => {
|
|||
quickActions={quickActions}
|
||||
display_properties={display_properties}
|
||||
enableQuickIssueCreate={enableQuickIssueCreate}
|
||||
isReadonly={isReadonly}
|
||||
showEmptyGroup={showEmptyGroup}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -208,6 +219,7 @@ export const List: React.FC<IList> = observer((props) => {
|
|||
quickActions={quickActions}
|
||||
display_properties={display_properties}
|
||||
enableQuickIssueCreate={enableQuickIssueCreate}
|
||||
isReadonly={isReadonly}
|
||||
showEmptyGroup={showEmptyGroup}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -222,6 +234,7 @@ export const List: React.FC<IList> = observer((props) => {
|
|||
quickActions={quickActions}
|
||||
display_properties={display_properties}
|
||||
enableQuickIssueCreate={enableQuickIssueCreate}
|
||||
isReadonly={isReadonly}
|
||||
showEmptyGroup={showEmptyGroup}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
|
|||
value={issue?.state_detail || null}
|
||||
hideDropdownArrow
|
||||
onChange={handleState}
|
||||
disabled={false}
|
||||
disabled={isReadonly}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
@ -72,7 +72,7 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
|
|||
<IssuePropertyPriority
|
||||
value={issue?.priority || null}
|
||||
onChange={handlePriority}
|
||||
disabled={false}
|
||||
disabled={isReadonly}
|
||||
hideDropdownArrow
|
||||
/>
|
||||
)}
|
||||
|
|
@ -83,7 +83,7 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
|
|||
projectId={issue?.project_detail?.id || null}
|
||||
value={issue?.labels || null}
|
||||
onChange={handleLabel}
|
||||
disabled={false}
|
||||
disabled={isReadonly}
|
||||
hideDropdownArrow
|
||||
/>
|
||||
)}
|
||||
|
|
@ -95,7 +95,7 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
|
|||
value={issue?.assignees || null}
|
||||
hideDropdownArrow
|
||||
onChange={handleAssignee}
|
||||
disabled={false}
|
||||
disabled={isReadonly}
|
||||
multiple
|
||||
/>
|
||||
)}
|
||||
|
|
@ -105,7 +105,7 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
|
|||
<IssuePropertyDate
|
||||
value={issue?.start_date || null}
|
||||
onChange={(date: string) => handleStartDate(date)}
|
||||
disabled={false}
|
||||
disabled={isReadonly}
|
||||
placeHolder="Start date"
|
||||
/>
|
||||
)}
|
||||
|
|
@ -115,7 +115,7 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
|
|||
<IssuePropertyDate
|
||||
value={issue?.target_date || null}
|
||||
onChange={(date: string) => handleTargetDate(date)}
|
||||
disabled={false}
|
||||
disabled={isReadonly}
|
||||
placeHolder="Target date"
|
||||
/>
|
||||
)}
|
||||
|
|
@ -127,7 +127,7 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
|
|||
value={issue?.estimate_point || null}
|
||||
hideDropdownArrow
|
||||
onChange={handleEstimate}
|
||||
disabled={false}
|
||||
disabled={isReadonly}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,73 @@
|
|||
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 { List } from "../default";
|
||||
import { ArchivedIssueQuickActions } from "components/issues";
|
||||
// helpers
|
||||
import { orderArrayBy } from "helpers/array.helper";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
// constants
|
||||
import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
|
||||
|
||||
export const ArchivedIssueListLayout: FC = observer(() => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
const {
|
||||
project: projectStore,
|
||||
archivedIssues: archivedIssueStore,
|
||||
archivedIssueFilters: archivedIssueFiltersStore,
|
||||
} = useMobxStore();
|
||||
|
||||
// derived values
|
||||
const issues = archivedIssueStore.getIssues;
|
||||
const display_properties = archivedIssueFiltersStore?.userDisplayProperties || null;
|
||||
const group_by: string | null = archivedIssueFiltersStore?.userDisplayFilters?.group_by || null;
|
||||
|
||||
const handleIssues = (group_by: string | null, issue: IIssue, action: "delete" | "update") => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
if (action === "delete") {
|
||||
archivedIssueStore.deleteArchivedIssue(group_by, null, issue);
|
||||
}
|
||||
};
|
||||
|
||||
const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : null;
|
||||
|
||||
const states = projectStore?.projectStates || null;
|
||||
const priorities = ISSUE_PRIORITIES || null;
|
||||
const labels = projectStore?.projectLabels || null;
|
||||
const members = projectStore?.projectMembers || null;
|
||||
const stateGroups = ISSUE_STATE_GROUPS || null;
|
||||
const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
|
||||
const estimates =
|
||||
projectDetails?.estimate !== null
|
||||
? projectStore.projectEstimates?.find((e) => e.id === projectDetails?.estimate) || null
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full bg-custom-background-90">
|
||||
<List
|
||||
issues={issues}
|
||||
group_by={group_by}
|
||||
isReadonly
|
||||
handleIssues={handleIssues}
|
||||
quickActions={(group_by, issue) => (
|
||||
<ArchivedIssueQuickActions issue={issue} handleDelete={async () => handleIssues(group_by, issue, "delete")} />
|
||||
)}
|
||||
display_properties={display_properties}
|
||||
states={states}
|
||||
stateGroups={stateGroups}
|
||||
priorities={priorities}
|
||||
labels={labels}
|
||||
members={members?.map((m) => m.member) ?? null}
|
||||
projects={projects}
|
||||
estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
@ -3,3 +3,4 @@ export * from "./module-root";
|
|||
export * from "./profile-issues-root";
|
||||
export * from "./project-root";
|
||||
export * from "./project-view-root";
|
||||
export * from "./archived-issue-root";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,76 @@
|
|||
import { useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { CustomMenu } from "@plane/ui";
|
||||
import { Link, Trash2 } from "lucide-react";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import { DeleteArchivedIssueModal } from "components/issues";
|
||||
// helpers
|
||||
import { copyUrlToClipboard } from "helpers/string.helper";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
|
||||
type Props = {
|
||||
issue: IIssue;
|
||||
handleDelete: () => Promise<void>;
|
||||
};
|
||||
|
||||
export const ArchivedIssueQuickActions: React.FC<Props> = (props) => {
|
||||
const { issue, handleDelete } = props;
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
// states
|
||||
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const handleCopyIssueLink = () => {
|
||||
copyUrlToClipboard(`/${workspaceSlug}/projects/${issue.project}/archived-issues/${issue.id}`).then(() =>
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Link copied",
|
||||
message: "Issue link copied to clipboard",
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DeleteArchivedIssueModal
|
||||
data={issue}
|
||||
isOpen={deleteIssueModal}
|
||||
handleClose={() => setDeleteIssueModal(false)}
|
||||
onSubmit={handleDelete}
|
||||
/>
|
||||
<CustomMenu placement="bottom-start" ellipsis>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
handleCopyIssueLink();
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Link className="h-3 w-3" />
|
||||
Copy link
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
<CustomMenu.MenuItem
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setDeleteIssueModal(true);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Trash2 className="h-3 w-3" />
|
||||
Delete issue
|
||||
</div>
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
export * from "./cycle-issue";
|
||||
export * from "./module-issue";
|
||||
export * from "./project-issue";
|
||||
export * from "./archived-issue";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
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";
|
||||
// components
|
||||
import { ArchivedIssueListLayout, ArchivedIssueAppliedFiltersRoot } from "components/issues";
|
||||
|
||||
export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
const { archivedIssueFilters: archivedIssueFiltersStore, archivedIssues: archivedIssueStore } = 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());
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="relative w-full h-full flex flex-col overflow-hidden">
|
||||
<ArchivedIssueAppliedFiltersRoot />
|
||||
<div className="w-full h-full overflow-auto">
|
||||
<ArchivedIssueListLayout />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
@ -3,3 +3,4 @@ export * from "./global-view-layout-root";
|
|||
export * from "./module-layout-root";
|
||||
export * from "./project-layout-root";
|
||||
export * from "./project-view-layout-root";
|
||||
export * from "./archived-issue-layout-root";
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import { FC, ReactNode } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import useSWR from "swr";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// components
|
||||
import { IssueView } from "./view";
|
||||
|
|
@ -6,22 +8,78 @@ import { IssueView } from "./view";
|
|||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
import { RootStore } from "store/root";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// helpers
|
||||
import { copyUrlToClipboard } from "helpers/string.helper";
|
||||
|
||||
interface IIssuePeekOverview {
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
issueId: string;
|
||||
handleIssue: (issue: Partial<IIssue>) => void;
|
||||
isArchived?: boolean;
|
||||
children?: ReactNode;
|
||||
}
|
||||
|
||||
export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
|
||||
const { workspaceSlug, projectId, issueId, handleIssue, children } = props;
|
||||
const { workspaceSlug, projectId, issueId, handleIssue, children, isArchived = false } = props;
|
||||
|
||||
const { issueDetail: issueDetailStore, project: projectStore, user: userStore } = useMobxStore();
|
||||
const router = useRouter();
|
||||
const { peekIssueId } = router.query as { peekIssueId: string };
|
||||
|
||||
const {
|
||||
user: userStore,
|
||||
issue: issueStore,
|
||||
issueDetail: issueDetailStore,
|
||||
archivedIssueDetail: archivedIssueDetailStore,
|
||||
archivedIssues: archivedIssuesStore,
|
||||
project: projectStore,
|
||||
}: RootStore = useMobxStore();
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
useSWR(
|
||||
workspaceSlug && projectId && issueId && peekIssueId && issueId === peekIssueId
|
||||
? `ISSUE_PEEK_OVERVIEW_${workspaceSlug}_${projectId}_${peekIssueId}`
|
||||
: null,
|
||||
async () => {
|
||||
if (workspaceSlug && projectId && issueId && peekIssueId && issueId === peekIssueId) {
|
||||
if (isArchived) await archivedIssueDetailStore.fetchPeekIssueDetails(workspaceSlug, projectId, issueId);
|
||||
else await issueDetailStore.fetchPeekIssueDetails(workspaceSlug, projectId, issueId);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
copyUrlToClipboard(
|
||||
`${workspaceSlug}/projects/${projectId}/${isArchived ? "archived-issues" : "issues"}/${peekIssueId}`
|
||||
).then(() => {
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Link Copied!",
|
||||
message: "Issue link copied to clipboard.",
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const redirectToIssueDetail = () => {
|
||||
router.push({
|
||||
pathname: `/${workspaceSlug}/projects/${projectId}/${isArchived ? "archived-issues" : "issues"}/${issueId}`,
|
||||
});
|
||||
};
|
||||
|
||||
const issue = isArchived ? archivedIssueDetailStore.getIssue : issueDetailStore.getIssue;
|
||||
const isLoading = isArchived ? archivedIssueDetailStore.loader : issueDetailStore.loader;
|
||||
|
||||
const issueUpdate = (_data: Partial<IIssue>) => {
|
||||
handleIssue(_data);
|
||||
if (handleIssue) {
|
||||
handleIssue(_data);
|
||||
issueDetailStore.updateIssue(workspaceSlug, projectId, issueId, _data);
|
||||
}
|
||||
};
|
||||
|
||||
const issueReactionCreate = (reaction: string) =>
|
||||
|
|
@ -49,7 +107,18 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
|
|||
|
||||
const issueSubscriptionRemove = () => issueDetailStore.removeIssueSubscription(workspaceSlug, projectId, issueId);
|
||||
|
||||
const handleDeleteIssue = () => issueDetailStore.deleteIssue(workspaceSlug, projectId, issueId);
|
||||
const handleDeleteIssue = async () => {
|
||||
if (isArchived) await archivedIssuesStore.deleteArchivedIssue(workspaceSlug, projectId, issue!);
|
||||
else await issueStore.deleteIssue(workspaceSlug, projectId, issue!);
|
||||
const { query } = router;
|
||||
if (query.peekIssueId) {
|
||||
delete query.peekIssueId;
|
||||
router.push({
|
||||
pathname: router.pathname,
|
||||
query: { ...query },
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const userRole = userStore.currentProjectRole ?? 5;
|
||||
|
||||
|
|
@ -58,6 +127,11 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
|
|||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
issue={issue}
|
||||
isLoading={isLoading}
|
||||
isArchived={isArchived}
|
||||
handleCopyText={handleCopyText}
|
||||
redirectToIssueDetail={redirectToIssueDetail}
|
||||
issueUpdate={issueUpdate}
|
||||
issueReactionCreate={issueReactionCreate}
|
||||
issueReactionRemove={issueReactionRemove}
|
||||
|
|
|
|||
|
|
@ -3,26 +3,28 @@ import { useRouter } from "next/router";
|
|||
import { observer } from "mobx-react-lite";
|
||||
import useSWR from "swr";
|
||||
import { MoveRight, MoveDiagonal, Bell, Link2, Trash2 } from "lucide-react";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// components
|
||||
import { PeekOverviewIssueDetails } from "./issue-detail";
|
||||
import { PeekOverviewProperties } from "./properties";
|
||||
import { IssueComment } from "./activity";
|
||||
import { Button, CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon } from "@plane/ui";
|
||||
import { DeleteIssueModal } from "../delete-issue-modal";
|
||||
import { DeleteArchivedIssueModal } from "../delete-archived-issue-modal";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
import { RootStore } from "store/root";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// helpers
|
||||
import { copyUrlToClipboard } from "helpers/string.helper";
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
|
||||
interface IIssueView {
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
issueId: string;
|
||||
issue: IIssue | null;
|
||||
isLoading?: boolean;
|
||||
isArchived?: boolean;
|
||||
handleCopyText: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
||||
redirectToIssueDetail: () => void;
|
||||
issueUpdate: (issue: Partial<IIssue>) => void;
|
||||
issueReactionCreate: (reaction: string) => void;
|
||||
issueReactionRemove: (reaction: string) => void;
|
||||
|
|
@ -64,6 +66,11 @@ export const IssueView: FC<IIssueView> = observer((props) => {
|
|||
workspaceSlug,
|
||||
projectId,
|
||||
issueId,
|
||||
issue,
|
||||
isLoading,
|
||||
isArchived,
|
||||
handleCopyText,
|
||||
redirectToIssueDetail,
|
||||
issueUpdate,
|
||||
issueReactionCreate,
|
||||
issueReactionRemove,
|
||||
|
|
@ -88,20 +95,6 @@ export const IssueView: FC<IIssueView> = observer((props) => {
|
|||
const [peekMode, setPeekMode] = useState<TPeekModes>("side-peek");
|
||||
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/issues/${peekIssueId}`).then(() => {
|
||||
setToastAlert({
|
||||
type: "success",
|
||||
title: "Link Copied!",
|
||||
message: "Issue link copied to clipboard.",
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const updateRoutePeekId = () => {
|
||||
if (issueId != peekIssueId) {
|
||||
const { query } = router;
|
||||
|
|
@ -122,23 +115,6 @@ export const IssueView: FC<IIssueView> = observer((props) => {
|
|||
}
|
||||
};
|
||||
|
||||
const redirectToIssueDetail = () => {
|
||||
router.push({
|
||||
pathname: `/${workspaceSlug}/projects/${projectId}/issues/${issueId}`,
|
||||
});
|
||||
};
|
||||
|
||||
useSWR(
|
||||
workspaceSlug && projectId && issueId && peekIssueId && issueId === peekIssueId
|
||||
? `ISSUE_PEEK_OVERVIEW_${workspaceSlug}_${projectId}_${peekIssueId}`
|
||||
: null,
|
||||
async () => {
|
||||
if (workspaceSlug && projectId && issueId && peekIssueId && issueId === peekIssueId) {
|
||||
await issueDetailStore.fetchPeekIssueDetails(workspaceSlug, projectId, issueId);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
useSWR(
|
||||
workspaceSlug && projectId && issueId && peekIssueId && issueId === peekIssueId
|
||||
? `ISSUE_PEEK_OVERVIEW_SUBSCRIPTION_${workspaceSlug}_${projectId}_${peekIssueId}`
|
||||
|
|
@ -150,10 +126,9 @@ export const IssueView: FC<IIssueView> = observer((props) => {
|
|||
}
|
||||
);
|
||||
|
||||
const issue = issueDetailStore.getIssue;
|
||||
const issueReactions = issueDetailStore.getIssueReactions;
|
||||
const issueComments = issueDetailStore.getIssueComments;
|
||||
const issueSubscription = issueDetailStore.getIssueSubscription;
|
||||
const issueReactions = issueDetailStore.getIssueReactions || [];
|
||||
const issueComments = issueDetailStore.getIssueComments || [];
|
||||
const issueSubscription = issueDetailStore.getIssueSubscription || [];
|
||||
|
||||
const user = userStore?.currentUser;
|
||||
|
||||
|
|
@ -161,7 +136,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
{issue && (
|
||||
{issue && !isArchived && (
|
||||
<DeleteIssueModal
|
||||
isOpen={deleteIssueModal}
|
||||
handleClose={() => setDeleteIssueModal(false)}
|
||||
|
|
@ -169,6 +144,14 @@ export const IssueView: FC<IIssueView> = observer((props) => {
|
|||
onSubmit={handleDeleteIssue}
|
||||
/>
|
||||
)}
|
||||
{issue && isArchived && (
|
||||
<DeleteArchivedIssueModal
|
||||
data={issue}
|
||||
isOpen={deleteIssueModal}
|
||||
handleClose={() => setDeleteIssueModal(false)}
|
||||
onSubmit={handleDeleteIssue}
|
||||
/>
|
||||
)}
|
||||
<div className="w-full !text-base">
|
||||
{children && (
|
||||
<div onClick={updateRoutePeekId} className="w-full cursor-pointer">
|
||||
|
|
@ -229,18 +212,20 @@ export const IssueView: FC<IIssueView> = observer((props) => {
|
|||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
size="sm"
|
||||
prependIcon={<Bell className="h-3 w-3" />}
|
||||
variant="outline-primary"
|
||||
onClick={() =>
|
||||
issueSubscription && issueSubscription.subscribed
|
||||
? issueSubscriptionRemove
|
||||
: issueSubscriptionCreate
|
||||
}
|
||||
>
|
||||
{issueSubscription && issueSubscription.subscribed ? "Unsubscribe" : "Subscribe"}
|
||||
</Button>
|
||||
{!isArchived && (
|
||||
<Button
|
||||
size="sm"
|
||||
prependIcon={<Bell className="h-3 w-3" />}
|
||||
variant="outline-primary"
|
||||
onClick={() =>
|
||||
issueSubscription && issueSubscription.subscribed
|
||||
? issueSubscriptionRemove
|
||||
: issueSubscriptionCreate
|
||||
}
|
||||
>
|
||||
{issueSubscription && issueSubscription.subscribed ? "Unsubscribe" : "Subscribe"}
|
||||
</Button>
|
||||
)}
|
||||
<button onClick={handleCopyText}>
|
||||
<Link2 className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200 -rotate-45" />
|
||||
</button>
|
||||
|
|
@ -253,8 +238,11 @@ export const IssueView: FC<IIssueView> = observer((props) => {
|
|||
</div>
|
||||
|
||||
{/* content */}
|
||||
<div className="w-full h-full overflow-hidden overflow-y-auto">
|
||||
{issueDetailStore?.loader && !issue ? (
|
||||
<div className="relative w-full h-full overflow-hidden overflow-y-auto">
|
||||
{isArchived && (
|
||||
<div className="absolute top-0 left-0 h-full w-full z-[999] flex items-center justify-center bg-custom-background-100 opacity-60" />
|
||||
)}
|
||||
{isLoading && !issue ? (
|
||||
<div className="text-center py-10">Loading...</div>
|
||||
) : (
|
||||
issue && (
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { useRouter } from "next/router";
|
|||
import { AppLayout } from "layouts/app-layout";
|
||||
// contexts
|
||||
import { IssueViewContextProvider } from "contexts/issue-view.context";
|
||||
import { ArchivedIssueLayoutRoot } from "components/issues";
|
||||
// ui
|
||||
import { ArchiveIcon } from "@plane/ui";
|
||||
import { ProjectArchivedIssuesHeader } from "components/headers";
|
||||
|
|
@ -29,7 +30,7 @@ const ProjectArchivedIssuesPage: NextPageWithLayout = () => {
|
|||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
{/* <IssuesView /> */}
|
||||
<ArchivedIssueLayoutRoot />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,2 +1,3 @@
|
|||
export * from "./issue.store";
|
||||
export * from "./issue_filters.store";
|
||||
export * from "./issue_detail.store";
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import { observable, action, computed, makeObservable, runInAction } from "mobx";
|
||||
import { observable, action, computed, makeObservable, runInAction, autorun } from "mobx";
|
||||
// store
|
||||
import { RootStore } from "../root";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
// services
|
||||
import { IssueService } from "services/issue";
|
||||
import { IssueArchiveService } from "services/issue";
|
||||
import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers";
|
||||
import {
|
||||
IIssueGroupWithSubGroupsStructure,
|
||||
|
|
@ -24,12 +24,23 @@ export interface IArchivedIssueStore {
|
|||
ungrouped: IIssueUnGroupedStructure;
|
||||
};
|
||||
};
|
||||
issueDetail: {
|
||||
[project_id: string]: {
|
||||
[issue_id: string]: IIssue;
|
||||
};
|
||||
};
|
||||
|
||||
// services
|
||||
archivedIssueService: IssueArchiveService;
|
||||
|
||||
// computed
|
||||
getIssueType: IIssueType | null;
|
||||
getIssues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null;
|
||||
|
||||
// action
|
||||
fetchIssues: (workspaceSlug: string, projectId: string) => Promise<any>;
|
||||
updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
|
||||
deleteArchivedIssue: (group: string | null, sub_group: string | null, issue: IIssue) => Promise<any>;
|
||||
}
|
||||
|
||||
export class ArchivedIssueStore implements IArchivedIssueStore {
|
||||
|
|
@ -48,8 +59,10 @@ export class ArchivedIssueStore implements IArchivedIssueStore {
|
|||
ungrouped: IIssue[];
|
||||
};
|
||||
} = {};
|
||||
issueDetail: IArchivedIssueStore["issueDetail"] = {};
|
||||
|
||||
// service
|
||||
issueService;
|
||||
archivedIssueService;
|
||||
rootStore;
|
||||
|
||||
constructor(_rootStore: RootStore) {
|
||||
|
|
@ -58,34 +71,36 @@ export class ArchivedIssueStore implements IArchivedIssueStore {
|
|||
loader: observable.ref,
|
||||
error: observable.ref,
|
||||
issues: observable.ref,
|
||||
|
||||
// computed
|
||||
getIssueType: computed,
|
||||
getIssues: computed,
|
||||
|
||||
// actions
|
||||
fetchIssues: action,
|
||||
updateIssueStructure: action,
|
||||
deleteArchivedIssue: action,
|
||||
});
|
||||
this.rootStore = _rootStore;
|
||||
this.issueService = new IssueService();
|
||||
this.archivedIssueService = new IssueArchiveService();
|
||||
|
||||
autorun(() => {
|
||||
const workspaceSlug = this.rootStore.workspace.workspaceSlug;
|
||||
const projectId = this.rootStore.project.projectId;
|
||||
|
||||
if (
|
||||
workspaceSlug &&
|
||||
projectId &&
|
||||
this.rootStore.archivedIssueFilters.userDisplayFilters &&
|
||||
this.rootStore.archivedIssueFilters.userFilters
|
||||
)
|
||||
this.fetchIssues(workspaceSlug, projectId);
|
||||
});
|
||||
}
|
||||
|
||||
get getIssueType() {
|
||||
const groupedLayouts = ["kanban", "list", "calendar"];
|
||||
const ungroupedLayouts = ["spreadsheet", "gantt_chart"];
|
||||
|
||||
const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
|
||||
const issueSubGroup = this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by || null;
|
||||
if (!issueLayout) return null;
|
||||
|
||||
const _issueState = groupedLayouts.includes(issueLayout)
|
||||
? issueSubGroup
|
||||
? "groupWithSubGroups"
|
||||
: "grouped"
|
||||
: ungroupedLayouts.includes(issueLayout)
|
||||
? "ungrouped"
|
||||
: null;
|
||||
|
||||
return _issueState || null;
|
||||
const issueSubGroup = this.rootStore.archivedIssueFilters.userDisplayFilters?.sub_group_by || null;
|
||||
return issueSubGroup ? "groupWithSubGroups" : "grouped";
|
||||
}
|
||||
|
||||
get getIssues() {
|
||||
|
|
@ -122,10 +137,6 @@ export class ArchivedIssueStore implements IArchivedIssueStore {
|
|||
},
|
||||
};
|
||||
}
|
||||
if (issueType === "ungrouped") {
|
||||
issues = issues as IIssueUnGroupedStructure;
|
||||
issues = issues.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i));
|
||||
}
|
||||
|
||||
const orderBy = this.rootStore?.issueFilter?.userDisplayFilters?.order_by || "";
|
||||
if (orderBy === "-created_at") {
|
||||
|
|
@ -154,8 +165,8 @@ export class ArchivedIssueStore implements IArchivedIssueStore {
|
|||
this.rootStore.workspace.setWorkspaceSlug(workspaceSlug);
|
||||
this.rootStore.project.setProjectId(projectId);
|
||||
|
||||
const params = this.rootStore?.issueFilter?.appliedFilters;
|
||||
const issueResponse = await this.issueService.getIssuesWithParams(workspaceSlug, projectId, params);
|
||||
const params = this.rootStore.archivedIssueFilters.appliedFilters;
|
||||
const issueResponse = await this.archivedIssueService.getArchivedIssues(workspaceSlug, projectId, params);
|
||||
|
||||
const issueType = this.getIssueType;
|
||||
if (issueType != null) {
|
||||
|
|
@ -178,7 +189,42 @@ export class ArchivedIssueStore implements IArchivedIssueStore {
|
|||
console.error("Error: Fetching error in issues", error);
|
||||
this.loader = false;
|
||||
this.error = error;
|
||||
return error;
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @description Function to delete issue from the store. NOTE: This function is not deleting issue from the backend.
|
||||
*/
|
||||
deleteArchivedIssue = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
|
||||
const projectId: string | null = issue?.project;
|
||||
const issueType = this.getIssueType;
|
||||
if (!projectId || !issueType) return null;
|
||||
|
||||
let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
|
||||
this.getIssues;
|
||||
if (!issues) return null;
|
||||
|
||||
if (issueType === "grouped" && group_id) {
|
||||
issues = issues as IIssueGroupedStructure;
|
||||
issues = {
|
||||
...issues,
|
||||
[group_id]: issues?.[group_id]?.filter((i) => i?.id !== issue?.id),
|
||||
};
|
||||
}
|
||||
if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
|
||||
issues = issues as IIssueGroupWithSubGroupsStructure;
|
||||
issues = {
|
||||
...issues,
|
||||
[sub_group_id]: {
|
||||
...issues?.[sub_group_id],
|
||||
[group_id]: issues?.[sub_group_id]?.[group_id]?.filter((i) => i?.id !== issue?.id),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
runInAction(() => {
|
||||
this.issues = { ...this.issues, [projectId]: { ...this.issues[projectId], [issueType]: issues } };
|
||||
});
|
||||
};
|
||||
}
|
||||
|
|
|
|||
198
web/store/archived-issues/issue_detail.store.ts
Normal file
198
web/store/archived-issues/issue_detail.store.ts
Normal file
|
|
@ -0,0 +1,198 @@
|
|||
import { observable, action, makeObservable, runInAction, computed } from "mobx";
|
||||
// store
|
||||
import { RootStore } from "../root";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
// services
|
||||
import { IssueArchiveService } from "services/issue";
|
||||
|
||||
export interface IArchivedIssueDetailStore {
|
||||
loader: boolean;
|
||||
error: any | null;
|
||||
// issues
|
||||
issueDetail: {
|
||||
[issue_id: string]: IIssue;
|
||||
};
|
||||
peekId: string | null;
|
||||
|
||||
// services
|
||||
archivedIssueService: IssueArchiveService;
|
||||
|
||||
// computed
|
||||
getIssue: IIssue | null;
|
||||
|
||||
// action
|
||||
deleteArchivedIssue: (workspaceSlug: string, projectId: string, issuesId: string) => Promise<any>;
|
||||
unarchiveIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<any>;
|
||||
fetchIssueDetails: (workspaceSlug: string, projectId: string, issueId: string) => Promise<any>;
|
||||
fetchPeekIssueDetails: (workspaceSlug: string, projectId: string, issueId: string) => Promise<any>;
|
||||
}
|
||||
|
||||
export class ArchivedIssueDetailStore implements IArchivedIssueDetailStore {
|
||||
loader: boolean = false;
|
||||
error: any | null = null;
|
||||
issueDetail: IArchivedIssueDetailStore["issueDetail"] = {};
|
||||
peekId: string | null = null;
|
||||
|
||||
// service
|
||||
archivedIssueService;
|
||||
rootStore;
|
||||
|
||||
constructor(_rootStore: RootStore) {
|
||||
makeObservable(this, {
|
||||
// observable
|
||||
loader: observable.ref,
|
||||
error: observable.ref,
|
||||
issueDetail: observable.ref,
|
||||
peekId: observable.ref,
|
||||
|
||||
// computed
|
||||
getIssue: computed,
|
||||
|
||||
// actions
|
||||
deleteArchivedIssue: action,
|
||||
unarchiveIssue: action,
|
||||
fetchIssueDetails: action,
|
||||
fetchPeekIssueDetails: action,
|
||||
});
|
||||
this.rootStore = _rootStore;
|
||||
this.archivedIssueService = new IssueArchiveService();
|
||||
}
|
||||
|
||||
get getIssue() {
|
||||
if (!this.peekId) return null;
|
||||
const _issue = this.issueDetail[this.peekId];
|
||||
return _issue || null;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Function to delete archived issue from the detail store and backend.
|
||||
*/
|
||||
deleteArchivedIssue = async (workspaceSlug: string, projectId: string, issuesId: string) => {
|
||||
const originalIssues = { ...this.issueDetail };
|
||||
|
||||
const _issues = { ...this.issueDetail };
|
||||
delete _issues[issuesId];
|
||||
|
||||
// optimistically deleting item from store
|
||||
runInAction(() => {
|
||||
this.issueDetail = _issues;
|
||||
});
|
||||
|
||||
try {
|
||||
runInAction(() => {
|
||||
this.loader = true;
|
||||
this.error = null;
|
||||
});
|
||||
|
||||
// deleting using api
|
||||
const issueResponse = await this.archivedIssueService.deleteArchivedIssue(workspaceSlug, projectId, issuesId);
|
||||
|
||||
runInAction(() => {
|
||||
this.loader = false;
|
||||
this.error = null;
|
||||
});
|
||||
|
||||
return issueResponse;
|
||||
} catch (error) {
|
||||
console.error("Error: Fetching error in issues", error);
|
||||
runInAction(() => {
|
||||
this.loader = false;
|
||||
this.error = error;
|
||||
// reverting back to original issues
|
||||
this.issueDetail = originalIssues;
|
||||
});
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
fetchIssueDetails = async (workspaceSlug: string, projectId: string, issueId: string) => {
|
||||
try {
|
||||
runInAction(() => {
|
||||
this.loader = true;
|
||||
this.error = null;
|
||||
});
|
||||
|
||||
const issueResponse = await this.archivedIssueService.retrieveArchivedIssue(workspaceSlug, projectId, issueId);
|
||||
|
||||
runInAction(() => {
|
||||
this.loader = false;
|
||||
this.error = null;
|
||||
this.issueDetail = {
|
||||
...this.issueDetail,
|
||||
[issueId]: issueResponse,
|
||||
};
|
||||
});
|
||||
|
||||
return issueResponse;
|
||||
} catch (error) {
|
||||
console.error("Error: Fetching error in issues", error);
|
||||
runInAction(() => {
|
||||
this.loader = false;
|
||||
this.error = error;
|
||||
});
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
unarchiveIssue = async (workspaceSlug: string, projectId: string, issueId: string) => {
|
||||
try {
|
||||
runInAction(() => {
|
||||
this.loader = true;
|
||||
this.error = null;
|
||||
});
|
||||
|
||||
const issueResponse = await this.archivedIssueService.unarchiveIssue(workspaceSlug, projectId, issueId);
|
||||
this.rootStore.archivedIssues.fetchIssues(workspaceSlug, projectId);
|
||||
|
||||
// deleting from issue detail store
|
||||
const _issues = { ...this.issueDetail };
|
||||
delete _issues[issueId];
|
||||
runInAction(() => {
|
||||
this.issueDetail = _issues;
|
||||
});
|
||||
|
||||
return issueResponse;
|
||||
} catch (error) {
|
||||
console.error("Error: Fetching error in issues", error);
|
||||
runInAction(() => {
|
||||
this.loader = false;
|
||||
this.error = error;
|
||||
});
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
fetchPeekIssueDetails = async (workspaceSlug: string, projectId: string, issueId: string) => {
|
||||
runInAction(() => {
|
||||
this.loader = true;
|
||||
this.error = null;
|
||||
this.peekId = issueId;
|
||||
});
|
||||
|
||||
try {
|
||||
const issueResponse = await this.archivedIssueService.retrieveArchivedIssue(workspaceSlug, projectId, issueId);
|
||||
await this.rootStore.issueDetail.fetchIssueReactions(workspaceSlug, projectId, issueId);
|
||||
await this.rootStore.issueDetail.fetchIssueComments(workspaceSlug, projectId, issueId);
|
||||
|
||||
runInAction(() => {
|
||||
this.loader = false;
|
||||
this.error = null;
|
||||
this.issueDetail = {
|
||||
...this.issueDetail,
|
||||
[issueId]: issueResponse,
|
||||
};
|
||||
});
|
||||
|
||||
return issueResponse;
|
||||
} catch (error) {
|
||||
console.error("Error: Fetching error in issues", error);
|
||||
runInAction(() => {
|
||||
this.loader = false;
|
||||
this.error = error;
|
||||
this.peekId = null;
|
||||
});
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -1,20 +1,53 @@
|
|||
import { observable, computed, makeObservable } from "mobx";
|
||||
import { observable, computed, makeObservable, action, runInAction } from "mobx";
|
||||
// helpers
|
||||
import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
|
||||
// services
|
||||
import { IssueService } from "services/issue";
|
||||
import { ProjectService } from "services/project";
|
||||
// types
|
||||
import { RootStore } from "../root";
|
||||
import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueParams } from "types";
|
||||
import {
|
||||
IIssueDisplayFilterOptions,
|
||||
IIssueDisplayProperties,
|
||||
IIssueFilterOptions,
|
||||
TIssueParams,
|
||||
IProjectViewProps,
|
||||
} from "types";
|
||||
|
||||
export interface IArchivedIssueFilterStore {
|
||||
loader: boolean;
|
||||
error: any | null;
|
||||
|
||||
// observables
|
||||
userDisplayProperties: IIssueDisplayProperties;
|
||||
userDisplayFilters: IIssueDisplayFilterOptions;
|
||||
userFilters: IIssueFilterOptions;
|
||||
|
||||
// services
|
||||
projectService: ProjectService;
|
||||
issueService: IssueService;
|
||||
|
||||
// computed
|
||||
appliedFilters: TIssueParams[] | null;
|
||||
|
||||
// actions
|
||||
fetchUserProjectFilters: (workspaceSlug: string, projectId: string) => Promise<void>;
|
||||
updateUserFilters: (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
properties: Partial<IProjectViewProps>
|
||||
) => Promise<void>;
|
||||
updateDisplayProperties: (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
properties: Partial<IIssueDisplayProperties>
|
||||
) => Promise<void>;
|
||||
}
|
||||
|
||||
export class ArchivedIssueFilterStore implements IArchivedIssueFilterStore {
|
||||
loader: boolean = false;
|
||||
error: any | null = null;
|
||||
|
||||
// observables
|
||||
userFilters: IIssueFilterOptions = {
|
||||
priority: null,
|
||||
|
|
@ -52,6 +85,10 @@ export class ArchivedIssueFilterStore implements IArchivedIssueFilterStore {
|
|||
// root store
|
||||
rootStore;
|
||||
|
||||
// services
|
||||
projectService: ProjectService;
|
||||
issueService: IssueService;
|
||||
|
||||
constructor(_rootStore: RootStore) {
|
||||
makeObservable(this, {
|
||||
// observables
|
||||
|
|
@ -61,9 +98,19 @@ export class ArchivedIssueFilterStore implements IArchivedIssueFilterStore {
|
|||
|
||||
// computed
|
||||
appliedFilters: computed,
|
||||
|
||||
// actions
|
||||
fetchUserProjectFilters: action,
|
||||
updateUserFilters: action,
|
||||
updateDisplayProperties: action,
|
||||
computedFilter: action,
|
||||
});
|
||||
|
||||
this.rootStore = _rootStore;
|
||||
|
||||
// services
|
||||
this.issueService = new IssueService();
|
||||
this.projectService = new ProjectService();
|
||||
}
|
||||
|
||||
computedFilter = (filters: any, filteredParams: any) => {
|
||||
|
|
@ -89,7 +136,7 @@ export class ArchivedIssueFilterStore implements IArchivedIssueFilterStore {
|
|||
labels: this.userFilters?.labels || undefined,
|
||||
start_date: this.userFilters?.start_date || undefined,
|
||||
target_date: this.userFilters?.target_date || undefined,
|
||||
group_by: this.userDisplayFilters?.group_by || "state",
|
||||
group_by: this.userDisplayFilters?.group_by,
|
||||
order_by: this.userDisplayFilters?.order_by || "-created_at",
|
||||
sub_group_by: this.userDisplayFilters?.sub_group_by || undefined,
|
||||
type: this.userDisplayFilters?.type || undefined,
|
||||
|
|
@ -98,12 +145,100 @@ export class ArchivedIssueFilterStore implements IArchivedIssueFilterStore {
|
|||
start_target_date: this.userDisplayFilters?.start_target_date || true,
|
||||
};
|
||||
|
||||
const filteredParams = handleIssueQueryParamsByLayout(this.userDisplayFilters.layout, "issues");
|
||||
const filteredParams = handleIssueQueryParamsByLayout("list", "issues");
|
||||
if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
|
||||
|
||||
if (this.userDisplayFilters.layout === "calendar") filteredRouteParams.group_by = "target_date";
|
||||
if (this.userDisplayFilters.layout === "gantt_chart") filteredRouteParams.start_target_date = true;
|
||||
|
||||
return filteredRouteParams;
|
||||
}
|
||||
|
||||
updateUserFilters = async (workspaceSlug: string, projectId: string, properties: Partial<IProjectViewProps>) => {
|
||||
const newViewProps = {
|
||||
display_filters: {
|
||||
...this.userDisplayFilters,
|
||||
...properties.display_filters,
|
||||
},
|
||||
filters: {
|
||||
...this.userFilters,
|
||||
...properties.filters,
|
||||
},
|
||||
};
|
||||
|
||||
// set sub_group_by to null if group_by is set to null
|
||||
if (newViewProps.display_filters.group_by === null) newViewProps.display_filters.sub_group_by = null;
|
||||
|
||||
// set group_by to state if layout is switched to kanban and group_by is null
|
||||
if (newViewProps.display_filters.layout === "kanban" && newViewProps.display_filters.group_by === null)
|
||||
newViewProps.display_filters.group_by = "state";
|
||||
|
||||
try {
|
||||
runInAction(() => {
|
||||
this.userFilters = newViewProps.filters;
|
||||
this.userDisplayFilters = {
|
||||
...newViewProps.display_filters,
|
||||
layout: "list",
|
||||
};
|
||||
});
|
||||
|
||||
this.projectService.setProjectView(workspaceSlug, projectId, {
|
||||
view_props: newViewProps,
|
||||
});
|
||||
} catch (error) {
|
||||
this.fetchUserProjectFilters(workspaceSlug, projectId);
|
||||
|
||||
runInAction(() => {
|
||||
this.error = error;
|
||||
});
|
||||
|
||||
console.log("Failed to update user filters in issue filter store", error);
|
||||
}
|
||||
};
|
||||
|
||||
updateDisplayProperties = async (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
properties: Partial<IIssueDisplayProperties>
|
||||
) => {
|
||||
const newProperties: IIssueDisplayProperties = {
|
||||
...this.userDisplayProperties,
|
||||
...properties,
|
||||
};
|
||||
|
||||
try {
|
||||
runInAction(() => {
|
||||
this.userDisplayProperties = newProperties;
|
||||
});
|
||||
|
||||
await this.issueService.updateIssueDisplayProperties(workspaceSlug, projectId, newProperties);
|
||||
} catch (error) {
|
||||
this.fetchUserProjectFilters(workspaceSlug, projectId);
|
||||
|
||||
runInAction(() => {
|
||||
this.error = error;
|
||||
});
|
||||
|
||||
console.log("Failed to update user display properties in issue filter store", error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchUserProjectFilters = async (workspaceSlug: string, projectId: string) => {
|
||||
try {
|
||||
const memberResponse = await this.projectService.projectMemberMe(workspaceSlug, projectId);
|
||||
const issueProperties = await this.issueService.getIssueDisplayProperties(workspaceSlug, projectId);
|
||||
|
||||
runInAction(() => {
|
||||
this.userFilters = memberResponse?.view_props?.filters;
|
||||
this.userDisplayFilters = {
|
||||
...(memberResponse?.view_props?.display_filters ?? {}),
|
||||
layout: "list",
|
||||
};
|
||||
this.userDisplayProperties = issueProperties?.properties;
|
||||
});
|
||||
} catch (error) {
|
||||
runInAction(() => {
|
||||
this.error = error;
|
||||
});
|
||||
|
||||
console.log("Failed to fetch user filters in issue filter store", error);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -85,6 +85,8 @@ import {
|
|||
IArchivedIssueStore,
|
||||
ArchivedIssueFilterStore,
|
||||
IArchivedIssueFilterStore,
|
||||
ArchivedIssueDetailStore,
|
||||
IArchivedIssueDetailStore,
|
||||
} from "store/archived-issues";
|
||||
import { DraftIssueStore, IDraftIssueStore, DraftIssueFilterStore, IDraftIssueFilterStore } from "store/draft-issues";
|
||||
import {
|
||||
|
|
@ -151,6 +153,7 @@ export class RootStore {
|
|||
profileIssueFilters: IProfileIssueFilterStore;
|
||||
|
||||
archivedIssues: IArchivedIssueStore;
|
||||
archivedIssueDetail: IArchivedIssueDetailStore;
|
||||
archivedIssueFilters: IArchivedIssueFilterStore;
|
||||
|
||||
draftIssues: IDraftIssueStore;
|
||||
|
|
@ -212,6 +215,7 @@ export class RootStore {
|
|||
this.profileIssueFilters = new ProfileIssueFilterStore(this);
|
||||
|
||||
this.archivedIssues = new ArchivedIssueStore(this);
|
||||
this.archivedIssueDetail = new ArchivedIssueDetailStore(this);
|
||||
this.archivedIssueFilters = new ArchivedIssueFilterStore(this);
|
||||
|
||||
this.draftIssues = new DraftIssueStore(this);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue