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

style: transfer issue modal empty state added (#652)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-03-31 16:05:02 +05:30 committed by GitHub
parent a6f306209d
commit f6500914be
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
apps/app/components/cycles/transfer-issues-modal.tsx
View File

@ -12,7 +12,7 @@ import cyclesService from "services/cycles.service";
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
//icons //icons
import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline"; import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { ContrastIcon, CyclesIcon } from "components/icons"; import { ContrastIcon, CyclesIcon, ExclamationIcon } from "components/icons";
// fetch-key // fetch-key
import { CYCLE_INCOMPLETE_LIST } from "constants/fetch-keys"; import { CYCLE_INCOMPLETE_LIST } from "constants/fetch-keys";
// types // types
@ -31,7 +31,6 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
const transferIssue = async (payload: any) => { const transferIssue = async (payload: any) => {
await cyclesService await cyclesService
.transferIssues(workspaceSlug as string, projectId as string, cycleId as string, payload) .transferIssues(workspaceSlug as string, projectId as string, cycleId as string, payload)
@ -39,16 +38,14 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
setToastAlert({ setToastAlert({
type: "success", type: "success",
title: "Issues transfered successfully", title: "Issues transfered successfully",
message: message: "Issues have been transferred successfully",
"Issues have been transferred successfully",
}); });
}) })
.catch((err) => { .catch((err) => {
setToastAlert({ setToastAlert({
type: "error", type: "error",
title: "Error!", title: "Error!",
message: message: "Issues cannot be transfer. Please try again.",
"Issues cannot be transfer. Please try again.",
}); });
}); });
}; };
@ -100,15 +97,15 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform rounded-lg bg-white p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl"> <Dialog.Panel className="relative transform rounded-lg bg-white py-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between px-5">
<h4 className="text-gray-700 text-base">Transfer Issues</h4> <h4 className="text-gray-700 text-base">Transfer Issues</h4>
<button onClick={handleClose}> <button onClick={handleClose}>
<XMarkIcon className="h-4 w-4" /> <XMarkIcon className="h-4 w-4" />
</button> </button>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 pb-3 px-5 border-b border-gray-200">
<MagnifyingGlassIcon className="h-4 w-4 text-gray-500" /> <MagnifyingGlassIcon className="h-4 w-4 text-gray-500" />
<input <input
className="outline-none" className="outline-none"
@ -117,7 +114,7 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
value={query} value={query}
/> />
</div> </div>
<div className="flex flex-col items-start w-full gap-2"> <div className="flex flex-col items-start w-full gap-2 px-5">
{filteredOptions ? ( {filteredOptions ? (
filteredOptions.length > 0 ? ( filteredOptions.length > 0 ? (
filteredOptions.map((option: ICycle) => ( filteredOptions.map((option: ICycle) => (
@ -136,7 +133,13 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
</button> </button>
)) ))
) : ( ) : (
<p className="text-center text-gray-500">No matching results</p> <div className="flex items-center justify-center gap-4 p-5 text-sm w-full">
<ExclamationIcon height={14} width={14} />
<span className="text-center text-gray-500">
You don’t have any current cycle. Please create one to transfer the
issues.
</span>
</div>
) )
) : ( ) : (
<p className="text-center text-gray-500">Loading...</p> <p className="text-center text-gray-500">Loading...</p>