mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
Merge pull request #64 from dakshesh14/main
fix: made description optional in project settings page, randomly selecting emoji
This commit is contained in:
commit
847a0ab853
@ -228,7 +228,7 @@ const SingleIssue: React.FC<Props> = ({
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{properties.target_date && (
|
||||
{properties.due_date && (
|
||||
<div
|
||||
className={`group flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${
|
||||
issue.target_date === null
|
||||
@ -246,10 +246,10 @@ const SingleIssue: React.FC<Props> = ({
|
||||
<div>
|
||||
{issue.target_date &&
|
||||
(issue.target_date < new Date().toISOString()
|
||||
? `Target date has passed by ${findHowManyDaysLeft(issue.target_date)} days`
|
||||
? `Due date has passed by ${findHowManyDaysLeft(issue.target_date)} days`
|
||||
: findHowManyDaysLeft(issue.target_date) <= 3
|
||||
? `Target date is in ${findHowManyDaysLeft(issue.target_date)} days`
|
||||
: "Target date")}
|
||||
? `Due date is in ${findHowManyDaysLeft(issue.target_date)} days`
|
||||
: "Due date")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -9,7 +9,7 @@ import { Dialog, Transition } from "@headlessui/react";
|
||||
import projectServices from "lib/services/project.service";
|
||||
import workspaceService from "lib/services/workspace.service";
|
||||
// common
|
||||
import { createSimilarString } from "constants/common";
|
||||
import { createSimilarString, getRandomEmoji } from "constants/common";
|
||||
// constants
|
||||
import { NETWORK_CHOICES } from "constants/";
|
||||
// fetch keys
|
||||
@ -32,7 +32,7 @@ const defaultValues: Partial<IProject> = {
|
||||
identifier: "",
|
||||
description: "",
|
||||
network: 0,
|
||||
icon: "",
|
||||
icon: getRandomEmoji(),
|
||||
};
|
||||
|
||||
const IsGuestCondition: React.FC<{
|
||||
|
@ -218,7 +218,7 @@ const CyclesListView: React.FC<Props> = ({
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{properties.target_date && (
|
||||
{properties.due_date && (
|
||||
<div
|
||||
className={`group relative flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${
|
||||
issue.target_date === null
|
||||
@ -234,23 +234,21 @@ const CyclesListView: React.FC<Props> = ({
|
||||
? renderShortNumericDateFormat(issue.target_date)
|
||||
: "N/A"}
|
||||
<div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
|
||||
<h5 className="font-medium mb-1 text-gray-900">
|
||||
Target date
|
||||
</h5>
|
||||
<h5 className="font-medium mb-1 text-gray-900">Due date</h5>
|
||||
<div>
|
||||
{renderShortNumericDateFormat(issue.target_date ?? "")}
|
||||
</div>
|
||||
<div>
|
||||
{issue.target_date &&
|
||||
(issue.target_date < new Date().toISOString()
|
||||
? `Target date has passed by ${findHowManyDaysLeft(
|
||||
? `Due date has passed by ${findHowManyDaysLeft(
|
||||
issue.target_date
|
||||
)} days`
|
||||
: findHowManyDaysLeft(issue.target_date) <= 3
|
||||
? `Target date is in ${findHowManyDaysLeft(
|
||||
? `Due date is in ${findHowManyDaysLeft(
|
||||
issue.target_date
|
||||
)} days`
|
||||
: "Target date")}
|
||||
: "Due date")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,5 +1,16 @@
|
||||
import React from "react";
|
||||
// next
|
||||
import { useRouter } from "next/router";
|
||||
import Image from "next/image";
|
||||
// swr
|
||||
import useSWR from "swr";
|
||||
// constants
|
||||
import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
|
||||
import { addSpaceIfCamelCase, timeAgo } from "constants/common";
|
||||
// services
|
||||
import issuesServices from "lib/services/issues.service";
|
||||
// hooks
|
||||
import useUser from "lib/hooks/useUser";
|
||||
// ui
|
||||
import { Spinner } from "ui";
|
||||
// icons
|
||||
@ -12,14 +23,6 @@ import {
|
||||
} from "@heroicons/react/24/outline";
|
||||
// types
|
||||
import { IssueResponse, IState } from "types";
|
||||
// constants
|
||||
import { addSpaceIfCamelCase, timeAgo } from "constants/common";
|
||||
|
||||
type Props = {
|
||||
issueActivities: any[] | undefined;
|
||||
states: IState[] | undefined;
|
||||
issues: IssueResponse | undefined;
|
||||
};
|
||||
|
||||
const activityIcons: {
|
||||
[key: string]: JSX.Element;
|
||||
@ -32,7 +35,25 @@ const activityIcons: {
|
||||
parent: <UserIcon className="h-3.5 w-3.5" />,
|
||||
};
|
||||
|
||||
const IssueActivitySection: React.FC<Props> = ({ issueActivities, states, issues }) => {
|
||||
const IssueActivitySection: React.FC = () => {
|
||||
const router = useRouter();
|
||||
|
||||
const { issueId, projectId } = router.query;
|
||||
|
||||
const { activeWorkspace, states, issues } = useUser();
|
||||
|
||||
const { data: issueActivities } = useSWR<any[]>(
|
||||
activeWorkspace && projectId && issueId ? PROJECT_ISSUES_ACTIVITY : null,
|
||||
activeWorkspace && projectId && issueId
|
||||
? () =>
|
||||
issuesServices.getIssueActivities(
|
||||
activeWorkspace.slug,
|
||||
projectId as string,
|
||||
issueId as string
|
||||
)
|
||||
: null
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{issueActivities ? (
|
||||
|
@ -1,12 +1,16 @@
|
||||
import React from "react";
|
||||
// router
|
||||
import { useRouter } from "next/router";
|
||||
// swr
|
||||
import { mutate } from "swr";
|
||||
import useSWR from "swr";
|
||||
// react hook form
|
||||
import { useForm } from "react-hook-form";
|
||||
// services
|
||||
import issuesServices from "lib/services/issues.service";
|
||||
// fetch keys
|
||||
import { PROJECT_ISSUES_COMMENTS } from "constants/fetch-keys";
|
||||
// hooks
|
||||
import useUser from "lib/hooks/useUser";
|
||||
// components
|
||||
import CommentCard from "components/project/issues/issue-detail/comment/IssueCommentCard";
|
||||
// ui
|
||||
@ -14,18 +18,11 @@ import { TextArea, Button, Spinner } from "ui";
|
||||
// types
|
||||
import type { IIssueComment } from "types";
|
||||
|
||||
type Props = {
|
||||
comments?: IIssueComment[];
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
issueId: string;
|
||||
};
|
||||
|
||||
const defaultValues: Partial<IIssueComment> = {
|
||||
comment: "",
|
||||
};
|
||||
|
||||
const IssueCommentSection: React.FC<Props> = ({ comments, issueId, projectId, workspaceSlug }) => {
|
||||
const IssueCommentSection: React.FC = () => {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
@ -34,15 +31,31 @@ const IssueCommentSection: React.FC<Props> = ({ comments, issueId, projectId, wo
|
||||
reset,
|
||||
} = useForm<IIssueComment>({ defaultValues });
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
let { issueId, projectId } = router.query;
|
||||
|
||||
const { activeWorkspace } = useUser();
|
||||
|
||||
const { data: comments, mutate } = useSWR<IIssueComment[]>(
|
||||
activeWorkspace && projectId && issueId ? PROJECT_ISSUES_COMMENTS(issueId as string) : null,
|
||||
activeWorkspace && projectId && issueId
|
||||
? () =>
|
||||
issuesServices.getIssueComments(
|
||||
activeWorkspace.slug,
|
||||
projectId as string,
|
||||
issueId as string
|
||||
)
|
||||
: null
|
||||
);
|
||||
|
||||
const onSubmit = async (formData: IIssueComment) => {
|
||||
if (!activeWorkspace || !projectId || !issueId || isSubmitting) return;
|
||||
await issuesServices
|
||||
.createIssueComment(workspaceSlug, projectId, issueId, formData)
|
||||
.createIssueComment(activeWorkspace.slug, projectId as string, issueId as string, formData)
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
mutate<IIssueComment[]>(PROJECT_ISSUES_COMMENTS(issueId), (prevData) => [
|
||||
response,
|
||||
...(prevData ?? []),
|
||||
]);
|
||||
mutate((prevData) => [response, ...(prevData ?? [])]);
|
||||
reset(defaultValues);
|
||||
})
|
||||
.catch((error) => {
|
||||
@ -51,26 +64,34 @@ const IssueCommentSection: React.FC<Props> = ({ comments, issueId, projectId, wo
|
||||
};
|
||||
|
||||
const onCommentUpdate = async (comment: IIssueComment) => {
|
||||
if (!activeWorkspace || !projectId || !issueId || isSubmitting) return;
|
||||
await issuesServices
|
||||
.patchIssueComment(workspaceSlug, projectId, issueId, comment.id, comment)
|
||||
.patchIssueComment(
|
||||
activeWorkspace.slug,
|
||||
projectId as string,
|
||||
issueId as string,
|
||||
comment.id,
|
||||
comment
|
||||
)
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
mutate<IIssueComment[]>(PROJECT_ISSUES_COMMENTS(issueId), (prevData) => {
|
||||
const newData = prevData ?? [];
|
||||
const index = newData.findIndex((comment) => comment.id === response.id);
|
||||
newData[index] = response;
|
||||
return [...newData];
|
||||
mutate((prevData) => {
|
||||
const updatedComments = prevData?.map((c) => {
|
||||
if (c.id === comment.id) {
|
||||
return comment;
|
||||
}
|
||||
return c;
|
||||
});
|
||||
return updatedComments;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const onCommentDelete = async (commentId: string) => {
|
||||
if (!activeWorkspace || !projectId || !issueId || isSubmitting) return;
|
||||
await issuesServices
|
||||
.deleteIssueComment(workspaceSlug, projectId, issueId, commentId)
|
||||
.deleteIssueComment(activeWorkspace.slug, projectId as string, issueId as string, commentId)
|
||||
.then((response) => {
|
||||
mutate<IIssueComment[]>(PROJECT_ISSUES_COMMENTS(issueId), (prevData) =>
|
||||
(prevData ?? []).filter((c) => c.id !== commentId)
|
||||
);
|
||||
mutate((prevData) => (prevData ?? []).filter((c) => c.id !== commentId));
|
||||
console.log(response);
|
||||
});
|
||||
};
|
||||
@ -124,7 +145,6 @@ const IssueCommentSection: React.FC<Props> = ({ comments, issueId, projectId, wo
|
||||
/>
|
||||
<Button type="submit" className="whitespace-nowrap" disabled={isSubmitting}>
|
||||
{isSubmitting ? "Adding comment..." : "Add comment"}
|
||||
{/* <UploadingIcon /> */}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
@ -1,6 +1,7 @@
|
||||
import React, { useState } from "react";
|
||||
// swr
|
||||
import useSWR from "swr";
|
||||
import dynamic from "next/dynamic";
|
||||
// headless ui
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
// react hook form
|
||||
@ -14,6 +15,8 @@ import useToast from "lib/hooks/useToast";
|
||||
import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
|
||||
// commons
|
||||
import { copyTextToClipboard } from "constants/common";
|
||||
// components
|
||||
import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
|
||||
// ui
|
||||
import { Input, Button, Spinner } from "ui";
|
||||
import { Popover } from "@headlessui/react";
|
||||
@ -30,7 +33,7 @@ import {
|
||||
} from "@heroicons/react/24/outline";
|
||||
// types
|
||||
import type { Control } from "react-hook-form";
|
||||
import type { IIssue, IIssueLabels, NestedKeyOf } from "types";
|
||||
import type { ICycle, IIssue, IIssueLabels, NestedKeyOf } from "types";
|
||||
import { TwitterPicker } from "react-color";
|
||||
import { positionEditorElement } from "components/lexical/helpers/editor";
|
||||
import SelectState from "./select-state";
|
||||
@ -46,7 +49,6 @@ type Props = {
|
||||
submitChanges: (formData: Partial<IIssue>) => void;
|
||||
issueDetail: IIssue | undefined;
|
||||
watch: UseFormWatch<IIssue>;
|
||||
setDeleteIssueModal: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
};
|
||||
|
||||
const defaultValues: Partial<IIssueLabels> = {
|
||||
@ -59,7 +61,6 @@ const IssueDetailSidebar: React.FC<Props> = ({
|
||||
submitChanges,
|
||||
issueDetail,
|
||||
watch: watchIssue,
|
||||
setDeleteIssueModal,
|
||||
}) => {
|
||||
const [createLabelForm, setCreateLabelForm] = useState(false);
|
||||
|
||||
@ -74,6 +75,8 @@ const IssueDetailSidebar: React.FC<Props> = ({
|
||||
: null
|
||||
);
|
||||
|
||||
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
@ -97,15 +100,17 @@ const IssueDetailSidebar: React.FC<Props> = ({
|
||||
});
|
||||
};
|
||||
|
||||
const handleCycleChange = (cycleId: string) => {
|
||||
if (activeWorkspace && activeProject && issueDetail)
|
||||
const handleCycleChange = (cycleDetail: ICycle) => {
|
||||
if (activeWorkspace && activeProject && issueDetail) {
|
||||
submitChanges({ cycle: cycleDetail.id, cycle_detail: cycleDetail });
|
||||
issuesServices
|
||||
.addIssueToCycle(activeWorkspace.slug, activeProject.id, cycleId, {
|
||||
.addIssueToCycle(activeWorkspace.slug, activeProject.id, cycleDetail.id, {
|
||||
issues: [issueDetail.id],
|
||||
})
|
||||
.then(() => {
|
||||
submitChanges({});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@ -420,6 +425,11 @@ const IssueDetailSidebar: React.FC<Props> = ({
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<ConfirmIssueDeletion
|
||||
handleClose={() => setDeleteIssueModal(false)}
|
||||
isOpen={deleteIssueModal}
|
||||
data={issueDetail}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
@ -9,13 +9,13 @@ import { Spinner, CustomSelect } from "ui";
|
||||
// icons
|
||||
import { ArrowPathIcon } from "@heroicons/react/24/outline";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
import { ICycle, IIssue } from "types";
|
||||
// common
|
||||
import { classNames } from "constants/common";
|
||||
|
||||
type Props = {
|
||||
control: Control<IIssue, any>;
|
||||
handleCycleChange: (cycleId: string) => void;
|
||||
handleCycleChange: (cycle: ICycle) => void;
|
||||
};
|
||||
|
||||
const SelectCycle: React.FC<Props> = ({ control, handleCycleChange }) => {
|
||||
@ -46,7 +46,7 @@ const SelectCycle: React.FC<Props> = ({ control, handleCycleChange }) => {
|
||||
}
|
||||
value={value}
|
||||
onChange={(value: any) => {
|
||||
handleCycleChange(value);
|
||||
handleCycleChange(cycles?.find((c) => c.id === value) as any);
|
||||
}}
|
||||
>
|
||||
{cycles ? (
|
||||
|
@ -310,7 +310,7 @@ const ListView: React.FC<Props> = ({
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{properties.target_date && (
|
||||
{properties.due_date && (
|
||||
<div
|
||||
className={`group relative flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${
|
||||
issue.target_date === null
|
||||
@ -335,14 +335,14 @@ const ListView: React.FC<Props> = ({
|
||||
<div>
|
||||
{issue.target_date &&
|
||||
(issue.target_date < new Date().toISOString()
|
||||
? `Target date has passed by ${findHowManyDaysLeft(
|
||||
? `Due date has passed by ${findHowManyDaysLeft(
|
||||
issue.target_date
|
||||
)} days`
|
||||
: findHowManyDaysLeft(issue.target_date) <= 3
|
||||
? `Target date is in ${findHowManyDaysLeft(
|
||||
? `Due date is in ${findHowManyDaysLeft(
|
||||
issue.target_date
|
||||
)} days`
|
||||
: "Target date")}
|
||||
: "Due date")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -16,7 +16,7 @@ const initialValues: Properties = {
|
||||
assignee: true,
|
||||
priority: false,
|
||||
start_date: false,
|
||||
target_date: false,
|
||||
due_date: false,
|
||||
cycle: false,
|
||||
children_count: false,
|
||||
};
|
||||
@ -26,7 +26,7 @@ const useIssuesProperties = (workspaceSlug?: string, projectId?: string) => {
|
||||
|
||||
const { user } = useUser();
|
||||
|
||||
const { data: issueProperties } = useSWR<IssuePriorities>(
|
||||
const { data: issueProperties, mutate: mutateIssueProperties } = useSWR<IssuePriorities>(
|
||||
workspaceSlug && projectId ? ISSUE_PROPERTIES_ENDPOINT(workspaceSlug, projectId) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => issueServices.getIssueProperties(workspaceSlug, projectId)
|
||||
@ -56,6 +56,14 @@ const useIssuesProperties = (workspaceSlug?: string, projectId?: string) => {
|
||||
(key: keyof Properties) => {
|
||||
if (!workspaceSlug || !projectId || !issueProperties || !user) return;
|
||||
setProperties((prev) => ({ ...prev, [key]: !prev[key] }));
|
||||
mutateIssueProperties(
|
||||
(prev) =>
|
||||
({
|
||||
...prev,
|
||||
properties: { ...prev?.properties, [key]: !prev?.properties?.[key] },
|
||||
} as IssuePriorities),
|
||||
false
|
||||
);
|
||||
if (Object.keys(issueProperties).length > 0) {
|
||||
issueServices.patchIssueProperties(workspaceSlug, projectId, issueProperties.id, {
|
||||
properties: {
|
||||
@ -71,23 +79,19 @@ const useIssuesProperties = (workspaceSlug?: string, projectId?: string) => {
|
||||
});
|
||||
}
|
||||
},
|
||||
[workspaceSlug, projectId, issueProperties, user]
|
||||
[workspaceSlug, projectId, issueProperties, user, mutateIssueProperties]
|
||||
);
|
||||
|
||||
const newProperties = Object.keys(properties).reduce((obj: any, key) => {
|
||||
if (
|
||||
key !== "children" &&
|
||||
key !== "name" &&
|
||||
key !== "parent" &&
|
||||
key !== "project" &&
|
||||
key !== "description" &&
|
||||
key !== "attachments" &&
|
||||
key !== "sequence_id"
|
||||
) {
|
||||
obj[key] = properties[key as keyof Properties];
|
||||
}
|
||||
return obj;
|
||||
}, {});
|
||||
const newProperties: Properties = {
|
||||
key: properties.key,
|
||||
state: properties.state,
|
||||
assignee: properties.assignee,
|
||||
priority: properties.priority,
|
||||
start_date: properties.start_date,
|
||||
due_date: properties.due_date,
|
||||
cycle: properties.cycle,
|
||||
children_count: properties.children_count,
|
||||
};
|
||||
|
||||
return [newProperties, updateIssueProperties] as const;
|
||||
};
|
||||
|
@ -16,7 +16,7 @@ const initialValues: Properties = {
|
||||
assignee: true,
|
||||
priority: false,
|
||||
start_date: false,
|
||||
target_date: false,
|
||||
due_date: false,
|
||||
cycle: false,
|
||||
children_count: false,
|
||||
};
|
||||
|
@ -398,7 +398,7 @@ const MyIssues: NextPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{properties.target_date && (
|
||||
{properties.due_date && (
|
||||
<div
|
||||
className={`group relative flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${
|
||||
issue.target_date === null
|
||||
@ -415,7 +415,7 @@ const MyIssues: NextPage = () => {
|
||||
: "N/A"}
|
||||
<div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
|
||||
<h5 className="font-medium mb-1 text-gray-900">
|
||||
Target date
|
||||
Due date
|
||||
</h5>
|
||||
<div>
|
||||
{renderShortNumericDateFormat(issue.target_date ?? "")}
|
||||
@ -423,14 +423,14 @@ const MyIssues: NextPage = () => {
|
||||
<div>
|
||||
{issue.target_date &&
|
||||
(issue.target_date < new Date().toISOString()
|
||||
? `Target date has passed by ${findHowManyDaysLeft(
|
||||
? `Due date has passed by ${findHowManyDaysLeft(
|
||||
issue.target_date
|
||||
)} days`
|
||||
: findHowManyDaysLeft(issue.target_date) <= 3
|
||||
? `Target date is in ${findHowManyDaysLeft(
|
||||
? `Due date is in ${findHowManyDaysLeft(
|
||||
issue.target_date
|
||||
)} days`
|
||||
: "Target date")}
|
||||
: "Due date")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,21 +1,17 @@
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
// next
|
||||
import Link from "next/link";
|
||||
import dynamic from "next/dynamic";
|
||||
import type { NextPage } from "next";
|
||||
import { useRouter } from "next/router";
|
||||
import dynamic from "next/dynamic";
|
||||
// swr
|
||||
import useSWR, { mutate } from "swr";
|
||||
import { mutate } from "swr";
|
||||
// react hook form
|
||||
import { useForm } from "react-hook-form";
|
||||
// headless ui
|
||||
import { Disclosure, Menu, Tab, Transition } from "@headlessui/react";
|
||||
// fetch keys
|
||||
import {
|
||||
PROJECT_ISSUES_ACTIVITY,
|
||||
PROJECT_ISSUES_COMMENTS,
|
||||
PROJECT_ISSUES_LIST,
|
||||
} from "constants/fetch-keys";
|
||||
import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
|
||||
// services
|
||||
import issuesServices from "lib/services/issues.service";
|
||||
// common
|
||||
@ -27,14 +23,23 @@ import withAuth from "lib/hoc/withAuthWrapper";
|
||||
// layouts
|
||||
import AppLayout from "layouts/app-layout";
|
||||
// components
|
||||
import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
|
||||
import IssueCommentSection from "components/project/issues/issue-detail/comment/IssueCommentSection";
|
||||
import AddAsSubIssue from "components/project/issues/issue-detail/add-as-sub-issue";
|
||||
import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
|
||||
import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
|
||||
import IssueDetailSidebar from "components/project/issues/issue-detail/issue-detail-sidebar";
|
||||
import IssueActivitySection from "components/project/issues/issue-detail/activity";
|
||||
import IssueCommentSection from "components/project/issues/issue-detail/comment/IssueCommentSection";
|
||||
const IssueActivitySection = dynamic(
|
||||
() => import("components/project/issues/issue-detail/activity"),
|
||||
{
|
||||
loading: () => (
|
||||
<div className="w-full h-full flex justify-center items-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
),
|
||||
ssr: false,
|
||||
}
|
||||
);
|
||||
// ui
|
||||
import { Spinner, TextArea, HeaderButton, Breadcrumbs, BreadcrumbItem, CustomMenu } from "ui";
|
||||
import { Spinner, TextArea, HeaderButton, Breadcrumbs } from "ui";
|
||||
// icons
|
||||
import {
|
||||
ChevronLeftIcon,
|
||||
@ -43,32 +48,51 @@ import {
|
||||
PlusIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
// types
|
||||
import { IIssue, IIssueComment, IssueResponse } from "types";
|
||||
import { IIssue, IssueResponse } from "types";
|
||||
|
||||
const RichTextEditor = dynamic(() => import("components/lexical/editor"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const defaultValues = {
|
||||
name: "",
|
||||
description: "",
|
||||
state: "",
|
||||
assignees_list: [],
|
||||
priority: "low",
|
||||
blockers_list: [],
|
||||
blocked_list: [],
|
||||
target_date: new Date().toString(),
|
||||
issue_cycle: null,
|
||||
labels_list: [],
|
||||
};
|
||||
|
||||
const IssueDetail: NextPage = () => {
|
||||
const [deleteIssueModal, setDeleteIssueModal] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
const { issueId, projectId } = router.query;
|
||||
|
||||
const { activeWorkspace, activeProject, issues, mutateIssues } = useUser();
|
||||
|
||||
const issueDetail = issues?.results?.find((issue) => issue.id === issueId);
|
||||
|
||||
const prevIssue = issues?.results[issues?.results.findIndex((issue) => issue.id === issueId) - 1];
|
||||
const nextIssue = issues?.results[issues?.results.findIndex((issue) => issue.id === issueId) + 1];
|
||||
|
||||
const subIssues = (issues && issues.results.filter((i) => i.parent === issueId)) ?? [];
|
||||
const siblingIssues =
|
||||
issueDetail &&
|
||||
issues?.results.filter((i) => i.parent === issueDetail.parent && i.id !== issueId);
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isAddAsSubIssueOpen, setIsAddAsSubIssueOpen] = useState(false);
|
||||
|
||||
const [issueDetail, setIssueDetail] = useState<IIssue | undefined>(undefined);
|
||||
|
||||
const [preloadedData, setPreloadedData] = useState<
|
||||
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
|
||||
>(undefined);
|
||||
|
||||
const [issueDescriptionValue, setIssueDescriptionValue] = useState("");
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const { issueId, projectId } = router.query;
|
||||
|
||||
const { activeWorkspace, activeProject, issues, mutateIssues, states } = useUser();
|
||||
|
||||
const handleDescriptionChange: any = (value: any) => {
|
||||
console.log(value);
|
||||
setIssueDescriptionValue(value);
|
||||
@ -82,44 +106,9 @@ const IssueDetail: NextPage = () => {
|
||||
control,
|
||||
watch,
|
||||
} = useForm<IIssue>({
|
||||
defaultValues: {
|
||||
name: "",
|
||||
description: "",
|
||||
state: "",
|
||||
assignees_list: [],
|
||||
priority: "low",
|
||||
blockers_list: [],
|
||||
blocked_list: [],
|
||||
target_date: new Date().toString(),
|
||||
issue_cycle: null,
|
||||
labels_list: [],
|
||||
},
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
const { data: issueActivities } = useSWR<any[]>(
|
||||
activeWorkspace && projectId && issueId ? PROJECT_ISSUES_ACTIVITY : null,
|
||||
activeWorkspace && projectId && issueId
|
||||
? () =>
|
||||
issuesServices.getIssueActivities(
|
||||
activeWorkspace.slug,
|
||||
projectId as string,
|
||||
issueId as string
|
||||
)
|
||||
: null
|
||||
);
|
||||
|
||||
const { data: issueComments } = useSWR<IIssueComment[]>(
|
||||
activeWorkspace && projectId && issueId ? PROJECT_ISSUES_COMMENTS(issueId as string) : null,
|
||||
activeWorkspace && projectId && issueId
|
||||
? () =>
|
||||
issuesServices.getIssueComments(
|
||||
activeWorkspace.slug,
|
||||
projectId as string,
|
||||
issueId as string
|
||||
)
|
||||
: null
|
||||
);
|
||||
|
||||
const submitChanges = useCallback(
|
||||
(formData: Partial<IIssue>) => {
|
||||
if (!activeWorkspace || !activeProject || !issueId) return;
|
||||
@ -180,19 +169,6 @@ const IssueDetail: NextPage = () => {
|
||||
});
|
||||
}, [issueDetail, reset]);
|
||||
|
||||
useEffect(() => {
|
||||
const issueDetail = issues?.results.find((issue) => issue.id === issueId);
|
||||
setIssueDetail(issueDetail);
|
||||
}, [issueId, issues]);
|
||||
|
||||
const prevIssue = issues?.results[issues?.results.findIndex((issue) => issue.id === issueId) - 1];
|
||||
const nextIssue = issues?.results[issues?.results.findIndex((issue) => issue.id === issueId) + 1];
|
||||
|
||||
const subIssues = (issues && issues.results.filter((i) => i.parent === issueId)) ?? [];
|
||||
const siblingIssues =
|
||||
issueDetail &&
|
||||
issues?.results.filter((i) => i.parent === issueDetail.parent && i.id !== issueId);
|
||||
|
||||
const handleSubIssueRemove = (issueId: string) => {
|
||||
if (activeWorkspace && activeProject) {
|
||||
issuesServices
|
||||
@ -215,19 +191,17 @@ const IssueDetail: NextPage = () => {
|
||||
}
|
||||
};
|
||||
|
||||
console.log("Issue detail", issueDetail);
|
||||
|
||||
return (
|
||||
<AppLayout
|
||||
noPadding={true}
|
||||
bg="secondary"
|
||||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem
|
||||
<Breadcrumbs.BreadcrumbItem
|
||||
title={`${activeProject?.name ?? "Project"} Issues`}
|
||||
link={`/projects/${activeProject?.id}/issues`}
|
||||
/>
|
||||
<BreadcrumbItem
|
||||
<Breadcrumbs.BreadcrumbItem
|
||||
title={`Issue ${activeProject?.identifier ?? "Project"}-${
|
||||
issueDetail?.sequence_id ?? "..."
|
||||
} Details`}
|
||||
@ -259,24 +233,23 @@ const IssueDetail: NextPage = () => {
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<CreateUpdateIssuesModal
|
||||
isOpen={isOpen}
|
||||
setIsOpen={setIsOpen}
|
||||
projectId={projectId as string}
|
||||
prePopulateData={{
|
||||
...preloadedData,
|
||||
}}
|
||||
/>
|
||||
<ConfirmIssueDeletion
|
||||
handleClose={() => setDeleteIssueModal(false)}
|
||||
isOpen={deleteIssueModal}
|
||||
data={issueDetail}
|
||||
/>
|
||||
<AddAsSubIssue
|
||||
isOpen={isAddAsSubIssueOpen}
|
||||
setIsOpen={setIsAddAsSubIssueOpen}
|
||||
parent={issueDetail}
|
||||
/>
|
||||
{isOpen && (
|
||||
<CreateUpdateIssuesModal
|
||||
isOpen={isOpen}
|
||||
setIsOpen={setIsOpen}
|
||||
projectId={projectId as string}
|
||||
prePopulateData={{
|
||||
...preloadedData,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{isAddAsSubIssueOpen && (
|
||||
<AddAsSubIssue
|
||||
isOpen={isAddAsSubIssueOpen}
|
||||
setIsOpen={setIsAddAsSubIssueOpen}
|
||||
parent={issueDetail}
|
||||
/>
|
||||
)}
|
||||
{issueDetail && activeProject ? (
|
||||
<div className="h-full flex gap-5">
|
||||
<div className="basis-2/3 space-y-5 p-5">
|
||||
@ -590,19 +563,10 @@ const IssueDetail: NextPage = () => {
|
||||
</Tab.List>
|
||||
<Tab.Panels>
|
||||
<Tab.Panel>
|
||||
<IssueCommentSection
|
||||
comments={issueComments}
|
||||
workspaceSlug={activeWorkspace?.slug as string}
|
||||
projectId={projectId as string}
|
||||
issueId={issueId as string}
|
||||
/>
|
||||
<IssueCommentSection />
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>
|
||||
<IssueActivitySection
|
||||
issueActivities={issueActivities}
|
||||
states={states}
|
||||
issues={issues}
|
||||
/>
|
||||
<IssueActivitySection />
|
||||
</Tab.Panel>
|
||||
</Tab.Panels>
|
||||
</Tab.Group>
|
||||
@ -615,7 +579,6 @@ const IssueDetail: NextPage = () => {
|
||||
issueDetail={issueDetail}
|
||||
submitChanges={submitChanges}
|
||||
watch={watch}
|
||||
setDeleteIssueModal={setDeleteIssueModal}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -177,9 +177,7 @@ const GeneralSettings = () => {
|
||||
error={errors.description}
|
||||
register={register}
|
||||
placeholder="Enter project description"
|
||||
validations={{
|
||||
required: "Description is required",
|
||||
}}
|
||||
validations={{}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
|
3
apps/app/types/issues.d.ts
vendored
3
apps/app/types/issues.d.ts
vendored
@ -72,6 +72,7 @@ export interface IIssue {
|
||||
blocked_issue_details: any[];
|
||||
sprints: string | null;
|
||||
cycle: string | null;
|
||||
cycle_detail: ICycle | null;
|
||||
|
||||
issue_cycle: IIssueCycle;
|
||||
}
|
||||
@ -130,7 +131,7 @@ export type Properties = {
|
||||
assignee: boolean;
|
||||
priority: boolean;
|
||||
start_date: boolean;
|
||||
target_date: boolean;
|
||||
due_date: boolean;
|
||||
cycle: boolean;
|
||||
children_count: boolean;
|
||||
};
|
||||
|
@ -6,7 +6,7 @@ type BreadcrumbsProps = {
|
||||
children: any;
|
||||
};
|
||||
|
||||
const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ children }: BreadcrumbsProps) => {
|
||||
const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
@ -54,4 +54,6 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ title, link, icon }) =>
|
||||
);
|
||||
};
|
||||
|
||||
Breadcrumbs.BreadcrumbItem = BreadcrumbItem;
|
||||
|
||||
export { Breadcrumbs, BreadcrumbItem };
|
||||
|
@ -39,7 +39,7 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange }) => {
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!value) onChange(getRandomEmoji());
|
||||
if (!value || value?.length === 0) onChange(getRandomEmoji());
|
||||
}, [value, onChange]);
|
||||
|
||||
return (
|
||||
|
Loading…
Reference in New Issue
Block a user