forked from github/plane
fix: consistent icons and modal fixes (#216)
* fix: consistent icons and modal fixes * fix: total worspace members * fix: sub issue mutation
This commit is contained in:
parent
7278b5727f
commit
eaa77a2552
@ -28,7 +28,7 @@ export const EmailSignInForm: FC<EmailSignInFormProps> = (props) => {
|
|||||||
<span className="bg-white px-2 text-gray-500">or</span>
|
<span className="bg-white px-2 text-gray-500">or</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-6 flex w-full flex-col items-stretch gap-y-2">
|
{/* <div className="mt-6 flex w-full flex-col items-stretch gap-y-2">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="flex w-full items-center rounded border border-gray-300 px-3 py-2 text-sm duration-300 hover:bg-gray-100"
|
className="flex w-full items-center rounded border border-gray-300 px-3 py-2 text-sm duration-300 hover:bg-gray-100"
|
||||||
@ -39,7 +39,7 @@ export const EmailSignInForm: FC<EmailSignInFormProps> = (props) => {
|
|||||||
{useCode ? "Continue with Password" : "Continue with Code"}
|
{useCode ? "Continue with Password" : "Continue with Code"}
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div> */}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
@ -24,8 +24,7 @@ import { IIssue, IssueResponse } from "types";
|
|||||||
import { PROJECT_ISSUES_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
|
import { PROJECT_ISSUES_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
|
||||||
|
|
||||||
type FormInput = {
|
type FormInput = {
|
||||||
issue_ids: string[];
|
delete_issue_ids: string[];
|
||||||
cycleId: string;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
@ -61,17 +60,27 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
|||||||
const { setToastAlert } = useToast();
|
const { setToastAlert } = useToast();
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register,
|
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
|
watch,
|
||||||
reset,
|
reset,
|
||||||
|
setValue,
|
||||||
formState: { isSubmitting },
|
formState: { isSubmitting },
|
||||||
} = useForm<FormInput>();
|
} = useForm<FormInput>({
|
||||||
|
defaultValues: {
|
||||||
|
delete_issue_ids: [],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
const filteredIssues: IIssue[] =
|
const filteredIssues: IIssue[] =
|
||||||
query === ""
|
query === ""
|
||||||
? issues?.results ?? []
|
? issues?.results ?? []
|
||||||
: issues?.results.filter((issue) => issue.name.toLowerCase().includes(query.toLowerCase())) ??
|
: issues?.results.filter(
|
||||||
[];
|
(issue) =>
|
||||||
|
issue.name.toLowerCase().includes(query.toLowerCase()) ||
|
||||||
|
`${issue.project_detail.identifier}-${issue.sequence_id}`
|
||||||
|
.toLowerCase()
|
||||||
|
.includes(query.toLowerCase())
|
||||||
|
) ?? [];
|
||||||
|
|
||||||
const handleClose = () => {
|
const handleClose = () => {
|
||||||
setIsOpen(false);
|
setIsOpen(false);
|
||||||
@ -80,7 +89,7 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleDelete: SubmitHandler<FormInput> = async (data) => {
|
const handleDelete: SubmitHandler<FormInput> = async (data) => {
|
||||||
if (!data.issue_ids || data.issue_ids.length === 0) {
|
if (!data.delete_issue_ids || data.delete_issue_ids.length === 0) {
|
||||||
setToastAlert({
|
setToastAlert({
|
||||||
title: "Error",
|
title: "Error",
|
||||||
type: "error",
|
type: "error",
|
||||||
@ -89,30 +98,34 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!Array.isArray(data.issue_ids)) data.issue_ids = [data.issue_ids];
|
if (!Array.isArray(data.delete_issue_ids)) data.delete_issue_ids = [data.delete_issue_ids];
|
||||||
|
|
||||||
if (workspaceSlug && projectId) {
|
if (workspaceSlug && projectId) {
|
||||||
await issuesServices
|
await issuesServices
|
||||||
.bulkDeleteIssues(workspaceSlug as string, projectId as string, data)
|
.bulkDeleteIssues(workspaceSlug as string, projectId as string, {
|
||||||
|
issue_ids: data.delete_issue_ids,
|
||||||
|
})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
setToastAlert({
|
setToastAlert({
|
||||||
title: "Success",
|
title: "Success",
|
||||||
type: "success",
|
type: "success",
|
||||||
message: res.message,
|
message: res.message,
|
||||||
});
|
});
|
||||||
|
|
||||||
mutate<IssueResponse>(
|
mutate<IssueResponse>(
|
||||||
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
|
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
|
||||||
(prevData) => ({
|
(prevData) => ({
|
||||||
...(prevData as IssueResponse),
|
...(prevData as IssueResponse),
|
||||||
count: (prevData?.results ?? []).filter(
|
count: (prevData?.results ?? []).filter(
|
||||||
(p) => !data.issue_ids.some((id) => p.id === id)
|
(p) => !data.delete_issue_ids.some((id) => p.id === id)
|
||||||
).length,
|
).length,
|
||||||
results: (prevData?.results ?? []).filter(
|
results: (prevData?.results ?? []).filter(
|
||||||
(p) => !data.issue_ids.some((id) => p.id === id)
|
(p) => !data.delete_issue_ids.some((id) => p.id === id)
|
||||||
),
|
),
|
||||||
}),
|
}),
|
||||||
false
|
false
|
||||||
);
|
);
|
||||||
|
handleClose();
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
console.log(e);
|
console.log(e);
|
||||||
@ -123,18 +136,6 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
|||||||
return (
|
return (
|
||||||
<Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
|
<Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
|
||||||
<Dialog as="div" className="relative z-20" onClose={handleClose}>
|
<Dialog as="div" className="relative z-20" onClose={handleClose}>
|
||||||
<Transition.Child
|
|
||||||
as={React.Fragment}
|
|
||||||
enter="ease-out duration-300"
|
|
||||||
enterFrom="opacity-0"
|
|
||||||
enterTo="opacity-100"
|
|
||||||
leave="ease-in duration-200"
|
|
||||||
leaveFrom="opacity-100"
|
|
||||||
leaveTo="opacity-0"
|
|
||||||
>
|
|
||||||
<div className="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity" />
|
|
||||||
</Transition.Child>
|
|
||||||
|
|
||||||
<div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
|
<div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
|
||||||
<Transition.Child
|
<Transition.Child
|
||||||
as={React.Fragment}
|
as={React.Fragment}
|
||||||
@ -145,15 +146,31 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
|||||||
leaveFrom="opacity-100 scale-100"
|
leaveFrom="opacity-100 scale-100"
|
||||||
leaveTo="opacity-0 scale-95"
|
leaveTo="opacity-0 scale-95"
|
||||||
>
|
>
|
||||||
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
|
<Dialog.Panel className="relative mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 rounded-xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
|
||||||
<form>
|
<form>
|
||||||
<Combobox>
|
<Combobox
|
||||||
|
onChange={(val: string) => {
|
||||||
|
const selectedIssues = watch("delete_issue_ids");
|
||||||
|
if (selectedIssues.includes(val))
|
||||||
|
setValue(
|
||||||
|
"delete_issue_ids",
|
||||||
|
selectedIssues.filter((i) => i !== val)
|
||||||
|
);
|
||||||
|
else {
|
||||||
|
const newToDelete = selectedIssues;
|
||||||
|
newToDelete.push(val);
|
||||||
|
|
||||||
|
setValue("delete_issue_ids", newToDelete);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
<div className="relative m-1">
|
<div className="relative m-1">
|
||||||
<MagnifyingGlassIcon
|
<MagnifyingGlassIcon
|
||||||
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
|
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
/>
|
/>
|
||||||
<Combobox.Input
|
<input
|
||||||
|
type="text"
|
||||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
|
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 outline-none focus:ring-0 sm:text-sm"
|
||||||
placeholder="Search..."
|
placeholder="Search..."
|
||||||
onChange={(event) => setQuery(event.target.value)}
|
onChange={(event) => setQuery(event.target.value)}
|
||||||
@ -175,12 +192,8 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
|||||||
{filteredIssues.map((issue) => (
|
{filteredIssues.map((issue) => (
|
||||||
<Combobox.Option
|
<Combobox.Option
|
||||||
key={issue.id}
|
key={issue.id}
|
||||||
as="label"
|
as="div"
|
||||||
htmlFor={`issue-${issue.id}`}
|
value={issue.id}
|
||||||
value={{
|
|
||||||
name: issue.name,
|
|
||||||
url: `/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`,
|
|
||||||
}}
|
|
||||||
className={({ active }) =>
|
className={({ active }) =>
|
||||||
`flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
|
`flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
|
||||||
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
|
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
|
||||||
@ -190,9 +203,8 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
|||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
{...register("issue_ids")}
|
checked={watch("delete_issue_ids").includes(issue.id)}
|
||||||
id={`issue-${issue.id}`}
|
readOnly
|
||||||
value={issue.id}
|
|
||||||
/>
|
/>
|
||||||
<span
|
<span
|
||||||
className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||||
@ -219,18 +231,6 @@ const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</Combobox.Options>
|
</Combobox.Options>
|
||||||
|
|
||||||
{query !== "" && filteredIssues.length === 0 && (
|
|
||||||
<div className="py-14 px-6 text-center sm:px-14">
|
|
||||||
<FolderIcon
|
|
||||||
className="mx-auto h-6 w-6 text-gray-900 text-opacity-40"
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
<p className="mt-4 text-sm text-gray-900">
|
|
||||||
We couldn{"'"}t find any issue with that term. Please try again.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Combobox>
|
</Combobox>
|
||||||
|
|
||||||
{filteredIssues.length > 0 && (
|
{filteredIssues.length > 0 && (
|
||||||
|
@ -7,7 +7,8 @@ import useSWR from "swr";
|
|||||||
// headless ui
|
// headless ui
|
||||||
import { Listbox, Transition } from "@headlessui/react";
|
import { Listbox, Transition } from "@headlessui/react";
|
||||||
// icons
|
// icons
|
||||||
import { PlusIcon, ArrowPathIcon } from "@heroicons/react/24/outline";
|
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||||
|
import { CyclesIcon } from "components/icons";
|
||||||
// services
|
// services
|
||||||
import cycleServices from "services/cycles.service";
|
import cycleServices from "services/cycles.service";
|
||||||
// components
|
// components
|
||||||
@ -65,7 +66,7 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
|
|||||||
<Listbox.Button
|
<Listbox.Button
|
||||||
className={`flex cursor-pointer items-center gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
|
className={`flex cursor-pointer items-center gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
|
||||||
>
|
>
|
||||||
<ArrowPathIcon className="h-3 w-3 text-gray-500" />
|
<CyclesIcon className="h-3 w-3 text-gray-500" />
|
||||||
<div className="flex items-center gap-2 truncate">
|
<div className="flex items-center gap-2 truncate">
|
||||||
{cycles?.find((c) => c.id === value)?.name ?? "Cycles"}
|
{cycles?.find((c) => c.id === value)?.name ?? "Cycles"}
|
||||||
</div>
|
</div>
|
||||||
|
@ -99,11 +99,6 @@ export const IssueForm: FC<IssueFormProps> = ({
|
|||||||
setMostSimilarIssue(similarIssue);
|
setMostSimilarIssue(similarIssue);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDiscard = () => {
|
|
||||||
reset({ ...defaultValues, project: projectId });
|
|
||||||
handleClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCreateUpdateIssue = async (formData: Partial<IIssue>) => {
|
const handleCreateUpdateIssue = async (formData: Partial<IIssue>) => {
|
||||||
await handleFormSubmit(formData);
|
await handleFormSubmit(formData);
|
||||||
|
|
||||||
@ -367,7 +362,7 @@ export const IssueForm: FC<IssueFormProps> = ({
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Button theme="secondary" onClick={handleDiscard}>
|
<Button theme="secondary" onClick={handleClose}>
|
||||||
Discard
|
Discard
|
||||||
</Button>
|
</Button>
|
||||||
<Button type="submit" disabled={isSubmitting}>
|
<Button type="submit" disabled={isSubmitting}>
|
||||||
|
@ -1,19 +1,19 @@
|
|||||||
// react
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
// next
|
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
|
|
||||||
// swr
|
// swr
|
||||||
import useSWR from "swr";
|
import useSWR from "swr";
|
||||||
// services
|
// services
|
||||||
import { CalendarDaysIcon } from "@heroicons/react/20/solid";
|
|
||||||
import { ArrowPathIcon, UserIcon } from "@heroicons/react/24/outline";
|
|
||||||
import cyclesService from "services/cycles.service";
|
import cyclesService from "services/cycles.service";
|
||||||
// hooks
|
|
||||||
// ui
|
// ui
|
||||||
import { Button, CustomMenu } from "components/ui";
|
import { Button, CustomMenu } from "components/ui";
|
||||||
// icons
|
// icons
|
||||||
|
import { CalendarDaysIcon } from "@heroicons/react/20/solid";
|
||||||
|
import { UserIcon } from "@heroicons/react/24/outline";
|
||||||
|
import { CyclesIcon } from "components/icons";
|
||||||
// helpers
|
// helpers
|
||||||
import { renderShortNumericDateFormat } from "helpers/date-time.helper";
|
import { renderShortNumericDateFormat } from "helpers/date-time.helper";
|
||||||
import { groupBy } from "helpers/array.helper";
|
import { groupBy } from "helpers/array.helper";
|
||||||
@ -120,7 +120,7 @@ const SingleStat: React.FC<TSingleStatProps> = (props) => {
|
|||||||
router.push(`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`)
|
router.push(`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<ArrowPathIcon className="h-3 w-3" />
|
<CyclesIcon className="h-3 w-3" />
|
||||||
Open Cycle
|
Open Cycle
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -11,7 +11,7 @@ import { RectangleStackIcon, MagnifyingGlassIcon } from "@heroicons/react/24/out
|
|||||||
// services
|
// services
|
||||||
import issuesServices from "services/issues.service";
|
import issuesServices from "services/issues.service";
|
||||||
// types
|
// types
|
||||||
import { IIssue } from "types";
|
import { IIssue, IssueResponse } from "types";
|
||||||
// constants
|
// constants
|
||||||
import { PROJECT_ISSUES_LIST, SUB_ISSUES } from "constants/fetch-keys";
|
import { PROJECT_ISSUES_LIST, SUB_ISSUES } from "constants/fetch-keys";
|
||||||
|
|
||||||
@ -54,6 +54,22 @@ const AddAsSubIssue: React.FC<Props> = ({ isOpen, setIsOpen, parent }) => {
|
|||||||
.patchIssue(workspaceSlug as string, projectId as string, issueId, { parent: parent?.id })
|
.patchIssue(workspaceSlug as string, projectId as string, issueId, { parent: parent?.id })
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
mutate(SUB_ISSUES(parent?.id ?? ""));
|
mutate(SUB_ISSUES(parent?.id ?? ""));
|
||||||
|
mutate<IssueResponse>(
|
||||||
|
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
|
||||||
|
(prevData) => ({
|
||||||
|
...(prevData as IssueResponse),
|
||||||
|
results: (prevData?.results ?? []).map((p) => {
|
||||||
|
if (p.id === res.id)
|
||||||
|
return {
|
||||||
|
...p,
|
||||||
|
...res,
|
||||||
|
};
|
||||||
|
|
||||||
|
return p;
|
||||||
|
}),
|
||||||
|
}),
|
||||||
|
false
|
||||||
|
);
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
console.log(e);
|
console.log(e);
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
// react
|
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
// next
|
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import dynamic from "next/dynamic";
|
import dynamic from "next/dynamic";
|
||||||
|
|
||||||
@ -8,14 +7,14 @@ import dynamic from "next/dynamic";
|
|||||||
import { useForm } from "react-hook-form";
|
import { useForm } from "react-hook-form";
|
||||||
// icons
|
// icons
|
||||||
import { CheckIcon, XMarkIcon } from "@heroicons/react/24/outline";
|
import { CheckIcon, XMarkIcon } from "@heroicons/react/24/outline";
|
||||||
// types
|
|
||||||
import type { IIssueComment } from "types";
|
|
||||||
// hooks
|
// hooks
|
||||||
import useUser from "hooks/use-user";
|
import useUser from "hooks/use-user";
|
||||||
// ui
|
// ui
|
||||||
import { CustomMenu } from "components/ui";
|
import { CustomMenu } from "components/ui";
|
||||||
// helpers
|
// helpers
|
||||||
import { timeAgo } from "helpers/date-time.helper";
|
import { timeAgo } from "helpers/date-time.helper";
|
||||||
|
// types
|
||||||
|
import type { IIssueComment } from "types";
|
||||||
|
|
||||||
const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), { ssr: false });
|
const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), { ssr: false });
|
||||||
|
|
||||||
@ -76,7 +75,7 @@ const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion
|
|||||||
</span>
|
</span>
|
||||||
<span>{timeAgo(comment.created_at)}</span>
|
<span>{timeAgo(comment.created_at)}</span>
|
||||||
</p>
|
</p>
|
||||||
<div>
|
<div className="issue-comments-section">
|
||||||
{isEditing ? (
|
{isEditing ? (
|
||||||
<form className="flex flex-col gap-2" onSubmit={handleSubmit(onEnter)}>
|
<form className="flex flex-col gap-2" onSubmit={handleSubmit(onEnter)}>
|
||||||
<RemirrorRichTextEditor
|
<RemirrorRichTextEditor
|
||||||
|
@ -5,15 +5,15 @@ import dynamic from "next/dynamic";
|
|||||||
|
|
||||||
// react-hook-form
|
// react-hook-form
|
||||||
import { useForm, Controller } from "react-hook-form";
|
import { useForm, Controller } from "react-hook-form";
|
||||||
// types
|
|
||||||
import type { IIssueActivity, IIssueComment } from "types";
|
|
||||||
import type { KeyedMutator } from "swr";
|
|
||||||
// services
|
// services
|
||||||
import issuesServices from "services/issues.service";
|
import issuesServices from "services/issues.service";
|
||||||
// ui
|
// ui
|
||||||
import { Loader } from "components/ui";
|
import { Loader } from "components/ui";
|
||||||
// helpers
|
// helpers
|
||||||
import { debounce } from "helpers/functions.helper";
|
import { debounce } from "helpers/functions.helper";
|
||||||
|
// types
|
||||||
|
import type { IIssueActivity, IIssueComment } from "types";
|
||||||
|
import type { KeyedMutator } from "swr";
|
||||||
|
|
||||||
const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
|
const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
|
||||||
ssr: false,
|
ssr: false,
|
||||||
@ -83,7 +83,7 @@ const AddIssueComment: React.FC<{
|
|||||||
return (
|
return (
|
||||||
<div className="space-y-5">
|
<div className="space-y-5">
|
||||||
<form onSubmit={handleSubmit(onSubmit)}>
|
<form onSubmit={handleSubmit(onSubmit)}>
|
||||||
<div className="issue-comments-section rounded-md p-2 pt-3">
|
<div className="issue-comments-section">
|
||||||
<Controller
|
<Controller
|
||||||
name="comment_html"
|
name="comment_html"
|
||||||
control={control}
|
control={control}
|
||||||
|
@ -1,21 +1,21 @@
|
|||||||
// react
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
|
|
||||||
import useSWR, { mutate } from "swr";
|
import useSWR, { mutate } from "swr";
|
||||||
|
|
||||||
|
// react-hook-form
|
||||||
import { UseFormWatch } from "react-hook-form";
|
import { UseFormWatch } from "react-hook-form";
|
||||||
// constants
|
|
||||||
import { ArrowPathIcon } from "@heroicons/react/24/outline";
|
|
||||||
// services
|
// services
|
||||||
import issuesService from "services/issues.service";
|
import issuesService from "services/issues.service";
|
||||||
import cyclesService from "services/cycles.service";
|
import cyclesService from "services/cycles.service";
|
||||||
// ui
|
// ui
|
||||||
import { Spinner, CustomSelect } from "components/ui";
|
import { Spinner, CustomSelect } from "components/ui";
|
||||||
// icons
|
// icons
|
||||||
|
import { CyclesIcon } from "components/icons";
|
||||||
// types
|
// types
|
||||||
import { ICycle, IIssue } from "types";
|
import { ICycle, IIssue } from "types";
|
||||||
|
// fetch-keys
|
||||||
import { CYCLE_ISSUES, CYCLE_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
|
import { CYCLE_ISSUES, CYCLE_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
@ -55,7 +55,7 @@ const SelectCycle: React.FC<Props> = ({ issueDetail, handleCycleChange }) => {
|
|||||||
return (
|
return (
|
||||||
<div className="flex flex-wrap items-center py-2">
|
<div className="flex flex-wrap items-center py-2">
|
||||||
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
|
<div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
|
||||||
<ArrowPathIcon className="h-4 w-4 flex-shrink-0" />
|
<CyclesIcon className="h-4 w-4 flex-shrink-0" />
|
||||||
<p>Cycle</p>
|
<p>Cycle</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-1 sm:basis-1/2">
|
<div className="space-y-1 sm:basis-1/2">
|
||||||
|
@ -32,11 +32,8 @@ export const RichTextToolbar: React.FC = () => (
|
|||||||
<OrderedListButton />
|
<OrderedListButton />
|
||||||
<UnorderedListButton />
|
<UnorderedListButton />
|
||||||
</div>
|
</div>
|
||||||
{/* <div className="px-2">
|
{/* <div className="flex items-center gap-x-1 px-2">
|
||||||
<TableControls />
|
|
||||||
</div> */}
|
|
||||||
<div className="flex items-center gap-x-1 px-2">
|
|
||||||
<LinkButton />
|
<LinkButton />
|
||||||
</div>
|
</div> */}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -155,7 +155,8 @@ export const WorkspaceSidebarDropdown = () => {
|
|||||||
<div className="text-left">
|
<div className="text-left">
|
||||||
<h5 className="text-sm">{workspace.name}</h5>
|
<h5 className="text-sm">{workspace.name}</h5>
|
||||||
<div className="text-xs text-gray-500">
|
<div className="text-xs text-gray-500">
|
||||||
{workspace.total_members} members
|
{workspace.total_members}{" "}
|
||||||
|
{workspace.total_members > 1 ? "members" : "member"}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
|
@ -10,28 +10,24 @@ type Props = {
|
|||||||
setToggleSidebar: React.Dispatch<React.SetStateAction<boolean>>;
|
setToggleSidebar: React.Dispatch<React.SetStateAction<boolean>>;
|
||||||
};
|
};
|
||||||
|
|
||||||
const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar }) => {
|
const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar }) => (
|
||||||
return (
|
<div className="flex w-full flex-col gap-y-4 border-b border-gray-200 bg-gray-50 px-5 py-4 lg:flex-row lg:items-center lg:justify-between">
|
||||||
<>
|
<div className="flex items-center gap-2">
|
||||||
<div className="flex w-full flex-col gap-y-4 border-b border-gray-200 bg-gray-50 px-5 py-4 lg:flex-row lg:items-center lg:justify-between">
|
<div className="block md:hidden">
|
||||||
<div className="flex items-center gap-2">
|
<Button
|
||||||
<div className="block md:hidden">
|
type="button"
|
||||||
<Button
|
theme="secondary"
|
||||||
type="button"
|
className="h-8 w-8"
|
||||||
theme="secondary"
|
onClick={() => setToggleSidebar((prevData) => !prevData)}
|
||||||
className="h-8 w-8"
|
>
|
||||||
onClick={() => setToggleSidebar((prevData) => !prevData)}
|
<Bars3Icon className="h-5 w-5" />
|
||||||
>
|
</Button>
|
||||||
<Bars3Icon className="h-5 w-5" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
{breadcrumbs}
|
|
||||||
{left}
|
|
||||||
</div>
|
|
||||||
{right}
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
{breadcrumbs}
|
||||||
);
|
{left}
|
||||||
};
|
</div>
|
||||||
|
{right}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
export default Header;
|
export default Header;
|
||||||
|
@ -1,5 +1,3 @@
|
|||||||
import { Dispatch, SetStateAction } from "react";
|
|
||||||
|
|
||||||
// hooks
|
// hooks
|
||||||
import useTheme from "hooks/use-theme";
|
import useTheme from "hooks/use-theme";
|
||||||
// components
|
// components
|
||||||
|
@ -10,13 +10,6 @@ import { requiredAdmin, requiredAuth } from "lib/auth";
|
|||||||
import AppLayout from "layouts/app-layout";
|
import AppLayout from "layouts/app-layout";
|
||||||
// contexts
|
// contexts
|
||||||
import { IssueViewContextProvider } from "contexts/issue-view.context";
|
import { IssueViewContextProvider } from "contexts/issue-view.context";
|
||||||
// icons
|
|
||||||
import {
|
|
||||||
ArrowLeftIcon,
|
|
||||||
ArrowPathIcon,
|
|
||||||
ListBulletIcon,
|
|
||||||
PlusIcon,
|
|
||||||
} from "@heroicons/react/24/outline";
|
|
||||||
// components
|
// components
|
||||||
import CyclesListView from "components/project/cycles/list-view";
|
import CyclesListView from "components/project/cycles/list-view";
|
||||||
import CyclesBoardView from "components/project/cycles/board-view";
|
import CyclesBoardView from "components/project/cycles/board-view";
|
||||||
@ -33,6 +26,8 @@ import projectService from "services/project.service";
|
|||||||
import { CustomMenu, EmptySpace, EmptySpaceItem, Spinner } from "components/ui";
|
import { CustomMenu, EmptySpace, EmptySpaceItem, Spinner } from "components/ui";
|
||||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||||
// icons
|
// icons
|
||||||
|
import { ArrowLeftIcon, ListBulletIcon, PlusIcon } from "@heroicons/react/24/outline";
|
||||||
|
import { CyclesIcon } from "components/icons";
|
||||||
// types
|
// types
|
||||||
import { CycleIssueResponse, IIssue, SelectIssue, UserAuth } from "types";
|
import { CycleIssueResponse, IIssue, SelectIssue, UserAuth } from "types";
|
||||||
import { NextPageContext } from "next";
|
import { NextPageContext } from "next";
|
||||||
@ -203,7 +198,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
|
|||||||
<CustomMenu
|
<CustomMenu
|
||||||
label={
|
label={
|
||||||
<>
|
<>
|
||||||
<ArrowPathIcon className="h-3 w-3" />
|
<CyclesIcon className="h-3 w-3" />
|
||||||
{cycles?.find((c) => c.id === cycleId)?.name}
|
{cycles?.find((c) => c.id === cycleId)?.name}
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
@ -268,7 +263,7 @@ const SingleCycle: React.FC<UserAuth> = (props) => {
|
|||||||
<EmptySpace
|
<EmptySpace
|
||||||
title="You don't have any issue yet."
|
title="You don't have any issue yet."
|
||||||
description="A cycle is a fixed time period where a team commits to a set number of issues from their backlog. Cycles are usually one, two, or four weeks long."
|
description="A cycle is a fixed time period where a team commits to a set number of issues from their backlog. Cycles are usually one, two, or four weeks long."
|
||||||
Icon={ArrowPathIcon}
|
Icon={CyclesIcon}
|
||||||
>
|
>
|
||||||
<EmptySpaceItem
|
<EmptySpaceItem
|
||||||
title="Create a new issue"
|
title="Create a new issue"
|
||||||
|
@ -25,7 +25,7 @@ import { Breadcrumbs } from "components/breadcrumbs";
|
|||||||
// icons
|
// icons
|
||||||
import { PlusIcon } from "@heroicons/react/24/outline";
|
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||||
// types
|
// types
|
||||||
import { IIssue } from "types";
|
import { IIssue, IssueResponse } from "types";
|
||||||
import type { NextPage, NextPageContext } from "next";
|
import type { NextPage, NextPageContext } from "next";
|
||||||
// fetch-keys
|
// fetch-keys
|
||||||
import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS, SUB_ISSUES } from "constants/fetch-keys";
|
import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS, SUB_ISSUES } from "constants/fetch-keys";
|
||||||
@ -154,6 +154,23 @@ const IssueDetailsPage: NextPage = () => {
|
|||||||
.then((res) => {
|
.then((res) => {
|
||||||
mutate(SUB_ISSUES(issueDetails?.id ?? ""));
|
mutate(SUB_ISSUES(issueDetails?.id ?? ""));
|
||||||
mutateIssueActivities();
|
mutateIssueActivities();
|
||||||
|
|
||||||
|
mutate<IssueResponse>(
|
||||||
|
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
|
||||||
|
(prevData) => ({
|
||||||
|
...(prevData as IssueResponse),
|
||||||
|
results: (prevData?.results ?? []).map((p) => {
|
||||||
|
if (p.id === res.id)
|
||||||
|
return {
|
||||||
|
...p,
|
||||||
|
...res,
|
||||||
|
};
|
||||||
|
|
||||||
|
return p;
|
||||||
|
}),
|
||||||
|
}),
|
||||||
|
false
|
||||||
|
);
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
console.error(e);
|
console.error(e);
|
||||||
|
@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
|
|||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import useSWR, { mutate } from "swr";
|
import useSWR, { mutate } from "swr";
|
||||||
|
|
||||||
// react-hook-form
|
// react-hook-form
|
||||||
import { Controller, useForm } from "react-hook-form";
|
import { Controller, useForm } from "react-hook-form";
|
||||||
// react-dropzone
|
// react-dropzone
|
||||||
|
@ -354,6 +354,10 @@ img.ProseMirror-separator {
|
|||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.remirror-editor-wrapper .remirror-editor {
|
||||||
|
min-height: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
.issue-comments-section .remirror-editor-wrapper .remirror-editor {
|
.issue-comments-section .remirror-editor-wrapper .remirror-editor {
|
||||||
min-height: 50px;
|
min-height: 50px;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user