mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
chore: replace workspace slug and project id with anchor
This commit is contained in:
Aaryan Khandelwal
parent
dc436f60fa
commit
1c3a27deaa
@ -1,8 +1,8 @@
|
||||
type Props = {
|
||||
children: React.ReactNode;
|
||||
params: {
|
||||
workspace_slug: string;
|
||||
project_id: string;
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
};
|
||||
};
|
||||
|
||||
@ -12,14 +12,14 @@ const publishService = new PublishService();
|
||||
|
||||
type Props = {
|
||||
params: {
|
||||
workspace_slug: string;
|
||||
project_id: string;
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
};
|
||||
};
|
||||
|
||||
const ProjectIssuesPage = (props: Props) => {
|
||||
const { params } = props;
|
||||
const { workspace_slug, project_id } = params;
|
||||
const { workspaceSlug, projectId } = params;
|
||||
// states
|
||||
const [error, setError] = useState(false);
|
||||
// params
|
||||
@ -28,9 +28,9 @@ const ProjectIssuesPage = (props: Props) => {
|
||||
const peekId = searchParams.get("peekId") || undefined;
|
||||
|
||||
useEffect(() => {
|
||||
if (!workspace_slug || !project_id) return;
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
publishService
|
||||
.fetchAnchorFromOldDetails(workspace_slug, project_id)
|
||||
.fetchAnchorFromOldDetails(workspaceSlug, projectId)
|
||||
.then((res) => {
|
||||
let url = `/${res.anchor}`;
|
||||
const params = new URLSearchParams();
|
||||
@ -40,7 +40,7 @@ const ProjectIssuesPage = (props: Props) => {
|
||||
navigate(url);
|
||||
})
|
||||
.catch(() => setError(true));
|
||||
}, [board, peekId, project_id, workspace_slug]);
|
||||
}, [board, peekId, projectId, workspaceSlug]);
|
||||
|
||||
if (error) notFound();
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { observer } from "mobx-react";
|
||||
import Image from "next/image";
|
||||
import { notFound } from "next/navigation";
|
||||
// components
|
||||
@ -16,7 +16,8 @@ const PageDetailsLayout = (props: Props) => {
|
||||
const { anchor } = params;
|
||||
// store hooks
|
||||
const { fetchPublishSettings } = usePublishList();
|
||||
const { id, workspace_detail, project } = usePublish(anchor);
|
||||
const publishSettings = usePublish(anchor);
|
||||
const { id, workspace_detail, project } = publishSettings;
|
||||
|
||||
useSWR(anchor ? `PUBLISH_SETTINGS_${anchor}` : null, anchor ? () => fetchPublishSettings(anchor) : null);
|
||||
|
||||
@ -25,7 +26,7 @@ const PageDetailsLayout = (props: Props) => {
|
||||
return (
|
||||
<div className="relative flex h-screen min-h-[500px] w-screen flex-col overflow-hidden">
|
||||
<div className="relative flex h-[60px] flex-shrink-0 select-none items-center border-b border-custom-border-300 bg-custom-sidebar-background-100">
|
||||
<IssueNavbar workspaceSlug={workspace_detail.slug} projectId={project} />
|
||||
<IssueNavbar publishSettings={publishSettings} />
|
||||
</div>
|
||||
<div className="relative h-full w-full overflow-hidden bg-custom-background-90">{children}</div>
|
||||
<a
|
||||
|
||||
@ -10,18 +10,19 @@ import { IssueBlockState } from "@/components/issues/board-views/block-state";
|
||||
// helpers
|
||||
import { queryParamGenerator } from "@/helpers/query-param-generator";
|
||||
// hooks
|
||||
import { useIssueDetails, useProject } from "@/hooks/store";
|
||||
import { useIssueDetails, usePublish } from "@/hooks/store";
|
||||
// interfaces
|
||||
import { IIssue } from "@/types/issue";
|
||||
|
||||
type IssueKanBanBlockProps = {
|
||||
anchor: string;
|
||||
issue: IIssue;
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
params: any;
|
||||
};
|
||||
|
||||
export const IssueKanBanBlock: FC<IssueKanBanBlockProps> = observer((props) => {
|
||||
const { anchor, issue } = props;
|
||||
// router
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
// query params
|
||||
@ -29,23 +30,21 @@ export const IssueKanBanBlock: FC<IssueKanBanBlockProps> = observer((props) => {
|
||||
const state = searchParams.get("state") || undefined;
|
||||
const priority = searchParams.get("priority") || undefined;
|
||||
const labels = searchParams.get("labels") || undefined;
|
||||
// props
|
||||
const { workspaceSlug, projectId, issue } = props;
|
||||
// hooks
|
||||
const { project } = useProject();
|
||||
// store hooks
|
||||
const { project_details } = usePublish(anchor);
|
||||
const { setPeekId } = useIssueDetails();
|
||||
|
||||
const handleBlockClick = () => {
|
||||
setPeekId(issue.id);
|
||||
const { queryParam } = queryParamGenerator({ board, peekId: issue.id, priority, state, labels });
|
||||
router.push(`/${workspaceSlug}/${projectId}?${queryParam}`);
|
||||
router.push(`/issues/${anchor}?${queryParam}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-1.5 space-y-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-3 py-2 text-sm shadow-custom-shadow-2xs">
|
||||
{/* id */}
|
||||
<div className="break-words text-xs text-custom-text-300">
|
||||
{project?.identifier}-{issue?.sequence_id}
|
||||
{project_details?.identifier}-{issue?.sequence_id}
|
||||
</div>
|
||||
|
||||
{/* name */}
|
||||
|
||||
@ -9,39 +9,31 @@ import { IssueKanBanHeader } from "@/components/issues/board-views/kanban/header
|
||||
import { Icon } from "@/components/ui";
|
||||
// mobx hook
|
||||
import { useIssue } from "@/hooks/store";
|
||||
// interfaces
|
||||
import { IIssueState, IIssue } from "@/types/issue";
|
||||
|
||||
type IssueKanbanViewProps = {
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
anchor: string;
|
||||
};
|
||||
|
||||
export const IssueKanbanView: FC<IssueKanbanViewProps> = observer((props) => {
|
||||
const { workspaceSlug, projectId } = props;
|
||||
const { anchor } = props;
|
||||
// store hooks
|
||||
const { states, getFilteredIssuesByState } = useIssue();
|
||||
|
||||
return (
|
||||
<div className="relative flex h-full w-full gap-3 overflow-hidden overflow-x-auto">
|
||||
{states &&
|
||||
states.length > 0 &&
|
||||
states.map((_state: IIssueState) => (
|
||||
<div key={_state.id} className="relative flex h-full w-[340px] flex-shrink-0 flex-col">
|
||||
{states?.map((state) => {
|
||||
const issues = getFilteredIssuesByState(state.id);
|
||||
|
||||
return (
|
||||
<div key={state.id} className="relative flex h-full w-[340px] flex-shrink-0 flex-col">
|
||||
<div className="flex-shrink-0">
|
||||
<IssueKanBanHeader state={_state} />
|
||||
<IssueKanBanHeader state={state} />
|
||||
</div>
|
||||
<div className="hide-vertical-scrollbar h-full w-full overflow-hidden overflow-y-auto">
|
||||
{getFilteredIssuesByState(_state.id) && getFilteredIssuesByState(_state.id).length > 0 ? (
|
||||
{issues && issues.length > 0 ? (
|
||||
<div className="space-y-3 px-2 pb-2">
|
||||
{getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
|
||||
<IssueKanBanBlock
|
||||
key={_issue.id}
|
||||
issue={_issue}
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
params={{}}
|
||||
/>
|
||||
{issues.map((issue) => (
|
||||
<IssueKanBanBlock key={issue.id} anchor={anchor} issue={issue} params={{}} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
@ -52,7 +44,8 @@ export const IssueKanbanView: FC<IssueKanbanViewProps> = observer((props) => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
@ -10,28 +10,27 @@ import { IssueBlockState } from "@/components/issues/board-views/block-state";
|
||||
// helpers
|
||||
import { queryParamGenerator } from "@/helpers/query-param-generator";
|
||||
// hook
|
||||
import { useIssueDetails, useProject } from "@/hooks/store";
|
||||
import { useIssueDetails, usePublish } from "@/hooks/store";
|
||||
// interfaces
|
||||
import { IIssue } from "@/types/issue";
|
||||
// store
|
||||
|
||||
type IssueListBlockProps = {
|
||||
anchor: string;
|
||||
issue: IIssue;
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
};
|
||||
|
||||
export const IssueListBlock: FC<IssueListBlockProps> = observer((props) => {
|
||||
const { workspaceSlug, projectId, issue } = props;
|
||||
const { anchor, issue } = props;
|
||||
const searchParams = useSearchParams();
|
||||
// query params
|
||||
const board = searchParams.get("board") || undefined;
|
||||
const state = searchParams.get("state") || undefined;
|
||||
const priority = searchParams.get("priority") || undefined;
|
||||
const labels = searchParams.get("labels") || undefined;
|
||||
// store
|
||||
const { project } = useProject();
|
||||
// store hooks
|
||||
const { setPeekId } = useIssueDetails();
|
||||
const { project_details } = usePublish(anchor);
|
||||
// router
|
||||
const router = useRouter();
|
||||
|
||||
@ -39,7 +38,7 @@ export const IssueListBlock: FC<IssueListBlockProps> = observer((props) => {
|
||||
setPeekId(issue.id);
|
||||
|
||||
const { queryParam } = queryParamGenerator({ board, peekId: issue.id, priority, state, labels });
|
||||
router.push(`/${workspaceSlug}/${projectId}?${queryParam}`);
|
||||
router.push(`/issues/${anchor}?${queryParam}`);
|
||||
};
|
||||
|
||||
return (
|
||||
@ -47,7 +46,7 @@ export const IssueListBlock: FC<IssueListBlockProps> = observer((props) => {
|
||||
<div className="relative flex w-full flex-grow items-center gap-3 overflow-hidden">
|
||||
{/* id */}
|
||||
<div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
|
||||
{project?.identifier}-{issue?.sequence_id}
|
||||
{project_details?.identifier}-{issue?.sequence_id}
|
||||
</div>
|
||||
{/* name */}
|
||||
<div onClick={handleBlockClick} className="flex-grow cursor-pointer truncate text-sm font-medium">
|
||||
|
||||
@ -6,37 +6,36 @@ import { IssueListBlock } from "@/components/issues/board-views/list/block";
|
||||
import { IssueListHeader } from "@/components/issues/board-views/list/header";
|
||||
// mobx hook
|
||||
import { useIssue } from "@/hooks/store";
|
||||
// types
|
||||
import { IIssueState, IIssue } from "@/types/issue";
|
||||
|
||||
type IssueListViewProps = {
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
anchor: string;
|
||||
};
|
||||
|
||||
export const IssueListView: FC<IssueListViewProps> = observer((props) => {
|
||||
const { workspaceSlug, projectId } = props;
|
||||
const { anchor } = props;
|
||||
// store hooks
|
||||
const { states, getFilteredIssuesByState } = useIssue();
|
||||
|
||||
return (
|
||||
<>
|
||||
{states &&
|
||||
states.length > 0 &&
|
||||
states.map((_state: IIssueState) => (
|
||||
<div key={_state.id} className="relative w-full">
|
||||
<IssueListHeader state={_state} />
|
||||
{getFilteredIssuesByState(_state.id) && getFilteredIssuesByState(_state.id).length > 0 ? (
|
||||
{states?.map((state) => {
|
||||
const issues = getFilteredIssuesByState(state.id);
|
||||
|
||||
return (
|
||||
<div key={state.id} className="relative w-full">
|
||||
<IssueListHeader state={state} />
|
||||
{issues && issues.length > 0 ? (
|
||||
<div className="divide-y divide-custom-border-200">
|
||||
{getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
|
||||
<IssueListBlock key={_issue.id} issue={_issue} workspaceSlug={workspaceSlug} projectId={projectId} />
|
||||
{issues.map((issue) => (
|
||||
<IssueListBlock key={issue.id} anchor={anchor} issue={issue} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-custom-background-100 p-3 text-sm text-custom-text-400">No issues.</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
@ -5,24 +5,24 @@ import cloneDeep from "lodash/cloneDeep";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useRouter } from "next/navigation";
|
||||
// hooks
|
||||
import { useIssue, useIssueFilter } from "@/hooks/store";
|
||||
import { useIssue, useIssueFilter, usePublish } from "@/hooks/store";
|
||||
// store
|
||||
import { TIssueQueryFilters } from "@/types/issue";
|
||||
// components
|
||||
import { AppliedFiltersList } from "./filters-list";
|
||||
|
||||
type TIssueAppliedFilters = {
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
anchor: string;
|
||||
};
|
||||
|
||||
export const IssueAppliedFilters: FC<TIssueAppliedFilters> = observer((props) => {
|
||||
const { anchor } = props;
|
||||
// router
|
||||
const router = useRouter();
|
||||
// props
|
||||
const { workspaceSlug, projectId } = props;
|
||||
// hooks
|
||||
// store hooks
|
||||
const { issueFilters, initIssueFilters, updateIssueFilters } = useIssueFilter();
|
||||
const { states, labels } = useIssue();
|
||||
const { project: projectID } = usePublish(anchor);
|
||||
|
||||
const activeLayout = issueFilters?.display_filters?.layout || undefined;
|
||||
const userFilters = issueFilters?.filters || {};
|
||||
@ -46,30 +46,30 @@ export const IssueAppliedFilters: FC<TIssueAppliedFilters> = observer((props) =>
|
||||
if (labels.length > 0) params = { ...params, labels: labels.join(",") };
|
||||
params = new URLSearchParams(params).toString();
|
||||
|
||||
router.push(`/${workspaceSlug}/${projectId}?${params}`);
|
||||
router.push(`/issues/${anchor}?${params}`);
|
||||
},
|
||||
[workspaceSlug, projectId, activeLayout, issueFilters, router]
|
||||
[activeLayout, anchor, issueFilters, router]
|
||||
);
|
||||
|
||||
const handleFilters = useCallback(
|
||||
(key: keyof TIssueQueryFilters, value: string | null) => {
|
||||
if (!projectId) return;
|
||||
if (!projectID) return;
|
||||
|
||||
let newValues = cloneDeep(issueFilters?.filters?.[key]) ?? [];
|
||||
|
||||
if (value === null) newValues = [];
|
||||
else if (newValues.includes(value)) newValues.splice(newValues.indexOf(value), 1);
|
||||
|
||||
updateIssueFilters(projectId, "filters", key, newValues);
|
||||
updateIssueFilters(projectID, "filters", key, newValues);
|
||||
updateRouteParams(key, newValues);
|
||||
},
|
||||
[projectId, issueFilters, updateIssueFilters, updateRouteParams]
|
||||
[projectID, issueFilters, updateIssueFilters, updateRouteParams]
|
||||
);
|
||||
|
||||
const handleRemoveAllFilters = () => {
|
||||
if (!projectId) return;
|
||||
if (!projectID) return;
|
||||
|
||||
initIssueFilters(projectId, {
|
||||
initIssueFilters(projectID, {
|
||||
display_filters: { layout: activeLayout || "list" },
|
||||
filters: {
|
||||
state: [],
|
||||
@ -78,7 +78,7 @@ export const IssueAppliedFilters: FC<TIssueAppliedFilters> = observer((props) =>
|
||||
},
|
||||
});
|
||||
|
||||
router.push(`/${workspaceSlug}/${projectId}?${`board=${activeLayout || "list"}`}`);
|
||||
router.push(`/issues/${anchor}?${`board=${activeLayout || "list"}`}`);
|
||||
};
|
||||
|
||||
if (Object.keys(appliedFilters).length === 0) return null;
|
||||
|
||||
@ -8,7 +8,7 @@ import { TOAST_TYPE, setToast } from "@plane/ui";
|
||||
// editor components
|
||||
import { LiteTextEditor } from "@/components/editor/lite-text-editor";
|
||||
// hooks
|
||||
import { useIssueDetails, useProject, useUser } from "@/hooks/store";
|
||||
import { useIssueDetails, usePublish, useUser } from "@/hooks/store";
|
||||
// types
|
||||
import { Comment } from "@/types/issue";
|
||||
|
||||
@ -17,22 +17,18 @@ const defaultValues: Partial<Comment> = {
|
||||
};
|
||||
|
||||
type Props = {
|
||||
anchor: string;
|
||||
disabled?: boolean;
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
};
|
||||
|
||||
export const AddComment: React.FC<Props> = observer((props) => {
|
||||
// const { disabled = false } = props;
|
||||
const { workspaceSlug, projectId } = props;
|
||||
const { anchor } = props;
|
||||
// refs
|
||||
const editorRef = useRef<EditorRefApi>(null);
|
||||
// store hooks
|
||||
const { workspace } = useProject();
|
||||
const { peekId: issueId, addIssueComment } = useIssueDetails();
|
||||
const { data: currentUser } = useUser();
|
||||
// derived values
|
||||
const workspaceId = workspace?.id;
|
||||
const { workspaceSlug, workspace: workspaceID } = usePublish(anchor);
|
||||
// form info
|
||||
const {
|
||||
handleSubmit,
|
||||
@ -43,9 +39,9 @@ export const AddComment: React.FC<Props> = observer((props) => {
|
||||
} = useForm<Comment>({ defaultValues });
|
||||
|
||||
const onSubmit = async (formData: Comment) => {
|
||||
if (!workspaceSlug || !projectId || !issueId || isSubmitting || !formData.comment_html) return;
|
||||
if (!anchor || !issueId || isSubmitting || !formData.comment_html) return;
|
||||
|
||||
await addIssueComment(workspaceSlug, projectId, issueId, formData)
|
||||
await addIssueComment(anchor, issueId, formData)
|
||||
.then(() => {
|
||||
reset(defaultValues);
|
||||
editorRef.current?.clearEditor();
|
||||
@ -71,8 +67,8 @@ export const AddComment: React.FC<Props> = observer((props) => {
|
||||
onEnterKeyPress={(e) => {
|
||||
if (currentUser) handleSubmit(onSubmit)(e);
|
||||
}}
|
||||
workspaceId={workspaceId as string}
|
||||
workspaceSlug={workspaceSlug}
|
||||
workspaceId={workspaceID?.toString() ?? ""}
|
||||
workspaceSlug={workspaceSlug?.toString() ?? ""}
|
||||
ref={editorRef}
|
||||
initialValue={
|
||||
!value || value === "" || (typeof value === "object" && Object.keys(value).length === 0)
|
||||
|
||||
@ -10,25 +10,23 @@ import { CommentReactions } from "@/components/issues/peek-overview";
|
||||
// helpers
|
||||
import { timeAgo } from "@/helpers/date-time.helper";
|
||||
// hooks
|
||||
import { useIssueDetails, useProject, useUser } from "@/hooks/store";
|
||||
import { useIssueDetails, usePublish, useUser } from "@/hooks/store";
|
||||
import useIsInIframe from "@/hooks/use-is-in-iframe";
|
||||
// types
|
||||
import { Comment } from "@/types/issue";
|
||||
|
||||
type Props = {
|
||||
workspaceSlug: string;
|
||||
anchor: string;
|
||||
comment: Comment;
|
||||
};
|
||||
|
||||
export const CommentCard: React.FC<Props> = observer((props) => {
|
||||
const { comment, workspaceSlug } = props;
|
||||
const { anchor, comment } = props;
|
||||
// store hooks
|
||||
const { workspace } = useProject();
|
||||
const { peekId, deleteIssueComment, updateIssueComment } = useIssueDetails();
|
||||
const { data: currentUser } = useUser();
|
||||
const { workspaceSlug, workspace: workspaceID } = usePublish(anchor);
|
||||
const isInIframe = useIsInIframe();
|
||||
// derived values
|
||||
const workspaceId = workspace?.id;
|
||||
|
||||
// states
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
@ -45,13 +43,13 @@ export const CommentCard: React.FC<Props> = observer((props) => {
|
||||
});
|
||||
|
||||
const handleDelete = () => {
|
||||
if (!workspaceSlug || !peekId) return;
|
||||
deleteIssueComment(workspaceSlug, comment.project, peekId, comment.id);
|
||||
if (!anchor || !peekId) return;
|
||||
deleteIssueComment(anchor, peekId, comment.id);
|
||||
};
|
||||
|
||||
const handleCommentUpdate = async (formData: Comment) => {
|
||||
if (!workspaceSlug || !peekId) return;
|
||||
updateIssueComment(workspaceSlug, comment.project, peekId, comment.id, formData);
|
||||
if (!anchor || !peekId) return;
|
||||
updateIssueComment(anchor, peekId, comment.id, formData);
|
||||
setIsEditing(false);
|
||||
editorRef.current?.setEditorValue(formData.comment_html);
|
||||
showEditorRef.current?.setEditorValue(formData.comment_html);
|
||||
@ -103,8 +101,8 @@ export const CommentCard: React.FC<Props> = observer((props) => {
|
||||
name="comment_html"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<LiteTextEditor
|
||||
workspaceId={workspaceId as string}
|
||||
workspaceSlug={workspaceSlug}
|
||||
workspaceId={workspaceID?.toString() ?? ""}
|
||||
workspaceSlug={workspaceSlug?.toString() ?? ""}
|
||||
onEnterKeyPress={handleSubmit(handleCommentUpdate)}
|
||||
ref={editorRef}
|
||||
initialValue={value}
|
||||
@ -135,7 +133,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
|
||||
</form>
|
||||
<div className={`${isEditing ? "hidden" : ""}`}>
|
||||
<LiteTextReadOnlyEditor ref={showEditorRef} initialValue={comment.comment_html} />
|
||||
<CommentReactions commentId={comment.id} projectId={comment.project} workspaceSlug={workspaceSlug} />
|
||||
<CommentReactions anchor={anchor} commentId={comment.id} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -13,12 +13,12 @@ import { useIssueDetails, useUser } from "@/hooks/store";
|
||||
import useIsInIframe from "@/hooks/use-is-in-iframe";
|
||||
|
||||
type Props = {
|
||||
anchor: string;
|
||||
commentId: string;
|
||||
projectId: string;
|
||||
workspaceSlug: string;
|
||||
};
|
||||
|
||||
export const CommentReactions: React.FC<Props> = observer((props) => {
|
||||
const { anchor, commentId } = props;
|
||||
const router = useRouter();
|
||||
const pathName = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
@ -28,7 +28,6 @@ export const CommentReactions: React.FC<Props> = observer((props) => {
|
||||
const priority = searchParams.get("priority") || undefined;
|
||||
const labels = searchParams.get("labels") || undefined;
|
||||
|
||||
const { commentId, projectId, workspaceSlug } = props;
|
||||
// hooks
|
||||
const { addCommentReaction, removeCommentReaction, details, peekId } = useIssueDetails();
|
||||
const { data: user } = useUser();
|
||||
@ -40,13 +39,13 @@ export const CommentReactions: React.FC<Props> = observer((props) => {
|
||||
const userReactions = commentReactions?.filter((r) => r?.actor_detail?.id === user?.id);
|
||||
|
||||
const handleAddReaction = (reactionHex: string) => {
|
||||
if (!workspaceSlug || !projectId || !peekId) return;
|
||||
addCommentReaction(workspaceSlug, projectId, peekId, commentId, reactionHex);
|
||||
if (!anchor || !peekId) return;
|
||||
addCommentReaction(anchor, peekId, commentId, reactionHex);
|
||||
};
|
||||
|
||||
const handleRemoveReaction = (reactionHex: string) => {
|
||||
if (!workspaceSlug || !projectId || !peekId) return;
|
||||
removeCommentReaction(workspaceSlug, projectId, peekId, commentId, reactionHex);
|
||||
if (!anchor || !peekId) return;
|
||||
removeCommentReaction(anchor, peekId, commentId, reactionHex);
|
||||
};
|
||||
|
||||
const handleReactionClick = (reactionHex: string) => {
|
||||
|
||||
@ -11,14 +11,13 @@ import {
|
||||
import { IIssue } from "@/types/issue";
|
||||
|
||||
type Props = {
|
||||
anchor: string;
|
||||
handleClose: () => void;
|
||||
issueDetails: IIssue | undefined;
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
};
|
||||
|
||||
export const FullScreenPeekView: React.FC<Props> = observer((props) => {
|
||||
const { handleClose, issueDetails, workspaceSlug, projectId } = props;
|
||||
const { anchor, handleClose, issueDetails } = props;
|
||||
|
||||
return (
|
||||
<div className="grid h-full w-full grid-cols-10 divide-x divide-custom-border-200 overflow-hidden">
|
||||
@ -36,11 +35,7 @@ export const FullScreenPeekView: React.FC<Props> = observer((props) => {
|
||||
<div className="my-5 h-[1] w-full border-t border-custom-border-200" />
|
||||
{/* issue activity/comments */}
|
||||
<div className="w-full pb-5">
|
||||
<PeekOverviewIssueActivity
|
||||
issueDetails={issueDetails}
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
/>
|
||||
<PeekOverviewIssueActivity anchor={anchor} issueDetails={issueDetails} />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
@ -13,13 +13,12 @@ import useIsInIframe from "@/hooks/use-is-in-iframe";
|
||||
import { IIssue } from "@/types/issue";
|
||||
|
||||
type Props = {
|
||||
anchor: string;
|
||||
issueDetails: IIssue;
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
};
|
||||
|
||||
export const PeekOverviewIssueActivity: React.FC<Props> = observer((props) => {
|
||||
const { workspaceSlug, projectId } = props;
|
||||
const { anchor } = props;
|
||||
// router
|
||||
const pathname = usePathname();
|
||||
// store
|
||||
@ -33,35 +32,33 @@ export const PeekOverviewIssueActivity: React.FC<Props> = observer((props) => {
|
||||
return (
|
||||
<div className="pb-10">
|
||||
<h4 className="font-medium">Comments</h4>
|
||||
{workspaceSlug && (
|
||||
<div className="mt-4">
|
||||
<div className="space-y-4">
|
||||
{comments.map((comment: any) => (
|
||||
<CommentCard key={comment.id} comment={comment} workspaceSlug={workspaceSlug?.toString()} />
|
||||
))}
|
||||
</div>
|
||||
{!isInIframe &&
|
||||
(currentUser ? (
|
||||
<>
|
||||
{canComment && (
|
||||
<div className="mt-4">
|
||||
<AddComment disabled={!currentUser} workspaceSlug={workspaceSlug} projectId={projectId} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="mt-4 flex items-center justify-between gap-2 rounded border border-custom-border-300 bg-custom-background-80 px-2 py-2.5">
|
||||
<p className="flex gap-2 overflow-hidden break-words text-sm text-custom-text-200">
|
||||
<Icon iconName="lock" className="!text-sm" />
|
||||
Sign in to add your comment
|
||||
</p>
|
||||
<Link href={`/?next_path=${pathname}`}>
|
||||
<Button variant="primary">Sign in</Button>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
<div className="mt-4">
|
||||
<div className="space-y-4">
|
||||
{comments.map((comment) => (
|
||||
<CommentCard key={comment.id} anchor={anchor} comment={comment} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{!isInIframe &&
|
||||
(currentUser ? (
|
||||
<>
|
||||
{canComment && (
|
||||
<div className="mt-4">
|
||||
<AddComment anchor={anchor} disabled={!currentUser} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="mt-4 flex items-center justify-between gap-2 rounded border border-custom-border-300 bg-custom-background-80 px-2 py-2.5">
|
||||
<p className="flex gap-2 overflow-hidden break-words text-sm text-custom-text-200">
|
||||
<Icon iconName="lock" className="!text-sm" />
|
||||
Sign in to add your comment
|
||||
</p>
|
||||
<Link href={`/?next_path=${pathname}`}>
|
||||
<Button variant="primary">Sign in</Button>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
@ -9,7 +9,7 @@ import useIsInIframe from "@/hooks/use-is-in-iframe";
|
||||
// };
|
||||
|
||||
export const IssueReactions: React.FC = () => {
|
||||
const { workspace_slug: workspaceSlug, project_id: projectId } = useParams<any>();
|
||||
const { workspaceSlug, projectId } = useParams<any>();
|
||||
|
||||
const { canVote, canReact } = useProject();
|
||||
const isInIframe = useIsInIframe();
|
||||
|
||||
@ -10,13 +10,12 @@ import { FullScreenPeekView, SidePeekView } from "@/components/issues/peek-overv
|
||||
import { useIssue, useIssueDetails } from "@/hooks/store";
|
||||
|
||||
type TIssuePeekOverview = {
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
anchor: string;
|
||||
peekId: string;
|
||||
};
|
||||
|
||||
export const IssuePeekOverview: FC<TIssuePeekOverview> = observer((props) => {
|
||||
const { workspaceSlug, projectId, peekId } = props;
|
||||
const { anchor, peekId } = props;
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
// query params
|
||||
@ -34,21 +33,23 @@ export const IssuePeekOverview: FC<TIssuePeekOverview> = observer((props) => {
|
||||
const issueDetails = issueDetailStore.peekId && peekId ? issueDetailStore.details[peekId.toString()] : undefined;
|
||||
|
||||
useEffect(() => {
|
||||
if (workspaceSlug && projectId && peekId && issueStore.issues && issueStore.issues.length > 0) {
|
||||
if (anchor && peekId && issueStore.issues && issueStore.issues.length > 0) {
|
||||
if (!issueDetails) {
|
||||
issueDetailStore.fetchIssueDetails(workspaceSlug.toString(), projectId.toString(), peekId.toString());
|
||||
issueDetailStore.fetchIssueDetails(anchor, peekId.toString());
|
||||
}
|
||||
}
|
||||
}, [workspaceSlug, projectId, issueDetailStore, issueDetails, peekId, issueStore.issues]);
|
||||
}, [anchor, issueDetailStore, issueDetails, peekId, issueStore.issues]);
|
||||
|
||||
const handleClose = () => {
|
||||
issueDetailStore.setPeekId(null);
|
||||
let queryParams: any = { board: board };
|
||||
let queryParams: any = {
|
||||
board,
|
||||
};
|
||||
if (priority && priority.length > 0) queryParams = { ...queryParams, priority: priority };
|
||||
if (state && state.length > 0) queryParams = { ...queryParams, state: state };
|
||||
if (labels && labels.length > 0) queryParams = { ...queryParams, labels: labels };
|
||||
queryParams = new URLSearchParams(queryParams).toString();
|
||||
router.push(`/${workspaceSlug}/${projectId}?${queryParams}`);
|
||||
router.push(`/issues/${anchor}?${queryParams}`);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@ -80,12 +81,7 @@ export const IssuePeekOverview: FC<TIssuePeekOverview> = observer((props) => {
|
||||
leaveTo="translate-x-full"
|
||||
>
|
||||
<Dialog.Panel className="fixed right-0 top-0 z-20 h-full w-1/2 bg-custom-background-100 shadow-custom-shadow-sm">
|
||||
<SidePeekView
|
||||
handleClose={handleClose}
|
||||
issueDetails={issueDetails}
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
/>
|
||||
<SidePeekView anchor={anchor} handleClose={handleClose} issueDetails={issueDetails} />
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</Dialog>
|
||||
@ -119,20 +115,10 @@ export const IssuePeekOverview: FC<TIssuePeekOverview> = observer((props) => {
|
||||
}`}
|
||||
>
|
||||
{issueDetailStore.peekMode === "modal" && (
|
||||
<SidePeekView
|
||||
handleClose={handleClose}
|
||||
issueDetails={issueDetails}
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
/>
|
||||
<SidePeekView anchor={anchor} handleClose={handleClose} issueDetails={issueDetails} />
|
||||
)}
|
||||
{issueDetailStore.peekMode === "full" && (
|
||||
<FullScreenPeekView
|
||||
handleClose={handleClose}
|
||||
issueDetails={issueDetails}
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
/>
|
||||
<FullScreenPeekView anchor={anchor} handleClose={handleClose} issueDetails={issueDetails} />
|
||||
)}
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
|
||||
@ -7,22 +7,21 @@ import {
|
||||
PeekOverviewIssueDetails,
|
||||
PeekOverviewIssueProperties,
|
||||
} from "@/components/issues/peek-overview";
|
||||
// hooks
|
||||
import { useProject } from "@/hooks/store";
|
||||
// store hooks
|
||||
import { usePublish } from "@/hooks/store";
|
||||
// types
|
||||
import { IIssue } from "@/types/issue";
|
||||
|
||||
type Props = {
|
||||
anchor: string;
|
||||
handleClose: () => void;
|
||||
issueDetails: IIssue | undefined;
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
};
|
||||
|
||||
export const SidePeekView: React.FC<Props> = observer((props) => {
|
||||
const { handleClose, issueDetails, workspaceSlug, projectId } = props;
|
||||
|
||||
const { settings } = useProject();
|
||||
const { anchor, handleClose, issueDetails } = props;
|
||||
// store hooks
|
||||
const { comments } = usePublish(anchor);
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col overflow-hidden">
|
||||
@ -42,13 +41,9 @@ export const SidePeekView: React.FC<Props> = observer((props) => {
|
||||
{/* divider */}
|
||||
<div className="my-5 h-[1] w-full border-t border-custom-border-200" />
|
||||
{/* issue activity/comments */}
|
||||
{settings?.comments && (
|
||||
{comments && (
|
||||
<div className="w-full pb-5">
|
||||
<PeekOverviewIssueActivity
|
||||
issueDetails={issueDetails}
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
/>
|
||||
<PeekOverviewIssueActivity anchor={anchor} issueDetails={issueDetails} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -37,12 +37,11 @@ export const ProjectDetailsView: FC<ProjectDetailsViewProps> = observer((props)
|
||||
const { loader, issues, error, fetchPublicIssues } = useIssue();
|
||||
const issueDetailStore = useIssueDetails();
|
||||
// derived values
|
||||
const { workspace_detail, project } = publishSettings;
|
||||
const workspaceSlug = workspace_detail?.slug;
|
||||
const { anchor } = publishSettings;
|
||||
|
||||
useSWR(
|
||||
workspaceSlug && project ? `WORKSPACE_PROJECT_PUBLIC_ISSUES_${workspaceSlug}_${project}` : null,
|
||||
workspaceSlug && project ? () => fetchPublicIssues(workspaceSlug, project, { states, priority, labels }) : null
|
||||
anchor ? `PUBLIC_ISSUES_${anchor}` : null,
|
||||
anchor ? () => fetchPublicIssues(anchor, { states, priority, labels }) : null
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@ -54,11 +53,11 @@ export const ProjectDetailsView: FC<ProjectDetailsViewProps> = observer((props)
|
||||
// derived values
|
||||
const activeLayout = issueFilters?.display_filters?.layout || undefined;
|
||||
|
||||
if (!workspaceSlug || !project) return null;
|
||||
if (!anchor) return null;
|
||||
|
||||
return (
|
||||
<div className="relative h-full w-full overflow-hidden">
|
||||
{peekId && <IssuePeekOverview workspaceSlug={workspaceSlug} projectId={project} peekId={peekId} />}
|
||||
{peekId && <IssuePeekOverview anchor={anchor} peekId={peekId} />}
|
||||
|
||||
{loader && !issues ? (
|
||||
<div className="py-10 text-center text-sm text-custom-text-100">Loading...</div>
|
||||
@ -80,16 +79,16 @@ export const ProjectDetailsView: FC<ProjectDetailsViewProps> = observer((props)
|
||||
activeLayout && (
|
||||
<div className="relative flex h-full w-full flex-col overflow-hidden">
|
||||
{/* applied filters */}
|
||||
<IssueAppliedFilters workspaceSlug={workspaceSlug} projectId={project} />
|
||||
<IssueAppliedFilters anchor={anchor} />
|
||||
|
||||
{activeLayout === "list" && (
|
||||
<div className="relative h-full w-full overflow-y-auto">
|
||||
<IssueListView workspaceSlug={workspaceSlug} projectId={project} />
|
||||
<IssueListView anchor={anchor} />
|
||||
</div>
|
||||
)}
|
||||
{activeLayout === "kanban" && (
|
||||
<div className="relative mx-auto h-full w-full p-5">
|
||||
<IssueKanbanView workspaceSlug={workspaceSlug} projectId={project} />
|
||||
<IssueKanbanView anchor={anchor} />
|
||||
</div>
|
||||
)}
|
||||
{activeLayout === "calendar" && <IssueCalendarView />}
|
||||
|
||||
@ -1,14 +1,16 @@
|
||||
import { API_BASE_URL } from "@/helpers/common.helper";
|
||||
// services
|
||||
import { APIService } from "@/services/api.service";
|
||||
// types
|
||||
import { TIssuesResponse } from "@/types/issue";
|
||||
|
||||
class IssueService extends APIService {
|
||||
constructor() {
|
||||
super(API_BASE_URL);
|
||||
}
|
||||
|
||||
async getPublicIssues(workspace_slug: string, project_slug: string, params: any): Promise<any> {
|
||||
return this.get(`/api/public/workspaces/${workspace_slug}/project-boards/${project_slug}/issues/`, {
|
||||
async fetchPublicIssues(anchor: string, params: any): Promise<TIssuesResponse> {
|
||||
return this.get(`/api/public/anchor/${anchor}/issues/`, {
|
||||
params,
|
||||
})
|
||||
.then((response) => response?.data)
|
||||
@ -17,115 +19,88 @@ class IssueService extends APIService {
|
||||
});
|
||||
}
|
||||
|
||||
async getIssueById(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
|
||||
return this.get(`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/`)
|
||||
async getIssueById(anchor: string, issueID: string): Promise<any> {
|
||||
return this.get(`/api/public/anchor/${anchor}/issues/${issueID}/`)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response;
|
||||
});
|
||||
}
|
||||
|
||||
async getIssueVotes(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
|
||||
return this.get(`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/votes/`)
|
||||
async getIssueVotes(anchor: string, issueID: string): Promise<any> {
|
||||
return this.get(`/api/public/anchor/${anchor}/issues/${issueID}/votes/`)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response;
|
||||
});
|
||||
}
|
||||
|
||||
async createIssueVote(workspaceSlug: string, projectId: string, issueId: string, data: any): Promise<any> {
|
||||
return this.post(
|
||||
`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/votes/`,
|
||||
data
|
||||
)
|
||||
async createIssueVote(anchor: string, issueID: string, data: any): Promise<any> {
|
||||
return this.post(`/api/public/anchor/${anchor}/issues/${issueID}/votes/`, data)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response;
|
||||
});
|
||||
}
|
||||
|
||||
async deleteIssueVote(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
|
||||
return this.delete(`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/votes/`)
|
||||
async deleteIssueVote(anchor: string, issueID: string): Promise<any> {
|
||||
return this.delete(`/api/public/anchor/${anchor}/issues/${issueID}/votes/`)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response;
|
||||
});
|
||||
}
|
||||
|
||||
async getIssueReactions(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
|
||||
return this.get(`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/reactions/`)
|
||||
async getIssueReactions(anchor: string, issueID: string): Promise<any> {
|
||||
return this.get(`/api/public/anchor/${anchor}/issues/${issueID}/reactions/`)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response;
|
||||
});
|
||||
}
|
||||
|
||||
async createIssueReaction(workspaceSlug: string, projectId: string, issueId: string, data: any): Promise<any> {
|
||||
return this.post(
|
||||
`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/reactions/`,
|
||||
data
|
||||
)
|
||||
async createIssueReaction(anchor: string, issueID: string, data: any): Promise<any> {
|
||||
return this.post(`/api/public/anchor/${anchor}/issues/${issueID}/reactions/`, data)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response;
|
||||
});
|
||||
}
|
||||
|
||||
async deleteIssueReaction(
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
issueId: string,
|
||||
reactionId: string
|
||||
): Promise<any> {
|
||||
return this.delete(
|
||||
`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/reactions/${reactionId}/`
|
||||
)
|
||||
async deleteIssueReaction(anchor: string, issueID: string, reactionId: string): Promise<any> {
|
||||
return this.delete(`/api/public/anchor/${anchor}/issues/${issueID}/reactions/${reactionId}/`)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response;
|
||||
});
|
||||
}
|
||||
|
||||
async getIssueComments(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
|
||||
return this.get(`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/comments/`)
|
||||
async getIssueComments(anchor: string, issueID: string): Promise<any> {
|
||||
return this.get(`/api/public/anchor/${anchor}/issues/${issueID}/comments/`)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response;
|
||||
});
|
||||
}
|
||||
|
||||
async createIssueComment(workspaceSlug: string, projectId: string, issueId: string, data: any): Promise<any> {
|
||||
return this.post(
|
||||
`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/comments/`,
|
||||
data
|
||||
)
|
||||
async createIssueComment(anchor: string, issueID: string, data: any): Promise<any> {
|
||||
return this.post(`/api/public/anchor/${anchor}/issues/${issueID}/comments/`, data)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response;
|
||||
});
|
||||
}
|
||||
|
||||
async updateIssueComment(
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
issueId: string,
|
||||
commentId: string,
|
||||
data: any
|
||||
): Promise<any> {
|
||||
return this.patch(
|
||||
`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/comments/${commentId}/`,
|
||||
data
|
||||
)
|
||||
async updateIssueComment(anchor: string, issueID: string, commentId: string, data: any): Promise<any> {
|
||||
return this.patch(`/api/public/anchor/${anchor}/issues/${issueID}/comments/${commentId}/`, data)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response;
|
||||
});
|
||||
}
|
||||
|
||||
async deleteIssueComment(workspaceSlug: string, projectId: string, issueId: string, commentId: string): Promise<any> {
|
||||
return this.delete(
|
||||
`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/issues/${issueId}/comments/${commentId}/`
|
||||
)
|
||||
async deleteIssueComment(anchor: string, issueID: string, commentId: string): Promise<any> {
|
||||
return this.delete(`/api/public/anchor/${anchor}/issues/${issueID}/comments/${commentId}/`)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response;
|
||||
@ -133,32 +108,21 @@ class IssueService extends APIService {
|
||||
}
|
||||
|
||||
async createCommentReaction(
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
anchor: string,
|
||||
commentId: string,
|
||||
data: {
|
||||
reaction: string;
|
||||
}
|
||||
): Promise<any> {
|
||||
return this.post(
|
||||
`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/comments/${commentId}/reactions/`,
|
||||
data
|
||||
)
|
||||
return this.post(`/api/public/anchor/${anchor}/comments/${commentId}/reactions/`, data)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response;
|
||||
});
|
||||
}
|
||||
|
||||
async deleteCommentReaction(
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
commentId: string,
|
||||
reactionHex: string
|
||||
): Promise<any> {
|
||||
return this.delete(
|
||||
`/api/public/workspaces/${workspaceSlug}/project-boards/${projectId}/comments/${commentId}/reactions/${reactionHex}/`
|
||||
)
|
||||
async deleteCommentReaction(anchor: string, commentId: string, reactionHex: string): Promise<any> {
|
||||
return this.delete(`/api/public/anchor/${anchor}/comments/${commentId}/reactions/${reactionHex}/`)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response;
|
||||
|
||||
@ -9,16 +9,16 @@ export class ProjectMemberService extends APIService {
|
||||
super(API_BASE_URL);
|
||||
}
|
||||
|
||||
async fetchProjectMembers(workspaceSlug: string, projectId: string): Promise<IProjectMembership[]> {
|
||||
return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/`)
|
||||
async fetchProjectMembers(anchor: string): Promise<IProjectMembership[]> {
|
||||
return this.get(`/api/anchor/${anchor}/members/`)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response?.data;
|
||||
});
|
||||
}
|
||||
|
||||
async getProjectMember(workspaceSlug: string, projectId: string, memberId: string): Promise<IProjectMember> {
|
||||
return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/${memberId}/`)
|
||||
async getProjectMember(anchor: string, memberID: string): Promise<IProjectMember> {
|
||||
return this.get(`/api/anchor/${anchor}/members/${memberID}/`)
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response?.data;
|
||||
|
||||
@ -10,108 +10,102 @@ import { IIssue, IPeekMode, IVote } from "@/types/issue";
|
||||
export interface IIssueDetailStore {
|
||||
loader: boolean;
|
||||
error: any;
|
||||
// peek info
|
||||
// observables
|
||||
peekId: string | null;
|
||||
peekMode: IPeekMode;
|
||||
details: {
|
||||
[key: string]: IIssue;
|
||||
};
|
||||
// peek actions
|
||||
setPeekId: (issueId: string | null) => void;
|
||||
// actions
|
||||
setPeekId: (issueID: string | null) => void;
|
||||
setPeekMode: (mode: IPeekMode) => void;
|
||||
// issue details
|
||||
fetchIssueDetails: (workspaceId: string, projectId: string, issueId: string) => void;
|
||||
// issue comments
|
||||
addIssueComment: (workspaceId: string, projectId: string, issueId: string, data: any) => Promise<void>;
|
||||
updateIssueComment: (
|
||||
workspaceId: string,
|
||||
projectId: string,
|
||||
issueId: string,
|
||||
comment_id: string,
|
||||
data: any
|
||||
) => Promise<any>;
|
||||
deleteIssueComment: (workspaceId: string, projectId: string, issueId: string, comment_id: string) => void;
|
||||
addCommentReaction: (
|
||||
workspaceId: string,
|
||||
projectId: string,
|
||||
issueId: string,
|
||||
commentId: string,
|
||||
reactionHex: string
|
||||
) => void;
|
||||
removeCommentReaction: (
|
||||
workspaceId: string,
|
||||
projectId: string,
|
||||
issueId: string,
|
||||
commentId: string,
|
||||
reactionHex: string
|
||||
) => void;
|
||||
// issue reactions
|
||||
addIssueReaction: (workspaceId: string, projectId: string, issueId: string, reactionHex: string) => void;
|
||||
removeIssueReaction: (workspaceId: string, projectId: string, issueId: string, reactionHex: string) => void;
|
||||
// issue votes
|
||||
addIssueVote: (workspaceId: string, projectId: string, issueId: string, data: { vote: 1 | -1 }) => Promise<void>;
|
||||
removeIssueVote: (workspaceId: string, projectId: string, issueId: string) => Promise<void>;
|
||||
// issue actions
|
||||
fetchIssueDetails: (anchor: string, issueID: string) => void;
|
||||
// comment actions
|
||||
addIssueComment: (anchor: string, issueID: string, data: any) => Promise<void>;
|
||||
updateIssueComment: (anchor: string, issueID: string, commentID: string, data: any) => Promise<any>;
|
||||
deleteIssueComment: (anchor: string, issueID: string, commentID: string) => void;
|
||||
addCommentReaction: (anchor: string, issueID: string, commentID: string, reactionHex: string) => void;
|
||||
removeCommentReaction: (anchor: string, issueID: string, commentID: string, reactionHex: string) => void;
|
||||
// reaction actions
|
||||
addIssueReaction: (anchor: string, issueID: string, reactionHex: string) => void;
|
||||
removeIssueReaction: (anchor: string, issueID: string, reactionHex: string) => void;
|
||||
// vote actions
|
||||
addIssueVote: (anchor: string, issueID: string, data: { vote: 1 | -1 }) => Promise<void>;
|
||||
removeIssueVote: (anchor: string, issueID: string) => Promise<void>;
|
||||
}
|
||||
|
||||
export class IssueDetailStore implements IIssueDetailStore {
|
||||
loader: boolean = false;
|
||||
error: any = null;
|
||||
// observables
|
||||
peekId: string | null = null;
|
||||
peekMode: IPeekMode = "side";
|
||||
details: {
|
||||
[key: string]: IIssue;
|
||||
} = {};
|
||||
issueService;
|
||||
// root store
|
||||
rootStore: RootStore;
|
||||
// services
|
||||
issueService: IssueService;
|
||||
|
||||
constructor(_rootStore: RootStore) {
|
||||
makeObservable(this, {
|
||||
loader: observable.ref,
|
||||
error: observable.ref,
|
||||
// peek
|
||||
// observables
|
||||
peekId: observable.ref,
|
||||
peekMode: observable.ref,
|
||||
details: observable.ref,
|
||||
details: observable,
|
||||
// actions
|
||||
setPeekId: action,
|
||||
setPeekMode: action,
|
||||
// issue actions
|
||||
fetchIssueDetails: action,
|
||||
// comment actions
|
||||
addIssueComment: action,
|
||||
updateIssueComment: action,
|
||||
deleteIssueComment: action,
|
||||
addCommentReaction: action,
|
||||
removeCommentReaction: action,
|
||||
// reaction actions
|
||||
addIssueReaction: action,
|
||||
removeIssueReaction: action,
|
||||
// vote actions
|
||||
addIssueVote: action,
|
||||
removeIssueVote: action,
|
||||
});
|
||||
this.issueService = new IssueService();
|
||||
this.rootStore = _rootStore;
|
||||
this.issueService = new IssueService();
|
||||
}
|
||||
|
||||
setPeekId = (issueId: string | null) => {
|
||||
this.peekId = issueId;
|
||||
setPeekId = (issueID: string | null) => {
|
||||
this.peekId = issueID;
|
||||
};
|
||||
|
||||
setPeekMode = (mode: IPeekMode) => {
|
||||
this.peekMode = mode;
|
||||
};
|
||||
|
||||
fetchIssueDetails = async (workspaceSlug: string, projectId: string, issueId: string) => {
|
||||
/**
|
||||
* @description fetc
|
||||
* @param {string} anchor
|
||||
* @param {string} issueID
|
||||
*/
|
||||
fetchIssueDetails = async (anchor: string, issueID: string) => {
|
||||
try {
|
||||
this.loader = true;
|
||||
this.error = null;
|
||||
|
||||
const issueDetails = this.rootStore.issue.issues?.find((i) => i.id === issueId);
|
||||
const commentsResponse = await this.issueService.getIssueComments(workspaceSlug, projectId, issueId);
|
||||
const issueDetails = this.rootStore.issue.issues?.find((i) => i.id === issueID);
|
||||
const commentsResponse = await this.issueService.getIssueComments(anchor, issueID);
|
||||
|
||||
if (issueDetails) {
|
||||
runInAction(() => {
|
||||
this.details = {
|
||||
...this.details,
|
||||
[issueId]: {
|
||||
...(this.details[issueId] ?? issueDetails),
|
||||
[issueID]: {
|
||||
...(this.details[issueID] ?? issueDetails),
|
||||
comments: commentsResponse,
|
||||
},
|
||||
};
|
||||
@ -123,17 +117,17 @@ export class IssueDetailStore implements IIssueDetailStore {
|
||||
}
|
||||
};
|
||||
|
||||
addIssueComment = async (workspaceSlug: string, projectId: string, issueId: string, data: any) => {
|
||||
addIssueComment = async (anchor: string, issueID: string, data: any) => {
|
||||
try {
|
||||
const issueDetails = this.rootStore.issue.issues?.find((i) => i.id === issueId);
|
||||
const issueCommentResponse = await this.issueService.createIssueComment(workspaceSlug, projectId, issueId, data);
|
||||
const issueDetails = this.rootStore.issue.issues?.find((i) => i.id === issueID);
|
||||
const issueCommentResponse = await this.issueService.createIssueComment(anchor, issueID, data);
|
||||
if (issueDetails) {
|
||||
runInAction(() => {
|
||||
this.details = {
|
||||
...this.details,
|
||||
[issueId]: {
|
||||
[issueID]: {
|
||||
...issueDetails,
|
||||
comments: [...this.details[issueId].comments, issueCommentResponse],
|
||||
comments: [...this.details[issueID].comments, issueCommentResponse],
|
||||
},
|
||||
};
|
||||
});
|
||||
@ -145,36 +139,30 @@ export class IssueDetailStore implements IIssueDetailStore {
|
||||
}
|
||||
};
|
||||
|
||||
updateIssueComment = async (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
issueId: string,
|
||||
commentId: string,
|
||||
data: any
|
||||
) => {
|
||||
updateIssueComment = async (anchor: string, issueID: string, commentID: string, data: any) => {
|
||||
try {
|
||||
runInAction(() => {
|
||||
this.details = {
|
||||
...this.details,
|
||||
[issueId]: {
|
||||
...this.details[issueId],
|
||||
comments: this.details[issueId].comments.map((c) => ({
|
||||
[issueID]: {
|
||||
...this.details[issueID],
|
||||
comments: this.details[issueID].comments.map((c) => ({
|
||||
...c,
|
||||
...(c.id === commentId ? data : {}),
|
||||
...(c.id === commentID ? data : {}),
|
||||
})),
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
await this.issueService.updateIssueComment(workspaceSlug, projectId, issueId, commentId, data);
|
||||
await this.issueService.updateIssueComment(anchor, issueID, commentID, data);
|
||||
} catch (error) {
|
||||
const issueComments = await this.issueService.getIssueComments(workspaceSlug, projectId, issueId);
|
||||
const issueComments = await this.issueService.getIssueComments(anchor, issueID);
|
||||
|
||||
runInAction(() => {
|
||||
this.details = {
|
||||
...this.details,
|
||||
[issueId]: {
|
||||
...this.details[issueId],
|
||||
[issueID]: {
|
||||
...this.details[issueID],
|
||||
comments: issueComments,
|
||||
},
|
||||
};
|
||||
@ -182,15 +170,15 @@ export class IssueDetailStore implements IIssueDetailStore {
|
||||
}
|
||||
};
|
||||
|
||||
deleteIssueComment = async (workspaceSlug: string, projectId: string, issueId: string, comment_id: string) => {
|
||||
deleteIssueComment = async (anchor: string, issueID: string, commentID: string) => {
|
||||
try {
|
||||
await this.issueService.deleteIssueComment(workspaceSlug, projectId, issueId, comment_id);
|
||||
const remainingComments = this.details[issueId].comments.filter((c) => c.id != comment_id);
|
||||
await this.issueService.deleteIssueComment(anchor, issueID, commentID);
|
||||
const remainingComments = this.details[issueID].comments.filter((c) => c.id != commentID);
|
||||
runInAction(() => {
|
||||
this.details = {
|
||||
...this.details,
|
||||
[issueId]: {
|
||||
...this.details[issueId],
|
||||
[issueID]: {
|
||||
...this.details[issueID],
|
||||
comments: remainingComments,
|
||||
},
|
||||
};
|
||||
@ -200,47 +188,41 @@ export class IssueDetailStore implements IIssueDetailStore {
|
||||
}
|
||||
};
|
||||
|
||||
addCommentReaction = async (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
issueId: string,
|
||||
commentId: string,
|
||||
reactionHex: string
|
||||
) => {
|
||||
addCommentReaction = async (anchor: string, issueID: string, commentID: string, reactionHex: string) => {
|
||||
const newReaction = {
|
||||
id: uuidv4(),
|
||||
comment: commentId,
|
||||
comment: commentID,
|
||||
reaction: reactionHex,
|
||||
actor_detail: this.rootStore.user.currentActor,
|
||||
};
|
||||
const newComments = this.details[issueId].comments.map((comment) => ({
|
||||
const newComments = this.details[issueID].comments.map((comment) => ({
|
||||
...comment,
|
||||
comment_reactions:
|
||||
comment.id === commentId ? [...comment.comment_reactions, newReaction] : comment.comment_reactions,
|
||||
comment.id === commentID ? [...comment.comment_reactions, newReaction] : comment.comment_reactions,
|
||||
}));
|
||||
|
||||
try {
|
||||
runInAction(() => {
|
||||
this.details = {
|
||||
...this.details,
|
||||
[issueId]: {
|
||||
...this.details[issueId],
|
||||
[issueID]: {
|
||||
...this.details[issueID],
|
||||
comments: [...newComments],
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
await this.issueService.createCommentReaction(workspaceSlug, projectId, commentId, {
|
||||
await this.issueService.createCommentReaction(anchor, commentID, {
|
||||
reaction: reactionHex,
|
||||
});
|
||||
} catch (error) {
|
||||
const issueComments = await this.issueService.getIssueComments(workspaceSlug, projectId, issueId);
|
||||
const issueComments = await this.issueService.getIssueComments(anchor, issueID);
|
||||
|
||||
runInAction(() => {
|
||||
this.details = {
|
||||
...this.details,
|
||||
[issueId]: {
|
||||
...this.details[issueId],
|
||||
[issueID]: {
|
||||
...this.details[issueID],
|
||||
comments: issueComments,
|
||||
},
|
||||
};
|
||||
@ -248,39 +230,33 @@ export class IssueDetailStore implements IIssueDetailStore {
|
||||
}
|
||||
};
|
||||
|
||||
removeCommentReaction = async (
|
||||
workspaceSlug: string,
|
||||
projectId: string,
|
||||
issueId: string,
|
||||
commentId: string,
|
||||
reactionHex: string
|
||||
) => {
|
||||
removeCommentReaction = async (anchor: string, issueID: string, commentID: string, reactionHex: string) => {
|
||||
try {
|
||||
const comment = this.details[issueId].comments.find((c) => c.id === commentId);
|
||||
const comment = this.details[issueID].comments.find((c) => c.id === commentID);
|
||||
const newCommentReactions = comment?.comment_reactions.filter((r) => r.reaction !== reactionHex) ?? [];
|
||||
|
||||
runInAction(() => {
|
||||
this.details = {
|
||||
...this.details,
|
||||
[issueId]: {
|
||||
...this.details[issueId],
|
||||
comments: this.details[issueId].comments.map((c) => ({
|
||||
[issueID]: {
|
||||
...this.details[issueID],
|
||||
comments: this.details[issueID].comments.map((c) => ({
|
||||
...c,
|
||||
comment_reactions: c.id === commentId ? newCommentReactions : c.comment_reactions,
|
||||
comment_reactions: c.id === commentID ? newCommentReactions : c.comment_reactions,
|
||||
})),
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
await this.issueService.deleteCommentReaction(workspaceSlug, projectId, commentId, reactionHex);
|
||||
await this.issueService.deleteCommentReaction(anchor, commentID, reactionHex);
|
||||
} catch (error) {
|
||||
const issueComments = await this.issueService.getIssueComments(workspaceSlug, projectId, issueId);
|
||||
const issueComments = await this.issueService.getIssueComments(anchor, issueID);
|
||||
|
||||
runInAction(() => {
|
||||
this.details = {
|
||||
...this.details,
|
||||
[issueId]: {
|
||||
...this.details[issueId],
|
||||
[issueID]: {
|
||||
...this.details[issueID],
|
||||
comments: issueComments,
|
||||
},
|
||||
};
|
||||
@ -288,18 +264,18 @@ export class IssueDetailStore implements IIssueDetailStore {
|
||||
}
|
||||
};
|
||||
|
||||
addIssueReaction = async (workspaceSlug: string, projectId: string, issueId: string, reactionHex: string) => {
|
||||
addIssueReaction = async (anchor: string, issueID: string, reactionHex: string) => {
|
||||
try {
|
||||
runInAction(() => {
|
||||
this.details = {
|
||||
...this.details,
|
||||
[issueId]: {
|
||||
...this.details[issueId],
|
||||
[issueID]: {
|
||||
...this.details[issueID],
|
||||
reactions: [
|
||||
...this.details[issueId].reactions,
|
||||
...this.details[issueID].reactions,
|
||||
{
|
||||
id: uuidv4(),
|
||||
issue: issueId,
|
||||
issue: issueID,
|
||||
reaction: reactionHex,
|
||||
actor_detail: this.rootStore.user.currentActor,
|
||||
},
|
||||
@ -308,17 +284,17 @@ export class IssueDetailStore implements IIssueDetailStore {
|
||||
};
|
||||
});
|
||||
|
||||
await this.issueService.createIssueReaction(workspaceSlug, projectId, issueId, {
|
||||
await this.issueService.createIssueReaction(anchor, issueID, {
|
||||
reaction: reactionHex,
|
||||
});
|
||||
} catch (error) {
|
||||
console.log("Failed to add issue vote");
|
||||
const issueReactions = await this.issueService.getIssueReactions(workspaceSlug, projectId, issueId);
|
||||
const issueReactions = await this.issueService.getIssueReactions(anchor, issueID);
|
||||
runInAction(() => {
|
||||
this.details = {
|
||||
...this.details,
|
||||
[issueId]: {
|
||||
...this.details[issueId],
|
||||
[issueID]: {
|
||||
...this.details[issueID],
|
||||
reactions: issueReactions,
|
||||
},
|
||||
};
|
||||
@ -326,31 +302,31 @@ export class IssueDetailStore implements IIssueDetailStore {
|
||||
}
|
||||
};
|
||||
|
||||
removeIssueReaction = async (workspaceSlug: string, projectId: string, issueId: string, reactionHex: string) => {
|
||||
removeIssueReaction = async (anchor: string, issueID: string, reactionHex: string) => {
|
||||
try {
|
||||
const newReactions = this.details[issueId].reactions.filter(
|
||||
const newReactions = this.details[issueID].reactions.filter(
|
||||
(_r) => !(_r.reaction === reactionHex && _r.actor_detail.id === this.rootStore.user.data?.id)
|
||||
);
|
||||
|
||||
runInAction(() => {
|
||||
this.details = {
|
||||
...this.details,
|
||||
[issueId]: {
|
||||
...this.details[issueId],
|
||||
[issueID]: {
|
||||
...this.details[issueID],
|
||||
reactions: newReactions,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
await this.issueService.deleteIssueReaction(workspaceSlug, projectId, issueId, reactionHex);
|
||||
await this.issueService.deleteIssueReaction(anchor, issueID, reactionHex);
|
||||
} catch (error) {
|
||||
console.log("Failed to remove issue reaction");
|
||||
const reactions = await this.issueService.getIssueReactions(workspaceSlug, projectId, issueId);
|
||||
const reactions = await this.issueService.getIssueReactions(anchor, issueID);
|
||||
runInAction(() => {
|
||||
this.details = {
|
||||
...this.details,
|
||||
[issueId]: {
|
||||
...this.details[issueId],
|
||||
[issueID]: {
|
||||
...this.details[issueID],
|
||||
reactions: reactions,
|
||||
},
|
||||
};
|
||||
@ -358,39 +334,44 @@ export class IssueDetailStore implements IIssueDetailStore {
|
||||
}
|
||||
};
|
||||
|
||||
addIssueVote = async (workspaceSlug: string, projectId: string, issueId: string, data: { vote: 1 | -1 }) => {
|
||||
addIssueVote = async (anchor: string, issueID: string, data: { vote: 1 | -1 }) => {
|
||||
const publishSettings = this.rootStore.publishList?.publishMap?.[anchor];
|
||||
const projectID = publishSettings?.project;
|
||||
const workspaceSlug = publishSettings?.workspace_detail?.slug;
|
||||
if (!projectID || !workspaceSlug) throw new Error("Publish settings not found");
|
||||
|
||||
const newVote: IVote = {
|
||||
actor: this.rootStore.user.data?.id ?? "",
|
||||
actor_detail: this.rootStore.user.currentActor,
|
||||
issue: issueId,
|
||||
project: projectId,
|
||||
issue: issueID,
|
||||
project: projectID,
|
||||
workspace: workspaceSlug,
|
||||
vote: data.vote,
|
||||
};
|
||||
|
||||
const filteredVotes = this.details[issueId].votes.filter((v) => v.actor !== this.rootStore.user.data?.id);
|
||||
const filteredVotes = this.details[issueID].votes.filter((v) => v.actor !== this.rootStore.user.data?.id);
|
||||
|
||||
try {
|
||||
runInAction(() => {
|
||||
this.details = {
|
||||
...this.details,
|
||||
[issueId]: {
|
||||
...this.details[issueId],
|
||||
[issueID]: {
|
||||
...this.details[issueID],
|
||||
votes: [...filteredVotes, newVote],
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
await this.issueService.createIssueVote(workspaceSlug, projectId, issueId, data);
|
||||
await this.issueService.createIssueVote(anchor, issueID, data);
|
||||
} catch (error) {
|
||||
console.log("Failed to add issue vote");
|
||||
const issueVotes = await this.issueService.getIssueVotes(workspaceSlug, projectId, issueId);
|
||||
const issueVotes = await this.issueService.getIssueVotes(anchor, issueID);
|
||||
|
||||
runInAction(() => {
|
||||
this.details = {
|
||||
...this.details,
|
||||
[issueId]: {
|
||||
...this.details[issueId],
|
||||
[issueID]: {
|
||||
...this.details[issueID],
|
||||
votes: issueVotes,
|
||||
},
|
||||
};
|
||||
@ -398,30 +379,30 @@ export class IssueDetailStore implements IIssueDetailStore {
|
||||
}
|
||||
};
|
||||
|
||||
removeIssueVote = async (workspaceSlug: string, projectId: string, issueId: string) => {
|
||||
const newVotes = this.details[issueId].votes.filter((v) => v.actor !== this.rootStore.user.data?.id);
|
||||
removeIssueVote = async (anchor: string, issueID: string) => {
|
||||
const newVotes = this.details[issueID].votes.filter((v) => v.actor !== this.rootStore.user.data?.id);
|
||||
|
||||
try {
|
||||
runInAction(() => {
|
||||
this.details = {
|
||||
...this.details,
|
||||
[issueId]: {
|
||||
...this.details[issueId],
|
||||
[issueID]: {
|
||||
...this.details[issueID],
|
||||
votes: newVotes,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
await this.issueService.deleteIssueVote(workspaceSlug, projectId, issueId);
|
||||
await this.issueService.deleteIssueVote(anchor, issueID);
|
||||
} catch (error) {
|
||||
console.log("Failed to remove issue vote");
|
||||
const issueVotes = await this.issueService.getIssueVotes(workspaceSlug, projectId, issueId);
|
||||
const issueVotes = await this.issueService.getIssueVotes(anchor, issueID);
|
||||
|
||||
runInAction(() => {
|
||||
this.details = {
|
||||
...this.details,
|
||||
[issueId]: {
|
||||
...this.details[issueId],
|
||||
[issueID]: {
|
||||
...this.details[issueID],
|
||||
votes: issueVotes,
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,87 +1,85 @@
|
||||
import { observable, action, makeObservable, runInAction } from "mobx";
|
||||
import { computedFn } from "mobx-utils";
|
||||
// services
|
||||
import IssueService from "@/services/issue.service";
|
||||
// types
|
||||
import { IIssue, IIssueState, IIssueLabel } from "@/types/issue";
|
||||
// store
|
||||
import { RootStore } from "./root.store";
|
||||
// import { IssueDetailType, TIssueBoardKeys } from "types/issue";
|
||||
|
||||
export interface IIssueStore {
|
||||
loader: boolean;
|
||||
error: any;
|
||||
// issue options
|
||||
issues: IIssue[] | null;
|
||||
states: IIssueState[] | null;
|
||||
labels: IIssueLabel[] | null;
|
||||
// filtering
|
||||
// observables
|
||||
issues: IIssue[];
|
||||
states: IIssueState[];
|
||||
labels: IIssueLabel[];
|
||||
// filter observables
|
||||
filteredStates: string[];
|
||||
filteredLabels: string[];
|
||||
filteredPriorities: string[];
|
||||
// service
|
||||
issueService: any;
|
||||
// actions
|
||||
fetchPublicIssues: (workspace_slug: string, project_slug: string, params: any) => Promise<void>;
|
||||
getCountOfIssuesByState: (state: string) => number;
|
||||
getFilteredIssuesByState: (state: string) => IIssue[];
|
||||
fetchPublicIssues: (anchor: string, params: any) => Promise<void>;
|
||||
// helpers
|
||||
getCountOfIssuesByState: (stateID: string) => number;
|
||||
getFilteredIssuesByState: (stateID: string) => IIssue[];
|
||||
}
|
||||
|
||||
export class IssueStore implements IIssueStore {
|
||||
loader: boolean = false;
|
||||
error: any | null = null;
|
||||
|
||||
states: IIssueState[] | null = [];
|
||||
labels: IIssueLabel[] | null = [];
|
||||
|
||||
// observables
|
||||
states: IIssueState[] = [];
|
||||
labels: IIssueLabel[] = [];
|
||||
issues: IIssue[] = [];
|
||||
// filter observables
|
||||
filteredStates: string[] = [];
|
||||
filteredLabels: string[] = [];
|
||||
filteredPriorities: string[] = [];
|
||||
|
||||
issues: IIssue[] | null = [];
|
||||
issue_detail: any = {};
|
||||
|
||||
// root store
|
||||
rootStore: RootStore;
|
||||
issueService: any;
|
||||
// services
|
||||
issueService: IssueService;
|
||||
|
||||
constructor(_rootStore: any) {
|
||||
constructor(_rootStore: RootStore) {
|
||||
makeObservable(this, {
|
||||
// observable
|
||||
loader: observable,
|
||||
loader: observable.ref,
|
||||
error: observable,
|
||||
// issue options
|
||||
states: observable.ref,
|
||||
labels: observable.ref,
|
||||
// filtering
|
||||
filteredStates: observable.ref,
|
||||
filteredLabels: observable.ref,
|
||||
filteredPriorities: observable.ref,
|
||||
// issues
|
||||
issues: observable.ref,
|
||||
issue_detail: observable.ref,
|
||||
// observables
|
||||
states: observable,
|
||||
labels: observable,
|
||||
issues: observable,
|
||||
// filter observables
|
||||
filteredStates: observable,
|
||||
filteredLabels: observable,
|
||||
filteredPriorities: observable,
|
||||
// actions
|
||||
fetchPublicIssues: action,
|
||||
getFilteredIssuesByState: action,
|
||||
});
|
||||
|
||||
this.rootStore = _rootStore;
|
||||
this.issueService = new IssueService();
|
||||
}
|
||||
|
||||
fetchPublicIssues = async (workspaceSlug: string, projectId: string, params: any) => {
|
||||
/**
|
||||
* @description fetch issues, states and labels
|
||||
* @param {string} anchor
|
||||
* @param params
|
||||
*/
|
||||
fetchPublicIssues = async (anchor: string, params: any) => {
|
||||
try {
|
||||
this.loader = true;
|
||||
this.error = null;
|
||||
runInAction(() => {
|
||||
this.loader = true;
|
||||
this.error = null;
|
||||
});
|
||||
|
||||
const response = await this.issueService.getPublicIssues(workspaceSlug, projectId, params);
|
||||
const response = await this.issueService.fetchPublicIssues(anchor, params);
|
||||
|
||||
if (response) {
|
||||
const states: IIssueState[] = [...response?.states];
|
||||
const labels: IIssueLabel[] = [...response?.labels];
|
||||
const issues: IIssue[] = [...response?.issues];
|
||||
runInAction(() => {
|
||||
this.states = states;
|
||||
this.labels = labels;
|
||||
this.issues = issues;
|
||||
this.states = response.states;
|
||||
this.labels = response.labels;
|
||||
this.issues = response.issues;
|
||||
this.loader = false;
|
||||
});
|
||||
}
|
||||
@ -91,11 +89,21 @@ export class IssueStore implements IIssueStore {
|
||||
}
|
||||
};
|
||||
|
||||
// computed
|
||||
getCountOfIssuesByState(state_id: string): number {
|
||||
return this.issues?.filter((issue) => issue.state == state_id).length || 0;
|
||||
}
|
||||
/**
|
||||
* @description get total count of issues under a particular state
|
||||
* @param {string} stateID
|
||||
* @returns {number}
|
||||
*/
|
||||
getCountOfIssuesByState = computedFn(
|
||||
(stateID: string) => this.issues?.filter((issue) => issue.state == stateID).length || 0
|
||||
);
|
||||
|
||||
getFilteredIssuesByState = (state_id: string): IIssue[] | [] =>
|
||||
this.issues?.filter((issue) => issue.state == state_id) || [];
|
||||
/**
|
||||
* @description get array of issues under a particular state
|
||||
* @param {string} stateID
|
||||
* @returns {IIssue[]}
|
||||
*/
|
||||
getFilteredIssuesByState = computedFn(
|
||||
(stateID: string) => this.issues?.filter((issue) => issue.state == stateID) || []
|
||||
);
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@ export interface IProjectStore {
|
||||
canComment: boolean;
|
||||
canVote: boolean;
|
||||
// actions
|
||||
fetchProjectSettings: (workspace_slug: string, project_slug: string) => Promise<void>;
|
||||
fetchProjectSettings: (workspaceSlug: string, project_slug: string) => Promise<void>;
|
||||
hydrate: (projectSettings: any) => void;
|
||||
}
|
||||
|
||||
@ -64,12 +64,12 @@ export class ProjectStore implements IProjectStore {
|
||||
return this.settings?.votes ?? false;
|
||||
}
|
||||
|
||||
fetchProjectSettings = async (workspace_slug: string, project_slug: string) => {
|
||||
fetchProjectSettings = async (workspaceSlug: string, project_slug: string) => {
|
||||
try {
|
||||
this.loader = true;
|
||||
this.error = null;
|
||||
|
||||
const response = await this.projectService.getProjectSettings(workspace_slug, project_slug);
|
||||
const response = await this.projectService.getProjectSettings(workspaceSlug, project_slug);
|
||||
|
||||
if (response) {
|
||||
this.store.issueFilter.updateLayoutOptions(response?.views);
|
||||
|
||||
@ -1,11 +1,14 @@
|
||||
import { observable, makeObservable } from "mobx";
|
||||
import { observable, makeObservable, computed } from "mobx";
|
||||
// store types
|
||||
import { RootStore } from "@/store/root.store";
|
||||
// types
|
||||
import { TProjectDetails, TViewDetails, TWorkspaceDetails } from "@/types/project";
|
||||
import { TPublishSettings } from "@/types/publish";
|
||||
|
||||
export interface IPublishStore extends TPublishSettings {}
|
||||
export interface IPublishStore extends TPublishSettings {
|
||||
// computed
|
||||
workspaceSlug: string | undefined;
|
||||
}
|
||||
|
||||
export class PublishStore implements IPublishStore {
|
||||
// observables
|
||||
@ -62,6 +65,12 @@ export class PublishStore implements IPublishStore {
|
||||
votes: observable.ref,
|
||||
workspace: observable.ref,
|
||||
workspace_detail: observable,
|
||||
// computed
|
||||
workspaceSlug: computed,
|
||||
});
|
||||
}
|
||||
|
||||
get workspaceSlug() {
|
||||
return this?.workspace_detail?.slug ?? undefined;
|
||||
}
|
||||
}
|
||||
|
||||
7
space/types/issue.d.ts
vendored
7
space/types/issue.d.ts
vendored
@ -43,6 +43,12 @@ export type TIssueQueryFilters = Partial<TFilters>;
|
||||
|
||||
export type TIssueQueryFiltersParams = Partial<Record<keyof TFilters, string>>;
|
||||
|
||||
export type TIssuesResponse = {
|
||||
states: IIssueState[];
|
||||
labels: IIssueLabel[];
|
||||
issues: IIssue[];
|
||||
};
|
||||
|
||||
export interface IIssue {
|
||||
id: string;
|
||||
comments: Comment[];
|
||||
@ -79,6 +85,7 @@ export interface IIssueLabel {
|
||||
id: string;
|
||||
name: string;
|
||||
color: string;
|
||||
parent: string | null;
|
||||
}
|
||||
|
||||
export interface IVote {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user